Skip to content

Commit e1eedb6

Browse files
rvsiaHyperkid123
rvsia
authored and
Hyperkid123
committed
fix(pf4): update wizard to latest and add missing props
1 parent 3430184 commit e1eedb6

File tree

4 files changed

+68
-47
lines changed

4 files changed

+68
-47
lines changed

‎packages/pf4-component-mapper/demo/demo-schemas/wizard-schema.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ export const wizardSchema = {
5555
title: 'Title',
5656
showTitles: true,
5757
description: 'Description',
58-
buttonsPosition: 'left',
5958
fields: [
6059
{
6160
title: 'Get started with adding source',
@@ -169,7 +168,6 @@ export const wizardSchemaWithFunction = {
169168
title: 'Title',
170169
showTitles: true,
171170
description: 'Description',
172-
buttonsPosition: 'left',
173171
fields: [
174172
{
175173
title: 'Get started with adding source',
@@ -269,7 +267,6 @@ export const wizardSchemaSimple = {
269267
name: 'wizzard',
270268
title: 'Title',
271269
description: 'Description',
272-
buttonsPosition: 'left',
273270
fields: [
274271
{
275272
title: 'Get started with adding source',
@@ -324,7 +321,6 @@ export const wizardSchemaSubsteps = {
324321
name: 'wizzard',
325322
title: 'Title',
326323
description: 'Description',
327-
buttonsPosition: 'left',
328324
fields: [
329325
{
330326
title: 'Get started with adding source',
@@ -377,7 +373,6 @@ export const wizardSchemaMoreSubsteps = {
377373
name: 'wizzard',
378374
title: 'Dynamic with steps predicting',
379375
description: 'Description',
380-
buttonsPosition: 'left',
381376
fields: [
382377
{
383378
title: 'Get started with adding source',

‎packages/pf4-component-mapper/src/files/wizard.js

Lines changed: 62 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ const Modal = ({ children, container, inModal }) =>
1616
inModal
1717
? createPortal(
1818
<Backdrop>
19-
<Bullseye>{children}</Bullseye>
19+
<Bullseye>
20+
<div className="pf-c-modal-box pf-m-lg">{children}</div>
21+
</Bullseye>
2022
</Backdrop>,
2123
container
2224
)
@@ -29,9 +31,6 @@ const WizardInternal = ({
2931
description,
3032
buttonLabels,
3133
buttonsClassName,
32-
setFullWidth,
33-
setFullHeight,
34-
isCompactNav,
3534
showTitles,
3635
formOptions,
3736
currentStep,
@@ -44,7 +43,15 @@ const WizardInternal = ({
4443
activeStepIndex,
4544
maxStepIndex,
4645
isDynamic,
47-
container
46+
container,
47+
hideClose,
48+
titleId,
49+
descriptionId,
50+
closeButtonAriaLabel,
51+
hasNoBodyPadding,
52+
prevSteps,
53+
navAriaLabel,
54+
...rest
4855
}) => {
4956
const [state, dispatch] = useReducer(reducer, { loading: true, container });
5057

@@ -76,43 +83,55 @@ const WizardInternal = ({
7683
return (
7784
<Modal inModal={inModal} container={state.container}>
7885
<div
79-
className={`pf-c-wizard ${inModal ? '' : 'no-shadow'} ${isCompactNav ? 'pf-m-compact-nav' : ''} ${setFullWidth ? 'pf-m-full-width' : ''} ${
80-
setFullHeight ? 'pf-m-full-height' : ''
81-
}`}
86+
className={`pf-c-wizard ${inModal ? '' : 'no-shadow'}`}
8287
role="dialog"
8388
aria-modal={inModal ? 'true' : undefined}
8489
onKeyDown={onKeyDown}
90+
{...rest}
8591
>
86-
{title && <WizardHeader title={title} description={description} onClose={formOptions.onCancel} />}
87-
<div className="pf-c-wizard__outer-wrap">
88-
<WizardNav>
89-
<FormSpy subscription={{ values: true, valid: true, validating: true }}>
90-
{({ values, valid, validating }) => (
91-
<WizardNavigation
92-
navSchema={navSchema}
93-
activeStepIndex={activeStepIndex}
94-
valid={valid}
95-
maxStepIndex={maxStepIndex}
96-
jumpToStep={jumpToStep}
97-
crossroads={crossroads}
98-
isDynamic={isDynamic}
99-
values={values}
100-
setPrevSteps={setPrevSteps}
101-
validating={validating}
102-
/>
103-
)}
104-
</FormSpy>
105-
</WizardNav>
106-
<WizardStep
107-
{...currentStep}
108-
formOptions={formOptions}
109-
buttonLabels={buttonLabels}
110-
buttonsClassName={buttonsClassName}
111-
showTitles={showTitles}
112-
handleNext={(nextStep) => handleNext(nextStep)}
113-
handlePrev={handlePrev}
114-
disableBack={activeStepIndex === 0}
92+
{title && (
93+
<WizardHeader
94+
title={title}
95+
description={description}
96+
onClose={formOptions.onCancel}
97+
hideClose={hideClose}
98+
titleId={titleId}
99+
descriptionId={descriptionId}
100+
closeButtonAriaLabel={closeButtonAriaLabel}
115101
/>
102+
)}
103+
<div className="pf-c-wizard__outer-wrap">
104+
<div className="pf-c-wizard__inner-wrap">
105+
<WizardNav aria-label={navAriaLabel}>
106+
<FormSpy subscription={{ values: true, valid: true, validating: true }}>
107+
{({ values, valid, validating }) => (
108+
<WizardNavigation
109+
navSchema={navSchema}
110+
activeStepIndex={activeStepIndex}
111+
valid={valid}
112+
maxStepIndex={maxStepIndex}
113+
jumpToStep={jumpToStep}
114+
crossroads={crossroads}
115+
isDynamic={isDynamic}
116+
values={values}
117+
setPrevSteps={setPrevSteps}
118+
validating={validating}
119+
/>
120+
)}
121+
</FormSpy>
122+
</WizardNav>
123+
<WizardStep
124+
{...currentStep}
125+
formOptions={formOptions}
126+
buttonLabels={buttonLabels}
127+
buttonsClassName={buttonsClassName}
128+
showTitles={showTitles}
129+
handleNext={(nextStep) => handleNext(nextStep)}
130+
handlePrev={handlePrev}
131+
disableBack={activeStepIndex === 0}
132+
hasNoBodyPadding={hasNoBodyPadding}
133+
/>
134+
</div>
116135
</div>
117136
</div>
118137
</Modal>
@@ -136,6 +155,12 @@ WizardInternal.propTypes = {
136155
isDynamic: PropTypes.bool,
137156
showTitles: PropTypes.bool,
138157
crossroads: PropTypes.arrayOf(PropTypes.string),
158+
hideClose: PropTypes.bool,
159+
titleId: PropTypes.string,
160+
descriptionId: PropTypes.string,
161+
closeButtonAriaLabel: PropTypes.string,
162+
hasNoBodyPadding: PropTypes.bool,
163+
navAriaLabel: PropTypes.string,
139164
...wizardProps
140165
};
141166

‎packages/pf4-component-mapper/src/files/wizard/wizard-nav.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const WizardNavigationInternal = React.memo(
3131
return (
3232
<WizardNavItem
3333
key={step.substepOf || step.title}
34-
text={step.substepOf || step.title}
34+
content={step.substepOf || step.title}
3535
isCurrent={substeps ? activeStepIndex >= step.index && activeStepIndex < step.index + substeps.length : activeStepIndex === step.index}
3636
isDisabled={isValid ? maxStepIndex < step.index : step.index > activeStepIndex}
3737
onNavItemClick={(ind) => jumpToStep(ind, isValid)}
@@ -42,7 +42,7 @@ const WizardNavigationInternal = React.memo(
4242
{substeps.map((substep) => (
4343
<WizardNavItem
4444
key={substep.title}
45-
text={substep.title}
45+
content={substep.title}
4646
isCurrent={activeStepIndex === substep.index}
4747
isDisabled={isValid ? maxStepIndex < substep.index : substep.index > activeStepIndex}
4848
onNavItemClick={(ind) => jumpToStep(ind, isValid)}

‎packages/pf4-component-mapper/src/files/wizard/wizard-step.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ RenderTitle.propTypes = {
1717
customTitle: PropTypes.node
1818
};
1919

20-
const WizardStep = ({ name, title, description, fields, formOptions, showTitles, showTitle, customTitle, ...rest }) => {
20+
const WizardStep = ({ name, title, description, fields, formOptions, showTitles, showTitle, customTitle, hasNoBodyPadding, ...rest }) => {
2121
const formRef = useRef();
2222

2323
useEffect(() => {
@@ -30,7 +30,7 @@ const WizardStep = ({ name, title, description, fields, formOptions, showTitles,
3030

3131
return (
3232
<Fragment>
33-
<WizardBody hasBodyPadding={true}>
33+
<WizardBody hasNoBodyPadding={hasNoBodyPadding}>
3434
<div ref={formRef} className="pf-c-form">
3535
{((showTitles && showTitle !== false) || showTitle) && <RenderTitle title={title} customTitle={customTitle} />}
3636
{fields.map((item) => formOptions.renderForm([item], formOptions))}
@@ -51,7 +51,8 @@ WizardStep.propTypes = {
5151
showTitles: PropTypes.bool,
5252
showTitle: PropTypes.bool,
5353
customTitle: PropTypes.node,
54-
name: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
54+
name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
55+
hasNoBodyPadding: PropTypes.bool
5556
};
5657

5758
export default WizardStep;

0 commit comments

Comments
 (0)