chore: classNameの生成を調整

kufu · Feb 13, 2025 · 0587711 · 0587711
1 parent 4d31192
commit 0587711
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 11 deletions.
diff --git a/packages/smarthr-ui/src/components/Table/BulkActionRow.tsx b/packages/smarthr-ui/src/components/Table/BulkActionRow.tsx
@@ -5,7 +5,7 @@ import { tv } from 'tailwind-variants'
 
 import { useTableHeadCellCount } from './useTableHeadCellCount'
 
-const bulkActionRow = tv({
+const classNameGenerator = tv({
   slots: {
     wrapper: 'smarthr-ui-BulkActionRow',
     cell: [
@@ -23,7 +23,7 @@ export const BulkActionRow: FC<PropsWithChildren<ComponentPropsWithRef<'tr'>>> =
   const { countHeadCellRef, count } = useTableHeadCellCount<HTMLTableRowElement>()
 
   const classNames = useMemo(() => {
-    const { wrapper, cell } = bulkActionRow()
+    const { wrapper, cell } = classNameGenerator()
 
     return {
       wrapper: wrapper({ className }),

diff --git a/packages/smarthr-ui/src/components/Table/EmptyTableBody.tsx b/packages/smarthr-ui/src/components/Table/EmptyTableBody.tsx
@@ -16,7 +16,7 @@ type Props = PropsWithChildren<{
 }>
 type ElementProps = Omit<ComponentPropsWithRef<'tbody'>, keyof Props>
 
-const emptyTableBodyCell = tv({
+const tdClassNameGenerator = tv({
   base: 'shr-text-center',
   variants: {
     vertical: {
@@ -81,7 +81,7 @@ export const EmptyTableBody: React.FC<Props & ElementProps> = ({ children, paddi
     const actualPadding =
       padding instanceof Object ? padding : { vertical: padding, horizontal: padding }
 
-    return emptyTableBodyCell(actualPadding)
+    return tdClassNameGenerator(actualPadding)
   }, [padding])
 
   return (

diff --git a/packages/smarthr-ui/src/components/Table/Table.tsx b/packages/smarthr-ui/src/components/Table/Table.tsx
@@ -4,7 +4,7 @@ import { VariantProps, tv } from 'tailwind-variants'
 type Props = PropsWithChildren<VariantProps<typeof table>>
 type ElementProps = Omit<ComponentProps<'table'>, keyof Props>
 
-const table = tv({
+const classNameGenerator = tv({
   base: [
     'smarthr-ui-Table',
     'shr-border-collapse shr-w-full',
@@ -41,7 +41,7 @@ export const Table: FC<Props & ElementProps> = ({
   ...props
 }) => {
   const actualClassName = useMemo(
-    () => table({ borderType, fixedHead, layout, className }),
+    () => classNameGenerator({ borderType, fixedHead, layout, className }),
     [borderType, className, fixedHead, layout],
   )
 

diff --git a/packages/smarthr-ui/src/components/Table/TableReel.tsx b/packages/smarthr-ui/src/components/Table/TableReel.tsx
@@ -8,7 +8,7 @@ import { reelShadowClassNameGenerator } from './useReelShadow'
 
 type ElementProps = Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren>
 
-const tableReel = tv({
+const classNameGenerator = tv({
   slots: {
     wrapper: ['smarthr-ui-TableReel', 'shr-relative'],
     inner: ['smarthr-ui-TableReel-inner', 'shr-relative shr-overflow-auto'],
@@ -19,7 +19,7 @@ export const TableReel: React.FC<PropsWithChildren & ElementProps> = ({ classNam
   const { showShadow, tableWrapperRef } = useReelCells()
 
   const classNames = useMemo(() => {
-    const { wrapper, inner } = tableReel()
+    const { wrapper, inner } = classNameGenerator()
 
     return {
       wrapper: reelShadowClassNameGenerator({ showShadow, className: wrapper({ className }) }),

diff --git a/packages/smarthr-ui/src/components/Table/Td.tsx b/packages/smarthr-ui/src/components/Table/Td.tsx
@@ -12,7 +12,7 @@ export type Props = PropsWithChildren<
       | { base?: CellContentWidth; min?: CellContentWidth; max?: CellContentWidth }
   }
 >
-type ElementProps = Omit<ComponentPropsWithoutRef<'classNameGenerator'>, keyof Props>
+type ElementProps = Omit<ComponentPropsWithoutRef<'td'>, keyof Props>
 
 export const Td = memo<Props & ElementProps>(
   ({ align, vAlign, nullable, fixed = false, contentWidth, className, style, ...props }) => {

diff --git a/packages/smarthr-ui/src/components/Table/Th.tsx b/packages/smarthr-ui/src/components/Table/Th.tsx
@@ -129,7 +129,7 @@ export const Th = memo<Props & ElementProps>(
       [decorators, sort],
     )
     const ariaSort = useMemo<AriaAttributes['aria-sort'] | undefined>(
-      () => (sort && sort === 'none' ? 'none' : `${sort}ending`),
+      () => (sort ? (sort === 'none' ? 'none' : `${sort}ending`) : undefined),
       [sort],
     )
 

diff --git a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
@@ -8,6 +8,7 @@ import { CheckBox, Props as CheckBoxProps } from '../CheckBox'
 import { Th } from './Th'
 
 type Props = {
+  // HINT: checkColumnName は aria-label属性に設定されるため、型をstringのみに絞ります
   decorators?: DecoratorsType<'checkAllInvisibleLabel'> & {
     checkColumnName?: (text: string) => string
   }
@@ -54,7 +55,11 @@ export const ThCheckbox = forwardRef<HTMLInputElement, CheckBoxProps & Props>(
 
     return (
       // Th に必要な属性やイベントは不要
-      <Th vAlign={vAlign} className={classNames.wrapper} aria-label={decorated.checkColumnName}>
+      <Th
+        vAlign={vAlign}
+        className={classNames.wrapper}
+        aria-label={decorated.checkColumnName as string}
+      >
         {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
         <label className={classNames.inner}>
           <Balloon as="span" horizontal="left" vertical="middle" className={classNames.balloon}>