UI: Add close button to version update notification

[Tomastomaslol]

Issue: #12281

What I did

• Added state that contains ids of dismissed notification
• Added new button to that dismisses notifications on click

[shilman]

@Tomastomaslol this looks awesome! @domyen @ndelangen can you take a look?

[domyen]

I'll design a dedicated UI for this and future notifications. We didn't get to that when this feature was first launched. Hang tight!

[domyen]

@shilman @Tomastomaslol 👋

Strawman flash notifications UI strawman
The original notification UI was created for Storybook 5.0 to provide a rudimentary upgrade experience for Storybook users. Fast forward a year and we're encountering rough edges in the UX. My goal here is to design a flash notification UI that:

• Covers more use cases and is more expressive
• Includes a space for CTAs (dismiss, view, etc)

What do you think?

[Tomastomaslol]

@domyen Looks great! 🙂

Should we use a pre-defined list of CTAs? like: 'Close' | 'Open' | 'Dismiss'

Or should the UI be flexible enough to support very long CTAs? like: If you would like to close the notification you can click this link. thank you!

Are you able to share your designs through Zeplin or a similar tool that would allow me to extract the exact CSS properties from your designs?

Have a good day!

[domyen]

Updated the design to simplify the UI more.

• No custom action buttons (that was confusing and opens the door to multiple actions in one notification, an over optimization for now)
• Use an X icon to dismiss, this better indicates that the whole notification can be clicked vs a close button
• UI affordances for :hover :active :focus states
• More examples for long titles and descriptions

@Tomastomaslol InVision here(you should be able to use the Inspect feature). I might have to invite you via email if the Inpsect link isn't there.

[Tomastomaslol]

Hi @domyen! it looks like you have to invite me for me to be able to access the inspect mode in inVision. Could you send me an invite to tomasnygren.854@gmail.com?

[Tomastomaslol]

Hi @domyen!

I hope you are well! 🙂

I'm not sure if I'm doing something strange when I export the "book" icon from inVision but I can't figure out how I can get rid of the background in the SVG. If you got a few spare minutes could you please help me export the book icon without the background?

Other than that, I think I got all scenarios covered now:

Please let me if something looks wrong or if you would like me to cover any other scenarios!

Thanks!

[domyen]

Apologies for the delay. Appreciate the work. 🙇

Will review this tomorrow!

[Tomastomaslol]

Hi @domyen!

No worries! Would it be possible to get the book icon as a single string? so I could add it to https://github.com/storybookjs/storybook/blob/next/lib/components/src/icon/icons.tsx#L3 and implement in a similar way to other icons 🙂

[domyen]

Hey Tomas, apologies again for the delay. Thank you for taking this on, we're super grateful! 🙏

CI
Usually we'd do UI Review in Chromatic but the CI seems to be failing for some reason. Do you mind taking a look at getting CI running again? Maybe there's a fix on next that we can merge into this branch? cc @shilman.

I'll review here instead, but we'll need to get CI green to QA the behavior in the published SB and to merge the code.

Styling

• Book icon is in the SB icons (go here and cmd + f book)
• Use the closealt icon for the close button
• Subheadline should be regular font weight
• Remove emojis from the stories (we're moving away from this pattern)
• When there's headline only it should be vertically centered.

Implementation

• Keep itemContent and itemDismiss inside item. It's fine if item is one big file. Maintaining intertwined functionality across multiple files can be a headache, especially when itemDismiss and itemContent will only be used with the item.
• The item API should allow for any icon or image to be passed in. Make it a "node" instead so we can add any arbitrary component or DOM to it.

Stories

• For visual testing purposes, create a story for each discrete state in item

I'm also on Discord if it helps to chat! Find me in the #design channel or @domyen.

[shilman]

@Tomastomaslol apologies i was messing around with your PR a bit. i think there's some circular dependency that gets created when @storybook/api depends on @storybook/components. i think the solution is to type it as string and then cast it ... WDYT?

[Tomastomaslol]

@shilman thanks for taking your time helping me with this PR. I wasn't sure what the best solution would be but your suggestion makes sense.

There are still some test failures but I'm pretty confident they are not related to the code I wrote and will be fixed with #12746. Please let me know if I have drawn the wrong conclusion and need to spend some more time figuring out why tests are failing.

@domyen I have implemented your feedback. Please let me know if there is anything you would like me to change.

I'm pretty happy with the code and would appreciate a review. 🙂

[domyen]

Thanks for the refinements @Tomastomaslol. 😍

• I committed some style refinements and reviewed the UI code. See the comments/questions above.
• Let's get a deeper code review from another maintainer (maybe @ndelangen or @ghengeveld)
• Once that's done, we're good to go!

[Tomastomaslol]

@ndelangen @domyen Thank you for the review. I have now addressed all the points raised in the review. Please let me know if there is something else you would like me to take a look at.

[ndelangen]

I say it's good to merge!

[shilman]

Thanks for your hard work and patience on this @Tomastomaslol 🙏 Merging!