Skip to content

Commit d0987a7

Browse files
mfrances17mfrances17
authored
chore(Demos): Replace notification buttons with NotificationBadge (#11497)
* chore(Demos): Replace notification buttons with NotificationBadge * apply same changes to table
1 parent 29579de commit d0987a7

12 files changed

+38
-28
lines changed

‎packages/react-core/src/demos/DashboardHeader.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import {
1616
MastheadLogo,
1717
MastheadContent,
1818
MenuToggle,
19+
NotificationBadge,
20+
NotificationBadgeVariant,
1921
Toolbar,
2022
ToolbarContent,
2123
ToolbarGroup,
@@ -26,7 +28,6 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
2628
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
2729
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
2830
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
29-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
3031
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
3132
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
3233
import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
@@ -108,10 +109,9 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
108109
>
109110
{notificationBadge ?? (
110111
<ToolbarItem>
111-
<Button
112+
<NotificationBadge
112113
aria-label="Notifications"
113-
variant={ButtonVariant.plain}
114-
icon={<BellIcon />}
114+
variant={NotificationBadgeVariant.read}
115115
onClick={() => {}}
116116
/>
117117
</ToolbarItem>

‎packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ import {
2525
Nav,
2626
NavItem,
2727
NavList,
28+
NotificationBadge,
29+
NotificationBadgeVariant,
2830
Page,
2931
PageSection,
3032
SkipToContent,
@@ -35,7 +37,6 @@ import {
3537
ToolbarItem
3638
} from '@patternfly/react-core';
3739
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
38-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
3940
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
4041
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4142
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -188,7 +189,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
188189
gap={{ default: 'gapNone', md: 'gapMd' }}
189190
>
190191
<ToolbarItem>
191-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
192+
<NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
192193
</ToolbarItem>
193194
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
194195
<ToolbarItem>

‎packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import {
3131
Nav,
3232
NavItem,
3333
NavList,
34+
NotificationBadge,
35+
NotificationBadgeVariant,
3436
Page,
3537
PageSection,
3638
PageSidebar,
@@ -50,7 +52,6 @@ import {
5052
import { Link } from '@reach/router';
5153
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
5254
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
53-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
5455
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
5556
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
5657
import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
@@ -385,7 +386,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
385386
gap={{ default: 'gapNone', md: 'gapMd' }}
386387
>
387388
<ToolbarItem>
388-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
389+
<NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
389390
</ToolbarItem>
390391
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
391392
<ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>

‎packages/react-core/src/demos/examples/Nav/NavFlyout.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import {
2323
Nav,
2424
NavItem,
2525
NavList,
26+
NotificationBadge,
27+
NotificationBadgeVariant,
2628
Page,
2729
PageSection,
2830
PageSidebar,
@@ -35,7 +37,6 @@ import {
3537
ToolbarItem
3638
} from '@patternfly/react-core';
3739
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
38-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
3940
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
4041
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
4142
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -134,7 +135,7 @@ export const NavFlyout: React.FunctionComponent = () => {
134135
gap={{ default: 'gapNone', md: 'gapMd' }}
135136
>
136137
<ToolbarItem>
137-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
138+
<NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
138139
</ToolbarItem>
139140
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
140141
<ToolbarItem>

‎packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import {
2323
Nav,
2424
NavItem,
2525
NavList,
26+
NotificationBadge,
27+
NotificationBadgeVariant,
2628
Page,
2729
PageSection,
2830
SkipToContent,
@@ -35,7 +37,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
3537
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
3638
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
3739
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
38-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
3940
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
4041
import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
4142
import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
@@ -112,7 +113,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
112113
gap={{ default: 'gapNone', md: 'gapMd' }}
113114
>
114115
<ToolbarItem>
115-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
116+
<NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
116117
</ToolbarItem>
117118
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
118119
<ToolbarItem>

‎packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import {
2424
Nav,
2525
NavItem,
2626
NavList,
27+
NotificationBadge,
28+
NotificationBadgeVariant,
2729
Page,
2830
PageSection,
2931
PageSectionTypes,
@@ -37,7 +39,6 @@ import {
3739
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
3840
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
3941
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
40-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
4142
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
4243
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
4344
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -161,7 +162,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
161162
gap={{ default: 'gapNone', md: 'gapMd' }}
162163
>
163164
<ToolbarItem>
164-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
165+
<NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
165166
</ToolbarItem>
166167
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
167168
<ToolbarItem>

‎packages/react-core/src/demos/examples/Nav/NavManual.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import {
2424
Nav,
2525
NavItem,
2626
NavList,
27+
NotificationBadge,
28+
NotificationBadgeVariant,
2729
Page,
2830
PageSection,
2931
PageSidebar,
@@ -39,7 +41,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
3941
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4042
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
4143
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
42-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
4344
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
4445
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
4546
import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
@@ -128,7 +129,7 @@ export const NavManual: React.FunctionComponent = () => {
128129
gap={{ default: 'gapNone', md: 'gapMd' }}
129130
>
130131
<ToolbarItem>
131-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
132+
<NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
132133
</ToolbarItem>
133134
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
134135
<ToolbarItem>

‎packages/react-core/src/demos/examples/Page/PageContextSelector.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import {
2626
Nav,
2727
NavItem,
2828
NavList,
29+
NotificationBadge,
30+
NotificationBadgeVariant,
2931
Page,
3032
PageSection,
3133
PageSidebar,
@@ -39,7 +41,6 @@ import {
3941
ToolbarItem
4042
} from '@patternfly/react-core';
4143
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
42-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
4344
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
4445
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4546
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -141,7 +142,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
141142
gap={{ default: 'gapNone', md: 'gapMd' }}
142143
>
143144
<ToolbarItem>
144-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
145+
<NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
145146
</ToolbarItem>
146147
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
147148
<ToolbarItem>

‎packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import {
2727
Nav,
2828
NavItem,
2929
NavList,
30+
NotificationBadge,
31+
NotificationBadgeVariant,
3032
Page,
3133
PageSection,
3234
PageSidebar,
@@ -39,7 +41,6 @@ import {
3941
ToolbarItem
4042
} from '@patternfly/react-core';
4143
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
42-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
4344
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
4445
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4546
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -124,7 +125,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
124125
gap={{ default: 'gapNone', md: 'gapMd' }}
125126
>
126127
<ToolbarItem>
127-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
128+
<NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
128129
</ToolbarItem>
129130
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
130131
<ToolbarItem>

‎packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import {
2727
Nav,
2828
NavItem,
2929
NavList,
30+
NotificationBadge,
31+
NotificationBadgeVariant,
3032
Page,
3133
PageSection,
3234
PageSidebar,
@@ -39,7 +41,6 @@ import {
3941
ToolbarItem
4042
} from '@patternfly/react-core';
4143
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
42-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
4344
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
4445
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4546
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -124,7 +125,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
124125
gap={{ default: 'gapNone', md: 'gapMd' }}
125126
>
126127
<ToolbarItem>
127-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
128+
<NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
128129
</ToolbarItem>
129130
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
130131
<ToolbarItem>

‎packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import {
2727
Nav,
2828
NavItem,
2929
NavList,
30+
NotificationBadge,
31+
NotificationBadgeVariant,
3032
Page,
3133
PageBreadcrumb,
3234
PageGroup,
@@ -41,7 +43,6 @@ import {
4143
ToolbarItem
4244
} from '@patternfly/react-core';
4345
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
44-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
4546
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
4647
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4748
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -116,7 +117,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
116117
gap={{ default: 'gapNone', md: 'gapMd' }}
117118
>
118119
<ToolbarItem>
119-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
120+
<NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
120121
</ToolbarItem>
121122
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
122123
<ToolbarItem>

‎packages/react-table/src/demos/DashboardHeader.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import {
1616
MastheadLogo,
1717
MastheadContent,
1818
MenuToggle,
19+
NotificationBadge,
20+
NotificationBadgeVariant,
1921
Toolbar,
2022
ToolbarContent,
2123
ToolbarGroup,
@@ -26,7 +28,6 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
2628
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
2729
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
2830
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
29-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
3031
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
3132
import imgAvatar from '@patternfly/react-table/src/demos/assets/avatarImg.svg';
3233
import pfLogo from '@patternfly/react-table/src/demos/assets/pf-logo.svg';
@@ -108,10 +109,9 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
108109
>
109110
{notificationBadge ?? (
110111
<ToolbarItem>
111-
<Button
112+
<NotificationBadge
112113
aria-label="Notifications"
113-
variant={ButtonVariant.plain}
114-
icon={<BellIcon />}
114+
variant={NotificationBadgeVariant.read}
115115
onClick={() => {}}
116116
/>
117117
</ToolbarItem>

0 commit comments

Comments
 (0)