Changelog: Subscribe to a Post’s Threads v2

Nick Taylor - May 6 '20 - - Dev Community

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.

Screenshot of the old comment subscription feature

With the new comment subscription component, comment subscriptions are front and center in the discussion area of a post.

New comment subscription component

All the existing functionality still exists, it's just easier to find. 😄 You can subscribe to all comments, top comments, author comments or unsubscribe.

New comment subscription component displaying comment subscription options

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)

image

Just some screenshots for responsiveness

image

The Feature in Action

Apr-22-2020 15-01-26

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?

Kevin McAllister from Home Alone moving his eyebrows up and down

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

image

image

<Snackbar /> Component

image

image

<SnackbarPoller /> Component

image

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?

Someone holding two bags of chips saying "Snack attack!"

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)

Apr-08-2020 11-27-02

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?

A woman pointing up at the word subscribe

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.

image

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?

Elf in the movie Elf pressing as many elevator buttons as possible at the same time

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} />

image

Secondary

<Button variant="secondary" {...props} />

image

Outlined

<Button variant="outlined" {...props} />

image

Danger

<Button variant="danger" {...props} />

image

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?

Some cute cartoon animation saying "I like pressing buttons!"

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .