@patternfly/react-core 6.0.0-alpha.66 → 6.0.0-alpha.67

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.65","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.66","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.65","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.66","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.65","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.66","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.66",
+  "version": "6.0.0-alpha.67",
   "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",
@@ -65,5 +65,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d7db1e1e0a2d23d6f755f2ffd5722e7cc8b5c661"
+  "gitHead": "d9e64b4ebcc17b91ea3ea8a1e3f8b60e901d496b"
 }

package/src/demos/CustomMenus/examples/DateSelectDemo.tsx

@@ -36,27 +36,39 @@ export const DateSelectDemo: React.FunctionComponent = () => {
     3: 'Last 14 days '
   };
 
+  const getDateNDaysBefore = (date: Date, days: number) => new Date(new Date().setDate(date.getDate() - days));
+
+  const dates = {
+    0: date,
+    1: getDateNDaysBefore(date, 1),
+    2: getDateNDaysBefore(date, 7),
+    3: getDateNDaysBefore(date, 14)
+  };
+
   const dateText = {
-    0: <Timestamp>({dateString(date)})</Timestamp>,
-    1: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
-      </Timestamp>
-    ),
+    0: <Timestamp date={dates[0]}>({dateString(dates[0])})</Timestamp>,
+    1: <Timestamp date={dates[1]}>({dateString(dates[1])})</Timestamp>,
     2: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
-      </Timestamp>
+      <>
+        <Timestamp date={dates[2]}>
+          ({dateString(dates[2])}
+          &nbsp;-&nbsp;
+        </Timestamp>
+        <Timestamp date={date}>{dateString(date)})</Timestamp>
+      </>
     ),
     3: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
-      </Timestamp>
+      <>
+        <Timestamp date={dates[3]}>
+          ({dateString(dates[3])}
+          &nbsp;-&nbsp;
+        </Timestamp>
+        <Timestamp date={date}>{dateString(date)})</Timestamp>
+      </>
     )
   };
 
   return (
-    // eslint-disable-next-line no-console
     <Select
       isOpen={isOpen}
       onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/demos/examples/Card/CardEventsView.tsx

@@ -14,6 +14,7 @@ import {
   Flex,
   FlexItem,
   Gallery,
+  Icon,
   MenuToggle,
   Select,
   SelectList,
@@ -39,7 +40,7 @@ export const CardEventsView: React.FunctionComponent = () => {
         Error
       </SelectOption>
       <SelectOption value="Warning" key="option3">
-        Error
+        Warning
       </SelectOption>
     </SelectList>
   );
@@ -76,7 +77,9 @@ export const CardEventsView: React.FunctionComponent = () => {
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <ExclamationCircleIcon aria-hidden="true" />
+                      <Icon status="danger">
+                        <ExclamationCircleIcon aria-hidden="true" />
+                      </Icon>
                     </FlexItem>
                     <FlexItem>
                       <span>Readiness probe failed</span>
@@ -88,14 +91,16 @@ export const CardEventsView: React.FunctionComponent = () => {
                   connection refused
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:02 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:02')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <CheckCircleIcon aria-hidden="true" />
+                      <Icon status="success">
+                        <CheckCircleIcon aria-hidden="true" />
+                      </Icon>
                     </FlexItem>
                     <FlexItem>
                       <span>Successful assignment</span>
@@ -106,7 +111,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   Successfully assigned default/example to ip-10-0-130-149.ec2.internal
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:13 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:13')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
@@ -122,14 +127,16 @@ export const CardEventsView: React.FunctionComponent = () => {
                 </DescriptionListTerm>
                 <DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:59 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:59')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <CheckCircleIcon aria-hidden="true" />
+                      <Icon status="success">
+                        <CheckCircleIcon aria-hidden="true" />
+                      </Icon>
                     </FlexItem>
                     <FlexItem>
                       <span>Created container</span>
@@ -138,7 +145,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                 </DescriptionListTerm>
                 <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:45 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:45')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>

package/src/demos/examples/Card/CardLogView.tsx

@@ -79,7 +79,7 @@ export const CardLogView: React.FunctionComponent = () => {
                   connection refused
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:02 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:02')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
@@ -88,21 +88,21 @@ export const CardLogView: React.FunctionComponent = () => {
                   Successfully assigned default/example to ip-10-0-130-149.ec2.internal
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:13 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:13')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Pulling image</DescriptionListTerm>
                 <DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:59 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:59')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Created container</DescriptionListTerm>
                 <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:45 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:45')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>

package/src/demos/examples/Card/CardStatusTabbed.tsx

@@ -9,6 +9,7 @@ import {
   DescriptionListTerm,
   Flex,
   FlexItem,
+  Icon,
   Tab,
   TabContent,
   Tabs,
@@ -23,25 +24,41 @@ const descriptionListData = [
     status: 'Running',
     resourceName: 'Resource name that is long and can wrap',
     detail: '121 Systems',
-    icon: <CheckCircleIcon />
+    icon: (
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>
+    )
   },
   {
-    status: 'Ready',
+    status: 'Failed',
     resourceName: 'Resource name that is long and can wrap',
     detail: '123 Systems',
-    icon: <ExclamationCircleIcon />
+    icon: (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    )
   },
   {
     status: 'Running',
     resourceName: 'Resource name that is long and can wrap',
     detail: '122 Systems',
-    icon: <CheckCircleIcon />
+    icon: (
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>
+    )
   },
   {
-    status: 'Ready',
+    status: 'Failed',
     resourceName: 'Resource name that is long and can wrap',
     detail: '124 Systems',
-    icon: <ExclamationCircleIcon />
+    icon: (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    )
   }
 ];
 

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -15,7 +15,8 @@ import {
   SelectList,
   SelectOption,
   MenuToggle,
-  MenuToggleElement
+  MenuToggleElement,
+  Icon
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
@@ -79,7 +80,9 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                   <span>System</span>
                 </FlexItem>
                 <Flex>
-                  <ExclamationCircleIcon aria-hidden />
+                  <Icon status="danger">
+                    <ExclamationCircleIcon aria-hidden />
+                  </Icon>
                   <a href="#">25 incidents detected</a>
                 </Flex>
                 <FlexItem>

package/src/demos/CustomMenus/examples/ComposableDateSelect.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper, Timestamp } from '@patternfly/react-core';
-
-export const ComposableSimpleDropdown: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<number>(0);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-
-  const handleMenuKeys = (event: KeyboardEvent) => {
-    if (!isOpen) {
-      return;
-    }
-    if (menuRef?.current?.contains(event.target as Node) || toggleRef?.current?.contains(event.target as Node)) {
-      if (event.key === 'Escape' || event.key === 'Tab') {
-        setIsOpen(!isOpen);
-        toggleRef?.current?.focus();
-      }
-    }
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef?.current?.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
-    };
-  }, [isOpen, menuRef]);
-
-  const onToggleClick = (ev: React.MouseEvent) => {
-    ev.stopPropagation(); // Stop handleClickOutside from handling
-    setTimeout(() => {
-      if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
-    setIsOpen(!isOpen);
-  };
-
-  const monthStrings = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ];
-
-  const dateString = (date: Date) => `${monthStrings[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
-
-  const date = new Date();
-
-  const toggleText = {
-    0: 'Today ',
-    1: 'Yesterday ',
-    2: 'Last 7 days ',
-    3: 'Last 14 days '
-  };
-
-  const dateText = {
-    0: <Timestamp>({dateString(date)})</Timestamp>,
-    1: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
-      </Timestamp>
-    ),
-    2: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
-      </Timestamp>
-    ),
-    3: (
-      <Timestamp>
-        ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
-      </Timestamp>
-    )
-  };
-
-  const toggle = (
-    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ minWidth: '250px' }}>
-      <span style={{ verticalAlign: 'middle', marginRight: '8px' }}>{toggleText[selected]}</span>
-      {dateText[selected]}
-    </MenuToggle>
-  );
-  const menu = (
-    // eslint-disable-next-line no-console
-    <Menu ref={menuRef} onSelect={(_ev, itemId) => setSelected(itemId as number)} selected={selected}>
-      <MenuContent>
-        <MenuList>
-          <MenuItem itemId={0}>Today</MenuItem>
-          <MenuItem itemId={1}>Yesterday</MenuItem>
-          <MenuItem itemId={2}>Last 7 days</MenuItem>
-          <MenuItem itemId={3}>Last 14 days</MenuItem>
-        </MenuList>
-      </MenuContent>
-    </Menu>
-  );
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
-};