@patternfly/react-core 6.0.0-alpha.13 → 6.0.0-alpha.15

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

@@ -5,15 +5,12 @@ import {
   EmptyStateVariant,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateIcon
+  EmptyStateFooter
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateExtraLarge: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.xl}>
-    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+  <EmptyState variant={EmptyStateVariant.xl} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

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

@@ -5,17 +5,13 @@ import {
   EmptyStateVariant,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateHeader,
   EmptyStateFooter
 } from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateExtraSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.xs}>
-    <EmptyStateHeader titleText="Empty state" headingLevel="h4" />
-    <EmptyStateBody>
-      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>
+  <EmptyState variant={EmptyStateVariant.xs} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
+    <EmptyStateBody>This represents an the empty state pattern in PatternFly. The icon is optional.</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>
         <Button variant="link">Multiple</Button>

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

@@ -5,15 +5,12 @@ import {
   EmptyStateVariant,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateIcon
+  EmptyStateFooter
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateLarge: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.lg}>
-    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+  <EmptyState variant={EmptyStateVariant.lg} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

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

@@ -1,18 +1,9 @@
 import React from 'react';
-import {
-  Button,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateActions,
-  EmptyStateIcon
-} from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const EmptyStateNoMatchFound: React.FunctionComponent = () => (
-  <EmptyState>
-    <EmptyStateHeader titleText="No results found" headingLevel="h4" icon={<EmptyStateIcon icon={SearchIcon} />} />
+  <EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
     <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>

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

@@ -5,15 +5,12 @@ import {
   EmptyStateVariant,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateIcon
+  EmptyStateFooter
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.sm}>
-    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+  <EmptyState variant={EmptyStateVariant.sm} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

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

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

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateActions,
+  EmptyStateStatus,
+  Button
+} from '@patternfly/react-core';
+
+export const EmptyStateWithStatus: React.FunctionComponent = () => {
+  const [status, setStatus] = React.useState<EmptyStateStatus>(EmptyStateStatus.success);
+
+  const toggleStatus = () => {
+    interface StatusToggleMap {
+      [status: string]: EmptyStateStatus;
+    }
+
+    const statusToggleMap: StatusToggleMap = {
+      success: EmptyStateStatus.danger,
+      danger: EmptyStateStatus.warning,
+      warning: EmptyStateStatus.info,
+      info: EmptyStateStatus.custom,
+      custom: EmptyStateStatus.success
+    };
+
+    setStatus((prevStatus: EmptyStateStatus) => statusToggleMap[prevStatus]);
+  };
+
+  const titleMap = {
+    success: "You're all set",
+    danger: "You're not set",
+    warning: "You're probably not set",
+    info: 'You might be set',
+    custom: "You're custom"
+  };
+
+  return (
+    <EmptyState status={status} titleText={titleMap[status]} headingLevel="h4">
+      <EmptyStateBody>
+        This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible
+        enough to meet a variety of needs.
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="primary" onClick={toggleStatus}>
+            Toggle status
+          </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/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
   EmptyStateFooter,
   NotificationDrawer,
   NotificationDrawerBody,
@@ -16,7 +15,6 @@ import {
   NotificationDrawerListItemHeader,
   EmptyStateVariant,
   EmptyStateActions,
-  EmptyStateIcon,
   Dropdown,
   DropdownList,
   DropdownItem,
@@ -377,12 +375,12 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
             truncateTitle={1}
           >
             <NotificationDrawerList isHidden={!thirdGroupExpanded} aria-label="Notifications in the third group">
-              <EmptyState variant={EmptyStateVariant.full}>
-                <EmptyStateHeader
-                  headingLevel="h2"
-                  titleText="No alerts found"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                />
+              <EmptyState
+                headingLevel="h2"
+                titleText="No alerts found"
+                icon={SearchIcon}
+                variant={EmptyStateVariant.full}
+              >
                 <EmptyStateBody>
                   There are currently no critical alerts firing. There may be firing alerts of other severities or
                   silenced critical alerts however.

package/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx

@@ -4,7 +4,6 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateFooter,
-  EmptyStateHeader,
   EmptyStateVariant,
   NotificationDrawer,
   NotificationDrawerBody,
@@ -15,8 +14,7 @@ import {
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
-  EmptyStateActions,
-  EmptyStateIcon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
@@ -173,12 +171,12 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => {
               isHidden={!thirdGroupExpanded}
               aria-label="Notifications in the third lightweight group"
             >
-              <EmptyState variant={EmptyStateVariant.full}>
-                <EmptyStateHeader
-                  headingLevel="h2"
-                  titleText="No alerts found"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                />
+              <EmptyState
+                headingLevel="h2"
+                titleText="No alerts found"
+                icon={SearchIcon}
+                variant={EmptyStateVariant.full}
+              >
                 <EmptyStateBody>
                   There are currently no critical alerts firing. There may be firing alerts of other severities or
                   silenced critical alerts however.

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { MenuToggle } from '../MenuToggle';
@@ -210,7 +211,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   );
 
   return (
-    <div ref={containerRef}>
+    <div className={css(styles.paginationPageMenu)} ref={containerRef}>
       <Popper
         trigger={toggle}
         triggerRef={toggleRef}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -2,7 +2,9 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    class="pf-v5-c-pagination__page-menu"
+  >
     <button
       aria-expanded="false"
       aria-haspopup="listbox"

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

@@ -119,11 +119,6 @@ describe('Pagination', () => {
       render(<Pagination data-testid="pagination-insets" usePageInsets />);
       expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
     });
-
-    test('page insets', () => {
-      render(<Pagination data-testid="pagination-insets" usePageInsets />);
-      expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
-    });
   });
 
   describe('API', () => {

package/src/components/Pagination/__tests__/PaginationOptionsMenu.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { PaginationOptionsMenu } from '../PaginationOptionsMenu';
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
+
+jest.mock('../../../helpers/Popper/Popper');
+
+test('renders pagination options menu', () => {
+  render(
+    <div data-testid="options-menu">
+      <PaginationOptionsMenu toggleTemplate="Test" />
+    </div>
+  );
+
+  expect(screen.getByTestId('options-menu').children[0]).toBeVisible();
+});
+
+test(`renders with class ${styles.paginationPageMenu} by default`, () => {
+  render(<PaginationOptionsMenu toggleTemplate="Test" />);
+
+  // Mocked Popper is rendered with data-testid="mock-wrapper"
+  expect(screen.getByTestId('mock-wrapper').parentElement).toHaveClass(styles.paginationPageMenu);
+});