Skip to content

Commit cfe79d3

Browse files
authored
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
1 parent 3c9b36a commit cfe79d3

File tree

3 files changed

+27
-18
lines changed

3 files changed

+27
-18
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -223,14 +223,13 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
223223
type: 'top',
224224
value: {
225225
default: '[calc(self(height)/2 - var(--iconWidth)/2)]',
226-
[iconOnly]: '[calc(self(height)/2 - var(--iconWidth)/2)]',
227226
[textOnly]: 0
228227
}
229228
},
230229
'--buttonPaddingX': {
231230
type: 'paddingStart',
232231
value: {
233-
default: '[calc(self(height, self(minHeight)) * 3 / 8)]',
232+
default: 'edge-to-text',
234233
[iconOnly]: 0
235234
}
236235
},
@@ -314,6 +313,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
314313
}],
315314
[NotificationBadgeContext, {
316315
size: props.size === 'XS' ? undefined : props.size,
316+
isDisabled: props.isDisabled,
317317
styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})
318318
}]
319319
]}>

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,17 @@ export interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, Sty
3939
value?: number | null
4040
}
4141

42-
export const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeProps>, DOMRefValue<HTMLDivElement>>>(null);
42+
interface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {
43+
isDisabled?: boolean
44+
}
45+
46+
export const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);
4347

4448
const badge = style({
45-
display: 'flex',
49+
display: {
50+
default: 'flex',
51+
isDisabled: 'none'
52+
},
4653
font: 'control',
4754
color: {
4855
default: 'white',
@@ -111,8 +118,9 @@ export const NotificationBadge = forwardRef(function Badge(props: NotificationBa
111118
let {
112119
size = 'S',
113120
value,
121+
isDisabled = false,
114122
...otherProps
115-
} = props;
123+
} = props as NotificationBadgeContextProps;
116124
let domRef = useDOMRef(ref);
117125
let {locale} = useLocale();
118126
let formattedValue = '';
@@ -151,7 +159,7 @@ export const NotificationBadge = forwardRef(function Badge(props: NotificationBa
151159
{...filterDOMProps(otherProps, {labelable: true})}
152160
role={ariaLabel && 'img'}
153161
aria-label={ariaLabel}
154-
className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit}, props.styles)}
162+
className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled}, props.styles)}
155163
style={props.UNSAFE_style}
156164
ref={domRef}>
157165
{formattedValue}

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -205,13 +205,12 @@ export const Avatars: Story = {
205205
const NotificationBadgesExample = (args) => {
206206
let badgeValue = 10;
207207
let formattedValue = useNumberFormatter().format(badgeValue);
208-
209208
return (
210209
<div style={{display: 'flex', gap: 8, padding: 8, justifyContent: 'center'}}>
211210
<ActionButton aria-label="Messages has new activity" {...args}><CommentIcon /><NotificationBadge /></ActionButton>
212211
<ActionButton aria-label={`${formattedValue} notifications`} {...args}><BellIcon /><NotificationBadge value={badgeValue} /></ActionButton>
213212
<ActionButton {...args}><CommentIcon /><Text>Messages</Text><NotificationBadge value={5} /></ActionButton>
214-
<ActionButton {...args}><Text>Notifications</Text><NotificationBadge value={105} /></ActionButton>
213+
{!args.isQuiet && <ActionButton {...args}><Text>Notifications</Text><NotificationBadge value={105} /></ActionButton>}
215214
</div>
216215
);
217216
};
@@ -224,16 +223,18 @@ NotificationBadges.parameters = {
224223
docs: {
225224
source: {
226225
transform: () => {
227-
return `let badgeValue = 10;
228-
let formattedValue = useNumberFormatter().format(badgeValue);
229-
230-
return (
231-
<div style={{display: 'flex', gap: 8, padding: 8, justifyContent: 'center'}}>
232-
<ActionButton aria-label="Messages has new activity" {...props}><CommentIcon /><NotificationBadge /></ActionButton>
233-
<ActionButton aria-label={\`\${formattedValue} notifications\`} {...props}><BellIcon /><NotificationBadge value={badgeValue} /></ActionButton>
234-
<ActionButton {...props}><CommentIcon /><Text>Messages</Text><NotificationBadge value={5} /></ActionButton>
235-
<ActionButton {...props}><Text>Notifications</Text><NotificationBadge value={105} /></ActionButton>
236-
</div>
226+
return `
227+
let badgeValue = 10;
228+
let formattedValue = useNumberFormatter().format(badgeValue);
229+
230+
return (
231+
<div style={{display: 'flex', gap: 8, padding: 8, justifyContent: 'center'}}>
232+
<ActionButton aria-label="Messages has new activity"><CommentIcon /><NotificationBadge /></ActionButton>
233+
<ActionButton aria-label={\`\${formattedValue} notifications\`} ><BellIcon /><NotificationBadge value={badgeValue} /></ActionButton>
234+
<ActionButton><CommentIcon /><Text>Messages</Text><NotificationBadge value={5} /></ActionButton>
235+
{/* Cannot have an label-only quiet Action Button with a Notification Badge */}
236+
{!isQuiet && <ActionButton><Text>Notifications</Text><NotificationBadge value={105} /></ActionButton>}
237+
</div>
237238
)`;
238239
}
239240
}

0 commit comments

Comments
 (0)