@patternfly/react-core 6.6.0-prerelease.4 → 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.3","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.3","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.3","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.4",
+  "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": "6368162665d1e072189b884133b00e18624046f2"
+  "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>
+  </>
+);

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -16,7 +16,7 @@ propComponents:
 ---
 
 import { Fragment, useEffect, useMemo, useState } from 'react';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';

package/src/components/DualListSelector/examples/DualListSelectorBasic.tsx

@@ -7,7 +7,7 @@ import {
   DualListSelectorControlsWrapper,
   DualListSelectorControl
 } from '@patternfly/react-core';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -117,7 +117,7 @@ export const DualListSelectorBasic: React.FunctionComponent = () => {
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
-          icon={<AngleDoubleLeftIcon />}
+          icon={<RhMicronsDoubleCaretLeftIcon />}
         />
         <DualListSelectorControl
           onClick={() => moveSelected(false)}

package/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx

@@ -14,7 +14,7 @@ import {
   EmptyStateBody,
   EmptyStateActions
 } from '@patternfly/react-core';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -165,7 +165,7 @@ export const DualListSelectorSearch: React.FunctionComponent = () => {
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
-          icon={<AngleDoubleLeftIcon />}
+          icon={<RhMicronsDoubleCaretLeftIcon />}
         />
         <DualListSelectorControl
           onClick={() => moveSelected(false)}

package/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx

@@ -7,7 +7,7 @@ import {
   DualListSelectorControlsWrapper,
   DualListSelectorControl
 } from '@patternfly/react-core';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -123,7 +123,7 @@ export const DualListSelectorBasic: React.FunctionComponent = () => {
           aria-label="Remove all"
           tooltipContent="Remove all"
           tooltipProps={{ position: 'left', 'aria-live': 'off' }}
-          icon={<AngleDoubleLeftIcon />}
+          icon={<RhMicronsDoubleCaretLeftIcon />}
         />
         <DualListSelectorControl
           onClick={() => moveSelected(false)}

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -21,7 +21,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -283,7 +283,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             isDisabled={chosenOptions.length === 0 || isDisabled}
             onClick={() => moveAll(false)}
             aria-label="Remove all"
-            icon={<AngleDoubleLeftIcon />}
+            icon={<RhMicronsDoubleCaretLeftIcon />}
           />
           <DualListSelectorControl
             onClick={() => moveSelected(false)}

package/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -15,7 +15,7 @@ import {
   EmptyStateBody,
   EmptyStateActions
 } from '@patternfly/react-core';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -302,7 +302,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
           isDisabled={chosenLeafIds.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
-          icon={<AngleDoubleLeftIcon />}
+          icon={<RhMicronsDoubleCaretLeftIcon />}
         />
         <DualListSelectorControl
           onClick={() => moveChecked(false)}

package/src/components/Pagination/PaginationNavigation.tsx

@@ -2,7 +2,7 @@ import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 import { css } from '@patternfly/react-styles';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import { Button, ButtonVariant } from '../Button';
@@ -195,7 +195,7 @@ class PaginationNavigation extends Component<PaginationNavigationProps, Paginati
                 this.handleNewPage(event, 1);
                 this.setState({ userInputPage: 1 });
               }}
-              icon={<AngleDoubleLeftIcon />}
+              icon={<RhMicronsDoubleCaretLeftIcon />}
             />
           </div>
         )}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationNavigation.test.tsx.snap

@@ -33,24 +33,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
+            viewBox="0 0 20 20"
             width="1em"
           >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 448 512"
-            >
-              <path
-                d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="M15.707 28.293a.999.999 0 1 1-1.414 1.414L1.646 17.061a1.501 1.501 0 0 1 0-2.121L14.293 2.293a.999.999 0 1 1 1.414 1.414L3.414 16l12.293 12.293ZM17.414 16 29.707 3.707a.999.999 0 1 0-1.414-1.414L15.647 14.939a1.501 1.501 0 0 0 0 2.121l12.646 12.646a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L17.414 15.999Z"
-              />
-            </svg>
+            <path
+              d="M10 19a.997.997 0 0 1-.707-.293l-7.647-7.646c-.283-.284-.439-.66-.439-1.061s.156-.777.44-1.06l7.646-7.647a1 1 0 1 1 1.414 1.414L3.414 10l7.293 7.293A1 1 0 0 1 10 19Zm8.707-.293a1 1 0 0 0 0-1.414L11.414 10l7.293-7.293a1 1 0 1 0-1.414-1.414L9.646 8.939c-.283.284-.439.66-.439 1.061s.156.777.44 1.06l7.646 7.647a.997.997 0 0 0 1.414 0Z"
+            />
           </svg>
         </span>
       </button>