@patternfly/react-core 6.0.0-alpha.5 → 6.0.0-alpha.51

package/src/components/DescriptionList/DescriptionList.tsx

@@ -3,9 +3,13 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 import { formatBreakpointMods } from '../../helpers';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min';
-import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
+// import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
 import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
 
+const cssTermWidth = {
+  name: '--pf-v5-c-description-list__term-width'
+};
+
 export interface BreakpointModifiers {
   default?: string;
   md?: string;

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

@@ -125,16 +125,16 @@ test(`Renders style when isHorizontal and horizontalTermWidthModifier is set`, (
     />
   );
   expect(screen.getByLabelText('list')).toHaveStyle({
-    '--pf-v5-c-description-list--m-horizontal__term--width': '12ch',
-    '--pf-v5-c-description-list--m-horizontal__term--width-on-sm': '15ch',
-    '--pf-v5-c-description-list--m-horizontal__term--width-on-md': '20ch',
-    '--pf-v5-c-description-list--m-horizontal__term--width-on-lg': '28ch',
-    '--pf-v5-c-description-list--m-horizontal__term--width-on-xl': '30ch',
-    '--pf-v5-c-description-list--m-horizontal__term--width-on-2xl': '35ch'
+    '--pf-v6-c-description-list--m-horizontal__term--width': '12ch',
+    '--pf-v6-c-description-list--m-horizontal__term--width-on-sm': '15ch',
+    '--pf-v6-c-description-list--m-horizontal__term--width-on-md': '20ch',
+    '--pf-v6-c-description-list--m-horizontal__term--width-on-lg': '28ch',
+    '--pf-v6-c-description-list--m-horizontal__term--width-on-xl': '30ch',
+    '--pf-v6-c-description-list--m-horizontal__term--width-on-2xl': '35ch'
   });
 });
 
-test(`Renders style when termWidth is set`, () => {
+test.skip(`Renders style when termWidth is set`, () => {
   render(<DescriptionList aria-label="list" isHorizontal termWidth="30px" />);
   expect(screen.getByLabelText('list')).toHaveStyle({
     '--pf-v5-c-description-list__term--width': '30px'
@@ -151,6 +151,6 @@ test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () =
   );
   expect(screen.getByLabelText('list')).toHaveAttribute(
     'style',
-    '--pf-v5-c-description-list--GridTemplateColumns--min: 50px; --pf-v5-c-description-list--GridTemplateColumns--min-on-sm: 50px; --pf-v5-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v5-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v5-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v5-c-description-list--GridTemplateColumns--min-on-2xl: 300px;'
+    '--pf-v6-c-description-list--GridTemplateColumns--min: 50px; --pf-v6-c-description-list--GridTemplateColumns--min-on-sm: 50px; --pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;'
   );
 });

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

@@ -3,7 +3,7 @@
 exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <dl
-    class="pf-v5-c-description-list"
+    class="pf-v6-c-description-list"
   />
 </DocumentFragment>
 `;

package/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListDescription.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <dd
-    class="pf-v5-c-description-list__description"
+    class="pf-v6-c-description-list__description"
   >
     <div
-      class="pf-v5-c-description-list__text"
+      class="pf-v6-c-description-list__text"
     >
       test
     </div>

package/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListGroup.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-description-list__group"
+    class="pf-v6-c-description-list__group"
   >
     test
   </div>

package/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpTextButton.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-description-list__text pf-m-help-text"
+    class="pf-v6-c-description-list__text pf-m-help-text"
     role="button"
     tabindex="0"
     type="button"

package/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTerm.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <dt
-    class="pf-v5-c-description-list__term"
+    class="pf-v6-c-description-list__term"
   >
     <span
-      class="pf-v5-c-description-list__text"
+      class="pf-v6-c-description-list__text"
     >
       test
     </span>

package/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTermHelpText.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <dt
-    class="pf-v5-c-description-list__term"
+    class="pf-v6-c-description-list__term"
   >
     test
   </dt>

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

@@ -10,7 +10,7 @@ test(`Renders with only the class name ${styles.divider} by default`, () => {
 
 test('Renders with horizontal rule by default', () => {
   render(<Divider />);
-  expect(screen.getByRole('separator')).toContainHTML('<hr class="pf-v5-c-divider" />');
+  expect(screen.getByRole('separator')).toContainHTML('<hr class="pf-v6-c-divider" />');
 });
 
 test('Renders with element passed to component prop', () => {

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <hr
-    class="pf-v5-c-divider"
+    class="pf-v6-c-divider"
   />
 </DocumentFragment>
 `;

package/src/components/Divider/examples/Divider.md

@@ -10,45 +10,53 @@ propComponents: ['Divider']
 ### Using hr
 
 ```ts file='./DividerUsingHr.tsx'
+
 ```
 
 ### Using li
 
 ```ts file='./DividerUsingLi.tsx'
+
 ```
 
 ### Using div
 
 ```ts file='./DividerUsingDiv.tsx'
+
 ```
 
 ### Inset medium
 
 ```ts file='./DividerInsetMedium.tsx'
+
 ```
 
 ### Inset at various breakpoints
 
 ```ts file='./DividerInsetVariousBreakpoints.tsx'
+
 ```
 
 ### Vertical in flex layout
 
 ```ts file='./DividerVerticalFlex.tsx'
+
 ```
 
-### Vertical in flex layout, inset medium
+### Vertical in flex layout, inset small
+
+```ts file='./DividerVerticalFlexInsetSmall.tsx'
 
-```ts file='./DividerVerticalFlexInsetMedium.tsx'
 ```
 
 ### Vertical in flex layout, inset at various breakpoints
 
 ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
+
 ```
 
 ### Switch orientation at various breakpoints
 
 ```ts file='./DividerOrientationVariousBreakpoints.tsx'
-```
 
+```

package/src/components/Divider/examples/{DividerVerticalFlexInsetMedium.tsx → DividerVerticalFlexInsetSmall.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Divider, Flex, FlexItem } from '@patternfly/react-core';
 
-export const DividerVerticalFlexInsetMedium: React.FunctionComponent = () => (
+export const DividerVerticalFlexInsetSmall: React.FunctionComponent = () => (
   <Flex>
     <FlexItem>first item</FlexItem>
     <Divider
       orientation={{
         default: 'vertical'
       }}
-      inset={{ default: 'insetMd' }}
+      inset={{ default: 'insetSm' }}
     />
     <FlexItem>second item</FlexItem>
   </Flex>

package/src/components/Drawer/Drawer.tsx

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

package/src/components/Drawer/DrawerContent.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerMain } from './DrawerMain';
-import { DrawerColorVariant, DrawerContext } from './Drawer';
+import { DrawerContext } from './Drawer';
+
+export enum DrawerContentColorVariant {
+  default = 'default',
+  primary = 'primary',
+  secondary = 'secondary'
+}
 
 export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
@@ -12,15 +18,14 @@ 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?: DrawerContentColorVariant | 'default' | 'primary' | 'secondary';
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  className = '',
+  className,
   children,
   panelContent,
-  colorVariant = DrawerColorVariant.default,
+  colorVariant = DrawerContentColorVariant.default,
   ...props
 }: DrawerContentProps) => {
   const { drawerContentRef } = React.useContext(DrawerContext);
@@ -30,8 +35,8 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
       <div
         className={css(
           styles.drawerContent,
-          colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
-          colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+          colorVariant === DrawerContentColorVariant.primary && styles.modifiers.primary,
+          colorVariant === DrawerContentColorVariant.secondary && styles.modifiers.secondary,
           className
         )}
         ref={drawerContentRef}

package/src/components/Drawer/DrawerHead.tsx

@@ -1,28 +1,22 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
-import { DrawerPanelBody } from './DrawerPanelBody';
 
 export interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the drawer head. */
   className?: string;
   /** Content to be rendered in the drawer head */
   children?: React.ReactNode;
-  /** Indicates if there should be no padding around the drawer panel body of the head*/
-  hasNoPadding?: boolean;
 }
 
 export const DrawerHead: React.FunctionComponent<DrawerHeadProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
-  hasNoPadding = false,
   ...props
 }: DrawerHeadProps) => (
-  <DrawerPanelBody hasNoPadding={hasNoPadding}>
-    <div className={css(styles.drawerHead, className)} {...props}>
-      {children}
-    </div>
-  </DrawerPanelBody>
+  <div className={css(styles.drawerHead, className)} {...props}>
+    {children}
+  </div>
 );
 DrawerHead.displayName = 'DrawerHead';

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' | 'secondary';
   /** Adds and customizes a focus trap on the drawer panel content. */
   focusTrap?: DrawerPanelFocusTrapObject;
 }
@@ -63,7 +63,7 @@ let isResizing: boolean = null;
 let newSize: number = 0;
 
 export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps> = ({
-  className = '',
+  className,
   id,
   children,
   hasNoBorder = false,
@@ -366,8 +366,8 @@ 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,
+              colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
               className
             )}
             onTransitionEnd={(ev) => {

package/src/components/Drawer/DrawerPanelDescription.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import { css } from '@patternfly/react-styles';
+
+/** Provides a description within the drawer panel. This should typically follow the drawer head. */
+
+export interface DrawerPanelDescriptionProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the drawer description. */
+  className?: string;
+  /** Content to be rendered in the drawer description */
+  children: React.ReactNode;
+}
+
+export const DrawerPanelDescription: React.FunctionComponent<DrawerPanelDescriptionProps> = ({
+  className,
+  children,
+  ...props
+}: DrawerPanelDescriptionProps) => (
+  <div className={css(styles.drawerDescription, className)} {...props}>
+    {children}
+  </div>
+);
+DrawerPanelDescription.displayName = 'DrawerPanelDescription';

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' | 'secondary';
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
@@ -22,8 +22,8 @@ export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
   <div
     className={css(
       styles.drawerSection,
-      colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
       colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+      colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
       className
     )}
     {...props}

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

@@ -6,14 +6,16 @@ import {
   DrawerContentBody,
   DrawerHead,
   DrawerPanelBody,
-  DrawerColorVariant,
-  DrawerPanelContent
+  DrawerPanelContent,
+  DrawerColorVariant
 } from '../';
 import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { KeyTypes } from '../../../helpers';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 Object.values([
   { isExpanded: true, isInline: false, isStatic: false },
   { isExpanded: false, isInline: false, isStatic: false },
@@ -78,7 +80,7 @@ test(`Drawer has resizable css and color variants`, () => {
       minSize={'200px'}
       defaultSize={'300px'}
       maxSize={'400px'}
-      colorVariant={DrawerColorVariant.light200}
+      colorVariant={DrawerColorVariant.secondary}
     >
       <DrawerHead>
         <span>drawer-panel</span>

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -2,6 +2,39 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { DrawerPanelContent } from '../DrawerPanelContent';
 import { Drawer } from '../Drawer';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+
+test(`Renders with only class ${styles.drawerPanel} by default`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.drawerPanel, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.noBackground} when colorVariant="no-background"`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent colorVariant="no-background">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.noBackground);
+});
+
+test(`Renders with class ${styles.modifiers.secondary} when colorVariant="secondary"`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent colorVariant="secondary">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.secondary);
+});
+
+jest.mock('../../../helpers/GenerateId/GenerateId');
 
 test('Does not render with aria-labelledby by default', () => {
   render(

package/src/components/Drawer/__tests__/DrawerPanelDescription.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DrawerPanelDescription } from '../DrawerPanelDescription';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+
+test(`Renders with only class ${styles.drawerDescription} by default`, () => {
+  render(<DrawerPanelDescription>description content</DrawerPanelDescription>);
+
+  expect(screen.getByText('description content')).toHaveClass(styles.drawerDescription, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<DrawerPanelDescription className="test-class">description content</DrawerPanelDescription>);
+
+  expect(screen.getByText('description content')).toHaveClass('test-class');
+});
+
+test(`Spreads props`, () => {
+  render(<DrawerPanelDescription id="test-id">description content</DrawerPanelDescription>);
+
+  expect(screen.getByText('description content')).toHaveAttribute('id', 'test-id');
+});
+
+test(`Matches snapshot`, () => {
+  const { asFragment } = render(<DrawerPanelDescription>description content</DrawerPanelDescription>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Drawer/__tests__/Generated/DrawerPanelContent.test.tsx

@@ -7,6 +7,8 @@ import { DrawerPanelContent } from '../../DrawerPanelContent';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
 
+jest.mock('../../../../helpers/GenerateId/GenerateId');
+
 it('DrawerPanelContent should match snapshot (auto-generated)', () => {
   const { asFragment } = render(<DrawerPanelContent className={"''"} children={<div>ReactNode</div>} />);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerContent.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`DrawerContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-drawer__main"
+    class="pf-v6-c-drawer__main"
   >
     <div
-      class="pf-v5-c-drawer__content ''"
+      class="pf-v6-c-drawer__content ''"
     >
       <div>
         ReactNode

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap

@@ -3,9 +3,9 @@
 exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-drawer__panel ''"
+    class="pf-v6-c-drawer__panel ''"
     hidden=""
-    id="pf-drawer-panel-0"
+    id="generated-id"
   />
 </DocumentFragment>
 `;