diff --git a/packages/react-core/src/components/Badge/Badge.tsx b/packages/react-core/src/components/Badge/Badge.tsx index 7b54629a64a..dd341b6e693 100644 --- a/packages/react-core/src/components/Badge/Badge.tsx +++ b/packages/react-core/src/components/Badge/Badge.tsx @@ -7,6 +7,8 @@ export interface BadgeProps extends React.HTMLProps { screenReaderText?: string; /** Adds styling to the badge to indicate it has been read */ isRead?: boolean; + /** Adds styling to the badge to indicate it is disabled */ + isDisabled?: boolean; /** content rendered inside the Badge */ children?: React.ReactNode; /** additional classes added to the Badge */ @@ -15,6 +17,7 @@ export interface BadgeProps extends React.HTMLProps { export const Badge: React.FunctionComponent = ({ isRead = false, + isDisabled = false, className = '', children = '', screenReaderText, @@ -22,7 +25,12 @@ export const Badge: React.FunctionComponent = ({ }: BadgeProps) => ( {children} {screenReaderText && {screenReaderText}} diff --git a/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx b/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx index c8e41f64285..eda05188aa5 100644 --- a/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx +++ b/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx @@ -32,6 +32,11 @@ test('Renders with class name pf-m-read when isRead prop is true', () => { expect(screen.getByText('Test')).toHaveClass('pf-m-read'); }); +test(`Renders with class name ${styles.modifiers.disabled} when isDisabled prop is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.disabled); +}); + test('Does not render pf-v6-screen-reader class by default', () => { render(Test); expect(screen.getByText('Test')).not.toContainHTML(''); diff --git a/packages/react-core/src/components/Badge/examples/Badge.md b/packages/react-core/src/components/Badge/examples/Badge.md index 86903cb8997..d397ab02e4c 100644 --- a/packages/react-core/src/components/Badge/examples/Badge.md +++ b/packages/react-core/src/components/Badge/examples/Badge.md @@ -18,3 +18,8 @@ import './Badge.css'; ```ts file="./BadgeUnread.tsx" ``` + +## Disabled + +```ts file="./BadgeDisabled.tsx" +``` diff --git a/packages/react-core/src/components/Badge/examples/BadgeDisabled.tsx b/packages/react-core/src/components/Badge/examples/BadgeDisabled.tsx new file mode 100644 index 00000000000..c7d4bdad2f9 --- /dev/null +++ b/packages/react-core/src/components/Badge/examples/BadgeDisabled.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Badge } from '@patternfly/react-core'; + +export const BadgeRead: React.FunctionComponent = () => ( + + + 7 + + + 24 + + + 240 + + + 999+ + + +);