As I was told growing up in my American Midwest home: "the buttons that style together, stay together". 😆
Our button styling had gotten away from us a bit! In our design, we have a shared set of a few different button styles. This PR standardizes those into a shared set of components that are then re-used throughout the app! Now the majority of the button code (css included) is all in one place! Yum! 😋
Here's how the styling order goes...
In index.css, we target all button elements in the app, mostly resetting a bunch of settings to their initial styles. This is mostly to mitigate some CSS collisions when deployed internally at a8c. We also set some helpful starting points for all buttons in the site (even ones that aren't "action" buttons), like the font and a basic padding, etc.
In the buttons.module.css, we set the styles for our shared set of component buttons.
Other consuming components can still provide other classes to these button components to override some styles in unique cases. This almost always is just massaging padding -- we make certain buttons bigger or smaller in various places in the app!
What is left out?
Buttons that are part of other controls, like the popover menu, the navbar, and the segmented control.
The CTA links in the Next Steps. Since these are links and not true buttons, and because we treat the styling a little different for them, they seemed best left on their own.
Testing Instructions
The unit tests still pass, but that's not too surprising...
Mostly, go through the app and make sure all the buttons still look as they should! I've done a couple passes in this regard, but always appreciate the extra eyes 😄
What Does This PR Add/Change?
As I was told growing up in my American Midwest home: "the buttons that style together, stay together". 😆
Our button styling had gotten away from us a bit! In our design, we have a shared set of a few different button styles. This PR standardizes those into a shared set of components that are then re-used throughout the app! Now the majority of the button code (css included) is all in one place! Yum! 😋
Here's how the styling order goes...
index.css, we target allbuttonelements in the app, mostly resetting a bunch of settings to their initial styles. This is mostly to mitigate some CSS collisions when deployed internally at a8c. We also set some helpful starting points for all buttons in the site (even ones that aren't "action" buttons), like the font and a basic padding, etc.buttons.module.css, we set the styles for our shared set of component buttons.padding-- we make certain buttons bigger or smaller in various places in the app!What is left out?
Testing Instructions
The unit tests still pass, but that's not too surprising...
Mostly, go through the app and make sure all the buttons still look as they should! I've done a couple passes in this regard, but always appreciate the extra eyes 😄
Issues
Related to #
Closes #74