feat(Drawer): Added support for glass

Author: tlabaj

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

@@ -5,6 +5,9 @@ import { css } from '@patternfly/react-styles';
 export enum DrawerColorVariant {
   default = 'default',
   secondary = 'secondary',
+  /**
+   * @deprecated `DrawerColorVariant.noBackground` is deprecated. Use the `isPlain` prop on `DrawerPanelContent` and the `DrawerSection`instead.
+   */
   noBackground = 'no-background'
 }
 

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

@@ -37,6 +37,12 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   isResizable?: boolean;
   /** @beta Flag indicating that the drawer panel should disable glass styles. This prop is intended to work with isPill drawers. */
   hasNoGlass?: boolean;
+  /** @beta Flag indicating that the drawer panel should use glass styles. */
+  isGlass?: boolean;
+  /** @beta Flag indicating that the drawer panel should use plain styles. */
+  isPlain?: boolean;
+  /** @beta Flag indicating that plain styles should be disabled when glass styles are used. */
+  isNoPlainOnGlass?: boolean;
   /** Callback for resize end. */
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer. */
@@ -56,7 +62,10 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
     xl?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
     '2xl'?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
   };
-  /** Color variant of the background of the drawer panel */
+  /**
+   * Color variant of the background of the drawer panel.
+   * The `no-background`is deprecated; use the `isPlain` prop instead.
+   */
   colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
   /** Adds and customizes a focus trap on the drawer panel content. */
   focusTrap?: DrawerPanelFocusTrapObject;
@@ -71,6 +80,9 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   hasNoBorder = false,
   isResizable = false,
   hasNoGlass = false,
+  isGlass = false,
+  isPlain = false,
+  isNoPlainOnGlass = false,
   onResize,
   minSize,
   defaultSize,
@@ -368,6 +380,9 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
         styles.drawerPanel,
         isResizable && styles.modifiers.resizable,
         hasNoGlass && 'pf-m-no-glass',
+        isGlass && styles.modifiers.glass,
+        isPlain && styles.modifiers.plain,
+        isNoPlainOnGlass && styles.modifiers.noPlain,
         hasNoBorder && styles.modifiers.noBorder,
         formatBreakpointMods(widths, styles),
         colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,

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

@@ -7,19 +7,26 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Content to be rendered in the drawer section. */
   children?: React.ReactNode;
-  /** Color variant of the background of the drawer Section */
+  /**
+   * Color variant of the background of the drawer section.
+   * The `no-background` value is deprecated; use the `isPlain` prop instead.
+   */
   colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
+  /** @beta Flag indicating that the drawer section should use plain styles. */
+  isPlain?: boolean;
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
   className = '',
   children,
   colorVariant = DrawerColorVariant.default,
+  isPlain = false,
   ...props
 }: DrawerSectionProps) => (
   <div
     className={css(
       styles.drawerSection,
+      isPlain && styles.modifiers.plain,
       colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
       colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
       className

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

@@ -13,7 +13,7 @@ test(`Renders with only class ${styles.drawerPanel} by default`, () => {
   expect(screen.getByText('Drawer panel content')).toHaveClass(styles.drawerPanel, { exact: true });
 });
 
-test(`Renders with class ${styles.modifiers.noBackground} when colorVariant="no-background"`, () => {
+test(`Renders with class ${styles.modifiers.noBackground} when deprecated colorVariant="no-background" is used`, () => {
   render(
     <Drawer isExpanded>
       <DrawerPanelContent colorVariant="no-background">Drawer panel content</DrawerPanelContent>
@@ -188,3 +188,33 @@ test(`Renders with class 'pf-m-no-glass' when hasNoGlass is true`, () => {
 
   expect(screen.getByText('Drawer panel content')).toHaveClass('pf-m-no-glass');
 });
+
+test(`Renders with class ${styles.modifiers.glass} when isGlass is true`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent isGlass>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.glass);
+});
+
+test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent isPlain>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.plain);
+});
+
+test(`Renders with class ${styles.modifiers.noPlain} when isNoPlainOnGlass is true`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent isNoPlainOnGlass>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.noPlain);
+});

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

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import { DrawerSection } from '../DrawerSection';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+
+test(`Renders with only class ${styles.drawerSection} by default`, () => {
+  render(<DrawerSection>Section content</DrawerSection>);
+
+  expect(screen.getByText('Section content')).toHaveClass(styles.drawerSection, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => {
+  render(<DrawerSection isPlain>Section content</DrawerSection>);
+
+  expect(screen.getByText('Section content')).toHaveClass(styles.modifiers.plain);
+});

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

@@ -13,7 +13,7 @@ propComponents:
     DrawerCloseButton,
     DrawerPanelDescription,
     DrawerPanelBody,
-    DrawerPanelFocusTrapObject
+    DrawerPanelFocusTrapObject,
   ]
 section: components
 ---

packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -178,7 +178,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
   );
 
   const panelContent = (
-    <DrawerPanelContent>
+    <DrawerPanelContent isPlain>
       <DrawerHead>
         <Title headingLevel="h2" size="xl">
           node-{drawerPanelBodyContent}
@@ -429,7 +429,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
       <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }} aria-label="Drawer content section">
         <Drawer isExpanded={isDrawerExpanded}>
-          <DrawerContent panelContent={panelContent} colorVariant="no-background">
+          <DrawerContent panelContent={panelContent}>
             <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
           </DrawerContent>
         </Drawer>