fix(emptyState): add small/large modifiers

packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.d.ts

@@ -1,8 +1,15 @@
 import { FunctionComponent, HTMLProps, ReactNode } from 'react';
-import { Omit } from '../../helpers/typeUtils';
+import { OneOf, Omit } from '../../helpers/typeUtils';
+
+export const EmptyStateVariant = {
+  large: 'large',
+  small: 'small',
+  full: 'full'
+};
 
 export interface EmptyStateProps extends Omit<HTMLProps<HTMLDivElement>, 'children'> {
   children: ReactNode;
+  variant: OneOf<typeof EmptyStateVariant, keyof typeof EmptyStateVariant>;
 }
 
 declare const EmptyState: FunctionComponent<EmptyStateProps>;

packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.js

@@ -3,23 +3,41 @@ import PropTypes from 'prop-types';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/patternfly/components/EmptyState/empty-state.css';
 
-const EmptyState = ({ children, className, ...props }) => (
-  <div className={css(styles.emptyState, className)} {...props}>
-    {children}
-  </div>
-);
+export const EmptyStateVariant = {
+  large: 'large',
+  small: 'small',
+  full: 'full',
+};
+
+const maxWidthModifiers = {
+  large: styles.modifiers.lg,
+  small: styles.modifiers.sm,
+  full: null,
+}
+
+const EmptyState = ({ children, className, variant, ...props }) => {
+  const maxWidthModifier = variant && maxWidthModifiers[variant];
+  return (
+    <div className={css(styles.emptyState, maxWidthModifier && maxWidthModifier, className)} {...props}>
+      {children}
+    </div>
+  );
+};
 
 EmptyState.propTypes = {
   /** Additional classes added to the EmptyState */
   className: PropTypes.string,
   /** Content rendered inside the EmptyState */
   children: PropTypes.node.isRequired,
+  /** Modifies EmptyState max-width */
+  variant: PropTypes.oneOf(Object.keys(EmptyStateVariant)),
   /** Additional props are spread to the container <div> */
   '': PropTypes.any
 };
 
 EmptyState.defaultProps = {
-  className: ''
+  className: '',
+  variant: EmptyStateVariant.large,
 };
 
 export default EmptyState;

packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.md

@@ -2,21 +2,22 @@
 title: "Empty State"
 cssPrefix: "pf-c-empty-state"
 ---
-## Simple Empty State
+## Empty State
 ```js
 import React from 'react';
 import {
   Title,
   Button,
   EmptyState,
+  EmptyStateVariant,
   EmptyStateIcon,
   EmptyStateBody,
   EmptyStateSecondaryActions
 } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 
 SimpleEmptyState = () => (
-  <EmptyState>
+  <EmptyState variant={EmptyStateVariant.full}>
     <EmptyStateIcon icon={CubesIcon} />
     <Title headingLevel="h5" size="lg">Empty State</Title>
     <EmptyStateBody>
@@ -34,4 +35,74 @@ SimpleEmptyState = () => (
     </EmptyStateSecondaryActions>
   </EmptyState>
 );
-```
+```
+
+## Empty State Small
+```js
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons';
+
+SimpleEmptyState = () => (
+  <EmptyState variant={EmptyStateVariant.small}>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h5" size="lg">Empty State</Title>
+    <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.
+    </EmptyStateBody>
+    <Button variant="primary">Primary Action</Button>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);
+```
+
+## Empty State Large
+```js
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons';
+
+SimpleEmptyState = () => (
+  <EmptyState variant={EmptyStateVariant.large}>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h5" size="lg">Empty State</Title>
+    <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.
+    </EmptyStateBody>
+    <Button variant="primary">Primary Action</Button>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);
+```

packages/patternfly-4/react-core/src/components/EmptyState/EmptyState.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { AddressBookIcon } from '@patternfly/react-icons';
-import EmptyState from './EmptyState';
+import EmptyState, {EmptyStateVariant} from './EmptyState';
 import EmptyStateBody from './EmptyStateBody';
 import EmptyStateSecondaryActions from './EmptyStateSecondaryActions';
 import EmptyStateIcon from './EmptyStateIcon';
@@ -27,6 +27,24 @@ describe('EmptyState', () => {
     expect(view).toMatchSnapshot();
   });
 
+  test('Main variant regular', () => {
+    const view = shallow(
+      <EmptyState variant={EmptyStateVariant.full}>
+        <Title>EmptyState full</Title>
+      </EmptyState>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('Main variant small', () => {
+    const view = shallow(
+      <EmptyState variant={EmptyStateVariant.small}>
+        <Title>EmptyState small</Title>
+      </EmptyState>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
   test('Body', () => {
     const view = shallow(<EmptyStateBody className="custom-empty-state-body" id="empty-state-1" />);
     expect(view.props().className).toBe('pf-c-empty-state__body custom-empty-state-body');

packages/patternfly-4/react-core/src/components/EmptyState/__snapshots__/EmptyState.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`EmptyState Main 1`] = `
 <div
-  className="pf-c-empty-state"
+  className="pf-c-empty-state pf-m-lg"
 >
   <Title
     headingLevel="h5"
@@ -49,3 +49,23 @@ exports[`EmptyState Main 1`] = `
   </EmptyStateSecondaryActions>
 </div>
 `;
+
+exports[`EmptyState Main variant regular 1`] = `
+<div
+  className="pf-c-empty-state"
+>
+  <Title>
+    EmptyState full
+  </Title>
+</div>
+`;
+
+exports[`EmptyState Main variant small 1`] = `
+<div
+  className="pf-c-empty-state pf-m-sm"
+>
+  <Title>
+    EmptyState small
+  </Title>
+</div>
+`;

packages/patternfly-4/react-core/src/components/EmptyState/index.d.ts

@@ -1,4 +1,4 @@
-export { default as EmptyState } from './EmptyState';
+export { default as EmptyState, EmptyStateVariant } from './EmptyState';
 export { default as EmptyStateBody } from './EmptyStateBody';
 export { default as EmptyStateIcon } from './EmptyStateIcon';
 export { default as EmptyStateSecondaryActions } from './EmptyStateSecondaryActions';

packages/patternfly-4/react-core/src/components/EmptyState/index.js

@@ -1,4 +1,4 @@
-export { default as EmptyState } from './EmptyState';
+export { default as EmptyState, EmptyStateVariant } from './EmptyState';
 export { default as EmptyStateBody } from './EmptyStateBody';
 export { default as EmptyStateIcon } from './EmptyStateIcon';
 export { default as EmptyStateSecondaryActions } from './EmptyStateSecondaryActions';