diff --git a/packages/react-core/src/components/EmptyState/EmptyState.tsx b/packages/react-core/src/components/EmptyState/EmptyState.tsx index 16c06c1897f..ddaeaa0d06d 100644 --- a/packages/react-core/src/components/EmptyState/EmptyState.tsx +++ b/packages/react-core/src/components/EmptyState/EmptyState.tsx @@ -3,8 +3,8 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state'; export enum EmptyStateVariant { - large = 'large', - small = 'small', + lg = 'lg', + sm = 'sm', full = 'full' } @@ -14,20 +14,20 @@ export interface EmptyStateProps extends React.HTMLProps { /** Content rendered inside the EmptyState */ children: React.ReactNode; /** Modifies EmptyState max-width */ - variant?: 'small' | 'large' | 'full'; + variant?: 'sm' | 'lg' | 'full'; } export const EmptyState: React.FunctionComponent = ({ children, className = '', - variant = EmptyStateVariant.large, + variant = EmptyStateVariant.full, ...props }: EmptyStateProps) => (
{ expect(view).toMatchSnapshot(); }); - test('Main variant regular', () => { + test('Main variant large', () => { const view = shallow( - - EmptyState full + + EmptyState large ); expect(view).toMatchSnapshot(); @@ -42,7 +42,7 @@ describe('EmptyState', () => { test('Main variant small', () => { const view = shallow( - + EmptyState small ); diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyState.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyState.test.tsx.snap index a7ab39678d8..7639a76123b 100644 --- a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyState.test.tsx.snap +++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyState.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EmptyState should match snapshot (auto-generated) 1`] = `
ReactNode diff --git a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap index 45367cf8f28..c8502ff6149 100644 --- a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap +++ b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EmptyState Main 1`] = `
`; -exports[`EmptyState Main variant regular 1`] = ` +exports[`EmptyState Main variant large 1`] = ` <div - className="pf-c-empty-state" + className="pf-c-empty-state pf-m-lg" > <Title size="md" > - EmptyState full + EmptyState large
`; diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md index fb53f18e691..090a63a70bb 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyState.md +++ b/packages/react-core/src/components/EmptyState/examples/EmptyState.md @@ -32,7 +32,7 @@ import { import { CubesIcon } from '@patternfly/react-icons'; SimpleEmptyState = () => ( - + Empty State @@ -68,7 +68,7 @@ import { import { CubesIcon } from '@patternfly/react-icons'; SimpleEmptyState = () => ( - <EmptyState variant={EmptyStateVariant.small}> + <EmptyState variant={EmptyStateVariant.sm}> <EmptyStateIcon icon={CubesIcon} /> <Title headingLevel="h5" size="lg"> Empty State @@ -104,7 +104,7 @@ import { import { CubesIcon } from '@patternfly/react-icons'; SimpleEmptyState = () => ( - <EmptyState variant={EmptyStateVariant.large}> + <EmptyState variant={EmptyStateVariant.lg}> <EmptyStateIcon icon={CubesIcon} /> <Title headingLevel="h5" size="lg"> Empty State diff --git a/packages/react-integration/demo-app-ts/src/components/demos/EmptyStateDemo/EmptyStateDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/EmptyStateDemo/EmptyStateDemo.tsx index 19e9f45254e..11469dc902c 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/EmptyStateDemo/EmptyStateDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/EmptyStateDemo/EmptyStateDemo.tsx @@ -32,7 +32,8 @@ export class EmptyStateDemo extends Component { <Button variant="link">Action area</Button> </EmptyStateSecondaryActions> </React.Fragment> - ) + ), + variant: EmptyStateVariant.lg }; mySmallEmptyStateProps: EmptyStateProps = { children: ( @@ -56,7 +57,7 @@ export class EmptyStateDemo extends Component { </EmptyStateSecondaryActions> </React.Fragment> ), - variant: EmptyStateVariant.small + variant: EmptyStateVariant.sm }; myFullEmptyStateProps: EmptyStateProps = { children: ( @@ -79,8 +80,7 @@ export class EmptyStateDemo extends Component { <Button variant="link">Action area</Button> </EmptyStateSecondaryActions> </React.Fragment> - ), - variant: EmptyStateVariant.full + ) }; componentDidMount() { @@ -90,9 +90,9 @@ export class EmptyStateDemo extends Component { render() { return ( <React.Fragment> - <EmptyState>{this.myLargeEmptyStateProps.children}</EmptyState> + <EmptyState variant={this.myLargeEmptyStateProps.variant}>{this.myLargeEmptyStateProps.children}</EmptyState> <EmptyState variant={this.mySmallEmptyStateProps.variant}>{this.mySmallEmptyStateProps.children}</EmptyState> - <EmptyState variant={this.myFullEmptyStateProps.variant}>{this.myFullEmptyStateProps.children}</EmptyState> + <EmptyState>{this.myFullEmptyStateProps.children}</EmptyState> </React.Fragment> ); } 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 f83992cf932..5e1463ec865 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 @@ -27,7 +27,7 @@ export class EmptyStateTable extends React.Component<TableProps, { columns: (ICe heightAuto: true, props: { colSpan: '8' }, title: ( - <EmptyState variant={EmptyStateVariant.small}> + <EmptyState variant={EmptyStateVariant.sm}> <EmptyStateIcon icon={CubesIcon} /> <Title headingLevel="h5" size="lg"> Empty State