Nri.Ui.SegmentedControl.V6 now uses Html.Styled

src/Nri/Ui/SegmentedControl/V6.elm

@@ -1,4 +1,4 @@
-module Nri.Ui.SegmentedControl.V6 exposing (Config, CssClass, Icon, Option, styles, view)
+module Nri.Ui.SegmentedControl.V6 exposing (Config, Icon, Option, view)
 
 {-|
 
@@ -6,20 +6,18 @@ module Nri.Ui.SegmentedControl.V6 exposing (Config, CssClass, Icon, Option, styl
 
 -}
 
-import Accessibility exposing (..)
-import Accessibility.Role as Role
+import Accessibility.Styled exposing (..)
+import Accessibility.Styled.Role as Role
 import Css exposing (..)
 import Css.Foreign exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
-import Html
-import Html.Attributes
-import Html.Events
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Attributes as Attr exposing (css)
+import Html.Styled.Events as Events
 import Nri.Ui.Colors.Extra exposing (withAlpha)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.CssFlexBoxWithVendorPrefix as FlexBox
 import Nri.Ui.Fonts.V1 as Fonts
-import Nri.Ui.Icon.V2 as Icon
-import Nri.Ui.Styles.V1
-import View.Extra
+import Nri.Ui.Icon.V3 as Icon
 
 
 {-| -}
@@ -46,14 +44,6 @@ type alias Icon =
     }
 
 
-focusedClass : a -> a -> CssClass
-focusedClass value selected =
-    if value == selected then
-        Focused
-    else
-        Unfocused
-
-
 {-| -}
 view : Config a msg -> Html.Html msg
 view config =
@@ -61,80 +51,75 @@ view config =
         |> List.map
             (\option ->
                 Html.div
-                    [ Html.Attributes.id option.id
+                    [ Attr.id option.id
                     , Role.tab
-                    , Html.Events.onClick (config.onClick option.value)
-                    , styles.class
-                        [ Tab
-                        , focusedClass option.value config.selected
-                        ]
+                    , Events.onClick (config.onClick option.value)
+                    , css sharedTabStyles
+                    , css <|
+                        if option.value == config.selected then
+                            focusedTabStyles
+                        else
+                            unFocusedTabStyles
                     ]
-                    [ View.Extra.viewJust viewIcon option.icon
+                    [ case option.icon of
+                        Nothing ->
+                            Html.text ""
+
+                        Just icon ->
+                            viewIcon icon
                     , Html.text option.label
                     ]
             )
-        |> div [ Role.tabList, styles.class [ SegmentedControl ] ]
+        |> div
+            [ Role.tabList
+            , css [ FlexBox.displayFlex, cursor pointer ]
+            ]
 
 
-viewIcon : Icon -> Html msg
+viewIcon : Icon -> Html.Html msg
 viewIcon icon =
     Html.span
-        [ styles.class [ IconContainer ] ]
+        [ css [ marginRight (px 10) ] ]
         [ Icon.icon icon ]
 
 
-{-| Classes for styling
--}
-type CssClass
-    = SegmentedControl
-    | Tab
-    | IconContainer
-    | Focused
-    | Unfocused
-
-
-{-| -}
-styles : Nri.Ui.Styles.V1.Styles Never CssClass msg
-styles =
-    Nri.Ui.Styles.V1.styles "Nri-Ui-SegmentedControl-V6-"
-        [ Css.Foreign.class SegmentedControl
-            [ FlexBox.displayFlex
-            , cursor pointer
-            ]
-        , Css.Foreign.class Tab
-            [ padding2 (px 6) (px 20)
-            , height (px 45)
-            , Fonts.baseFont
-            , fontSize (px 15)
-            , color Colors.azure
-            , fontWeight bold
-            , lineHeight (px 30)
-            , firstChild
-                [ borderTopLeftRadius (px 8)
-                , borderBottomLeftRadius (px 8)
-                , borderLeft3 (px 1) solid Colors.azure
-                ]
-            , lastChild
-                [ borderTopRightRadius (px 8)
-                , borderBottomRightRadius (px 8)
-                ]
-            , border3 (px 1) solid Colors.azure
-            , borderLeft (px 0)
-            , boxSizing borderBox
-            , FlexBox.flexGrow 1
-            , textAlign center
-            ]
-        , Css.Foreign.class IconContainer
-            [ marginRight (px 10)
-            ]
-        , Css.Foreign.class Focused
-            [ backgroundColor Colors.glacier
-            , boxShadow5 inset zero (px 3) zero (withAlpha 0.2 Colors.gray20)
-            , color Colors.gray20
-            ]
-        , Css.Foreign.class Unfocused
-            [ backgroundColor Colors.white
-            , boxShadow5 inset zero (px -2) zero Colors.azure
-            , color Colors.azure
-            ]
+sharedTabStyles : List Style
+sharedTabStyles =
+    [ padding2 (px 6) (px 20)
+    , height (px 45)
+    , Fonts.baseFont
+    , fontSize (px 15)
+    , color Colors.azure
+    , fontWeight bold
+    , lineHeight (px 30)
+    , firstChild
+        [ borderTopLeftRadius (px 8)
+        , borderBottomLeftRadius (px 8)
+        , borderLeft3 (px 1) solid Colors.azure
         ]
+    , lastChild
+        [ borderTopRightRadius (px 8)
+        , borderBottomRightRadius (px 8)
+        ]
+    , border3 (px 1) solid Colors.azure
+    , borderLeft (px 0)
+    , boxSizing borderBox
+    , FlexBox.flexGrow 1
+    , textAlign center
+    ]
+
+
+focusedTabStyles : List Style
+focusedTabStyles =
+    [ backgroundColor Colors.glacier
+    , boxShadow5 inset zero (px 3) zero (withAlpha 0.2 Colors.gray20)
+    , color Colors.gray20
+    ]
+
+
+unFocusedTabStyles : List Style
+unFocusedTabStyles =
+    [ backgroundColor Colors.white
+    , boxShadow5 inset zero (px -2) zero Colors.azure
+    , color Colors.azure
+    ]

styleguide-app/Examples/SegmentedControl.elm

@@ -4,7 +4,6 @@ module Examples.SegmentedControl
         , State
         , example
         , init
-        , styles
         , update
         )
 
@@ -21,7 +20,8 @@ module Examples.SegmentedControl
 
 import Css
 import Css.Foreign
-import Html
+import Html.Styled as Html
+import Html.Styled.Attributes exposing (css)
 import ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.SegmentedControl.V6
 import Nri.Ui.Styles.V1
@@ -43,8 +43,10 @@ example parentMessage state =
     { filename = "Nri/Ui/SegmentedControl/V6.elm"
     , category = Behaviors
     , content =
-        [ Html.map parentMessage
-            (styles.div Container [ Nri.Ui.SegmentedControl.V6.view state ])
+        [ Html.div [ css [ Css.width (Css.px 500) ] ]
+            [ Nri.Ui.SegmentedControl.V6.view state ]
+            |> Html.map parentMessage
+            |> Html.toUnstyled
         ]
     }
 
@@ -77,21 +79,6 @@ update msg state =
             ( { state | selected = id }, Cmd.none )
 
 
-{-| -}
-styles : Nri.Ui.Styles.V1.Styles a b c
-styles =
-    Nri.Ui.Styles.V1.styles
-        "Examples-SegmentedControl-"
-        [ Css.Foreign.class Container
-            [ Css.width (Css.px 500)
-            ]
-        ]
-
-
-type Classes
-    = Container
-
-
 
 -- INTERNAL
 

styleguide-app/NriModules.elm

@@ -235,11 +235,10 @@ route location =
 styles : List Stylesheet
 styles =
     List.concat
-        [ -- NOTE: these will go away as the modules' styles are integrated with Nri.Css.Site.elm
+        [ -- NOTE: these will go away as the modules' styles are migrated to use autogenerated classes based on Html.Styled.Attributes.css
           [ ModuleExample.styles
           ]
         , (Examples.Page.styles |> .css) ()
-        , (Examples.SegmentedControl.styles |> .css) ()
         , (Button.styles |> .css) assets
         , (Nri.Ui.Dropdown.V1.styles |> .css) ()
         , (Nri.Ui.Icon.V2.styles |> .css) ()