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.