@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PageSidebarBody } from '../PageSidebarBody';
+import styles from '@patternfly/react-styles/css/components/Page/page';
 
 test('Renders without children', () => {
   render(
@@ -18,10 +19,10 @@ test('Renders with children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-page__sidebar-body by default', () => {
+test(`Renders with class ${styles.pageSidebarBody} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-page__sidebar-body');
+  expect(screen.getByText('Test')).toHaveClass(styles.pageSidebarBody);
 });
 
 test('Renders with custom class', () => {
@@ -30,40 +31,40 @@ test('Renders with custom class', () => {
   expect(screen.getByText('Test')).toHaveClass('tester');
 });
 
-test('Renders without pf-m-page-insets by default', () => {
+test(`Renders without ${styles.modifiers.pageInsets} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-page-insets');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pageInsets);
 });
 
-test('Renders with pf-m-page-insets when usePageInsets is passed', () => {
+test(`Renders with ${styles.modifiers.pageInsets} when usePageInsets is passed`, () => {
   render(<PageSidebarBody usePageInsets>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-page-insets');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pageInsets);
 });
 
-test('Renders without pf-m-fill by default', () => {
+test(`Renders without ${styles.modifiers.fill} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-fill');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.fill);
 });
 
-test('Renders with pf-m-fill when isFilled={true} is passed', () => {
+test(`Renders with ${styles.modifiers.fill} when isFilled={true} is passed`, () => {
   render(<PageSidebarBody isFilled={true}>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-fill');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fill);
 });
 
-test('Renders without pf-m-no-fill by default', () => {
+test(`Renders without ${styles.modifiers.noFill} by default`, () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).not.toHaveClass('pf-m-no-fill');
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noFill);
 });
 
-test('Renders with pf-m-no-fill when isFilled={false} is passed', () => {
+test(`Renders with ${styles.modifiers.noFill} when isFilled={false} is passed`, () => {
   render(<PageSidebarBody isFilled={false}>Test</PageSidebarBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-m-no-fill');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noFill);
 });
 
 test('Renders with additional props', () => {

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

@@ -41,21 +41,6 @@ exports[`Page Check dark page against snapshot 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -101,21 +86,6 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -265,21 +235,6 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -429,21 +384,6 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -713,21 +653,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1004,21 +929,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1180,21 +1090,6 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1360,21 +1255,6 @@ exports[`Page Check page to verify skip to content points to main content region
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1421,21 +1301,6 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1585,21 +1450,6 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1749,21 +1599,6 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1913,21 +1748,6 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -2077,21 +1897,6 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>

package/src/components/Page/examples/Page.md

@@ -17,6 +17,7 @@ propComponents:
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import './page.css';
+import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples
 

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -17,6 +17,8 @@ import {
   CardBody
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+/* eslint-disable camelcase */
+import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
@@ -67,8 +69,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
         <Card>
           <CardBody>
             When a width limited page section is wider than the value of
-            <code>--pf-v5-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main
-            section.
+            <code>{c_page_section_m_limit_width_MaxWidth.name}</code>, the section will be centered in the main section.
             <br />
             <br />
             The content in this example is placed in a card to better illustrate how the section behaves when it is

package/src/components/Page/examples/PageGroupSection.tsx

@@ -12,7 +12,6 @@ import {
   PageGroup,
   PageBreadcrumb,
   PageNavigation,
-  PageSectionVariants,
   PageToggleButton,
   Breadcrumb,
   BreadcrumbItem,
@@ -102,10 +101,10 @@ export const PageGroupSection: React.FunctionComponent = () => {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection variant={PageSectionVariants.light}>Grouped section</PageSection>
+        <PageSection>Grouped section</PageSection>
       </PageGroup>
-      <PageSection variant={PageSectionVariants.dark}>Section 1</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section 2</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageHorizontalNav.tsx

@@ -6,7 +6,6 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSection,
-  PageSectionVariants,
   Toolbar,
   ToolbarContent,
   ToolbarItem
@@ -35,9 +34,9 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
 
   return (
     <Page header={header}>
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -9,7 +9,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   PageToggleButton,
   Toolbar,
   ToolbarContent,
@@ -63,13 +62,9 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
   return (
     <Page header={header} sidebar={sidebar}>
       <PageSection>Section with default padding</PageSection>
-      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-        Section with no padding
-      </PageSection>
+      <PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
       <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
-      <PageSection variant={PageSectionVariants.light} padding={{ md: 'noPadding' }}>
-        Section with no padding on medium
-      </PageSection>
+      <PageSection padding={{ md: 'noPadding' }}>Section with no padding on medium</PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -9,7 +9,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   PageToggleButton,
   Toolbar,
   ToolbarContent,
@@ -66,9 +65,9 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   return (
     <Page header={header} sidebar={sidebar}>
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageTertiaryNav.tsx

@@ -6,7 +6,6 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSection,
-  PageSectionVariants,
   Toolbar,
   ToolbarContent,
   ToolbarItem
@@ -34,9 +33,9 @@ export const PageTertiaryNav: React.FunctionComponent = () => {
 
   return (
     <Page header={header} tertiaryNav="Navigation">
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageUncontrolledNav.tsx

@@ -9,7 +9,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   PageToggleButton,
   Toolbar,
   ToolbarContent,
@@ -50,9 +49,9 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
 
   return (
     <Page isManagedSidebar header={header} sidebar={sidebar}>
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -9,7 +9,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   PageToggleButton,
   Toolbar,
   ToolbarContent,
@@ -62,9 +61,9 @@ export const PageVerticalNav: React.FunctionComponent = () => {
 
   return (
     <Page header={header} sidebar={sidebar}>
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };

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

@@ -340,10 +340,12 @@ describe('Pagination', () => {
       'insetLg',
       'insetXl',
       'inset2xl'
-    ]).forEach(inset => {
+    ]).forEach((inset) => {
       test(`verify ${inset} inset breakpoints`, () => {
         const { asFragment } = render(
-          <Pagination inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>test</Pagination>
+          <Pagination inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>
+            test
+          </Pagination>
         );
         expect(asFragment()).toMatchSnapshot();
       });

package/src/components/Pagination/examples/PaginationSticky.tsx

@@ -27,8 +27,8 @@ export const PaginationSticky: React.FunctionComponent = () => {
   const buildCards = () => {
     const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;
 
-    return Array.apply(0, Array(numberOfCards)).map((x, i) => (
-      <GalleryItem key={i}>
+    return Array.from({ length: numberOfCards }).map((_value, index) => (
+      <GalleryItem key={index}>
         <Card>
           <CardBody>This is a card</CardBody>
         </Card>

package/src/components/Panel/PanelMain.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Panel/panel';
 import { css } from '@patternfly/react-styles';
+import cssMaxHeight from '@patternfly/react-tokens/dist/esm/c_panel__main_MaxHeight';
 
 export interface PanelMainProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the panel main div */
@@ -19,7 +20,7 @@ export const PanelMain: React.FunctionComponent<PanelMainProps> = ({
 }: PanelMainProps) => (
   <div
     className={css(styles.panelMain, className)}
-    style={{ '--pf-v5-c-panel__main--MaxHeight': maxHeight } as React.CSSProperties}
+    style={{ [cssMaxHeight.name]: maxHeight } as React.CSSProperties}
     {...props}
   >
     {children}

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

@@ -5,6 +5,7 @@ import { PanelMain } from '../PanelMain';
 import { PanelMainBody } from '../PanelMainBody';
 import userEvent from '@testing-library/user-event';
 import { useEffect } from 'react';
+import styles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -20,14 +21,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-v5-c-panel', () => {
+test(`Renders with the class ${styles.panel}`, () => {
   render(<Panel>Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel');
+  expect(screen.getByText('Test')).toHaveClass(styles.panel);
 });
 
-test('Renders with only the class pf-v5-c-panel by default', () => {
+test(`Renders with only the class ${styles.panel} by default`, () => {
   render(<Panel>Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.panel, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {
@@ -35,19 +36,19 @@ test('Renders with custom class name when className prop is passed', () => {
   expect(screen.getByText('Test')).toHaveClass('test-class');
 });
 
-test('Renders with class name pf-m-raised when variant is raised', () => {
+test(`Renders with class name ${styles.modifiers.raised} when variant is raised`, () => {
   render(<Panel variant="raised">Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-raised');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.raised);
 });
 
-test('Renders with class name pf-m-bordered when variant is bordered', () => {
+test(`Renders with class name ${styles.modifiers.bordered} when variant is bordered`, () => {
   render(<Panel variant="bordered">Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.bordered);
 });
 
-test('Renders with class name pf-m-scrollable when isScrollable is true', () => {
+test(`Renders with class name ${styles.modifiers.scrollable} when isScrollable is true`, () => {
   render(<Panel isScrollable>Test</Panel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-scrollable');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);
 });
 
 test('Renders with ref', async () => {
@@ -84,9 +85,9 @@ test('Renders with ref', async () => {
   render(<BasicPanel />);
 
   await user.click(document.body);
-  expect(screen.getByText('Last click was in panel: false')).toBeVisible;
+  expect(screen.getByText('Last click was in panel: false')).toBeVisible();
   await user.click(screen.getByText('Main content'));
-  expect(screen.getByText('Last click was in panel: true')).toBeVisible;
+  expect(screen.getByText('Last click was in panel: true')).toBeVisible();
 });
 
 test('Renders with the inherited element props spread to the component', () => {