diff --git a/packages/react-core/src/components/EmptyState/EmptyState.tsx b/packages/react-core/src/components/EmptyState/EmptyState.tsx index 5212f38d0b0..192f89c6d4c 100644 --- a/packages/react-core/src/components/EmptyState/EmptyState.tsx +++ b/packages/react-core/src/components/EmptyState/EmptyState.tsx @@ -3,12 +3,14 @@ import { css, getModifier } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state'; export enum EmptyStateVariant { + 'xl' = 'xl', large = 'large', small = 'small', full = 'full' } const maxWidthModifiers: { [variant in keyof typeof EmptyStateVariant]: string } = { + xl: 'xl', large: 'lg', small: 'sm', full: '' @@ -20,7 +22,7 @@ export interface EmptyStateProps extends React.HTMLProps { /** Content rendered inside the EmptyState */ children: React.ReactNode; /** Modifies EmptyState max-width */ - variant?: 'small' | 'large' | 'full'; + variant?: 'small' | 'large' | 'full' | 'xl'; } export const EmptyState: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md index fb53f18e691..541ac5d5c2c 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyState.md +++ b/packages/react-core/src/components/EmptyState/examples/EmptyState.md @@ -126,6 +126,42 @@ SimpleEmptyState = () => ( ); ``` +```js title=Extra-Large +import React from 'react'; +import { + Title, + Button, + EmptyState, + EmptyStateVariant, + EmptyStateIcon, + EmptyStateBody, + EmptyStateSecondaryActions +} from '@patternfly/react-core'; +import { CubesIcon } from '@patternfly/react-icons'; + +SimpleEmptyState = () => ( + + + + Empty State + + + 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. + + + + + + + + + + + +); +``` + ```js title=Spinner import React from 'react'; import {