@patternfly/react-core 6.5.0-prerelease.9 → 6.5.0

package/src/components/Pagination/examples/Pagination.md

@@ -6,18 +6,20 @@ propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggl
 ouia: true
 ---
 
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef, useLayoutEffect } from 'react';
 
 ## Examples
 
 ### Top
 
 ```ts file="./PaginationTop.tsx"
+
 ```
 
 ### Bottom
 
 ```ts file="./PaginationBottom.tsx"
+
 ```
 
 ### Indeterminate
@@ -25,39 +27,63 @@ import { Fragment, useState } from 'react';
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
 
 ```ts file="./PaginationIndeterminate.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./PaginationDisabled.tsx"
+
 ```
 
 ### No items
 
 ```ts file="./PaginationNoItems.tsx"
+
 ```
 
 ### One page
 
 ```ts file="./PaginationOnePage.tsx"
+
 ```
 
 ### Compact
 
 ```ts file="./PaginationCompact.tsx"
+
 ```
 
 ### Offset
 
 ```ts file="./PaginationOffset.tsx"
+
 ```
 
 ### Sticky
 
 ```ts isFullscreen file="./PaginationSticky.tsx"
+
+```
+
+### Dynamic sticky top
+
+Pagination can be made sticky via two properties: `isStickyBase`, which allows separate control of the sticky position, and `isStickyStuck`, which applies the sticky styling. In this example, `isStickyStuck` is only applied when the pagination is not at the top of the scroll parent container.
+
+```ts isFullscreen file="./PaginationDynamicStickyTop.tsx"
+
+```
+
+### Dynamic sticky bottom
+
+Bottom pagination can be made sticky via two properties: `isStickyBase`, which allows separate control of the sticky position, and `isStickyStuck`, which applies the sticky styling. In this example, `isStickyStuck` is only applied when the pagination is not at the bottom of the scroll parent container.
+
+```ts isFullscreen file="./PaginationDynamicStickyBottom.tsx"
+
 ```
 
 ### Inset
 
 ```ts file="./PaginationInset.tsx"
+
 ```

package/src/components/Pagination/examples/PaginationDynamicStickyBottom.tsx

@@ -0,0 +1,86 @@
+import { useLayoutEffect, useState, useRef } from 'react';
+import { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  /** Indicates whether to track the scroll top position of the scroll parent element */
+  shouldTrack: boolean;
+  /** Reference to the scroll parent element */
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop + scrollElement.clientHeight < scrollElement.scrollHeight);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
+
+export const PaginationDynamicStickyBottom: React.FunctionComponent = () => {
+  const scrollParentRef = useRef<HTMLDivElement>(null);
+  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(50);
+  const itemCount = 523;
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  const buildCards = () => {
+    const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;
+
+    return Array.from({ length: numberOfCards }).map((_value, index) => (
+      <GalleryItem key={index}>
+        <Card>
+          <CardBody>This is card {(page - 1) * perPage + index + 1}</CardBody>
+        </Card>
+      </GalleryItem>
+    ));
+  };
+
+  return (
+    <div ref={scrollParentRef} style={{ overflowY: 'scroll', height: '400px' }}>
+      <Gallery hasGutter>{buildCards()}</Gallery>
+      <Pagination
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        onSetPage={onSetPage}
+        widgetId="dynamic-sticky-bottom-example"
+        onPerPageSelect={onPerPageSelect}
+        variant={PaginationVariant.bottom}
+        isStickyBase
+        isStickyStuck={isStickyStuck}
+      />
+    </div>
+  );
+};

package/src/components/Pagination/examples/PaginationDynamicStickyTop.tsx

@@ -0,0 +1,85 @@
+import { useLayoutEffect, useState, useRef } from 'react';
+import { Pagination, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  /** Indicates whether to track the scroll top position of the scroll parent element */
+  shouldTrack: boolean;
+  /** Reference to the scroll parent element */
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > 0);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
+
+export const PaginationDynamicStickyTop: React.FunctionComponent = () => {
+  const scrollParentRef = useRef<HTMLDivElement>(null);
+  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(50);
+  const itemCount = 523;
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  const buildCards = () => {
+    const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;
+
+    return Array.from({ length: numberOfCards }).map((_value, index) => (
+      <GalleryItem key={index}>
+        <Card>
+          <CardBody>This is card {(page - 1) * perPage + index + 1}</CardBody>
+        </Card>
+      </GalleryItem>
+    ));
+  };
+
+  return (
+    <div ref={scrollParentRef} style={{ overflowY: 'scroll', height: '400px' }}>
+      <Pagination
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        onSetPage={onSetPage}
+        widgetId="dynamic-sticky-top-example"
+        onPerPageSelect={onPerPageSelect}
+        isStickyBase
+        isStickyStuck={isStickyStuck}
+      />
+      <Gallery hasGutter>{buildCards()}</Gallery>
+    </div>
+  );
+};

package/src/components/Panel/Panel.tsx

@@ -12,6 +12,16 @@ export interface PanelProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'raised' | 'bordered' | 'secondary';
   /** Flag to add scrollable styling to the panel */
   isScrollable?: boolean;
+  /** @beta When used with a scrollable panel, sets the panel to auto height */
+  isAutoHeight?: boolean;
+  /** @beta Flag to remove the panel's border */
+  hasNoBorder?: boolean;
+  /** @beta Flag to make the panel fill the available height of its container */
+  isFullHeight?: boolean;
+  /** @beta Modifies the panel to use glass styling when the glass theme is enabled */
+  isGlass?: boolean;
+  /** @beta Uses pill (fully rounded) border radius for the panel */
+  isPill?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
 }
@@ -21,6 +31,11 @@ const PanelBase: React.FunctionComponent<PanelProps> = ({
   children,
   variant,
   isScrollable,
+  isAutoHeight,
+  hasNoBorder,
+  isFullHeight,
+  isGlass,
+  isPill,
   innerRef,
   ...props
 }: PanelProps) => (
@@ -29,6 +44,11 @@ const PanelBase: React.FunctionComponent<PanelProps> = ({
       styles.panel,
       variant && styles.modifiers[variant],
       isScrollable && styles.modifiers.scrollable,
+      isAutoHeight && styles.modifiers.scrollableAutoHeight,
+      hasNoBorder && styles.modifiers.noBorder,
+      isFullHeight && styles.modifiers.fullHeight,
+      isGlass && styles.modifiers.glass,
+      isPill && styles.modifiers.pill,
       className
     )}
     ref={innerRef}

package/src/components/Panel/__tests__/Panel.test.tsx

@@ -1,4 +1,5 @@
 import { createRef, useEffect, useState } from 'react';
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { Panel } from '../Panel';
 import { PanelMain } from '../PanelMain';
@@ -55,6 +56,71 @@ test(`Renders with class name ${styles.modifiers.scrollable} when isScrollable i
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);
 });
 
+test(`Renders with class name ${styles.modifiers.scrollableAutoHeight} when isAutoHeight is true`, () => {
+  render(<Panel isAutoHeight>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollableAutoHeight);
+});
+
+test(`Does not add ${styles.modifiers.scrollableAutoHeight} when isAutoHeight is false or undefined`, () => {
+  const { rerender } = render(<Panel isAutoHeight={false}>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.scrollableAutoHeight);
+
+  rerender(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.scrollableAutoHeight);
+});
+
+test(`Renders with class name ${styles.modifiers.noBorder} when hasNoBorder is true`, () => {
+  render(<Panel hasNoBorder>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noBorder);
+});
+
+test(`Does not add ${styles.modifiers.noBorder} when hasNoBorder is false or undefined`, () => {
+  const { rerender } = render(<Panel hasNoBorder={false}>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noBorder);
+
+  rerender(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noBorder);
+});
+
+test(`Renders with class name ${styles.modifiers.fullHeight} when isFullHeight is true`, () => {
+  render(<Panel isFullHeight>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fullHeight);
+});
+
+test(`Does not add ${styles.modifiers.fullHeight} when isFullHeight is false or undefined`, () => {
+  const { rerender } = render(<Panel isFullHeight={false}>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.fullHeight);
+
+  rerender(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.fullHeight);
+});
+
+test(`Renders with class name ${styles.modifiers.glass} when isGlass is true`, () => {
+  render(<Panel isGlass>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.glass);
+});
+
+test(`Does not add ${styles.modifiers.glass} when isGlass is false or undefined`, () => {
+  const { rerender } = render(<Panel isGlass={false}>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.glass);
+
+  rerender(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.glass);
+});
+
+test(`Renders with class name ${styles.modifiers.pill} when isPill is true`, () => {
+  render(<Panel isPill>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill);
+});
+
+test(`Does not add ${styles.modifiers.pill} when isPill is false or undefined`, () => {
+  const { rerender } = render(<Panel isPill={false}>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pill);
+
+  rerender(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pill);
+});
+
 test('Renders with ref', async () => {
   const user = userEvent.setup();
   const panelRef: React.RefObject<HTMLDivElement | null> = createRef();
@@ -103,3 +169,58 @@ test('Matches the snapshot', () => {
   const { asFragment } = render(<Panel>Test</Panel>);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Matches the snapshot with hasNoBorder', () => {
+  const { asFragment } = render(
+    <Panel hasNoBorder>
+      <PanelMain>
+        <PanelMainBody>Test</PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with isFullHeight', () => {
+  const { asFragment } = render(
+    <Panel isFullHeight>
+      <PanelMain>
+        <PanelMainBody>Test</PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with isGlass', () => {
+  const { asFragment } = render(
+    <Panel isGlass>
+      <PanelMain>
+        <PanelMainBody>Test</PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with isAutoHeight', () => {
+  const { asFragment } = render(
+    <Panel isScrollable isAutoHeight>
+      <PanelMain>
+        <PanelMainBody>Test</PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with isPill', () => {
+  const { asFragment } = render(
+    <Panel isPill>
+      <PanelMain>
+        <PanelMainBody>Test</PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Panel/__tests__/__snapshots__/Panel.test.tsx.snap

@@ -9,3 +9,93 @@ exports[`Matches the snapshot 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Matches the snapshot with hasNoBorder 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-panel pf-m-no-border"
+  >
+    <div
+      class="pf-v6-c-panel__main"
+    >
+      <div
+        class="pf-v6-c-panel__main-body"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with isFullHeight 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-panel pf-m-full-height"
+  >
+    <div
+      class="pf-v6-c-panel__main"
+    >
+      <div
+        class="pf-v6-c-panel__main-body"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with isGlass 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-panel pf-m-glass"
+  >
+    <div
+      class="pf-v6-c-panel__main"
+    >
+      <div
+        class="pf-v6-c-panel__main-body"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with isAutoHeight 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-panel pf-m-scrollable pf-m-scrollable-auto-height"
+  >
+    <div
+      class="pf-v6-c-panel__main"
+    >
+      <div
+        class="pf-v6-c-panel__main-body"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with isPill 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-panel pf-m-pill"
+  >
+    <div
+      class="pf-v6-c-panel__main"
+    >
+      <div
+        class="pf-v6-c-panel__main-body"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Panel/examples/Panel.md

@@ -46,13 +46,22 @@ propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 
 ```ts file="PanelSecondaryVariant.tsx"
 ```
-
 ### Scrollable
 
 ```ts file="PanelScrollable.tsx"
 ```
 
+### Scrollable with auto height
+
+```ts file="PanelScrollableWithAutoHeight.tsx"
+```
+
 ### Scrollable with header and footer
 
 ```ts file="PanelScrollableHeaderFooter.tsx"
 ```
+
+### Pill
+
+```ts file="PanelPill.tsx"
+```

package/src/components/Panel/examples/PanelPill.tsx

@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelPill: React.FunctionComponent = () => (
+  <Panel isPill>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);

package/src/components/Panel/examples/PanelScrollableWithAutoHeight.tsx

@@ -0,0 +1,37 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelScrollableWithAutoHeight: React.FunctionComponent = () => (
+  <div style={{ height: '200px' }}>
+    <Panel isScrollable isAutoHeight>
+      <PanelMain tabIndex={0}>
+        <PanelMainBody>
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
+  </div>
+);

package/src/components/Popover/Popover.tsx

@@ -13,7 +13,7 @@ import popoverMaxWidth from '@patternfly/react-tokens/dist/esm/c_popover_MaxWidt
 import popoverMinWidth from '@patternfly/react-tokens/dist/esm/c_popover_MinWidth';
 import { FocusTrap } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
-import { getUniqueId } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 
 export enum PopoverPosition {
   auto = 'auto',
@@ -276,7 +276,8 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
 }: PopoverProps) => {
   // could make this a prop in the future (true | false | 'toggle')
   // const hideOnClick = true;
-  const uniqueId = id || getUniqueId();
+  const generatedId = useSSRSafeId();
+  const uniqueId = id || generatedId;
   const triggerManually = isVisible !== null;
   const [visible, setVisible] = useState(false);
   const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap));

package/src/components/Popover/PopoverCloseButton.tsx

@@ -1,7 +1,7 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { Button } from '../Button';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const PopoverCloseButton: React.FunctionComponent<PopoverCloseButtonProps> = ({
   onClose = () => undefined as void,
@@ -14,7 +14,7 @@ export const PopoverCloseButton: React.FunctionComponent<PopoverCloseButtonProps
       aria-label
       {...props}
       style={{ pointerEvents: 'auto' }}
-      icon={<TimesIcon />}
+      icon={<RhMicronsCloseIcon />}
     />
   </div>
 );

package/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
     <button
       aria-label="string"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-1"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       style="pointer-events: auto;"
@@ -23,11 +23,11 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 352 512"
+          viewBox="0 0 20 20"
           width="1em"
         >
           <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
           />
         </svg>
       </span>

package/src/components/Popover/examples/Popover.md

@@ -6,11 +6,11 @@ propComponents: ['Popover']
 ---
 
 import { useRef, useState } from 'react';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 ## Examples