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

feat(components): extract icons to separate package #571

Merged
merged 47 commits into from
Apr 30, 2020
Merged

Conversation

connor-baer
Copy link
Member

@connor-baer connor-baer commented Apr 19, 2020

Closes #528.

Approach and changes

Extract all icons to a new package @sumup/icons

  • The package exports the icons as React components and plain SVGs
  • The package includes many more icons that were added from Figma
  • Most icons don't define their own color anymore (exceptions are country flags and card schemes). Instead, the icons have their fill and stroke attributes set to currentColor, so their color can be changed by setting the CSS color
  • The package is marked as a peer dependency so it can be updated independently of Circuit UI

Replace and remove all SVGs from Circuit UI

  • All icons are now imported from @sumup/icons
  • The CardSchemes and PaymentMethodIcon components have been removed
  • The icon prefix and suffix dimensions have increased to 24*24px

Document the new icons

Definition of done

  • Development completed
  • Reviewers assigned
  • Unit and integration tests
  • Meets minimum browser support
  • Meets accessibility requirements

connor-baer and others added 20 commits January 23, 2020 19:28
…#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: adds Select margin top when label above

* fix: Adjust export naming for the base Select case
* 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(docs): fix story hierarchy separators in links

* docs(components): prevent awkward wrapping on the homepage
#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: don't pass invalid props to Link

* fix: added unit test

* fix: implemented shouldForwardProp
* 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>
This should make it easier to find code samples.
…ion (#558)

* fix(components): make AutocompleteInput compatible with new clear option

* test(components): update storyshots

* fix(components): improve prop type
* 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.
* feat(components): pass initial value to AutocompleteInput

* test(components): update storyshots
* 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>
This script errors most of the time. It works on the alpha branch which uses GitHub Actions.
* Update InfoIcon component
@connor-baer connor-baer added the feature A new feature or enhancement label Apr 19, 2020
@connor-baer connor-baer added this to the v2.0 milestone Apr 19, 2020
@vercel
Copy link

vercel bot commented Apr 19, 2020

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sumup-oss/circuit-ui/4vd23gjbb
✅ Preview: https://circuit-ui-git-feature-icons.sumup-oss.now.sh

@codecov
Copy link

codecov bot commented Apr 20, 2020

Codecov Report

Merging #571 into alpha will increase coverage by 0.53%.
The diff coverage is 97.61%.

Impacted file tree graph

@@            Coverage Diff             @@
##            alpha     #571      +/-   ##
==========================================
+ Coverage   92.51%   93.04%   +0.53%     
==========================================
  Files         223      150      -73     
  Lines        3021     2417     -604     
  Branches      710      685      -25     
==========================================
- Hits         2795     2249     -546     
+ Misses        191      137      -54     
+ Partials       35       31       -4     
Impacted Files Coverage Δ
src/components/Calendar/RangePickerController.js 50.00% <ø> (ø)
src/components/Checkbox/Checkbox.js 100.00% <ø> (ø)
src/components/CloseButton/CloseButton.js 100.00% <ø> (ø)
src/components/IconButton/IconButton.js 91.66% <ø> (ø)
...onents/Sidebar/components/Aggregator/Aggregator.js 100.00% <ø> (ø)
...c/components/Sidebar/components/NavItem/NavItem.js 100.00% <ø> (ø)
src/styles/style-helpers.js 98.48% <ø> (-0.05%) ⬇️
src/components/Calendar/SingleDayPicker.js 80.00% <50.00%> (-20.00%) ⬇️
src/components/Calendar/RangePicker.js 100.00% <100.00%> (ø)
.../components/Carousel/components/Buttons/Buttons.js 100.00% <100.00%> (ø)
... and 71 more

hrstngrnvsmp and others added 3 commits April 22, 2020 10:56
* 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
* Replace right and left icon with render props

* Update docs and storyshots
BREAKING CHANGE:
The CardSchemes and PaymentMethodIcon components have been removed. Use
[@sumup/icons](https://github.com/sumup-oss/icons) instead.

feature/icons
This component wasn't publicly exposed or used internally. Just dead code.

feature/icons
@github-actions
Copy link
Contributor

🎉 This PR is included in version 2.0.0-alpha.10 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions
Copy link
Contributor

github-actions bot commented Jun 8, 2020

🎉 This PR is included in version 2.0.0-beta.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions
Copy link
Contributor

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature A new feature or enhancement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Extract icons into a separate package
7 participants