patternfly · tlabaj · Feb 1, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 23, 2024
diff --git a/packages/react-core/src/components/Drawer/Drawer.tsx b/packages/react-core/src/components/Drawer/Drawer.tsx
@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';

 export enum DrawerColorVariant {
  default = 'default',
+  secondary = 'secondary',
  noBackground = 'no-background'
 }


diff --git a/packages/react-core/src/components/Drawer/DrawerContent.tsx b/packages/react-core/src/components/Drawer/DrawerContent.tsx
@@ -12,12 +12,11 @@ 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 | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
 }

 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  className = '',
+  className,
  children,
  panelContent,
  colorVariant = DrawerColorVariant.default,
@@ -31,6 +30,7 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
        className={css(
          styles.drawerContent,
          colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+          colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
          className
        )}
        ref={drawerContentRef}

diff --git a/packages/react-core/src/components/Drawer/DrawerHead.tsx b/packages/react-core/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';
diff --git a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
@@ -55,15 +55,15 @@ 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 | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
  /** Adds and customizes a focus trap on the drawer panel content. */
  focusTrap?: DrawerPanelFocusTrapObject;
 }
 let isResizing: boolean = null;
 let newSize: number = 0;

 export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps> = ({
-  className = '',
+  className,
  id,
  children,
  hasNoBorder = false,
@@ -367,6 +367,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
              hasNoBorder && styles.modifiers.noBorder,
              formatBreakpointMods(widths, styles),
              colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+              colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
              className
            )}
            onTransitionEnd={(ev) => {

diff --git a/packages/react-core/src/components/Drawer/DrawerPanelDescription.tsx b/packages/react-core/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';
diff --git a/packages/react-core/src/components/Drawer/DrawerSection.tsx b/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 | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
 }

 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
@@ -23,6 +23,7 @@ export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
    className={css(
      styles.drawerSection,
      colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+      colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
      className
    )}
    {...props}

diff --git a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx
@@ -6,7 +6,8 @@ import {
  DrawerContentBody,
  DrawerHead,
  DrawerPanelBody,
-  DrawerPanelContent
+  DrawerPanelContent,
+  DrawerColorVariant
 } from '../';
 import React from 'react';
 import { render } from '@testing-library/react';
@@ -70,15 +71,14 @@ test(`Drawer expands from bottom`, () => {
  expect(asFragment()).toMatchSnapshot();
 });

-// TODO: Update/renable with issue #9979
-xtest(`Drawer has resizable css and color variants`, () => {
+test(`Drawer has resizable css and color variants`, () => {
  const panelContent = (
    <DrawerPanelContent
      isResizable
      minSize={'200px'}
      defaultSize={'300px'}
      maxSize={'400px'}
-      // colorVariant={DrawerColorVariant.light200}
+      colorVariant={DrawerColorVariant.secondary}
    >
      <DrawerHead>
        <span>drawer-panel</span>

diff --git a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx b/packages/react-core/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx
@@ -2,6 +2,37 @@ 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);
+});

 test('Does not render with aria-labelledby by default', () => {
  render(

diff --git a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx b/packages/react-core/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();
+});