fix: TabBar が margin を持たないように修正 (#5054)

uknmr · web-flow · commit 032f9b7ff04c · 2024-10-25T18:03:59.000+09:00
diff --git a/packages/smarthr-ui/src/components/TabBar/TabBar.tsx b/packages/smarthr-ui/src/components/TabBar/TabBar.tsx
@@ -6,7 +6,7 @@ import { Reel } from '../Layout'
 const tabBar = tv({
   slots: {
     wrapper: 'smarthr-ui-TabBar',
-    inner: 'shr-grow shr-m-0.25',
+    inner: 'shr-grow',
   },
   variants: {
     bordered: {
diff --git a/packages/smarthr-ui/src/components/TabBar/TabItem.tsx b/packages/smarthr-ui/src/components/TabBar/TabItem.tsx
@@ -13,7 +13,7 @@ const tabItem = tv({
       'shr-group/tabitem',
       'shr-relative shr-px-1 shr-py-0.75 shr-inline-flex shr-items-center shr-gap-0.5',
       'hover:shr-bg-white-darken',
-      'focus-visible:shr-z-1',
+      'focus-visible:shr-z-1 focus-visible:shr-focus-indicator--inner',
       'disabled:shr-cursor-not-allowed disabled:shr-bg-transparent',
       'aria-selected:before:shr-absolute aria-selected:before:shr-inset-x-0 aria-selected:before:shr-bottom-0 aria-selected:before:shr-content-[""] aria-selected:before:shr-block aria-selected:before:shr-h-0.25 aria-selected:before:shr-bg-main aria-selected:before:shr-z-1',
       'forced-colors:aria-selected:before:shr-bg-[Highlight]',
diff --git a/packages/smarthr-ui/src/components/TabBar/stories/TabBar.stories.tsx b/packages/smarthr-ui/src/components/TabBar/stories/TabBar.stories.tsx
@@ -25,12 +25,6 @@ export default {
   },
 } as Meta<typeof TabBar>
 
-export const Default: StoryObj<typeof TabBar> = {
-  args: {
-    bordered: true,
-  },
-}
-
 export const Playground: StoryObj<typeof TabBar> = {
   args: {
     bordered: true,
diff --git a/packages/smarthr-ui/src/components/TabBar/stories/VRTTabBar.stories.tsx b/packages/smarthr-ui/src/components/TabBar/stories/VRTTabBar.stories.tsx
@@ -8,7 +8,7 @@ import { Stack } from '../../Layout'
 import { TabBar } from '../TabBar'
 import { TabItem } from '../TabItem'
 
-import type { StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Navigation（ナビゲーション）/TabBar/VRT',
@@ -20,84 +20,71 @@ export default {
    * true     false    true     なし    あり
    * true     true     false    あり    あり
    * true     false    false    なし    なし */
-  render: (args: any) => (
-    <Stack {...args}>
-      <TabBar bordered={false}>
-        <TabItem id="tab1" onClick={action('clicked')} suffix={<Badge count={100} />}>
-          タブ1
-        </TabItem>
-        <TabItem
-          id="tab2"
-          onClick={action('clicked')}
-          selected
-          disabled
-          disabledDetail={{ message: 'タブが無効な理由' }}
-        >
-          タブ2
-        </TabItem>
-      </TabBar>
-      <TabBar>
-        <TabItem
-          id="tab3"
-          onClick={action('clicked')}
-          selected
-          disabled
-          suffix={<Badge count={100} />}
-        >
-          タブ3
-        </TabItem>
-        <TabItem
-          id="tab4"
-          onClick={action('clicked')}
-          disabled
-          disabledDetail={{ message: 'タブが無効な理由' }}
-        >
-          タブ4
-        </TabItem>
-        <TabItem
-          id="tab5"
-          onClick={action('clicked')}
-          selected
-          suffix={<FaCircleExclamationIcon color="DANGER" />}
-          disabledDetail={{ message: 'タブが無効な理由' }}
-        >
-          タブ5
-        </TabItem>
-        <TabItem id="tab6" onClick={action('clicked')}>
-          タブ6
-        </TabItem>
-      </TabBar>
+  render: (args) => (
+    <Stack>
+      {[undefined, 'hover', 'focus-visible'].map((variant) => (
+        <Stack id={variant} key={variant}>
+          <TabBar {...args} bordered={false}>
+            <TabItem id="tab1" onClick={action('clicked')} suffix={<Badge count={100} />}>
+              タブ1
+            </TabItem>
+            <TabItem
+              id="tab2"
+              onClick={action('clicked')}
+              selected
+              disabled
+              disabledDetail={{ message: 'タブが無効な理由' }}
+            >
+              タブ2
+            </TabItem>
+          </TabBar>
+          <TabBar>
+            <TabItem
+              id="tab3"
+              onClick={action('clicked')}
+              selected
+              disabled
+              suffix={<Badge count={100} />}
+            >
+              タブ3
+            </TabItem>
+            <TabItem
+              id="tab4"
+              onClick={action('clicked')}
+              disabled
+              disabledDetail={{ message: 'タブが無効な理由' }}
+            >
+              タブ4
+            </TabItem>
+            <TabItem
+              id="tab5"
+              onClick={action('clicked')}
+              selected
+              suffix={<FaCircleExclamationIcon color="DANGER" />}
+              disabledDetail={{ message: 'タブが無効な理由' }}
+            >
+              タブ5
+            </TabItem>
+            <TabItem id="tab6" onClick={action('clicked')}>
+              タブ6
+            </TabItem>
+          </TabBar>
+        </Stack>
+      ))}
     </Stack>
   ),
   parameters: {
     chromatic: { disableSnapshot: false },
   },
   tags: ['!autodocs'],
-}
-
-export const VRT = {}
+} satisfies Meta<typeof TabBar>
 
-export const VRTHover = {
-  ...VRT,
-  args: {
-    id: 'hover',
-  },
+export const VRT = {
   parameters: {
     pseudo: {
       hover: ['#hover .smarthr-ui-TabItem'],
+      focusVisible: ['#focus-visible .smarthr-ui-TabItem'],
     },
-    // MEMO: VRT として機能していないので、解決するまでスナップショットを無効化
-    chromatic: { disableSnapshot: true },
-  },
-}
-
-export const VRTKeyboardFocus: StoryObj = {
-  ...VRT,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const tabs = canvas.getAllByRole('tab')
-    // bordered で disabledDetail が存在するアイテムにフォーカス
-    tabs[3].focus()
   },
 }
 
diff --git a/packages/smarthr-ui/src/smarthr-ui-preset.ts b/packages/smarthr-ui/src/smarthr-ui-preset.ts
@@ -44,6 +44,7 @@ defaultConfig.twMergeConfig = {
         ],
       },
     ],
+    focus: ['focus-indicator', 'focus-indicator--inner'],
   },
 }
 
@@ -386,6 +387,11 @@ export default {
           isolation: 'isolate',
           boxShadow: `0 0 0 2px ${theme('colors.white')}, 0 0 0 4px ${theme('colors.outline')}`,
         },
+        '.focus-indicator--inner': {
+          outline: 'none',
+          isolation: 'isolate',
+          boxShadow: `inset 0 0 0 2px ${theme('colors.outline')}, inset 0 0 0 4px ${theme('colors.white')}`,
+        },
         '.border-shorthand': {
           borderWidth: theme('borderWidth.DEFAULT'),
           borderStyle: 'solid',
