fix: add static color to s2 notification badge (#8055)

* fix: add static color to s2 notification badge

* make opaque

* updates

* use locale

* fix lint

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>

Author: yihuiliao

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

@@ -312,6 +312,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
             styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})
           }],
           [NotificationBadgeContext, {
+            staticColor: staticColor,
             size: props.size === 'XS' ? undefined : props.size,
             isDisabled: props.isDisabled,
             styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})

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

@@ -40,7 +40,8 @@ export interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, Sty
 }
 
 interface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {
-  isDisabled?: boolean
+  isDisabled?: boolean,
+  staticColor?: 'black' | 'white' | 'auto'
 }
 
 export const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);
@@ -53,6 +54,7 @@ const badge = style({
   font: 'control',
   color: {
     default: 'white',
+    isStaticColor: 'auto',
     forcedColors: 'ButtonText'
   },
   fontSize: {
@@ -76,6 +78,7 @@ const badge = style({
   alignItems: 'center',
   backgroundColor: {
     default: 'accent',
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'ButtonFace'
   },
   height: {
@@ -102,7 +105,7 @@ const badge = style({
     isIndicatorOnly: 'square',
     isSingleDigit: 'square'
   },
-  width: 'fit',
+  width: 'max',
   paddingX: {
     isDoubleDigit: 'edge-to-text'
   },
@@ -119,6 +122,7 @@ export const NotificationBadge = forwardRef(function Badge(props: NotificationBa
     size = 'S',
     value,
     isDisabled = false,
+    staticColor,
     ...otherProps
   } = props as NotificationBadgeContextProps;
   let domRef = useDOMRef(ref);
@@ -159,7 +163,7 @@ export const NotificationBadge = forwardRef(function Badge(props: NotificationBa
       {...filterDOMProps(otherProps, {labelable: true})}
       role={ariaLabel && 'img'}
       aria-label={ariaLabel}
-      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled}, props.styles)}
+      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}
       style={props.UNSAFE_style}
       ref={domRef}>
       {formattedValue}