diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index d92ace4e4ef..5452f389834 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -12,7 +12,7 @@ import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-user import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon'; import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon'; -import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; +import RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon'; import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; Micro animations have been added for `` components within an ``. By default, you must opt into animations, since they can require updates to tests. To enable or disable animations as needed, use the `hasAnimations` property. With animations enabled, we recommend you ensure that dynamically-added alerts are prepended to a list of alerts, rather than appended to the end of it. diff --git a/packages/react-core/src/components/Alert/examples/AlertCustomIcons.tsx b/packages/react-core/src/components/Alert/examples/AlertCustomIcons.tsx index dd9affbf231..ee782901784 100644 --- a/packages/react-core/src/components/Alert/examples/AlertCustomIcons.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertCustomIcons.tsx @@ -4,7 +4,7 @@ import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-user import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon'; import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon'; -import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; +import RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon'; export const AlertCustomIcons: React.FunctionComponent = () => ( @@ -12,6 +12,6 @@ export const AlertCustomIcons: React.FunctionComponent = () => ( } variant="info" title="Info alert title" /> } variant="success" title="Success alert title" /> } variant="warning" title="Warning alert title" /> - } variant="danger" title="Danger alert title" /> + } variant="danger" title="Danger alert title" /> ); diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md index 31418592612..31a61aad860 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyState.md +++ b/packages/react-core/src/components/EmptyState/examples/EmptyState.md @@ -6,45 +6,55 @@ propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyState --- import { useState } from 'react'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; +import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; ## Examples + ### Basic ```ts file="EmptyStateBasic.tsx" + ``` ### Extra small ```ts file="EmptyStateExtraSmall.tsx" + ``` ### Small ```ts file="EmptyStateSmall.tsx" + ``` ### Large ```ts file="EmptyStateLarge.tsx" + ``` ### Extra large ```ts file="EmptyStateExtraLarge.tsx" + ``` ### With status + ```ts file="EmptyStateWithStatus.tsx" + ``` ### Spinner ```ts file="EmptyStateSpinner.tsx" + ``` ### No match found ```ts file="EmptyStateNoMatchFound.tsx" + ``` diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx index 5d9ec5f69aa..742389380ed 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx @@ -1,8 +1,8 @@ import { Button, EmptyState, EmptyStateBody, EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; +import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon'; export const EmptyStateBasic: React.FunctionComponent = () => ( - + This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx index df77962cc9d..b8202766f74 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx @@ -6,10 +6,10 @@ import { EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; +import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon'; export const EmptyStateExtraLarge: React.FunctionComponent = () => ( - + This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx index 68394ae4481..d53a533a330 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx @@ -6,10 +6,10 @@ import { EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; +import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon'; export const EmptyStateExtraSmall: React.FunctionComponent = () => ( - + This represents an the empty state pattern in PatternFly. The icon is optional. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx index a978914053a..162dd581e04 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx @@ -6,10 +6,10 @@ import { EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; +import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon'; export const EmptyStateLarge: React.FunctionComponent = () => ( - + This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx index faa4bce82ba..f4a1b6a1e58 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx @@ -6,10 +6,10 @@ import { EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; +import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon'; export const EmptyStateSmall: React.FunctionComponent = () => ( - + This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs. diff --git a/packages/react-core/src/components/List/examples/List.md b/packages/react-core/src/components/List/examples/List.md index be798c5f288..dfa6d7e209c 100644 --- a/packages/react-core/src/components/List/examples/List.md +++ b/packages/react-core/src/components/List/examples/List.md @@ -7,7 +7,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 DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon'; +import RhUiDesktopIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-desktop-icon'; ## Examples ### Basic diff --git a/packages/react-core/src/components/List/examples/ListIcons.tsx b/packages/react-core/src/components/List/examples/ListIcons.tsx index 656365c5a10..f1ae04a5dfb 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 DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon'; +import RhUiDesktopIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-desktop-icon'; export const ListIcons: React.FunctionComponent = () => ( }>First }>Second - }>Third + }>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..aa3f8ea8d71 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 DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon'; +import RhUiDesktopIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-desktop-icon'; export const ListLargeIcons: React.FunctionComponent = () => ( }>First }>Second - }>Third + }>Third ); diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md index 037efc47a6e..88510f810c5 100644 --- a/packages/react-core/src/components/Nav/examples/Nav.md +++ b/packages/react-core/src/components/Nav/examples/Nav.md @@ -12,7 +12,7 @@ import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-m import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon'; -import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; +import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon'; ## Examples diff --git a/packages/react-core/src/components/Nav/examples/NavIcons.tsx b/packages/react-core/src/components/Nav/examples/NavIcons.tsx index f8260480406..92d47865328 100644 --- a/packages/react-core/src/components/Nav/examples/NavIcons.tsx +++ b/packages/react-core/src/components/Nav/examples/NavIcons.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; -import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; +import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon'; import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon'; @@ -42,7 +42,7 @@ export const NavIcons: React.FunctionComponent = () => { to="#nav-icon-link3" itemId={2} isActive={activeItem === 2} - icon={} + icon={} > Link 3 diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index ff0a4e43e4b..68c600cec3c 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -22,7 +22,7 @@ import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-user import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon'; import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon'; -import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; +import RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon'; import RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-fill-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon'; diff --git a/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx b/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx index 37a0c64b11b..762534581ad 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx @@ -4,7 +4,7 @@ import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-user import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon'; import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon'; -import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; +import RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon'; import RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-fill-icon'; export const TabsIconAndText: React.FunctionComponent = () => { @@ -82,7 +82,7 @@ export const TabsIconAndText: React.FunctionComponent = () => { title={ <> - + {' '} System{' '} diff --git a/packages/react-core/src/demos/Compass/Compass.md b/packages/react-core/src/demos/Compass/Compass.md index eb8c63a531d..57f508e6beb 100644 --- a/packages/react-core/src/demos/Compass/Compass.md +++ b/packages/react-core/src/demos/Compass/Compass.md @@ -11,7 +11,7 @@ import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/r import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon'; -import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; +import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import imgAvatar from '../assets/avatarImg.svg'; diff --git a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx index d36fee0c37f..7ee5d783698 100644 --- a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx +++ b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx @@ -31,7 +31,7 @@ import { import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon'; -import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; +import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import pfLogo from '../../assets/PF-IconLogo-color.svg'; @@ -281,7 +281,7 @@ export const CompassDockDemo: React.FunctionComponent = () => { to="#nav-icon-link3" itemId={2} isActive={activeItem === 2} - icon={} + icon={} anchorRef={navItem3Ref} aria-label="Authentication" > diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md index f51f988571b..92db4f3cd4b 100644 --- a/packages/react-core/src/demos/Nav.md +++ b/packages/react-core/src/demos/Nav.md @@ -14,7 +14,7 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; -import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; +import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md index e2c3115a7e5..557e1d41846 100644 --- a/packages/react-core/src/demos/Page.md +++ b/packages/react-core/src/demos/Page.md @@ -14,7 +14,7 @@ import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; -import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; +import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg'; diff --git a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx index d8f54091b55..da288407be6 100644 --- a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx @@ -33,7 +33,7 @@ import { import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; -import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; +import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; @@ -301,7 +301,7 @@ export const NavDockedNav: React.FunctionComponent = () => { to="#nav-link3" itemId={2} isActive={activeItem === 2} - icon={} + icon={} anchorRef={navItem3Ref} aria-label="Authentication" > diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx index 27b57d65556..5faff330d53 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx @@ -10,7 +10,7 @@ import { EmptyStateVariant, EmptyStateFooter } from '@patternfly/react-core'; -import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; +import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon'; class EmptyStateTable extends Component { static displayName = 'EmptyStateTable'; @@ -29,7 +29,7 @@ class EmptyStateTable extends Component + This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.