@patternfly/react-core 5.0.0-alpha.31 → 5.0.0-alpha.33

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

@@ -3,30 +3,33 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import AddressBookIcon from '@patternfly/react-icons/dist/esm/icons/address-book-icon';
+
 import { EmptyState, EmptyStateVariant } from '../EmptyState';
 import { EmptyStateBody } from '../EmptyStateBody';
-import { EmptyStateSecondaryActions } from '../EmptyStateSecondaryActions';
-import { EmptyStateIcon } from '../EmptyStateIcon';
-import { EmptyStatePrimary } from '../EmptyStatePrimary';
+import { EmptyStateActions } from '../EmptyStateActions';
 import { Button } from '../../Button';
-import { Title, TitleSizes } from '../../Title';
+import { EmptyStateHeader } from '../EmptyStateHeader';
+import { EmptyStateFooter } from '../EmptyStateFooter';
+import { EmptyStateIcon } from '../../../../dist/esm';
 
 describe('EmptyState', () => {
   test('Main', () => {
     const { asFragment } = render(
       <EmptyState>
-        <Title headingLevel="h5" size="lg">
-          HTTP Proxies
-        </Title>
+        <EmptyStateHeader titleText="HTTP Proxies" />
         <EmptyStateBody>
           Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies.
         </EmptyStateBody>
-        <Button variant="primary">New HTTP Proxy</Button>
-        <EmptyStateSecondaryActions>
-          <Button variant="link" aria-label="learn more action">
-            Learn more about this in the documentation.
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button variant="primary">New HTTP Proxy</Button>
+          </EmptyStateActions>
+          <EmptyStateActions>
+            <Button variant="link" aria-label="learn more action">
+              Learn more about this in the documentation.
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
@@ -34,10 +37,8 @@ describe('EmptyState', () => {
 
   test('Main variant large', () => {
     const { asFragment } = render(
-      <EmptyState variant={EmptyStateVariant.large}>
-        <Title headingLevel="h3" size={TitleSizes.md}>
-          EmptyState large
-        </Title>
+      <EmptyState variant={EmptyStateVariant.lg}>
+        <EmptyStateHeader titleText="EmptyState large" />
       </EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
@@ -45,10 +46,8 @@ describe('EmptyState', () => {
 
   test('Main variant small', () => {
     const { asFragment } = render(
-      <EmptyState variant={EmptyStateVariant.small}>
-        <Title headingLevel="h3" size={TitleSizes.md}>
-          EmptyState small
-        </Title>
+      <EmptyState variant={EmptyStateVariant.sm}>
+        <EmptyStateHeader titleText="EmptyState small" />
       </EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
@@ -57,9 +56,7 @@ describe('EmptyState', () => {
   test('Main variant xs', () => {
     const { asFragment } = render(
       <EmptyState variant={EmptyStateVariant.xs}>
-        <Title headingLevel="h3" size={TitleSizes.md}>
-          EmptyState small
-        </Title>
+        <EmptyStateHeader titleText="EmptyState extra small" />
       </EmptyState>
     );
     expect(asFragment()).toMatchSnapshot();
@@ -70,51 +67,47 @@ describe('EmptyState', () => {
     expect(screen.getByTestId('body-test-id')).toHaveClass('custom-empty-state-body pf-c-empty-state__body');
   });
 
-  // TODO: update this with issue #8555
-  xtest('Secondary Action', () => {
-    render(<EmptyStateSecondaryActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
-    expect(screen.getByTestId('actions-test-id')).toHaveClass(
-      'pf-c-empty-state__secondary'
+  test('Actions', () => {
+    render(<EmptyStateActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
+    expect(screen.getByTestId('actions-test-id')).toHaveClass('pf-c-empty-state__actions');
+  });
+
+  test('Full height', () => {
+    const { asFragment } = render(
+      <EmptyState isFullHeight variant={EmptyStateVariant.lg}>
+        <EmptyStateHeader titleText="EmptyState large" />
+      </EmptyState>
     );
+    expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Icon', () => {
-    render(<EmptyStateIcon icon={AddressBookIcon} data-testid="icon-test-id" />);
-    expect(screen.getByTestId('icon-test-id')).toHaveClass('pf-c-empty-state__icon');
+  test('Header with icon', () => {
+    const { asFragment } = render(<EmptyStateHeader icon={<EmptyStateIcon icon={AddressBookIcon} />} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Wrap icon in a div', () => {
-    const { container } = render(
-      <EmptyStateIcon
-        variant="container"
-        component={AddressBookIcon}
-        className="custom-empty-state-icon"
-        id="empty-state-icon-id"
-      />
-    );
+  test('Header with title text renders heading level 1 by default', () => {
+    render(<EmptyStateHeader titleText="Empty state" />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Empty state' })).toHaveClass('pf-c-empty-state__title-text');
+  });
 
-    expect(container.querySelector('div')).toHaveClass('pf-c-empty-state__icon custom-empty-state-icon');
-    expect(container.querySelector('svg')).toBeInTheDocument();
+  test('Header renders custom class passed via titleClassName', () => {
+    render(<EmptyStateHeader titleText="Empty state" titleClassName={'testTitleClassName'} />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Empty state' })).toHaveClass('testTitleClassName');
   });
 
-  // TODO: update this with issue #8555
-  xtest('Primary div', () => {
-    render(
-      <EmptyStatePrimary data-testid="primary-test-id">
-        <Button variant="link">Link</Button>
-      </EmptyStatePrimary>
-    );
-    expect(screen.getByTestId('primary-test-id')).toHaveClass('pf-c-empty-state__primary');
+  test('Header renders the title as other heading levels when one is passed using headingLevel', () => {
+    render(<EmptyStateHeader titleText="Empty state" headingLevel="h3" />);
+    expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass('pf-c-empty-state__title-text');
   });
 
-  test('Full height', () => {
-    const { asFragment } = render(
-      <EmptyState isFullHeight variant={EmptyStateVariant.large}>
-        <Title headingLevel="h3" size={TitleSizes.md}>
-          EmptyState large
-        </Title>
-      </EmptyState>
-    );
-    expect(asFragment()).toMatchSnapshot();
+  test('Headers render children', () => {
+    render(<EmptyStateHeader>Title text</EmptyStateHeader>);
+    expect(screen.getByText('Title text')).toBeVisible();
+  });
+
+  test('Footer', () => {
+    render(<EmptyStateFooter className="custom-empty-state-footer" data-testid="actions-test-id" />);
+    expect(screen.getByTestId('actions-test-id')).toHaveClass('custom-empty-state-footer');
   });
 });

package/src/components/EmptyState/__tests__/Generated/{EmptyStatePrimary.test.tsx → EmptyStateActions.test.tsx}

@@ -3,11 +3,11 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { EmptyStatePrimary } from '../../EmptyStatePrimary';
+import { EmptyStateActions } from '../../EmptyStateActions';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
 
-it('EmptyStatePrimary should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<EmptyStatePrimary className={"''"} children={<div>ReactNode</div>} />);
+it('EmptyStateActions should match snapshot (auto-generated)', () => {
+  const { asFragment } = render(<EmptyStateActions children={<>ReactNode</>} className={"''"} />);
   expect(asFragment()).toMatchSnapshot();
 });

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

@@ -6,7 +6,8 @@ import { render } from '@testing-library/react';
 import { UserIcon } from '@patternfly/react-icons';
 import { EmptyStateIcon } from '../../EmptyStateIcon';
 // any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { Spinner } from '../../../Spinner/Spinner';
+
 it('EmptyStateIcon should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
     <EmptyStateIcon
@@ -14,8 +15,6 @@ it('EmptyStateIcon should match snapshot (auto-generated)', () => {
       title={'string'}
       className={"''"}
       icon={UserIcon}
-      component={null}
-      variant={'icon'}
     />
   );
   expect(asFragment()).toMatchSnapshot();
@@ -27,9 +26,7 @@ it('EmptyStateIcon should match snapshot for variant container', () => {
       color={'string'}
       title={'string'}
       className={"''"}
-      icon={null}
-      component={() => <div>Component</div>}
-      variant={'container'}
+      icon={Spinner}
     />
   );
   expect(asFragment()).toMatchSnapshot();

package/src/components/EmptyState/__tests__/Generated/__snapshots__/{EmptyStateSecondaryActions.test.tsx.snap → EmptyStateActions.test.tsx.snap}

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EmptyStateSecondaryActions should match snapshot (auto-generated) 1`] = `
+exports[`EmptyStateActions should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="''"
+    class="pf-c-empty-state__actions ''"
   >
     ReactNode
   </div>

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>
+);