chore(Wizard): updated demos per design (#11541)

* chore(Wizard): updated demos per design

* Fixed height styling inpage demos

Author: thatblindgeye

packages/react-core/src/demos/examples/Wizard/InModal.tsx

@@ -46,7 +46,6 @@ export const WizardInModalDemo: React.FunctionComponent = () => (
             closeButtonAriaLabel="Close wizard"
           />
         }
-        height={400}
       >
         <WizardStep name="Information" id="wizard-step-1">
           <p>Step 1 content</p>

packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx

@@ -4,7 +4,6 @@ import {
   Drawer,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
@@ -38,7 +37,7 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -86,7 +85,6 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
             descriptionId="wiz-modal-demo-description"
           />
         }
-        height={400}
       >
         <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
           {createStepContentWithDrawer('Information step')}

packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx

@@ -7,7 +7,6 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   Flex,
   Modal,
@@ -39,7 +38,7 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -91,7 +90,6 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
             descriptionId="wiz-modal-demo-description"
           />
         }
-        height={400}
       >
         <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
           {createStepContentWithDrawer('Information step')}

packages/react-core/src/demos/examples/Wizard/InPage.tsx

@@ -5,7 +5,7 @@ import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrap
 export const WizardFullPage: React.FunctionComponent = () => (
   <React.Fragment>
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type={PageSectionTypes.wizard}>
+      <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
         <Wizard>
           <WizardStep name="Information" id="wizard-step-1">
             <p>Step 1 content</p>

packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -10,7 +10,6 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   Flex,
   Nav,
@@ -135,7 +134,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -180,7 +179,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
             <p>A demo of a wizard in a page.</p>
           </Content>
         </PageSection>
-        <PageSection type={PageSectionTypes.wizard}>
+        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
           <Wizard>
             <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}

packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -11,7 +11,6 @@ import {
   DrawerContent,
   DrawerHead,
   DrawerPanelContent,
-  DrawerColorVariant,
   Flex,
   Nav,
   NavItem,
@@ -135,7 +134,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -184,7 +183,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
             <p>A demo of a wizard in a page.</p>
           </Content>
         </PageSection>
-        <PageSection type={PageSectionTypes.wizard} ß>
+        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} ß>
           <Wizard>
             <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}