fix(button): Button ring on focus

nigellima commented 8 months ago

fixes the button inconsistent focus ring compared to the core library. It also adds a transition of colors and ring

[x] I have followed the Your First Code Contribution section of the Contributing guide

Summarize the changes made and the motivation behind them. This PR fixes the button focus ring, which is currently inconsistent with the core library. The Button Group ring was wrongly overriding the ring-4 classes defined in the button themes.

Also, I took the opportunity to add a slight transition on the button colors/shadows to have the hover and the ring styles animated

button-ring

Reference related issues using # followed by the issue number.

If there are breaking API changes - like adding or removing props, or changing the structure of the theme - describe them, and provide steps to update existing code.

vercel[bot] commented 8 months ago

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

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 21, 2024 9:08am

codecov[bot] commented 8 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (7461173) 99.54% compared to head (1d1cb47) 97.36%. Report is 186 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #1238 +/- ## ========================================== - Coverage 99.54% 97.36% -2.18% ========================================== Files 163 214 +51 Lines 6621 9077 +2456 Branches 401 530 +129 ========================================== + Hits 6591 8838 +2247 - Misses 30 239 +209 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

themesberg / flowbite-react

fix(button): Button ring on focus #1238

Codecov Report