Skip to content

Empty state width #3933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
evwilkin merged 3 commits into from
Mar 23, 2020
Merged

Empty state width #3933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
baf28a3
refactor(Empty State): Change the default width to full instead of large
Mar 19, 2020
d707c23
add dchanges for issue #3873
Mar 19, 2020
807d562
fix demo app
Mar 19, 2020
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
12 changes: 6 additions & 6 deletions packages/react-core/src/components/EmptyState/EmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}

Expand All @@ -14,20 +14,20 @@ export interface EmptyStateProps extends React.HTMLProps<HTMLDivElement> {
/** 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<EmptyStateProps> = ({
children,
className = '',
variant = EmptyStateVariant.large,
variant = EmptyStateVariant.full,
...props
}: EmptyStateProps) => (
<div
className={css(
styles.emptyState,
variant === 'large' && styles.modifiers.lg,
variant === 'small' && styles.modifiers.sm,
variant === 'lg' && styles.modifiers.lg,
variant === 'sm' && styles.modifiers.sm,
className
)}
{...props}
Expand Down
8 changes: 4 additions & 4 deletions packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,18 @@ describe('EmptyState', () => {
expect(view).toMatchSnapshot();
});

test('Main variant regular', () => {
test('Main variant large', () => {
const view = shallow(
<EmptyState variant={EmptyStateVariant.full}>
<Title size={BaseSizes.md}>EmptyState full</Title>
<EmptyState variant={EmptyStateVariant.lg}>
<Title size={BaseSizes.md}>EmptyState large</Title>
</EmptyState>
);
expect(view).toMatchSnapshot();
});

test('Main variant small', () => {
const view = shallow(
<EmptyState variant={EmptyStateVariant.small}>
<EmptyState variant={EmptyStateVariant.sm}>
<Title size={BaseSizes.md}>EmptyState small</Title>
</EmptyState>
);
Expand Down
2 changes: 1 addition & 1 deletion ...core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyState.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`EmptyState should match snapshot (auto-generated) 1`] = `
<div
className="pf-c-empty-state pf-m-sm ''"
className="pf-c-empty-state ''"
>
<div>
ReactNode
Expand Down
8 changes: 4 additions & 4 deletions ...ges/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`EmptyState Main 1`] = `
<div
className="pf-c-empty-state pf-m-lg"
className="pf-c-empty-state"
>
<Title
headingLevel="h5"
Expand All @@ -29,14 +29,14 @@ exports[`EmptyState Main 1`] = `
</div>
`;

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
</Title>
</div>
`;
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/EmptyState/examples/EmptyState.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
import { CubesIcon } from '@patternfly/react-icons';

SimpleEmptyState = () => (
<EmptyState variant={EmptyStateVariant.full}>
<EmptyState>
<EmptyStateIcon icon={CubesIcon} />
<Title headingLevel="h5" size="lg">
Empty State
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
12 changes: 6 additions & 6 deletions ...ages/react-integration/demo-app-ts/src/components/demos/EmptyStateDemo/EmptyStateDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ export class EmptyStateDemo extends Component {
<Button variant="link">Action area</Button>
</EmptyStateSecondaryActions>
</React.Fragment>
)
),
variant: EmptyStateVariant.lg
};
mySmallEmptyStateProps: EmptyStateProps = {
children: (
Expand All @@ -56,7 +57,7 @@ export class EmptyStateDemo extends Component {
</EmptyStateSecondaryActions>
</React.Fragment>
),
variant: EmptyStateVariant.small
variant: EmptyStateVariant.sm
};
myFullEmptyStateProps: EmptyStateProps = {
children: (
Expand All @@ -79,8 +80,7 @@ export class EmptyStateDemo extends Component {
<Button variant="link">Action area</Button>
</EmptyStateSecondaryActions>
</React.Fragment>
),
variant: EmptyStateVariant.full
)
};

componentDidMount() {
Expand All @@ -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>
);
}
Expand Down
2 changes: 1 addition & 1 deletion ...ages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down