StackExchange
feat(vote): add vote component
Figma Docs (Stacks Classic) Storybook (Stacks Svelte)
This PR adds a vote component to Stacks Classic and Stacks Svelte.
[!NOTE] At the time of writing, downvote icons are not yet design so are instead shown using the placeholder icons. Once the downvote icons are updated in the stacks-icons packages, the correct icons should show.
Screenshots
Base
Light
Dark
Light HC
Dark HC
Expanded
Horizontal
Voted
🦋 Changeset detected
Latest commit: fa90b94f09274ce8d91282599066a268d6eb46b9
The changes in this PR will be included in the next version bump.
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
![changeset-bot[bot] avatar](https://avatars.githubusercontent.com/in/28616?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy Preview for stacks-svelte ready!
| Name | Link |
|---|---|
| Latest commit | fa90b94f09274ce8d91282599066a268d6eb46b9 |
| Latest deploy log | https://app.netlify.com/projects/stacks-svelte/deploys/693c99806d13d40008b1ae38 |
| Deploy Preview | https://deploy-preview-2062--stacks-svelte.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy Preview for stacks ready!
| Name | Link |
|---|---|
| Latest commit | fa90b94f09274ce8d91282599066a268d6eb46b9 |
| Latest deploy log | https://app.netlify.com/projects/stacks/deploys/693c99800c112c0008747cfb |
| Deploy Preview | https://deploy-preview-2062--stacks.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
Downvote icons are available now (the vote icon but direction set to down)
Confirming we don't have a use case currently where we have a horizontal version with both up and downvotes. We only have the horizontal single vote so wondering if we should just not show the version with 2 votes on horizontal (people shouldn't use this).
I'm ok keeping the version you have though where both up/down are possible and the focus/hover stays on one side. I think it still works fine even with just the upvote and it would save us time later if product decides to add in downvotes to comments/replies.
the selected state for horizontal layout doesn't match the one for comments in designs
Nice catch @mukunku! I built it with this in mind originally but completely spaced when making the examples and Svelte component. Fixed!
I'm ok keeping the version you have though where both up/down are possible and the focus/hover stays on one side. I think it still works fine even with just the upvote and it would save us time later if product decides to add in downvotes to comments/replies.
@CGuindon Sal pointed out that I missed the configuration in the Figma. I've updated the horizontal orientation to match what's in Figma where the element is just one upvote button that includes the vote count. If/when we want to allow for downvotes on the horizontal orientation, we'll be able to do that pretty trivially.
Downvote icons are available now (the vote icon but direction set to down)
The standard (20x20) downvote icon is available but we need the 16px ones for this component. We can still merge without them and once they're published and the icons library dependency is updated, this component will display them with no further changes besides regenerating the test images.
The Svelte component was built to update the count and wait for a promise to resolve to confirm the vote count was updated on the server-side. It makes sense to do the same thing for the separate counts.