Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Notifications): Added archived state, NotificationsPopupWrapper component and enhanced the stories for notifications #83

Conversation

Ruminat
Copy link
Contributor

@Ruminat Ruminat commented Jul 26, 2023

Added features:

  • Added animated archived state to Notification.
  • Added Error and Loading states to Notifications.
  • Added InfiniteScroll functionality to Notifications.
  • Added NotificationsPopupWrapper component with some styles so it would be easier to use Notifications inside a popup.
  • Added all of the above features to the Notifications' stories.

Fixed problems:

  • Added cursor: pointer to active notifications (with non-empty onClick).
  • Fixed Notification's source img size.
image

[UXRFC-114]

@gravity-ui-bot
Copy link
Contributor

Preview is ready.

@Ruminat Ruminat changed the title feat: Added archived state, NotificationsPopupWrapper component and enhanced the stories for notifications feat(Notifications): Added archived state, NotificationsPopupWrapper component and enhanced the stories for notifications Jul 26, 2023
const style = wrapperMaxHeight === undefined ? {} : {maxHeight: `${wrapperMaxHeight}px`};

if (isRemoved) {
return <></>;
Copy link
Contributor

Choose a reason for hiding this comment

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

return null;?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changed to null

@Ruminat
Copy link
Contributor Author

Ruminat commented Aug 1, 2023

@korvin89 @ValeraS could you take a look?

…feat-added-archived-state-and-enhanced-the-stories-for-notifications
@Ruminat
Copy link
Contributor Author

Ruminat commented Aug 3, 2023

@korvin89 @ValeraS ping

package.json Outdated Show resolved Hide resolved
src/components/Notification/Notification.scss Outdated Show resolved Hide resolved
const [wrapperMaxHeight, setWrapperMaxHeight] = React.useState<number | undefined>(undefined);
const [isRemoved, setIsRemoved] = React.useState(false);

React.useEffect(() => {
Copy link
Contributor

Choose a reason for hiding this comment

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

it is a little bit weird that notification manages it's visibility state by itself

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's because we need to animate the removing effect (archive)
I thought it would be more convenient if we manage it in the NotificationWrapper component

src/components/Notifications/NotificationsErrorState.tsx Outdated Show resolved Hide resolved
@Ruminat
Copy link
Contributor Author

Ruminat commented Aug 7, 2023

@korvin89 ping

…feat-added-archived-state-and-enhanced-the-stories-for-notifications
@Ruminat Ruminat merged commit 877803a into main Aug 9, 2023
3 checks passed
@Ruminat Ruminat deleted the feat-added-archived-state-and-enhanced-the-stories-for-notifications branch August 9, 2023 10:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants