Issue #347 : Add remove button to default file input previews #526
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
chawes13
reviewed
Jan 18, 2022
Comment on lines
199
to
206
| {shouldShowClearInputButton && ( | ||
| <RemoveButton | ||
| file={files[0]} | ||
| onRemove={() => { | ||
| removeFile(0) | ||
| }} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
@nicoledow This does a few unexpected things: 1) it uses RemoveButton, even if the user has passed in a custom removeComponent prop and 2) it puts the remove button below the input, not inline with the preview
How it looks with multiple = true:
How it looks with multiple = false:
What if we removed the multiple condition check on line 164?
There was a problem hiding this comment.
@chawes13 good points! I removed the multiple check and the experience should be consistent now between multiple = true and multiple = false
|
@nicoledow Thanks! Could you update the documentation via the JS doc comments on line 37 and 39 in |
|
@chawes13 docs updated ✅ |
chawes13
added a commit
that referenced
this pull request
Jul 6, 2022
* Add `hideLabel` prop (#227) * add hideLabel prop, story * update showLabel logic, add new story * remove import * Version bump: 3.7.0 * add input label test, fix range input test * lint * change range label prop name * Add `Select` placeholder option by default (#256) * add default placeholder * Version bump: 3.12.0 * Lint rolling * Mapping aria-disabled instead of disabled (#337) * a11y group legends (#384) * Default label component to a legend for checkbox group * Default label component to a legend for radio group * Remove custom style prop on button (#408) * Remove custom style prop on button * Remove disabled button test * Cleanup * Some formatting * Priority -> variant * Add migration guide * Naming * Consolidate examples * Move deprecated migration guide to v6 milestone * Fix merge conflict * Take prop change name one level of abstraction further to accommodate changes in future * Modify File Input to accept multiple files (#380) * Initial refactor * Replace remove button with customizable component that accepts handler * POC for workaround with files failing to load (mostly a upstream cloudinary issue) * Refactor to a controlled file input (#388) * Initial proof-of-concept * Clean up logic and add dev hints via prop types * Always return an array * Read files synchronously to avoid overwrites * Modify markup to allow for focus styling * Code review feedback * Make cloudinary accept a file input and set the response appropriately * Extract helpers into shared folder * Override read files utility and clean up based on code review * filter invalid props from getting passed to error label (incl. label = false) * Return files on cloudinary read * Code clean-up * Update CloudinaryFileInput docs * Update FileInput docs * Bump size limit * Bump to milestone * Fix failing specs * Remove duplicate import * Fix merge conflicts * Add specs for multiple file input * Add coverage for inverse scenario * Add missing tests for remove functionality * Refactor FileInput using hooks * Use hook import directly * Safely mock global object in an isolated way * Wrap component in act to ensure state updates have settled * Add tests for error capture * Cover ternary branching conditions * Update migration guide * Code review feedback * Add new test * Manually updating docs * Refactor to always store values in an array * Update migration guide based on input value change * Update prop types * Do not change initial value if not an array (it will flag form as dirty) * Add thumbnail story * Code review feedback * Globally replace redux-forms * Reference array instead of single file * Add className to spinner component (#493) * change id to classname on spinner component * revert inadvertnet commit * add className to spinner component * passing tests and update version * add notes on the migration guide file * adding feedback changes * fix migration guide * update language in migration guide * additional feedback comments * update default prop * add destructuring to props * Small tweaks * Add missing period Co-authored-by: Conor Hawes <[email protected]> * Made options & value as required for the TabBar component (#461) * Made options & value as required for the TabBar component * bump version * update docs, storybook, tests. remove unneeded activeValue logic * Small documentation tweaks * Update docs and travis * Address linting errors * Address unrelated lint error Co-authored-by: Conor <[email protected]> * Issue #347 : Add remove button to default file input previews (#526) * show clear button for single file upload * formatting * tests for clear file input btn * make remove button for single file consistent with remove button for multiple files * update docs * run yarn docs manually * Add small note to migration guide Co-authored-by: Conor Hawes <[email protected]> * 524 remove setter link (#528) * Remove SetterLink * Update docs * Modal close refactor (#525) * Prevent all methods of closure * Update migration guide * Make isOpen prop less confusing * Manually update docs * Pass redux flash message to dismiss fn (#522) * Add ref forwarding to button (#542) * Add button ref note to migration guide * Fix tests and prop types (#553) * Hotfix * Be more specific * Fix select test warnings * Fix textarea test warnings * Fix file input test warnings * Dedupe yarn.lock file to help resolve issues * allow cell to take custom properties like aria and data-cy per cell b… (#503) * allow cell to take custom properties like aria and data-cy per cell by column * versioning to 5.4.3 * add filterInvalidProps to DefaultCellComponent render * add back space * add sortable-table.test.js test for addition; * remove custom class for valid dom prop * add test for invalid DOM props on column * Tweak formatting * Remove unnecessary attributes Co-authored-by: Conor Hawes <[email protected]> * Do not overwrite default modal classes (#554) * Add functionality * Add specs * Add story * Update migration guide * Tweak migration guide * render caption in table if passed in as a prop (#540) * render caption if passed in as a prop * remove semicolons i missed * migration guide * Render caption as table's first descendant * Add story * Fix typo * Rename file to match convention * Fix more typos * Add caption tests Co-authored-by: Conor Hawes <[email protected]> * Add GitHub issue templates (#555) * Add issue templates * Update FEATURE_REQUEST.md * Add support for additional undocumented props (#556) * Add support for additional undocumented props * Update docs and support callback ref as a prop * Actually update docs * Add disabled class to outer field wrapper (#557) * Add disabled class at top level * Update spec * Bug/react modal default (#559) * Switch selector * Apply aria-hidden on the browser * Update documentation * Fix prop documentation 😳 * Upgrade DateInput's react-datepicker dependency (#558) * Add missing test case * Upgrade to v2 * Upgrade to v3 * Update to v4 * Tweak formatting * Update migration guide * Update docs * Use calendar ref * Simplify implementation * Generate docs after merge * Write a better comment * Extend radio checkbox prop types (#563) * Do not use input prop types for a component that is not an input * Isolate components to allow for checkbox and radio groups to receive bools * Reuse type * Fix tabbar prop type issue * Remove unused import * Update docs * Upgrade to react-switch to v7 (#564) * Update package independently (#565) * Upgrade to react 17 (#569) * Remove lp hoc (#562) * Remove unused sortable imports * Remove toggle usage from most components * Update input-label * Remove unused hoc * Remove toggle and outside click hocs * Port over most files from lp-hoc's cloudinary uploader * Bring over cloudinary uploader and tweak tests * Clean up util usage * Use cloudinary hoc mock in file input test * Officially remove lp-hoc from library * Suppress unnecessary errors shown in modal * Lint * Add back export for cloudinary uploader util * Update migration guide * Fix heading formatting * Update docs * Always set a boolean value * Add docs about breaking change * Update docs after latest merge * Be better at writing tests * Coerce using Boolean constructor * Allow specification of group's input props (#571) * Fix watch infinite loop * Avoid passing down class name and allow localized input prop overrides * Update docs * Add stories * Add examples Co-authored-by: Rachel Killackey <[email protected]> Co-authored-by: David Pickart <[email protected]> Co-authored-by: George Lee <[email protected]> Co-authored-by: Angel Medina <[email protected]> Co-authored-by: Nicole Dow <[email protected]> Co-authored-by: Alexander Jin <[email protected]> Co-authored-by: Ji H. Park <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
V6adds support for multiple files in theFileInputcomponent, with each file having a remove button. This PR is meant to provide that same remove button when themultipleprop isfalse. Clicking the "x" sets the value back to an empty string.Author Checklist