@12-apps/ui 1.0.0 → 1.3.1

package/src/components/navigation/Tabs/Tabs.styles.ts

@@ -0,0 +1,163 @@
+import type { CSSObject, Theme } from '@mui/material';
+import { alpha } from '@mui/material';
+
+const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
+    ...(size === 'sm' && {
+      minHeight: 32,
+      '& .MuiTab-root': {
+        fontSize: '0.875rem',
+        minHeight: 32,
+        padding: theme.spacing(0.5, 1.5),
+      },
+    }),
+
+    ...(size === 'lg' && {
+      minHeight: 56,
+      '& .MuiTab-root': {
+        fontSize: '1.125rem',
+        minHeight: 56,
+        padding: theme.spacing(1.5, 3),
+      },
+    }),
+
+});
+
+const compactVariantStyles = (theme: Theme, customVariant?: string): CSSObject => ({
+    ...(customVariant === 'default' && {
+      '& .MuiTabs-indicator': {
+        height: 3,
+        borderRadius: '3px 3px 0 0',
+        background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
+      },
+    }),
+
+    // Pills variant (rounded tabs)
+    ...(customVariant === 'pills' && {
+      '& .MuiTabs-indicator': {
+        display: 'none',
+      },
+      '& .MuiTab-root': {
+        borderRadius: theme.spacing(3),
+        margin: theme.spacing(0, 0.5),
+        minWidth: 'auto',
+        transition: 'all 0.3s ease',
+        '&:hover': {
+          backgroundColor: alpha(theme.palette.primary.main, 0.08),
+          transform: 'translateY(-1px)',
+        },
+        '&.Mui-selected': {
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.primary.contrastText,
+          boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+          '&:hover': {
+            backgroundColor: theme.palette.primary.dark,
+          },
+        },
+      },
+    }),
+
+    // Underline variant (minimal underline indicator)
+});
+
+const boxedVariantStyles = (theme: Theme, customVariant?: string): CSSObject => ({
+    ...(customVariant === 'underline' && {
+      '& .MuiTabs-flexContainer': {
+        gap: theme.spacing(2),
+      },
+      '& .MuiTabs-indicator': {
+        height: 2,
+        backgroundColor: theme.palette.primary.main,
+        borderRadius: 1,
+      },
+      '& .MuiTab-root': {
+        textTransform: 'none',
+        fontWeight: 500,
+        padding: theme.spacing(1, 0),
+        minWidth: 'auto',
+        '&:hover': {
+          color: theme.palette.primary.main,
+        },
+        '&.Mui-selected': {
+          color: theme.palette.primary.main,
+          fontWeight: 600,
+        },
+      },
+    }),
+
+    // Enclosed variant (bordered tabs)
+    ...(customVariant === 'enclosed' && {
+      '& .MuiTabs-indicator': {
+        display: 'none',
+      },
+      '& .MuiTabs-flexContainer': {
+        borderBottom: `1px solid ${theme.palette.divider}`,
+      },
+      '& .MuiTab-root': {
+        border: `1px solid ${theme.palette.divider}`,
+        borderBottom: 'none',
+        borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
+        margin: theme.spacing(0, 0.5),
+        marginBottom: -1,
+        backgroundColor: alpha(theme.palette.action.hover, 0.5),
+        '&:hover': {
+          backgroundColor: alpha(theme.palette.action.hover, 0.8),
+        },
+        '&.Mui-selected': {
+          backgroundColor: theme.palette.background.paper,
+          borderColor: theme.palette.divider,
+          borderBottomColor: theme.palette.background.paper,
+          zIndex: 1,
+        },
+      },
+    }),
+});
+
+const variantStyles = (theme: Theme, customVariant?: string): CSSObject => ({
+  ...compactVariantStyles(theme, customVariant),
+  ...boxedVariantStyles(theme, customVariant),
+});
+
+// Vertical rules between tabs, for the variants that do not already have edges.
+const dividerStyles = (
+  theme: Theme,
+  customVariant?: string,
+  showDividers?: boolean,
+): CSSObject => ({
+  ...(showDividers &&
+    customVariant !== 'enclosed' &&
+    customVariant !== 'pills' && {
+      '& .MuiTab-root:not(:last-child)': {
+        borderRight: `1px solid ${alpha(theme.palette.divider, 0.5)}`,
+      },
+    }),
+});
+
+// The root Tabs styling, kept out of Tabs.tsx so the styled() call stays small.
+// Spread into a fresh literal at the call site: handing styled() a named-type
+// value makes TypeScript demand a `variants` key (CSSObjectWithVariants).
+export const tabsRootStyles = ({
+  theme,
+  customVariant,
+  size,
+  showDividers,
+}: {
+  theme: Theme;
+  customVariant?: string;
+  size?: string;
+  showDividers?: boolean;
+}): CSSObject => ({
+    position: 'relative',
+
+    // Collapse disabled scroll buttons (e.g. the left button at the start of a
+    // scrollable row) so they don't reserve empty space before the first tab.
+    '& .MuiTabs-scrollButtons.Mui-disabled': {
+      width: 0,
+      minWidth: 0,
+      overflow: 'hidden',
+    },
+
+    // Size variants
+  ...sizeStyles(theme, size),
+  ...variantStyles(theme, customVariant),
+  ...dividerStyles(theme, customVariant, showDividers),
+});

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

@@ -1,12 +1,10 @@
-import {
-  Dashboard,
-  Email,
-  Home,
-  Notifications,
-  Person,
-  Security,
-  Settings,
-} from '@mui/icons-material';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Email from '@mui/icons-material/Email';
+import Home from '@mui/icons-material/Home';
+import Notifications from '@mui/icons-material/Notifications';
+import Person from '@mui/icons-material/Person';
+import Security from '@mui/icons-material/Security';
+import Settings from '@mui/icons-material/Settings';
 import { Box, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
@@ -228,29 +226,30 @@ export const KeyboardNavigation: Story = {
       const tab2 = canvas.getByRole('tab', { name: /Tab 2/i });
       const tab3 = canvas.getByRole('tab', { name: /Tab 3/i });
 
-      // Focus first tab
-      tab1.focus();
-      await expect(tab1).toHaveFocus();
+      // A tab list is a single tab stop (roving tabindex), so tabbing in from
+      // the body lands on the selected tab — the first one here.
+      await userEvent.tab();
+      await waitFor(() => expect(tab1).toHaveFocus());
 
       // Navigate right with arrow key
       await userEvent.keyboard('{ArrowRight}');
-      await expect(tab2).toHaveFocus();
+      await waitFor(() => expect(tab2).toHaveFocus());
 
       // Navigate right again
       await userEvent.keyboard('{ArrowRight}');
-      await expect(tab3).toHaveFocus();
+      await waitFor(() => expect(tab3).toHaveFocus());
 
       // Navigate left
       await userEvent.keyboard('{ArrowLeft}');
-      await expect(tab2).toHaveFocus();
+      await waitFor(() => expect(tab2).toHaveFocus());
     });
 
     await step('Tab activation with Enter key', async () => {
       const tab3 = canvas.getByRole('tab', { name: /Tab 3/i });
 
-      // Focus tab3
-      tab3.focus();
-      await expect(tab3).toHaveFocus();
+      // Focus is on tab 2 from the previous step; arrow right to reach tab 3.
+      await userEvent.keyboard('{ArrowRight}');
+      await waitFor(() => expect(tab3).toHaveFocus());
 
       // Activate with Enter
       await userEvent.keyboard('{Enter}');
@@ -265,17 +264,15 @@ export const KeyboardNavigation: Story = {
     });
 
     await step('Tab navigation with Tab key', async () => {
-      const tab1 = canvas.getByRole('tab', { name: /Tab 1/i });
+      const tab3 = canvas.getByRole('tab', { name: /Tab 3/i });
 
-      // Focus first tab
-      tab1.focus();
-      await expect(tab1).toHaveFocus();
+      // Focus is still on tab 3, activated in the previous step.
+      await waitFor(() => expect(tab3).toHaveFocus());
 
-      // Tab to content
+      // Tab to content. Because the list is one tab stop, Tab has to leave the
+      // list entirely rather than step to the next tab.
       await userEvent.tab();
-
-      // Should have moved focus out of tabs
-      await expect(tab1).not.toHaveFocus();
+      await waitFor(() => expect(tab3).not.toHaveFocus());
     });
   },
 };
@@ -386,8 +383,9 @@ export const ClosableTabsTest: Story = {
       const tab3 = canvas.getByRole('tab', { name: /Tab 3/i });
 
       // Should not have a close button within Tab 3
-      const closeButtonInTab3 = within(tab3).queryByRole('button', { name: 'Close tab' });
-      await expect(closeButtonInTab3).not.toBeInTheDocument();
+      await waitFor(() =>
+        expect(within(tab3).queryByRole('button', { name: 'Close tab' })).not.toBeInTheDocument(),
+      );
     });
   },
 };
@@ -528,8 +526,9 @@ export const DisabledTabsTest: Story = {
 
     await step('Verify disabled content is not shown', async () => {
       // The disabled tab's content should not be visible
-      const disabledContent = canvas.queryByText('This should not be visible');
-      await expect(disabledContent).not.toBeInTheDocument();
+      await waitFor(() =>
+        expect(canvas.queryByText('This should not be visible')).not.toBeInTheDocument(),
+      );
     });
   },
 };
@@ -831,8 +830,9 @@ export const LoadingStateTest: Story = {
 
     await step('Verify content is not shown while loading', async () => {
       // Content should not be visible
-      const content = canvas.queryByText('Content for Tab 1');
-      await expect(content).not.toBeInTheDocument();
+      await waitFor(() =>
+        expect(canvas.queryByText('Content for Tab 1')).not.toBeInTheDocument(),
+      );
     });
   },
 };
@@ -885,17 +885,17 @@ export const AccessibilityTest: Story = {
     await step('Verify keyboard accessibility', async () => {
       const firstTab = canvas.getByRole('tab', { name: /Home/i });
 
-      // Focus first tab
-      firstTab.focus();
-      await expect(firstTab).toHaveFocus();
+      // Tab in from the body — the selected tab is the list's single tab stop.
+      await userEvent.tab();
+      await waitFor(() => expect(firstTab).toHaveFocus());
 
       // Tab key should move focus out of tablist
       await userEvent.tab();
-      await expect(firstTab).not.toHaveFocus();
+      await waitFor(() => expect(firstTab).not.toHaveFocus());
 
       // Shift+Tab should return focus to tablist
       await userEvent.tab({ shift: true });
-      await expect(firstTab).toHaveFocus();
+      await waitFor(() => expect(firstTab).toHaveFocus());
     });
   },
 };