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.

Sign up for GitHub

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

Jump to bottom

feat(button): Ghost button color #1268

Closed
wants to merge 3 commits into from
Closed

feat(button): Ghost button color #1268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
220a812
feat(button): created "ghost" color
nigellima Feb 10, 2024
7e75214
docs(button): adds ghost examples to the Button docs page
nigellima Feb 10, 2024
716d1f8
feat(dark-theme-toggle): replace the inner button of the DarkThemeTog…
nigellima Feb 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 40 additions & 22 deletions components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,16 @@ import Link from 'next/link';
import type { FC } from 'react';
import { BsGithub } from 'react-icons/bs';
import { SiDiscord, SiStorybook } from 'react-icons/si';
import { Badge, DarkThemeToggle, Tooltip } from '~/src';
import { Badge, Button, DarkThemeToggle, Tooltip } from '~/src';
import pkg from './../package.json' assert { type: 'json' };
import { DocSearchInput } from './docsearch-input';

const buttonIconTheme = {
size: {
md: 'p-2.5',
Copy link
Contributor

@MiroslavPetrik MiroslavPetrik Feb 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

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

},
};

export const NavbarLinks: FC = () => {
return (
<div className="hidden items-center gap-1 lg:flex">
Expand Down Expand Up @@ -44,30 +50,42 @@ export const NavbarIcons: FC = () => {
<div className="lg:hidden">
<DocSearchInput />
</div>
<a
href="https://storybook.flowbite-react.com/"
className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700 lg:block"
>
<Tooltip animation={false} content="View Storybook">
<Tooltip animation={false} content="View Storybook">
<Button
as="a"
href="https://storybook.flowbite-react.com/"
color="ghost"
className="hidden p-0 lg:block"
theme={buttonIconTheme}
>
<SiStorybook aria-hidden className="h-5 w-5" />
</Tooltip>
</a>
<a
href="https://discord.gg/4eeurUVvTy"
className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700 lg:block"
>
<Tooltip animation={false} content="Join Discord Community">
</Button>
</Tooltip>

<Tooltip animation={false} content="Join Discord Community">
<Button
as="a"
href="https://discord.gg/4eeurUVvTy"
color="ghost"
className="hidden p-0 lg:block"
theme={buttonIconTheme}
>
<SiDiscord aria-hidden className="h-5 w-5" />
</Tooltip>
</a>
<a
href="https://github.com/themesberg/flowbite-react"
className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700 lg:block"
>
<Tooltip animation={false} content="View on GitHub">
</Button>
</Tooltip>

<Tooltip animation={false} content="View on GitHub">
<Button
as="a"
href="https://github.com/themesberg/flowbite-react"
color="ghost"
className="hidden p-0 lg:block"
theme={buttonIconTheme}
>
<BsGithub aria-hidden className="h-5 w-5" />
</Tooltip>
</a>
</Button>
</Tooltip>

<Tooltip animation={false} content="Toggle dark mode">
<DarkThemeToggle />
</Tooltip>
Expand Down
18 changes: 18 additions & 0 deletions examples/button/button.iconOnly.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ function Component() {
<Button outline pill>
<HiOutlineArrowRight className="h-6 w-6" />
</Button>
<Button color="ghost">
<HiOutlineArrowRight className="h-6 w-6" />
</Button>
<Button color="ghost" className="p-0" theme={{ size: { md: 'p-2.5' } }}>
<HiOutlineArrowRight className="h-6 w-6" />
</Button>
</div>
);
}
Expand All @@ -47,6 +53,12 @@ function Component() {
<Button outline pill>
<HiOutlineArrowRight className="h-6 w-6" />
</Button>
<Button color="ghost">
<HiOutlineArrowRight className="h-6 w-6" />
</Button>
<Button color="ghost" className="p-0" theme={{ size: { md: 'p-2.5' } }}>
<HiOutlineArrowRight className="h-6 w-6" />
</Button>
</div>
);
}
Expand All @@ -67,6 +79,12 @@ function Component() {
<Button outline pill>
<HiOutlineArrowRight className="h-6 w-6" />
</Button>
<Button color="ghost">
<HiOutlineArrowRight className="h-6 w-6" />
</Button>
<Button color="ghost" className="p-0" theme={{ size: { md: 'p-2.5' } }}>
<HiOutlineArrowRight className="h-6 w-6" />
</Button>
</div>
);
}
Expand Down
9 changes: 9 additions & 0 deletions examples/button/button.pill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ function Component() {
<Button color="blue" pill>
Blue
</Button>
<Button color="ghost" pill>
Ghost
</Button>
<Button color="gray" pill>
Gray
</Button>
Expand Down Expand Up @@ -49,6 +52,9 @@ function Component() {
<Button color="blue" pill>
Blue
</Button>
<Button color="ghost" pill>
Ghost
</Button>
<Button color="gray" pill>
Gray
</Button>
Expand Down Expand Up @@ -82,6 +88,9 @@ function Component() {
<Button color="blue" pill>
Blue
</Button>
<Button color="ghost" pill>
Ghost
</Button>
<Button color="gray" pill>
Gray
</Button>
Expand Down
3 changes: 3 additions & 0 deletions examples/button/button.root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ function Component() {
<div className="flex flex-wrap gap-2">
<Button>Default</Button>
<Button color="blue">Blue</Button>
<Button color="ghost">Ghost</Button>
<Button color="gray">Gray</Button>
<Button color="dark">Dark</Button>
<Button color="light">Light</Button>
Expand All @@ -31,6 +32,7 @@ function Component() {
<div className="flex flex-wrap gap-2">
<Button>Default</Button>
<Button color="blue">Blue</Button>
<Button color="ghost">Ghost</Button>
<Button color="gray">Gray</Button>
<Button color="dark">Dark</Button>
<Button color="light">Light</Button>
Expand All @@ -48,6 +50,7 @@ function Component() {
<div className="flex flex-wrap gap-2">
<Button>Default</Button>
<Button color="blue">Blue</Button>
<Button color="ghost">Ghost</Button>
<Button color="gray">Gray</Button>
<Button color="dark">Dark</Button>
<Button color="light">Light</Button>
Expand Down
1 change: 1 addition & 0 deletions src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export interface FlowbiteButtonOutlineTheme extends FlowbiteBoolean {

export interface ButtonColors
extends Pick<FlowbiteColors, 'dark' | 'failure' | 'gray' | 'info' | 'light' | 'purple' | 'success' | 'warning'> {
ghost: string;
[key: string]: string;
}

Expand Down
2 changes: 2 additions & 0 deletions src/components/Button/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Copy link
Contributor

@MiroslavPetrik MiroslavPetrik Feb 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

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.

'text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
dark: 'text-white bg-gray-800 border border-transparent enabled:hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:enabled:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700',
failure:
'text-white bg-red-700 border border-transparent enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900',
Expand Down
16 changes: 11 additions & 5 deletions src/components/DarkThemeToggle/DarkThemeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import type { ComponentProps, FC } from 'react';
import type { ComponentPropsWithoutRef, FC } from 'react';
import type { IconBaseProps } from 'react-icons';
import { HiMoon, HiSun } from 'react-icons/hi';
import { twMerge } from 'tailwind-merge';
Expand All @@ -9,6 +9,7 @@ import { mergeDeep } from '../../helpers/merge-deep';
import { useThemeMode } from '../../hooks/use-theme-mode';
import { getTheme } from '../../theme-store';
import type { DeepPartial } from '../../types';
import { Button } from '../Button';

export interface FlowbiteDarkThemeToggleTheme {
root: FlowbiteDarkThemeToggleRootTheme;
Expand All @@ -19,7 +20,7 @@ export interface FlowbiteDarkThemeToggleRootTheme {
icon: string;
}

export interface DarkThemeToggleProps extends ComponentProps<'button'> {
export interface DarkThemeToggleProps extends ComponentPropsWithoutRef<'button'> {
iconDark?: FC<IconBaseProps>;
iconLight?: FC<IconBaseProps>;
theme?: DeepPartial<FlowbiteDarkThemeToggleTheme>;
Expand All @@ -38,10 +39,15 @@ export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({
const theme = mergeDeep(getTheme().darkThemeToggle, customTheme);

return (
<button
type="button"
<Button
aria-label="Toggle dark mode"
data-testid="dark-theme-toggle"
color="ghost"
theme={{
size: {
md: 'p-0',
},
}}
className={twMerge(theme.root.base, className)}
onClick={toggleMode}
{...props}
Expand All @@ -56,7 +62,7 @@ export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({
data-active={isMounted && computedMode === 'light'}
className={twMerge(theme.root.icon, 'dark:hidden')}
/>
</button>
</Button>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/components/DarkThemeToggle/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { FlowbiteDarkThemeToggleTheme } from './DarkThemeToggle';

export const darkThemeToggleTheme: FlowbiteDarkThemeToggleTheme = {
root: {
base: 'rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
base: 'rounded-lg p-2.5 text-sm',
icon: 'h-5 w-5',
},
};
Loading