Skip to content
This repository was archived by the owner on Jan 22, 2026. It is now read-only.

Conversation

@sheridanvk
Copy link
Contributor

In general, the notifications that we show up disappear after 2.5s. This makes that the default, and adds a persistent state in the cases where we don't want them to disappear.

Worth noting that in the Community site, there's an inline Notification that is usually persistent. I think we should handle this case by creating a separate InlineNotification component which is used outside of NotificationsProvider, that sets the Notification to persistent.

Screenshot 2020-02-05 at 10 52 08 AM

@sheridanvk sheridanvk requested review from a team and pheebcodes February 5, 2020 15:53
Copy link
Contributor

@ehmorris ehmorris left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me.

`;

export const Notification = ({ message, live, children, variant, timeout, onClose, ...props }) => {
export const Notification = ({ message, live, children, variant, timeout, onClose, persistent, ...props }) => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you think the persistent prop collides with the timeout prop? for example:

<Notification timeout={5000} persistent>
  ...
</Notification>

looking through the code it seems like the example will be persistent, but is that clear from where we are using the component? we could avoid this by saying timeout={null | undefined | 0} means persistent, but i'm not sure that's very clear either!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah this is something I struggled with - the previous definition has timeout = 0 as persistent, but that didn't feel great to me. I can add a custom function to the persistent PropType which throws an error if persistent === true and timeout > 0; what do you think?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you think a notification would ever be conditionally persistent? if we threw an error, then something like <Notification persistent={shouldBePersistent} timeout={5000} /> would need to be <Notification persistent={shouldBePersistent} timeout={shouldBePersistent === false ? 5000 : 0} /> so that we don't pass in something invalid.

maybe a wild idea: what if it was something like timeout="never" to disable the timeout?

Copy link

@pheebcodes pheebcodes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one somewhat philosophical comment!

@pheebcodes pheebcodes self-requested a review February 5, 2020 18:13
Copy link

@pheebcodes pheebcodes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

approved! we're good with the persistent prop.

discussion in slack decided against throwing an error if persistent == true && timeout !== 0 since timeout defaults to 2500. it wouldn't be great to have to explicitly set timeout={0} when persistent={true} to avoid the error. also the prop is documented so it's easy to find that persistent overrides timeout without digging into the shared-component code.

@sheridanvk sheridanvk changed the base branch from sheridan/ch8571/add-ability-to-remove-notifications to master February 5, 2020 19:27
@sheridanvk sheridanvk merged commit c859705 into master Feb 5, 2020
@keithk
Copy link
Contributor

keithk commented Nov 10, 2020

🚀 PR was released in v0.19.0 🚀

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants