@patternfly/react-core 6.6.0-prerelease.9 → 6.6.1-prerelease.0

package/src/deprecated/components/DualListSelector/examples/DualListSelectorComposable.tsx

@@ -18,11 +18,11 @@ import {
   DualListSelectorControl as DLSControlDeprecated
 } from '@patternfly/react-core/deprecated';
 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';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import RhMicronsSortDownSmallToLargeIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-small-to-large-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 interface Option {
   text: string;
@@ -143,7 +143,12 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
   };
 
   const buildEmptyState = (isAvailable: boolean) => (
-    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
+    <EmptyState
+      headingLevel="h4"
+      titleText="No results found"
+      icon={RhMicronsSearchIcon}
+      variant={EmptyStateVariant.sm}
+    >
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -193,7 +198,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
           aria-label="Add selected"
           tooltipContent="Add selected"
         >
-          <AngleRightIcon />
+          <RhMicronsCaretRightIcon />
         </DLSControlDeprecated>
         <DLSControlDeprecated
           isDisabled={availableOptions.length === 0}
@@ -201,7 +206,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
           aria-label="Add all"
           tooltipContent="Add all"
         >
-          <AngleDoubleRightIcon />
+          <RhMicronsDoubleCaretRightIcon />
         </DLSControlDeprecated>
         <DLSControlDeprecated
           isDisabled={chosenOptions.length === 0}
@@ -217,7 +222,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
           aria-label="Remove selected"
           tooltipContent="Remove selected"
         >
-          <AngleLeftIcon />
+          <RhMicronsCaretLeftIcon />
         </DLSControlDeprecated>
       </DLSControlsWrapperDeprecated>
       <DLSPaneDeprecated

package/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx

@@ -12,9 +12,9 @@ import {
   DualListSelectorControl as DLSControlDeprecated
 } from '@patternfly/react-core/deprecated';
 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';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 
 export const DualListSelectorComposableDragDrop: React.FunctionComponent = () => {
   const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = useState(false);
@@ -121,14 +121,14 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
         >
-          <AngleRightIcon />
+          <RhMicronsCaretRightIcon />
         </DLSControlDeprecated>
         <DLSControlDeprecated
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
         >
-          <AngleDoubleRightIcon />
+          <RhMicronsDoubleCaretRightIcon />
         </DLSControlDeprecated>
         <DLSControlDeprecated
           isDisabled={chosenOptions.length === 0}
@@ -142,7 +142,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
         >
-          <AngleLeftIcon />
+          <RhMicronsCaretLeftIcon />
         </DLSControlDeprecated>
       </DLSControlsWrapperDeprecated>
       <DragDrop

package/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

@@ -18,10 +18,10 @@ import {
   DualListSelectorTreeItemData as DLSTreeItemDataDeprecated
 } from '@patternfly/react-core/deprecated';
 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';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 
 interface FoodNode {
   id: string;
@@ -258,7 +258,12 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         listMinHeight="300px"
       >
         {filterApplied && options.length === 0 && (
-          <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
+          <EmptyState
+            headingLevel="h4"
+            titleText="No results found"
+            icon={RhMicronsSearchIcon}
+            variant={EmptyStateVariant.sm}
+          >
             <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
             <EmptyStateFooter>
               <EmptyStateActions>
@@ -290,14 +295,14 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
           onClick={() => moveChecked(true)}
           aria-label="Add selected"
         >
-          <AngleRightIcon />
+          <RhMicronsCaretRightIcon />
         </DLSControlDeprecated>
         <DLSControlDeprecated
           isDisabled={chosenLeafIds.length === memoizedAllLeaves.length}
           onClick={() => moveAll(true)}
           aria-label="Add all"
         >
-          <AngleDoubleRightIcon />
+          <RhMicronsDoubleCaretRightIcon />
         </DLSControlDeprecated>
         <DLSControlDeprecated
           isDisabled={chosenLeafIds.length === 0}
@@ -311,7 +316,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
           isDisabled={!checkedLeafIds.filter((x) => !!chosenLeafIds.includes(x)).length}
           aria-label="Remove selected"
         >
-          <AngleLeftIcon />
+          <RhMicronsCaretLeftIcon />
         </DLSControlDeprecated>
       </DLSControlsWrapperDeprecated>
       {buildPane(true)}

package/src/deprecated/components/Modal/examples/Modal.md

@@ -10,10 +10,9 @@ deprecated: true
 import { Fragment, useRef, useState } from 'react';
 
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
-import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
-import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhUiWarningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-icon';
 import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 

package/src/deprecated/components/Modal/examples/ModalCustomHeaderFooter.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useState } from 'react';
 import { Button, Title, TitleSizes } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
-import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+import RhUiWarningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-icon';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
@@ -22,7 +22,7 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
 
   const footer = (
     <Title headingLevel="h4" size={TitleSizes.md}>
-      <WarningTriangleIcon />
+      <RhUiWarningIcon />
       <span className={spacing.plSm}>Custom modal footer.</span>
     </Title>
   );

package/src/deprecated/components/Modal/examples/ModalWithHelp.tsx

@@ -2,7 +2,7 @@ import { Fragment, useState } from 'react';
 import { Button, Popover } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 
 export const ModalWithHelp: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -29,7 +29,7 @@ export const ModalWithHelp: React.FunctionComponent = () => {
             }
             footerContent="Popover Footer"
           >
-            <Button variant="plain" aria-label="Help" icon={<HelpIcon />} />
+            <Button variant="plain" aria-label="Help" icon={<RhUiQuestionMarkCircleIcon />} />
           </Popover>
         }
         isOpen={isModalOpen}

package/src/deprecated/components/Tile/__tests__/Tile.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import { Tile } from '../Tile';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
 
 describe('Tile', () => {
   test('basic', () => {
@@ -24,17 +24,17 @@ describe('Tile', () => {
   });
 
   test('renders with icon', () => {
-    const { asFragment } = render(<Tile title="test" icon={<PlusIcon />} />);
+    const { asFragment } = render(<Tile title="test" icon={<RhUiAddIcon />} />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with stacked icon', () => {
-    const { asFragment } = render(<Tile title="test" icon={<PlusIcon />} isStacked />);
+    const { asFragment } = render(<Tile title="test" icon={<RhUiAddIcon />} isStacked />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with stacked large icon', () => {
-    const { asFragment } = render(<Tile title="test" icon={<PlusIcon />} isStacked isDisplayLarge />);
+    const { asFragment } = render(<Tile title="test" icon={<RhUiAddIcon />} isStacked isDisplayLarge />);
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/deprecated/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap

@@ -81,24 +81,12 @@ exports[`Tile renders with icon 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
+          viewBox="0 0 32 32"
           width="1em"
         >
-          <svg
-            class="pf-v6-icon-default"
-            viewBox="0 0 448 512"
-          >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-          <svg
-            class="pf-v6-icon-rh-ui"
-            viewBox="0 0 32 32"
-          >
-            <path
-              d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
-            />
-          </svg>
+          <path
+            d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
+          />
         </svg>
       </div>
       <div
@@ -130,24 +118,12 @@ exports[`Tile renders with stacked icon 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
+          viewBox="0 0 32 32"
           width="1em"
         >
-          <svg
-            class="pf-v6-icon-default"
-            viewBox="0 0 448 512"
-          >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-          <svg
-            class="pf-v6-icon-rh-ui"
-            viewBox="0 0 32 32"
-          >
-            <path
-              d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
-            />
-          </svg>
+          <path
+            d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
+          />
         </svg>
       </div>
       <div
@@ -179,24 +155,12 @@ exports[`Tile renders with stacked large icon 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
+          viewBox="0 0 32 32"
           width="1em"
         >
-          <svg
-            class="pf-v6-icon-default"
-            viewBox="0 0 448 512"
-          >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-          <svg
-            class="pf-v6-icon-rh-ui"
-            viewBox="0 0 32 32"
-          >
-            <path
-              d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
-            />
-          </svg>
+          <path
+            d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
+          />
         </svg>
       </div>
       <div

package/src/deprecated/components/Tile/examples/Tile.md

@@ -7,7 +7,7 @@ deprecated: true
 ---
 
 import { useState } from 'react';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import './Tile.css';
 

package/src/deprecated/components/Tile/examples/TileWithIcon.tsx

@@ -1,15 +1,15 @@
 import { Tile } from '@patternfly/react-core/deprecated';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
 
 export const TileWithIcon: React.FunctionComponent = () => (
   <div role="listbox" aria-label="Tiles with icon">
-    <Tile title="Default" icon={<PlusIcon />} isSelected={false}>
+    <Tile title="Default" icon={<RhUiAddIcon />} isSelected={false}>
       Subtext goes here
     </Tile>{' '}
-    <Tile title="Selected" icon={<PlusIcon />} isSelected>
+    <Tile title="Selected" icon={<RhUiAddIcon />} isSelected>
       Subtext goes here
     </Tile>{' '}
-    <Tile title="Disabled" icon={<PlusIcon />} isDisabled isSelected={false}>
+    <Tile title="Disabled" icon={<RhUiAddIcon />} isDisabled isSelected={false}>
       Subtext goes here
     </Tile>
   </div>

package/src/deprecated/components/Wizard/examples/Wizard.md

@@ -15,7 +15,9 @@ DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection,
 import { Wizard as WizardDeprecated, WizardFooter as WizardFooterDeprecated, WizardContextConsumer as WizardContextConsumerDeprecated } from '@patternfly/react-core/deprecated';
 import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
+import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 If you seek a wizard solution that allows for more composition, see the [React](/components/wizard) tab.
 

package/src/helpers/OUIA/OUIA.md

@@ -54,9 +54,14 @@ component.
 * [Card](/components/card)
 * [Checkbox](/components/forms/checkbox)
 * [Chip](/components/chip)
+* [ClipboardCopy](/components/clipboard-copy)
 * [Content](/components/content)
+* [DescriptionList](/components/description-list)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
+* [ExpandableSection](/components/expandable-section)
+* [Form](/components/forms/form)
+* [FormGroup](/components/forms/form)
 * [FormSelect](/components/forms/form-select)
 * [Menu](/components/menus/menu)
 * [Modal](/components/modal)

package/src/helpers/inert.ts

@@ -0,0 +1,7 @@
+import { version } from 'react';
+
+/**
+ * Before React 19, React JSX treats empty string "" as truthy for inert prop.
+ * @see {@link https://stackoverflow.com/questions/72720469}
+ */
+export const IS_INERT = Number(version.split('.')[0]) >= 19 ? true : ('' as unknown as boolean);