From 5786ed6304476d1a605616935cbbad19c11fc40d Mon Sep 17 00:00:00 2001
From: Qs-F <qsf@de-liker.com>
Date: Thu, 30 May 2024 11:55:08 +0900
Subject: [PATCH 1/3] =?UTF-8?q?fix(TabBar):=20TabItem=E3=81=AE=E9=AB=98?=
 =?UTF-8?q?=E3=81=95=E5=9B=BA=E5=AE=9A=E3=82=92padding=E3=81=AE=E7=A9=8D?=
 =?UTF-8?q?=E3=81=BF=E4=B8=8A=E3=81=92=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/TabBar/TabItem.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/smarthr-ui/src/components/TabBar/TabItem.tsx b/packages/smarthr-ui/src/components/TabBar/TabItem.tsx
index a899d6a685..bc87c94161 100644
--- a/packages/smarthr-ui/src/components/TabBar/TabItem.tsx
+++ b/packages/smarthr-ui/src/components/TabBar/TabItem.tsx
@@ -7,11 +7,10 @@ import { UnstyledButton } from '../Button'
 const tabItem = tv({
   base: [
     'smarthr-ui-TabItem',
-    'shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0 shr-font-bold hover:shr-bg-column hover:shr-text-black [&]:shr-box-border [&]:shr-text-grey',
-    'shr-h-[43px]', // TODO 高さを指定しないようにする
+    'shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-pt-[6.5px] shr-pb-[9.5px] shr-font-bold hover:shr-bg-column hover:shr-text-black [&]:shr-box-border [&]:shr-text-grey',
     'disabled:shr-cursor-not-allowed disabled:shr-bg-transparent disabled:shr-text-grey/50',
     'aria-selected:shr-border-b-shorthand aria-selected:shr-relative aria-selected:shr-border-b-[3px] aria-selected:shr-border-main aria-selected:shr-text-black',
-    'aria-selected:shr-h-[40px]', // TODO 高さを指定しないようにする
+    'aria-selected:shr-pb-[6.5px]',
   ],
   variants: {
     isTouchDevice: {

From dd583e992bfaf36d00772e37d929a25f61c23a59 Mon Sep 17 00:00:00 2001
From: Qs-F <qsf@de-liker.com>
Date: Thu, 30 May 2024 15:46:49 +0900
Subject: [PATCH 2/3] test(TabBar): Update snapshot

---
 .../components/TabBar/__snapshots__/TabBar.test.tsx.snap    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/smarthr-ui/src/components/TabBar/__snapshots__/TabBar.test.tsx.snap b/packages/smarthr-ui/src/components/TabBar/__snapshots__/TabBar.test.tsx.snap
index 4e9fbbf054..24042c7438 100644
--- a/packages/smarthr-ui/src/components/TabBar/__snapshots__/TabBar.test.tsx.snap
+++ b/packages/smarthr-ui/src/components/TabBar/__snapshots__/TabBar.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`TabBar should be match snapshot 1`] = `
   >
     <button
       aria-selected={false}
-      className="shr-box-content shr-inline shr-cursor-auto shr-select-auto shr-appearance-none shr-items-stretch shr-overflow-visible shr-border-none shr-border-current shr-bg-transparent shr-bg-none shr-bg-origin-padding shr-p-0 shr-text-left shr-font-inherit shr-text-inherit focus-visible:shr-focus-indicator smarthr-ui-TabItem shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0 shr-font-bold hover:shr-bg-column hover:shr-text-black [&]:shr-box-border [&]:shr-text-grey shr-h-[43px] disabled:shr-cursor-not-allowed disabled:shr-bg-transparent disabled:shr-text-grey/50 aria-selected:shr-border-b-shorthand aria-selected:shr-relative aria-selected:shr-border-b-[3px] aria-selected:shr-border-main aria-selected:shr-text-black aria-selected:shr-h-[40px] shr-transition-colors"
+      className="shr-box-content shr-inline shr-cursor-auto shr-select-auto shr-appearance-none shr-items-stretch shr-overflow-visible shr-border-none shr-border-current shr-bg-transparent shr-bg-none shr-bg-origin-padding shr-p-0 shr-text-left shr-font-inherit shr-text-inherit focus-visible:shr-focus-indicator smarthr-ui-TabItem shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-pt-[6.5px] shr-pb-[9.5px] shr-font-bold hover:shr-bg-column hover:shr-text-black [&]:shr-box-border [&]:shr-text-grey disabled:shr-cursor-not-allowed disabled:shr-bg-transparent disabled:shr-text-grey/50 aria-selected:shr-border-b-shorthand aria-selected:shr-relative aria-selected:shr-border-b-[3px] aria-selected:shr-border-main aria-selected:shr-text-black aria-selected:shr-pb-[6.5px] shr-transition-colors"
       disabled={false}
       id="1"
       onClick={[Function]}
@@ -21,7 +21,7 @@ exports[`TabBar should be match snapshot 1`] = `
     </button>
     <button
       aria-selected={true}
-      className="shr-box-content shr-inline shr-cursor-auto shr-select-auto shr-appearance-none shr-items-stretch shr-overflow-visible shr-border-none shr-border-current shr-bg-transparent shr-bg-none shr-bg-origin-padding shr-p-0 shr-text-left shr-font-inherit shr-text-inherit focus-visible:shr-focus-indicator smarthr-ui-TabItem shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0 shr-font-bold hover:shr-bg-column hover:shr-text-black [&]:shr-box-border [&]:shr-text-grey shr-h-[43px] disabled:shr-cursor-not-allowed disabled:shr-bg-transparent disabled:shr-text-grey/50 aria-selected:shr-border-b-shorthand aria-selected:shr-relative aria-selected:shr-border-b-[3px] aria-selected:shr-border-main aria-selected:shr-text-black aria-selected:shr-h-[40px] shr-transition-colors"
+      className="shr-box-content shr-inline shr-cursor-auto shr-select-auto shr-appearance-none shr-items-stretch shr-overflow-visible shr-border-none shr-border-current shr-bg-transparent shr-bg-none shr-bg-origin-padding shr-p-0 shr-text-left shr-font-inherit shr-text-inherit focus-visible:shr-focus-indicator smarthr-ui-TabItem shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-pt-[6.5px] shr-pb-[9.5px] shr-font-bold hover:shr-bg-column hover:shr-text-black [&]:shr-box-border [&]:shr-text-grey disabled:shr-cursor-not-allowed disabled:shr-bg-transparent disabled:shr-text-grey/50 aria-selected:shr-border-b-shorthand aria-selected:shr-relative aria-selected:shr-border-b-[3px] aria-selected:shr-border-main aria-selected:shr-text-black aria-selected:shr-pb-[6.5px] shr-transition-colors"
       disabled={false}
       id="2"
       onClick={[Function]}
@@ -32,7 +32,7 @@ exports[`TabBar should be match snapshot 1`] = `
     </button>
     <button
       aria-selected={false}
-      className="shr-box-content shr-inline shr-cursor-auto shr-select-auto shr-appearance-none shr-items-stretch shr-overflow-visible shr-border-none shr-border-current shr-bg-transparent shr-bg-none shr-bg-origin-padding shr-p-0 shr-text-left shr-font-inherit shr-text-inherit focus-visible:shr-focus-indicator smarthr-ui-TabItem shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0 shr-font-bold hover:shr-bg-column hover:shr-text-black [&]:shr-box-border [&]:shr-text-grey shr-h-[43px] disabled:shr-cursor-not-allowed disabled:shr-bg-transparent disabled:shr-text-grey/50 aria-selected:shr-border-b-shorthand aria-selected:shr-relative aria-selected:shr-border-b-[3px] aria-selected:shr-border-main aria-selected:shr-text-black aria-selected:shr-h-[40px] shr-transition-colors"
+      className="shr-box-content shr-inline shr-cursor-auto shr-select-auto shr-appearance-none shr-items-stretch shr-overflow-visible shr-border-none shr-border-current shr-bg-transparent shr-bg-none shr-bg-origin-padding shr-p-0 shr-text-left shr-font-inherit shr-text-inherit focus-visible:shr-focus-indicator smarthr-ui-TabItem shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-pt-[6.5px] shr-pb-[9.5px] shr-font-bold hover:shr-bg-column hover:shr-text-black [&]:shr-box-border [&]:shr-text-grey disabled:shr-cursor-not-allowed disabled:shr-bg-transparent disabled:shr-text-grey/50 aria-selected:shr-border-b-shorthand aria-selected:shr-relative aria-selected:shr-border-b-[3px] aria-selected:shr-border-main aria-selected:shr-text-black aria-selected:shr-pb-[6.5px] shr-transition-colors"
       disabled={true}
       id="3"
       onClick={[Function]}

From 10bd6817a41517386b761d3537ce508d1280f952 Mon Sep 17 00:00:00 2001
From: Qs-F <qsf@de-liker.com>
Date: Thu, 30 May 2024 15:47:24 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix(TabBar):=20=E9=9D=9E=E8=87=AA=E6=98=8E?=
 =?UTF-8?q?=E3=81=AAmargin=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6=E8=AA=AC?=
 =?UTF-8?q?=E6=98=8E=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/src/components/TabBar/TabBar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/smarthr-ui/src/components/TabBar/TabBar.tsx b/packages/smarthr-ui/src/components/TabBar/TabBar.tsx
index fc16d3b57c..bada052cc1 100644
--- a/packages/smarthr-ui/src/components/TabBar/TabBar.tsx
+++ b/packages/smarthr-ui/src/components/TabBar/TabBar.tsx
@@ -6,7 +6,11 @@ import { Reel } from '../Layout'
 const tabBar = tv({
   slots: {
     wrapper: ['smarthr-ui-TabBar'],
-    inner: ['shr-grow', 'shr-m-0.25'],
+    inner: [
+      'shr-grow',
+      // フォーカスリングの表示領域を確保するためのmargin
+      'shr-m-0.25',
+    ],
   },
   variants: {
     bordered: {