fix ClickableText font-size inheritance, update examples

NoRedInk · Jan 9, 2024 · 7d3604a · 7d3604a
1 parent e4d304b
commit 7d3604a
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 45 deletions.
diff --git a/component-catalog/src/CommonControls.elm b/component-catalog/src/CommonControls.elm
@@ -246,8 +246,7 @@ exampleHtml =
     , Html.strong [] [ Html.text "bolded phrase" ]
     , Html.text ". "
     , ClickableText.link quickBrownFox
-        [ ClickableText.small
-        , ClickableText.icon UiIcon.starFilled
+        [ ClickableText.icon UiIcon.starFilled
         , ClickableText.href "http://www.noredink.com"
         , ClickableText.appearsInline
         ]
@@ -257,6 +256,7 @@ exampleHtml =
         [ Html.text "darkness of the movie house " ]
     , Html.text "I had only two things on my mind: Paul Newman, and a ride home."
     ]
+
 
 
 icon :

diff --git a/component-catalog/src/Examples/ClickableText.elm b/component-catalog/src/Examples/ClickableText.elm
@@ -181,37 +181,33 @@ viewExamples ellieLinkConfig (State control) =
         [ Heading.plaintext "Inline ClickableText Examples"
         , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
         ]
-    , Text.smallBody (inlineExample "Text.smallBody" ClickableText.small)
-    , Text.mediumBody (inlineExample "Text.mediumBody" ClickableText.medium)
+    , Text.smallBody (inlineExample "Text.smallBody")
+    , Text.mediumBody (inlineExample "Text.mediumBody")
     ]
         |> div []
 
 
-inlineExample : String -> ClickableText.Attribute Msg -> List (Text.Attribute Msg)
-inlineExample textSizeName size =
+inlineExample : String -> List (Text.Attribute Msg)
+inlineExample textSizeName =
     [ Text.html
         [ text "Sometimes, we'll want our "
         , ClickableText.link "internal links"
             [ ClickableText.appearsInline
-            , size
             , ClickableText.href "/"
             ]
         , text ", "
         , ClickableText.link "external links"
             [ ClickableText.appearsInline
-            , size
             , ClickableText.linkExternal "https://www.google.com/search?q=puppies"
             ]
         , text ", "
         , ClickableText.button "buttons"
             [ ClickableText.appearsInline
-            , size
             , ClickableText.onClick (ShowItWorked moduleName "in-line button")
             ]
         , text " and "
         , ClickableText.button "ClickableTexts with icons"
             [ ClickableText.appearsInline
-            , size
             , ClickableText.onClick (ShowItWorked moduleName "in-line button")
             , ClickableText.icon UiIcon.starFilled
             ]

diff --git a/src/Nri/Ui/ClickableText/V4.elm b/src/Nri/Ui/ClickableText/V4.elm
@@ -26,6 +26,8 @@ module Nri.Ui.ClickableText.V4 exposing
   - uses `Css.display Css.inlineFlex` only on buttons
   - removes `"-v2"` from data descriptor
   - uses dataDescriptor for `"clickable-text-label"`
+  - adds `Inherited` size as default
+  - adjusts icon margins for `Inherited` size
 
 
 # About:
@@ -141,7 +143,8 @@ modal =
 
 
 type Size
-    = Small
+    = Inherited
+    | Small
     | Medium
     | Large
 
@@ -383,6 +386,10 @@ appearsInline =
         [ Css.borderBottom3 (Css.px 1) Css.solid Colors.azure
         , Css.Global.withAttribute "aria-disabled=true" [ Css.borderBottom3 (Css.px 1) Css.solid Colors.gray45 ]
         , Css.disabled [ Css.borderBottom3 (Css.px 1) Css.solid Colors.gray45 ]
+        , Css.display Css.inline
+        , Css.fontFamily Css.inherit
+        , Css.fontWeight Css.inherit
+        , Css.fontSize Css.inherit
         ]
 
 
@@ -461,30 +468,56 @@ viewContent :
 viewContent config kind =
     let
         fontSize =
-            sizeToPx config.size
+            case config.size of
+                Inherited ->
+                    Css.fontSize Css.inherit
+
+                Small ->
+                    Css.fontSize (Css.px 13)
+
+                Medium ->
+                    Css.fontSize (Css.px 15)
+
+                Large ->
+                    Css.fontSize (Css.px 18)
 
         viewIcon styles icon_ =
             icon_
-                |> Svg.withWidth fontSize
-                |> Svg.withHeight fontSize
                 |> Svg.withCss styles
                 |> Svg.toHtml
 
-        iconSize =
+        iconMarginRight =
+            case config.size of
+                Inherited ->
+                    Css.marginRight (Css.em 0.2)
+
+                Small ->
+                    Css.marginRight (Css.px 3)
+
+                Medium ->
+                    Css.marginRight (Css.px 3)
+
+                Large ->
+                    Css.marginRight (Css.px 4)
+
+        iconMarginLeft =
             case config.size of
+                Inherited ->
+                    Css.marginLeft (Css.em 0.2)
+
                 Small ->
-                    Css.px 3
+                    Css.marginLeft (Css.px 3)
 
                 Medium ->
-                    Css.px 3
+                    Css.marginLeft (Css.px 3)
 
                 Large ->
-                    Css.px 4
+                    Css.marginLeft (Css.px 4)
 
         iconAndTextContainer =
             span
                 [ Attributes.css
-                    (Css.fontSize fontSize
+                    (fontSize
                         :: (case kind of
                                 Button ->
                                     [ Css.display Css.inlineFlex
@@ -498,25 +531,53 @@ viewContent config kind =
                 ]
                 >> List.singleton
     in
-    span [ Attributes.css [ Css.fontSize fontSize ] ]
+    span [ Attributes.css [ fontSize ] ]
         (case ( config.icon, config.rightIcon ) of
             ( Just leftIcon, Just rightIcon_ ) ->
                 iconAndTextContainer
-                    [ viewIcon (Css.marginRight iconSize :: config.iconStyles) leftIcon
+                    [ viewIcon
+                        ([ iconMarginRight
+                         , Css.width (Css.em 1)
+                         , Css.height (Css.em 1)
+                         ]
+                            ++ config.iconStyles
+                        )
+                        leftIcon
                     , span [ ExtraAttributes.nriDescription (dataDescriptor "label") ] [ text config.label ]
-                    , viewIcon (Css.marginLeft iconSize :: config.rightIconStyles) rightIcon_
+                    , viewIcon
+                        ([ iconMarginLeft
+                         , Css.width (Css.em 1)
+                         , Css.height (Css.em 1)
+                         ]
+                            ++ config.rightIconStyles
+                        )
+                        rightIcon_
                     ]
 
             ( Just leftIcon, Nothing ) ->
                 iconAndTextContainer
-                    [ viewIcon (Css.marginRight iconSize :: config.iconStyles) leftIcon
+                    [ viewIcon
+                        ([ iconMarginRight
+                         , Css.width (Css.em 1)
+                         , Css.height (Css.em 1)
+                         ]
+                            ++ config.iconStyles
+                        )
+                        leftIcon
                     , span [ ExtraAttributes.nriDescription (dataDescriptor "label") ] [ text config.label ]
                     ]
 
             ( Nothing, Just rightIcon_ ) ->
                 iconAndTextContainer
                     [ span [ ExtraAttributes.nriDescription (dataDescriptor "label") ] [ text config.label ]
-                    , viewIcon (Css.marginLeft iconSize :: config.rightIconStyles) rightIcon_
+                    , viewIcon
+                        ([ iconMarginLeft
+                         , Css.width (Css.em 1)
+                         , Css.height (Css.em 1)
+                         ]
+                            ++ config.rightIconStyles
+                        )
+                        rightIcon_
                     ]
 
             ( Nothing, Nothing ) ->
@@ -561,19 +622,6 @@ clickableTextButtonStyles =
     ]
 
 
-sizeToPx : Size -> Css.Px
-sizeToPx size =
-    case size of
-        Small ->
-            Css.px 13
-
-        Medium ->
-            Css.px 15
-
-        Large ->
-            Css.px 18
-
-
 dataDescriptor : String -> String
 dataDescriptor descriptor =
     "clickable-text-" ++ descriptor
@@ -600,7 +648,7 @@ type alias ClickableTextAttributes msg =
 defaults : ClickableTextAttributes msg
 defaults =
     { clickableAttributes = ClickableAttributes.init
-    , size = Medium
+    , size = Inherited
     , label = ""
     , icon = Nothing
     , iconStyles = []

diff --git a/src/Nri/Ui/Text/V6.elm b/src/Nri/Ui/Text/V6.elm
@@ -264,13 +264,6 @@ paragraphStyles config =
     , lastChild
         [ margin zero
         ]
-    , children
-        [ typeSelector "a"
-            [ Css.fontFamily Css.inherit
-            , Css.fontWeight Css.inherit
-            , Css.display Css.inline
-            ]
-        ]
     ]