chore(deps): Bump v6 branch to latest core alpha (#9774)

* chore(deps): Bump v6 branch to latest core alpha

* update snapshts

* fixes from review

* fix test

* update to alpha 12 to fix table issue

* more fixes

* update snapshots

* remove Page setion variants that are no longer needed and update snapshots

* rebase

* fix docs

* fix broken tests

* fix token genration

Author: tlabaj

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.2.0-prerelease.3",
+    "@patternfly/patternfly": "6.0.0-alpha.12",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",

packages/react-core/src/components/Masthead/Masthead.tsx

@@ -9,8 +9,6 @@ export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<H
   children?: React.ReactNode;
   /** Additional classes added to the masthead */
   className?: string;
-  /** Background theme color of the masthead */
-  backgroundColor?: 'dark' | 'light' | 'light200';
   /** Display type at various breakpoints */
   display?: {
     default?: 'inline' | 'stack';
@@ -34,7 +32,6 @@ export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<H
 export const Masthead: React.FunctionComponent<MastheadProps> = ({
   children,
   className,
-  backgroundColor = 'dark',
   display = {
     md: 'inline'
   },
@@ -48,8 +45,6 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
         styles.masthead,
         formatBreakpointMods(display, styles, 'display-', getBreakpoint(width)),
         formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
-        backgroundColor === 'light' && styles.modifiers.light,
-        backgroundColor === 'light200' && styles.modifiers.light_200,
         className
       )}
       {...props}

packages/react-core/src/components/Masthead/examples/Masthead.md

@@ -140,50 +140,6 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 </Masthead>;
 ```
 
-### Light variant
-
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="light-masthead" backgroundColor="light">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
-```
-
-### Light 200 variant
-
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="light200-masthead" backgroundColor="light200">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
-```
-
 ### Inset
 
 ```ts

packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx

@@ -54,7 +54,7 @@ export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>
         className={css(styles.notificationBadge, styles.modifiers[variant], isExpanded && styles.modifiers.expanded)}
       >
         {notificationChild}
-        {count > 0 && <span className={css(styles.notificationBadgeCount)}>{count}</span>}
+        {count > 0 && <span className={css(`${styles.notificationBadge}__count`)}>{count}</span>}
       </span>
     </Button>
   );

packages/react-core/src/components/Page/PageSection.tsx

@@ -5,10 +5,7 @@ import { formatBreakpointMods } from '../../helpers/util';
 import { PageContext } from './PageContext';
 
 export enum PageSectionVariants {
-  default = 'default',
-  light = 'light',
-  dark = 'dark',
-  darker = 'darker'
+  default = 'default'
 }
 
 export enum PageSectionTypes {
@@ -26,7 +23,7 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the section */
   className?: string;
   /** Section background color variant */
-  variant?: 'default' | 'light' | 'dark' | 'darker';
+  variant?: 'default';
   /** Section type variant */
   type?: 'default' | 'nav' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
   /** Enables the page section to fill the available vertical space */
@@ -77,10 +74,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.default]: ''
 };
 
 export const PageSection: React.FunctionComponent<PageSectionProps> = ({

packages/react-core/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

packages/react-core/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>
   );

packages/react-core/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,17 +41,14 @@ 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>
     );
 
     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>
     );