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

Fix icon alignment

Browse Source
This commit is contained in:
Tessa Kelly 2022-02-18 11:43:47 -08:00
parent 99ee395e10
commit 5dd8a5f154
1 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/Nri/Ui/Button/V10.elm
View File

@ -513,7 +513,7 @@ renderButton ((ButtonOrLink config) as button_) =
:: Attributes.type_ "button"
:: config.customAttributes
)
[ viewLabel config.icon config.label ]
[ viewLabel config.size config.icon config.label ]
renderLink : ButtonOrLink msg -> Html msg
@ -529,7 +529,7 @@ renderLink ((ButtonOrLink config) as link_) =
(styledName linkFunctionName)
[ buttonStyles config.size config.width colorPalette config.customStyles ]
(attributes ++ config.customAttributes)
[ viewLabel config.icon config.label ]
[ viewLabel config.size config.icon config.label ]
@ -624,7 +624,7 @@ toggleButton config =
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name
, Attributes.type_ "button"
]
[ viewLabel Nothing config.label ]
[ viewLabel Medium Nothing config.label ]
buttonStyles : ButtonSize -> ButtonWidth -> ColorPalette -> List Style -> Style
@ -637,8 +637,12 @@ buttonStyles size width colors customStyles =
]
viewLabel : Maybe Svg -> String -> Html msg
viewLabel maybeSvg label_ =
viewLabel : ButtonSize -> Maybe Svg -> String -> Html msg
viewLabel size maybeSvg label_ =
let
{ imageHeight } =
sizeConfig size
in
Nri.Ui.styled Html.span
"button-label-span"
[ Css.overflow Css.hidden -- Keep scrollbars out of our button
@ -653,7 +657,16 @@ viewLabel maybeSvg label_ =
renderMarkdown label_
Just svg ->
NriSvg.toHtml svg :: renderMarkdown label_
(svg
|> NriSvg.withHeight (Css.px imageHeight)
|> NriSvg.withCss
[ Css.width Css.auto
, Css.flexShrink Css.zero
, Css.marginRight (Css.px 5)
]
|> NriSvg.toHtml
)
:: renderMarkdown label_
)
@ -803,10 +816,8 @@ colorStyle colorPalette =
]
sizeStyle : ButtonSize -> ButtonWidth -> Style
sizeStyle size width =
let
config =
sizeConfig : ButtonSize -> { fontSize : number, height : number, imageHeight : number, shadowHeight : number, minWidth : number }
sizeConfig size =
case size of
Small ->
{ fontSize = 15
@ -832,6 +843,13 @@ sizeStyle size width =
, minWidth = 200
}
sizeStyle : ButtonSize -> ButtonWidth -> Style
sizeStyle size width =
let
config =
sizeConfig size
sizingAttributes =
let
verticalPaddingPx =
@ -891,18 +909,4 @@ sizeStyle size width =
, Css.borderBottomWidth (Css.px config.shadowHeight)
, Css.batch sizingAttributes
, Css.batch widthAttributes
, Css.Global.descendants
[ Css.Global.img
[ Css.height (Css.px config.imageHeight)
, Css.width Css.auto
, Css.marginRight (Css.px 5)
, Css.flexShrink Css.zero
]
, Css.Global.svg
[ Css.height (Css.px config.imageHeight)
, Css.width Css.auto
, Css.marginRight (Css.px 5)
, Css.flexShrink Css.zero
]
]
]