@patternfly/react-core 5.2.0-prerelease.9 → 6.0.0-alpha.10

package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx

@@ -13,7 +13,7 @@ describe('NotificationDrawerListItemHeader', () => {
   });
 
   test('renders with correct heading level', () => {
-    const { asFragment } = render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly" headingLevel="h3"/>);
+    const { asFragment } = render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly" headingLevel="h3" />);
     expect(asFragment()).toMatchSnapshot();
   });
 

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

@@ -15,6 +15,7 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread
@@ -38,6 +39,7 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread alerts

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

@@ -5,6 +5,12 @@ exports[`NotificationDrawerListItem renders with PatternFly Core styles 1`] = `
   <li
     class="pf-v5-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
     tabindex="0"
-  />
+  >
+    <span
+      class="pf-v5-screen-reader"
+    >
+      unread
+    </span>
+  </li>
 </DocumentFragment>
 `;

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

@@ -69,7 +69,6 @@ describe('numberInput', () => {
       <NumberInput
         value={5}
         onMinus={jest.fn()}
-        inputProps={{ 'aria-describedby': '' }}
         minusBtnProps={{ id: 'minus-id' }}
         onPlus={jest.fn()}
         plusBtnProps={{ id: 'plus-id' }}
@@ -213,13 +212,13 @@ describe('numberInput', () => {
     expect(input).toHaveDisplayValue('');
   });
 
-  test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', () => {
+  test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', async () => {
     const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const NumberInputWrapper = () => {
       const [value, setValue] = React.useState(0);
-      const onChange = event => setValue(event.currentTarget.value);
-      const inputProps = { onChange: onChange };
+      const onChange = (event) => setValue(event.currentTarget.value);
+      const inputProps = { onChange };
 
       return <NumberInput value={value} onChange={onChange} inputProps={{ ...inputProps }} />;
     };
@@ -227,20 +226,20 @@ describe('numberInput', () => {
     render(<NumberInputWrapper />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '0');
+    await userEvent.type(input, '0');
 
     expect(consoleSpy).not.toHaveBeenCalled();
   });
 
   test('input is read only if onChange not passed ', () => {
-    render(<NumberInput inputAriaLabel="readonly input" value={5}/>);
+    render(<NumberInput inputAriaLabel="readonly input" value={5} />);
     const input = screen.getByLabelText('readonly input');
     expect(input).toHaveAttribute('readOnly');
   });
 
   test('input is not read only if onChange passed ', () => {
     const onChangeMock = jest.fn();
-    render(<NumberInput inputAriaLabel="not readonly input" value={5} onChange={onChangeMock}/>);
+    render(<NumberInput inputAriaLabel="not readonly input" value={5} onChange={onChangeMock} />);
     const input = screen.getByLabelText('not readonly input');
     expect(input).not.toHaveAttribute('readOnly');
   });

package/src/components/Page/PageSection.tsx

@@ -6,9 +6,7 @@ import { PageContext } from './PageContext';
 
 export enum PageSectionVariants {
   default = 'default',
-  light = 'light',
-  dark = 'dark',
-  darker = 'darker'
+  secondary = 'secondary'
 }
 
 export enum PageSectionTypes {
@@ -25,8 +23,8 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the section */
   className?: string;
-  /** Section background color variant */
-  variant?: 'default' | 'light' | 'dark' | 'darker';
+  /** Section background color variant. This will only apply when the type prop has the "default" value. */
+  variant?: 'default' | 'secondary';
   /** Section type variant */
   type?: 'default' | 'nav' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
   /** Enables the page section to fill the available vertical space */
@@ -78,9 +76,7 @@ const variantType = {
 
 const variantStyle = {
   [PageSectionVariants.default]: '',
-  [PageSectionVariants.light]: styles.modifiers.light,
-  [PageSectionVariants.dark]: styles.modifiers.dark_200,
-  [PageSectionVariants.darker]: styles.modifiers.dark_100
+  [PageSectionVariants.secondary]: styles.modifiers.secondary
 };
 
 export const PageSection: React.FunctionComponent<PageSectionProps> = ({
@@ -118,7 +114,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         variantType[type],
         formatBreakpointMods(padding, styles),
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
-        variantStyle[variant],
+        type === PageSectionTypes.default && variantStyle[variant],
         isFilled === false && styles.modifiers.noFill,
         isFilled === true && styles.modifiers.fill,
         isWidthLimited && styles.modifiers.limitWidth,

package/src/components/Page/PageSidebar.tsx

@@ -15,8 +15,6 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   isManagedSidebar?: boolean;
   /** Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */
   isSidebarOpen?: boolean;
-  /** Indicates the color scheme of the sidebar */
-  theme?: 'dark' | 'light';
   /** Sidebar id */
   id?: string;
 }
@@ -33,7 +31,6 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   className = '',
   children,
   isSidebarOpen = true,
-  theme = 'dark',
   id = 'page-sidebar',
   ...props
 }: PageSidebarProps) => (
@@ -46,7 +43,6 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           id={id}
           className={css(
             styles.pageSidebar,
-            theme === 'light' && styles.modifiers.light,
             sidebarOpen && styles.modifiers.expanded,
             !sidebarOpen && styles.modifiers.collapsed,
             className

package/src/components/Page/__tests__/Generated/PageSidebar.test.tsx

@@ -9,7 +9,7 @@ import {} from '../..';
 
 it('PageSidebar should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
-    <PageSidebar className={"''"} isManagedSidebar={true} isSidebarOpen={true} theme={'dark'}>
+    <PageSidebar className={"''"} isManagedSidebar={true} isSidebarOpen={true}>
       <div>ReactNode</div>
     </PageSidebar>
   );

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

@@ -32,9 +32,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -44,7 +41,7 @@ describe('Page', () => {
   test('Check dark page against snapshot', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
     const Sidebar = (
-      <PageSidebar isSidebarOpen theme="dark">
+      <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
       </PageSidebar>
     );
@@ -52,9 +49,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -68,9 +62,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -94,9 +85,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -127,9 +115,6 @@ describe('Page', () => {
         breadcrumbProps={{ stickyOnBreakpoint: { sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' } }}
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -162,9 +147,6 @@ describe('Page', () => {
         }}
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -189,9 +171,6 @@ describe('Page', () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -216,9 +195,6 @@ describe('Page', () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -245,9 +221,6 @@ describe('Page', () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -275,9 +248,6 @@ describe('Page', () => {
           </Nav>
         </PageNavigation>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -317,9 +287,6 @@ describe('Page', () => {
           </PageNavigation>
         </PageGroup>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -373,9 +340,6 @@ describe('Page', () => {
         }}
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -411,9 +375,6 @@ describe('Page', () => {
         data-testid="page-test-id"
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 

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

@@ -16,7 +16,6 @@ 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/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 variant="secondary">Section 2 with secondary variant styling</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>
   );
 };