refactor: rename tabs to tab

Author: mxschll

pages/tabs/style-permutations.page.tsx

@@ -10,7 +10,7 @@ import ScreenshotArea from '../utils/screenshot-area';
 
 // Rounded with background
 const style1 = {
-  tabs: {
+  tab: {
     backgroundColor: {
       default: 'light-dark(#f1f5f9, #1e293b)',
       hover: 'light-dark(#dbeafe, #1e3a8a)',
@@ -58,7 +58,7 @@ const style1 = {
 
 // Border colors with background
 const style2 = {
-  tabs: {
+  tab: {
     backgroundColor: {
       default: 'light-dark(#fef3c7, #422006)',
       hover: 'light-dark(#fde68a, #713f12)',

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -25739,7 +25739,7 @@ need to introduce friction to the switching of tabs.",
               ],
               "type": "object",
             },
-            "name": "tabs",
+            "name": "tab",
             "optional": true,
             "type": "{ backgroundColor?: { active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; borderColor?: { active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; ... 8 more .....",
           },

src/tabs/__tests__/styles.test.tsx

@@ -9,7 +9,7 @@ jest.mock('../../internal/environment', () => ({
 }));
 
 const testStyles = {
-  tabs: {
+  tab: {
     borderRadius: '4px',
     borderWidth: '2px',
     fontSize: '16px',

src/tabs/interfaces.ts

@@ -199,7 +199,7 @@ export namespace TabsProps {
   }
 
   export interface Style {
-    tabs?: {
+    tab?: {
       backgroundColor?: {
         active?: string;
         default?: string;

src/tabs/styles.tsx

@@ -10,27 +10,27 @@ export function getTabStyles(style: TabsProps['style']) {
   }
 
   return {
-    borderRadius: style?.tabs?.borderRadius,
-    borderWidth: style?.tabs?.borderWidth,
-    fontSize: style?.tabs?.fontSize,
-    fontWeight: style?.tabs?.fontWeight,
-    paddingBlock: style?.tabs?.paddingBlock,
-    paddingInline: style?.tabs?.paddingInline,
-    [customCssProps.styleBackgroundActive]: style?.tabs?.backgroundColor?.active,
-    [customCssProps.styleBackgroundDefault]: style?.tabs?.backgroundColor?.default,
-    [customCssProps.styleBackgroundDisabled]: style?.tabs?.backgroundColor?.disabled,
-    [customCssProps.styleBackgroundHover]: style?.tabs?.backgroundColor?.hover,
-    [customCssProps.styleBorderColorActive]: style?.tabs?.borderColor?.active,
-    [customCssProps.styleBorderColorDefault]: style?.tabs?.borderColor?.default,
-    [customCssProps.styleBorderColorDisabled]: style?.tabs?.borderColor?.disabled,
-    [customCssProps.styleBorderColorHover]: style?.tabs?.borderColor?.hover,
-    [customCssProps.styleColorActive]: style?.tabs?.color?.active,
-    [customCssProps.styleColorDefault]: style?.tabs?.color?.default,
-    [customCssProps.styleColorDisabled]: style?.tabs?.color?.disabled,
-    [customCssProps.styleColorHover]: style?.tabs?.color?.hover,
-    [customCssProps.styleFocusRingBorderColor]: style?.tabs?.focusRing?.borderColor,
-    [customCssProps.styleFocusRingBorderRadius]: style?.tabs?.focusRing?.borderRadius,
-    [customCssProps.styleFocusRingBorderWidth]: style?.tabs?.focusRing?.borderWidth,
+    borderRadius: style?.tab?.borderRadius,
+    borderWidth: style?.tab?.borderWidth,
+    fontSize: style?.tab?.fontSize,
+    fontWeight: style?.tab?.fontWeight,
+    paddingBlock: style?.tab?.paddingBlock,
+    paddingInline: style?.tab?.paddingInline,
+    [customCssProps.styleBackgroundActive]: style?.tab?.backgroundColor?.active,
+    [customCssProps.styleBackgroundDefault]: style?.tab?.backgroundColor?.default,
+    [customCssProps.styleBackgroundDisabled]: style?.tab?.backgroundColor?.disabled,
+    [customCssProps.styleBackgroundHover]: style?.tab?.backgroundColor?.hover,
+    [customCssProps.styleBorderColorActive]: style?.tab?.borderColor?.active,
+    [customCssProps.styleBorderColorDefault]: style?.tab?.borderColor?.default,
+    [customCssProps.styleBorderColorDisabled]: style?.tab?.borderColor?.disabled,
+    [customCssProps.styleBorderColorHover]: style?.tab?.borderColor?.hover,
+    [customCssProps.styleColorActive]: style?.tab?.color?.active,
+    [customCssProps.styleColorDefault]: style?.tab?.color?.default,
+    [customCssProps.styleColorDisabled]: style?.tab?.color?.disabled,
+    [customCssProps.styleColorHover]: style?.tab?.color?.hover,
+    [customCssProps.styleFocusRingBorderColor]: style?.tab?.focusRing?.borderColor,
+    [customCssProps.styleFocusRingBorderRadius]: style?.tab?.focusRing?.borderRadius,
+    [customCssProps.styleFocusRingBorderWidth]: style?.tab?.focusRing?.borderWidth,
   };
 }
 
@@ -40,9 +40,9 @@ export function getTabContainerStyles(style: TabsProps['style']) {
   }
 
   return {
-    [customCssProps.styleTabsUnderlineColor]: style?.tabs?.underline?.color,
-    [customCssProps.styleTabsUnderlineWidth]: style?.tabs?.underline?.width,
-    [customCssProps.styleTabsUnderlineBorderRadius]: style?.tabs?.underline?.borderRadius,
+    [customCssProps.styleTabsUnderlineColor]: style?.tab?.underline?.color,
+    [customCssProps.styleTabsUnderlineWidth]: style?.tab?.underline?.width,
+    [customCssProps.styleTabsUnderlineBorderRadius]: style?.tab?.underline?.borderRadius,
     [customCssProps.styleTabsSeparatorColor]: style?.tabSeparator?.color,
     [customCssProps.styleTabsSeparatorWidth]: style?.tabSeparator?.width,
   };