You could already subscribe to a post's comments on DEV, but the problem was many community members were not aware that you could. We had this feature pretty well hidden. From a post page, you had to click on the three dots to see a post's comment subscription options.
With the new comment subscription component, comment subscriptions are front and center in the discussion area of a post.
All the existing functionality still exists, it's just easier to find. 😄 You can subscribe to all comments, top comments, author comments or unsubscribe.
Take it for a spin to stay engaged with the posts that interest you.
Here are the PRs related to this feature for those interested.
Add comment subscription component to article page
#7205
What type of PR is this? (check all applicable)
- [ ] Refactor
- [x] Feature
- [ ] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
Description
Added the comment subscription feature using then new better surface UI.
Related Tickets & Documents
Mobile & Desktop Screenshots/Recordings (if there are UI changes)
Just some screenshots for responsiveness
The Feature in Action
Added tests?
- [x] yes
- [ ] no, because they aren't needed
- [ ] no, because I need help
Added to documentation?
- [ ] docs.dev.to
- [ ] readme
- [x] no documentation needed
[optional] Are there any post deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Created Snackbar components
#7415
What type of PR is this? (check all applicable)
- [ ] Refactor
- [x] Feature
- [ ] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
Description
This PR gives us the following application components. <Snackbar /> and <SnackbarItem /> and <SnackbarPoller />.
How the Snackbar works.
- You can have at most 3 snackbar items in the snackbar
- If more than 3 are added, the 3 newest are the ones that remain.
- The last snackbar item added is the first one to appear at the bottom in the snackbar.
- snackbar items have a default lifespan of 5 seconds which is configurable via the lifespan prop on the
<SnackbarPoller />component. Once the lifespan has completed, the snackbar item is removed from the snackbar - If a user mouses over the snackbar, all lifespans of snackbar items are paused.
- If a use mouses out of the snackbar area, the lifespan of snackbar items resumes.
Related Tickets & Documents
Mobile & Desktop Screenshots/Recordings (if there are UI changes)
<SnackbarItem /> Component
<Snackbar /> Component
<SnackbarPoller /> Component
Added tests?
- [x] yes
- [ ] no, because they aren't needed
- [ ] no, because I need help
Added to documentation?
- [ ] docs.dev.to
- [ ] readme
- [x] no documentation needed
[optional] Are there any post deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Comment Subscription Component
#7136
What type of PR is this? (check all applicable)
- [ ] Refactor
- [x] Feature
- [ ] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
Description
This is the comment subscription component that will be used on the article page. Available on the latest Storybook.
Related Tickets & Documents
Mobile & Desktop Screenshots/Recordings (if there are UI changes)
Added tests?
- [x] yes
- [ ] no, because they aren't needed
- [ ] no, because I need help
Added to documentation?
- [ ] docs.dev.to
- [ ] readme
- [x] no documentation needed
[optional] Are there any post deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Created the <ButtonGroup /> Preact Component
#7048
What type of PR is this? (check all applicable)
- [ ] Refactor
- [x] Feature
- [ ] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
Description
Converted the design system button group to a Preact component.
Here is the ButtonGroup in Storybook
Related Tickets & Documents
Mobile & Desktop Screenshots/Recordings (if there are UI changes)
An example usage of the component.
Added tests?
- [x] yes
- [ ] no, because they aren't needed
- [ ] no, because I need help
Added to documentation?
- [ ] docs.dev.to
- [ ] readme
- [x] no documentation needed
[optional] Are there any post deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Created Crayons Button Preact component
#6987
What type of PR is this? (check all applicable)
- [ ] Refactor
- [x] Feature
- [ ] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
Description
Design system buttons are now available as Preact button components. See the latest Storybook to see button components in action.
By default the <Button /> component renders as an HTML button element, <button ... />, but you can also render it as an HTML anchor element, <a ... />, via the as prop of the <Button /> component. I used as as this is what styled-components used. I basically couldn't think of a better prop name.
Related Tickets & Documents
Mobile & Desktop Screenshots/Recordings (if there are UI changes)
Primary
<Button {...props} />
Secondary
<Button variant="secondary" {...props} />
Outlined
<Button variant="outlined" {...props} />
Danger
<Button variant="danger" {...props} />
Added tests?
- [x] yes
- [ ] no, because they aren't needed
- [ ] no, because I need help
Added to documentation?
- [ ] docs.dev.to
- [ ] readme
- [x] no documentation needed
Top comments (19)
The impetus for developing this out so it's easier to select (The old UI was brutal even if you knew it existed 😵) was that every time folks used it, they were really happy they did. It let's you keep up with ideas you care about. If you come across a conversation you want to pay attention to it's a lot easier to get the stream into your notifications than otherwise.
Cool addition, I didn't know this feature existed
This is one of the main reasons we made this change! I also had no idea this feature existed!
Oh look what showed up in my notifications after I subscribed to this thread...
Same here.
It's really better ! More engagement for subscribe comments. Great job 🙌☕
It is nice addition. Can we get bookmark or save to reading list button on post with other icons ? It happens that I have liked the post.I want to save it for future as well. But I don't see option. I have to go to search bar and save click button. It will be easy if save button exists with other icon.
Thanks for doing great work man.
It's actually already there in the reactions area of a post. 😄
It's the blue icon in the sidebar of a post, or at the bottom if on mobile.
I'm glad you mentioned it though as perhaps you are not the only one that may not be aware that that's what that icon is.
Ohh I never knew that. I thought it is just another icon like heart 😂😂. Thanks.
dev.to/sergix/discussion-subscribe...
I only posted the article today because a bunch of pages had to be invalidated from the cache. Glad you were curious about it yesterday though. 😉
Reminds me of a quote...
😅 I saw the button yesterday but was waiting for this blog post to understand it better.
Looks awesome and really useful!
I actually use this one all the time, but was pleasantly surprised to see the new location just today! It's much more intuitive. Nice work!!
Noice!
Awesome! 🎉
This is interesting!