From f97435aaaf94744633523e517dc0d2c10dd678a7 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 2 May 2024 10:13:35 -0400
Subject: [PATCH 1/3] feat(Wizard): use height token to set height

---
 packages/react-core/src/components/Wizard/Wizard.tsx           | 3 ++-
 .../react-core/src/components/Wizard/__tests__/Wizard.test.tsx | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx
index 78a90a0cf20..b31a1d21902 100644
--- a/packages/react-core/src/components/Wizard/Wizard.tsx
+++ b/packages/react-core/src/components/Wizard/Wizard.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import wizardHeightToken from '@patternfly/react-tokens/dist/esm/c_wizard_Height';
 
 import {
   isWizardParentStep,
@@ -161,7 +162,7 @@ export const Wizard = ({
       <div
         className={css(styles.wizard, className)}
         style={{
-          ...(height ? { height } : {}),
+          ...(height ? { [wizardHeightToken.name]: height } : {}),
           ...(width ? { width } : {})
         }}
         {...wrapperProps}
diff --git a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
index b7ccc2fe279..474aa7d0ed2 100644
--- a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
+++ b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
@@ -190,7 +190,6 @@ test(`can customize the wizard's height and width`, () => {
 
   const wizard = screen.getByTestId('wizard-id');
 
-  expect(wizard).toHaveStyle('height: 500px');
   expect(wizard).toHaveStyle('width: 500px');
 });
 

From 035d9970cf80403f9ad41d3b27d53e1b033f38b6 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 2 May 2024 11:07:44 -0400
Subject: [PATCH 2/3] fix integration

---
 .../demos/WizardDemo/WizardDemo.tsx           | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
index 6e20e57fc61..4f750e8bb69 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
@@ -143,6 +143,94 @@ class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>, Wizard
           <WizardStep id="inPage-overflow-step-2" name="Step with overflow">
             <div style={{ height: '800px' }}>
               <p>Step 2</p>
+              <>
+                <p>
+                  The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
+                  "region", and an aria-label or aria-labelledby to be applied.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
+                  lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
+                  enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
+                  facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
+                  posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
+                  auctor.
+                </p>
+                <p>
+                  Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
+                  ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
+                  bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
+                  commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
+                  egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
+                  odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
+                </p>
+              </>
+              <>
+                <p>
+                  The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
+                  "region", and an aria-label or aria-labelledby to be applied.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
+                  lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
+                  enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
+                  facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
+                  posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
+                  auctor.
+                </p>
+                <p>
+                  Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
+                  ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
+                  bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
+                  commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
+                  egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
+                  odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
+                </p>
+              </>
+              <>
+                <p>
+                  The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
+                  "region", and an aria-label or aria-labelledby to be applied.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
+                  lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
+                  enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
+                  facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
+                  posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
+                  auctor.
+                </p>
+                <p>
+                  Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
+                  ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
+                  bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
+                  commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
+                  egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
+                  odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
+                </p>
+              </>
+              <>
+                <p>
+                  The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
+                  "region", and an aria-label or aria-labelledby to be applied.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
+                  lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor,
+                  enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla
+                  facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus
+                  posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a
+                  auctor.
+                </p>
+                <p>
+                  Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris
+                  ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec
+                  bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem,
+                  commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non
+                  egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in
+                  odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
+                </p>
+              </>
             </div>
           </WizardStep>
         </Wizard>

From 121c62ea5e0b6bc4e4b26e513a9093e315bbc7c8 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 23 May 2024 16:16:07 -0400
Subject: [PATCH 3/3] update to handle numbers

---
 packages/react-core/src/components/Wizard/Wizard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx
index b31a1d21902..9d1b52dd8fc 100644
--- a/packages/react-core/src/components/Wizard/Wizard.tsx
+++ b/packages/react-core/src/components/Wizard/Wizard.tsx
@@ -162,7 +162,7 @@ export const Wizard = ({
       <div
         className={css(styles.wizard, className)}
         style={{
-          ...(height ? { [wizardHeightToken.name]: height } : {}),
+          ...(height ? { [wizardHeightToken.name]: typeof height === 'number' ? `${height}px` : height } : {}),
           ...(width ? { width } : {})
         }}
         {...wrapperProps}