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

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -66,7 +66,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   return (
     <div className={css(styles.multipleFileUploadStatus, className)} {...props}>
       <ExpandableSection toggleContent={toggle} isExpanded={isOpen} onToggle={toggleExpandableSection}>
-        <ul className="pf-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
+        <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
           {children}
         </ul>
       </ExpandableSection>

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -48,7 +48,7 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo
@@ -119,7 +119,7 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo
@@ -180,7 +180,7 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo
@@ -239,7 +239,7 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         id=""
       >
         <ul
-          class="pf-c-multiple-file-upload__status-list"
+          class="pf-v5-c-multiple-file-upload__status-list"
           role="list"
         >
           Foo

package/src/components/Nav/NavItem.tsx

@@ -85,7 +85,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   };
 
   const onMouseOver = (event: React.MouseEvent) => {
-    const evtContainedInFlyout = (event.target as HTMLElement).closest('.pf-c-nav__item.pf-m-flyout');
+    const evtContainedInFlyout = (event.target as HTMLElement).closest(`.${styles.navItem}.pf-m-flyout`);
     if (hasFlyout && !flyoutVisible) {
       showFlyout(true);
     } else if (flyoutRef !== null && !evtContainedInFlyout) {
@@ -120,7 +120,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
 
     // We only want the NavItem to handle closing a flyout menu if only the first level flyout is open.
     // Otherwise, MenuItem should handle closing its flyouts
-    if ((key === 'Escape' || key === 'ArrowLeft') && popperRef?.current?.querySelectorAll('.pf-c-menu').length === 1) {
+    if ((key === 'Escape' || key === 'ArrowLeft') && popperRef?.current?.querySelectorAll(`.${styles.menu}`).length === 1) {
       if (flyoutVisible) {
         event.stopPropagation();
         event.preventDefault();
@@ -145,7 +145,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       if (flyoutVisible) {
         const flyoutItems = Array.from(
           (popperRef.current as HTMLElement).getElementsByTagName('UL')[0].children
-        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
+        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)));
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
         flyoutTarget.focus();

package/src/components/NotificationDrawer/NotificationDrawerList.tsx

@@ -22,7 +22,7 @@ export const NotificationDrawerList: React.FunctionComponent<NotificationDrawerL
 }: NotificationDrawerListProps) => (
   <ul
     {...props}
-    className={css('pf-c-notification-drawer__list', className)}
+    className={css('pf-v5-c-notification-drawer__list', className)}
     hidden={isHidden}
     role="list"
     aria-label={ariaLabel}

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`NotificationDrawerList drawer list with hidden applied  1`] = `
 <DocumentFragment>
   <ul
-    class="pf-c-notification-drawer__list"
+    class="pf-v5-c-notification-drawer__list"
     hidden=""
     role="list"
   />
@@ -13,7 +13,7 @@ exports[`NotificationDrawerList drawer list with hidden applied  1`] = `
 exports[`NotificationDrawerList renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <ul
-    class="pf-c-notification-drawer__list"
+    class="pf-v5-c-notification-drawer__list"
     role="list"
   />
 </DocumentFragment>

package/src/components/Page/__tests__/PageSidebarBody.test.tsx

@@ -18,7 +18,7 @@ test('Renders with children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-page__sidebar-body by default', () => {
+test('Renders with class pf-v5-c-page__sidebar-body by default', () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-page__sidebar-body');

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

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

package/src/components/Panel/__tests__/PanelFooter.test.tsx

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

package/src/components/Panel/__tests__/PanelHeader.test.tsx

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

package/src/components/Panel/__tests__/PanelMain.test.tsx

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

package/src/components/Panel/__tests__/PanelMainBody.test.tsx

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

package/src/components/Progress/__tests__/ProgressHelperText.test.tsx

@@ -17,7 +17,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-progress__helper-text on the div containing the helper text component', () => {
+test('Renders with class pf-v5-c-progress__helper-text on the div containing the helper text component', () => {
   render(<ProgressHelperText>Test</ProgressHelperText>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress__helper-text');

package/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx

@@ -23,7 +23,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-progress-stepper__step on the containing li element', () => {
+test('Renders with class pf-v5-c-progress-stepper__step on the containing li element', () => {
   render(<ProgressStep>Test</ProgressStep>);
   expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-progress-stepper__step');
 });
@@ -77,7 +77,7 @@ test('Renders the element passed via the icon prop', () => {
   expect(screen.getByText('Custom Icon')).toBeVisible();
 });
 
-test('Renders the icon element inside span element with class pf-c-progress-stepper__step-icon', () => {
+test('Renders the icon element inside span element with class pf-v5-c-progress-stepper__step-icon', () => {
   render(<ProgressStep icon="Custom Icon">Test</ProgressStep>);
   expect(screen.getByText('Custom Icon')).toHaveClass('pf-v5-c-progress-stepper__step-icon');
 });
@@ -112,12 +112,12 @@ test('Renders the element passed via the description prop', () => {
   expect(screen.getByRole('button', { name: 'Description' })).toBeVisible();
 });
 
-test('Renders the description element inside div element with class pf-c-progress-stepper__step-description', () => {
+test('Renders the description element inside div element with class pf-v5-c-progress-stepper__step-description', () => {
   render(<ProgressStep description="Description">Test</ProgressStep>);
   expect(screen.getByText('Description')).toHaveClass('pf-v5-c-progress-stepper__step-description');
 });
 
-test('Renders children inside class pf-c-progress-stepper__step-title', () => {
+test('Renders children inside class pf-v5-c-progress-stepper__step-title', () => {
   render(<ProgressStep>Test</ProgressStep>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress-stepper__step-title');
 });

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

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByRole('list')).toBeVisible();
 });
 
-test('Renders with only class name pf-c-progress-stepper by default', () => {
+test('Renders with only class name pf-v5-c-progress-stepper by default', () => {
   render(<ProgressStepper>Test</ProgressStepper>);
   expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper', { exact: true });
 });
 
-test('Renders with class name pf-c-progress-stepper', () => {
+test('Renders with class name pf-v5-c-progress-stepper', () => {
   render(<ProgressStepper>Test</ProgressStepper>);
   expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper');
 });

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

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

package/src/components/Sidebar/__tests__/SidebarContent.test.tsx

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

package/src/components/Sidebar/__tests__/SidebarPanel.test.tsx

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

package/src/components/Tabs/TabContent.tsx

@@ -62,8 +62,8 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
             hidden={children ? null : child.props.eventKey !== activeKey}
             className={
               children
-                ? css('pf-c-tab-content', className, variantStyle[variant])
-                : css('pf-c-tab-content', child.props.className, variantStyle[variant])
+                ? css(styles.tabContent, className, variantStyle[variant])
+                : css(styles.tabContent, child.props.className, variantStyle[variant])
             }
             id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
             aria-label={ariaLabel}

package/src/components/Tabs/Tabs.tsx

@@ -483,7 +483,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
                         <AngleRightIcon arian-hidden="true" />
                       </span>
                       {toggleText && (
-                        <span className={css('pf-c-tabs__toggle-text')} id={`${randomId}-text`}>
+                        <span className={css(styles.tabsToggleText)} id={`${randomId}-text`}>
                           {toggleText}
                         </span>
                       )}

package/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <section
     aria-label="string"
-    class="pf-c-tab-content string"
+    class="pf-v5-c-tab-content string"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="string"

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -74,20 +74,20 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('presentation')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class names pf-m-overflow and pf-c-tabs__item on the presentation element', () => {
+test('Renders with class names pf-m-overflow and pf-v5-c-tabs__item on the presentation element', () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('presentation')).toHaveClass('pf-m-overflow');
   expect(screen.getByRole('presentation')).toHaveClass('pf-v5-c-tabs__item');
 });
 
-test('Renders with class pf-c-tabs__link on the tab element', () => {
+test('Renders with class pf-v5-c-tabs__link on the tab element', () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('tab')).toHaveClass('pf-v5-c-tabs__link');
 });
 
-test("Renders with class pf-c-tabs__link-toggle-icon on the img element's container", () => {
+test("Renders with class pf-v5-c-tabs__link-toggle-icon on the img element's container", () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('img', { hidden: true }).parentElement).toHaveClass('pf-v5-c-tabs__link-toggle-icon');