Bump core alphas (#10017)

* Chore(deps): Update to latest core alphas

* disable integration: tests

* comment fix

packages/react-core/package.json

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

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

@@ -87,9 +87,11 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isSelectableRaised = false,
   isSelected = false,
   isDisabledRaised = false,
-  isFlat = false,
+  // TODO: Update with issue #9991
+  // isFlat = false,
   isExpanded = false,
-  isRounded = false,
+  // TODO: Update with issue #9991
+  // isRounded = false,
   isLarge = false,
   isFullHeight = false,
   isPlain = false,
@@ -112,12 +114,13 @@ export const Card: React.FunctionComponent<CardProps> = ({
   }
 
   const getSelectableModifiers = () => {
-    if (isDisabledRaised) {
-      return css(styles.modifiers.nonSelectableRaised);
-    }
-    if (isSelectableRaised) {
-      return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
-    }
+    // TODO: Update with issue #9991
+    // if (isDisabledRaised) {
+    //   return css(styles.modifiers.nonSelectableRaised);
+    // }
+    // if (isSelectableRaised) {
+    //   return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
+    // }
     if (isSelectable && isClickable) {
       return css(styles.modifiers.selectable, styles.modifiers.clickable, isSelected && styles.modifiers.current);
     }
@@ -185,8 +188,9 @@ export const Card: React.FunctionComponent<CardProps> = ({
           styles.card,
           isCompact && styles.modifiers.compact,
           isExpanded && styles.modifiers.expanded,
-          isFlat && styles.modifiers.flat,
-          isRounded && styles.modifiers.rounded,
+          // TODO: Update with issue #9991
+          // isFlat && styles.modifiers.flat,
+          // isRounded && styles.modifiers.rounded,
           isLarge && styles.modifiers.displayLg,
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,

packages/react-core/src/components/Card/__tests__/Card.test.tsx

@@ -69,20 +69,23 @@ describe('Card', () => {
     expect(card.getAttribute('tabindex')).toBeNull();
   });
 
-  test('card with isDisabledRaised applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isDisabledRaised applied', () => {
     render(<Card isDisabledRaised>disabled raised card</Card>);
     expect(screen.getByText('disabled raised card')).toHaveClass('pf-m-non-selectable-raised');
   });
 
-  test('card with isSelectableRaised applied - not change', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isSelectableRaised applied - not change', () => {
     render(<Card isSelectableRaised>raised selectable card</Card>);
 
     const card = screen.getByText('raised selectable card');
     expect(card).toHaveClass('pf-m-selectable-raised');
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
-  test('card with isSelectableRaised and isSelected applied ', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isSelectableRaised and isSelected applied ', () => {
     render(
       <Card isSelected isSelectableRaised>
         raised selected card
@@ -95,7 +98,8 @@ describe('Card', () => {
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
-  test('card with isFlat applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isFlat applied', () => {
     render(<Card isFlat>flat card</Card>);
     expect(screen.getByText('flat card')).toHaveClass('pf-m-flat');
   });
@@ -105,7 +109,8 @@ describe('Card', () => {
     expect(screen.getByText('expanded card')).toHaveClass('pf-m-expanded');
   });
 
-  test('card with isRounded applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isRounded applied', () => {
     render(<Card isRounded>rounded card</Card>);
     expect(screen.getByText('rounded card')).toHaveClass('pf-m-rounded');
   });

packages/react-core/src/components/Card/examples/CardWithModifiers.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 
 export const CardWithModifiers: React.FunctionComponent = () => {
-  const mods = ['isCompact', 'isFlat', 'isRounded', 'isLarge', 'isFullHeight', 'isPlain'];
+  // TODO: Update with issue #9991 removed isFlat and isRounded
+  const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain'];
   const [modifiers, setModifiers] = React.useState({});
 
   return (

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

@@ -4,7 +4,6 @@ import { css } from '@patternfly/react-styles';
 
 export enum DrawerColorVariant {
   default = 'default',
-  light200 = 'light-200',
   noBackground = 'no-background'
 }
 

packages/react-core/src/components/Drawer/DrawerContent.tsx

@@ -12,7 +12,7 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default';
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
@@ -30,7 +30,6 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
       <div
         className={css(
           styles.drawerContent,
-          colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
           colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
           className
         )}

packages/react-core/src/components/Drawer/DrawerPanelContent.tsx

@@ -55,7 +55,7 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
     '2xl'?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
   };
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default';
   /** Adds and customizes a focus trap on the drawer panel content. */
   focusTrap?: DrawerPanelFocusTrapObject;
 }
@@ -366,7 +366,6 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               isResizable && styles.modifiers.resizable,
               hasNoBorder && styles.modifiers.noBorder,
               formatBreakpointMods(widths, styles),
-              colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
               colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
               className
             )}

packages/react-core/src/components/Drawer/DrawerSection.tsx

@@ -9,7 +9,7 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content to be rendered in the drawer section. */
   children?: React.ReactNode;
   /** Color variant of the background of the drawer Section */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default';
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
@@ -22,7 +22,6 @@ export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
   <div
     className={css(
       styles.drawerSection,
-      colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
       colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
       className
     )}

packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx

@@ -6,7 +6,6 @@ import {
   DrawerContentBody,
   DrawerHead,
   DrawerPanelBody,
-  DrawerColorVariant,
   DrawerPanelContent
 } from '../';
 import React from 'react';
@@ -71,14 +70,15 @@ test(`Drawer expands from bottom`, () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test(`Drawer has resizable css and color variants`, () => {
+// TODO: Update/renable with issue #9979
+xtest(`Drawer has resizable css and color variants`, () => {
   const panelContent = (
     <DrawerPanelContent
       isResizable
       minSize={'200px'}
       defaultSize={'300px'}
       maxSize={'400px'}
-      colorVariant={DrawerColorVariant.light200}
+      // colorVariant={DrawerColorVariant.light200}
     >
       <DrawerHead>
         <span>drawer-panel</span>

packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -133,7 +133,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                     aria-disabled="false"
                     aria-label="Close drawer panel"
                     class="pf-v5-c-button pf-m-plain"
-                    data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-5"
                     data-ouia-component-type="PF5/Button"
                     data-ouia-safe="true"
                     type="button"

packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx

@@ -46,7 +46,8 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
   };
 
   const panelContent = (
-    <DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
+    // TODO:  need to update with issue #9979. Removed light color variant for secondary panel.
+    <DrawerPanelContent colorVariant={DrawerColorVariant.default}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer-panel
@@ -92,11 +93,11 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
         Toggle drawer
       </Button>
       <Drawer isExpanded={isExpanded} onExpand={onExpand}>
-        <DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
-          drawer-section
-        </DrawerSection>
+        {/* TODO: MAy need to update with issue #9979. Removed light color variant for secondary panel. */}
+        <DrawerSection colorVariant={DrawerColorVariant.default}>drawer-section</DrawerSection>
         <DrawerContent
-          colorVariant={contentSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}
+          // TODO:  need to update with issue #9979. Removed light color variant for secondary section.
+          colorVariant={DrawerColorVariant.default}
           panelContent={panelContent}
         >
           <DrawerContentBody>{drawerContent}</DrawerContentBody>

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

@@ -106,7 +106,8 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
 
   return (
     <div
-      className={css(styles.numberInput, validated !== 'default' && styles.modifiers.status, className)}
+      // TODO: Update with issue #9978. Removed "validated !== 'default' && styles.modifiers.status" from classname to get build to work
+      className={css(styles.numberInput, className)}
       {...(widthChars && {
         style: {
           [cssFormControlWidthChars.name]: widthChars,

packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap

@@ -663,7 +663,7 @@ exports[`numberInput renders disabled 1`] = `
 exports[`numberInput renders error validated 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-number-input pf-m-status"
+    class="pf-v5-c-number-input"
   >
     <div
       class="pf-v5-c-input-group"
@@ -777,7 +777,7 @@ exports[`numberInput renders error validated 1`] = `
 exports[`numberInput renders success validated 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-number-input pf-m-status"
+    class="pf-v5-c-number-input"
   >
     <div
       class="pf-v5-c-input-group"
@@ -1180,7 +1180,7 @@ exports[`numberInput renders value 1`] = `
 exports[`numberInput renders warning validated 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-number-input pf-m-status"
+    class="pf-v5-c-number-input"
   >
     <div
       class="pf-v5-c-input-group"

packages/react-core/src/components/Wizard/examples/WizardStepDrawerContent.tsx

@@ -4,7 +4,6 @@ import {
   Drawer,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
@@ -27,7 +26,8 @@ const StepContentWithDrawer: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_50' }} colorVariant={DrawerColorVariant.light200}>
+          // TODO: need to update with issue #9979. Removed light color variant for secondary panel.
+          <DrawerPanelContent widths={{ default: 'width_50' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: <strong>{activeStep?.name}</strong>

packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx

@@ -12,8 +12,7 @@ import {
   ModalVariant,
   Wizard,
   WizardHeader,
-  WizardStep,
-  DrawerColorVariant
+  WizardStep
 } from '@patternfly/react-core';
 
 export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
@@ -38,7 +37,8 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+          // TODO: MAy need to update with issue #9979. Removed light color variant.
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}

packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx

@@ -15,8 +15,7 @@ import {
   TextVariants,
   Wizard,
   WizardHeader,
-  WizardStep,
-  DrawerColorVariant
+  WizardStep
 } from '@patternfly/react-core';
 
 export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () => {
@@ -41,7 +40,8 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+          // TODO: MAy need to update with issue #9979. Removed light color variant.
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}

packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -28,8 +28,7 @@ import {
   MastheadMain,
   MastheadBrand,
   Wizard,
-  WizardStep,
-  DrawerColorVariant
+  WizardStep
 } from '@patternfly/react-core';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
@@ -119,7 +118,8 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+          // TODO: MAy need to update with issue #9979. Removed light color variant.
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}

packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -7,7 +7,6 @@ import {
   Drawer,
   DrawerActions,
   DrawerCloseButton,
-  DrawerColorVariant,
   DrawerContent,
   DrawerHead,
   DrawerPanelContent,
@@ -120,7 +119,8 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+          // TODO: MAy need to update with issue #9979. Removed light color variant.
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}

packages/react-core/src/deprecated/components/Wizard/__tests__/Wizard.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
-import { DrawerPanelContent, DrawerColorVariant, DrawerHead } from '../../../../../src/components/Drawer';
+import { DrawerPanelContent, DrawerHead } from '../../../../../src/components/Drawer';
 import userEvent from '@testing-library/user-event';
 
 describe('Wizard', () => {
@@ -104,7 +104,8 @@ describe('Wizard', () => {
 
   test('wiz with drawer', () => {
     const wizDrawerPanelContent = (
-      <DrawerPanelContent colorVariant={DrawerColorVariant.light200}>
+      // TODO: MAy need to update with issue #9979. Removed light color variant.
+      <DrawerPanelContent>
         <DrawerHead>
           <span>This wizard has a drawer with drawer panel content</span>
         </DrawerHead>