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

@@ -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,29 +134,27 @@ 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")
     ]
@@ -170,72 +164,78 @@ stylesLoadingColumn rowIndex colIndex width =
 -- 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
-
-
-{-| -}
-styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
-styles =
-    Nri.Ui.Styles.V1.styles "Nri-Ui-Table-V1-"
-        [ Css.Foreign.class Headers
+headersStyles : List Style
+headersStyles =
     [ borderBottom3 (px 3) solid gray75
     , height (px 45)
     , fontSize (px 15)
     ]
-        , Css.Foreign.class Header
+
+
+headerStyles : List Style
+headerStyles =
     [ padding4 (px 15) (px 12) (px 11) (px 12)
     , textAlign left
     , fontWeight bold
     ]
-        , Css.Foreign.class Row
+
+
+rowStyles : List Style
+rowStyles =
     [ height (px 45)
     , fontSize (px 14)
     , color gray45
     , pseudoClass "nth-child(odd)"
         [ backgroundColor gray96 ]
     ]
-        , Css.Foreign.class Cell
+
+
+cellStyles : List Style
+cellStyles =
     [ padding2 (px 14) (px 10)
     ]
-        , Css.Foreign.class LoadingContent
+
+
+loadingContentStyles : List Style
+loadingContentStyles =
     [ width (pct 100)
     , display inlineBlock
     , height (Css.em 1)
     , borderRadius (Css.em 1)
     , backgroundColor gray75
     ]
-        , Css.Foreign.class LoadingCell
+
+
+loadingCellStyles : List Style
+loadingCellStyles =
     flashAnimation
-        , Css.Foreign.class LoadingTable
+
+
+loadingTableStyles : List Style
+loadingTableStyles =
     fadeInAnimation
-        , Css.Foreign.class Table
+
+
+tableStyles : List Style
+tableStyles =
     [ borderCollapse collapse
     , baseFont
     , Css.width (Css.pct 100)
     ]
-        ]
 
 
 {-| -}

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

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
@@ -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
         ]