feat: add default type styling support for Tabs component (#1044)

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: tenphi

.changeset/tabs-default-type.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add support for default type styling in Tabs component. TabsAction now adapts its appearance based on tabs type (outline for default type, neutral for others).

src/components/navigation/Tabs/TabDropIndicator.tsx

@@ -35,7 +35,6 @@ export function TabDropIndicator({
   position,
 }: TabDropIndicatorProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const prevContentRef = useRef<string | null>(null);
   const [, setTick] = useState(0);
 
   const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(
@@ -44,7 +43,7 @@ export function TabDropIndicator({
     ref,
   );
 
-  // Re-evaluate drop target registration when tab content changes.
+  // Re-evaluate drop target registration when tab layout changes.
   // Active only while the indicator is rendered in the DOM (during drags).
   useEffect(() => {
     const element = ref.current;
@@ -53,22 +52,11 @@ export function TabDropIndicator({
     const tabList = element.closest('[data-element="TabList"]');
     if (!tabList) return;
 
-    prevContentRef.current = tabList.textContent;
-
-    const observer = new MutationObserver(() => {
-      const currentContent = tabList.textContent;
-
-      if (currentContent !== prevContentRef.current) {
-        prevContentRef.current = currentContent;
-        setTick((n) => n + 1);
-      }
+    const observer = new ResizeObserver(() => {
+      setTick((n) => n + 1);
     });
 
-    observer.observe(tabList, {
-      subtree: true,
-      characterData: true,
-      childList: true,
-    });
+    observer.observe(tabList);
 
     return () => observer.disconnect();
   }, [isHidden]);

src/components/navigation/Tabs/Tabs.stories.tsx

@@ -338,10 +338,9 @@ export const WithPrefixAndSuffix: Story = {
   render: (args) => (
     <Tabs
       {...args}
-      size="large"
       defaultActiveKey="tab1"
-      prefix={<Button size="small">Menu</Button>}
-      suffix={<Button size="small">Add New</Button>}
+      prefix={<Tabs.Action>Menu</Tabs.Action>}
+      suffix={<Tabs.Action>Add New</Tabs.Action>}
     >
       <Tab key="tab1" title="Items">
         <Paragraph>List of items here.</Paragraph>

src/components/navigation/Tabs/Tabs.tsx

@@ -168,7 +168,8 @@ function TabsComponent(
 
   // Build TabList padding style (memoized)
   const tabListPaddingStyles = useMemo(
-    () => (tabListPadding ? { padding: `0 ${tabListPadding}` } : undefined),
+    () =>
+      tabListPadding ? { '$tablist-padding': `${tabListPadding}` } : undefined,
     [tabListPadding],
   );
 

src/components/navigation/Tabs/TabsAction.tsx

@@ -29,12 +29,13 @@ export interface CubeTabsActionProps
 // =============================================================================
 
 const TabsActionElement = tasty(ItemButton, {
-  shape: 'sharp',
-  type: 'neutral',
   styles: {
     border: {
-      '': 0,
-      'tabs-type-file & !:first-child': 'left',
+      'type=neutral': 0,
+      'type=neutral & tabs-type-file & !:first-child': 'left',
+    },
+    radius: {
+      'type=neutral': 0,
     },
   },
 });
@@ -75,7 +76,7 @@ export const TabsAction = forwardRef(function TabsAction(
   props: CubeTabsActionProps,
   ref: FocusableRef<HTMLElement>,
 ) {
-  const { size, mods, ...rest } = props;
+  const { size, mods, type, ...rest } = props;
 
   // Get size and type from context if available (when used inside Tabs)
   const tabsContext = useOptionalTabsContext();
@@ -93,6 +94,7 @@ export const TabsAction = forwardRef(function TabsAction(
   return (
     <TabsActionElement
       ref={ref}
+      type={type ?? (tabsType === 'default' ? 'outline' : 'neutral')}
       size={effectiveSize}
       mods={combinedMods}
       {...rest}

src/components/navigation/Tabs/styled.ts

@@ -50,6 +50,14 @@ export const TabsElement = tasty({
       placeContent: 'center',
       flexShrink: 0,
       placeSelf: 'stretch',
+      padding: {
+        '': 0,
+        'type=default': '.5x 0 .5x 1x',
+      },
+      gap: {
+        '': 0,
+        'type=default': '.5x',
+      },
       border: {
         '': 0,
         'type=file': 'right',
@@ -63,6 +71,14 @@ export const TabsElement = tasty({
       placeContent: 'center',
       flexShrink: 0,
       placeSelf: 'stretch',
+      padding: {
+        '': 0,
+        'type=default': '.5x 1x .5x 0',
+      },
+      gap: {
+        '': 0,
+        'type=default': '.5x',
+      },
       border: {
         '': 0,
         'type=file': 'left',
@@ -131,6 +147,7 @@ export const TabsElement = tasty({
       },
       gap: {
         '': 0,
+        'type=default': '1x',
         'type=narrow': '2x',
         'type=radio': '.5x',
       },
@@ -140,6 +157,12 @@ export const TabsElement = tasty({
         '': 'max-content',
         'type=radio': '100%',
       },
+      padding: '0 $tablist-padding',
+
+      '$tablist-padding': {
+        '': '0',
+        'type=default | type=narrow': '1x',
+      },
     },
 
     // Size variable for actions (if ItemAction is used instead of TabsAction)
@@ -181,17 +204,18 @@ export const TabElement = tasty(Item, {
   styles: {
     radius: {
       '': false,
-      'type=radio': true,
-      'type=default | type=narrow': 'top',
+      'type=radio | type=default': true,
+      'type=narrow': 'top',
     },
     color: {
       '': '#dark-02',
-      '(type=default | type=narrow) & (hovered & !selected)': '#primary-text',
+      'type=narrow & (hovered & !selected)': '#primary-text',
       '(type=default | type=narrow) & selected': '#primary-text',
       disabled: '#dark-04',
     },
     fill: {
       '': '#clear',
+      'hovered & !type=narrow': '#dark.03',
       'type=file': '#light',
       'type=file & hovered': '#light.5',
       'type=radio & hovered': '#white.5',
@@ -252,6 +276,10 @@ export const TabContainer = tasty({
   styles: {
     position: 'relative',
     display: 'grid',
+    margin: {
+      '': 0,
+      'type=default': '.5x 0',
+    },
     border: {
       '': 0,
       'type=file': 'right',

src/utils/react/interactions.ts

@@ -1,19 +1,22 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useFocus as reactAriaUseFocus, useFocusVisible } from 'react-aria';
 
 export function useFocus(
   { isDisabled }: { isDisabled?: boolean },
   onlyVisible = false,
 ) {
-  useEffect(() => {
+  let [isFocused, setIsFocused] = useState(false);
+
+  // React-aria detaches focus handlers when disabled, so blur events
+  // aren't captured. Clear stale focus synchronously during render
+  // to avoid a one-frame glitch (useEffect would be too late).
+  if (isDisabled && isFocused) {
     setIsFocused(false);
-  }, [isDisabled]);
+  }
 
-  let [isFocused, setIsFocused] = useState(false);
   let { isFocusVisible } = useFocusVisible({});
   let { focusProps } = reactAriaUseFocus({
     isDisabled,
-    // @ts-ignore
     onFocusChange: setIsFocused,
   });