@patternfly/react-core 4.221.5 → 4.221.8

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.221.8 (2022-06-08)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.221.7 (2022-06-07)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.221.6 (2022-06-06)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.221.5 (2022-06-03)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.css

@@ -1904,113 +1904,6 @@ textarea.pf-c-form-control {
   max-width: 100%;
 }
 
-.pf-c-breadcrumb {
-  --pf-c-breadcrumb__item--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-breadcrumb__item--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-breadcrumb__item--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--200);
-  --pf-c-breadcrumb__item-divider--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-breadcrumb__item-divider--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-breadcrumb__link--Color: var(--pf-global--link--Color);
-  --pf-c-breadcrumb__link--TextDecoration: var(--pf-global--link--TextDecoration);
-  --pf-c-breadcrumb__link--hover--Color: var(--pf-global--link--Color--hover);
-  --pf-c-breadcrumb__link--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
-  --pf-c-breadcrumb__link--m-current--Color: var(--pf-global--Color--100);
-  --pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-c-breadcrumb__item--MarginRight) * -1);
-  --pf-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-c-breadcrumb__item-divider--MarginRight) * -1);
-  --pf-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-global--LineHeight--sm);
-  display: inline-flex;
-}
-
-.pf-c-breadcrumb__list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.pf-c-breadcrumb__item {
-  display: flex;
-  align-items: baseline;
-  font-size: var(--pf-c-breadcrumb__item--FontSize);
-  font-weight: var(--pf-c-breadcrumb__item--FontWeight);
-  line-height: var(--pf-c-breadcrumb__item--LineHeight);
-  white-space: nowrap;
-  list-style: none;
-}
-
-.pf-c-breadcrumb__item:not(:last-child) {
-  margin-right: var(--pf-c-breadcrumb__item--MarginRight);
-}
-
-.pf-c-breadcrumb__item-divider {
-  margin-right: var(--pf-c-breadcrumb__item-divider--MarginRight);
-  font-size: var(--pf-c-breadcrumb__item-divider--FontSize);
-  line-height: 1;
-  color: var(--pf-c-breadcrumb__item-divider--Color);
-}
-
-.pf-c-breadcrumb__link {
-  font-size: inherit;
-  font-weight: var(--pf-c-breadcrumb__link--FontWeight);
-  line-height: inherit;
-  color: var(--pf-c-breadcrumb__link--Color);
-  text-decoration: var(--pf-c-breadcrumb__link--TextDecoration);
-  word-break: break-word;
-}
-
-.pf-c-breadcrumb__link:hover {
-  --pf-c-breadcrumb__link--Color: var(--pf-c-breadcrumb__link--hover--Color);
-  --pf-c-breadcrumb__link--TextDecoration: var(--pf-c-breadcrumb__link--hover--TextDecoration);
-}
-
-.pf-c-breadcrumb__link.pf-m-current {
-  cursor: default;
-}
-
-.pf-c-breadcrumb__link.pf-m-current, .pf-c-breadcrumb__link.pf-m-current:hover {
-  color: var(--pf-c-breadcrumb__link--m-current--Color);
-  text-decoration: none;
-}
-
-button.pf-c-breadcrumb__link {
-  border: none;
-}
-
-.pf-c-breadcrumb__dropdown {
-  margin: var(--pf-c-breadcrumb__dropdown--MarginTop) var(--pf-c-breadcrumb__dropdown--MarginRight) var(--pf-c-breadcrumb__dropdown--MarginBottom) var(--pf-c-breadcrumb__dropdown--MarginLeft);
-}
-
-.pf-c-breadcrumb__dropdown .pf-c-dropdown__toggle {
-  line-height: var(--pf-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
-}
-
-.pf-c-breadcrumb__heading {
-  display: inline;
-  font-size: var(--pf-c-breadcrumb__heading--FontSize);
-}
-
-.pf-c-breadcrumb__link,
-.pf-c-breadcrumb__heading {
-  white-space: normal;
-}
-
-.pf-m-overpass-font .pf-c-breadcrumb__link,
-.pf-m-overpass-font .pf-c-breadcrumb__item {
-  font-weight: var(--pf-global--FontWeight--semi-bold);
-}
-
-.pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
-  display: none;
-  visibility: hidden;
-}
-
-:where(.pf-theme-dark) .pf-c-breadcrumb {
-  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
-}
-
 .pf-c-button {
   --pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-button--PaddingRight: var(--pf-global--spacer--md);
@@ -3244,6 +3137,113 @@ label.pf-c-check, .pf-c-check__label,
   cursor: not-allowed;
 }
 
+.pf-c-breadcrumb {
+  --pf-c-breadcrumb__item--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-breadcrumb__item--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-breadcrumb__item--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--200);
+  --pf-c-breadcrumb__item-divider--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-breadcrumb__item-divider--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-breadcrumb__link--Color: var(--pf-global--link--Color);
+  --pf-c-breadcrumb__link--TextDecoration: var(--pf-global--link--TextDecoration);
+  --pf-c-breadcrumb__link--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-breadcrumb__link--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
+  --pf-c-breadcrumb__link--m-current--Color: var(--pf-global--Color--100);
+  --pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-c-breadcrumb__item--MarginRight) * -1);
+  --pf-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-c-breadcrumb__item-divider--MarginRight) * -1);
+  --pf-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-global--LineHeight--sm);
+  display: inline-flex;
+}
+
+.pf-c-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.pf-c-breadcrumb__item {
+  display: flex;
+  align-items: baseline;
+  font-size: var(--pf-c-breadcrumb__item--FontSize);
+  font-weight: var(--pf-c-breadcrumb__item--FontWeight);
+  line-height: var(--pf-c-breadcrumb__item--LineHeight);
+  white-space: nowrap;
+  list-style: none;
+}
+
+.pf-c-breadcrumb__item:not(:last-child) {
+  margin-right: var(--pf-c-breadcrumb__item--MarginRight);
+}
+
+.pf-c-breadcrumb__item-divider {
+  margin-right: var(--pf-c-breadcrumb__item-divider--MarginRight);
+  font-size: var(--pf-c-breadcrumb__item-divider--FontSize);
+  line-height: 1;
+  color: var(--pf-c-breadcrumb__item-divider--Color);
+}
+
+.pf-c-breadcrumb__link {
+  font-size: inherit;
+  font-weight: var(--pf-c-breadcrumb__link--FontWeight);
+  line-height: inherit;
+  color: var(--pf-c-breadcrumb__link--Color);
+  text-decoration: var(--pf-c-breadcrumb__link--TextDecoration);
+  word-break: break-word;
+}
+
+.pf-c-breadcrumb__link:hover {
+  --pf-c-breadcrumb__link--Color: var(--pf-c-breadcrumb__link--hover--Color);
+  --pf-c-breadcrumb__link--TextDecoration: var(--pf-c-breadcrumb__link--hover--TextDecoration);
+}
+
+.pf-c-breadcrumb__link.pf-m-current {
+  cursor: default;
+}
+
+.pf-c-breadcrumb__link.pf-m-current, .pf-c-breadcrumb__link.pf-m-current:hover {
+  color: var(--pf-c-breadcrumb__link--m-current--Color);
+  text-decoration: none;
+}
+
+button.pf-c-breadcrumb__link {
+  border: none;
+}
+
+.pf-c-breadcrumb__dropdown {
+  margin: var(--pf-c-breadcrumb__dropdown--MarginTop) var(--pf-c-breadcrumb__dropdown--MarginRight) var(--pf-c-breadcrumb__dropdown--MarginBottom) var(--pf-c-breadcrumb__dropdown--MarginLeft);
+}
+
+.pf-c-breadcrumb__dropdown .pf-c-dropdown__toggle {
+  line-height: var(--pf-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
+}
+
+.pf-c-breadcrumb__heading {
+  display: inline;
+  font-size: var(--pf-c-breadcrumb__heading--FontSize);
+}
+
+.pf-c-breadcrumb__link,
+.pf-c-breadcrumb__heading {
+  white-space: normal;
+}
+
+.pf-m-overpass-font .pf-c-breadcrumb__link,
+.pf-m-overpass-font .pf-c-breadcrumb__item {
+  font-weight: var(--pf-global--FontWeight--semi-bold);
+}
+
+.pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
+  display: none;
+  visibility: hidden;
+}
+
+:where(.pf-theme-dark) .pf-c-breadcrumb {
+  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
+}
+
 .pf-c-chip {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.5",
+  "version": "4.221.8",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.72.5",
-    "@patternfly/react-styles": "^4.71.5",
-    "@patternfly/react-tokens": "^4.73.5",
+    "@patternfly/react-icons": "^4.72.8",
+    "@patternfly/react-styles": "^4.71.8",
+    "@patternfly/react-tokens": "^4.73.8",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "f9a863d59707791773be3518813cde71190fcd92"
+  "gitHead": "6f2f06b9e9c41575fabd48ca205fb17fbba8cde0"
 }

package/src/components/EmptyState/examples/EmptyState.md

@@ -9,222 +9,36 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" 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>
+```ts file="EmptyStateBasic.tsx"
 ```
 
 ### Extra small
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
 
-<EmptyState variant={EmptyStateVariant.xs}>
-  <Title headingLevel="h4" size="md">
-    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>
-  <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>
+```ts file="EmptyStateExtraSmall.tsx"
 ```
 
 ### Small
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.small}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" 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>
+```ts file="EmptyStateSmall.tsx"
 ```
 
 ### Large
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.large}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" 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>
+```ts file="EmptyStateLarge.tsx"
 ```
 
 ### Extra large
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.xl}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h5" size="4xl">
-    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>
+```ts file="EmptyStateExtraLarge.tsx"
 ```
 
 ### Spinner
-```js
-import React from 'react';
-import {
-  Title,
-  EmptyState,
-  EmptyStateIcon,
-  Spinner
-} from '@patternfly/react-core';
 
-
-EmptyStateSpinner = () => {
-  return (
-    <EmptyState>
-      <EmptyStateIcon variant="container" component={Spinner} />
-      <Title size="lg" headingLevel="h4">
-        Loading
-      </Title>
-    </EmptyState>
-  );
-}
+```ts file="EmptyStateSpinner.tsx"
 ```
 
 ### No match found
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStatePrimary,
-  EmptyStateIcon,
-  EmptyStateBody
-} from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-
 
-<EmptyState>
-  <EmptyStateIcon icon={SearchIcon} />
-  <Title size="lg" headingLevel="h4">
-    No results found
-  </Title>
-  <EmptyStateBody>
-    No results match the filter criteria. Clear all filters and try again.
-  </EmptyStateBody>
-  <EmptyStatePrimary>
-    <Button variant="link">Clear all filters</Button>
-  </EmptyStatePrimary>
-</EmptyState>
+```ts file="EmptyStateNoMatchFound.tsx"
 ```

package/src/components/EmptyState/examples/EmptyStateBasic.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateBasic: React.FunctionComponent = () => (
+  <EmptyState>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h4" 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>
+);

package/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateExtraLarge: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.xl}>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h5" size="4xl">
+      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>
+);

package/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+
+export const EmptyStateExtraSmall: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.xs}>
+    <Title headingLevel="h4" size="md">
+      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>
+    <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>
+);

package/src/components/EmptyState/examples/EmptyStateLarge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateLarge: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.large}>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h4" 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>
+);

package/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Title, Button, EmptyState, EmptyStatePrimary, EmptyStateIcon, EmptyStateBody } from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+export const EmptyStateNoMatchFound: React.FunctionComponent = () => (
+  <EmptyState>
+    <EmptyStateIcon icon={SearchIcon} />
+    <Title size="lg" headingLevel="h4">
+      No results found
+    </Title>
+    <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+    <EmptyStatePrimary>
+      <Button variant="link">Clear all filters</Button>
+    </EmptyStatePrimary>
+  </EmptyState>
+);