From c8dba76e20e101a54999bb477adcba967057ecb3 Mon Sep 17 00:00:00 2001 From: Dhaval Vira <32231977+dhavalveera@users.noreply.github.com> Date: Wed, 19 Jun 2024 17:25:28 +0530 Subject: [PATCH] fix: fixed the Tabs attribute from style to variant (#1405) * fix: fixed the Tabs attribute from style to variant * changeset added * refactored the changeset text --- .changeset/forty-pumpkins-grow.md | 7 +++++++ apps/web/content/docs/components/tabs.mdx | 6 +++--- apps/web/examples/tabs/tabs.fullWidth.tsx | 4 ++-- apps/web/examples/tabs/tabs.root.tsx | 4 ++-- apps/web/examples/tabs/tabs.stateOptions.tsx | 4 ++-- apps/web/examples/tabs/tabs.withIcons.tsx | 4 ++-- apps/web/examples/tabs/tabs.withPills.tsx | 4 ++-- apps/web/examples/tabs/tabs.withUnderline.tsx | 4 ++-- .../ui/src/components/Tabs/Tabs.stories.tsx | 10 +++++----- packages/ui/src/components/Tabs/Tabs.tsx | 18 +++++++++--------- packages/ui/src/components/Tabs/theme.ts | 6 +++--- 11 files changed, 39 insertions(+), 32 deletions(-) create mode 100644 .changeset/forty-pumpkins-grow.md diff --git a/.changeset/forty-pumpkins-grow.md b/.changeset/forty-pumpkins-grow.md new file mode 100644 index 000000000..5f26b0e72 --- /dev/null +++ b/.changeset/forty-pumpkins-grow.md @@ -0,0 +1,7 @@ +--- +"flowbite-react": patch +--- + +--- + +Renamed the `Tabs` attribute from `style` to `variant` to allow the use of the `style` attribute, which was previously blocked. diff --git a/apps/web/content/docs/components/tabs.mdx b/apps/web/content/docs/components/tabs.mdx index dec1526e6..4706a748d 100644 --- a/apps/web/content/docs/components/tabs.mdx +++ b/apps/web/content/docs/components/tabs.mdx @@ -25,7 +25,7 @@ Additionally, if you pass the `disabled` prop to the `` component, it ## Tabs with underline -Pass the `style="underline"` prop to the `` component to make the tabs have an underline style. +Pass the `variant="underline"` prop to the `` component to make the tabs have an underline style. @@ -37,13 +37,13 @@ Pass the `icon` prop to the `` component to add an icon to the tab it ## Tabs with pills -Add the `style="pills"` prop to the `` component to make the tabs have a pills style with rounded corners as an alternative style. +Add the `variant="pills"` prop to the `` component to make the tabs have a pills style with rounded corners as an alternative style. ## Full width tabs -Make the tabs span the full width of their container, pass the `style="fullWidth"` prop to the `` +Make the tabs span the full width of their container, pass the `variant="fullWidth"` prop to the `` diff --git a/apps/web/examples/tabs/tabs.fullWidth.tsx b/apps/web/examples/tabs/tabs.fullWidth.tsx index e0bd99c85..436e14e1f 100644 --- a/apps/web/examples/tabs/tabs.fullWidth.tsx +++ b/apps/web/examples/tabs/tabs.fullWidth.tsx @@ -13,7 +13,7 @@ import { MdDashboard } from "react-icons/md"; export function Component() { return (
- + This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to @@ -46,7 +46,7 @@ export function Component() { export function Component() { return (
- + This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to diff --git a/apps/web/examples/tabs/tabs.root.tsx b/apps/web/examples/tabs/tabs.root.tsx index 9fd64bdb5..1302cf227 100644 --- a/apps/web/examples/tabs/tabs.root.tsx +++ b/apps/web/examples/tabs/tabs.root.tsx @@ -12,7 +12,7 @@ import { MdDashboard } from "react-icons/md"; export function Component() { return ( - + This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to @@ -43,7 +43,7 @@ export function Component() { export function Component() { return ( - + This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to diff --git a/apps/web/examples/tabs/tabs.stateOptions.tsx b/apps/web/examples/tabs/tabs.stateOptions.tsx index 7aec9f062..7be38836b 100644 --- a/apps/web/examples/tabs/tabs.stateOptions.tsx +++ b/apps/web/examples/tabs/tabs.stateOptions.tsx @@ -20,7 +20,7 @@ export function Component() { return (
- setActiveTab(tab)}> + setActiveTab(tab)}> This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to @@ -71,7 +71,7 @@ export function Component() { return (
- setActiveTab(tab)}> + setActiveTab(tab)}> This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to diff --git a/apps/web/examples/tabs/tabs.withIcons.tsx b/apps/web/examples/tabs/tabs.withIcons.tsx index 08e2eb8e4..e4ced4408 100644 --- a/apps/web/examples/tabs/tabs.withIcons.tsx +++ b/apps/web/examples/tabs/tabs.withIcons.tsx @@ -12,7 +12,7 @@ import { MdDashboard } from "react-icons/md"; export function Component() { return ( - + This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to @@ -43,7 +43,7 @@ export function Component() { export function Component() { return ( - + This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to diff --git a/apps/web/examples/tabs/tabs.withPills.tsx b/apps/web/examples/tabs/tabs.withPills.tsx index 1421d6492..31812a009 100644 --- a/apps/web/examples/tabs/tabs.withPills.tsx +++ b/apps/web/examples/tabs/tabs.withPills.tsx @@ -8,7 +8,7 @@ import { Tabs } from "flowbite-react"; export function Component() { return ( - +

Content 1

 @@ -31,7 +31,7 @@ export function Component() { export function Component() { return ( - +

Content 1

 diff --git a/apps/web/examples/tabs/tabs.withUnderline.tsx b/apps/web/examples/tabs/tabs.withUnderline.tsx index ee3754351..cfb9bebcf 100644 --- a/apps/web/examples/tabs/tabs.withUnderline.tsx +++ b/apps/web/examples/tabs/tabs.withUnderline.tsx @@ -12,7 +12,7 @@ import { MdDashboard } from "react-icons/md"; export function Component() { return ( - + This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to @@ -43,7 +43,7 @@ export function Component() { export function Component() { return ( - + This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to diff --git a/packages/ui/src/components/Tabs/Tabs.stories.tsx b/packages/ui/src/components/Tabs/Tabs.stories.tsx index 8eab80b74..6c754fbbd 100644 --- a/packages/ui/src/components/Tabs/Tabs.stories.tsx +++ b/packages/ui/src/components/Tabs/Tabs.stories.tsx @@ -14,7 +14,7 @@ export default { className: { control: "text", }, - style: { + variant: { control: "radio", options: ["default", "underline", "pills", "fullWidth"], }, @@ -45,7 +45,7 @@ export const WithUnderline = (args: TabsProps): JSX.Element => ( ); WithUnderline.args = { - style: "underline", + variant: "underline", }; WithUnderline.storyName = "With underline"; @@ -69,7 +69,7 @@ export const WithIcons = (args: TabsProps): JSX.Element => ( ); WithIcons.args = { - style: "underline", + variant: "underline", }; WithIcons.storyName = "With icons"; @@ -85,7 +85,7 @@ export const Pills = (args: TabsProps): JSX.Element => ( ); Pills.args = { - style: "pills", + variant: "pills", }; export const FullWidth = (args: TabsProps): JSX.Element => ( @@ -100,6 +100,6 @@ export const FullWidth = (args: TabsProps): JSX.Element => ( ); FullWidth.args = { - style: "fullWidth", + variant: "fullWidth", }; FullWidth.storyName = "Full width"; diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index fb61a450c..c4b9f9dfd 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -14,16 +14,16 @@ export interface FlowbiteTabsTheme { base: string; tablist: { base: string; - styles: TabStyles; + variant: TabStyles; tabitem: { base: string; - styles: TabStyleItem; + variant: TabStyleItem; icon: string; }; }; tabitemcontainer: { base: string; - styles: TabStyles; + variant: TabStyles; }; tabpanel: string; } @@ -54,9 +54,9 @@ interface TabKeyboardEventProps extends TabEventProps { event: KeyboardEvent; } -export interface TabsProps extends Omit, "ref" | "style"> { +export interface TabsProps extends Omit, "ref"> { onActiveTabChange?: (activeTab: number) => void; - style?: keyof TabStyles; + variant?: keyof TabStyles; theme?: DeepPartial; } @@ -66,7 +66,7 @@ export interface TabsRef { const TabsComponent = forwardRef( ( - { children, className, onActiveTabChange, style = "default", theme: customTheme = {}, ...props }, + { children, className, onActiveTabChange, variant = "default", theme: customTheme = {}, ...props }, ref: ForwardedRef, ) => { const theme = mergeDeep(getTheme().tabs, customTheme); @@ -114,8 +114,8 @@ const TabsComponent = forwardRef( } }; - const tabItemStyle = theme.tablist.tabitem.styles[style]; - const tabItemContainerStyle = theme.tabitemcontainer.styles[style]; + const tabItemStyle = theme.tablist.tabitem.variant[variant]; + const tabItemContainerStyle = theme.tabitemcontainer.variant[variant]; useEffect(() => { tabRefs.current[focusedTab]?.focus(); @@ -130,7 +130,7 @@ const TabsComponent = forwardRef(
{tabs.map((tab, index) => ( diff --git a/packages/ui/src/components/Tabs/theme.ts b/packages/ui/src/components/Tabs/theme.ts index 1518046a5..a031cffd0 100644 --- a/packages/ui/src/components/Tabs/theme.ts +++ b/packages/ui/src/components/Tabs/theme.ts @@ -5,7 +5,7 @@ export const tabTheme: FlowbiteTabsTheme = createTheme({ base: "flex flex-col gap-2", tablist: { base: "flex text-center", - styles: { + variant: { default: "flex-wrap border-b border-gray-200 dark:border-gray-700", underline: "-mb-px flex-wrap border-b border-gray-200 dark:border-gray-700", pills: "flex-wrap space-x-2 text-sm font-medium text-gray-500 dark:text-gray-400", @@ -14,7 +14,7 @@ export const tabTheme: FlowbiteTabsTheme = createTheme({ }, tabitem: { base: "flex items-center justify-center rounded-t-lg p-4 text-sm font-medium first:ml-0 focus:outline-none focus:ring-4 focus:ring-cyan-300 disabled:cursor-not-allowed disabled:text-gray-400 disabled:dark:text-gray-500", - styles: { + variant: { default: { base: "rounded-t-lg", active: { @@ -49,7 +49,7 @@ export const tabTheme: FlowbiteTabsTheme = createTheme({ }, tabitemcontainer: { base: "", - styles: { + variant: { default: "", underline: "", pills: "",