Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Alert/examples/Alert.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<Alert>` components within an `<AlertGroup>`. 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ 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 = () => (
<Fragment>
<Alert customIcon={<RhUiUsersFillIcon />} title="Default alert title" />
<Alert customIcon={<RhUiContainerFillIcon />} variant="info" title="Info alert title" />
<Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
<Alert customIcon={<RhUiServerStackFillIcon />} variant="warning" title="Warning alert title" />
<Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
<Alert customIcon={<RhUiLaptopFillIcon />} variant="danger" title="Danger alert title" />
</Fragment>
);
Original file line number Diff line number Diff line change
Expand Up @@ -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"

```
Original file line number Diff line number Diff line change
@@ -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 = () => (
<EmptyState titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
<EmptyState titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
<EmptyStateBody>
This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
meet a variety of needs.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<EmptyState variant={EmptyStateVariant.xl} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
<EmptyState variant={EmptyStateVariant.xl} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
<EmptyStateBody>
This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
meet a variety of needs.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<EmptyState variant={EmptyStateVariant.xs} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
<EmptyState variant={EmptyStateVariant.xs} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
<EmptyStateBody>This represents an the empty state pattern in PatternFly. The icon is optional.</EmptyStateBody>
<EmptyStateFooter>
<EmptyStateActions>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<EmptyState variant={EmptyStateVariant.lg} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
<EmptyState variant={EmptyStateVariant.lg} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
<EmptyStateBody>
This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
meet a variety of needs.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<EmptyState variant={EmptyStateVariant.sm} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
<EmptyState variant={EmptyStateVariant.sm} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
<EmptyStateBody>
This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
meet a variety of needs.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/List/examples/List.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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 = () => (
<List isPlain>
<ListItem icon={<RhUiLearnFillIcon />}>First</ListItem>
<ListItem icon={<KeyIcon />}>Second</ListItem>
<ListItem icon={<DesktopIcon />}>Third</ListItem>
<ListItem icon={<RhUiDesktopIcon />}>Third</ListItem>
</List>
);
Original file line number Diff line number Diff line change
@@ -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 = () => (
<List isPlain iconSize="large">
<ListItem icon={<RhUiLearnFillIcon />}>First</ListItem>
<ListItem icon={<KeyIcon />}>Second</ListItem>
<ListItem icon={<DesktopIcon />}>Third</ListItem>
<ListItem icon={<RhUiDesktopIcon />}>Third</ListItem>
</List>
);
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Nav/examples/Nav.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Nav/examples/NavIcons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -42,7 +42,7 @@ export const NavIcons: React.FunctionComponent = () => {
to="#nav-icon-link3"
itemId={2}
isActive={activeItem === 2}
icon={<CloudIcon />}
icon={<RhUiCloudFillIcon />}
>
Link 3
</NavItem>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Tabs/examples/Tabs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -82,7 +82,7 @@ export const TabsIconAndText: React.FunctionComponent = () => {
title={
<>
<TabTitleIcon>
<LaptopIcon />
<RhUiLaptopFillIcon />
</TabTitleIcon>{' '}
<TabTitleText>System</TabTitleText>{' '}
</>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/Compass/Compass.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -281,7 +281,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
to="#nav-icon-link3"
itemId={2}
isActive={activeItem === 2}
icon={<CloudIcon />}
icon={<RhUiCloudFillIcon />}
anchorRef={navItem3Ref}
aria-label="Authentication"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/Nav.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/Page.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -301,7 +301,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
to="#nav-link3"
itemId={2}
isActive={activeItem === 2}
icon={<CloudIcon />}
icon={<RhUiCloudFillIcon />}
anchorRef={navItem3Ref}
aria-label="Authentication"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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<TableProps, { columns: (ICell | string)[]; rows: IRow[] }> {
static displayName = 'EmptyStateTable';
Expand All @@ -29,7 +29,7 @@ class EmptyStateTable extends Component<TableProps, { columns: (ICell | string)[
heightAuto: true,
props: { colSpan: '8' },
title: (
<EmptyState headingLevel="h5" titleText="Empty state" icon={CubesIcon} variant={EmptyStateVariant.sm}>
<EmptyState headingLevel="h5" titleText="Empty state" icon={RhUiModuleIcon} variant={EmptyStateVariant.sm}>
<EmptyStateBody>
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.
Expand Down
Loading