-
Notifications
You must be signed in to change notification settings - Fork 130
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
feat(components): improve clear button on inputs #559
Conversation
By switching from margin to padding for the spacing, the prefix and suffix elements get a much larger tap target size: 16px to 40px. This is especially important on touchscreen devices, but also improves usability for mouse users.
This brings the AutocompleteInput API in line with the SearchInput API. It also fixes the functionality of the clear button on the AutocompleteInput.
Codecov Report
@@ Coverage Diff @@
## canary #559 +/- ##
==========================================
+ Coverage 79.68% 79.94% +0.25%
==========================================
Files 173 173
Lines 2491 2493 +2
Branches 451 452 +1
==========================================
+ Hits 1985 1993 +8
+ Misses 389 386 -3
+ Partials 117 114 -3
|
This pull request is being automatically deployed with ZEIT Now (learn more). 🔍 Inspect: https://zeit.co/sumup-oss/circuit-ui/6uqmfli02 |
🎉 This PR is included in version 1.7.1-canary.4 🎉 The release is available on: Your semantic-release bot 📦🚀 |
🎉 This PR is included in version 1.8.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
* fix(components): prevent background from scrolling when modal is open (#531) * fix(components): add class to html when Modal is open Co-authored-by: Lari Maza <larissa.maza@sumup.com> * fix(components): move global styles to ModalProvider Co-authored-by: Lari Maza <larissa.maza@sumup.com> Co-authored-by: Lari Maza <larissa.maza@gmail.com> * fix(components): add top margin to Select below Label (#532) * fix: adds Select margin top when label above * fix: Adjust export naming for the base Select case * Fix hamburger typos (#536) * fix(components): remove scrollbar from LoadingButton (#542) ISSUES CLOSED: #539 * chore(deploy): fix automatic deployment to GitHub Pages (#540) * chore(configs): fix deployment to GH Pages * chore(configs): resolve lint issues in Travis config * chore(configs): do not run tests before deploy * chore(configs): opt into v2 deployments * chore(configs): deploy from the master branch only * Revert "chore(configs): do not run tests before deploy" This reverts commit 4d11c26. * docs: fix Storybook links (#547) * docs(docs): fix story hierarchy separators in links * docs(components): prevent awkward wrapping on the homepage * feat(components): add support for async filtering to AutoCompleteInput (#549) * feat(components): add input value change callback to AutocompleteInput This enables dynamic fetching and updating of the suggestion items. * feat(components): add support for async filtering to the AutoCompleteInput * docs(components): rename items to options * test(components): update snapshots * refactor(components): use new prop name in AutoCompleteTags * feat(components): improve styles of AutocompleteInput * style(components): rename style object * fix(components): remove invalid Button props from HTML (#548) * fix: don't pass invalid props to Link * fix: added unit test * fix: implemented shouldForwardProp * fix(components): fill invalid radio button with red to match checkbox (#552) * fix(components): replace reset icon on SearchInput component (#555) * Remove default clear icon from SearchInput component * Update snapshot tests * Render clear icon based on onClear handler; Add unit tests * Fix story * Fix snapshot test Co-authored-by: Mariela Kasovska <mariela.kasovska@sumup.com> * docs: show addons panel by default (#557) This should make it easier to find code samples. * fix(components): make AutocompleteInput compatible with new clear option (#558) * fix(components): make AutocompleteInput compatible with new clear option * test(components): update storyshots * fix(components): improve prop type * feat(components): improve clear button on inputs (#559) * feat(components): increase tap target size on input prefix and suffix By switching from margin to padding for the spacing, the prefix and suffix elements get a much larger tap target size: 16px to 40px. This is especially important on touchscreen devices, but also improves usability for mouse users. * feat(components): improve accessibility of the SearchInput clear button * fix(components): deprecate showClear in favor of onClear prop This brings the AutocompleteInput API in line with the SearchInput API. It also fixes the functionality of the clear button on the AutocompleteInput. * fix(components): remove default prop to silence deprecation warning * fix(components): add styles to the card elements in card stories * feat(components): pass initial value to AutocompleteInput (#562) * feat(components): pass initial value to AutocompleteInput * test(components): update storyshots * feat(components): refactor AutoCompleteTags (#561) * Refactor AutoCompleteTags * Update snapshot tests * Make AutoCompleteTags class * Update snapshots * Update src/components/AutoCompleteTags/AutoCompleteTags.spec.js Co-Authored-By: Connor Bär <connor-baer@users.noreply.github.com> * Fix test Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com> * fix(components): update clearfix to improve accessibility (#565) * chore(configs): disable security script on Travis This script errors most of the time. It works on the alpha branch which uses GitHub Actions. * feat(components): update InfoIcon (#567) * Update InfoIcon component * feat(components): Toggle component - ability to be right aligned (#570) * Toggle component - ability to be right aligned * Fixed typo * ESLint fix - max-len * Storyshots snapshot updated * PR comments changes * Snapshot update * Space added between text and Switch * Snapshot update * Reversed Toggle only shown on mobile * feat(components): add optional suffix to the Tag component (#566) * Replace right and left icon with render props * Update docs and storyshots * fix(components): reduce icon margin on Tag (#573) * feat(components): remove deprecated props alpha * feat(configs): install @sumup/icons feature/icons * docs(docs): add page with icon search feature/icons * feat(components): remove CardSchemes and PaymentMethodIcon components feature/icons * feat(components): remove InfoIcon component This component wasn't publicly exposed or used internally. Just dead code. feature/icons * feat(components): replace SVGs in CloseButton feature/icons * feat(components): rewrite Spinner in pure CSS feature/icons * feat(components): update LoadingButton with new Spinner feature/icons * feat(components): replace SVGs in Input components feature/icons * feat(components): replace SVG in Checkbox component feature/icons * feat(components): replace SVGs in Select component feature/icons * feat(components): replace SVGs in Notification component feature/icons * feat(components): replace SVGs in Calendar components feature/icons * feat(components): replace SVG in Table component feature/icons * feat(components): replace SVGs in Sidebar components feature/icons * WIP: replace SVGs in Carousel components feature/icons * test(components): update storyshots feature/icons * test(components): temporarily disable a11y test feature/icons * docs(docs): update icon color options feature/icons * feat(components): update icons to latest versions feature/icons * test(configs): fix typo in coverage config feature/icons * feat: update @sumup/icons to latest feature/icons * feat: update @sumup/icons to latest feature/icons Co-authored-by: Lari Maza <larissa.maza@gmail.com> Co-authored-by: nico <nicosommi@gmail.com> Co-authored-by: Lari Maza <larissa.maza@sumup.com> Co-authored-by: Dmitri Suvorov <53574544+dmitri-suvorov-sumup@users.noreply.github.com> Co-authored-by: Mariela Kasovska <mariela.kasovska@sumup.com> Co-authored-by: Turcan Vladimir <36477870+justman00@users.noreply.github.com> Co-authored-by: Hristian Garnev <62241171+hrstngrnvsmp@users.noreply.github.com> BREAKING CHANGE: The AutoCompleteInput's `defaultSelectedItem` prop has been renamed to `initialSelectedItem` to match Downshift's API. BREAKING CHANGE: The CardSchemes and PaymentMethodIcon components have been removed. Use [@sumup/icons](https://github.com/sumup-oss/icons) instead. BREAKING CHANGE: The [@sumup/icons](https://github.com/sumup-oss/icons) package was added as a required peer dependency.
🎉 This PR is included in version 2.0.0-alpha.10 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Follow-up to #555 and #558.
Purpose
My previous PR (#558) didn't make the clear button work for the AutocompleteInput. I thought it would call the
onChange
prop, but it didn't. This PR implements an alternative approach. While I was at it, I also improved the usability and accessibility of the clear button.Approach and changes
showClear
in favor ofonClear
prop: This brings the AutocompleteInput API in line with the SearchInput API. It also fixes the functionality of the clear button on the AutocompleteInput.Definition of done