chore(Tab): added bg and border colors (full support WIP)

Author: benjitrosch

src/Tabs/RadioTab.tsx

@@ -2,10 +2,15 @@ import React, { forwardRef, ReactNode } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
+import { ComponentColor } from '../types'
+
 export type RadioTabProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
-  'type'
+  'type' | 'color'
 > & {
+  color?: ComponentColor
+  bgColor?: string
+  borderColor?: string
   active?: boolean
   disabled?: boolean
   label: string
@@ -18,6 +23,9 @@ const RadioTab = forwardRef<HTMLInputElement, RadioTabProps>(
     {
       children,
       className,
+      color,
+      bgColor,
+      borderColor,
       active,
       label,
       disabled,
@@ -31,6 +39,16 @@ const RadioTab = forwardRef<HTMLInputElement, RadioTabProps>(
       'tab',
       className,
       clsx({
+        [`[--tab-bg:${bgColor}]`]: bgColor,
+        [`[--tab-border-color:${borderColor}]`]: borderColor,
+        'text-neutral': color === 'neutral',
+        'text-primary': color === 'primary',
+        'text-secondary': color === 'secondary',
+        'text-accent': color === 'accent',
+        'text-info': color === 'info',
+        'text-success': color === 'success',
+        'text-warning': color === 'warning',
+        'text-error': color === 'error',
         'tab-active': active,
         'tab-disabled': disabled,
       })

src/Tabs/Tab.tsx

@@ -2,17 +2,41 @@ import React, { forwardRef } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-export type TabProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+import { ComponentColor } from '../types'
+
+export type TabProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> & {
+  color?: ComponentColor
+  bgColor?: string
+  borderColor?: string
   active?: boolean
   disabled?: boolean
 }
 
 const Tab = forwardRef<HTMLAnchorElement, TabProps>(
-  ({ children, className, active, disabled, ...props }, ref): JSX.Element => {
+  ({
+    children,
+    className,
+    color,
+    bgColor,
+    borderColor,
+    active,
+    disabled,
+    ...props
+  }, ref): JSX.Element => {
     const classes = twMerge(
       'tab',
       className,
       clsx({
+        [`[--tab-bg:${bgColor}]`]: bgColor,
+        [`[--tab-border-color:${borderColor}]`]: borderColor,
+        'text-neutral': color === 'neutral',
+        'text-primary': color === 'primary',
+        'text-secondary': color === 'secondary',
+        'text-accent': color === 'accent',
+        'text-info': color === 'info',
+        'text-success': color === 'success',
+        'text-warning': color === 'warning',
+        'text-error': color === 'error',
         'tab-active': active,
         'tab-disabled': disabled,
       })

src/Tabs/Tabs.stories.tsx

@@ -132,3 +132,18 @@ RadioTabLifted.args = {
   className: 'w-full my-10 lg:mx-10',
   variant: 'lifted',
 }
+
+export const TabsWithCustomColor: Story<TabsProps> = (args) => {
+  return (
+    <Tabs {...args}>
+      <Tabs.Tab>Tab 1</Tabs.Tab>
+      <Tabs.Tab color="primary" bgColor="yellow" borderColor="orange" active={true}>Tab 2</Tabs.Tab>
+      <Tabs.Tab>Tab 3</Tabs.Tab>
+    </Tabs>
+  )
+}
+TabsWithCustomColor.args = {
+  className: 'w-full my-10 lg:mx-10',
+  variant: 'lifted',
+}
+

src/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef, ReactElement } from 'react'
+import React, { forwardRef } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'