fix(Wizard): set a custom width to the wizard modal #5256
Conversation
|
PF4 preview: https://patternfly-react-pr-5256.surge.sh |
Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
|
@boaz0 Thanks for the quick fix! It looks like this only changes the width of the wizard if it's in a modal. But a user still can't set custom width for the wizard like they can set the height. |
|
Um, sorry I didn't realized that. Can you elaborate more what is the use case? If you have mocks or screenshots that will be helpful too. Thanks. |
|
I saw that there were a width prop that wasn't used so it was weird. |
Codecov Report
@@ Coverage Diff @@
## master #5256 +/- ##
==========================================
- Coverage 52.20% 52.19% -0.01%
==========================================
Files 575 575
Lines 10972 10976 +4
Branches 4100 4103 +3
==========================================
+ Hits 5728 5729 +1
Misses 4513 4513
- Partials 731 734 +3
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
| const wizard = ( | ||
| <WizardContextProvider value={context}> | ||
| <div | ||
| {...rest} | ||
| className={css(styles.wizard, activeStep && activeStep.isFinishedStep && 'pf-m-finished', className)} | ||
| {...(height && { style: { height } })} | ||
| style={Object.keys(divStyles).length ? divStyles : undefined} |
There was a problem hiding this comment.
We have CSS vars you can use here or via setProperty() to control the width and max-width. That's usually preferred as we may use that variable to help calculate some other property value that references the modal's width.
--pf-c-modal-box--Width - sets the width
--pf-c-modal-box--MaxWidth - sets the max-width
Helpful if you want the modal to be say, 50%, but not exceed 800px (--pf-c-modal-box--Width: 50%; --pf-c-modal-box--MaxWidth: 800px;)
There was a problem hiding this comment.
does it apply on the wizard when it's not displayed inside a modal?
There was a problem hiding this comment.
Oh sorry @boaz0, I read this wrong, I thought the width applied to the modal. My suggestion would not change anything with the wizard at all. It should only change the modal. When the wizard is used in a modal, it is set to fill the full width and height of the modal. So by updating the modal's dimensions, the wizards dimensions automatically change to match the modal's.
If this feature is only to change the width of the wizard when in a modal, personally I think we should change the width of the modal. And instead of using the var I suggested, I just looked up the modal docs and <Modal> supports a width prop.
But if we also want the ability for someone to pass a width to the wizard when used outside of a modal, the approach in the PR makes sense. Another approach we could take for that, assuming the wizard is used in a page section, is to allow a custom max-width on page sections, and allow the user to set the max width on the page section the wizard is in.
|
@redallen Yes as I saw that in the Wizard documentation here: https://www.patternfly.org/v4/components/wizard#props But as mcoker said I can use |
What: Closes #5254
//cc @MariaAga