Skip to content

Commit

Permalink
feat(Wizard): use height token to set height (#10332)
Browse files Browse the repository at this point in the history 
* feat(Wizard): use height token to set height

* fix integration

* update to handle numbers
  • Loading branch information
@kmcfaul
kmcfaul authored May 28, 2024
1 parent 76db304 commit 2b5a598
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 2 deletions.
3 changes: 2 additions & 1 deletion packages/react-core/src/components/Wizard/Wizard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -161,7 +162,7 @@ export const Wizard = ({
<div
className={css(styles.wizard, className)}
style={{
...(height ? { height } : {}),
...(height ? { [wizardHeightToken.name]: typeof height === 'number' ? `${height}px` : height } : {}),
...(width ? { width } : {})
}}
{...wrapperProps}
Expand Down
1 change: 0 additions & 1 deletion packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});

Expand Down
88 changes: 88 additions & 0 deletions packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 2b5a598

Please sign in to comment.