notification indicator - #8311
Conversation
🦋 Changeset detectedLatest commit: b4ca76e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
the
integration-tests: recommended
|
There was a problem hiding this comment.
Pull request overview
This PR introduces a reusable notificationIndicator utility class exported from @primer/react to render a small notification dot on interactive controls via a pseudo-element, plus a Storybook example and an accompanying changeset.
Changes:
- Add
NotificationIndicator.module.cssand export anotificationIndicatorclass name utility. - Export
notificationIndicatorfrom the package entrypoint and update the exports snapshot. - Add a Button feature story demonstrating the indicator on
ButtonandIconButton.
Show a summary per file
| File | Description |
|---|---|
packages/react/src/NotificationIndicator/NotificationIndicator.module.css |
Adds the CSS Module styling for the notification dot pseudo-element. |
packages/react/src/NotificationIndicator/index.ts |
Exposes the CSS Module class as the notificationIndicator export. |
packages/react/src/index.ts |
Re-exports notificationIndicator from the package root. |
packages/react/src/Button/Button.features.stories.tsx |
Adds a Storybook example applying the indicator to Button and IconButton. |
packages/react/src/__tests__/__snapshots__/exports.test.ts.snap |
Updates the public-exports snapshot to include notificationIndicator. |
.changeset/bright-dots-notify.md |
Declares a minor release for the new exported utility. |
Review details
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
- Files reviewed: 6/6 changed files
- Comments generated: 1
- Review effort level: Lite
| position: absolute; | ||
| top: calc(var(--base-size-4) / -2); | ||
| right: calc(var(--base-size-4) / -2); | ||
| display: block; | ||
| width: var(--base-size-8); |
| @@ -0,0 +1,3 @@ | |||
| import classes from './NotificationIndicator.module.css' | |||
|
|
|||
| export const notificationIndicator = classes.NotificationIndicator | |||
There was a problem hiding this comment.
I'm not aware of many classes we export like this. Would it be better to add a prop to appropriate components unread={true} or notification={true}?
There was a problem hiding this comment.
Good point! I replaced the exported CSS class with a notificationIndicator prop on Button and IconButton.
|
Integration test results from github/github-ui PR: |
Closes github/primer#6322
Adds a
notificationIndicatorprop toButtonandIconButtonfor displaying new activity. The prop also supports placement variants so the indicator can appear on the control boundary or on the relevant visual:Button:"button"or"leadingVisual"IconButton:"button"or"icon"Changelog
New
notificationIndicatorfrom@primer/reactButtonandIconButtonRollout strategy
Testing & Reviewing