Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(file-uploader): show onAddFiles action in storybook #9626

Merged

Conversation

janhassel
Copy link
Member

Right now, the FileUploaderDropContainer story is showing onChange as the only event in the actions panel.

onChange isn't in the prop types though but gives the impression to work because it is emitted on the <label> element and therefore is called when the underlying <input type="file"> fires an onChange.

The problem is: this means that onChange is only called when the user clicks on the input and selects a file. If the user drags and drops a file on the container, onChange is not called.

This PR updates the action in the storybook to show the preferred (and listed in the prop types) onAddFiles. which reacts to both: manual selection by clicking and dropping a file.

Changelog

Changed

  • FileUploaderDropContainr story: use onAddFiles instead of onChange as action

Testing / Reviewing

  • Visit current react storybook, try to drop a file -> there shouldn't be any action shown in the story
  • Run the react storybook with this PR and drop a file -> there should be an action shown: onAddFiles

@janhassel janhassel requested a review from a team as a code owner September 9, 2021 11:06
@netlify
Copy link

netlify bot commented Sep 9, 2021

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

🔨 Explore the source changes: b8b37a9

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

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

@netlify
Copy link

netlify bot commented Sep 9, 2021

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: b8b37a9

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

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

@netlify
Copy link

netlify bot commented Sep 9, 2021

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

🔨 Explore the source changes: b8b37a9

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

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

@sstrubberg
Copy link
Member

Hey @janhassel, thanks for the PR. It works like a champ locally but in the deploy preview I'm getting a CORS error in the console when I try to drag n' drop the file. This is something I'm noticing with Storybook Actions throughout our entire Storybook. REF #9593

@janhassel
Copy link
Member Author

@sstrubberg I wonder if this just due to the netlify preview. If I drag and drop a file in the story on react.carbondesignsystem.com I don't see that error.

@sstrubberg
Copy link
Member

@janhassel That would be awesome if that were the case. I'm down to merge and then see what happens in prod. We can always submit a PR to remove the actions if it busts.

@kodiakhq kodiakhq bot merged commit d577bc7 into carbon-design-system:main Sep 20, 2021
@janhassel janhassel deleted the fileuploader-dropcontainer-story branch September 21, 2021 04:39
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.

3 participants