Closed adamwoodnz closed 11 months ago
Looks good.
Small pet peeve, is it too late to rename "Tertiary" to "Text"? The former suggests a hierarchy where none exists. If we can't, that's fine.
I second the suggestion to rename "tertiary" to "text," that describes the button better too.
Perhaps a question for design, will we need small/toggle/tertiary variations on dark backgrounds? Or small outline buttons? Large text buttons?
Since variations can't combine, we'd need to create potentially 16 individual variations: [default, outline, text, toggle] * [small, normal] * [on dark, on light]
… and this picker already feels like a lot 😅
If we might need more, maybe we could have toggles or something, like the isSmall
prop on the GB button.
We can't go back on the "Default/Filled on dark" "Outline/Outline on dark" split, because those are already in use on production… but even just helper class that can be manually applied might help.
Perhaps a question for design, will we need small/toggle/tertiary variations on dark backgrounds? Or small outline buttons? Large text buttons?
I don't think so. At the moment, the Theme Directory is dark, but it's not using the toggles:
even just helper class that can be manually applied might help
Yeah I did consider whether this needed to be something exposed in the editor. If we go with the is-small
helper class, should the Toggle
and Text
variations be defined large by default as well then?
should the
Toggle
andText
variations be defined large by default as well then?
I think so, otherwise the size difference would be unexpected. I've made this change now, so there are less variations:
Frontend:
Closes #111
Adds 3 style variations:
I've made Tertiary and Toggle small by definition, based on their semantics and usage in the Developer designs, and to avoid the complexity in supporting both large and small. We can add these variations if need be later.
Screenshots
States
Developer
How to test the changes in this Pull Request: