@patternfly/react-core 5.0.0-alpha.113 → 5.0.0-alpha.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.113",
+  "version": "5.0.0-alpha.114",
   "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,9 +47,9 @@
   },
   "dependencies": {
     "@patternfly/react-icons": "^5.0.0-alpha.18",
-    "@patternfly/react-styles": "^5.0.0-alpha.14",
+    "@patternfly/react-styles": "^5.0.0-alpha.15",
     "@patternfly/react-tokens": "^5.0.0-alpha.13",
-    "focus-trap": "7.4.1",
+    "focus-trap": "7.4.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "eac4934781b7f38e76d19d862f442a868ec594d2"
+  "gitHead": "e427fe71225d9ffe5bfd1fea35dc369e8af36683"
 }

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-c-about-modal-box__body')}>
+    <div className={css('pf-v5-c-about-modal-box__body')}>
       {hasNoContentContainer ? children : <div className={css(contentStyles.content)}>{children}</div>}
     </div>
     <p className={css(styles.aboutModalBoxStrapline)}>{trademark}</p>

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxContent.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`AboutModalBoxContent Test 1`] = `
     id="id"
   >
     <div
-      class="pf-c-about-modal-box__body"
+      class="pf-v5-c-about-modal-box__body"
     >
       <div
         class="pf-v5-c-content"

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

@@ -34,7 +34,7 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByText('Test')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-c-accordion', () => {
+test('Renders with class name pf-v5-c-accordion', () => {
   render(<Accordion>Test</Accordion>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion');

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

@@ -85,7 +85,7 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('heading')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-c-accordion__expandable-content', () => {
+test('Renders with class name pf-v5-c-accordion__expandable-content', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent>Test</AccordionContent>

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

@@ -19,7 +19,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-accordion__expandable-content-body', () => {
+test('Renders with class name pf-v5-c-accordion__expandable-content-body', () => {
   render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion__expandable-content-body');

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

@@ -42,7 +42,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-c-accordion__toggle', () => {
+test('Renders the accordion toggle with class pf-v5-c-accordion__toggle', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -66,7 +66,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-c-accordion__toggle-text', () => {
+test('Renders with children inside class pf-v5-c-accordion__toggle-text', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
@@ -78,7 +78,7 @@ test('Renders with children inside class pf-c-accordion__toggle-text', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-accordion__toggle-text');
 });
 
-test('Renders with the toggle icon inside class pf-c-accordion__toggle-icon', () => {
+test('Renders with the toggle icon inside class pf-v5-c-accordion__toggle-icon', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" aria-label="Accordion test">

package/src/components/ActionList/ActionListItem.tsx

@@ -13,7 +13,7 @@ export const ActionListItem: React.FunctionComponent<ActionListItemProps> = ({
   className = '',
   ...props
 }: ActionListItemProps) => (
-  <div className={css('pf-c-action-list__item', className)} {...props}>
+  <div className={css('pf-v5-c-action-list__item', className)} {...props}>
     {children}
   </div>
 );

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

@@ -13,7 +13,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-action-list', () => {
+test('Renders with class pf-v5-c-action-list', () => {
   render(<ActionList>Test</ActionList>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list');

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

@@ -13,7 +13,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-action-list__group', () => {
+test('Renders with class pf-v5-c-action-list__group', () => {
   render(<ActionListGroup>Test</ActionListGroup>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list__group');

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

@@ -13,10 +13,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-action-list__item', () => {
+test('Renders with class pf-v5-c-action-list__item', () => {
   render(<ActionListItem>Test</ActionListItem>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list__item');
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-action-list__item');
 });
 
 test('Renders with custom class names provided via prop', () => {

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-action-list__item"
+    class="pf-v5-c-action-list__item"
   >
     test
   </div>

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

@@ -34,7 +34,7 @@ test('Renders without children', () => {
   expect(screen.getByTestId('container').firstChild).toBeVisible();
 });
 
-test('Renders with class pf-c-alert on the containing div', () => {
+test('Renders with class pf-v5-c-alert on the containing div', () => {
   render(
     <Alert title="Some title" data-testid="Alert-test-id">
       Some alert
@@ -43,7 +43,7 @@ test('Renders with class pf-c-alert on the containing div', () => {
   expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-v5-c-alert');
 });
 
-test('Renders with class pf-c-alert__title on the div containing the title', () => {
+test('Renders with class pf-v5-c-alert__title 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');
 });
@@ -199,7 +199,7 @@ test('Renders the element passed via the actionClose prop', () => {
   expect(screen.getByRole('button', { name: 'Action close' })).toBeVisible();
 });
 
-test('Renders the actionClose element inside pf-c-alert__action', () => {
+test('Renders the actionClose element inside pf-v5-c-alert__action', () => {
   render(
     <Alert title="Some title" actionClose="Action close">
       Some alert
@@ -239,7 +239,7 @@ test('Renders the element passed via the actionLinks prop', () => {
   expect(screen.getByRole('button', { name: 'Action link' })).toBeVisible();
 });
 
-test('Renders the actionLinks element inside pf-c-alert__action-group', () => {
+test('Renders the actionLinks element inside pf-v5-c-alert__action-group', () => {
   render(
     <Alert title="Some title" actionLinks="Action link">
       Some alert
@@ -255,7 +255,7 @@ test('Renders children', () => {
   expect(screen.getByText('Some alert')).toBeVisible();
 });
 
-test('Renders children inside pf-c-alert__description', () => {
+test('Renders children inside pf-v5-c-alert__description', () => {
   render(<Alert title="Some title">Some alert</Alert>);
 
   expect(screen.getByText('Some alert')).toHaveClass('pf-v5-c-alert__description');
@@ -609,7 +609,7 @@ 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-c-alert__toggle', () => {
+test('Renders AlertToggleExpandButton inside pf-v5-c-alert__toggle', () => {
   render(
     <Alert isExpandable title="Some title">
       Some alert

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

@@ -65,7 +65,7 @@ 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-c-alert__icon', () => {
+test('Renders the icon inside class pf-v5-c-alert__icon', () => {
   render(<AlertIcon variant="custom" />);
 
   expect(screen.getByText('Bell icon mock')).toHaveClass('pf-v5-c-alert__icon');

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

@@ -108,7 +108,7 @@ test('Renders a Button with variant: ButtonVariant.plain', () => {
   expect(screen.getByText('variant: plain')).toBeVisible();
 });
 
-test('Renders with the toggle icon inside class pf-c-alert__toggle-icon', () => {
+test('Renders with the toggle icon inside class pf-v5-c-alert__toggle-icon', () => {
   render(
     <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
       <AlertToggleExpandButton />

package/src/components/Alert/examples/AlertDynamicLiveRegion.tsx

@@ -10,7 +10,7 @@ interface AlertInfo {
 export const DynamicLiveRegionAlert: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<AlertInfo[]>([]);
   const getUniqueId: () => number = () => new Date().getTime();
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const addAlert = (alertInfo: AlertInfo) => {
     setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]);

package/src/components/Alert/examples/AlertGroupAsync.tsx

@@ -14,7 +14,7 @@ export const AlertGroupAsync: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
   const [isRunning, setIsRunning] = React.useState(false);
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

package/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx

@@ -20,7 +20,7 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
     setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();
 

package/src/components/Alert/examples/AlertGroupSingularDynamic.tsx

@@ -20,7 +20,7 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
     setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

package/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx

@@ -34,7 +34,7 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
     setOverflowMessage(getOverflowMessage(newAlerts.length));
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

package/src/components/Alert/examples/AlertGroupToast.tsx

@@ -20,7 +20,7 @@ export const AlertGroupToast: React.FunctionComponent = () => {
     setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

package/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx

@@ -34,7 +34,7 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
     setOverflowMessage(getOverflowMessage(newAlerts.length));
   };
 
-  const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+  const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const getUniqueId = () => new Date().getTime();
 

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

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-c-backdrop', () => {
+test('Renders with the pf-v5-c-backdrop', () => {
   render(<Backdrop>Test</Backdrop>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop');
 });
 
-test('Renders with only the class pf-c-backdrop by default', () => {
+test('Renders with only the class pf-v5-c-backdrop by default', () => {
   render(<Backdrop>Test</Backdrop>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop', { exact: true });
 });

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

@@ -16,7 +16,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-badge', () => {
+test('Renders with class name pf-v5-c-badge', () => {
   render(<Badge>Test</Badge>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-badge');
 });

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

@@ -16,7 +16,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-banner', () => {
+test('Renders with class name pf-v5-c-banner', () => {
   render(<Banner>Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-banner');
 });

package/src/components/Brand/Brand.tsx

@@ -56,7 +56,7 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   }
 
   return (
-    /** the brand component currently contains no styling the 'pf-c-brand' string will be used for the className */
+    /** the brand component currently contains no styling the 'pf-v5-c-brand' string will be used for the className */
     children !== undefined ? (
       <picture
         className={css(styles.brand, styles.modifiers.picture, className)}

package/src/components/CodeBlock/CodeBlockAction.tsx

@@ -13,7 +13,7 @@ export const CodeBlockAction: React.FunctionComponent<CodeBlockActionProps> = ({
   className,
   ...props
 }: CodeBlockActionProps) => (
-  <div className={css('pf-c-code-block__actions-item', className)} {...props}>
+  <div className={css('pf-v5-c-code-block__actions-item', className)} {...props}>
     {children}
   </div>
 );

package/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`CodeBlock with components renders successfully 1`] = `
         class="pf-v5-c-code-block__actions"
       >
         <div
-          class="pf-c-code-block__actions-item"
+          class="pf-v5-c-code-block__actions-item"
         >
           button
         </div>
@@ -53,7 +53,7 @@ exports[`CodeBlock with components renders successfully 1`] = `
 exports[`CodeBlockAction renders successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-code-block__actions-item"
+    class="pf-v5-c-code-block__actions-item"
   >
     action
   </div>

package/src/components/DescriptionList/DescriptionListDescription.tsx

@@ -15,7 +15,7 @@ export const DescriptionListDescription: React.FunctionComponent<DescriptionList
   ...props
 }: DescriptionListDescriptionProps) => (
   <dd className={css(styles.descriptionListDescription, className)} {...props}>
-    <div className={'pf-c-description-list__text'}>{children}</div>
+    <div className={css(styles.descriptionListText)}>{children}</div>
   </dd>
 );
 DescriptionListDescription.displayName = 'DescriptionListDescription';

package/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap

@@ -72,7 +72,7 @@ exports[`Description List Description 1`] = `
     class="pf-v5-c-description-list__description custom-description-list-description"
   >
     <div
-      class="pf-c-description-list__text"
+      class="pf-v5-c-description-list__text"
     >
       test
     </div>

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -40,7 +40,7 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
   const privateRef = React.useRef(null);
   const ref = innerRef || privateRef;
   return (
-    <div className={css('pf-c-dual-list-selector__controls-item', className)} {...props}>
+    <div className={css('pf-v5-c-dual-list-selector__controls-item', className)} {...props}>
       <Button
         isDisabled={isDisabled}
         aria-disabled={isDisabled}

package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -30,9 +30,9 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !wrapperRef.current ||
-      (wrapperRef.current !== (event.target as HTMLElement).closest('.pf-c-dual-list-selector__controls') &&
-        !Array.from(wrapperRef.current.getElementsByClassName('pf-v5-c-dual-list-selector__controls')).includes(
-          (event.target as HTMLElement).closest('.pf-c-dual-list-selector__controls')
+      (wrapperRef.current !== (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`) &&
+        !Array.from(wrapperRef.current.getElementsByClassName(styles.dualListSelectorControls)).includes(
+          (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`)
         ))
     ) {
       return;

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -51,9 +51,9 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !menuRef.current ||
-      (menuRef.current !== (event.target as HTMLElement).closest('.pf-c-dual-list-selector__menu') &&
-        !Array.from(menuRef.current.getElementsByClassName('pf-v5-c-dual-list-selector__menu')).includes(
-          (event.target as HTMLElement).closest('.pf-c-dual-list-selector__menu')
+      (menuRef.current !== (event.target as HTMLElement).closest(`.${styles.dualListSelectorMenu}`) &&
+        !Array.from(menuRef.current.getElementsByClassName(styles.dualListSelectorMenu)).includes(
+          (event.target as HTMLElement).closest(`.${styles.dualListSelectorMenu}`)
         ))
     ) {
       return;
@@ -62,7 +62,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     const validOptions = isTree
       ? (Array.from(
           menuRef.current.querySelectorAll(
-            '.pf-c-dual-list-selector__item-toggle, .pf-c-dual-list-selector__item-check > input'
+            `.${styles.dualListSelectorItemToggle}, .${styles.dualListSelectorItemCheck} > input`
           )
         ) as Element[])
       : (Array.from(menuRef.current.getElementsByTagName('LI')) as Element[]).filter(
@@ -74,14 +74,14 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
       validOptions,
       (element: Element) => activeElement.contains(element),
       (element: Element) => {
-        if (element.classList.contains('.pf-c-dual-list-selector__list-item')) {
+        if (element.classList.contains(`.${styles.dualListSelectorListItem}`)) {
           setFocusedOption(element.id);
         } else {
-          setFocusedOption(element.closest('.pf-c-dual-list-selector__list-item').id);
+          setFocusedOption(element.closest(`.${styles.dualListSelectorListItem}`).id);
         }
         return element;
       },
-      ['.pf-c-dual-list-selector__item-toggle', '.pf-c-dual-list-selector__item-check > input'],
+      [`.${styles.dualListSelectorItemToggle}`, `.${styles.dualListSelectorItemCheck} > input`],
       undefined,
       false,
       false,

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -151,7 +151,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
     >
       {title && (
         <div className={css(styles.dualListSelectorHeader)}>
-          <div className="pf-c-dual-list-selector__title">
+          <div className="pf-v5-c-dual-list-selector__title">
             <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
           </div>
         </div>