fix: 個別対応が必要なコンポーネントのみ上書き

Author: schktjm

packages/smarthr-ui/src/components/Calendar/Calendar.tsx

@@ -40,13 +40,13 @@ type DayJsType = ReturnType<typeof dayjs>
 const classNameGenerator = tv({
   slots: {
     container:
-      'smarthr-ui-Calendar shr-inline-block shr-overflow-hidden shr-rounded-m shr-bg-white shr-text-black shr-shadow-layer-3 forced-colors:shr-border-shorthand forced-colors:shr-shadow-none',
+      'smarthr-ui-Calendar shr-overflow-hidden shr-inline-block shr-rounded-m shr-bg-white shr-text-black shr-shadow-layer-3 forced-colors:shr-border-shorthand forced-colors:shr-shadow-none',
     header: 'smarthr-ui-Calendar-header shr-border-b-shorthand shr-flex shr-items-center shr-p-1',
     yearMonth: 'smarthr-ui-Calendar-yearMonth shr-me-0.5 shr-text-base shr-font-bold',
     monthButtons: 'smarthr-ui-Calendar-monthButtons shr-ms-auto shr-flex',
     tableLayout: 'shr-relative',
     yearSelectButton:
-      'smarthr-ui-Calendar-selectingYear [&[aria-expanded="true"]_.smarthr-ui-Icon]:shr-rotate-180',
+      'smarthr-ui-Calendar-selectingYear focus-visible:shr-focus-indicator--outer [&[aria-expanded="true"]_.smarthr-ui-Icon]:shr-rotate-180',
   },
 })
 
@@ -261,15 +261,15 @@ const MonthDirectionCluster = memo<{
         disabled={isSelectingYear || prev.isBefore(from, 'month')}
         onClick={onClickMonthPrev}
         size="s"
-        className="smarthr-ui-Calendar-monthButtonPrev"
+        className="smarthr-ui-Calendar-monthButtonPrev focus-visible:shr-focus-indicator--outer"
       >
         <FaChevronLeftIcon alt={previousMonthAltText} />
       </Button>
       <Button
         disabled={isSelectingYear || next.isAfter(to, 'month')}
         onClick={onClickMonthNext}
         size="s"
-        className="smarthr-ui-Calendar-monthButtonNext"
+        className="smarthr-ui-Calendar-monthButtonNext focus-visible:shr-focus-indicator--outer"
       >
         <FaChevronRightIcon alt={nextMonthAltText} />
       </Button>

packages/smarthr-ui/src/components/Calendar/YearPicker.tsx

@@ -35,11 +35,11 @@ const classNameGenerator = tv({
   slots: {
     overlay: 'smarthr-ui-YearPicker shr-absolute shr-inset-0 shr-bg-white',
     container:
-      'shr-box-border shr-flex shr-h-full shr-w-full shr-flex-wrap shr-items-start shr-overflow-y-auto shr-px-0.25 shr-py-0.5',
+      'shr-overflow-y-auto shr-box-border shr-flex shr-h-full shr-w-full shr-flex-wrap shr-items-start shr-px-0.25 shr-py-0.5',
     yearButton:
-      'smarthr-ui-YearPicker-selectYear shr-group shr-flex shr-w-1/4 shr-items-center shr-justify-center shr-px-0 shr-py-0.5 shr-leading-none',
+      'smarthr-ui-YearPicker-selectYear shr-group shr-flex shr-w-1/4 shr-items-center shr-justify-center shr-px-0 shr-py-0.5 shr-leading-none focus-visible:shr-outline-none',
     yearWrapper: [
-      'shr-box-border shr-inline-block shr-rounded-full shr-px-0.75 shr-py-0.5 shr-text-base shr-leading-none group-hover:shr-bg-base-grey group-hover:shr-text-black',
+      'shr-box-border shr-inline-block shr-rounded-full shr-px-0.75 shr-py-0.5 shr-text-base shr-leading-none group-focus-visible:shr-focus-indicator group-hover:shr-bg-base-grey group-hover:shr-text-black',
       '[[data-this-year="true"]>&]:shr-border-shorthand',
       '[[aria-pressed="true"]>&]:shr-bg-main [[aria-pressed="true"]>&]:shr-text-white',
     ],

packages/smarthr-ui/src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx

@@ -42,10 +42,9 @@ const classNameGenerator = tv({
       'smarthr-ui-MultiCombobox-deleteButton',
       'shr-group/deleteButton',
       'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',
-      'focus-visible:shr-shadow-[unset]',
     ],
     deleteButtonIcon:
-      'group-focus-visible/deleteButton:shr-focus-indicator group-focus-visible/deleteButton:shr-rounded-full',
+      'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',
   },
   variants: {
     enableEllipsis: {