@patternfly/react-core 5.2.0-prerelease.1 → 5.2.0-prerelease.11

package/src/demos/{Card/Card.md → CardView/CardView.md}

@@ -16,7 +16,7 @@ import swaggerIcon from '../assets/camel-swagger-java_200x150.png';
 import azureIcon from '../assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from '../assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 ## Demos
 

package/src/demos/{Card → CardView}/examples/CardView.tsx

@@ -52,7 +52,7 @@ import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 export const CardViewBasic: React.FunctionComponent = () => {
   const totalItemCount = 10;

package/src/demos/CustomMenus/CustomMenus.md

@@ -24,6 +24,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import avatarImg from '../assets/avatarImg.svg';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
+import text from '@patternfly/react-styles/css/utilities/Text/text';
 
 ## Examples
 

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

@@ -1,5 +1,6 @@
 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';
 
 export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -72,19 +73,19 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   };
 
   const dateText = {
-    0: <small className="pf-v5-u-color-200">({dateString(date)})</small>,
+    0: <small className={text.color_200}>({dateString(date)})</small>,
     1: (
-      <small className="pf-v5-u-color-200">
+      <small className={text.color_200}>
         ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
       </small>
     ),
     2: (
-      <small className="pf-v5-u-color-200">
+      <small className={text.color_200}>
         ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
       </small>
     ),
     3: (
-      <small className="pf-v5-u-color-200">
+      <small className={text.color_200}>
         ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
       </small>
     )

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

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

package/src/demos/JumpLinks.md

@@ -3,6 +3,8 @@ id: Jump links
 section: components
 ---
 
+import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
+
 ## Demos
 
 JumpLinks has a scrollspy built-in to make your implementation easier. When implementing JumpLinks be sure to:
@@ -32,6 +34,7 @@ import {
   getResizeObserver
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 ScrollspyH2 = () => {
   const headings = [1, 2, 3, 4, 5];
@@ -41,7 +44,7 @@ ScrollspyH2 = () => {
 
   // Update offset based on the masthead and jump links nav heights.
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName('pf-v5-c-masthead')[0];
+    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
     const offsetForPadding = 10;
 
     getResizeObserver(

package/src/demos/PasswordStrength.md

@@ -7,6 +7,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-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 CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Demos
 

package/src/demos/PrimaryDetail.md

@@ -23,7 +23,7 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 ## Demos
 
@@ -89,7 +89,7 @@ import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 class PrimaryDetailCardView extends React.Component {
   constructor(props) {

package/src/demos/ProgressDemo.md

@@ -14,7 +14,7 @@ import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 ProgressStepperDemo = () => {
   const [currentValue, setCurrentValue] = React.useState(0);
 
-  const onProgressUpdate = nextValue => {
+  const onProgressUpdate = (nextValue) => {
     setCurrentValue(nextValue);
   };
 
@@ -52,7 +52,7 @@ import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 ProgressStepperDemo = () => {
   const [currentValue, setCurrentValue] = React.useState(0);
 
-  const onProgressUpdate = nextValue => {
+  const onProgressUpdate = (nextValue) => {
     if (nextValue > currentValue) {
       setCurrentValue(nextValue);
     }

package/src/demos/Tabs.md

@@ -11,6 +11,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 ## Demos
 
@@ -41,8 +42,10 @@ import {
 } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
+
 TabsOpenDemo = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
 
@@ -66,7 +69,7 @@ TabsOpenDemo = () => {
   const tabContent = (
     <Flex direction={{ default: 'column' }}>
       <FlexItem spacer={{ default: 'spacerLg' }}>
-        <Title headingLevel="h2" size="lg" className="pf-v5-u-mt-sm" id="open-tabs-example-tabs-list-details-title">
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
           Pod details
         </Title>
       </FlexItem>
@@ -231,6 +234,7 @@ import {
 } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 TabsOpenWithSecondaryTabsDemo = () => {
@@ -262,7 +266,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
   const tabContent = (
     <Flex direction={{ default: 'column' }}>
       <FlexItem spacer={{ default: 'spacerLg' }}>
-        <Title headingLevel="h2" size="lg" className="pf-v5-u-mt-sm" id="open-tabs-example-tabs-list-details-title">
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
           Pod details
         </Title>
       </FlexItem>