search

StackExchange / Stacks

Stack Overflow’s Design System
https://stackoverflow.design
MIT License
602 stars 90 forks source link

feat(button): add vote button variant #1685

Open dancormier opened 3 months ago

dancormier commented 3 months ago

This PR adds a vote variant of the button component to more tightly control and customize vote button styling via Stacks.

Deploy preview: https://deploy-preview-1685--stacks.netlify.app/product/components/buttons/#vote

netlify[bot] commented 3 months ago

Deploy Preview for stacks ready!

Name Link
Latest commit 0d04210bf391ee2b22e3f659b31573d5c2fb9fcf
Latest deploy log https://app.netlify.com/sites/stacks/deploys/65fc8e7b8f7f0d0008580956
Deploy Preview https://deploy-preview-1685--stacks.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

giamir commented 3 months ago

@dancormier @CGuindon What do you think about "dog feed" this new button styles in our docs and replace the existing feedback buttons (see screenshot)?

Screenshot 2024-03-22 at 13 11 58
giamir commented 3 months ago

@CGuindon @dancormier I am not sure how to feel about the focus state changing the internal background color of the button with different colors depending if it is selected or not.

Screenshot 2024-03-22 at 13 38 05 Screenshot 2024-03-22 at 13 38 23 Screenshot 2024-03-22 at 13 38 47 Screenshot 2024-03-22 at 13 38 59

Would not be simpler and more intuitive to treat this special vote button like we do toggles or tags? I mean just surrounding the element with an outline and leave the background colors unchanged.

Screenshot 2024-03-22 at 13 39 52 Screenshot 2024-03-22 at 13 39 44

I am thinking that if I struggle to understand which color should the vote button be when focused and I work in Stacks I can only imagine how difficult it would be for others to wrap their heads around it.

giamir commented 3 months ago

@dancormier Could we remove the arrow icon button example in the icons section of the page? I think it could be confusing for people since now we have a dedicate vote variant.

Screenshot 2024-03-22 at 13 45 13
giamir commented 3 months ago

@dancormier @CGuindon Is vote the right name for the variant? I think it would be best to describe the variant from a stylistic perspective instead of semantically. I am saying this because we use the same button for bookmarking already and I can imagine how it could be used for other purposes too in the future.

Screenshot 2024-03-22 at 13 59 33

round variant perhaps? I am sure we can come up with a good (domain-agnostic) name.

giamir commented 3 months ago

@dancormier @CGuindon I think this is a good starting point to standardize the vote (or round or whatever 🙂) buttons in Stacks but I think it could benefit from us reflecting some more on our choices before shipping it. We certainly should not treat this work as "side" work especially because I imagine it will be quite painful to integrate and test this changes across different places in Core. I would recommend to plan this extraction work for one of our next sprints and address anything urgent in Core with a temporary fix. We can talk more in our planning today and it's totally ok if you disagree. 🙂