fix(wizard): reworked wizard so it can be used in modal

[mcoker]

fixes #2046

@tlabaj @mcarrano this is pretty straight forward except for one thing. The wizard when used in a modal needs a defined height, otherwise the height will be defined by the wizard contents and will change as a user progresses through the wizard. There are a couple of ways we can do this.

1. Assign a height to the wizard for use when it's in a modal, then modify that height when the wizard is used in context of the page (the "in page" variation). This seems to work just fine and allows us to define a specific height for the wizard (that the user can override), but it means that we need to maintain separate variations of the wizard for use in the page and in a modal. The user impact is that the user has to specify the modal width when using a modal, and they have to specify the "in page" variation when using the modal in a page.

2. Add an enhancement to the modal to define a modal height (that is overridable by the user, similar to the height variations we currently offer) and allow that to set the wizard modal height. The wizard can then simply occupy the height of the container it's in both the modal and in page variations, meaning we could do away with the in page wizard variation. The user impact of this is that the user must specify both the width and height when using a modal, but doesn't have to specify a variation of the wizard to use in either context.

Breaking changes

This PR removes the "modal" functionality/layout from the wizard and makes it a normal container that fills the space of the element it is placed inside of. Another way of looking at it is that we took the .pf-m-in-page variation, and made that the default and only presentation of the modal. One unique feature of the wizard compared to other components is that it will also attempt to fill the height of its parent container via height: 100%. And when placed inside of the modal component, the wizard takes on the height of 762px, which is the same as the height of the wizard modal prior to this change.

When using the wizard in a modal, simply omit all of the element children of the modal component, and place the .pf-c-wizard component as the direct and only child of .pf-c-modal-box.

The following modifiers have been removed. Any reference to these modifiers is no longer necessary and should be removed as they are no longer in patternfly.

• .pf-m-full-width
• .pf-m-full-height
• .pf-m-in-page

The following variables have been removed. Any instance of them should be removed as they are no longer used in patternfly.

• --pf-c-wizard--BoxShadow
• --pf-c-wizard--Width
• --pf-c-wizard--lg--Width
• --pf-c-wizard--lg--MaxWidth
• --pf-c-wizard--lg--Height
• --pf-c-wizard--lg--MaxHeight
• --pf-c-wizard--m-full-width--lg--MaxWidth
• --pf-c-wizard--m-full-height--lg--Height
• --pf-c-wizard--m-in-page--BoxShadow
• --pf-c-wizard--m-in-page--Height
• --pf-c-wizard--m-in-page--Width
• --pf-c-wizard--m-in-page--lg--MaxWidth
• --pf-c-wizard--m-in-page--lg--MaxHeight
• --pf-c-wizard--m-in-page__nav-list--md--PaddingLeft
• --pf-c-wizard--m-in-page__nav-list--xl--PaddingLeft
• --pf-c-wizard--m-in-page__main-body--md--PaddingTop
• --pf-c-wizard--m-in-page__main-body--md--PaddingRight
• --pf-c-wizard--m-in-page__main-body--md--PaddingBottom
• --pf-c-wizard--m-in-page__main-body--md--PaddingLeft
• --pf-c-wizard--m-in-page__main-body--xl--PaddingRight
• --pf-c-wizard--m-in-page__main-body--xl--PaddingLeft
• --pf-c-wizard--m-in-page__footer--md--PaddingTop`
• --pf-c-wizard--m-in-page__footer--md--PaddingRight
• --pf-c-wizard--m-in-page__footer--md--PaddingBottom
• --pf-c-wizard--m-in-page__footer--md--PaddingLeft
• --pf-c-wizard--m-in-page__footer--xl--PaddingRight
• --pf-c-wizard--m-in-page__footer--xl--PaddingLeft

The following variables have been renamed. Any reference to the old variable name should be updated to reference the new variable instead.

• --pf-c-wizard__close--lg--Right renamed to --pf-c-wizard__close--xl--Right
• --pf-c-wizard__main-body--lg--PaddingTop renamed to --pf-c-wizard__main-body--xl--PaddingTop
• --pf-c-wizard__main-body--lg--PaddingRight renamed to --pf-c-wizard__main-body--xl--PaddingRight
• --pf-c-wizard__main-body--lg--PaddingBottom renamed to --pf-c-wizard__main-body--xl--PaddingBottom
• --pf-c-wizard__main-body--lg--PaddingLeft renamed to --pf-c-wizard__main-body--xl--PaddingLeft
• --pf-c-wizard__footer--lg--PaddingTop renamed to --pf-c-wizard__footer--xl--PaddingTop
• --pf-c-wizard__footer--lg--PaddingRight renamed to --pf-c-wizard__footer--xl--PaddingRight
• --pf-c-wizard__footer--lg--PaddingBottom renamed to --pf-c-wizard__footer--xl--PaddingBottom
• --pf-c-wizard__footer--lg--PaddingLeft renamed to --pf-c-wizard__footer--xl--PaddingLeft

[patternfly-build]

Preview: https://patternfly-pr-2964.surge.sh

A11y report: https://patternfly-pr-2964-coverage.surge.sh

[mcarrano]

@mcoker I'm having a bit of a hard time understanding the examples and what I should be looking for. As to your question, IMO the second option seems like a cleaner approach.

Just another small thing, a while ago we decided that the Cancel button should be spaced further away from the Next and Back buttons. I don't see that here. Here is the most recent visual spec:

[mcoker]

@mcarrano the cancel button spacing was put on hold in favor of the action list component - #2021.

[mcarrano]

Yes, I do recall that @mcoker . Do you know if this is on the roadmap? It was defined a while ago and I am surprised it was never implemented.

[mcoker]

@mcarrano it's slated for the 2020.08 milestone - June 23.

[mcoker]

@mcarrano this PR is ready for review. Our modal now behaves like a card, where if you simply omit the title/body/footer, it’s a box (with no padding) to put things in. Users only have to specify the size variation of the modal to use (large). The wizard detects that it is in a modal and retains its existing height (762px), and shrinks with the window. I tested on large and small screens and it looks good. There is only 16px padding around the window when the modal shrinks to fit the window size, so not much real estate lost from how the existing wizard goes to the edges of the window on small screens.

[mcarrano]

This looks great @mcoker . The only question I have is whether you think we should rename the first demo example to "Modal" vs "Basic" to make it more clear that this is an example of the Wizard component placed inside of a modal container. So there no longer is such a thing as a wizard that stands on it's own.

[christiemolloy]

this is such a specific height, maybe add a comment explaining why it is this height

[christiemolloy]

nicee very clean

[mattnolting]

🔥 Great work, LPTM!

[christiemolloy]

Release notes look great!