From 7d3604a3b7cd0a348d0bcb549ca590395206d1e0 Mon Sep 17 00:00:00 2001 From: charbelrami Date: Tue, 9 Jan 2024 18:40:16 -0300 Subject: [PATCH] fix ClickableText font-size inheritance, update examples --- component-catalog/src/CommonControls.elm | 4 +- .../src/Examples/ClickableText.elm | 12 +- src/Nri/Ui/ClickableText/V4.elm | 104 +++++++++++++----- src/Nri/Ui/Text/V6.elm | 7 -- 4 files changed, 82 insertions(+), 45 deletions(-) diff --git a/component-catalog/src/CommonControls.elm b/component-catalog/src/CommonControls.elm index e00b087fc..0d179baa4 100644 --- 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 index 2598c692e..3c6ed7e65 100644 --- 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 index 9bcfc68e9..a10181bb6 100644 --- 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 index f45819ef9..2c5ad3392 100644 --- 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 - ] - ] ]