LG-4226: Improve support for unstyled button #191
Conversation
| &:hover, | ||
| &.usa-button--hover { | ||
| color: color($theme-link-hover-color); | ||
| } | ||
|
|
||
| &:active, | ||
| &.usa-button--active { | ||
| color: color($theme-link-active-color); | ||
| } |
There was a problem hiding this comment.
@anniehirshman-gsa I noticed in the Figma that the hover and active states should be different colors. I think what we have here is the correct implementation, as far as using $theme-link-hover-color and $theme-link-active-color, but it appears they're currently configured to the same color.
I think it might make sense to update that globally so that the link hover and active colors are distinct, if that's the intention. What do you think?
There was a problem hiding this comment.
Yes I would like to update $theme-link-hover-color: 'primary-dark'; and $theme-link-active-color: 'primary-darker'; globally, to match the unstyled button mockups in Figma. Currently links have a hover color of primary-darker and no active color. @nickttng does that sound good to you too?
There was a problem hiding this comment.
@anniehirshman-gsa Yep, that sounds good
aduth
force-pushed
the
aduth-lg-4226-document-variants
branch
from
ef669a3
to
d17b5ad
Compare
| &.usa-button:not([disabled]):focus, | ||
| &.usa-button:not([disabled]).usa-focus { |
There was a problem hiding this comment.
Just to clarify, this is different from the stanza as below because the & means these styles when they apply to .usa-button--unstyled right, and the one below is when they're on any button?
There was a problem hiding this comment.
Just to clarify, this is different from the stanza as below because the
&means these styles when they apply to.usa-button--unstyledright, and the one below is when they're on any button?
Yeah, when compiled it's the difference of:
.usa-button--unstyled.usa-button:not([disabled]):focus {
/* ... these styles */
}vs.
.usa-button:not([disabled]).usa-focus {
/* ... default focus styles */
}Where the intention with these styles is to unset and replace the default focus styles, only for the unstyled buttons. Ideally we could just use the default styles, but it was surprisingly difficult to reconcile the focus style box shadow + border radius, hence recreating it with a positioned pseudo-element.
The unstyled button variant had previously existed in that it was inherited from USWDS, though it was not documented, and did not always display correctly, particularly in hover, active, and focus states. These changes improve this support, and adds documentation for the unstyled option.
Don't skip heading levels https://dequeuniversity.com/rules/axe/3.5/heading-order
- Use utility classes - Improve mobile display
aduth
force-pushed
the
aduth-lg-4226-document-variants
branch
from
d17b5ad
to
6e51ebf
Compare
The unstyled button variant had previously existed in that it was inherited from USWDS, though it was not documented, and did not always display correctly, particularly in hover, active, and focus states. These changes improve this support, and adds documentation for the unstyled option.
Screenshot:
Live Preview: https://federalist-2f194a10-945e-4413-be01-46ca6dae5358.app.cloud.gov/preview/18f/identity-style-guide/aduth-lg-4226-document-variants/components/buttons/