diff --git a/packages/react-core/src/components/Banner/Banner.tsx b/packages/react-core/src/components/Banner/Banner.tsx index 3acce9ab700..79d042bb3e0 100644 --- a/packages/react-core/src/components/Banner/Banner.tsx +++ b/packages/react-core/src/components/Banner/Banner.tsx @@ -12,6 +12,8 @@ export interface BannerProps extends React.HTMLProps { className?: string; /** If set to true, the banner sticks to the top of its container */ isSticky?: boolean; + /** If set to true, the banner will have a pill shape */ + isPill?: boolean; /** Text announced by screen readers to indicate the type of banner. This prop should only * be passed in when the banner conveys status/severity. */ @@ -36,6 +38,7 @@ export const Banner: React.FunctionComponent = ( className, screenReaderText, isSticky = false, + isPill = false, color, status, ...props @@ -52,7 +55,13 @@ export const Banner: React.FunctionComponent = ( return (
{screenReaderText && {screenReaderText}} diff --git a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx index 83a5ee4b41f..d0741b1ab09 100644 --- a/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx +++ b/packages/react-core/src/components/Banner/__tests__/Banner.test.tsx @@ -121,6 +121,21 @@ test('Renders with inherited element props spread to the component', () => { expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); }); +test(`Renders with class name ${styles.modifiers.pill} when isPill prop is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill); +}); + +test(`Does not render with class name ${styles.modifiers.pill} when isPill is false`, () => { + render(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pill); +}); + +test(`Does not render with class name ${styles.modifiers.pill} when isPill is undefined`, () => { + render(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pill); +}); + test('Matches the snapshot', () => { const { asFragment } = render(Test); expect(asFragment()).toMatchSnapshot(); diff --git a/packages/react-core/src/components/Banner/examples/Banner.md b/packages/react-core/src/components/Banner/examples/Banner.md index b681cfdfa3f..2de48c1a11a 100644 --- a/packages/react-core/src/components/Banner/examples/Banner.md +++ b/packages/react-core/src/components/Banner/examples/Banner.md @@ -32,3 +32,11 @@ In the following example, a flex layout is used inside the banner content to sho ```ts file="./BannerStatus.tsx" ``` + +### Pill + +Banners may also have a rounded pill style by passing the `isPill` prop. + +```ts file="./BannerPill.tsx" + +``` diff --git a/packages/react-core/src/components/Banner/examples/BannerPill.tsx b/packages/react-core/src/components/Banner/examples/BannerPill.tsx new file mode 100644 index 00000000000..e6b6e96dbaf --- /dev/null +++ b/packages/react-core/src/components/Banner/examples/BannerPill.tsx @@ -0,0 +1,21 @@ +import { Banner, Flex, FlexItem } from '@patternfly/react-core'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; + +export const BannerPill: React.FunctionComponent = () => ( + <> + Default pill banner +
+ + Red pill banner + +
+ + + + + + Success pill banner + + + +);