Notifications

[Levinson1]

Pattern design documentation: https://pages.github.ibm.com/cdai-design/pal/patterns/notifications

Dev maintainer: Matt Gallo (@matthewgallo)

[matthewgallo]

Tasks

• [x] Initial review of design/existing code

Working in experimental package

• [x] Create a shell component which
  • [x] Create ComponentName/ComponentName.js component file that renders props in raw form (no styling or sub components, plain text OK)
  • [x] Adds prop-types with comments for DocGen to ComponentName/ComponentName.js
  • [x] Add Doc file e.g. ComponentName.mdx with a brief description of the component.
• [x] First engineering review/playback

Continuing in experimental package

• [x] Storybook - stories to cover design scenarios, story with long, min and max content, etc
• [x] Doc tab in storybook derived from design docs with embedded stories where appropriate
• [x] Code to include prop-types with comments for automated DocGen documentation
• [x] Tests (written in React Test Library) to cover behavior from the documented in the components mdx file.

Review and promote

• [ ] Design review
• [ ] Add design review issues addressed, issues raised or discounted.
• [ ] Engineering review - Submit PR to promote component to production package
• [ ] All engineering issues addressed, issues raised or discounted.

[matthewgallo]

https://github.com/carbon-design-system/ibm-cloud-cognitive/pull/254 for initial work

[mauifrancis78]

@matthewgallo Ok finally got my Git up and working. Here are some points of feedback I see so far along with screen shots:

Spacing/padding (which I provided a screen for) What happened to the bottom bar “view all” “settings icon”? Individual notification dimiss controls Read/unread states Empty state spacing

Left alignment between the illustration and the text too.

[matthewgallo]

Thanks for the feedback @mauifrancis78! I just finished the first version of the side panel component and have more time to make these updates now. I'll let you know when they're complete

[matthewgallo]

Made design updates here https://github.com/carbon-design-system/ibm-cloud-cognitive/pull/283 Preview here

[andrea-island]

@matthewgallo in the preview I'm seeing an unexpected horizontal scrollbar

[matthewgallo]

Thanks for bringing this up @andrea-gm, I’ll take a look

[matthewgallo]

Should be fixed here

[andrea-island]

@matthewgallo Minor detail, sorry I just noticed this while reviewing the scrollbar PR, but I think it would be nice to have the hover state cover the whole 1px line at the top. Otherwise it looks a little choppy. It doesn't do this effect on the bottom.

Thoughts @mauifrancis78 ?

[mauifrancis78]

Not minor at all, in fact I think you are spot on! I agree 100%

[matthewgallo]

Hey @andrea-gm and @mauifrancis78, the underline issue will be fixed with #343. You can check out the deploy preview here

[dcwarwick]

Review for release

Readiness

• [x] One or more scenarios for a design pattern have been identified as a useful unit of functionality to publish. The component delivers the notifications panel view, not the indicator or full page views
• [x] A functioning component or components delivering those scenarios have been delivered and merged to master.
• [x] Design maintainer has approved the implementation for those scenarios (via a comment on the relevant issue/epic).

Engineering review

• [x] Breaking changes have only been introduced with prior approval, discussion and documented in release notes. Ideally deprecation notices in the prior major version must have been added in a timely fashion.
• [x] The implementation takes into account, and does not impair, remaining and anticipated design scenarios.
• [x] Public component features (names, props, etc) are consistent with Carbon-defined conventions and are consistent internally. Where there isn't an existing convention to apply, ensure robust precedents are being established. issue 574 opened
• [x] The UI produced is accessible, responsive, translatable, cross-browser, and responds to the currently set Carbon theme. the panel does not respond to the Carbon theme, by design. issue 574 opened for translatability
• [x] Components are functional components using hooks.
• [x] Public components which produce DOM structures support className.
• [x] Public components support a ref (via React.forwardRef). issue 574 opened
• [x] All significant DOM elements have meaningful classes.
• [x] Additional attributes that are not identified as props (such as title, aria-*, etc) are passed through to an appropriate DOM node of the component as HTML attributes.
• [x] No warnings, errors or log messages in the console.
• [x] Each public component JS is exported in /src/components/index.js, each public component SCSS is included in /src/components/_index.scss, and each public component has a flag in package-settings.js.

Standards

• [x] No linter warnings or errors are produced.
• [x] Carbon tokens (theme, layout, motion) are used unless the design specifies otherwise.issue 574 opened
• [x] Code is formatted according to prettier rules (no use of //prettier-ignore).
• [x] Code is clear, maintainable and follows standard React practices and the code guidelines.
• [x] Copyright header in every source file (js, css, scss etc.) with the appropriate years.

Testing

• [x] There is a set of test cases for the components.
• [x] The tests exercise all inputs (props, slots, etc) and verify appropriate outputs.
• [x] The tests validate the behaviors and interactions defined in the design where practical.
• [x] The tests achieve 100% coverage. Usage of istanbul ignore is appropriate and not extensive.
• [x] No warnings, errors or log messages in the test output.

Documentation

• [x] Source code is satisfactorily commented and provides DocGen comments for all public components and their props.
• [x] There is a story for each design scenario. The stories expose all relevant props and actions, and additional usage documentation and code samples are available on the 'Docs' tab along with the props table.issue 574 opened
• [x] There is a sandbox (or multiple sandboxes if appropriate) on CodeSandbox for the components.

[andrea-island]

@matthewgallo have you synced with Dejan Glozic about the notifications panel? I heard his team will implement their own for the global navigation bar for one pak, which is written in vanilla js. So it might be good to share this with him and see what they can leverage. It may not make sense in the future to maintain two separate notification panels, so it'd be good to find a solution that works for one pak and for anyone else who may need it.

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[dcwarwick]

NotificationsPanel has been released and we understand the situation. I think this epic can be closed. If there is further work to be done this can be addressed with a new issue.