NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-19 19:51:37 +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.Fonts.V1
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
@ -294,12 +294,11 @@ viewContent config =
, Css.property "line-height" "normal"
]
]
[ div
[ Attributes.css
[ Css.height fontSize
, Css.maxWidth fontSize
, Css.minWidth fontSize -- so it doesn't shrink when the label is long
, case config.size of
[ icon_
|> Svg.withWidth fontSize
|> Svg.withHeight fontSize
|> Svg.withCss
[ case config.size of
Small ->
Css.marginRight (Css.px 3)
@ -309,8 +308,7 @@ viewContent config =
Large ->
Css.marginRight (Css.px 4)
]
]
[ NriSvg.toHtml icon_ ]
|> Svg.toHtml
, span [] [ text config.label ]
]
]

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

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