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
themesberg · Jun 19, 2024 · c8dba76 · c8dba76
1 parent 4350ffb
commit c8dba76
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 32 deletions.
diff --git a/.changeset/forty-pumpkins-grow.md 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
@@ -25,7 +25,7 @@ Additionally, if you pass the `disabled` prop to the `<Tabs.Item>` component, it
 
 ## Tabs with underline
 
-Pass the `style="underline"` prop to the `<Tabs>` component to make the tabs have an underline style.
+Pass the `variant="underline"` prop to the `<Tabs>` component to make the tabs have an underline style.
 
 <Example name="tabs.withUnderline" />
 
@@ -37,13 +37,13 @@ Pass the `icon` prop to the `<Tabs.Item>` component to add an icon to the tab it
 
 ## Tabs with pills
 
-Add the `style="pills"` prop to the `<Tabs>` component to make the tabs have a pills style with rounded corners as an alternative style.
+Add the `variant="pills"` prop to the `<Tabs>` component to make the tabs have a pills style with rounded corners as an alternative style.
 
 <Example name="tabs.withPills" />
 
 ## Full width tabs
 
-Make the tabs span the full width of their container, pass the `style="fullWidth"` prop to the `<Tabs>`
+Make the tabs span the full width of their container, pass the `variant="fullWidth"` prop to the `<Tabs>`
 
 <Example name="tabs.fullWidth" />
 

diff --git 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 (
     <div className="overflow-x-auto">
-      <Tabs aria-label="Full width tabs" style="fullWidth">
+      <Tabs aria-label="Full width tabs" variant="fullWidth">
         <Tabs.Item active title="Profile" icon={HiUserCircle}>
           This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
           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 (
     <div className="overflow-x-auto">
-      <Tabs aria-label="Full width tabs" style="fullWidth">
+      <Tabs aria-label="Full width tabs" variant="fullWidth">
         <Tabs.Item active title="Profile" icon={HiUserCircle}>
           This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
           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
@@ -12,7 +12,7 @@ import { MdDashboard } from "react-icons/md";
 
 export function Component() {
   return (
-    <Tabs aria-label="Default tabs" style="default">
+    <Tabs aria-label="Default tabs" variant="default">
       <Tabs.Item active title="Profile" icon={HiUserCircle}>
         This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
         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 (
-    <Tabs aria-label="Default tabs" style="default">
+    <Tabs aria-label="Default tabs" variant="default">
       <Tabs.Item active title="Profile" icon={HiUserCircle}>
         This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
         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
@@ -20,7 +20,7 @@ export function Component() {
 
   return (
     <div className="flex flex-col gap-3">
-      <Tabs aria-label="Default tabs" style="default" ref={tabsRef} onActiveTabChange={(tab) => setActiveTab(tab)}>
+      <Tabs aria-label="Default tabs" variant="default" ref={tabsRef} onActiveTabChange={(tab) => setActiveTab(tab)}>
         <Tabs.Item active title="Profile" icon={HiUserCircle}>
           This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
           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 (
     <div className="flex flex-col gap-3">
-      <Tabs aria-label="Default tabs" style="default" ref={tabsRef} onActiveTabChange={(tab) => setActiveTab(tab)}>
+      <Tabs aria-label="Default tabs" variant="default" ref={tabsRef} onActiveTabChange={(tab) => setActiveTab(tab)}>
         <Tabs.Item active title="Profile" icon={HiUserCircle}>
           This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
           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
@@ -12,7 +12,7 @@ import { MdDashboard } from "react-icons/md";
 
 export function Component() {
   return (
-    <Tabs aria-label="Tabs with icons" style="underline">
+    <Tabs aria-label="Tabs with icons" variant="underline">
       <Tabs.Item active title="Profile" icon={HiUserCircle}>
         This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
         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 (
-    <Tabs aria-label="Tabs with icons" style="underline">
+    <Tabs aria-label="Tabs with icons" variant="underline">
       <Tabs.Item active title="Profile" icon={HiUserCircle}>
         This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
         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
@@ -8,7 +8,7 @@ import { Tabs } from "flowbite-react";
 
 export function Component() {
   return (
-    <Tabs aria-label="Pills" style="pills">
+    <Tabs aria-label="Pills" variant="pills">
       <Tabs.Item active title="Tab 1">
         <p className="text-sm text-gray-500 dark:text-gray-400">Content 1</p>
       </Tabs.Item>
@@ -31,7 +31,7 @@ export function Component() {
 
 export function Component() {
   return (
-    <Tabs aria-label="Pills" style="pills">
+    <Tabs aria-label="Pills" variant="pills">
       <Tabs.Item active title="Tab 1">
         <p className="text-sm text-gray-500 dark:text-gray-400">Content 1</p>
       </Tabs.Item>

diff --git 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 (
-    <Tabs aria-label="Tabs with underline" style="underline">
+    <Tabs aria-label="Tabs with underline" variant="underline">
       <Tabs.Item active title="Profile" icon={HiUserCircle}>
         This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
         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 (
-    <Tabs aria-label="Tabs with underline" style="underline">
+    <Tabs aria-label="Tabs with underline" variant="underline">
       <Tabs.Item active title="Profile" icon={HiUserCircle}>
         This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
         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
@@ -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 => (
   </Tabs>
 );
 WithUnderline.args = {
-  style: "underline",
+  variant: "underline",
 };
 WithUnderline.storyName = "With underline";
 
@@ -69,7 +69,7 @@ export const WithIcons = (args: TabsProps): JSX.Element => (
   </Tabs>
 );
 WithIcons.args = {
-  style: "underline",
+  variant: "underline",
 };
 WithIcons.storyName = "With icons";
 
@@ -85,7 +85,7 @@ export const Pills = (args: TabsProps): JSX.Element => (
   </Tabs>
 );
 Pills.args = {
-  style: "pills",
+  variant: "pills",
 };
 
 export const FullWidth = (args: TabsProps): JSX.Element => (
@@ -100,6 +100,6 @@ export const FullWidth = (args: TabsProps): JSX.Element => (
   </Tabs>
 );
 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
@@ -14,16 +14,16 @@ export interface FlowbiteTabsTheme {
   base: string;
   tablist: {
     base: string;
-    styles: TabStyles;
+    variant: TabStyles;
     tabitem: {
       base: string;
-      styles: TabStyleItem<TabStyles>;
+      variant: TabStyleItem<TabStyles>;
       icon: string;
     };
   };
   tabitemcontainer: {
     base: string;
-    styles: TabStyles;
+    variant: TabStyles;
   };
   tabpanel: string;
 }
@@ -54,9 +54,9 @@ interface TabKeyboardEventProps extends TabEventProps {
   event: KeyboardEvent<HTMLButtonElement>;
 }
 
-export interface TabsProps extends Omit<ComponentProps<"div">, "ref" | "style"> {
+export interface TabsProps extends Omit<ComponentProps<"div">, "ref"> {
   onActiveTabChange?: (activeTab: number) => void;
-  style?: keyof TabStyles;
+  variant?: keyof TabStyles;
   theme?: DeepPartial<FlowbiteTabsTheme>;
 }
 
@@ -66,7 +66,7 @@ export interface TabsRef {
 
 const TabsComponent = forwardRef<TabsRef, TabsProps>(
   (
-    { children, className, onActiveTabChange, style = "default", theme: customTheme = {}, ...props },
+    { children, className, onActiveTabChange, variant = "default", theme: customTheme = {}, ...props },
     ref: ForwardedRef<TabsRef>,
   ) => {
     const theme = mergeDeep(getTheme().tabs, customTheme);
@@ -114,8 +114,8 @@ const TabsComponent = forwardRef<TabsRef, TabsProps>(
       }
     };
 
-    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<TabsRef, TabsProps>(
         <div
           aria-label="Tabs"
           role="tablist"
-          className={twMerge(theme.tablist.base, theme.tablist.styles[style], className)}
+          className={twMerge(theme.tablist.base, theme.tablist.variant[variant], className)}
           {...props}
         >
           {tabs.map((tab, index) => (

diff --git 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: "",