@patternfly/react-core 5.0.0-alpha.32 → 5.0.0-alpha.34

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap

@@ -2,37 +2,56 @@
 
 exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <svg
-    aria-hidden="true"
-    aria-labelledby="icon-title-0"
-    class="pf-c-empty-state__icon ''"
-    fill="string"
-    height="1em"
-    role="img"
-    style="vertical-align: -0.125em;"
-    viewBox="0 0 830 1024"
-    width="1em"
+  <div
+    class="pf-c-empty-state__icon"
+    style="--pf-c-empty-state__icon--Color: string;"
   >
-    <title
-      id="icon-title-0"
+    <svg
+      aria-hidden="true"
+      aria-labelledby="icon-title-0"
+      class="''"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 830 1024"
+      width="1em"
     >
-      string
-    </title>
-    <path
-      d="M0,1024 C7.8,907.1 37.3,664.2 147.8,568.3 C147.8,568.3 207.5,511.5 298.4,511.996718 L530.3,511.996718 C621.3,511.996718 680.9,568.3 680.9,568.3 C680.9,568.3 813.9,680.1 830,1024 L0,1024 Z M639.4,224 C639.4,347.7 539.1,448 415.4,448 C291.7,448 191.4,347.7 191.4,224 C191.4,100.3 291.9,0 415.6,0 C539.3,0 639.4,100.3 639.4,224 L639.4,224 Z"
-    />
-  </svg>
+      <title
+        id="icon-title-0"
+      >
+        string
+      </title>
+      <path
+        d="M0,1024 C7.8,907.1 37.3,664.2 147.8,568.3 C147.8,568.3 207.5,511.5 298.4,511.996718 L530.3,511.996718 C621.3,511.996718 680.9,568.3 680.9,568.3 C680.9,568.3 813.9,680.1 830,1024 L0,1024 Z M639.4,224 C639.4,347.7 539.1,448 415.4,448 C291.7,448 191.4,347.7 191.4,224 C191.4,100.3 291.9,0 415.6,0 C539.3,0 639.4,100.3 639.4,224 L639.4,224 Z"
+      />
+    </svg>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`EmptyStateIcon should match snapshot for variant container 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__icon ''"
+    class="pf-c-empty-state__icon"
   >
-    <div>
-      Component
-    </div>
+    <svg
+      aria-hidden="false"
+      aria-label="Contents"
+      aria-valuetext="Loading..."
+      class="pf-c-spinner pf-m-xl ''"
+      role="progressbar"
+      title="string"
+      viewBox="0 0 100 100"
+    >
+      <circle
+        class="pf-c-spinner__path"
+        cx="50"
+        cy="50"
+        fill="none"
+        r="45"
+      />
+    </svg>
   </div>
 </DocumentFragment>
 `;

package/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap

@@ -8,14 +8,45 @@ exports[`EmptyState Full height 1`] = `
     <div
       class="pf-c-empty-state__content"
     >
-      <h3
-        class="pf-c-title pf-m-md"
-        data-ouia-component-id="OUIA-Generated-Title-5"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
+      <div
+        class="pf-c-empty-state__header"
+      >
+        <div
+          class="pf-c-empty-state__title"
+        >
+          <h1
+            class="pf-c-empty-state__title-text"
+          >
+            EmptyState large
+          </h1>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EmptyState Header with icon 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-empty-state__header"
+  >
+    <div
+      class="pf-c-empty-state__icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 448 512"
+        width="1em"
       >
-        EmptyState large
-      </h3>
+        <path
+          d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"
+        />
+      </svg>
     </div>
   </div>
 </DocumentFragment>
@@ -29,43 +60,56 @@ exports[`EmptyState Main 1`] = `
     <div
       class="pf-c-empty-state__content"
     >
-      <h5
-        class="pf-c-title pf-m-lg"
-        data-ouia-component-id="OUIA-Generated-Title-1"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
+      <div
+        class="pf-c-empty-state__header"
       >
-        HTTP Proxies
-      </h5>
+        <div
+          class="pf-c-empty-state__title"
+        >
+          <h1
+            class="pf-c-empty-state__title-text"
+          >
+            HTTP Proxies
+          </h1>
+        </div>
+      </div>
       <div
         class="pf-c-empty-state__body"
       >
         Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.
       </div>
-      <button
-        aria-disabled="false"
-        class="pf-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        New HTTP Proxy
-      </button>
       <div
-        class=""
+        class="pf-c-empty-state__footer"
       >
-        <button
-          aria-disabled="false"
-          aria-label="learn more action"
-          class="pf-c-button pf-m-link"
-          data-ouia-component-id="OUIA-Generated-Button-link-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+        <div
+          class="pf-c-empty-state__actions"
         >
-          Learn more about this in the documentation.
-        </button>
+          <button
+            aria-disabled="false"
+            class="pf-c-button pf-m-primary"
+            data-ouia-component-id="OUIA-Generated-Button-primary-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            New HTTP Proxy
+          </button>
+        </div>
+        <div
+          class="pf-c-empty-state__actions"
+        >
+          <button
+            aria-disabled="false"
+            aria-label="learn more action"
+            class="pf-c-button pf-m-link"
+            data-ouia-component-id="OUIA-Generated-Button-link-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            Learn more about this in the documentation.
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -80,14 +124,19 @@ exports[`EmptyState Main variant large 1`] = `
     <div
       class="pf-c-empty-state__content"
     >
-      <h3
-        class="pf-c-title pf-m-md"
-        data-ouia-component-id="OUIA-Generated-Title-2"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
+      <div
+        class="pf-c-empty-state__header"
       >
-        EmptyState large
-      </h3>
+        <div
+          class="pf-c-empty-state__title"
+        >
+          <h1
+            class="pf-c-empty-state__title-text"
+          >
+            EmptyState large
+          </h1>
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -101,14 +150,19 @@ exports[`EmptyState Main variant small 1`] = `
     <div
       class="pf-c-empty-state__content"
     >
-      <h3
-        class="pf-c-title pf-m-md"
-        data-ouia-component-id="OUIA-Generated-Title-3"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
+      <div
+        class="pf-c-empty-state__header"
       >
-        EmptyState small
-      </h3>
+        <div
+          class="pf-c-empty-state__title"
+        >
+          <h1
+            class="pf-c-empty-state__title-text"
+          >
+            EmptyState small
+          </h1>
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -122,14 +176,19 @@ exports[`EmptyState Main variant xs 1`] = `
     <div
       class="pf-c-empty-state__content"
     >
-      <h3
-        class="pf-c-title pf-m-md"
-        data-ouia-component-id="OUIA-Generated-Title-4"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
+      <div
+        class="pf-c-empty-state__header"
       >
-        EmptyState small
-      </h3>
+        <div
+          class="pf-c-empty-state__title"
+        >
+          <h1
+            class="pf-c-empty-state__title-text"
+          >
+            EmptyState extra small
+          </h1>
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>

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

@@ -2,10 +2,11 @@
 id: Empty state
 section: components
 cssPrefix: pf-c-empty-state
-propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateIcon', 'EmptyStatePrimary','EmptyStateSecondaryActions']
+propComponents: ['EmptyState', 'EmptyStateHeader', 'EmptyStateIcon', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
 ---
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 
 ## Examples
 ### Basic
@@ -40,7 +41,10 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ### No match found
 
-`EmptyStatePrimary` is a container for primary actions. It can be used in lieu of using a primary button and will insure appropriate spacing of the buttons.
-
 ```ts file="EmptyStateNoMatchFound.tsx"
 ```
+
+### Custom icon color
+
+```ts file="EmptyStateCustomIconColor.tsx"
+```

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

@@ -1,32 +1,34 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateIcon
 } 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>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <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.
+      This represents the empty state pattern in PatternFly. 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>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</Button>
+      </EmptyStateActions>
+      <EmptyStateActions>
+        <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>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+
+export const EmptyStateCustomIconColor: React.FunctionComponent = () => (
+  <EmptyState>
+    <EmptyStateHeader
+      titleText="Custom icon color"
+      headingLevel="h4"
+      icon={<EmptyStateIcon icon={CheckIcon} color="var(--pf-global--success-color--100)" />}
+    />
+    <EmptyStateBody>
+      This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to
+      use but flexible enough to meet a variety of needs.
+    </EmptyStateBody>
+  </EmptyState>
+);

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

@@ -1,33 +1,35 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateIcon
 } 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>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <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.
+      This represents the empty state pattern in PatternFly. 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>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</Button>
+      </EmptyStateActions>
+      <EmptyStateActions>
+        <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>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

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

@@ -1,29 +1,30 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter
 } from '@patternfly/react-core';
 
 export const EmptyStateExtraSmall: React.FunctionComponent = () => (
   <EmptyState variant={EmptyStateVariant.xs}>
-    <Title headingLevel="h4" size="md">
-      Empty state
-    </Title>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" />
     <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.
+      This represents the empty state pattern in PatternFly. 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>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <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>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

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

@@ -1,33 +1,35 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateIcon
 } 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>
+  <EmptyState variant={EmptyStateVariant.lg}>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <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.
+      This represents the empty state pattern in PatternFly. 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>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</Button>
+      </EmptyStateActions>
+      <EmptyStateActions>
+        <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>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

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

@@ -1,16 +1,23 @@
 import React from 'react';
-import { Title, Button, EmptyState, EmptyStatePrimary, EmptyStateIcon, EmptyStateBody } from '@patternfly/react-core';
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateActions,
+  EmptyStateIcon
+} 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>
+    <EmptyStateHeader titleText="No results found" headingLevel="h4" icon={<EmptyStateIcon icon={SearchIcon} />} />
     <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-    <EmptyStatePrimary>
-      <Button variant="link">Clear all filters</Button>
-    </EmptyStatePrimary>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="link">Clear all filters</Button>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

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

@@ -1,33 +1,35 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.small}>
-    <EmptyStateIcon icon={CubesIcon} />
-    <Title headingLevel="h4" size="lg">
-      Empty state
-    </Title>
+  <EmptyState variant={EmptyStateVariant.sm}>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <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.
+      This represents the empty state pattern in PatternFly. 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>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</Button>
+      </EmptyStateActions>
+      <EmptyStateActions>
+        <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>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

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

@@ -1,11 +1,8 @@
 import React from 'react';
-import { Title, EmptyState, EmptyStateIcon, Spinner } from '@patternfly/react-core';
+import { EmptyState, EmptyStateHeader, EmptyStateIcon, Spinner } from '@patternfly/react-core';
 
 export const EmptyStateSpinner: React.FunctionComponent = () => (
   <EmptyState>
-    <EmptyStateIcon variant="container" component={Spinner} />
-    <Title size="lg" headingLevel="h4">
-      Loading
-    </Title>
+    <EmptyStateHeader titleText="Loading" headingLevel="h4" icon={<EmptyStateIcon icon={Spinner} />} />
   </EmptyState>
 );