fix(misc): clean up demos - Timestamp date prop, icon status colors (#…

…10471) * fix(misc): pass correct date prop to Timestamp * fix(Card demos): use correct status color * fix(Card demo): add status icon color for Status Tabbed demo
patternfly · Jun 11, 2024 · 8c1d97b · 8c1d97b
1 parent d7db1e1
commit 8c1d97b
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 154 deletions.
diff --git a/packages/react-core/src/demos/CustomMenus/examples/ComposableDateSelect.tsx b/packages/react-core/src/demos/CustomMenus/examples/ComposableDateSelect.tsx
diff --git a/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx b/packages/react-core/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)}

diff --git a/packages/react-core/src/demos/examples/Card/CardEventsView.tsx b/packages/react-core/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>

diff --git a/packages/react-core/src/demos/examples/Card/CardLogView.tsx b/packages/react-core/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>

diff --git a/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx b/packages/react-core/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>
+    )
   }
 ];
 

diff --git a/packages/react-core/src/demos/examples/Card/CardUtilizationDemo3.tsx b/packages/react-core/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>

diff --git a/packages/react-table/src/components/Table/examples/TableNestedHeaders.tsx b/packages/react-table/src/components/Table/examples/TableNestedHeaders.tsx
@@ -160,8 +160,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
               <Td dataLabel={columnNames.datetime}>
                 <div>
-                  <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <Timestamp>{new Date(connection.timestamp).toLocaleTimeString()}</Timestamp>
+                  <Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -170,7 +169,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <Timestamp>({connection.source.port.protocol})</Timestamp>
+                    <small>({connection.source.port.protocol})</small>
                   </StackItem>
                 </Stack>
               </Td>
@@ -180,7 +179,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <Timestamp>({connection.destination.port.protocol})</Timestamp>
+                    <small>({connection.destination.port.protocol})</small>
                   </StackItem>
                 </Stack>
               </Td>