@patternfly/react-core 6.6.0-prerelease.5 → 6.6.0-prerelease.6

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.0-prerelease.5","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.0-prerelease.5","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.0-prerelease.5","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.0-prerelease.5",
+  "version": "6.6.0-prerelease.6",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "8b528bb83a30506a9b0f19398811c4a586f13e00"
+  "gitHead": "04d4b22048d55a10d2b87bb3fabad41da6887d9e"
 }

package/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>}

package/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();

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

package/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>
+  </>
+);