NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-24 22:21:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #826 from NoRedInk/bat/clickable-text-icon-alignment

Browse Source 
Fix ClickableText minor visual regression
This commit is contained in:
Tessa 2022-01-28 09:28:49 -08:00 committed by GitHub
commit 1b48d8ec22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Nri/Ui/ClickableText/V3.elm
View File

@ -76,7 +76,7 @@ import Nri.Ui
import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 import Nri.Ui.Fonts.V1
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg) import Nri.Ui.Svg.V1 as Svg exposing (Svg)
label : String -> Attribute msg label : String -> Attribute msg
@ -294,12 +294,11 @@ viewContent config =
, Css.property "line-height" "normal" , Css.property "line-height" "normal"
] ]
] ]
[ div [ icon_
[ Attributes.css |> Svg.withWidth fontSize
[ Css.height fontSize |> Svg.withHeight fontSize
, Css.maxWidth fontSize |> Svg.withCss
, Css.minWidth fontSize -- so it doesn't shrink when the label is long [ case config.size of
, case config.size of
Small -> Small ->
Css.marginRight (Css.px 3) Css.marginRight (Css.px 3)
@ -309,8 +308,7 @@ viewContent config =
Large -> Large ->
Css.marginRight (Css.px 4) Css.marginRight (Css.px 4)
] ]
] |> Svg.toHtml
[ NriSvg.toHtml icon_ ]
, span [] [ text config.label ] , span [] [ text config.label ]
] ]
] ]

7
styleguide-app/Examples/ClickableText.elm
View File

@ -64,9 +64,10 @@ init =
|> Control.field "icon" |> Control.field "icon"
(Control.maybe True <| (Control.maybe True <|
Control.choice Control.choice
[ ( "Preview", Control.value UiIcon.preview ) [ ( "premiumLock", Control.value UiIcon.premiumLock )
, ( "Performance", Control.value UiIcon.performance ) , ( "preview", Control.value UiIcon.preview )
, ( "Edit", Control.value UiIcon.edit ) , ( "performance", Control.value UiIcon.performance )
, ( "edit", Control.value UiIcon.edit )
] ]
) )
|> State |> State