feat(components): migrate LoadingButton to TypeScript

[connor-baer]

Relates to #582.

Purpose

The LoadingButton had some complicated state logic to enable the small exit animations. A quick search revealed that these animations are only used once in the SumUp dashboard and partner portal. I decided that it's too much code for little benefit, plus an action's success or error result should be communicated outside the button.

Approach and changes

👀 Live preview

• Migrate Spinner to TypeScript: The dark and active props have been removed. The spinner uses the currentColor CSS value for its color, so it adapts automatically. This brings it in line with @sumup/icons.
• Migrate LoadingButton to TypeScript: The exit animations have been removed and the accessibility improved (I tested with a screen reader).

Definition of done

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

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (feature/button-enums@66d828a). Click here to learn what that means.
The diff coverage is n/a.

@@                   Coverage Diff                   @@
##             feature/button-enums     #584   +/-   ##
=======================================================
  Coverage                        ?   93.38%           
=======================================================
  Files                           ?      145           
  Lines                           ?     2343           
  Branches                        ?      657           
=======================================================
  Hits                            ?     2188           
  Misses                          ?      128           
  Partials                        ?       27           

[vercel]

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/fna3syt5d
✅ Preview: https://circuit-ui-git-feature-typescript-loading-button.sumup-oss.now.sh

[justman00]

Typescript components are coming to life 👏

[jmaslate]

🙌

[github-actions]

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

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[fernandofleury]

@connor-baer I'm seeing this now on #600. What do we plan to provide as a fallback for the transitions? Considering consumers will have to do it. Is this planned in the Design System? (Feedbacks in general).

The dashboard already has a "toast" system. But that wouldn't work for some contexts such as Modals (considering the backdrop styles)

I know we compose feedback with some components available, my question is more on the design system side and not component library

[connor-baer]

@fernandofleury As I wrote in the PR description:

A quick search revealed that these animations are only used once in the SumUp dashboard and partner portal. [...] an action's success or error result should be communicated outside the button.

How the action result is displayed depends on the context, for example, it could be a message next to the button, a tooltip, or a toast message. It should be visible for at least 3 (5?) seconds and should not block the button from being blocked again (that's why displaying the result inside the button is a bad idea).

[github-actions]

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

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀