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): add subtle animations #623

Merged
merged 3 commits into from
Jun 25, 2020
Merged

Conversation

connor-baer
Copy link
Member

@connor-baer connor-baer commented Jun 23, 2020

Purpose

Animations in Circuit UI have been very inconsistent so far — some components have state transitions (Toggle, Checkbox), others don’t (Button, Tag). When we started Circuit UI 2 years ago, we planned to add transitions later, but that never happened. In v2, I’d like to add subtle transitions to all interactive components (they can be polished later).

Approved by Giao-Chung from the design team.

Approach and changes

  • update @sumup/design-tokens to latest alpha
  • add a 120ms ease-in-out transition to the Anchor, Button, and Tag components

Definition of done

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

feature/button-transitions

feature/button-transitions
@connor-baer connor-baer added feature A new feature or enhancement 🎨 design Requires input from designers labels Jun 23, 2020
@connor-baer connor-baer added this to the v2.0 milestone Jun 23, 2020
@vercel
Copy link

vercel bot commented Jun 23, 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/6mv4am2m8
✅ Preview: https://circuit-ui-git-feature-button-transitions.sumup-oss.vercel.app

@codecov
Copy link

codecov bot commented Jun 23, 2020

Codecov Report

Merging #623 into beta will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##             beta     #623   +/-   ##
=======================================
  Coverage   93.82%   93.82%           
=======================================
  Files         133      133           
  Lines        2155     2155           
  Branches      596      596           
=======================================
  Hits         2022     2022           
  Misses        111      111           
  Partials       22       22           
Impacted Files Coverage Δ
src/components/Anchor/Anchor.tsx 100.00% <ø> (ø)
src/components/Button/Button.tsx 100.00% <ø> (ø)
src/components/Select/Select.tsx 100.00% <ø> (ø)
src/components/Tag/Tag.js 96.87% <ø> (ø)

@connor-baer connor-baer marked this pull request as ready for review June 23, 2020 19:48
feature/button-transitions

feature/button-transitions
Copy link
Contributor

@fernandofleury fernandofleury left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You weren't kidding when you said they were subtle.

@connor-baer connor-baer merged commit d5d63ba into beta Jun 25, 2020
@connor-baer connor-baer deleted the feature/button-transitions branch June 25, 2020 14:44
@github-actions
Copy link
Contributor

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

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
🎨 design Requires input from designers feature A new feature or enhancement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants