feat(button): Ghost button color #1268
Conversation
Creates a new color type called "ghost", which basically uses the design of the dark theme toggle component Fix themesberg#857
…gle to use the button ghost variant Also changes the top nav links in the Docs to use the ghost buttonn
|
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1268 +/- ##
==========================================
- Coverage 99.54% 97.35% -2.19%
==========================================
Files 163 216 +53
Lines 6621 9233 +2612
Branches 401 538 +137
==========================================
+ Hits 6591 8989 +2398
- Misses 30 244 +214 ☔ View full report in Codecov by Sentry. |
| @@ -5,6 +5,8 @@ export const buttonTheme: FlowbiteButtonTheme = { | |||
| base: 'group flex items-stretch items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-none transition-[color,background-color,border-color,text-decoration-color,fill,stroke,box-shadow]', | |||
| fullSized: 'w-full', | |||
| color: { | |||
| ghost: | |||
There was a problem hiding this comment.
I believe that ghost should not be a color, instead it should be a flag like the pill or outline.
Having it as color limits to have success/failure buttons as ghosts, which is a common use case for it.
| import pkg from './../package.json' assert { type: 'json' }; | ||
| import { DocSearchInput } from './docsearch-input'; | ||
|
|
||
| const buttonIconTheme = { | ||
| size: { | ||
| md: 'p-2.5', |
There was a problem hiding this comment.
This points out a missing feature of IconButton.
That's how I arrived to this issue of ghost button.
I believe what you want is something like
<Button ghost icon>
<SiStorybook aria-hidden className="h-5 w-5" />
</Button>Here is the official Button with icon https://flowbite.com/docs/components/buttons/#buttons-with-icon
which uses the padding 2.5
|
@coderabbitai review |
|
Warning Rate Limit Exceeded@rluders has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 29 minutes and 28 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Summarize the changes made and the motivation behind them.
This PR creates the ghost button color, which basically was already a common button used throughout the docs app and by the
DarkThemeToggle. Now this PR makes it available to use this style in the regularButtoncomponentReference related issues using
#followed by the issue number.Fix #857
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.