@patternfly/react-core 5.1.1 → 5.2.0-prerelease.10

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":"5.1.1-prerelease.23","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":"5.2.0-prerelease.9","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":"5.1.1-prerelease.23","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":"5.2.0-prerelease.9","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":"5.1.1-prerelease.23","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":"5.2.0-prerelease.9","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1",
+  "version": "5.2.0-prerelease.10",
   "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",
@@ -45,15 +45,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.1.1",
-    "@patternfly/react-styles": "^5.1.1",
-    "@patternfly/react-tokens": "^5.1.1",
+    "@patternfly/react-icons": "^5.2.0-prerelease.3",
+    "@patternfly/react-styles": "^5.2.0-prerelease.2",
+    "@patternfly/react-tokens": "^5.2.0-prerelease.3",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.1.0",
+    "@patternfly/patternfly": "5.2.0-prerelease.2",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -63,6 +63,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^3.21.5",
     "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-svg": "2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.7.4"
   },
@@ -70,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ea659e27a7a931ede185c25f6e7125f92b52a96b"
+  "gitHead": "89b20edb7f326ac307787b13c911500ffd18c8f0"
 }

package/src/components/AboutModal/AboutModalBoxContent.tsx

@@ -19,7 +19,7 @@ export const AboutModalBoxContent: React.FunctionComponent<AboutModalBoxContentP
   ...props
 }: AboutModalBoxContentProps) => (
   <div className={css(styles.aboutModalBoxContent)} {...props}>
-    <div className={css('pf-v5-c-about-modal-box__body')}>
+    <div className={css(`${styles.aboutModalBox}__body`)}>
       {hasNoContentContainer ? children : <div className={css(contentStyles.content)}>{children}</div>}
     </div>
     <p className={css(styles.aboutModalBoxStrapline)}>{trademark}</p>

package/src/components/AboutModal/examples/AboutModal.md

@@ -6,6 +6,7 @@ propComponents: ['AboutModal']
 ---
 import brandImg from '../../assets/brandImg.svg';
 import bgImg from '../../assets/patternfly-orb.svg';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 ## Examples
 ### Basic

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
 import brandImg from '../../assets/brandImg.svg';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -24,12 +25,12 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         hasNoContentContainer={true}
         productName="Product Name"
       >
-        <TextContent id="test1" className="pf-v5-u-py-xl">
+        <TextContent id="test1" className={spacing.pyXl}>
           <h4>About</h4>
           <p>Content here</p>
         </TextContent>
         <Alert variant="info" title="Updates available" />
-        <TextContent id="test2" className="pf-v5-u-py-xl">
+        <TextContent id="test2" className={spacing.pyXl}>
           <TextList component="dl">
             <TextListItem component="dt">CFME Version</TextListItem>
             <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>

package/src/components/Accordion/__tests__/Accordion.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { Accordion } from '../Accordion';
 import { AccordionContext } from '../AccordionContext';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 test('Renders without children', () => {
   render(<Accordion data-testid="accordion" />);
@@ -34,10 +35,10 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByText('Test')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-v5-c-accordion', () => {
+test(`Renders with class name ${styles.accordion}`, () => {
   render(<Accordion>Test</Accordion>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion');
+  expect(screen.getByText('Test')).toHaveClass(styles.accordion);
 });
 
 test('Renders with custom class names provided via prop', () => {

package/src/components/Accordion/__tests__/AccordionContent.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { AccordionContent } from '../AccordionContent';
 import { AccordionContext } from '../AccordionContext';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 jest.mock('../AccordionExpandableContentBody', () => ({
   AccordionExpandableContentBody: ({ children }) => <div aria-label="Expanded content body mock">{children}</div>
@@ -85,14 +86,14 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('heading')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-v5-c-accordion__expandable-content', () => {
+test(`Renders with class name ${styles.accordionExpandableContent}`, () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent>Test</AccordionContent>
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-accordion__expandable-content');
+  expect(screen.getByRole('heading')).toHaveClass(styles.accordionExpandableContent);
 });
 
 test('Renders with custom class names provided via prop', () => {

package/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { AccordionExpandableContentBody } from '../AccordionExpandableContentBody';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 test('Renders without children', () => {
   const { asFragment } = render(<AccordionExpandableContentBody />);
@@ -19,10 +20,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-accordion__expandable-content-body', () => {
+test(`Renders with class name ${styles.accordionExpandableContentBody}`, () => {
   render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion__expandable-content-body');
+  expect(screen.getByText('Test')).toHaveClass(styles.accordionExpandableContentBody);
 });
 
 test('Matches the snapshot', () => {

package/src/components/Accordion/__tests__/AccordionToggle.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { AccordionToggle } from '../AccordionToggle';
 import { AccordionContext } from '../AccordionContext';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
 
@@ -42,7 +43,7 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('button')).toHaveAccessibleName('Label');
 });
 
-test('Renders the accordion toggle with class pf-v5-c-accordion__toggle', () => {
+test(`Renders the accordion toggle with class ${styles.accordionToggle}`, () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -51,7 +52,7 @@ test('Renders the accordion toggle with class pf-v5-c-accordion__toggle', () =>
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByRole('button')).toHaveClass('pf-v5-c-accordion__toggle');
+  expect(screen.getByRole('button')).toHaveClass(styles.accordionToggle);
 });
 
 test('Renders the accordion toggle with custom class names provided via prop', () => {
@@ -66,7 +67,7 @@ test('Renders the accordion toggle with custom class names provided via prop', (
   expect(screen.getByRole('button')).toHaveClass('test-class');
 });
 
-test('Renders with children inside class pf-v5-c-accordion__toggle-text', () => {
+test(`Renders with children inside class ${styles.accordionToggleText}`, () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -75,10 +76,10 @@ test('Renders with children inside class pf-v5-c-accordion__toggle-text', () =>
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion__toggle-text');
+  expect(screen.getByText('Test')).toHaveClass(styles.accordionToggleText);
 });
 
-test('Renders with the toggle icon inside class pf-v5-c-accordion__toggle-icon', () => {
+test(`Renders with the toggle icon inside class ${styles.accordionToggleIcon}`, () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -87,7 +88,7 @@ test('Renders with the toggle icon inside class pf-v5-c-accordion__toggle-icon',
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByText('Icon mock')).toHaveClass('pf-v5-c-accordion__toggle-icon');
+  expect(screen.getByText('Icon mock')).toHaveClass(styles.accordionToggleIcon);
 });
 
 test('Renders with the id prop passed to the toggle', () => {

package/src/components/ActionList/ActionListItem.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
 
 export interface ActionListItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Children of the action list item */
@@ -13,7 +14,7 @@ export const ActionListItem: React.FunctionComponent<ActionListItemProps> = ({
   className = '',
   ...props
 }: ActionListItemProps) => (
-  <div className={css('pf-v5-c-action-list__item', className)} {...props}>
+  <div className={css(`${styles.actionList}__item`, className)} {...props}>
     {children}
   </div>
 );

package/src/components/ActionList/__tests__/ActionList.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ActionList } from '../ActionList';
+import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
 
 test('Renders without children', () => {
   render(<ActionList data-testid="action-list" />);
@@ -13,10 +14,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-action-list', () => {
+test(`Renders with class ${styles.actionList}`, () => {
   render(<ActionList>Test</ActionList>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list');
+  expect(screen.getByText('Test')).toHaveClass(styles.actionList);
 });
 
 test('Renders with custom class names provided via prop', () => {
@@ -25,16 +26,16 @@ test('Renders with custom class names provided via prop', () => {
   expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
-test('Does not render with class pf-m-icons by default', () => {
+test(`Does not render with class ${styles.modifiers.icons} by default`, () => {
   render(<ActionList>Test</ActionList>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-icons');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.icons);
 });
 
-test('Renders with class pf-m-icons when isIconList is true', () => {
+test(`Renders with class ${styles.modifiers.icons} when isIconList is true`, () => {
   render(<ActionList isIconList={true}>Test</ActionList>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-icons');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.icons);
 });
 
 test('Renders with inherited element props spread to the component', () => {

package/src/components/ActionList/__tests__/ActionListGroup.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ActionListGroup } from '../ActionListGroup';
+import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
 
 test('Renders without children', () => {
   render(<ActionListGroup data-testid="action-list-group" />);
@@ -13,10 +14,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-action-list__group', () => {
+test(`Renders with class ${styles.actionListGroup}`, () => {
   render(<ActionListGroup>Test</ActionListGroup>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list__group');
+  expect(screen.getByText('Test')).toHaveClass(styles.actionListGroup);
 });
 
 test('Renders with custom class names provided via prop', () => {

package/src/components/ActionList/__tests__/ActionListItem.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ActionListItem } from '../ActionListItem';
+import styles from '@patternfly/react-styles/css/components/ActionList/action-list';
 
 test('Renders without children', () => {
   render(<ActionListItem data-testid="action-list-item" />);
@@ -13,10 +14,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-action-list__item', () => {
+test(`Renders with class ${styles.actionList}__item`, () => {
   render(<ActionListItem>Test</ActionListItem>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list__item');
+  expect(screen.getByText('Test')).toHaveClass(`${styles.actionList}__item`);
 });
 
 test('Renders with custom class names provided via prop', () => {

package/src/components/Alert/__tests__/Alert.test.tsx

@@ -6,6 +6,8 @@ import { act } from 'react-dom/test-utils';
 import { Alert, AlertVariant } from '../Alert';
 import { AlertContext } from '../AlertContext';
 import { capitalize } from '../../../helpers';
+import cssAlertTitleMaxLines from '@patternfly/react-tokens/dist/esm/c_alert__title_max_lines';
+import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
 jest.mock('../AlertToggleExpandButton', () => ({
   AlertToggleExpandButton: ({ isExpanded, onToggleExpand, ...props }) => (
@@ -34,18 +36,18 @@ test('Renders without children', () => {
   expect(screen.getByTestId('container').firstChild).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-alert on the containing div', () => {
+test(`Renders with class ${styles.alert} on the containing div`, () => {
   render(
     <Alert title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
-  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-v5-c-alert');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass(styles.alert);
 });
 
-test('Renders with class pf-v5-c-alert__title on the div containing the title', () => {
+test(`Renders with class ${styles.alertTitle} on the div containing the title`, () => {
   render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByRole('heading', { name: 'Custom alert: Some title' })).toHaveClass('pf-v5-c-alert__title');
+  expect(screen.getByRole('heading', { name: 'Custom alert: Some title' })).toHaveClass(styles.alertTitle);
 });
 
 test('Renders with Custom hidden text of "Custom alert:"', () => {
@@ -199,14 +201,14 @@ test('Renders the element passed via the actionClose prop', () => {
   expect(screen.getByRole('button', { name: 'Action close' })).toBeVisible();
 });
 
-test('Renders the actionClose element inside pf-v5-c-alert__action', () => {
+test(`Renders the actionClose element inside ${styles.alertAction}`, () => {
   render(
     <Alert title="Some title" actionClose="Action close">
       Some alert
     </Alert>
   );
 
-  expect(screen.getByText('Action close')).toHaveClass('pf-v5-c-alert__action');
+  expect(screen.getByText('Action close')).toHaveClass(styles.alertAction);
 });
 
 test('Provides the actionClose element access to the title via a context', () => {
@@ -239,14 +241,14 @@ test('Renders the element passed via the actionLinks prop', () => {
   expect(screen.getByRole('button', { name: 'Action link' })).toBeVisible();
 });
 
-test('Renders the actionLinks element inside pf-v5-c-alert__action-group', () => {
+test(`Renders the actionLinks element inside ${styles.alertActionGroup}`, () => {
   render(
     <Alert title="Some title" actionLinks="Action link">
       Some alert
     </Alert>
   );
 
-  expect(screen.getByText('Action link')).toHaveClass('pf-v5-c-alert__action-group');
+  expect(screen.getByText('Action link')).toHaveClass(styles.alertActionGroup);
 });
 
 test('Renders children', () => {
@@ -255,10 +257,10 @@ test('Renders children', () => {
   expect(screen.getByText('Some alert')).toBeVisible();
 });
 
-test('Renders children inside pf-v5-c-alert__description', () => {
+test(`Renders children inside ${styles.alertDescription}`, () => {
   render(<Alert title="Some title">Some alert</Alert>);
 
-  expect(screen.getByText('Some alert')).toHaveClass('pf-v5-c-alert__description');
+  expect(screen.getByText('Some alert')).toHaveClass(styles.alertDescription);
 });
 
 test('Renders with the aria label passed via prop', () => {
@@ -578,7 +580,7 @@ test('Renders titles with the expected truncation styling when truncateTitle is
   const title = screen.getByRole('heading');
 
   expect(title).toHaveClass('pf-m-truncate');
-  expect(title).toHaveAttribute('style', '--pf-v5-c-alert__title--max-lines: 3;');
+  expect(title).toHaveAttribute('style', `${cssAlertTitleMaxLines.name}: 3;`);
 });
 
 test('Passes customIcon value to AlertIcon', () => {
@@ -609,14 +611,14 @@ test('Renders with class pf-m-expandable when isExpandable = true', () => {
   expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-expandable');
 });
 
-test('Renders AlertToggleExpandButton inside pf-v5-c-alert__toggle', () => {
+test(`Renders AlertToggleExpandButton inside ${styles.alertToggle}`, () => {
   render(
     <Alert isExpandable title="Some title">
       Some alert
     </Alert>
   );
 
-  expect(screen.getByRole('button').parentElement).toHaveClass('pf-v5-c-alert__toggle');
+  expect(screen.getByRole('button').parentElement).toHaveClass(styles.alertToggle);
 });
 
 test('Does not render with class pf-m-expanded when AlertToggleExpandButton has not been clicked', () => {

package/src/components/Alert/__tests__/AlertIcon.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { AlertIcon } from '../AlertIcon';
+import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/check-circle-icon', () => () => 'Check circle icon mock');
 jest.mock('@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon', () => () => 'Exclamation circle icon mock');
@@ -65,10 +66,10 @@ test('Renders with the passed custom icon when one is passed rather than the ico
   expect(screen.getByText('Custom icon')).toBeVisible();
 });
 
-test('Renders the icon inside class pf-v5-c-alert__icon', () => {
+test(`Renders the icon inside class ${styles.alertIcon}`, () => {
   render(<AlertIcon variant="custom" />);
 
-  expect(screen.getByText('Bell icon mock')).toHaveClass('pf-v5-c-alert__icon');
+  expect(screen.getByText('Bell icon mock')).toHaveClass(styles.alertIcon);
 });
 
 test('Renders with inherited element props spread to the component', () => {

package/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 
 import { AlertToggleExpandButton } from '../AlertToggleExpandButton';
 import { AlertContext } from '../AlertContext';
+import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
 jest.mock('../../Button');
 
@@ -108,14 +109,14 @@ test('Renders a Button with variant: ButtonVariant.plain', () => {
   expect(screen.getByText('variant: plain')).toBeVisible();
 });
 
-test('Renders with the toggle icon inside class pf-v5-c-alert__toggle-icon', () => {
+test(`Renders with the toggle icon inside class ${styles.alertToggleIcon}`, () => {
   render(
     <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
       <AlertToggleExpandButton />
     </AlertContext.Provider>
   );
 
-  expect(screen.getByText('Icon mock')).toHaveClass('pf-v5-c-alert__toggle-icon');
+  expect(screen.getByText('Icon mock')).toHaveClass(styles.alertToggleIcon);
 });
 
 test('Renders with inherited element props spread to the component', () => {