From 23ee4ca3f7778e21feea3abde32be05c0143240d Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 23 Jan 2024 10:11:32 -0500
Subject: [PATCH 1/6] feat(Drawer): consumed Penta updates

---
 .../src/components/Drawer/Drawer.tsx          |  1 +
 .../src/components/Drawer/DrawerContent.tsx   |  6 ++--
 .../components/Drawer/DrawerPanelContent.tsx  |  5 +--
 .../Drawer/DrawerPanelDescription.tsx         | 23 ++++++++++++++
 .../src/components/Drawer/DrawerSection.tsx   |  3 +-
 .../Drawer/__tests__/Drawer.test.tsx          |  6 ++--
 .../__tests__/DrawerPanelContent.test.tsx     | 31 +++++++++++++++++++
 .../src/components/Drawer/examples/Drawer.md  |  7 +++--
 .../examples/DrawerSecondaryBackground.tsx    | 11 +++----
 .../react-core/src/components/Drawer/index.ts |  1 +
 10 files changed, 76 insertions(+), 18 deletions(-)
 create mode 100644 packages/react-core/src/components/Drawer/DrawerPanelDescription.tsx

diff --git a/packages/react-core/src/components/Drawer/Drawer.tsx b/packages/react-core/src/components/Drawer/Drawer.tsx
index f2e8d3016eb..1f634fd87ac 100644
--- 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
index fe048d89669..9ab2a326459 100644
--- 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/DrawerPanelContent.tsx b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
index 8c7c5c1aff6..2319ccd2943 100644
--- a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
+++ b/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 | '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,
@@ -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
new file mode 100644
index 00000000000..b5290138718
--- /dev/null
+++ 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
index 6cad4ee44c9..5989afd28dc 100644
--- 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
index 53317a7d698..3ef65157996 100644
--- 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,7 +71,6 @@ test(`Drawer expands from bottom`, () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-// TODO: Update/renable with issue #9979
 xtest(`Drawer has resizable css and color variants`, () => {
   const panelContent = (
     <DrawerPanelContent
@@ -78,7 +78,7 @@ xtest(`Drawer has resizable css and color variants`, () => {
       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
index 3794f640b31..0f1135707e9 100644
--- 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/examples/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md
index 816cc3b83a6..14a47fb100a 100644
--- a/packages/react-core/src/components/Drawer/examples/Drawer.md
+++ b/packages/react-core/src/components/Drawer/examples/Drawer.md
@@ -4,14 +4,15 @@ cssPrefix: pf-v5-c-drawer
 propComponents:
   [
     Drawer,
+    DrawerSection,
     DrawerContent,
-    DrawerPanelContent,
     DrawerContentBody,
-    DrawerPanelBody,
-    DrawerSection,
+    DrawerPanelContent,
     DrawerHead,
     DrawerActions,
     DrawerCloseButton,
+    DrawerPanelDescription,
+    DrawerPanelBody,
     DrawerColorVariant,
     DrawerPanelFocusTrapObject
   ]
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx b/packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx
index 7f8aa3a857b..dd07754b8c6 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx
@@ -46,8 +46,7 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
   };
 
   const panelContent = (
-    // TODO:  need to update with issue #9979. Removed light color variant for secondary panel.
-    <DrawerPanelContent colorVariant={DrawerColorVariant.default}>
+    <DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer-panel
@@ -93,11 +92,11 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
         Toggle drawer
       </Button>
       <Drawer isExpanded={isExpanded} onExpand={onExpand}>
-        {/* TODO: MAy need to update with issue #9979. Removed light color variant for secondary panel. */}
-        <DrawerSection colorVariant={DrawerColorVariant.default}>drawer-section</DrawerSection>
+        <DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}>
+          drawer-section
+        </DrawerSection>
         <DrawerContent
-          // TODO:  need to update with issue #9979. Removed light color variant for secondary section.
-          colorVariant={DrawerColorVariant.default}
+          colorVariant={contentSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}
           panelContent={panelContent}
         >
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
diff --git a/packages/react-core/src/components/Drawer/index.ts b/packages/react-core/src/components/Drawer/index.ts
index 75a59456ac8..72e487b3668 100644
--- a/packages/react-core/src/components/Drawer/index.ts
+++ b/packages/react-core/src/components/Drawer/index.ts
@@ -3,6 +3,7 @@ export * from './DrawerActions';
 export * from './DrawerCloseButton';
 export * from './DrawerContent';
 export * from './DrawerContentBody';
+export * from './DrawerPanelDescription';
 export * from './DrawerHead';
 export * from './DrawerPanelBody';
 export * from './DrawerPanelContent';

From 1ce56e4d6c1614abb6cebab118586dc11d437fb2 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 23 Jan 2024 10:23:11 -0500
Subject: [PATCH 2/6] Updated integration, added unit tests

---
 .../Drawer/DrawerPanelDescription.tsx         |  2 +-
 .../__tests__/DrawerPanelDescription.tsx      | 28 +++++++++++++++++++
 .../DrawerPanelDescription.tsx.snap           | 11 ++++++++
 .../cypress/integration/drawer.spec.ts        |  5 ++--
 .../demos/DrawerDemo/DrawerDemo.tsx           | 11 +++++---
 5 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx
 create mode 100644 packages/react-core/src/components/Drawer/__tests__/__snapshots__/DrawerPanelDescription.tsx.snap

diff --git a/packages/react-core/src/components/Drawer/DrawerPanelDescription.tsx b/packages/react-core/src/components/Drawer/DrawerPanelDescription.tsx
index b5290138718..ac066f09b0a 100644
--- a/packages/react-core/src/components/Drawer/DrawerPanelDescription.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerPanelDescription.tsx
@@ -8,7 +8,7 @@ export interface DrawerPanelDescriptionProps extends React.HTMLProps<HTMLDivElem
   /** Additional classes added to the drawer description. */
   className?: string;
   /** Content to be rendered in the drawer description */
-  children?: React.ReactNode;
+  children: React.ReactNode;
 }
 
 export const DrawerPanelDescription: React.FunctionComponent<DrawerPanelDescriptionProps> = ({
diff --git a/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx b/packages/react-core/src/components/Drawer/__tests__/DrawerPanelDescription.tsx
new file mode 100644
index 00000000000..ad2838cfd99
--- /dev/null
+++ 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();
+});
diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/DrawerPanelDescription.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/DrawerPanelDescription.tsx.snap
new file mode 100644
index 00000000000..770fc46c828
--- /dev/null
+++ b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/DrawerPanelDescription.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-drawer__description"
+  >
+    description content
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-integration/cypress/integration/drawer.spec.ts b/packages/react-integration/cypress/integration/drawer.spec.ts
index 5ee9dad85fa..962e1a79384 100644
--- a/packages/react-integration/cypress/integration/drawer.spec.ts
+++ b/packages/react-integration/cypress/integration/drawer.spec.ts
@@ -32,10 +32,9 @@ describe('Drawer Demo Test', () => {
     cy.get('#toggleButton').click();
   });
 
-  // TODO: update it issue #9979
-  xit('Verify bottom drawer with background variant', () => {
+  it('Verify bottom drawer with background variant', () => {
     cy.get('#basic-drawer.pf-v5-c-drawer').should('have.class', 'pf-m-panel-bottom');
-    cy.get('#basic-drawer .pf-v5-c-drawer__panel').should('have.class', 'pf-m-light-200');
+    cy.get('#basic-drawer .pf-v5-c-drawer__panel').should('have.class', 'pf-m-secondary');
   });
 
   it('Verify panel widths', () => {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx
index ed5a02b34e6..ed28d8152e6 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx
@@ -65,7 +65,6 @@ export class DrawerDemo extends Component<DrawerProps, DrawerDemoState> {
   render() {
     const { isExpanded, isFocusTrapExpanded, isCustomFocusExpanded } = this.state;
     const panelContent = (
-      // TODO: MAy need to update with issue #9979. Removed light color variant.
       <DrawerPanelContent
         widths={{
           default: 'width_100',
@@ -73,6 +72,7 @@ export class DrawerDemo extends Component<DrawerProps, DrawerDemoState> {
           xl: 'width_33',
           '2xl': 'width_25'
         }}
+        colorVariant={DrawerColorVariant.secondary}
       >
         <DrawerHead>
           <span ref={this.drawerRef} tabIndex={isExpanded ? 0 : -1}>
@@ -85,9 +85,12 @@ export class DrawerDemo extends Component<DrawerProps, DrawerDemoState> {
       </DrawerPanelContent>
     );
 
-    // TODO: MAy need to update with issue #9979. Removed light color variant.
     const focusTrapPanelContent = (
-      <DrawerPanelContent focusTrap={{ enabled: true }} id="focusTrap-panelContent">
+      <DrawerPanelContent
+        focusTrap={{ enabled: true }}
+        id="focusTrap-panelContent"
+        colorVariant={DrawerColorVariant.secondary}
+      >
         <DrawerHead>
           <span>drawer-panel</span>
           <DrawerActions>
@@ -98,10 +101,10 @@ export class DrawerDemo extends Component<DrawerProps, DrawerDemoState> {
     );
 
     const customFocusPanelContent = (
-      // TODO: MAy need to update with issue #9979. Removed light color variant.
       <DrawerPanelContent
         focusTrap={{ enabled: true, elementToFocusOnExpand: '#customFocus-panelContent' }}
         id="customFocus-panelContent"
+        colorVariant={DrawerColorVariant.secondary}
       >
         <DrawerHead>
           <span>drawer-panel</span>

From 93e683913c5df8c36528cd47f8ab25d7b323ffe4 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 23 Jan 2024 10:48:11 -0500
Subject: [PATCH 3/6] Updated Wizard files using Drawer

---
 .../examples/WizardStepDrawerContent.tsx       |  4 ++--
 .../examples/Wizard/InModalWithDrawer.tsx      |  4 ++--
 .../InModalWithDrawerInformationalStep.tsx     |  4 ++--
 .../demos/examples/Wizard/InPageWithDrawer.tsx |  4 ++--
 .../InPageWithDrawerInformationalStep.tsx      |  4 ++--
 .../Wizard/__tests__/Wizard.test.tsx           |  1 -
 .../Wizard/examples/WizardWithDrawer.tsx       | 18 +++++++++++-------
 7 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/react-core/src/components/Wizard/examples/WizardStepDrawerContent.tsx b/packages/react-core/src/components/Wizard/examples/WizardStepDrawerContent.tsx
index b99f90c6a60..90eeb8e2e2f 100644
--- a/packages/react-core/src/components/Wizard/examples/WizardStepDrawerContent.tsx
+++ b/packages/react-core/src/components/Wizard/examples/WizardStepDrawerContent.tsx
@@ -4,6 +4,7 @@ import {
   Drawer,
   DrawerContent,
   DrawerPanelContent,
+  DrawerColorVariant,
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
@@ -26,8 +27,7 @@ const StepContentWithDrawer: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>
       <DrawerContent
         panelContent={
-          // TODO: need to update with issue #9979. Removed light color variant for secondary panel.
-          <DrawerPanelContent widths={{ default: 'width_50' }}>
+          <DrawerPanelContent widths={{ default: 'width_50' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: <strong>{activeStep?.name}</strong>
diff --git a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx
index 196036758c3..a23ad44f908 100644
--- a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx
@@ -4,6 +4,7 @@ import {
   Drawer,
   DrawerContent,
   DrawerPanelContent,
+  DrawerColorVariant,
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
@@ -37,8 +38,7 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          // TODO: MAy need to update with issue #9979. Removed light color variant.
-          <DrawerPanelContent widths={{ default: 'width_33' }}>
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
diff --git a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx
index 0f0468443f8..2e67997d9d9 100644
--- a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx
@@ -6,6 +6,7 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
+  DrawerColorVariant,
   DrawerHead,
   Flex,
   Modal,
@@ -40,8 +41,7 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          // TODO: MAy need to update with issue #9979. Removed light color variant.
-          <DrawerPanelContent widths={{ default: 'width_33' }}>
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
index 3272a52393d..5249fdafb15 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
@@ -9,6 +9,7 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
+  DrawerColorVariant,
   DrawerHead,
   Flex,
   Nav,
@@ -118,8 +119,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          // TODO: MAy need to update with issue #9979. Removed light color variant.
-          <DrawerPanelContent widths={{ default: 'width_33' }}>
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
index b269b2f2e74..bcd4ebe7648 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
@@ -10,6 +10,7 @@ import {
   DrawerContent,
   DrawerHead,
   DrawerPanelContent,
+  DrawerColorVariant,
   Flex,
   Nav,
   NavItem,
@@ -119,8 +120,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          // TODO: MAy need to update with issue #9979. Removed light color variant.
-          <DrawerPanelContent widths={{ default: 'width_33' }}>
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
diff --git a/packages/react-core/src/deprecated/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/deprecated/components/Wizard/__tests__/Wizard.test.tsx
index 54737101689..7551ba44992 100644
--- a/packages/react-core/src/deprecated/components/Wizard/__tests__/Wizard.test.tsx
+++ b/packages/react-core/src/deprecated/components/Wizard/__tests__/Wizard.test.tsx
@@ -104,7 +104,6 @@ describe('Wizard', () => {
 
   test('wiz with drawer', () => {
     const wizDrawerPanelContent = (
-      // 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>
diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx
index e62b0954198..afc25f84a4e 100644
--- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx
+++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import { Button, DrawerActions, DrawerCloseButton, DrawerHead, DrawerPanelContent } from '@patternfly/react-core';
+import {
+  Button,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
+  DrawerPanelContent,
+  DrawerColorVariant
+} from '@patternfly/react-core';
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 export const WizardWithDrawer: React.FunctionComponent = () => {
@@ -20,8 +27,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
   };
 
   const panel1Content = (
-    // TODO: MAy need to update with issue #9979. Removed light color variant.
-    <DrawerPanelContent widths={{ default: 'width_33' }}>
+    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
       <DrawerHead>
         <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
           drawer-panel-1 content
@@ -34,8 +40,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
   );
 
   const panel2Content = (
-    // TODO: MAy need to update with issue #9979. Removed light color variant.
-    <DrawerPanelContent widths={{ default: 'width_33' }}>
+    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
       <DrawerHead>
         <span tabIndex={0} ref={drawerRef}>
           drawer-panel-2 content
@@ -48,8 +53,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
   );
 
   const panel3Content = (
-    // TODO: MAy need to update with issue #9979. Removed light color variant.
-    <DrawerPanelContent widths={{ default: 'width_33' }}>
+    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
       <DrawerHead>
         <span tabIndex={0} ref={drawerRef}>
           drawer-panel-3 content

From 7af735dcdbbbd2a56fd4a2fc2e26089b5dbf04cd Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 23 Jan 2024 11:31:44 -0500
Subject: [PATCH 4/6] Updated drawer exampls

---
 .../react-core/src/components/Drawer/DrawerHead.tsx  | 12 +++---------
 .../src/components/Drawer/examples/Drawer.md         |  1 -
 .../src/components/Drawer/examples/DrawerBasic.tsx   |  6 +++++-
 .../components/Drawer/examples/DrawerBasicInline.tsx |  2 +-
 .../components/Drawer/examples/DrawerBreakpoint.tsx  |  2 +-
 .../components/Drawer/examples/DrawerFocusTrap.tsx   |  2 +-
 .../Drawer/examples/DrawerInlinePanelEnd.tsx         |  2 +-
 .../Drawer/examples/DrawerInlinePanelStart.tsx       |  2 +-
 .../Drawer/examples/DrawerModifiedContentPadding.tsx |  2 +-
 .../Drawer/examples/DrawerModifiedPanelPadding.tsx   |  4 ++--
 .../components/Drawer/examples/DrawerPanelBottom.tsx |  2 +-
 .../components/Drawer/examples/DrawerPanelEnd.tsx    |  2 +-
 .../components/Drawer/examples/DrawerPanelStart.tsx  |  2 +-
 .../Drawer/examples/DrawerResizableAtEnd.tsx         |  2 +-
 .../Drawer/examples/DrawerResizableAtStart.tsx       |  2 +-
 .../Drawer/examples/DrawerResizableOnBottom.tsx      |  2 +-
 .../Drawer/examples/DrawerResizableOnInline.tsx      |  2 +-
 .../Drawer/examples/DrawerSecondaryBackground.tsx    |  2 +-
 .../examples/DrawerStackedContentBodyElements.tsx    |  7 +++----
 .../src/components/Drawer/examples/DrawerStatic.tsx  |  2 +-
 20 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/packages/react-core/src/components/Drawer/DrawerHead.tsx b/packages/react-core/src/components/Drawer/DrawerHead.tsx
index 187e6b9d14e..25c6c724766 100644
--- 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/examples/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md
index 14a47fb100a..8abc60ad17d 100644
--- a/packages/react-core/src/components/Drawer/examples/Drawer.md
+++ b/packages/react-core/src/components/Drawer/examples/Drawer.md
@@ -13,7 +13,6 @@ propComponents:
     DrawerCloseButton,
     DrawerPanelDescription,
     DrawerPanelBody,
-    DrawerColorVariant,
     DrawerPanelFocusTrapObject
   ]
 section: components
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx
index 9201073717a..efef6b45d34 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx
@@ -7,6 +7,8 @@ import {
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
+  DrawerPanelBody,
+  DrawerPanelDescription,
   Button
 } from '@patternfly/react-core';
 
@@ -30,12 +32,14 @@ export const DrawerBasic: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>
       </DrawerHead>
+      <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
+      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
     </DrawerPanelContent>
   );
 
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx
index d07d31ceab6..8a07bd09bc8 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx
@@ -30,7 +30,7 @@ export const DrawerBasicInline: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx
index 1eefd9d6c80..0e40c38f7f1 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx
@@ -30,7 +30,7 @@ export const DrawerBreakpoint: React.FunctionComponent = () => {
     <DrawerPanelContent widths={{ default: 'width_33' }}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerFocusTrap.tsx b/packages/react-core/src/components/Drawer/examples/DrawerFocusTrap.tsx
index 047a93311fa..e8fde64ed44 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerFocusTrap.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerFocusTrap.tsx
@@ -32,7 +32,7 @@ export const DrawerFocusTrap: React.FunctionComponent = () => {
   const panelContent = (
     <DrawerPanelContent focusTrap={{ enabled: true }}>
       <DrawerHead>
-        <span>drawer-panel</span>
+        <span>Drawer panel header</span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx
index 02b2eeb0c32..7918cb22e6f 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx
@@ -30,7 +30,7 @@ export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx
index 499f1ec7be3..323fece2207 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx
@@ -30,7 +30,7 @@ export const DrawerInlinePanelStart: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx b/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx
index 94813db2e5d..fa18a03298a 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx
@@ -30,7 +30,7 @@ export const DrawerModifiedContentPadding: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx b/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx
index 2292c11be4f..4e738e747ab 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx
@@ -28,9 +28,9 @@ export const DrawerModifiedPanelPadding: React.FunctionComponent = () => {
 
   const panelContent = (
     <DrawerPanelContent>
-      <DrawerHead hasNoPadding>
+      <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx
index 33ab1663e59..27755809295 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx
@@ -30,7 +30,7 @@ export const DrawerPanelBottom: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx
index 657a2bd0830..ed903b7564c 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx
@@ -30,7 +30,7 @@ export const DrawerPanelEnd: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx
index df0f1d7802f..b53b36dd3fc 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx
@@ -30,7 +30,7 @@ export const DrawerPanelStart: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx
index 99ee9bdd29c..59bd56bef16 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx
@@ -35,7 +35,7 @@ export const DrawerResizableAtEnd: React.FunctionComponent = () => {
     <DrawerPanelContent isResizable onResize={onResize} id="end-resize-panel" defaultSize={'500px'} minSize={'150px'}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx
index d51cd308ef3..799aac35007 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx
@@ -30,7 +30,7 @@ export const DrawerResizableAtStart: React.FunctionComponent = () => {
     <DrawerPanelContent isResizable defaultSize={'500px'} minSize={'200px'}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx
index 0f480e3d570..9dc60ebe612 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx
@@ -29,7 +29,7 @@ export const DrawerResizableOnBottom: React.FunctionComponent = () => {
     <DrawerPanelContent isResizable defaultSize={'200px'} minSize={'100px'}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx
index 883d92af49e..4dfa95573b4 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx
@@ -29,7 +29,7 @@ export const DrawerResizableOnInline: React.FunctionComponent = () => {
     <DrawerPanelContent isResizable defaultSize={'500px'} minSize={'150px'}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx b/packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx
index dd07754b8c6..f5c6eb678e3 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx
@@ -49,7 +49,7 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
     <DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx b/packages/react-core/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx
index a5c396ae9b3..8dc8424c97f 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx
@@ -32,15 +32,14 @@ export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <Title headingLevel="h3" size="2xl" tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer title{' '}
+          Drawer panel header in a Title
         </Title>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>
-        drawer-panel
       </DrawerHead>
-      <DrawerPanelBody hasNoPadding>drawer-panel with no padding</DrawerPanelBody>
-      <DrawerPanelBody>drawer-panel</DrawerPanelBody>
+      <DrawerPanelBody hasNoPadding>Drawer panel body with no padding</DrawerPanelBody>
+      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
     </DrawerPanelContent>
   );
 
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx b/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx
index 16f79f9b064..3a59dd71935 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx
@@ -31,7 +31,7 @@ export const DrawerStatic: React.FunctionComponent = () => {
     <DrawerPanelContent>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
-          drawer-panel
+          Drawer panel header
         </span>
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />

From 4c6c30d8751502216fe5fdba0feb32773fb2b42c Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 23 Jan 2024 11:49:25 -0500
Subject: [PATCH 5/6] Updated snapshots

---
 .../__snapshots__/Drawer.test.tsx.snap        | 290 ++++++++----------
 1 file changed, 135 insertions(+), 155 deletions(-)

diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 11183c275fe..80f23652ac0 100644
--- a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -22,44 +22,40 @@ exports[`Drawer expands from bottom 1`] = `
         id="pf-drawer-panel-5"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v5-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v5-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v5-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <button
+                aria-disabled="false"
+                aria-label="Close drawer panel"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <button
-                  aria-disabled="false"
-                  aria-label="Close drawer panel"
-                  class="pf-v5-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-4"
-                  data-ouia-component-type="PF5/Button"
-                  data-ouia-safe="true"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 352 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 352 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
         </div>
@@ -115,44 +111,40 @@ exports[`Drawer has resizable callback and id 1`] = `
           class="pf-v5-c-drawer__panel-main"
         >
           <div
-            class="pf-v5-c-drawer__body"
+            class="pf-v5-c-drawer__head"
           >
+            <span>
+              drawer-panel
+            </span>
             <div
-              class="pf-v5-c-drawer__head"
+              class="pf-v5-c-drawer__actions"
             >
-              <span>
-                drawer-panel
-              </span>
               <div
-                class="pf-v5-c-drawer__actions"
+                class="pf-v5-c-drawer__close"
               >
-                <div
-                  class="pf-v5-c-drawer__close"
+                <button
+                  aria-disabled="false"
+                  aria-label="Close drawer panel"
+                  class="pf-v5-c-button pf-m-plain"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-5"
+                  data-ouia-component-type="PF5/Button"
+                  data-ouia-safe="true"
+                  type="button"
                 >
-                  <button
-                    aria-disabled="false"
-                    aria-label="Close drawer panel"
-                    class="pf-v5-c-button pf-m-plain"
-                    data-ouia-component-id="OUIA-Generated-Button-plain-5"
-                    data-ouia-component-type="PF5/Button"
-                    data-ouia-safe="true"
-                    type="button"
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 352 512"
+                    width="1em"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 352 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                      />
-                    </svg>
-                  </button>
-                </div>
+                    <path
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
           </div>
@@ -339,44 +331,40 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
         id="pf-drawer-panel-0"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v5-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v5-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v5-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <button
+                aria-disabled="false"
+                aria-label="Close drawer panel"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <button
-                  aria-disabled="false"
-                  aria-label="Close drawer panel"
-                  class="pf-v5-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-1"
-                  data-ouia-component-type="PF5/Button"
-                  data-ouia-safe="true"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 352 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 352 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
         </div>
@@ -413,44 +401,40 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
         id="pf-drawer-panel-4"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v5-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v5-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v5-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <button
+                aria-disabled="false"
+                aria-label="Close drawer panel"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <button
-                  aria-disabled="false"
-                  aria-label="Close drawer panel"
-                  class="pf-v5-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-3"
-                  data-ouia-component-type="PF5/Button"
-                  data-ouia-safe="true"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 352 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 352 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
         </div>
@@ -487,44 +471,40 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
         id="pf-drawer-panel-2"
       >
         <div
-          class="pf-v5-c-drawer__body"
+          class="pf-v5-c-drawer__head"
         >
+          <span>
+            drawer-panel
+          </span>
           <div
-            class="pf-v5-c-drawer__head"
+            class="pf-v5-c-drawer__actions"
           >
-            <span>
-              drawer-panel
-            </span>
             <div
-              class="pf-v5-c-drawer__actions"
+              class="pf-v5-c-drawer__close"
             >
-              <div
-                class="pf-v5-c-drawer__close"
+              <button
+                aria-disabled="false"
+                aria-label="Close drawer panel"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <button
-                  aria-disabled="false"
-                  aria-label="Close drawer panel"
-                  class="pf-v5-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-2"
-                  data-ouia-component-type="PF5/Button"
-                  data-ouia-safe="true"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 352 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 352 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
         </div>

From 32206912f6077b86c9b3f53865ea73d00028aaa6 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Fri, 26 Jan 2024 08:11:13 -0500
Subject: [PATCH 6/6] Re-enabled test, updated snapshots

---
 .../Drawer/__tests__/Drawer.test.tsx          |  2 +-
 .../__snapshots__/Drawer.test.tsx.snap        | 62 +++++++++----------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx
index 3ef65157996..067370270c7 100644
--- a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx
+++ b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx
@@ -71,7 +71,7 @@ test(`Drawer expands from bottom`, () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-xtest(`Drawer has resizable css and color variants`, () => {
+test(`Drawer has resizable css and color variants`, () => {
   const panelContent = (
     <DrawerPanelContent
       isResizable
diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 80f23652ac0..01fdee226d9 100644
--- a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -126,7 +126,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-5"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-6"
                   data-ouia-component-type="PF5/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -178,7 +178,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
         </div>
       </div>
       <div
-        class="pf-v5-c-drawer__panel pf-m-resizable pf-m-light-200"
+        class="pf-v5-c-drawer__panel pf-m-resizable pf-m-secondary"
         id="pf-drawer-panel-6"
         style="--pf-v5-c-drawer__panel--md--FlexBasis: 300px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
@@ -202,44 +202,40 @@ exports[`Drawer has resizable css and color variants 1`] = `
           class="pf-v5-c-drawer__panel-main"
         >
           <div
-            class="pf-v5-c-drawer__body"
+            class="pf-v5-c-drawer__head"
           >
+            <span>
+              drawer-panel
+            </span>
             <div
-              class="pf-v5-c-drawer__head"
+              class="pf-v5-c-drawer__actions"
             >
-              <span>
-                drawer-panel
-              </span>
               <div
-                class="pf-v5-c-drawer__actions"
+                class="pf-v5-c-drawer__close"
               >
-                <div
-                  class="pf-v5-c-drawer__close"
+                <button
+                  aria-disabled="false"
+                  aria-label="Close drawer panel"
+                  class="pf-v5-c-button pf-m-plain"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-5"
+                  data-ouia-component-type="PF5/Button"
+                  data-ouia-safe="true"
+                  type="button"
                 >
-                  <button
-                    aria-disabled="false"
-                    aria-label="Close drawer panel"
-                    class="pf-v5-c-button pf-m-plain"
-                    data-ouia-component-id="OUIA-Generated-Button-plain-5"
-                    data-ouia-component-type="PF5/Button"
-                    data-ouia-safe="true"
-                    type="button"
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 352 512"
+                    width="1em"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 352 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                      />
-                    </svg>
-                  </button>
-                </div>
+                    <path
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
           </div>