@patternfly/react-core 6.0.0-alpha.49 → 6.0.0-alpha.50

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.48","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.49","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.48","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.49","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.48","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.49","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.49",
+  "version": "6.0.0-alpha.50",
   "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.18",
-    "@patternfly/react-styles": "^6.0.0-alpha.18",
-    "@patternfly/react-tokens": "^6.0.0-alpha.18",
+    "@patternfly/react-icons": "^6.0.0-alpha.19",
+    "@patternfly/react-styles": "^6.0.0-alpha.19",
+    "@patternfly/react-tokens": "^6.0.0-alpha.19",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.107",
+    "@patternfly/patternfly": "6.0.0-alpha.117",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "7ef53d89f6130ae4c15364059920a230c3d8d8d3"
+  "gitHead": "ef6f95d064bfbb8f5aaa134ab6941f63ccf36111"
 }

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
-import text from '@patternfly/react-styles/css/utilities/Text/text';
+import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper, Timestamp } from '@patternfly/react-core';
 
 export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -73,21 +72,21 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   };
 
   const dateText = {
-    0: <small className={text.color_200}>({dateString(date)})</small>,
+    0: <Timestamp>({dateString(date)})</Timestamp>,
     1: (
-      <small className={text.color_200}>
+      <Timestamp>
         ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
-      </small>
+      </Timestamp>
     ),
     2: (
-      <small className={text.color_200}>
+      <Timestamp>
         ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
-      </small>
+      </Timestamp>
     ),
     3: (
-      <small className={text.color_200}>
+      <Timestamp>
         ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
-      </small>
+      </Timestamp>
     )
   };
 

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
-import text from '@patternfly/react-styles/css/utilities/Text/text';
+import { MenuToggle, Select, SelectList, SelectOption, Timestamp } from '@patternfly/react-core';
 
 export const DateSelectDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -38,21 +37,21 @@ export const DateSelectDemo: React.FunctionComponent = () => {
   };
 
   const dateText = {
-    0: <small className={text.color_200}>({dateString(date)})</small>,
+    0: <Timestamp>({dateString(date)})</Timestamp>,
     1: (
-      <small className={text.color_200}>
+      <Timestamp>
         ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
-      </small>
+      </Timestamp>
     ),
     2: (
-      <small className={text.color_200}>
+      <Timestamp>
         ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
-      </small>
+      </Timestamp>
     ),
     3: (
-      <small className={text.color_200}>
+      <Timestamp>
         ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
-      </small>
+      </Timestamp>
     )
   };
 

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

@@ -6,25 +6,25 @@ import {
   CardTitle,
   CardBody,
   CardFooter,
-  Gallery,
-  Flex,
-  FlexItem,
-  Title,
   DescriptionList,
   DescriptionListGroup,
   DescriptionListTerm,
   DescriptionListDescription,
-  Spinner,
+  Divider,
+  Flex,
+  FlexItem,
+  Gallery,
+  MenuToggle,
   Select,
   SelectList,
   SelectOption,
-  Divider,
-  MenuToggle
+  Spinner,
+  Timestamp,
+  Title
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
-import text from '@patternfly/react-styles/css/utilities/Text/text';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 export const CardEventsView: React.FunctionComponent = () => {
@@ -76,7 +76,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <ExclamationCircleIcon className={text.dangerColor_100} aria-hidden="true" />
+                      <ExclamationCircleIcon aria-hidden="true" />
                     </FlexItem>
                     <FlexItem>
                       <span>Readiness probe failed</span>
@@ -88,14 +88,14 @@ export const CardEventsView: React.FunctionComponent = () => {
                   connection refused
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:02 am</time>
+                  <Timestamp> Jun 17, 11:02 am </Timestamp>
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <CheckCircleIcon className={text.successColor_100} aria-hidden="true" />
+                      <CheckCircleIcon aria-hidden="true" />
                     </FlexItem>
                     <FlexItem>
                       <span>Successful assignment</span>
@@ -106,7 +106,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   Successfully assigned default/example to ip-10-0-130-149.ec2.internal
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:13 am</time>
+                  <Timestamp> Jun 17, 11:13 am </Timestamp>
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
@@ -122,14 +122,14 @@ export const CardEventsView: React.FunctionComponent = () => {
                 </DescriptionListTerm>
                 <DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:59 am</time>
+                  <Timestamp> Jun 17, 10:59 am </Timestamp>
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <CheckCircleIcon className={text.successColor_100} aria-hidden="true" />
+                      <CheckCircleIcon aria-hidden="true" />
                     </FlexItem>
                     <FlexItem>
                       <span>Created container</span>
@@ -138,7 +138,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                 </DescriptionListTerm>
                 <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:45 am</time>
+                  <Timestamp> Jun 17, 10:45 am </Timestamp>
                 </DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>

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

@@ -6,20 +6,20 @@ import {
   CardTitle,
   CardBody,
   CardFooter,
-  Gallery,
-  Title,
   DescriptionList,
   DescriptionListGroup,
   DescriptionListTerm,
   DescriptionListDescription,
+  Divider,
+  Gallery,
+  MenuToggle,
+  MenuToggleElement,
   Select,
   SelectList,
   SelectOption,
-  Divider,
-  MenuToggle,
-  MenuToggleElement
+  Timestamp,
+  Title
 } from '@patternfly/react-core';
-import text from '@patternfly/react-styles/css/utilities/Text/text';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
@@ -79,7 +79,7 @@ export const CardLogView: React.FunctionComponent = () => {
                   connection refused
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:02 am</time>
+                  <Timestamp> Jun 17, 11:02 am </Timestamp>
                 </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>
-                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 11:13 am</time>
+                  <Timestamp> Jun 17, 11:13 am </Timestamp>
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Pulling image</DescriptionListTerm>
                 <DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:59 am</time>
+                  <Timestamp> Jun 17, 10:59 am </Timestamp>
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Created container</DescriptionListTerm>
                 <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <time className={`${text.color_200} ${text.fontSizeSm}`}>Jun 17, 10:45 am</time>
+                  <Timestamp> Jun 17, 10:45 am </Timestamp>
                 </DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>

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

@@ -16,7 +16,6 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
-import text from '@patternfly/react-styles/css/utilities/Text/text';
 
 export const CardTrendDemo1: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -69,7 +68,7 @@ export const CardTrendDemo1: React.FunctionComponent = () => {
                   </CardTitle>
                 </FlexItem>
                 <FlexItem>
-                  <span className={text.color_200}>Workload</span>
+                  <span>Workload</span>
                 </FlexItem>
               </Flex>
             </CardHeader>

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

@@ -11,7 +11,6 @@ import {
   FlexItem
 } from '@patternfly/react-core';
 import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
-import text from '@patternfly/react-styles/css/utilities/Text/text';
 
 export const CardTrendDemo2: React.FunctionComponent = () => (
   <Gallery hasGutter minWidths={{ default: '360px' }}>
@@ -29,7 +28,7 @@ export const CardTrendDemo2: React.FunctionComponent = () => (
                   </CardTitle>
                 </FlexItem>
                 <FlexItem>
-                  <span className={text.color_200}>Storage capacity</span>
+                  <span>Storage capacity</span>
                 </FlexItem>
               </Flex>
             </FlexItem>

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

@@ -24,7 +24,6 @@ import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
 import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
-import text from '@patternfly/react-styles/css/utilities/Text/text';
 
 export const CardUtilizationDemo3: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -80,7 +79,7 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                   <span>System</span>
                 </FlexItem>
                 <Flex>
-                  <ExclamationCircleIcon className={text.dangerColor_100} aria-hidden />
+                  <ExclamationCircleIcon aria-hidden />
                   <a href="#">25 incidents detected</a>
                 </Flex>
                 <FlexItem>