From 5b24fdadb280c3e5419e28c0aaf7a28821e23101 Mon Sep 17 00:00:00 2001
From: KANAMORI Yu <y.kinmori@gmail.com>
Date: Mon, 25 Nov 2024 11:47:18 +0900
Subject: [PATCH] =?UTF-8?q?fix(Button):=20disabled=20=E3=81=AE=E8=AA=AC?=
 =?UTF-8?q?=E6=98=8E=E3=81=8C=E4=B8=8D=E7=94=A8=E6=84=8F=E3=81=AB=E6=8A=98?=
 =?UTF-8?q?=E3=82=8A=E8=BF=94=E3=81=95=E3=82=8C=E3=81=AA=E3=81=84=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E8=A6=8B=E7=9B=B4=E3=81=97=20(#5132)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Button/Button.tsx          | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Button/Button.tsx b/packages/smarthr-ui/src/components/Button/Button.tsx
index e722d46a5e..1383e71b8d 100644
--- a/packages/smarthr-ui/src/components/Button/Button.tsx
+++ b/packages/smarthr-ui/src/components/Button/Button.tsx
@@ -3,8 +3,7 @@ import { tv } from 'tailwind-variants'
 
 import { usePortal } from '../../hooks/usePortal'
 import { DecoratorsType } from '../../types'
-import { FaInfoCircleIcon } from '../Icon'
-import { Cluster } from '../Layout'
+import { FaCircleInfoIcon } from '../Icon'
 import { Loader } from '../Loader'
 import { Tooltip } from '../Tooltip'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
@@ -18,11 +17,16 @@ type ElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProp
 const buttonStyle = tv({
   slots: {
     wrapper: 'smarthr-ui-Button',
-    loader:
-      'shr-align-bottom [&&&_.smarthr-ui-Loader-spinner]:shr-h-em [&&&_.smarthr-ui-Loader-spinner]:shr-w-em',
-    disabledWrapper: 'smarthr-ui-Button-disabledWrapper',
+    loader: [
+      'shr-align-bottom',
+      '[&_.smarthr-ui-Loader-spinner]:shr-h-em [&_.smarthr-ui-Loader-spinner]:shr-w-em',
+    ],
+    disabledWrapper: [
+      'smarthr-ui-Button-disabledWrapper',
+      'shr-inline-flex shr-items-center shr-gap-0.25',
+    ],
     disabledTooltip: [
-      '[&&&]:shr-overflow-y-visible',
+      'shr-overflow-y-visible',
       /* Tooltip との距離を変えずに反応範囲を広げるために negative space を使う */
       '[&_.smarthr-ui-Icon]:-shr-m-0.25',
       /* global styleなどでborder-boxが適用されている場合表示崩れを起こす為、content-boxを指定する */
@@ -34,12 +38,12 @@ const buttonStyle = tv({
   variants: {
     isSecondary: {
       true: {
-        loader: '[&&&_.smarthr-ui-Loader-line]:shr-border-disabled',
+        loader: '[&_.smarthr-ui-Loader-line]:shr-border-disabled',
       },
       false: {
         loader: [
-          '[&&&_.smarthr-ui-Loader-line]:shr-border-white/50',
-          '[&&&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',
+          '[&_.smarthr-ui-Loader-line]:shr-border-white/50',
+          '[&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',
         ],
       },
     },
@@ -115,10 +119,10 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
     )
 
     if (disabled && disabledDetail) {
-      const DisabledDetailIcon = disabledDetail.icon || FaInfoCircleIcon
+      const DisabledDetailIcon = disabledDetail.icon || FaCircleInfoIcon
 
       return (
-        <Cluster inline align="center" gap={0.25} className={disabledWrapper()}>
+        <div className={disabledWrapper()}>
           {button}
           <Tooltip
             message={disabledDetail.message}
@@ -129,7 +133,7 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
           >
             <DisabledDetailIcon />
           </Tooltip>
-        </Cluster>
+        </div>
       )
     }