@patternfly/react-core 6.0.0-alpha.15 → 6.0.0-alpha.16

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.14","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.15","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.14","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.15","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.14","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.15","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.15",
+  "version": "6.0.0-alpha.16",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.7",
-    "@patternfly/react-styles": "^6.0.0-alpha.7",
-    "@patternfly/react-tokens": "^6.0.0-alpha.7",
+    "@patternfly/react-icons": "^6.0.0-alpha.8",
+    "@patternfly/react-styles": "^6.0.0-alpha.8",
+    "@patternfly/react-tokens": "^6.0.0-alpha.8",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "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",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "74a4f022d0cfc230145b0d6d7a3a11c65488353c"
+  "gitHead": "33b82ec94f4742d6ffca49a9ac03cb5593a2b34a"
 }

package/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,

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

@@ -69,12 +69,14 @@ 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');
@@ -82,7 +84,8 @@ describe('Card', () => {
     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');
   });

package/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 (

package/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'
 }
 

package/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
         )}

package/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
             )}

package/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
     )}

package/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>

package/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"

package/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>

package/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,

package/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"

package/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>

package/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}

package/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}

package/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}

package/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}

package/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>

package/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx

@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  Button,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerColorVariant,
-  DrawerHead,
-  DrawerPanelContent
-} from '@patternfly/react-core';
+import { Button, DrawerActions, DrawerCloseButton, DrawerHead, DrawerPanelContent } from '@patternfly/react-core';
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 export const WizardWithDrawer: React.FunctionComponent = () => {
@@ -27,7 +20,8 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
   };
 
   const panel1Content = (
-    <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-panel-1 content
@@ -40,7 +34,8 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
   );
 
   const panel2Content = (
-    <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={0} ref={drawerRef}>
           drawer-panel-2 content
@@ -53,7 +48,8 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
   );
 
   const panel3Content = (
-    <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={0} ref={drawerRef}>
           drawer-panel-3 content