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

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -12,7 +12,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -20,7 +19,6 @@ import {
   Badge,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -492,8 +490,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -12,13 +12,11 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
   Bullseye,
   ToolbarToggleGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -465,8 +463,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -13,12 +13,10 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
   Bullseye,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -274,8 +272,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -13,8 +13,6 @@ import {
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateVariant,
   MenuToggle,
@@ -505,12 +503,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
           </NotificationDrawerList>
         )}
         {!shouldShowNotifications && (
-          <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 alerts. There may be silenced critical alerts however.
             </EmptyStateBody>

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -13,8 +13,6 @@ import {
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateVariant,
   MenuToggle,
@@ -723,12 +721,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               onExpand={toggleThirdDrawer}
             >
               <NotificationDrawerList isHidden={!thirdDrawerGroupExpanded}>
-                <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.
@@ -744,12 +742,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
           </NotificationDrawerGroupList>
         )}
         {!shouldShowNotifications && (
-          <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 alerts. There may be silenced critical alerts however.
             </EmptyStateBody>

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -3,8 +3,6 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
   NotificationBadge,
   NotificationBadgeVariant,
   NotificationDrawer,
@@ -297,12 +295,12 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           </NotificationDrawerList>
         )}
         {notifications.length === 0 && (
-          <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateHeader
-              headingLevel="h2"
-              titleText="No notifications found"
-              icon={<EmptyStateIcon icon={SearchIcon} />}
-            />
+          <EmptyState
+            headingLevel="h2"
+            titleText="No notifications found"
+            icon={SearchIcon}
+            variant={EmptyStateVariant.full}
+          >
             <EmptyStateBody>There are currently no notifications.</EmptyStateBody>
           </EmptyState>
         )}

package/src/deprecated/components/Wizard/examples/WizardFinished.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateIcon,
   Progress,
   Button
 } from '@patternfly/react-core';
@@ -43,12 +41,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>

package/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
@@ -10,8 +9,7 @@ import {
   TextInput,
   Progress,
   Button,
-  Alert,
-  EmptyStateIcon
+  Alert
 } from '@patternfly/react-core';
 import {
   Wizard as WizardDeprecated,
@@ -52,12 +50,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>

package/src/helpers/constants.ts

@@ -10,6 +10,12 @@ import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/global_h
 import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_xl';
 import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_2xl';
 
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
 export const SIDE = { RIGHT: 'right', LEFT: 'left', BOTH: 'both', NONE: 'none' };
 
 export const KEYHANDLER_DIRECTION = { UP: 'up', DOWN: 'down', RIGHT: 'right', LEFT: 'left' };
@@ -47,3 +53,11 @@ export const globalHeightBreakpoints = {
   xl: parseInt(globalHeightBreakpointXl.value),
   '2xl': parseInt(globalHeightBreakpoint2xl.value)
 };
+
+export const statusIcons = {
+  success: CheckCircleIcon,
+  danger: ExclamationCircleIcon,
+  warning: ExclamationTriangleIcon,
+  info: InfoCircleIcon,
+  custom: BellIcon
+};

package/src/components/Avatar/examples/example.css

@@ -1,3 +0,0 @@
-#ws-react-c-avatar-bordered---dark {
-  background: var(--pf-v5-global--BackgroundColor--dark-100);
-}

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-/* eslint-disable camelcase */
-import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
-
-export const EmptyStateCustomIconColor: React.FunctionComponent = () => (
-  <EmptyState>
-    <EmptyStateHeader
-      titleText="Custom icon color"
-      headingLevel="h4"
-      icon={<EmptyStateIcon icon={CheckIcon} color={global_success_color_100.var} />}
-    />
-    <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>
-);