feat(Banner): add pill variant (#12440)

Author: kmcfaul

packages/react-core/src/components/Banner/Banner.tsx

@@ -12,6 +12,8 @@ export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
   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<StatusBanner | NonStatusBanner> = (
   className,
   screenReaderText,
   isSticky = false,
+  isPill = false,
   color,
   status,
   ...props
@@ -52,7 +55,13 @@ export const Banner: React.FunctionComponent<StatusBanner | NonStatusBanner> = (
 
   return (
     <div
-      className={css(styles.banner, getStatusOrColorModifier(), isSticky && styles.modifiers.sticky, className)}
+      className={css(
+        styles.banner,
+        getStatusOrColorModifier(),
+        isSticky && styles.modifiers.sticky,
+        isPill && styles.modifiers.pill,
+        className
+      )}
       {...props}
     >
       {screenReaderText && <span className="pf-v6-screen-reader">{screenReaderText}</span>}

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(<Banner isPill>Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill);
+});
+
+test(`Does not render with class name ${styles.modifiers.pill} when isPill is false`, () => {
+  render(<Banner isPill={false}>Test</Banner>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pill);
+});
+
+test(`Does not render with class name ${styles.modifiers.pill} when isPill is undefined`, () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pill);
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Banner>Test</Banner>);
   expect(asFragment()).toMatchSnapshot();

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"
+
+```

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 = () => (
+  <>
+    <Banner isPill>Default pill banner</Banner>
+    <br />
+    <Banner color="red" isPill>
+      Red pill banner
+    </Banner>
+    <br />
+    <Banner isPill screenReaderText="Success pill banner" status="success">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <RhUiCheckCircleFillIcon />
+        </FlexItem>
+        <FlexItem>Success pill banner</FlexItem>
+      </Flex>
+    </Banner>
+  </>
+);