Fix compilation

src/Nri/Ui/Menu/V1.elm

@@ -29,10 +29,9 @@ import Accessibility.Styled.Aria as Aria exposing (controls)
 import Accessibility.Styled.Role as Role
 import Accessibility.Styled.Widget as Widget
 import Css exposing (..)
-import Css.Extra exposing (Snippet, classSelector, classSelectors)
 import Css.Global exposing (descendants)
 import Html.Styled as Html exposing (..)
-import Html.Styled.Attributes as Attr
+import Html.Styled.Attributes as Attributes exposing (class, classList, css)
 import Html.Styled.Events exposing (onClick, onMouseDown)
 import Nri.Ui.Colors.V1
 import Nri.Ui.Fonts.V1
@@ -129,35 +128,33 @@ view config =
         menuId =
             config.id ++ "-menu"
     in
-    div
+    div (Attributes.id config.id :: styleContainer)
-        [ class [ Container ]
-        , Attr.id config.id
-        ]
         [ if config.isOpen then
             div
-                [ class [ Overlay ]
+                (onClick (config.onToggle False)
-                , Attr.class "Nri-Menu-Overlay"
+                    :: class "Nri-Menu-Overlay"
-                , onClick (config.onToggle False)
+                    :: styleOverlay
-                ]
+                )
                 []
 
           else
             Html.text ""
-        , div [ class [ InnerContainer ] ]
+        , div styleInnerContainer
             [ Html.button
-                [ classList [ ( ToggleButton, True ), ( WithBorder, config.hasBorder ) ]
+                [ --classList [ ( ToggleButton, True ), ( WithBorder, config.hasBorder ) ]
-                , onClick <| config.onToggle (not config.isOpen)
+                  --,
-                , Attr.disabled config.isDisabled
+                  onClick <| config.onToggle (not config.isOpen)
+                , Attributes.disabled config.isDisabled
                 , Widget.disabled config.isDisabled
                 , Widget.hasMenuPopUp
                 , Widget.expanded config.isOpen
                 , controls menuId
-                , Attr.id buttonId
+                , Attributes.id buttonId
                 , config.buttonWidth
-                    |> Maybe.map (\w -> Attr.style "width" (String.fromInt w ++ "px"))
+                    |> Maybe.map (\w -> Attributes.style "width" (String.fromInt w ++ "px"))
                     |> Maybe.withDefault AttributesExtra.none
                 ]
-                [ div [ class [ ButtonInner ] ]
+                [ div styleButtonInner
                     [ viewTitle { icon = config.icon, wrapping = config.wrapping, title = config.title, dataDescription = config.id }
                     , viewArrow { isOpen = config.isOpen }
                     ]
@@ -178,8 +175,8 @@ view config =
 viewArrow : { isOpen : Bool } -> Html msg
 viewArrow { isOpen } =
     span
-        [ Attr.classList [ ( "Arrow", True ), ( "Open", isOpen ) ]
+        [ classList [ ( "Arrow", True ), ( "Open", isOpen ) ]
-        , Attr.css
+        , css
             [ width (px 12)
             , height (px 7)
             , marginLeft (px 5)
@@ -209,25 +206,21 @@ type alias TitleConfig =
 
 viewTitle : TitleConfig -> Html msg
 viewTitle config =
-    div [ class [ Title ] ]
+    div styleTitle
-        [ viewJust
+        [ viewJust (\icon -> span styleIconContainer [ Svg.toHtml icon ])
-            (\icon ->
-                span [ class [ IconContainer ] ]
-                    [ Svg.toHtml icon ]
-            )
             config.icon
         , span
-            [ classList
+            [ --classList
-                [ ( Truncated
+              --    [ ( Truncated
-                  , case config.wrapping of
+              --      , case config.wrapping of
-                        WrapAndExpandTitle ->
+              --            WrapAndExpandTitle ->
-                            False
+              --                False
-
+              --            TruncateTitle ->
-                        TruncateTitle ->
+              --                True
-                            True
+              --      )
-                  )
+              --    ]
-                ]
+              --,
-            , Attr.attribute "data-nri-description" config.dataDescription
+              Attributes.attribute "data-nri-description" config.dataDescription
             ]
             [ Html.text config.title ]
         ]
@@ -247,18 +240,19 @@ type alias DropdownConfig msg =
 viewDropdown : DropdownConfig msg -> Html msg
 viewDropdown config =
     div
-        [ classList
+        [ --classList
-            [ ( Content, True )
+          --    [ ( Content, True )
-            , ( Align config.alignment, True )
+          --    , ( Align config.alignment, True )
-            , ( ContentVisible, config.isOpen && not config.isDisabled )
+          --    , ( ContentVisible, config.isOpen && not config.isDisabled )
-            ]
+          --    ]
-        , Role.menu
+          --,
+          Role.menu
         , Aria.labelledBy config.buttonId
-        , Attr.id config.menuId
+        , Attributes.id config.menuId
         , Widget.hidden (not config.isOpen)
         , config.menuWidth
-            |> Maybe.map (\w -> Attr.style "width" (String.fromInt w ++ "px"))
+            |> Maybe.map (\w -> Attributes.style "width" (String.fromInt w ++ "px"))
-            |> Maybe.withDefault Html.Styled.Attributes.Extra.none
+            |> Maybe.withDefault AttributesExtra.none
         ]
         (List.map viewEntry config.entries)
 
@@ -267,11 +261,7 @@ viewEntry : Entry msg -> Html msg
 viewEntry entry_ =
     case entry_ of
         Single child ->
-            div
+            div (Role.menuItem :: styleMenuEntryContainer) [ child ]
-                [ class [ MenuEntryContainer ]
-                , Role.menuItem
-                ]
-                [ child ]
 
         Batch title childList ->
             case childList of
@@ -279,11 +269,9 @@ viewEntry entry_ =
                     Html.text ""
 
                 _ ->
-                    fieldset [ class [ GroupContainer ] ] <|
+                    fieldset styleGroupContainer <|
-                        legend [ class [ GroupTitle ] ]
+                        legend styleGroupTitle
-                            [ span [ class [ GroupTitleText ] ]
+                            [ span styleGroupTitleText [ Html.text title ] ]
-                                [ Html.text title ]
-                            ]
                             :: List.map viewEntry childList
 
         None ->
@@ -312,7 +300,7 @@ iconButton config =
                 -- Uses onMouseDown instead of onClick to prevent a race condition with the tooltip that can make the menu un-openable for mysterious causes
                 [ onMouseDown config.onClick ]
     in
-    div [ class [ IconButtonContainer ] ]
+    div styleIconButtonContainer
         [ tooltip [ text config.label ]
             |> Tooltip.primaryLabel
                 { trigger = Tooltip.OnHover
@@ -320,19 +308,17 @@ iconButton config =
                 , isOpen = config.isTooltipOpen
                 , triggerHtml =
                     button
-                        ([ class [ IconButton ]
+                        ([ Attributes.id config.id
-                         , Attr.id config.id
                          , Widget.disabled config.isDisabled
-                         , Attr.disabled config.isDisabled
+                         , Attributes.disabled config.isDisabled
                          , Widget.label config.label
                          ]
+                            ++ styleIconButton
                             ++ perhapsOnclick
                         )
                         [ Svg.toHtml config.icon
                         ]
                 , extraButtonAttrs = []
-                , onTrigger = config.onShowTooltip
-                , isOpen = config.isTooltipOpen
                 , id = config.id ++ "-tooltip"
                 }
         ]
@@ -375,21 +361,18 @@ iconButtonWithMenu config =
         menuId =
             config.id ++ "-menu"
     in
-    div
+    div (Attributes.id config.id :: styleContainer)
-        [ class [ Container ]
-        , Attr.id config.id
-        ]
         [ if config.isOpen then
             div
-                [ class [ Overlay ]
+                (onClick (config.onToggle False)
-                , Attr.class "Nri-Menu-Overlay"
+                    :: Attributes.class "Nri-Menu-Overlay"
-                , onClick (config.onToggle False)
+                    :: styleOverlay
-                ]
+                )
                 []
 
           else
             Html.text ""
-        , div [ class [ InnerContainer ] ]
+        , div styleInnerContainer
             [ iconButton
                 { icon = config.icon
                 , isDisabled = config.isDisabled
@@ -430,9 +413,9 @@ iconLink config =
                 []
 
             else
-                [ Attr.href config.linkUrl ]
+                [ Attributes.href config.linkUrl ]
     in
-    div [ class [ IconButtonContainer ] ]
+    div styleIconButtonContainer
         [ tooltip [ text config.label ]
             |> Tooltip.primaryLabel
                 { trigger = Tooltip.OnHover
@@ -440,12 +423,13 @@ iconLink config =
                 , isOpen = config.isTooltipOpen
                 , triggerHtml =
                     a
-                        ([ classList
+                        ([ --   classList
-                            [ ( IconLink, True )
+                           --   [ ( IconLink, True )
-                            , ( Disabled, config.isDisabled ) -- `a` tags don't allow the `disabled` attribute so we have to use a class to apply disabled styles
+                           --   , ( Disabled, config.isDisabled ) -- `a` tags don't allow the `disabled` attribute so we have to use a class to apply disabled styles
-                            ]
+                           --   ]
-                         , Widget.disabled config.isDisabled
+                           --,
-                         , Attr.id (String.Extra.dashify config.label)
+                           Widget.disabled config.isDisabled
+                         , Attributes.id (String.Extra.dasherize config.label)
                          , Widget.label config.label
                          ]
                             ++ perhapsHref
@@ -453,8 +437,6 @@ iconLink config =
                         [ Svg.toHtml config.icon
                         ]
                 , extraButtonAttrs = []
-                , onTrigger = config.onShowTooltip
-                , isOpen = config.isTooltipOpen
                 , id = String.replace " " "-" config.label ++ "-tooltip"
                 }
         ]
@@ -472,36 +454,20 @@ tooltip =
         >> Tooltip.withPadding Tooltip.SmallPadding
 
 
-type CssClass
-    = ToggleButton
-    | ButtonInner
-    | IconContainer
-    | Content
-    | Container
-    | WithBorder
-    | Align Alignment
-    | Title
-    | Truncated
-    | ContentVisible
-    | MenuEntryContainer
-    | GroupContainer
-    | GroupTitle
-    | GroupTitleText
-    | Overlay
-    | InnerContainer
-    | IconButtonContainer
-    | IconButton
-    | IconLink
-    | Disabled
-
-
 {-| -}
-snippets : List (Snippet CssClass)
+styleInnerContainer : List (Attribute msg)
-snippets =
+styleInnerContainer =
-    [ classSelector InnerContainer
+    [ class "InnerContainer"
+    , css
         [ position relative
         ]
-    , classSelector Overlay
+    ]
+
+
+styleOverlay : List (Attribute msg)
+styleOverlay =
+    [ class "Overlay"
+    , css
         [ position fixed
         , width (pct 100)
         , height (pct 100)
@@ -509,7 +475,13 @@ snippets =
         , top zero
         , zIndex (int 1)
         ]
-    , classSelector MenuEntryContainer
+    ]
+
+
+styleMenuEntryContainer : List (Attribute msg)
+styleMenuEntryContainer =
+    [ class "MenuEntryContainer"
+    , css
         [ padding2 (px 5) zero
         , position relative
         , firstChild
@@ -517,18 +489,36 @@ snippets =
         , lastChild
             [ paddingBottom zero ]
         ]
-    , classSelector Title
+    ]
+
+
+styleTitle : List (Attribute msg)
+styleTitle =
+    [ class "Title"
+    , css
         [ width (pct 100)
         , overflow hidden
         , Css.displayFlex
         , Css.alignItems Css.center
         ]
-    , classSelector Truncated
+    ]
+
+
+styleTruncated : List (Attribute msg)
+styleTruncated =
+    [ class "Truncated"
+    , css
         [ whiteSpace noWrap
         , overflow hidden
         , textOverflow ellipsis
         ]
-    , classSelector GroupTitle
+    ]
+
+
+styleGroupTitle : List (Attribute msg)
+styleGroupTitle =
+    [ class "GroupTitle"
+    , css
         [ Nri.Ui.Fonts.V1.baseFont
         , fontSize (px 12)
         , color Nri.Ui.Colors.V1.gray45
@@ -548,21 +538,39 @@ snippets =
             , position absolute
             ]
         ]
-    , classSelector GroupTitleText
+    ]
+
+
+styleGroupTitleText : List (Attribute msg)
+styleGroupTitleText =
+    [ class "GroupTitleText"
+    , css
         [ backgroundColor Nri.Ui.Colors.V1.white
         , marginLeft (px 22)
         , padding2 zero (px 5)
         , zIndex (int 2)
         , position relative
         ]
-    , classSelector GroupContainer
+    ]
+
+
+styleGroupContainer : List (Attribute msg)
+styleGroupContainer =
+    [ class "GroupContainer"
+    , css
         [ margin zero
         , padding zero
         , paddingBottom (px 15)
         , lastChild
             [ paddingBottom zero ]
         ]
-    , classSelector ToggleButton
+    ]
+
+
+styleToggleButton : List (Attribute msg)
+styleToggleButton =
+    [ class "ToggleButton"
+    , css
         [ Nri.Ui.Fonts.V1.baseFont
         , fontSize (px 15)
         , color Nri.Ui.Colors.V1.azure
@@ -578,25 +586,46 @@ snippets =
             , cursor notAllowed
             ]
         ]
-    , classSelectors [ ToggleButton, WithBorder ]
-        [ border3 (px 1) solid Nri.Ui.Colors.V1.gray75
-        , borderBottom3 (px 3) solid Nri.Ui.Colors.V1.gray75
-        , borderRadius (px 8)
-        , padding2 (px 10) (px 15)
     ]
-    , classSelector ButtonInner
+
+
+
+--, classSelectors [ ToggleButton, WithBorder ]
+--    [ border3 (px 1) solid Nri.Ui.Colors.V1.gray75
+--    , borderBottom3 (px 3) solid Nri.Ui.Colors.V1.gray75
+--    , borderRadius (px 8)
+--    , padding2 (px 10) (px 15)
+--    ]
+
+
+styleButtonInner : List (Attribute msg)
+styleButtonInner =
+    [ class "ButtonInner"
+    , css
         [ Css.displayFlex
         , Css.justifyContent Css.spaceBetween
         , Css.alignItems Css.center
         ]
-    , classSelector IconContainer
+    ]
+
+
+styleIconContainer : List (Attribute msg)
+styleIconContainer =
+    [ class "IconContainer"
+    , css
         [ width (px 21)
         , height (px 21)
         , marginRight (px 5)
         , display inlineBlock
         , Css.flexShrink (Css.num 0)
         ]
-    , classSelector Content
+    ]
+
+
+styleContent : List (Attribute msg)
+styleContent =
+    [ class "Content"
+    , css
         [ padding (px 25)
         , border3 (px 1) solid Nri.Ui.Colors.V1.azure
         , minWidth (px 202)
@@ -624,27 +653,48 @@ snippets =
             , borderBottomColor Nri.Ui.Colors.V1.white
             ]
         ]
-    , classSelectors [ Content, Align Left ]
-        [ left zero
-        , before [ left (px 19) ]
-        , after [ left (px 20) ]
     ]
-    , classSelectors [ Content, Align Right ]
+
-        [ right zero
+
-        , before [ right (px 19) ]
+
-        , after [ right (px 20) ]
+--, classSelectors [ Content, Align Left ]
-        ]
+--    [ left zero
-    , classSelectors [ Content, ContentVisible ]
+--    , before [ left (px 19) ]
-        [ display block ]
+--    , after [ left (px 20) ]
-    , classSelector Container
+--    ]
+--, classSelectors [ Content, Align Right ]
+--    [ right zero
+--    , before [ right (px 19) ]
+--    , after [ right (px 20) ]
+--    ]
+--, classSelectors [ Content, ContentVisible ]
+--    [ display block ]
+
+
+styleContainer : List (Attribute msg)
+styleContainer =
+    [ class "Container"
+    , css
         [ position relative
         , display inlineBlock
         ]
-    , classSelector IconButtonContainer
+    ]
+
+
+styleIconButtonContainer : List (Attribute msg)
+styleIconButtonContainer =
+    [ class "IconButtonContainer"
+    , css
         [ display inlineBlock
         , position relative
         ]
-    , classSelector IconButton
+    ]
+
+
+styleIconButton : List (Attribute msg)
+styleIconButton =
+    [ class "IconButton"
+    , css
         [ border zero
         , backgroundColor transparent
         , color Nri.Ui.Colors.V1.azure
@@ -659,7 +709,13 @@ snippets =
             , cursor notAllowed
             ]
         ]
-    , classSelector IconLink
+    ]
+
+
+styleIconLink : List (Attribute msg)
+styleIconLink =
+    [ class "IconLink"
+    , css
         [ border zero
         , backgroundColor transparent
         , color Nri.Ui.Colors.V1.azure
@@ -675,20 +731,11 @@ snippets =
             [ color Nri.Ui.Colors.V1.azure
             ]
         ]
-    , classSelectors [ IconLink, Disabled ]
-        [ opacity (num 0.4)
-        , cursor notAllowed
-        ]
     ]
 
 
-{-| -}
-class : List CssClass -> Html.Attribute msg
-class =
-    Css.Extra.class snippets
 
-
+--, classSelectors [ IconLink, Disabled ]
-{-| -}
+--    [ opacity (num 0.4)
-classList : List ( CssClass, Bool ) -> Html.Attribute msg
+--    , cursor notAllowed
-classList =
+--    ]
-    Css.Extra.classList snippets