@@ -205,13 +205,12 @@ export const Avatars: Story = {
205
205
const NotificationBadgesExample = ( args ) => {
206
206
let badgeValue = 10 ;
207
207
let formattedValue = useNumberFormatter ( ) . format ( badgeValue ) ;
208
-
209
208
return (
210
209
< div style = { { display : 'flex' , gap : 8 , padding : 8 , justifyContent : 'center' } } >
211
210
< ActionButton aria-label = "Messages has new activity" { ...args } > < CommentIcon /> < NotificationBadge /> </ ActionButton >
212
211
< ActionButton aria-label = { `${ formattedValue } notifications` } { ...args } > < BellIcon /> < NotificationBadge value = { badgeValue } /> </ ActionButton >
213
212
< 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 > }
215
214
</ div >
216
215
) ;
217
216
} ;
@@ -224,16 +223,18 @@ NotificationBadges.parameters = {
224
223
docs : {
225
224
source : {
226
225
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>
237
238
)` ;
238
239
}
239
240
}
0 commit comments