Implement new button design

[connor-baer]

Purpose

This update aims to prepare the Button component for the anticipated color change to black&white, align with Solo UI, improve usability, and extend usage guidelines.

Approach and changes

• Updated the look of the Button component. Corners are now rounded instead of pill-shaped, the loading spinner has been replaced with three animated dots, and the tertiary variant now sports an underline to improve accessibility.
• Improved the behavior of disabled Buttons. The disabled attribute has been replaced with the aria-disabled attribute which enables the disabled element to receive focus and be perceived by screenreader users. Interactions with the disabled element are still blocked by a dummy click handler.
• Changed the NotificationInline's action from the Button to the Anchor component.
• Changed the NotificationBanner's tertiary action variant from the Button to the Anchor component.
• Changed the variant of the previous/next buttons in the Pagination component from tertiary to secondary.
• Changed the default size of the CloseButton from 40px to 48px to match the Button component.

Definition of done

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 30af956

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@sumup/circuit-ui	Major
@sumup/astro-template-circuit-ui	Patch
@sumup/eslint-plugin-circuit-ui	Major
@sumup/remix-template-circuit-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
oss-circuit-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 11, 2023 11:26am

[codecov]

Codecov Report

Merging #2299 (30af956) into canary (6980373) will increase coverage by 0.04%.
The diff coverage is 93.25%.

Additional details and impacted files

@@            Coverage Diff             @@
##           canary    #2299      +/-   ##
==========================================
+ Coverage   96.93%   96.97%   +0.04%     
==========================================
  Files         251      252       +1     
  Lines       20171    20256      +85     
  Branches     1246     1262      +16     
==========================================
+ Hits        19552    19643      +91     
+ Misses        607      600       -7     
- Partials       12       13       +1     

Files	Coverage Δ
packages/circuit-ui/components/Button/index.ts	100.00% <100.00%> (ø)
...components/Carousel/components/Buttons/Buttons.tsx	100.00% <100.00%> (ø)
.../circuit-ui/components/CloseButton/CloseButton.tsx	100.00% <100.00%> (ø)
...ages/circuit-ui/components/Hamburger/Hamburger.tsx	84.87% <100.00%> (ø)
...es/circuit-ui/components/ImageInput/ImageInput.tsx	89.96% <100.00%> (+0.23%)	⬆️
...mponents/NotificationInline/NotificationInline.tsx	98.99% <100.00%> (-0.01%)	⬇️
...components/NotificationToast/NotificationToast.tsx	100.00% <100.00%> (ø)
...es/circuit-ui/components/Pagination/Pagination.tsx	88.34% <100.00%> (ø)
.../components/SidePanel/components/Header/Header.tsx	100.00% <100.00%> (ø)
packages/circuit-ui/util/errors.ts	89.10% <100.00%> (+1.19%)	⬆️
... and 4 more

... and 1 file with indirect coverage changes