feat(components): Toggle component - ability to be right aligned #570
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
|
This pull request is being automatically deployed with ZEIT Now (learn more). 🔍 Inspect: https://zeit.co/sumup-oss/circuit-ui/1ln0df2t3 |
hrstngrnvsmp
changed the title
Codecov Report
@@ Coverage Diff @@
## canary #570 +/- ##
==========================================
+ Coverage 80.11% 80.12% +0.01%
==========================================
Files 173 173
Lines 2494 2496 +2
Branches 451 452 +1
==========================================
+ Hits 1998 2000 +2
Misses 383 383
Partials 113 113
|
connor-baer
requested changes
Apr 20, 2020
There was a problem hiding this comment.
Thank you for opening a pull request, @hrstngrnvsmp!
We already talked about the use case for this change over DM. Could you please add the description of the use case and some screenshots for mobile and desktop viewports to the PR description?
connor-baer
reviewed
Apr 20, 2020
|
I'm still not fully convinced that this is a valid use case.
Who's the designer on this project? Can we loop them into the conversation, please? |
connor-baer
approved these changes
Apr 22, 2020
|
🎉 This PR is included in version 1.7.1-canary.11 🎉 The release is available on: Your semantic-release bot 📦🚀 |
ghost
added
the
|
🎉 This PR is included in version 1.8.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
connor-baer
added a commit
that referenced
this pull request
Apr 30, 2020
* 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 📦🚀 |
5 tasks
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.
Purpose
By design we have to use the Toggle component but it should be right-aligned. Link to a design where the reversed toggle is used:
https://www.figma.com/file/7jYIVg22mQbW5LuvqcSIgh/3-Open-banking-Sign-in-flow?node-id=160%3A268
Approach and changes
A prop rtl is added to the component and based on it we add some styling
Definition of done