Skip to content

fix(Modal): fix Formik bug in Modal#9797

Merged
sstrubberg merged 4 commits into
carbon-design-system:mainfrom
JohnWColby:9523-fix-modal-formik-bug
Oct 7, 2021
Merged

fix(Modal): fix Formik bug in Modal#9797
sstrubberg merged 4 commits into
carbon-design-system:mainfrom
JohnWColby:9523-fix-modal-formik-bug

Conversation

@JohnWColby

Copy link
Copy Markdown
Contributor

Closes #9523

Breaking the secondary buttons out into their own sub-component (here) created the bug described in the above issue. I understand that this was probably done for readability / maintainability, but it also is causing additional re-renders when used with Formik that are resulting in incorrect behavior.

Changelog

Changed

  • Directly build out the secondary button set rather than using a sub-component

Removed

  • Remove SecondaryButtonSet sub-component

Testing / Reviewing

I tested this by linking my local version of Carbon to my local version of our application, but a more generic way to test would be to run this CodeSandbox locally, linked to a local version of Carbon on this branch.

@JohnWColby JohnWColby requested a review from a team as a code owner October 4, 2021 15:59
@netlify

netlify Bot commented Oct 4, 2021

Copy link
Copy Markdown

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 80d4923

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/615efed568df9e0007cf228a

😎 Browse the preview: https://deploy-preview-9797--carbon-react-next.netlify.app

@github-actions

github-actions Bot commented Oct 4, 2021

Copy link
Copy Markdown
Contributor

DCO Assistant Lite bot All contributors have signed the DCO.

@JohnWColby

Copy link
Copy Markdown
Contributor Author

I have read the DCO document and I hereby sign the DCO.

aria-label={iconDescription}
ref={this.button}>
ref={this.button}
>

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes throughout this file seemed to be added via husky during the commit process-- hopefully they fit with this repo's conventions.

@netlify

netlify Bot commented Oct 4, 2021

Copy link
Copy Markdown

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 80d4923

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/615efed5e825140007eb3a85

😎 Browse the preview: https://deploy-preview-9797--carbon-components-react.netlify.app

@netlify

netlify Bot commented Oct 4, 2021

Copy link
Copy Markdown

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 80d4923

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/615efed5569b1800085a4f2c

😎 Browse the preview: https://deploy-preview-9797--carbon-elements.netlify.app

@aledavila aledavila left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this completely breaks modal as I'm not seeing in the preview at all.

- Remove SecondaryButtonSet sub-component (causing re-renders w/ Formik)
@JohnWColby JohnWColby force-pushed the 9523-fix-modal-formik-bug branch from 8f2ad2e to d0849c4 Compare October 5, 2021 00:40
@JohnWColby

JohnWColby commented Oct 5, 2021

Copy link
Copy Markdown
Contributor Author

Interesting, the preview excludes the following components that appear on https://react.carbondesignsystem.com/:
AspectRatio
ComposedModal
CopyButton
DataTable
ErrorBoundary
FormGroup
FormLabel
Grid
Link
Loading
Modal
OrderedList
TooltipDefinition
TooltipIcon
UnorderedList

The preview also includes a few components that don't exist in the main Storybook:
Layer
Popover
Theme

I'm not sure why this might be... I've rebased this PR on the latest main, in case not being fully up-to-date has something to do with it...

@JohnWColby

Copy link
Copy Markdown
Contributor Author

Is there a way to get netlify to run again with the latest? Or does it do that automatically?

@tay1orjones

tay1orjones commented Oct 5, 2021

Copy link
Copy Markdown
Member

Sorry for the confusion @ColbyJohnIBM, there are three different deploy previews built for each pull request:

  1. carbon-react-next
    • New storybook from a new v11 package @carbon/react, ./packages/carbon-react, currently in beta.
  2. carbon-components-react
    • This is the one you'll want to validate against, it's the preview for the existing storybook for
      carbon-components-react, ./packages/react
  3. carbon-elements
    • Preview specifically for the elements packages; grid, layout, colors, etc.

The Netlify comment body will indicate which link is for which preview.

These deploys will all automatically update/re-deploy to the same URL when new commits are pushed to the pull request, or the pull request is updated with latest from main

@jnm2377

jnm2377 commented Oct 5, 2021

Copy link
Copy Markdown
Contributor

I'm seeing the preview work properly, button variations (0/1/2/3) are all rendering as expected. cc: @aledavila
Screen Shot 2021-10-05 at 3 49 08 PM

@aledavila aledavila left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

works as expected

@sstrubberg

Copy link
Copy Markdown
Member

@ColbyJohnIBM let us know if you need a hand running yarn format:diff to resolve your CI issues.

@sstrubberg sstrubberg merged commit 2612bbd into carbon-design-system:main Oct 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Modal]: Use of Modal with Formik makes secondary button require a double click

5 participants