Tabs patch

docs/docs/components/tab.mdx → docs/docs/components/tabs.mdx

@@ -2,24 +2,24 @@
 
 ### Quick start
 
-Here's a quick start guide to get started with the Tab component
+Here's a quick start guide to get started with the Tabs component
 
 ### Importing Component
 
 ```jsx
-import { Tab } from "@hover-design/react";
+import { Tabs } from "@hover-design/react";
 ```
 
 ### Code Snippets and Examples
 
-##### Tab Default
+##### Tabs Default
 
 import "@hover-design/react/dist/style.css";
-import { Tab } from "@hover-design/react";
+import { Tabs } from "@hover-design/react";
 import { useState } from "react";
 
 ```jsx
-const tabData = [
+const tabsData = [
   {
     label: "First",
     value: "first",
@@ -43,17 +43,17 @@ const tabData = [
 ];
 
 <div className="App">
-  <Tab defaultValue={"first"} tabData={tabData}>
+  <Tabs defaultValue={"first"} tabsData={tabsData}>
     {(selectedTab) => <div>{selectedTab.label}</div>}
-  </Tab>
+  </Tabs>
 </div>;
 ```
 
 > **_(selectedTab)_** contains the whole tab object which is selected.
 
-<Tab
+<Tabs
   defaultValue={"first"}
-  tabData={[
+  tabsData={[
     {
       label: "First",
       value: "first",
@@ -105,14 +105,14 @@ const tabData = [
   ]}
 >
   {(selectedTab) => <div>{selectedTab?.label}</div>}
-</Tab>
+</Tabs>
 
 ##### Controlled Tabs
 
 ```jsx
 const [activeTab, setActiveTab] = useState("first");
 
-const tabData = [
+const tabsData = [
   {
     label: "First",
     value: "first",
@@ -136,27 +136,27 @@ const tabData = [
 ];
 
 <div className="App">
-  <Tab
+  <Tabs
     value={activeTab}
     onChange={(selectedTab) => setActiveTab(selectedTab.value)}
     value
-    tabData={tabData}
+    tabsData={tabsData}
   >
     {(selectedTab) => <div>{selectedTab.label}</div>}
-  </Tab>
+  </Tabs>
 </div>;
 ```
 
-> **_(tabData)_** contains the whole tab object which is selected.
+> **_(tabsData)_** contains the whole tab object which is selected.
 
 export const App = () => {
   const [activeTab, setActiveTab] = useState("first");
   return (
-    <Tab
+    <Tabs
       grow
       value={activeTab}
       onChange={(selectedTab) => setActiveTab(selectedTab.value)}
-      tabData={[
+      tabsData={[
         {
           label: "First",
           value: "first",
@@ -208,27 +208,27 @@ export const App = () => {
       ]}
     >
       {(selectedTab) => <div>{selectedTab?.label}</div>}
-    </Tab>
+    </Tabs>
   );
 };
 
 <App />
 
 ### Props Reference
 
-| Attributes   |                                     Values                                      | Default Value | Optional ? |
-| :----------- | :-----------------------------------------------------------------------------: | :-----------: | ---------: |
-| defaultValue | _ must be equal to value from ** Tab Object ** _ <br/> `string` &#124; `number` |               |        Yes |
-| value        | _ must be equal to value from ** Tab Object ** _ <br/> `string` &#124; `number` |               |        Yes |
-| color        |                                    `string`                                     |   `#2F80ED`   |        Yes |
-| background   |                                    `string`                                     |   `#d7e9ff`   |        Yes |
-| onChange     |                           `(selectedTabObject)=>void`                           |   `()=>{}`    |        Yes |
-| grow         |                      grows to fit the containter `boolean`                      |    `false`    |        Yes |
-| height       |                                    `string`                                     |    `40px`     |        Yes |
-| tabData      |                           `Array of` **_Tab Object_**                           |               |         No |
-| children     |  _ not a prop but children to the `<Tab/>`_ <br/> `(selectedTabObject)=> JSX `  |               |         No |
-
-### Tab Object
+| Attributes   |                                      Values                                      | Default Value | Optional ? |
+| :----------- | :------------------------------------------------------------------------------: | :-----------: | ---------: |
+| defaultValue | _ must be equal to value from ** Tabs Object ** _ <br/> `string` &#124; `number` |               |        Yes |
+| value        | _ must be equal to value from ** Tabs Object ** _ <br/> `string` &#124; `number` |               |        Yes |
+| color        |                                     `string`                                     |   `#2F80ED`   |        Yes |
+| background   |                                     `string`                                     |   `#d7e9ff`   |        Yes |
+| onChange     |                           `(selectedTabObject)=>void`                            |   `()=>{}`    |        Yes |
+| grow         |                      grows to fit the containter `boolean`                       |    `false`    |        Yes |
+| height       |                                     `string`                                     |    `40px`     |        Yes |
+| tabsData     |                           `Array of` **_Tabs Object_**                           |               |         No |
+| children     |  _ not a prop but children to the `<Tabs/>`_ <br/> `(selectedTabObject)=> JSX `  |               |         No |
+
+### Tabs Object
 
 | Key      |             type              | Optional ? |
 | :------- | :---------------------------: | ---------: |

lib/src/components/Tab/Tab.tsx → lib/src/components/Tab/Tabs.tsx

@@ -12,13 +12,13 @@ import {
   badgeStyles,
   contentStyles,
   iconStyles,
-  tabHeaderContainerStyles,
-  tabRecipe,
-  tabVars,
-} from "./tab.css";
-import { TabsObjectProps, TabProps } from "./tab.types";
+  tabsHeaderContainerStyles,
+  tabsRecipe,
+  tabsVars,
+} from "./tabs.css";
+import { TabsObjectProps, TabsProps } from "./tabs.types";
 
-const TabComponent: ForwardRefRenderFunction<HTMLDivElement, TabProps> = (
+const TabComponent: ForwardRefRenderFunction<HTMLDivElement, TabsProps> = (
   {
     defaultValue,
     value,
@@ -27,7 +27,7 @@ const TabComponent: ForwardRefRenderFunction<HTMLDivElement, TabProps> = (
     onChange = () => {},
     grow = false,
     height = "40px",
-    tabData,
+    tabsData,
     style,
     className,
     children,
@@ -39,9 +39,9 @@ const TabComponent: ForwardRefRenderFunction<HTMLDivElement, TabProps> = (
 
   useEffect(() => {
     const activeValue = value || defaultValue;
-    const tab = tabData.find((tabItem) => tabItem.value === activeValue);
+    const tab = tabsData.find((tabItem) => tabItem.value === activeValue);
     tab && setSelectedTab(tab);
-  }, [defaultValue, tabData, value]);
+  }, [defaultValue, tabsData, value]);
 
   const internalOnClickHandler = (
     event: MouseEvent<HTMLDivElement>,
@@ -55,12 +55,12 @@ const TabComponent: ForwardRefRenderFunction<HTMLDivElement, TabProps> = (
     <div ref={ref} {...nativeProps} className={className} style={style}>
       <Flex
         style={assignInlineVars({
-          [tabVars.height]: height,
+          [tabsVars.height]: height,
         })}
-        className={`${tabHeaderContainerStyles}`}
+        className={`${tabsHeaderContainerStyles}`}
       >
-        {tabData.map((tabItem, ind) => {
-          const tabClass = tabRecipe({
+        {tabsData.map((tabItem, ind) => {
+          const tabClass = tabsRecipe({
             active: tabItem.value === selectedTab?.value,
             disabled: tabItem.disabled,
           });
@@ -70,8 +70,8 @@ const TabComponent: ForwardRefRenderFunction<HTMLDivElement, TabProps> = (
               justifyContent="center"
               flexGrow={grow ? "1" : "0"}
               style={assignInlineVars({
-                [tabVars.color]: color,
-                [tabVars.background]: background,
+                [tabsVars.color]: color,
+                [tabsVars.background]: background,
               })}
               className={tabClass}
               onClick={(event) => internalOnClickHandler(event, tabItem)}
@@ -100,4 +100,4 @@ const TabComponent: ForwardRefRenderFunction<HTMLDivElement, TabProps> = (
   );
 };
 
-export const Tab = forwardRef(TabComponent);
+export const Tabs = forwardRef(TabComponent);

lib/src/components/Tab/index.tsx

@@ -1,2 +1,2 @@
-export * from "./Tab";
-export * from "./tab.css";
+export * from "./Tabs";
+export * from "./tabs.css";

lib/src/components/Tab/tab.css.ts → lib/src/components/Tab/tabs.css.ts

@@ -1,20 +1,20 @@
 import { createTheme, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
-import { TabTheme } from "./tab.types";
+import { TabTheme } from "./tabs.types";
 
-export const [tabTheme, tabVars]: TabTheme = createTheme({
+export const [tabsTheme, tabsVars]: TabTheme = createTheme({
   color: "#2F80ED",
   background: "#BDDBFF60",
   height: "50px",
 });
 
-export const tabHeaderContainerStyles = style({
-  height: tabVars.height,
+export const tabsHeaderContainerStyles = style({
+  height: tabsVars.height,
   position: "relative",
   borderBottom: "2px solid #EBECF0",
 });
 
-export const tabRecipe = recipe({
+export const tabsRecipe = recipe({
   base: {
     cursor: "pointer",
     height: "100%",
@@ -23,17 +23,17 @@ export const tabRecipe = recipe({
     padding: "8px 10px",
     borderRadius: "4px 4px 0px 0px",
     ":hover": {
-      background: tabVars.background,
-      color: tabVars.color,
+      background: tabsVars.background,
+      color: tabsVars.color,
     },
   },
   variants: {
     active: {
       true: {
-        color: tabVars.color,
+        color: tabsVars.color,
         ":after": {
           content: "",
-          background: tabVars.color,
+          background: tabsVars.color,
           position: "absolute",
           bottom: "-2px",
           left: 0,
@@ -46,7 +46,7 @@ export const tabRecipe = recipe({
     },
     disabled: {
       true: {
-        color: "#42526E",
+        color: "#a0a8b7",
         pointerEvents: "none",
       },
     },

lib/src/components/Tab/tab.types.ts → lib/src/components/Tab/tabs.types.ts

@@ -1,4 +1,6 @@
-export type TabProps = JSX.IntrinsicElements["div"] & {
+type divType = Omit<JSX.IntrinsicElements["div"], "children">;
+
+export type TabsProps = divType & {
   children: (selectedTab: TabsObjectProps) => JSX.Element;
   color?: string;
   background?: string;
@@ -9,7 +11,7 @@ export type TabProps = JSX.IntrinsicElements["div"] & {
     value: TabsObjectProps,
     event: React.MouseEvent<HTMLDivElement>
   ) => void;
-  tabData: TabsObjectProps[];
+  tabsData: TabsObjectProps[];
   grow?: boolean;
 };