Switch Table.V2 over to Html.Styled

This is probably better then relying on more deprecated elm css functionality, like we were before.
2024-12-29 00:21:42 +03:00 · 2018-04-25 19:25:34 +02:00 · 2018-04-25 19:25:34 +02:00 · 8f344774c3
commit 8f344774c3
parent de10ffb43e
3 changed files with 105 additions and 99 deletions
--- 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)
+    ]


 {-| -}
--- 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)
    }
--- 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
        ]