Closed randybascue closed 6 months ago
@randybascue , just a heads up: the smallest spinner button has the spinner icon at 16px
, but we don't have a 16px
spinner icon. Our spinner variations are 20
, 24
and 30
. For that variation, I'll be using the smallest icon we have (20
) and forcing a 16x16
display using css
.
@randybascue , the variations that have the white background; are they supposed to have a transparent background or white?
@randybascue , can you verify the tokens in use for these? Some of the variations look a bit odd in dark mode.
@randybascue , can you verify the tokens in use for these? Some of the variations look a bit odd in dark mode.
Actually, I think I may have figured this one out. There was no token defined for the strokes; the color looked to have been hiding in the markup of the stroke. I assume this is just an override on top of the spinner color combinations.
It looks like the stroke had #3665F3
defined with an svg
opacity set on it at 40%, which looks to result in #3665f366
. This is what it results in:
Please confirm this is accurate. Thanks!
@randybascue , just a heads up: the smallest spinner button has the spinner icon at
16px
, but we don't have a16px
spinner icon. Our spinner variations are20
,24
and30
. For that variation, I'll be using the smallest icon we have (20
) and forcing a16x16
display usingcss
.
Ok, sounds good. I'll submit a ticket on our end
@randybascue , the variations that have the white background; are they supposed to have a transparent background or white?
They should be transparent
Summary
Problem: Our icon buttons only come in a single visual treatment, leading to issues when icon buttons are adjacent to quick filters or other buttons.
Solution: Add additional levels to the icon button to match other buttons levels. This update adds a primary, secondary, and tertiary styling, and converts the current treatment to a "borderless" level.
Resources
Figma spec
Use cases