@patternfly/react-core 5.2.0-prerelease.5 → 5.2.0-prerelease.7

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

@@ -0,0 +1,514 @@
+import React from 'react';
+import {
+  Card,
+  CardTitle,
+  CardBody,
+  CardHeader,
+  Title,
+  Accordion,
+  AccordionItem,
+  AccordionToggle,
+  AccordionContent,
+  Divider,
+  Grid,
+  GridItem,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
+import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
+export const CardWithAccordion: React.FunctionComponent = () => {
+  const [openCPU, setOpenCPU] = React.useState('cpu1');
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <Title headingLevel="h4" size="lg">
+            Hardware Monitor
+          </Title>
+        </CardTitle>
+      </CardHeader>
+      <CardBody>
+        <Accordion>
+          <AccordionItem>
+            <AccordionToggle
+              id="cpu1-toggle"
+              onClick={() => {
+                if (openCPU === 'cpu1') {
+                  setOpenCPU(null);
+                } else {
+                  setOpenCPU('cpu1');
+                }
+              }}
+              isExpanded={openCPU === 'cpu1'}
+            >
+              CPU 1
+            </AccordionToggle>
+            <AccordionContent isHidden={openCPU !== 'cpu1'}>
+              <Grid hasGutter>
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Temperature</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>64C</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU temperature"
+                          ariaTitle="Mock CPU temperature sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 100 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 25 },
+                              { name: 'Temp', x: '2', y: 40 },
+                              { name: 'Temp', x: '3', y: 20 },
+                              { name: 'Temp', x: '4', y: 60 },
+                              { name: 'Temp', x: '5', y: 20 },
+                              { name: 'Temp', x: '6', y: 41 },
+                              { name: 'Temp', x: '7', y: 45 },
+                              { name: 'Temp', x: '8', y: 41 },
+                              { name: 'Temp', x: '9', y: 62 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+                <Divider className={accessibility.hiddenOnMd} />
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Speed</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>2.3Ghz</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU speed"
+                          ariaTitle="Mock CPU speed sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 3.6 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 0.9 },
+                              { name: 'Temp', x: '2', y: 1.44 },
+                              { name: 'Temp', x: '3', y: 0.72 },
+                              { name: 'Temp', x: '4', y: 2.16 },
+                              { name: 'Temp', x: '5', y: 0.72 },
+                              { name: 'Temp', x: '6', y: 1.48 },
+                              { name: 'Temp', x: '7', y: 1.62 },
+                              { name: 'Temp', x: '8', y: 1.48 },
+                              { name: 'Temp', x: '9', y: 2.23 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+              </Grid>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionToggle
+              id="cpu2-toggle"
+              onClick={() => {
+                if (openCPU === 'cpu2') {
+                  setOpenCPU(null);
+                } else {
+                  setOpenCPU('cpu2');
+                }
+              }}
+              isExpanded={openCPU === 'cpu2'}
+            >
+              CPU 2
+            </AccordionToggle>
+            <AccordionContent isHidden={openCPU !== 'cpu2'}>
+              <Grid hasGutter>
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Temperature</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>64C</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU temperature"
+                          ariaTitle="Mock CPU temperature sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 100 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 25 },
+                              { name: 'Temp', x: '2', y: 40 },
+                              { name: 'Temp', x: '3', y: 20 },
+                              { name: 'Temp', x: '4', y: 60 },
+                              { name: 'Temp', x: '5', y: 20 },
+                              { name: 'Temp', x: '6', y: 41 },
+                              { name: 'Temp', x: '7', y: 45 },
+                              { name: 'Temp', x: '8', y: 41 },
+                              { name: 'Temp', x: '9', y: 62 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+                <Divider className={accessibility.hiddenOnMd} />
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Speed</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>2.3Ghz</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU speed"
+                          ariaTitle="Mock CPU speed sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 3.6 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 0.9 },
+                              { name: 'Temp', x: '2', y: 1.44 },
+                              { name: 'Temp', x: '3', y: 0.72 },
+                              { name: 'Temp', x: '4', y: 2.16 },
+                              { name: 'Temp', x: '5', y: 0.72 },
+                              { name: 'Temp', x: '6', y: 1.48 },
+                              { name: 'Temp', x: '7', y: 1.62 },
+                              { name: 'Temp', x: '8', y: 1.48 },
+                              { name: 'Temp', x: '9', y: 2.23 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+              </Grid>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionToggle
+              id="cpu3-toggle"
+              onClick={() => {
+                if (openCPU === 'cpu3') {
+                  setOpenCPU(null);
+                } else {
+                  setOpenCPU('cpu3');
+                }
+              }}
+              isExpanded={openCPU === 'cpu3'}
+            >
+              CPU 3
+            </AccordionToggle>
+            <AccordionContent isHidden={openCPU !== 'cpu3'}>
+              <Grid hasGutter>
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Temperature</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>64C</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU temperature"
+                          ariaTitle="Mock CPU temperature sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 100 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 25 },
+                              { name: 'Temp', x: '2', y: 40 },
+                              { name: 'Temp', x: '3', y: 20 },
+                              { name: 'Temp', x: '4', y: 60 },
+                              { name: 'Temp', x: '5', y: 20 },
+                              { name: 'Temp', x: '6', y: 41 },
+                              { name: 'Temp', x: '7', y: 45 },
+                              { name: 'Temp', x: '8', y: 41 },
+                              { name: 'Temp', x: '9', y: 62 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+                <Divider className={accessibility.hiddenOnMd} />
+                <Grid hasGutter>
+                  <GridItem md={4}>
+                    <Flex
+                      className={sizing.h_100OnMd}
+                      direction={{ md: 'column' }}
+                      spaceItems={{ md: 'spaceItemsNone' }}
+                      justifyContent={{ md: 'justifyContentCenter' }}
+                    >
+                      <FlexItem>
+                        <b>Speed</b>
+                      </FlexItem>
+                      <Divider
+                        className={accessibility.hiddenOnMd}
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
+                      <FlexItem>
+                        <span>2.3Ghz</span>
+                      </FlexItem>
+                    </Flex>
+                  </GridItem>
+                  <GridItem md={8}>
+                    <Grid hasGutter>
+                      <GridItem span={2}>
+                        <Flex
+                          direction={{ default: 'column' }}
+                          spaceItems={{ default: 'spaceItemsNone' }}
+                          alignItems={{ md: 'alignItemsFlexEnd' }}
+                        >
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
+                        </Flex>
+                      </GridItem>
+                      <GridItem span={10}>
+                        <ChartGroup
+                          ariaDesc="Mock CPU speed"
+                          ariaTitle="Mock CPU speed sparkline chart"
+                          containerComponent={
+                            <ChartVoronoiContainer
+                              labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                              constrainToVisibleArea
+                            />
+                          }
+                          height={60}
+                          maxDomain={{ y: 3.6 }}
+                          padding={0}
+                          width={400}
+                        >
+                          <ChartArea
+                            data={[
+                              { name: 'Temp', x: '1', y: 0.9 },
+                              { name: 'Temp', x: '2', y: 1.44 },
+                              { name: 'Temp', x: '3', y: 0.72 },
+                              { name: 'Temp', x: '4', y: 2.16 },
+                              { name: 'Temp', x: '5', y: 0.72 },
+                              { name: 'Temp', x: '6', y: 1.48 },
+                              { name: 'Temp', x: '7', y: 1.62 },
+                              { name: 'Temp', x: '8', y: 1.48 },
+                              { name: 'Temp', x: '9', y: 2.23 }
+                            ]}
+                          />
+                        </ChartGroup>
+                      </GridItem>
+                    </Grid>
+                  </GridItem>
+                </Grid>
+              </Grid>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </CardBody>
+    </Card>
+  );
+};

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -19,7 +19,8 @@ import {
   TextContent,
   getResizeObserver
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 export const JumpLinksWithDrawer = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
@@ -29,7 +30,7 @@ export const JumpLinksWithDrawer = () => {
   const drawerRef = React.useRef();
 
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName('pf-v5-c-masthead')[0];
+    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
     const drawerToggleSection = document.getElementById('drawer-toggle');
 
     getResizeObserver(

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -17,6 +17,7 @@ import {
   FlexItem
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 
 export const NestedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
@@ -108,7 +109,7 @@ export const NestedTabs: React.FunctionComponent = () => {
         </Card>
       </GridItem>
       <GridItem xl={4} md={6}>
-        <Flex direction={{ default: 'column' }} className="pf-v5-u-h-100">
+        <Flex direction={{ default: 'column' }} className={sizing.h_100}>
           <FlexItem flex={{ default: 'flex_1' }}>
             <Card isFullHeight>
               <CardHeader>

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -56,6 +56,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 { KeyTypes } from '../../../helpers';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 interface Repository {
@@ -191,7 +192,7 @@ export const TablesAndTabs = () => {
           </MenuToggle>
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
-          <OverflowMenuContent className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+          <OverflowMenuContent className={`${display.displayNone} ${display.displayBlockOnLg}`}>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem isPersistent>
                 <Button variant="primary">Generate</Button>

package/src/deprecated/components/ApplicationLauncher/ApplicationLauncherText.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
 
 export interface ApplicationLauncherTextProps extends React.HTMLProps<HTMLSpanElement> {
   /** content rendered inside the text container */
@@ -13,7 +14,7 @@ export const ApplicationLauncherText: React.FunctionComponent<ApplicationLaunche
   children,
   ...props
 }: ApplicationLauncherTextProps) => (
-  <span className={css('pf-v5-c-app-launcher__menu-item-text', className)} {...props}>
+  <span className={css(`${styles.appLauncherMenuItem}-text`, className)} {...props}>
     {children}
   </span>
 );

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx

@@ -6,11 +6,13 @@ import {
   ApplicationLauncherContent
 } from '@patternfly/react-core/deprecated';
 import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
+/* eslint-disable camelcase */
+import c_app_launcher__menu_item_Color from '@patternfly/react-tokens/dist/esm/c_app_launcher__menu_item_Color';
 
 const icon: JSX.Element = <img src={pfLogoSm} />;
 
 const linkStyle: React.CSSProperties = {
-  color: 'var(--pf-v5-c-app-launcher__menu-item--Color)',
+  color: c_app_launcher__menu_item_Color.var,
   textDecoration: 'none'
 };
 

package/src/deprecated/components/Select/SelectMenu.tsx

@@ -214,7 +214,7 @@ class SelectMenuWithRef extends React.Component<SelectMenuProps> {
     const variantProps = {
       ref: innerRef,
       className: css(
-        !footer ? styles.selectMenu : 'pf-v5-c-select__menu-list',
+        !footer ? styles.selectMenu : `${styles.selectMenu}-list`,
         position === SelectPosition.right && styles.modifiers.alignRight,
         className
       ),

package/src/deprecated/components/Wizard/examples/WizardFinished.tsx

@@ -12,6 +12,7 @@ import {
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface finishedProps {
   onClose: () => void;
@@ -41,7 +42,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   }, [percent]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -18,6 +18,7 @@ import {
   WizardFooter as WizardFooterDeprecated,
   WizardContextConsumer as WizardContextConsumerDeprecated
 } from '@patternfly/react-core/deprecated';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
@@ -50,7 +51,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   }, [percent]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { Flex } from '../Flex';
 import { FlexItem } from '../FlexItem';
+import layout from '@patternfly/react-styles/css/layouts/Flex/flex';
 
 describe('Flex', () => {
   test('Simple flex with single item', () => {
@@ -134,7 +135,7 @@ describe('Flex', () => {
             </Flex>
           );
 
-          const className = screen.getByTestId('test-id').className.replace('pf-v5-l-flex', '').trim();
+          const className = screen.getByTestId('test-id').className.replace(layout.flex, '').trim();
           expect(className).not.toBe("''");
           expect(className).not.toBe('');
         })