Update unstyled button and list to BEM #2974
Conversation
| .usa-button--secondary { | ||
| &.usa-button--unstyled { | ||
| @include button-unstyled; | ||
| } |
There was a problem hiding this comment.
Why is it necessary to add the variant button classes before .usa-button--unstyled in the CSS? It looks like it works without this and keeps the CSS much smaller and shallower.
There was a problem hiding this comment.
It was defensive specificity, but I suppose we could remove it
There was a problem hiding this comment.
Actually, it does fix some specificity stuff around hover/active/focus
There was a problem hiding this comment.
I'm not able to reproduce when I check the button states? Is there something else I should do to see the issue?
There was a problem hiding this comment.
I see one issue with the outline button on hover but can probably be resolved individually by removing the border.
There was a problem hiding this comment.
Do you want to resolve those issues individually, chain only those classes, or chain all classes (even if most don't need it)?
There was a problem hiding this comment.
I'm inclined to leave it as is and apply the specificity across the board, if only to make it clear that the unstyled variant should always override any other variant styling. But I don't feel super strongly about this.
There was a problem hiding this comment.
Made a few tweaks to the mixin in #2976 to make it more robust and fix these two issues. If that looks OK, we can merge it in.
|
I assume this is OK, but noticed the text on the unstyled big button is also large.
|
|
That was intentional, but maybe it shouldn't be? |
|
As for hover issues — I see it in the |
Update button unstyled mixin and remove CSS nesting
Unstyled button preview
Unstyled list preview
.usa-button-unstyledto.usa-button.usa-button--unstyledas the unstyled button variant.usa-unstyled-listto.usa-list.usa-list--unstyledas the unstyled list variantFooter bigcomponentFixes #2956