fix: S2 notification badge follow-ups (#8003)

* fix: notification badge follow-up

* remove notification badge if action button is disabled

* remove label only quiet action button

Author: yihuiliao

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

@@ -223,14 +223,13 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
     type: 'top',
     value: {
       default: '[calc(self(height)/2 - var(--iconWidth)/2)]',
-      [iconOnly]: '[calc(self(height)/2 - var(--iconWidth)/2)]',
       [textOnly]: 0
     }
   },
   '--buttonPaddingX': {
     type: 'paddingStart',
     value: {
-      default: '[calc(self(height, self(minHeight)) * 3 / 8)]',
+      default: 'edge-to-text',
       [iconOnly]: 0
     }
   },
@@ -314,6 +313,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
           }],
           [NotificationBadgeContext, {
             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

@@ -39,10 +39,17 @@ export interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, Sty
   value?: number | null
 }
 
-export const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeProps>, DOMRefValue<HTMLDivElement>>>(null);
+interface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {
+  isDisabled?: boolean
+}
+
+export const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const badge = style({
-  display: 'flex',
+  display: {
+    default: 'flex',
+    isDisabled: 'none'
+  },
   font: 'control',
   color: {
     default: 'white',
@@ -111,8 +118,9 @@ export const NotificationBadge = forwardRef(function Badge(props: NotificationBa
   let {
     size = 'S',
     value,
+    isDisabled = false,
     ...otherProps
-  } = props;
+  } = props as NotificationBadgeContextProps;
   let domRef = useDOMRef(ref);
   let {locale} = useLocale();
   let formattedValue = '';
@@ -151,7 +159,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}, props.styles)}
+      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled}, props.styles)}
       style={props.UNSAFE_style}
       ref={domRef}>
       {formattedValue}

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

@@ -205,13 +205,12 @@ export const Avatars: Story = {
 const NotificationBadgesExample = (args) => {
   let badgeValue = 10;
   let formattedValue = useNumberFormatter().format(badgeValue);
-
   return (
     <div style={{display: 'flex', gap: 8, padding: 8, justifyContent: 'center'}}>
       <ActionButton aria-label="Messages has new activity" {...args}><CommentIcon /><NotificationBadge /></ActionButton>
       <ActionButton aria-label={`${formattedValue} notifications`} {...args}><BellIcon /><NotificationBadge value={badgeValue} /></ActionButton>
       <ActionButton {...args}><CommentIcon /><Text>Messages</Text><NotificationBadge value={5} /></ActionButton>
-      <ActionButton {...args}><Text>Notifications</Text><NotificationBadge value={105} /></ActionButton>
+      {!args.isQuiet && <ActionButton {...args}><Text>Notifications</Text><NotificationBadge value={105} /></ActionButton>}
     </div>
   );
 };
@@ -224,16 +223,18 @@ NotificationBadges.parameters = {
   docs: {
     source: {
       transform: () => {
-        return `let badgeValue = 10;
-        let formattedValue = useNumberFormatter().format(badgeValue);
-      
-        return (
-          <div style={{display: 'flex', gap: 8, padding: 8, justifyContent: 'center'}}>
-            <ActionButton aria-label="Messages has new activity" {...props}><CommentIcon /><NotificationBadge /></ActionButton>
-            <ActionButton aria-label={\`\${formattedValue} notifications\`}  {...props}><BellIcon /><NotificationBadge value={badgeValue} /></ActionButton>
-            <ActionButton {...props}><CommentIcon /><Text>Messages</Text><NotificationBadge value={5} /></ActionButton>
-            <ActionButton {...props}><Text>Notifications</Text><NotificationBadge value={105} /></ActionButton>
-          </div>
+        return `
+let badgeValue = 10;
+let formattedValue = useNumberFormatter().format(badgeValue);
+
+return (
+  <div style={{display: 'flex', gap: 8, padding: 8, justifyContent: 'center'}}>
+    <ActionButton aria-label="Messages has new activity"><CommentIcon /><NotificationBadge /></ActionButton>
+    <ActionButton aria-label={\`\${formattedValue} notifications\`} ><BellIcon /><NotificationBadge value={badgeValue} /></ActionButton>
+    <ActionButton><CommentIcon /><Text>Messages</Text><NotificationBadge value={5} /></ActionButton>
+    {/* Cannot have an label-only quiet Action Button with a Notification Badge */}
+    {!isQuiet && <ActionButton><Text>Notifications</Text><NotificationBadge value={105} /></ActionButton>}
+  </div>
         )`;
       }
     }