Skip to content

Commit 2612bbd

Browse files
JohnWColbyAlessandra Davilasstrubberg
authored
fix(Modal): fix Formik bug in Modal (#9797)
* fix(Modal): fix Formik bug in Modal - Remove SecondaryButtonSet sub-component (causing re-renders w/ Formik) * fix(modal): formatting issues Co-authored-by: Alessandra Davila <aledavila@ibm.com> Co-authored-by: Scott Strubberg <sstrubberg@us.ibm.com>
1 parent 6e52398 commit 2612bbd

4 files changed

Lines changed: 52 additions & 52 deletions

File tree

‎.all-contributorsrc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -801,6 +801,15 @@
801801
"contributions": [
802802
"code"
803803
]
804+
},
805+
{
806+
"login": "ColbyJohnIBM",
807+
"name": "ColbyJohnIBM",
808+
"avatar_url": "https://avatars.githubusercontent.com/u/19613692?v=4",
809+
"profile": "https://github.com/ColbyJohnIBM",
810+
"contributions": [
811+
"code"
812+
]
804813
}
805814
],
806815
"commitConvention": "none"

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
187187
<td align="center"><a href="https://github.com/adamalston"><img src="https://avatars.githubusercontent.com/u/18297826?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adam Alston</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=adamalston" title="Documentation">📖</a></td>
188188
<td align="center"><a href="https://github.com/Kiittyka"><img src="https://avatars.githubusercontent.com/u/41021851?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Krithika S Udupa</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kiittyka" title="Documentation">📖</a></td>
189189
<td align="center"><a href="https://github.com/egriff38"><img src="https://avatars.githubusercontent.com/u/6627718?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eshin Griffith</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=egriff38" title="Code">💻</a></td>
190+
<td align="center"><a href="https://github.com/ColbyJohnIBM"><img src="https://avatars.githubusercontent.com/u/19613692?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ColbyJohnIBM</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ColbyJohnIBM" title="Code">💻</a></td>
190191
</tr>
191192
</table>
192193

‎packages/react/src/components/Modal/Modal.js‎

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -451,32 +451,6 @@ export default class Modal extends Component {
451451
alertDialogProps['aria-describedby'] = this.modalBodyId;
452452
}
453453

454-
const SecondaryButtonSet = () => {
455-
if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
456-
return secondaryButtons.map(
457-
({ buttonText, onClick: onButtonClick }, i) => (
458-
<Button
459-
key={`${buttonText}-${i}`}
460-
kind="secondary"
461-
onClick={onButtonClick}>
462-
{buttonText}
463-
</Button>
464-
)
465-
);
466-
}
467-
if (secondaryButtonText) {
468-
return (
469-
<Button
470-
kind="secondary"
471-
onClick={onSecondaryButtonClick}
472-
ref={this.secondaryButton}>
473-
{secondaryButtonText}
474-
</Button>
475-
);
476-
}
477-
return null;
478-
};
479-
480454
const modalBody = (
481455
<div
482456
ref={this.innerModal}
@@ -514,7 +488,25 @@ export default class Modal extends Component {
514488
)}
515489
{!passiveModal && (
516490
<ButtonSet className={footerClasses}>
517-
<SecondaryButtonSet />
491+
{Array.isArray(secondaryButtons) && secondaryButtons.length <= 2
492+
? secondaryButtons.map(
493+
({ buttonText, onClick: onButtonClick }, i) => (
494+
<Button
495+
key={`${buttonText}-${i}`}
496+
kind="secondary"
497+
onClick={onButtonClick}>
498+
{buttonText}
499+
</Button>
500+
)
501+
)
502+
: secondaryButtonText && (
503+
<Button
504+
kind="secondary"
505+
onClick={onSecondaryButtonClick}
506+
ref={this.secondaryButton}>
507+
{secondaryButtonText}
508+
</Button>
509+
)}
518510
<Button
519511
kind={danger ? 'danger' : 'primary'}
520512
disabled={primaryButtonDisabled}

‎packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -167,36 +167,34 @@ exports[`ModalWrapper should render 1`] = `
167167
<div
168168
className="bx--modal-footer bx--btn-set"
169169
>
170-
<SecondaryButtonSet>
171-
<Button
172-
dangerDescription="danger"
170+
<Button
171+
dangerDescription="danger"
172+
disabled={false}
173+
isExpressive={false}
174+
kind="secondary"
175+
onClick={[Function]}
176+
size="default"
177+
tabIndex={0}
178+
tooltipAlignment="center"
179+
tooltipPosition="top"
180+
type="button"
181+
>
182+
<button
183+
aria-describedby={null}
184+
aria-pressed={null}
185+
className="bx--btn bx--btn--secondary"
173186
disabled={false}
174-
isExpressive={false}
175-
kind="secondary"
187+
onBlur={[Function]}
176188
onClick={[Function]}
177-
size="default"
189+
onFocus={[Function]}
190+
onMouseEnter={[Function]}
191+
onMouseLeave={[Function]}
178192
tabIndex={0}
179-
tooltipAlignment="center"
180-
tooltipPosition="top"
181193
type="button"
182194
>
183-
<button
184-
aria-describedby={null}
185-
aria-pressed={null}
186-
className="bx--btn bx--btn--secondary"
187-
disabled={false}
188-
onBlur={[Function]}
189-
onClick={[Function]}
190-
onFocus={[Function]}
191-
onMouseEnter={[Function]}
192-
onMouseLeave={[Function]}
193-
tabIndex={0}
194-
type="button"
195-
>
196-
Cancel
197-
</button>
198-
</Button>
199-
</SecondaryButtonSet>
195+
Cancel
196+
</button>
197+
</Button>
200198
<Button
201199
dangerDescription="danger"
202200
disabled={false}

0 commit comments

Comments
 (0)