chore(notification badge): add plain variant to demos

andrew-ronaldson · andrew-ronaldson · commit 8088eb3607c9 · 2026-07-23T13:06:17.000-03:00
diff --git a/packages/react-core/src/demos/DashboardHeader.tsx b/packages/react-core/src/demos/DashboardHeader.tsx
@@ -149,7 +149,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                 <ToolbarItem>
                   <NotificationBadge
                     aria-label="Notifications"
-                    variant={NotificationBadgeVariant.read}
+                    variant={NotificationBadgeVariant.plain}
                     onClick={() => {}}
                   />
                 </ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
@@ -189,7 +189,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -396,7 +396,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -134,7 +134,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -113,7 +113,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -161,7 +161,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -128,7 +128,7 @@ export const NavManual: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

Original file line number	Diff line number	Diff line change
`@@ -189,7 +189,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {`
`189`	`189`	`gap={{ default: 'gapNone', md: 'gapMd' }}`
`190`	`190`	`>`
`191`	`191`	`<ToolbarItem>`
`192`		`- <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />`
	`192`	`+ <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />`
`193`	`193`	`</ToolbarItem>`
`194`	`194`	`<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>`
`195`	`195`	`<ToolbarItem>`
Original file line number	Diff line number	Diff line change
`@@ -396,7 +396,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =`
`396`	`396`	`gap={{ default: 'gapNone', md: 'gapMd' }}`
`397`	`397`	`>`
`398`	`398`	`<ToolbarItem>`
`399`		`- <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />`
	`399`	`+ <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />`
`400`	`400`	`</ToolbarItem>`
`401`	`401`	`<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>`
`402`	`402`	`<ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>`
Original file line number	Diff line number	Diff line change
`@@ -134,7 +134,7 @@ export const NavFlyout: React.FunctionComponent = () => {`
`134`	`134`	`gap={{ default: 'gapNone', md: 'gapMd' }}`
`135`	`135`	`>`
`136`	`136`	`<ToolbarItem>`
`137`		`- <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />`
	`137`	`+ <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />`
`138`	`138`	`</ToolbarItem>`
`139`	`139`	`<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>`
`140`	`140`	`<ToolbarItem>`
Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@ export const NavHorizontal: React.FunctionComponent = () => {`
`113`	`113`	`gap={{ default: 'gapNone', md: 'gapMd' }}`
`114`	`114`	`>`
`115`	`115`	`<ToolbarItem>`
`116`		`- <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />`
	`116`	`+ <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />`
`117`	`117`	`</ToolbarItem>`
`118`	`118`	`<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>`
`119`	`119`	`<ToolbarItem>`
Original file line number	Diff line number	Diff line change
`@@ -161,7 +161,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {`
`161`	`161`	`gap={{ default: 'gapNone', md: 'gapMd' }}`
`162`	`162`	`>`
`163`	`163`	`<ToolbarItem>`
`164`		`- <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />`
	`164`	`+ <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />`
`165`	`165`	`</ToolbarItem>`
`166`	`166`	`<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>`
`167`	`167`	`<ToolbarItem>`
Original file line number	Diff line number	Diff line change
`@@ -128,7 +128,7 @@ export const NavManual: React.FunctionComponent = () => {`
`128`	`128`	`gap={{ default: 'gapNone', md: 'gapMd' }}`
`129`	`129`	`>`
`130`	`130`	`<ToolbarItem>`
`131`		`- <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />`
	`131`	`+ <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />`
`132`	`132`	`</ToolbarItem>`
`133`	`133`	`<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>`
`134`	`134`	`<ToolbarItem>`