diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md b/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md
index c867f452e13..b6dc41f8c56 100644
--- a/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md
+++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md
@@ -20,7 +20,7 @@ import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescriptio
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
-import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
@@ -29,66 +29,79 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
### Basic
```ts file='./DescriptionListBasic.tsx'
+
```
### Term help text
```ts file='./DescriptionListWithTermHelpText.tsx'
+
```
### Default 2 col
```ts file='./DescriptionListDefaultTwoCol.tsx'
+
```
### Default 3 col on lg
```ts file='./DescriptionListDefaultThreeColLg.tsx'
+
```
### Horizontal
```ts file='./DescriptionListHorizontal.tsx'
+
```
### Horizontal using custom term width modifier
```ts file='./DescriptionListHorizontalCustomTermWidth.tsx'
+
```
### Horizontal 2 col
```ts file='./DescriptionListHorizontalTwoCol.tsx'
+
```
### Horizontal 3 col on lg
```ts file='./DescriptionListHorizontalThreeColLg.tsx'
+
```
### Compact
```ts file='./DescriptionListCompact.tsx'
+
```
### Compact horizontal
```ts file='./DescriptionListCompactHorizontal.tsx'
+
```
### Fluid horizontal
```ts file='./DescriptionListFluidHorizontal.tsx'
+
```
### Column fill
```ts file='./DescriptionListColumnFill.tsx'
+
```
### Large display size
```ts file='./DescriptionListWithLargeDisplaySize.tsx'
+
```
## Responsive column definitions
@@ -96,16 +109,19 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
### Default responsive columns
```ts file='./DescriptionListDefaultResponsiveColumns.tsx'
+
```
### Horizontal responsive columns
```ts file='./DescriptionListHorizontalResponsiveColumns.tsx'
+
```
### Responsive horizontal, vertical group layout
```ts file='./DescriptionListResponsiveHoriVertGroup.tsx'
+
```
## Auto-column-width
@@ -113,11 +129,13 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
### Default auto column width
```ts file='./DescriptionListDefaultAutoColumn.tsx'
+
```
### Horizontal auto column width
```ts file='./DescriptionListHorizontalAutoColumn.tsx'
+
```
## Inline grid
@@ -125,6 +143,7 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
### Default inline grid
```ts file='./DescriptionListDefaultInlineGrid.tsx'
+
```
## Card variants
@@ -134,21 +153,25 @@ A [card component](/components/card) can be used in place of a description list
### Description list with card
```ts file='./DescriptionListWithCard.tsx'
+
```
### Description list with large display size and card
```ts file='./DescriptionListWithLargeDisplaySizeAndCard.tsx'
+
```
### Display size with card, three column on large breakpoint
```ts file='./DescriptionListDisplaySizeAndCardThreeColumn.tsx'
+
```
### Display size with card, horizontal, modified term width
```ts file='./DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx'
+
```
## Auto fit
@@ -156,16 +179,19 @@ A [card component](/components/card) can be used in place of a description list
### Auto-fit basic
```ts file='./DescriptionListAutoFitBasic.tsx'
+
```
### Auto-fit, min width modified grid template columns
```ts file='./DescriptionListAutoFitMinWidthModified.tsx'
+
```
### Auto-fit, min width modified, responsive grid template columns
```ts file='./DescriptionListAutoFitMinWidthResponsive.tsx'
+
```
## With icons
@@ -173,4 +199,5 @@ A [card component](/components/card) can be used in place of a description list
### Icons on terms
```ts file='./DescriptionListIconsOnTerms.tsx'
+
```
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx
index 4dd55fdbe76..542382890db 100644
--- a/packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx
+++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx
@@ -8,7 +8,7 @@ import {
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
-import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
@@ -25,7 +25,7 @@ export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
- }>Labels
+ }>Labels
example
diff --git a/packages/react-core/src/components/List/examples/List.md b/packages/react-core/src/components/List/examples/List.md
index be798c5f288..29569fdcc39 100644
--- a/packages/react-core/src/components/List/examples/List.md
+++ b/packages/react-core/src/components/List/examples/List.md
@@ -6,7 +6,7 @@ propComponents: ['List', 'ListItem']
---
import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
-import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
## Examples
diff --git a/packages/react-core/src/components/List/examples/ListIcons.tsx b/packages/react-core/src/components/List/examples/ListIcons.tsx
index 656365c5a10..79d0c8e1051 100644
--- a/packages/react-core/src/components/List/examples/ListIcons.tsx
+++ b/packages/react-core/src/components/List/examples/ListIcons.tsx
@@ -1,12 +1,12 @@
import { List, ListItem } from '@patternfly/react-core';
import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
-import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
export const ListIcons: React.FunctionComponent = () => (
}>First
- }>Second
+ }>Second
}>Third
);
diff --git a/packages/react-core/src/components/List/examples/ListLargeIcons.tsx b/packages/react-core/src/components/List/examples/ListLargeIcons.tsx
index fee406846da..98bbe908b49 100644
--- a/packages/react-core/src/components/List/examples/ListLargeIcons.tsx
+++ b/packages/react-core/src/components/List/examples/ListLargeIcons.tsx
@@ -1,12 +1,12 @@
import { List, ListItem } from '@patternfly/react-core';
import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
-import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
export const ListLargeIcons: React.FunctionComponent = () => (
}>First
- }>Second
+ }>Second
}>Third
);
diff --git a/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx b/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx
index 5f53d36a8ff..d56d9072106 100644
--- a/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx
+++ b/packages/react-core/src/components/ProgressStepper/ProgressStep.tsx
@@ -2,7 +2,7 @@ import { useRef } from 'react';
import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
import { css } from '@patternfly/react-styles';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
-import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-full-icon';
+import RhUiResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-resources-full-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';
@@ -44,7 +44,7 @@ const variantIcons = {
default: undefined as any,
pending: undefined as any,
success: ,
- info: ,
+ info: ,
warning: ,
danger:
};
diff --git a/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx b/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx
index 229fa0b66aa..caaf5ad5c62 100644
--- a/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx
+++ b/packages/react-core/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx
@@ -4,7 +4,7 @@ import { capitalize } from '../../../helpers';
import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon', () => () => 'Success icon mock');
-jest.mock('@patternfly/react-icons/dist/esm/icons/resources-full-icon', () => () => 'Info icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-resources-full-icon', () => () => 'Info icon mock');
jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon', () => () => 'Warning icon mock');
jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon', () => () => 'Danger icon mock');
diff --git a/packages/react-core/src/components/Slider/examples/Slider.md b/packages/react-core/src/components/Slider/examples/Slider.md
index 8c74eea7be0..19ac538bed6 100644
--- a/packages/react-core/src/components/Slider/examples/Slider.md
+++ b/packages/react-core/src/components/Slider/examples/Slider.md
@@ -9,8 +9,8 @@ import { useState } from 'react';
import { Slider, Button, Content, ContentVariants } from '@patternfly/react-core';
import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
-import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon';
+import RhUiLockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-lock-fill-icon';
+import RhUiUnlockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-unlock-fill-icon';
## Examples
diff --git a/packages/react-core/src/components/Slider/examples/SliderActions.tsx b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
index 1b4051008cb..3d172855b4a 100644
--- a/packages/react-core/src/components/Slider/examples/SliderActions.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
@@ -2,8 +2,8 @@ import { useState } from 'react';
import { Slider, SliderOnChangeEvent, Button, Content } from '@patternfly/react-core';
import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
-import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon';
+import RhUiLockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-lock-fill-icon';
+import RhUiUnlockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-unlock-fill-icon';
export const SliderActions: React.FunctionComponent = () => {
const [value1, setValue1] = useState(50);
@@ -58,7 +58,7 @@ export const SliderActions: React.FunctionComponent = () => {
variant="plain"
aria-label={isDisabled ? 'Lock' : 'Unlock'}
onClick={() => setIsDisabled(!isDisabled)}
- icon={isDisabled ? : }
+ icon={isDisabled ? : }
/>
);
diff --git a/packages/react-core/src/components/Wizard/examples/Wizard.md b/packages/react-core/src/components/Wizard/examples/Wizard.md
index 10e5369c739..169b2044d8a 100644
--- a/packages/react-core/src/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/components/Wizard/examples/Wizard.md
@@ -20,7 +20,7 @@ propComponents:
]
---
-import { createContext, useCallback, useContext, useRef, useState } from 'react';
+import { createContext, useCallback, useContext, useRef, useState, useEffect } from 'react';
import {
FormGroup,
TextInput,
@@ -51,7 +51,7 @@ WizardHeader
} from '@patternfly/react-core';
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 CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
diff --git a/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx b/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
index 11e473fc4ae..9f0e09b2a62 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx
@@ -21,7 +21,7 @@ import {
WizardFooterWrapper,
useWizardContext
} from '@patternfly/react-core';
-import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
interface ValidationProgressProps {
@@ -50,7 +50,7 @@ const ValidationProgress: React.FunctionComponent = ({
diff --git a/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx b/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx
index 9f90e889fb7..cf703d73271 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx
@@ -9,7 +9,7 @@ import {
Wizard,
WizardStep
} from '@patternfly/react-core';
-import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
interface ValidationProgressProps {
@@ -38,7 +38,7 @@ const ValidationProgress: React.FunctionComponent = ({
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md b/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md
index 32097506cba..f671327776e 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md
@@ -15,7 +15,7 @@ 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 CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
If you seek a wizard solution that allows for more composition, see the [React](/components/wizard) tab.