@patternfly/react-core 5.2.0-prerelease.2 → 5.2.0-prerelease.21

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(