fix: add static color to s2 notification badge by yihuiliao · Pull Request #8055 · adobe/react-spectrum

yihuiliao · 2025-04-08T16:40:04Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2025-04-08T16:51:14Z

Build successful! 🎉

rspbot · 2025-04-08T17:17:20Z

Build successful! 🎉

reidbarber

LGTM

LFDanLu

LGTM, verified the static color behavior of the NotificationBadge in the ActionButton stories. Just one API question, mainly thinking about the standalone NotificationBadge case which I assume the MenuItem case will run into

LFDanLu · 2025-04-08T18:30:59Z

packages/@react-spectrum/s2/src/NotificationBadge.tsx

 interface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {
-  isDisabled?: boolean
+  isDisabled?: boolean,
+  staticColor?: 'black' | 'white' | 'auto'


Since in practice the NotificationBadge either has color: auto applied or not, I wonder whether the prop set here should accept black/white or if it should just be a boolean. Maybe it could always be auto (but would need to assume it would always get its color from a parent)?

Ah just noticed that this is the context props, less important then, should be fine for now

packages/@react-spectrum/s2/src/NotificationBadge.tsx

yihuiliao · 2025-04-08T21:40:28Z

packages/@react-spectrum/s2/src/NotificationBadge.tsx

    isSingleDigit: 'square'
  },
-  width: 'fit',
+  width: 'max',


noticed that having width set to fit caused the text to wrap in locales like 'zh-CN-u-nu-hanidec' so i changed it

rspbot · 2025-04-08T22:41:38Z

Build successful! 🎉

rspbot · 2025-04-09T02:21:27Z

Build successful! 🎉

* chore: Fix generated code sample for S2 TooltipTrigger docs (adobe#8000) * Fix generated code sample for S2 TooltipTrigger docs * review * inlining * fix: export SortDescriptor type from S2 (adobe#8030) * chore: Deprecate UNSTABLE_portalContainer in favor for PortalProvider (adobe#7976) * Initial refactor to tear out UNSTABLE_portalContainer in favor of the PortalContainer * yarn.lock update * switch to deprecating UNSTABLE_portalContainer * prefer deprecated prop over context to make this a non-breaking change * add rough docs * updating copy to include explaination of UNSTABLE * rename to UNSAFE_PortalProvider * update copy and split out example * use styles from RAC examples --------- Co-authored-by: Robert Snow <rsnow@adobe.com> * feat: Add escapeKeyBehavior to GridList/ListBox/Menu/Table/Tree (adobe#7974) * Add disallowClearAll to Menu/ListBox so Autocomplete in Popover can close without clearing selection * add support for diallowClearAll to grid/tree/table * make sure RSP components also surface disallowClearAll * update api naming to escapeKeyBehavior * skip 17 tests for build, investigate later * review comments * fix: useMove broken by NODE_ENV check (adobe#8046) * fix: ColorWheel track click (adobe#8049) * fix: minor typo in CalendarDate docs (adobe#8043) * fix: minor typo in CalendarDate docs * fix second example as well --------- Co-authored-by: Robert Snow <snowystinger@gmail.com> * fix: Updating collection when items change parents (adobe#8052) * export Autocomplete from S2 (adobe#8050) * chore: Optimize table test performance (adobe#8051) * chore: Update typescript to 5.8 (adobe#7888) * chore: update typescript to 5.8 * fix all the types for the upgrade * fix numberfield styles * fix: Apply touch-action by default in usePress (adobe#8047) * fix: Apply touch-action by default in usePress * fix test --------- Co-authored-by: Daniel Lu <dl1644@gmail.com> * fix: set some better flex behaviour (adobe#8048) * fix: Support React 19 and remove Jest reliance in test utils (adobe#7686) * attempt to get rid of jest calls in menu util * update RSP testing docs to directly mention mocks that maybe needed * bump versions of RTL to 16 * use alternative to calling jest run timers in menu option selection * fixing types and properly testing long press * fix lint * revert to pre testing library bump for clean slate * fix build and another submenu edge case now we shouldnt need to call runAllTimers after selectOption * fix react 16 bug * update return type of advanceTimer and docs copy * move some general fixes from selectionMode="replace" branch here * get rid of unneeded async * getting rid of extraneous dep * fix lint * chore: revert ts update (adobe#8060) * fix: add static color to s2 notification badge (adobe#8055) * fix: add static color to s2 notification badge * make opaque * updates * use locale * fix lint --------- Co-authored-by: Robert Snow <rsnow@adobe.com> * chore: Latest translations (adobe#8036) * Latest translations * Translation correction * Couple of translation corrections * Remove å from Norwegian string --------- Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> * fix: Relax Parcel version range in public plugins (adobe#8067) * Disclosure button label size update to match new sizes from Specturm (adobe#8006) Co-authored-by: Danni <darobins@adobe.com> * chore: audit 3.41 (adobe#8064) * chore: audit 3.41 * remove deprecation * chore: audit 3.41 (adobe#8064) * chore: audit 3.41 * remove deprecation * chore: Update package dependencies for @react-aria/overlays and @react-aria-components * Added @react-aria/ssr and updated @react-aria/overlays in @react-aria/overlays package.json * Added @react-aria/overlays, @react-aria/ssr, and @react-aria/utils in @react-aria-components package.json * chore: Update import paths and dependencies for @react-aria-nutrient * Refactored import statements in various components and tests to use @react-aria-nutrient/overlays instead of @react-aria/overlays. * Removed references to @react-aria/overlays from package.json and yarn.lock. * Updated documentation links to reflect the new package structure. * chore: Update import paths in TableTests to use @react-aria-nutrient * Refactored import statements in TableTests.js to replace @react-aria with @react-aria-nutrient for live-announcer, utils, and focus modules. * Ensured consistency with recent package structure changes. * fix: Add missing newline at end of test files * Ensured proper formatting by adding a newline at the end of Table.test.js and TestTableUtils.test.tsx files to comply with best practices. --------- Co-authored-by: Daniel Lu <dl1644@gmail.com> Co-authored-by: Trevor Howell <25328178+ToyWalrus@users.noreply.github.com> Co-authored-by: Robert Snow <rsnow@adobe.com> Co-authored-by: Devon Govett <devongovett@gmail.com> Co-authored-by: DarkstarXDD <108657985+DarkstarXDD@users.noreply.github.com> Co-authored-by: Robert Snow <snowystinger@gmail.com> Co-authored-by: Reid Barber <reid@reidbarber.com> Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Co-authored-by: Richard Geraghty <rgeraght@adobe.com> Co-authored-by: Kyle Taborski <ktabors@yahoo.com> Co-authored-by: Danni <darobins@adobe.com>

fix: add static color to s2 notification badge

70f6145

make opaque

3a04732

LFDanLu added release in sprint labels Apr 8, 2025

reidbarber previously approved these changes Apr 8, 2025

View reviewed changes

LFDanLu reviewed Apr 8, 2025

View reviewed changes

LFDanLu previously approved these changes Apr 8, 2025

View reviewed changes

devongovett reviewed Apr 8, 2025

View reviewed changes

packages/@react-spectrum/s2/src/NotificationBadge.tsx Outdated Show resolved Hide resolved

updates

c828c69

yihuiliao dismissed stale reviews from LFDanLu and reidbarber via c828c69 April 8, 2025 21:37

use locale

16cde65

yihuiliao commented Apr 8, 2025

View reviewed changes

fix lint

e32f252

Merge branch 'main' into notification-badge-static-color

36d97c4

snowystinger approved these changes Apr 9, 2025

View reviewed changes

LFDanLu approved these changes Apr 9, 2025

View reviewed changes

yihuiliao added this pull request to the merge queue Apr 9, 2025

Merged via the queue into main with commit 04b9fe1 Apr 9, 2025
30 checks passed

yihuiliao deleted the notification-badge-static-color branch April 9, 2025 18:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: add static color to s2 notification badge#8055

fix: add static color to s2 notification badge#8055
yihuiliao merged 6 commits intomainfrom
notification-badge-static-color

yihuiliao commented Apr 8, 2025

Uh oh!

rspbot commented Apr 8, 2025

Uh oh!

rspbot commented Apr 8, 2025

Uh oh!

reidbarber left a comment

Uh oh!

LFDanLu left a comment

Uh oh!

LFDanLu Apr 8, 2025

Uh oh!

LFDanLu Apr 8, 2025

Uh oh!

Uh oh!

yihuiliao Apr 8, 2025

Uh oh!

rspbot commented Apr 8, 2025

Uh oh!

rspbot commented Apr 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

yihuiliao commented Apr 8, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Apr 8, 2025

Uh oh!

rspbot commented Apr 8, 2025

Uh oh!

reidbarber left a comment

Choose a reason for hiding this comment

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

LFDanLu Apr 8, 2025

Choose a reason for hiding this comment

Uh oh!

LFDanLu Apr 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

yihuiliao Apr 8, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Apr 8, 2025

Uh oh!

rspbot commented Apr 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants