From de10ffb43ea87e6053bf077777b68f4bf130bfd9 Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Wed, 25 Apr 2018 19:10:34 +0200 Subject: [PATCH 01/10] New table version that takes any css width This way you're not limited to creating tables with fixed-width columns. This also makes the table take up the maximum available width space by default. --- elm-package.json | 1 + src/Nri/Ui/Table/V2.elm | 279 ++++++++++++++++++++++++++++++ styleguide-app/Examples/Table.elm | 31 ++-- styleguide-app/NriModules.elm | 2 +- 4 files changed, 297 insertions(+), 16 deletions(-) create mode 100644 src/Nri/Ui/Table/V2.elm diff --git a/elm-package.json b/elm-package.json index 56455bd9..284fb614 100644 --- a/elm-package.json +++ b/elm-package.json @@ -33,6 +33,7 @@ "Nri.Ui.Select.V2", "Nri.Ui.Styles.V1", "Nri.Ui.Table.V1", + "Nri.Ui.Table.V2", "Nri.Ui.Tabs.V1", "Nri.Ui.Text.Writing.V1", "Nri.Ui.Text.V1", diff --git a/src/Nri/Ui/Table/V2.elm b/src/Nri/Ui/Table/V2.elm new file mode 100644 index 00000000..0e763f98 --- /dev/null +++ b/src/Nri/Ui/Table/V2.elm @@ -0,0 +1,279 @@ +module Nri.Ui.Table.V2 + exposing + ( Column + , custom + , keyframeStyles + , keyframes + , string + , styles + , view + , viewLoading + , viewLoadingWithoutHeader + , viewWithoutHeader + ) + +{-| + +@docs Column, custom, string, styles + +@docs view, viewWithoutHeader + +@docs viewLoading, viewLoadingWithoutHeader + +@docs keyframes, keyframeStyles + +-} + +import Css exposing (..) +import Css.Foreign exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass) +import Html exposing (..) +import Html.Attributes exposing (style) +import Nri.Ui.Colors.V1 exposing (..) +import Nri.Ui.Fonts.V1 exposing (baseFont) +import Nri.Ui.Styles.V1 exposing (styles) + + +{-| Closed representation of how to render the header and cells of a column +in the table +-} +type Column data msg + = Column (Html msg) (data -> Html msg) Style + + +type alias WidthStyle = + List ( String, String ) + + +{-| A column that renders some aspect of a value as text +-} +string : + { header : String + , value : data -> String + , width : LengthOrAuto compatible + } + -> Column data msg +string { header, value, width } = + Column (Html.text header) (value >> Html.text) (Css.width width) + + +{-| A column that renders however you want it to +-} +custom : + { header : Html msg + , view : data -> Html msg + , width : LengthOrAuto compatible + } + -> Column data msg +custom { header, view, width } = + Column header view (Css.width width) + + + +-- VIEW + + +{-| Displays a table of data without a header row +-} +viewWithoutHeader : List (Column data msg) -> List data -> Html msg +viewWithoutHeader columns data = + table [] <| + List.map (viewRow columns) data + + +{-| Displays a table of data based on the provided column definitions +-} +view : List (Column data msg) -> List data -> Html msg +view columns data = + tableWithHeader [] columns <| + List.map (viewRow columns) data + + +viewHeaders : List (Column data msg) -> Html msg +viewHeaders columns = + tr + [ styles.class [ Headers ] ] + (List.map viewRowHeader columns) + + +viewRowHeader : Column data msg -> Html msg +viewRowHeader (Column header _ width) = + th + [ styles.class [ Header ] + , style (asPairsDEPRECATED [ width ]) + ] + [ header ] + + +viewRow : List (Column data msg) -> data -> Html msg +viewRow columns data = + tr + [ styles.class [ Row ] ] + (List.map (viewColumn data) columns) + + +viewColumn : data -> Column data msg -> Html msg +viewColumn data (Column _ renderer width) = + td + [ styles.class [ Cell ] + , style (asPairsDEPRECATED [ width ]) + ] + [ renderer data ] + + + +-- VIEW LOADING + + +{-| Display a table with the given columns but instead of data, show blocked +out text with an interesting animation. This view lets the user know that +data is on its way and what it will look like when it arrives. +-} +viewLoading : List (Column data msg) -> Html msg +viewLoading columns = + tableWithHeader [ LoadingTable ] columns <| + List.map (viewLoadingRow columns) (List.range 0 8) + + +{-| Display the loading table without a header row +-} +viewLoadingWithoutHeader : List (Column data msg) -> Html msg +viewLoadingWithoutHeader columns = + table [ LoadingTable ] <| + List.map (viewLoadingRow columns) (List.range 0 8) + + +viewLoadingRow : List (Column data msg) -> Int -> Html msg +viewLoadingRow columns index = + tr + [ styles.class [ Row ] ] + (List.indexedMap (viewLoadingColumn index) columns) + + +viewLoadingColumn : Int -> Int -> Column data msg -> Html msg +viewLoadingColumn rowIndex colIndex (Column _ _ width) = + td + [ styles.class [ Cell, LoadingCell ] + , style (stylesLoadingColumn rowIndex colIndex width) + ] + [ span [ styles.class [ LoadingContent ] ] [] ] + + +stylesLoadingColumn : Int -> Int -> Style -> List ( String, String ) +stylesLoadingColumn rowIndex colIndex width = + asPairsDEPRECATED + [ width + , property "animation-delay" (toString (toFloat (rowIndex + colIndex) * 0.1) ++ "s") + ] + + + +-- HELP + + +table : List CssClasses -> List (Html msg) -> Html msg +table classes = + Html.table [ styles.class (Table :: classes) ] + + +tableWithHeader : List CssClasses -> List (Column data msg) -> List (Html msg) -> Html msg +tableWithHeader classes columns rows = + table classes (viewHeaders columns :: rows) + + + +-- STYLES + + +type CssClasses + = Table + | LoadingTable + | Row + | Cell + | Headers + | Header + | LoadingContent + | LoadingCell + + +{-| -} +styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg +styles = + Nri.Ui.Styles.V1.styles "Nri-Ui-Table-V1-" + [ Css.Foreign.class Headers + [ borderBottom3 (px 3) solid gray75 + , height (px 45) + , fontSize (px 15) + ] + , Css.Foreign.class Header + [ padding4 (px 15) (px 12) (px 11) (px 12) + , textAlign left + , fontWeight bold + ] + , Css.Foreign.class Row + [ height (px 45) + , fontSize (px 14) + , color gray45 + , pseudoClass "nth-child(odd)" + [ backgroundColor gray96 ] + ] + , Css.Foreign.class Cell + [ padding2 (px 14) (px 10) + ] + , Css.Foreign.class LoadingContent + [ width (pct 100) + , display inlineBlock + , height (Css.em 1) + , borderRadius (Css.em 1) + , backgroundColor gray75 + ] + , Css.Foreign.class LoadingCell + flashAnimation + , Css.Foreign.class LoadingTable + fadeInAnimation + , Css.Foreign.class Table + [ borderCollapse collapse + , baseFont + , Css.width (Css.pct 100) + ] + ] + + +{-| -} +keyframes : List Nri.Ui.Styles.V1.Keyframe +keyframes = + [ Nri.Ui.Styles.V1.keyframes "Nri-Ui-Table-V1-flash" + [ ( "0%", "opacity: 0.6" ) + , ( "50%", "opacity: 0.2" ) + , ( "100%", "opacity: 0.6" ) + ] + , Nri.Ui.Styles.V1.keyframes "Nri-Ui-Table-V1-fadein" + [ ( "from", "opacity: 0" ) + , ( "to", "opacity: 1" ) + ] + ] + + +{-| -} +keyframeStyles : Html msg +keyframeStyles = + Html.node "style" + [] + (List.map (Html.text << Nri.Ui.Styles.V1.toString) keyframes) + + +flashAnimation : List Css.Style +flashAnimation = + [ property "-webkit-animation" "Nri-Ui-Table-V1-flash 2s infinite" + , property "-moz-animation" "Nri-Ui-Table-V1-flash 2s infinite" + , property "animation" "Nri-Ui-Table-V1-flash 2s infinite" + , opacity (num 0.6) + ] + + +fadeInAnimation : List Css.Style +fadeInAnimation = + [ property "-webkit-animation" "Nri-Ui-Table-V1-fadein 0.4s 0.2s forwards" + , property "-moz-animation" "Nri-Ui-Table-V1-fadein 0.4s 0.2s forwards" + , property "animation" "Nri-Ui-Table-V1-fadein 0.4s 0.2s forwards" + , opacity (num 0) + ] diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm index b2b91b17..e31e7f25 100644 --- a/styleguide-app/Examples/Table.elm +++ b/styleguide-app/Examples/Table.elm @@ -4,10 +4,11 @@ module Examples.Table exposing (Msg, State, example, init, update) @docs Msg, State, example, init, update -} +import Css exposing (..) import Html import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) import Nri.Ui.Button.V1 as Button -import Nri.Ui.Table.V1 as Table +import Nri.Ui.Table.V2 as Table {-| -} @@ -31,16 +32,16 @@ example parentMessage state = [ Table.string { header = "First Name" , value = .firstName - , width = 125 + , width = calc (pct 50) minus (px 125) } , Table.string { header = "Last Name" , value = .lastName - , width = 125 + , width = calc (pct 50) minus (px 125) } , Table.custom { header = Html.text "Actions" - , width = 150 + , width = px 250 , view = \_ -> Button.button @@ -62,17 +63,17 @@ example parentMessage state = , { firstName = "First5", lastName = "Last5" } ] in - [ Table.keyframeStyles - , Html.h4 [] [ Html.text "With header" ] - , Table.view columns data - , Html.h4 [] [ Html.text "Without header" ] - , Table.viewWithoutHeader columns data - , Html.h4 [] [ Html.text "Loading" ] - , Table.viewLoading columns - , Html.h4 [] [ Html.text "Loading without header" ] - , Table.viewLoadingWithoutHeader columns - ] - |> List.map (Html.map parentMessage) + [ Table.keyframeStyles + , Html.h4 [] [ Html.text "With header" ] + , Table.view columns data + , Html.h4 [] [ Html.text "Without header" ] + , Table.viewWithoutHeader columns data + , Html.h4 [] [ Html.text "Loading" ] + , Table.viewLoading columns + , Html.h4 [] [ Html.text "Loading without header" ] + , Table.viewLoadingWithoutHeader columns + ] + |> List.map (Html.map parentMessage) } diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm index 7621db6c..955b3940 100644 --- a/styleguide-app/NriModules.elm +++ b/styleguide-app/NriModules.elm @@ -21,7 +21,7 @@ import Nri.Ui.Dropdown.V1 import Nri.Ui.Icon.V2 import Nri.Ui.SegmentedControl.V5 import Nri.Ui.Select.V2 -import Nri.Ui.Table.V1 as Table +import Nri.Ui.Table.V2 as Table import Nri.Ui.Text.V1 as Text import Nri.Ui.TextArea.V1 as TextArea import String.Extra From 8f344774c3c4fa4b4f6b35732991d5fdf66d0e00 Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Wed, 25 Apr 2018 19:25:34 +0200 Subject: [PATCH 02/10] Switch Table.V2 over to Html.Styled This is probably better then relying on more deprecated elm css functionality, like we were before. --- src/Nri/Ui/Table/V2.elm | 158 +++++++++++++++--------------- styleguide-app/Examples/Table.elm | 12 ++- styleguide-app/NriModules.elm | 34 +++---- 3 files changed, 105 insertions(+), 99 deletions(-) diff --git a/src/Nri/Ui/Table/V2.elm b/src/Nri/Ui/Table/V2.elm index 0e763f98..94d4c540 100644 --- a/src/Nri/Ui/Table/V2.elm +++ b/src/Nri/Ui/Table/V2.elm @@ -5,7 +5,6 @@ module Nri.Ui.Table.V2 , keyframeStyles , keyframes , string - , styles , view , viewLoading , viewLoadingWithoutHeader @@ -14,7 +13,7 @@ module Nri.Ui.Table.V2 {-| -@docs Column, custom, string, styles +@docs Column, custom, string @docs view, viewWithoutHeader @@ -25,12 +24,11 @@ module Nri.Ui.Table.V2 -} import Css exposing (..) -import Css.Foreign exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass) -import Html exposing (..) -import Html.Attributes exposing (style) +import Html.Styled as Html exposing (..) +import Html.Styled.Attributes exposing (css) import Nri.Ui.Colors.V1 exposing (..) import Nri.Ui.Fonts.V1 exposing (baseFont) -import Nri.Ui.Styles.V1 exposing (styles) +import Nri.Ui.Styles.V1 {-| Closed representation of how to render the header and cells of a column @@ -91,15 +89,14 @@ view columns data = viewHeaders : List (Column data msg) -> Html msg viewHeaders columns = tr - [ styles.class [ Headers ] ] + [ css headersStyles ] (List.map viewRowHeader columns) viewRowHeader : Column data msg -> Html msg viewRowHeader (Column header _ width) = th - [ styles.class [ Header ] - , style (asPairsDEPRECATED [ width ]) + [ css (width :: headerStyles) ] [ header ] @@ -107,15 +104,14 @@ viewRowHeader (Column header _ width) = viewRow : List (Column data msg) -> data -> Html msg viewRow columns data = tr - [ styles.class [ Row ] ] + [ css rowStyles ] (List.map (viewColumn data) columns) viewColumn : data -> Column data msg -> Html msg viewColumn data (Column _ renderer width) = td - [ styles.class [ Cell ] - , style (asPairsDEPRECATED [ width ]) + [ css (width :: cellStyles) ] [ renderer data ] @@ -130,7 +126,7 @@ data is on its way and what it will look like when it arrives. -} viewLoading : List (Column data msg) -> Html msg viewLoading columns = - tableWithHeader [ LoadingTable ] columns <| + tableWithHeader loadingTableStyles columns <| List.map (viewLoadingRow columns) (List.range 0 8) @@ -138,104 +134,108 @@ viewLoading columns = -} viewLoadingWithoutHeader : List (Column data msg) -> Html msg viewLoadingWithoutHeader columns = - table [ LoadingTable ] <| + table loadingTableStyles <| List.map (viewLoadingRow columns) (List.range 0 8) viewLoadingRow : List (Column data msg) -> Int -> Html msg viewLoadingRow columns index = tr - [ styles.class [ Row ] ] + [ css rowStyles ] (List.indexedMap (viewLoadingColumn index) columns) viewLoadingColumn : Int -> Int -> Column data msg -> Html msg viewLoadingColumn rowIndex colIndex (Column _ _ width) = td - [ styles.class [ Cell, LoadingCell ] - , style (stylesLoadingColumn rowIndex colIndex width) + [ css (stylesLoadingColumn rowIndex colIndex width ++ cellStyles ++ loadingCellStyles) ] - [ span [ styles.class [ LoadingContent ] ] [] ] + [ span [ css loadingContentStyles ] [] ] -stylesLoadingColumn : Int -> Int -> Style -> List ( String, String ) +stylesLoadingColumn : Int -> Int -> Style -> List Style stylesLoadingColumn rowIndex colIndex width = - asPairsDEPRECATED - [ width - , property "animation-delay" (toString (toFloat (rowIndex + colIndex) * 0.1) ++ "s") - ] + [ width + , property "animation-delay" (toString (toFloat (rowIndex + colIndex) * 0.1) ++ "s") + ] -- HELP -table : List CssClasses -> List (Html msg) -> Html msg -table classes = - Html.table [ styles.class (Table :: classes) ] +table : List Style -> List (Html msg) -> Html msg +table styles = + Html.table [ css (styles ++ tableStyles) ] -tableWithHeader : List CssClasses -> List (Column data msg) -> List (Html msg) -> Html msg -tableWithHeader classes columns rows = - table classes (viewHeaders columns :: rows) +tableWithHeader : List Style -> List (Column data msg) -> List (Html msg) -> Html msg +tableWithHeader styles columns rows = + table styles (viewHeaders columns :: rows) -- STYLES -type CssClasses - = Table - | LoadingTable - | Row - | Cell - | Headers - | Header - | LoadingContent - | LoadingCell +headersStyles : List Style +headersStyles = + [ borderBottom3 (px 3) solid gray75 + , height (px 45) + , fontSize (px 15) + ] -{-| -} -styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg -styles = - Nri.Ui.Styles.V1.styles "Nri-Ui-Table-V1-" - [ Css.Foreign.class Headers - [ borderBottom3 (px 3) solid gray75 - , height (px 45) - , fontSize (px 15) - ] - , Css.Foreign.class Header - [ padding4 (px 15) (px 12) (px 11) (px 12) - , textAlign left - , fontWeight bold - ] - , Css.Foreign.class Row - [ height (px 45) - , fontSize (px 14) - , color gray45 - , pseudoClass "nth-child(odd)" - [ backgroundColor gray96 ] - ] - , Css.Foreign.class Cell - [ padding2 (px 14) (px 10) - ] - , Css.Foreign.class LoadingContent - [ width (pct 100) - , display inlineBlock - , height (Css.em 1) - , borderRadius (Css.em 1) - , backgroundColor gray75 - ] - , Css.Foreign.class LoadingCell - flashAnimation - , Css.Foreign.class LoadingTable - fadeInAnimation - , Css.Foreign.class Table - [ borderCollapse collapse - , baseFont - , Css.width (Css.pct 100) - ] - ] +headerStyles : List Style +headerStyles = + [ padding4 (px 15) (px 12) (px 11) (px 12) + , textAlign left + , fontWeight bold + ] + + +rowStyles : List Style +rowStyles = + [ height (px 45) + , fontSize (px 14) + , color gray45 + , pseudoClass "nth-child(odd)" + [ backgroundColor gray96 ] + ] + + +cellStyles : List Style +cellStyles = + [ padding2 (px 14) (px 10) + ] + + +loadingContentStyles : List Style +loadingContentStyles = + [ width (pct 100) + , display inlineBlock + , height (Css.em 1) + , borderRadius (Css.em 1) + , backgroundColor gray75 + ] + + +loadingCellStyles : List Style +loadingCellStyles = + flashAnimation + + +loadingTableStyles : List Style +loadingTableStyles = + fadeInAnimation + + +tableStyles : List Style +tableStyles = + [ borderCollapse collapse + , baseFont + , Css.width (Css.pct 100) + ] {-| -} diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm index e31e7f25..4c12b68f 100644 --- a/styleguide-app/Examples/Table.elm +++ b/styleguide-app/Examples/Table.elm @@ -6,6 +6,7 @@ module Examples.Table exposing (Msg, State, example, init, update) import Css exposing (..) import Html +import Html.Styled import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) import Nri.Ui.Button.V1 as Button import Nri.Ui.Table.V2 as Table @@ -40,7 +41,9 @@ example parentMessage state = , width = calc (pct 50) minus (px 125) } , Table.custom - { header = Html.text "Actions" + { header = + Html.text "Actions" + |> Html.Styled.fromUnstyled , width = px 250 , view = \_ -> @@ -52,6 +55,7 @@ example parentMessage state = { label = "Action" , state = Button.Enabled } + |> Html.Styled.fromUnstyled } ] @@ -63,15 +67,19 @@ example parentMessage state = , { firstName = "First5", lastName = "Last5" } ] in - [ Table.keyframeStyles + [ Html.Styled.toUnstyled Table.keyframeStyles , Html.h4 [] [ Html.text "With header" ] , Table.view columns data + |> Html.Styled.toUnstyled , Html.h4 [] [ Html.text "Without header" ] , Table.viewWithoutHeader columns data + |> Html.Styled.toUnstyled , Html.h4 [] [ Html.text "Loading" ] , Table.viewLoading columns + |> Html.Styled.toUnstyled , Html.h4 [] [ Html.text "Loading without header" ] , Table.viewLoadingWithoutHeader columns + |> Html.Styled.toUnstyled ] |> List.map (Html.map parentMessage) } diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm index 955b3940..f2bb8573 100644 --- a/styleguide-app/NriModules.elm +++ b/styleguide-app/NriModules.elm @@ -21,7 +21,6 @@ import Nri.Ui.Dropdown.V1 import Nri.Ui.Icon.V2 import Nri.Ui.SegmentedControl.V5 import Nri.Ui.Select.V2 -import Nri.Ui.Table.V2 as Table import Nri.Ui.Text.V1 as Text import Nri.Ui.TextArea.V1 as TextArea import String.Extra @@ -64,52 +63,52 @@ update msg moduleStates = ( dropdownState, cmd ) = Examples.Dropdown.update msg moduleStates.dropdownState in - ( { moduleStates | dropdownState = dropdownState } - , Cmd.map DropdownMsg cmd - ) + ( { moduleStates | dropdownState = dropdownState } + , Cmd.map DropdownMsg cmd + ) SegmentedControlMsg msg -> let ( segmentedControlState, cmd ) = Examples.SegmentedControl.update msg moduleStates.segmentedControlState in - ( { moduleStates | segmentedControlState = segmentedControlState } - , Cmd.map SegmentedControlMsg cmd - ) + ( { moduleStates | segmentedControlState = segmentedControlState } + , Cmd.map SegmentedControlMsg cmd + ) SelectMsg msg -> let ( selectState, cmd ) = Examples.Select.update msg moduleStates.selectState in - ( { moduleStates | selectState = selectState } - , Cmd.map SelectMsg cmd - ) + ( { moduleStates | selectState = selectState } + , Cmd.map SelectMsg cmd + ) ShowItWorked group message -> let _ = Debug.log group message in - ( moduleStates, Cmd.none ) + ( moduleStates, Cmd.none ) TableExampleMsg msg -> let ( tableExampleState, cmd ) = Examples.Table.update msg moduleStates.tableExampleState in - ( { moduleStates | tableExampleState = tableExampleState } - , Cmd.map TableExampleMsg cmd - ) + ( { moduleStates | tableExampleState = tableExampleState } + , Cmd.map TableExampleMsg cmd + ) TextAreaExampleMsg msg -> let ( textAreaExampleState, cmd ) = TextAreaExample.update msg moduleStates.textAreaExampleState in - ( { moduleStates | textAreaExampleState = textAreaExampleState } - , Cmd.map TextAreaExampleMsg cmd - ) + ( { moduleStates | textAreaExampleState = textAreaExampleState } + , Cmd.map TextAreaExampleMsg cmd + ) NoOp -> ( moduleStates, Cmd.none ) @@ -176,7 +175,6 @@ styles = , (Nri.Ui.Icon.V2.styles |> .css) () , (Nri.Ui.SegmentedControl.V5.styles |> .css) () , (Nri.Ui.Select.V2.styles |> .css) () - , (Table.styles |> .css) () , (Text.styles |> .css) () , (TextArea.styles |> .css) assets ] From 72a4a1c5e6210ddb7e26507ec712afda9b7d5cbd Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Wed, 25 Apr 2018 19:29:22 +0200 Subject: [PATCH 03/10] elm-format --- styleguide-app/Examples/Table.elm | 30 ++++++++++++++--------------- styleguide-app/NriModules.elm | 32 +++++++++++++++---------------- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm index 4c12b68f..80bd1899 100644 --- a/styleguide-app/Examples/Table.elm +++ b/styleguide-app/Examples/Table.elm @@ -67,21 +67,21 @@ example parentMessage state = , { firstName = "First5", lastName = "Last5" } ] in - [ Html.Styled.toUnstyled Table.keyframeStyles - , Html.h4 [] [ Html.text "With header" ] - , Table.view columns data - |> Html.Styled.toUnstyled - , Html.h4 [] [ Html.text "Without header" ] - , Table.viewWithoutHeader columns data - |> Html.Styled.toUnstyled - , Html.h4 [] [ Html.text "Loading" ] - , Table.viewLoading columns - |> Html.Styled.toUnstyled - , Html.h4 [] [ Html.text "Loading without header" ] - , Table.viewLoadingWithoutHeader columns - |> Html.Styled.toUnstyled - ] - |> List.map (Html.map parentMessage) + [ Html.Styled.toUnstyled Table.keyframeStyles + , Html.h4 [] [ Html.text "With header" ] + , Table.view columns data + |> Html.Styled.toUnstyled + , Html.h4 [] [ Html.text "Without header" ] + , Table.viewWithoutHeader columns data + |> Html.Styled.toUnstyled + , Html.h4 [] [ Html.text "Loading" ] + , Table.viewLoading columns + |> Html.Styled.toUnstyled + , Html.h4 [] [ Html.text "Loading without header" ] + , Table.viewLoadingWithoutHeader columns + |> Html.Styled.toUnstyled + ] + |> List.map (Html.map parentMessage) } diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm index f2bb8573..bd5710d0 100644 --- a/styleguide-app/NriModules.elm +++ b/styleguide-app/NriModules.elm @@ -63,52 +63,52 @@ update msg moduleStates = ( dropdownState, cmd ) = Examples.Dropdown.update msg moduleStates.dropdownState in - ( { moduleStates | dropdownState = dropdownState } - , Cmd.map DropdownMsg cmd - ) + ( { moduleStates | dropdownState = dropdownState } + , Cmd.map DropdownMsg cmd + ) SegmentedControlMsg msg -> let ( segmentedControlState, cmd ) = Examples.SegmentedControl.update msg moduleStates.segmentedControlState in - ( { moduleStates | segmentedControlState = segmentedControlState } - , Cmd.map SegmentedControlMsg cmd - ) + ( { moduleStates | segmentedControlState = segmentedControlState } + , Cmd.map SegmentedControlMsg cmd + ) SelectMsg msg -> let ( selectState, cmd ) = Examples.Select.update msg moduleStates.selectState in - ( { moduleStates | selectState = selectState } - , Cmd.map SelectMsg cmd - ) + ( { moduleStates | selectState = selectState } + , Cmd.map SelectMsg cmd + ) ShowItWorked group message -> let _ = Debug.log group message in - ( moduleStates, Cmd.none ) + ( moduleStates, Cmd.none ) TableExampleMsg msg -> let ( tableExampleState, cmd ) = Examples.Table.update msg moduleStates.tableExampleState in - ( { moduleStates | tableExampleState = tableExampleState } - , Cmd.map TableExampleMsg cmd - ) + ( { moduleStates | tableExampleState = tableExampleState } + , Cmd.map TableExampleMsg cmd + ) TextAreaExampleMsg msg -> let ( textAreaExampleState, cmd ) = TextAreaExample.update msg moduleStates.textAreaExampleState in - ( { moduleStates | textAreaExampleState = textAreaExampleState } - , Cmd.map TextAreaExampleMsg cmd - ) + ( { moduleStates | textAreaExampleState = textAreaExampleState } + , Cmd.map TextAreaExampleMsg cmd + ) NoOp -> ( moduleStates, Cmd.none ) From 81fa1b0bc6b975beb656d11fe6fe6b7e2f68f6f7 Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Mon, 30 Apr 2018 13:56:56 +0200 Subject: [PATCH 04/10] Update classnames for V2 --- src/Nri/Ui/Table/V2.elm | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Nri/Ui/Table/V2.elm b/src/Nri/Ui/Table/V2.elm index 94d4c540..07aefcd2 100644 --- a/src/Nri/Ui/Table/V2.elm +++ b/src/Nri/Ui/Table/V2.elm @@ -241,12 +241,12 @@ tableStyles = {-| -} keyframes : List Nri.Ui.Styles.V1.Keyframe keyframes = - [ Nri.Ui.Styles.V1.keyframes "Nri-Ui-Table-V1-flash" + [ Nri.Ui.Styles.V1.keyframes "Nri-Ui-Table-V2-flash" [ ( "0%", "opacity: 0.6" ) , ( "50%", "opacity: 0.2" ) , ( "100%", "opacity: 0.6" ) ] - , Nri.Ui.Styles.V1.keyframes "Nri-Ui-Table-V1-fadein" + , Nri.Ui.Styles.V1.keyframes "Nri-Ui-Table-V2-fadein" [ ( "from", "opacity: 0" ) , ( "to", "opacity: 1" ) ] @@ -263,17 +263,17 @@ keyframeStyles = flashAnimation : List Css.Style flashAnimation = - [ property "-webkit-animation" "Nri-Ui-Table-V1-flash 2s infinite" - , property "-moz-animation" "Nri-Ui-Table-V1-flash 2s infinite" - , property "animation" "Nri-Ui-Table-V1-flash 2s infinite" + [ property "-webkit-animation" "Nri-Ui-Table-V2-flash 2s infinite" + , property "-moz-animation" "Nri-Ui-Table-V2-flash 2s infinite" + , property "animation" "Nri-Ui-Table-V2-flash 2s infinite" , opacity (num 0.6) ] fadeInAnimation : List Css.Style fadeInAnimation = - [ property "-webkit-animation" "Nri-Ui-Table-V1-fadein 0.4s 0.2s forwards" - , property "-moz-animation" "Nri-Ui-Table-V1-fadein 0.4s 0.2s forwards" - , property "animation" "Nri-Ui-Table-V1-fadein 0.4s 0.2s forwards" + [ property "-webkit-animation" "Nri-Ui-Table-V2-fadein 0.4s 0.2s forwards" + , property "-moz-animation" "Nri-Ui-Table-V2-fadein 0.4s 0.2s forwards" + , property "animation" "Nri-Ui-Table-V2-fadein 0.4s 0.2s forwards" , opacity (num 0) ] From 6b9e35071b00adcc6d304fe49cc81a141745e5ae Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Mon, 30 Apr 2018 13:58:54 +0200 Subject: [PATCH 05/10] Remove default cell padding We've run into a situation in CCS where the default padding added to cells are to large. Considering it is much harder to remove a padding from the outside then it is to add one, this commit removes the default cell padding for tables. --- src/Nri/Ui/Table/V2.elm | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Nri/Ui/Table/V2.elm b/src/Nri/Ui/Table/V2.elm index 07aefcd2..9e3493b5 100644 --- a/src/Nri/Ui/Table/V2.elm +++ b/src/Nri/Ui/Table/V2.elm @@ -206,8 +206,7 @@ rowStyles = cellStyles : List Style cellStyles = - [ padding2 (px 14) (px 10) - ] + [] loadingContentStyles : List Style From 66c079f3cc6f45180f4cbd8ff00dff727abab892 Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Mon, 30 Apr 2018 14:08:04 +0200 Subject: [PATCH 06/10] Vertically align content in table cells by default The previous removal of default table cell padding makes the default alignment in content look weird. Adding a vertical alignment property fixes this. We previously removed the default padding because it did not play nice with designs requiring less padding. Does the addition of vertical alignment create a similar problem? I'd argue now. Padding cannot be easily countered. Vertical alignment can easily be countered by embedding div's in the cells with custom styling. --- src/Nri/Ui/Table/V2.elm | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Nri/Ui/Table/V2.elm b/src/Nri/Ui/Table/V2.elm index 9e3493b5..89ece9c3 100644 --- a/src/Nri/Ui/Table/V2.elm +++ b/src/Nri/Ui/Table/V2.elm @@ -206,7 +206,8 @@ rowStyles = cellStyles : List Style cellStyles = - [] + [ verticalAlign middle + ] loadingContentStyles : List Style From 181697d8bbfdbc2d1d00172bd5ae872ef8e7e593 Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Mon, 30 Apr 2018 15:07:22 +0200 Subject: [PATCH 07/10] Reinstitute padding for loading styles The table loading styles require the paddings that are removed for the general table case. That's okay: the table loading styles do not support putting custom content in cells, and so the option of setting custom paddings for content will not be missed. --- src/Nri/Ui/Table/V2.elm | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Nri/Ui/Table/V2.elm b/src/Nri/Ui/Table/V2.elm index 89ece9c3..9c140391 100644 --- a/src/Nri/Ui/Table/V2.elm +++ b/src/Nri/Ui/Table/V2.elm @@ -222,7 +222,9 @@ loadingContentStyles = loadingCellStyles : List Style loadingCellStyles = - flashAnimation + [ batch flashAnimation + , padding2 (px 14) (px 10) + ] loadingTableStyles : List Style From 243cae984af843e203591a10acc67d6511cedb25 Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Thu, 3 May 2018 09:24:42 +0200 Subject: [PATCH 08/10] :skull: Remove dead code --- src/Nri/Ui/Table/V2.elm | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Nri/Ui/Table/V2.elm b/src/Nri/Ui/Table/V2.elm index 9c140391..1fba37d0 100644 --- a/src/Nri/Ui/Table/V2.elm +++ b/src/Nri/Ui/Table/V2.elm @@ -38,10 +38,6 @@ type Column data msg = Column (Html msg) (data -> Html msg) Style -type alias WidthStyle = - List ( String, String ) - - {-| A column that renders some aspect of a value as text -} string : From 5d5ef7f5d43ce61af5f255f48290afdd369475bf Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Thu, 3 May 2018 09:36:33 +0200 Subject: [PATCH 09/10] Add note on upgrading from Nri.Ui.Table.V1 --- src/Nri/Ui/Table/V2.elm | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/Nri/Ui/Table/V2.elm b/src/Nri/Ui/Table/V2.elm index 1fba37d0..4d9e65fb 100644 --- a/src/Nri/Ui/Table/V2.elm +++ b/src/Nri/Ui/Table/V2.elm @@ -11,7 +11,20 @@ module Nri.Ui.Table.V2 , viewWithoutHeader ) -{-| +{-| Upgrading from V1: + + - All the `width` fields in column configurations now take an elm-css length + value rather than an Integer. Change `width = 100` to `width = px 100` to get + the same widths as before. + - Tables now by default take the full width of the container they are placed in. + If this is not what you want, wrap the table in an element with a fixed width. + - The table module now makes use of `Html.Styled` and no longer exposes a + separate `styles` value. + Check out the [elm-css](http://package.elm-lang.org/packages/rtfeldman/elm-css/14.0.0/Html-Styled) + documentation on Html.Styled to see how to work with it. + - The default cell padding has been removed and content is not vertically + centered in its cell. If you need to overwrite this, wrap your cells in + elements providing custom styling to the cell. @docs Column, custom, string From f66803640a64b0c20149b35346926d97e15f76a4 Mon Sep 17 00:00:00 2001 From: Jasper Woudenberg Date: Thu, 3 May 2018 11:37:29 +0200 Subject: [PATCH 10/10] 4.13.0 --- elm-package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elm-package.json b/elm-package.json index eb0b2de4..f8be87d2 100644 --- a/elm-package.json +++ b/elm-package.json @@ -1,5 +1,5 @@ { - "version": "4.12.0", + "version": "4.13.0", "summary": "UI Widgets we use at NRI", "repository": "https://github.com/NoRedInk/noredink-ui.git", "license": "BSD3",