From a5b1ce33dd3f249da0da77c9e15aab388ec09ea1 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Wed, 7 Jun 2023 16:35:16 -0400
Subject: [PATCH 1/2] chore(Drawer): Updated example name to be applicable for
 dark theme

---
 .../src/components/Drawer/examples/Drawer.md  |  4 +-
 ...Gray.tsx => DrawerSecondaryBackground.tsx} | 64 +++++++++----------
 2 files changed, 34 insertions(+), 34 deletions(-)
 rename packages/react-core/src/components/Drawer/examples/{DrawerLightGray.tsx => DrawerSecondaryBackground.tsx} (54%)

diff --git a/packages/react-core/src/components/Drawer/examples/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md
index eef744c83f4..cce3edfeeda 100644
--- a/packages/react-core/src/components/Drawer/examples/Drawer.md
+++ b/packages/react-core/src/components/Drawer/examples/Drawer.md
@@ -106,7 +106,7 @@ section: components
 ```ts file="DrawerResizableOnInline.tsx"
 ```
 
-### Panel with light-200 background
+### Panel with secondary background
 
-```ts file="DrawerLightGray.tsx"
+```ts file="DrawerSecondaryBackground.tsx"
 ```
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerLightGray.tsx b/packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx
similarity index 54%
rename from packages/react-core/src/components/Drawer/examples/DrawerLightGray.tsx
rename to packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx
index be1395eaff0..93bd9e93de4 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerLightGray.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx
@@ -13,13 +13,13 @@ import {
   DrawerColorVariant
 } from '@patternfly/react-core';
 
-export const DrawerLightGray: React.FunctionComponent = () => {
+export const DrawerSecondaryBackground: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const [panelGray, setPanelGray] = React.useState(true);
-  const [contentGray, setContentGray] = React.useState(false);
-  const [sectionGray, setSectionGray] = React.useState(false);
+  const [panelSecondary, setPanelSecondary] = React.useState(true);
+  const [contentSecondary, setContentSecondary] = React.useState(false);
+  const [sectionSecondary, setSectionSecondary] = React.useState(false);
 
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
@@ -33,20 +33,20 @@ export const DrawerLightGray: React.FunctionComponent = () => {
     setIsExpanded(false);
   };
 
-  const togglePanelGray = (checked: boolean) => {
-    setPanelGray(checked);
+  const togglePanelSecondary = (checked: boolean) => {
+    setPanelSecondary(checked);
   };
 
-  const toggleSectionGray = (checked: boolean) => {
-    setSectionGray(checked);
+  const toggleSectionSecondary = (checked: boolean) => {
+    setSectionSecondary(checked);
   };
 
-  const toggleContentGray = (checked: boolean) => {
-    setContentGray(checked);
+  const toggleContentSecondary = (checked: boolean) => {
+    setContentSecondary(checked);
   };
 
   const panelContent = (
-    <DrawerPanelContent colorVariant={panelGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
+    <DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer-panel
@@ -64,39 +64,39 @@ export const DrawerLightGray: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Checkbox
-        label="Gray panel"
-        isChecked={panelGray}
-        onChange={(_event, checked) => togglePanelGray(checked)}
-        aria-label="Gray panel checkbox"
-        id="toggle-gray-panel"
-        name="toggle-gray-panel"
+        label="Secondary panel"
+        isChecked={panelSecondary}
+        onChange={(_event, checked) => togglePanelSecondary(checked)}
+        aria-label="Secondary panel checkbox"
+        id="toggle-secondary-panel"
+        name="toggle-secondary-panel"
       />
       <Checkbox
-        label="Gray content"
-        isChecked={contentGray}
-        onChange={(_event, checked) => toggleContentGray(checked)}
-        aria-label="Gray content checkbox"
-        id="toggle-gray-content"
-        name="toggle-gray-content"
+        label="Secondary content"
+        isChecked={contentSecondary}
+        onChange={(_event, checked) => toggleContentSecondary(checked)}
+        aria-label="Secondary content checkbox"
+        id="toggle-secondary-content"
+        name="toggle-secondary-content"
       />
       <Checkbox
-        label="Gray section"
-        isChecked={sectionGray}
-        onChange={(_event, checked) => toggleSectionGray(checked)}
-        aria-label="Gray section checkbox"
-        id="toggle-gray-section"
-        name="toggle-gray-section"
+        label="Secondary section"
+        isChecked={sectionSecondary}
+        onChange={(_event, checked) => toggleSectionSecondary(checked)}
+        aria-label="Secondary section checkbox"
+        id="toggle-secondary-section"
+        name="toggle-secondary-section"
       />
       <br />
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
       <Drawer isExpanded={isExpanded} onExpand={onExpand}>
-        <DrawerSection colorVariant={sectionGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
+        <DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
           drawer-section
         </DrawerSection>
         <DrawerContent
-          colorVariant={contentGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}
+          colorVariant={contentSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}
           panelContent={panelContent}
         >
           <DrawerContentBody>{drawerContent}</DrawerContentBody>

From cffd2741e89464e2512cc58ad0e31b239fb41c6c Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Wed, 7 Jun 2023 16:36:13 -0400
Subject: [PATCH 2/2] fix lint versions

---
 packages/react-integration/demo-app-ts/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json
index 0803747d73c..2c39c7a34ff 100644
--- a/packages/react-integration/demo-app-ts/package.json
+++ b/packages/react-integration/demo-app-ts/package.json
@@ -9,7 +9,7 @@
     "serve:demo-app": "node scripts/serve"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.0.0-prerelease.2",
+    "@patternfly/react-core": "^5.0.0-prerelease.3",
     "react": "^18",
     "react-dom": "^18",
     "react-router": "^5.3.3",