chore: Swithの型を調整

kufu · Sep 5, 2024 · b87f4c6 · b87f4c6
1 parent 355363a
commit b87f4c6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/packages/smarthr-ui/src/components/Switch/Switch.tsx b/packages/smarthr-ui/src/components/Switch/Switch.tsx
@@ -55,19 +55,14 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
 export const Switch = forwardRef<HTMLInputElement, Props>(
   ({ children, dangerouslyLabelHidden, className, id, ...props }, ref) => {
     const { wrapper, input, icon, iconWrapper } = useMemo(() => switchStyle(), [])
+    const ActualLabelComponent = dangerouslyLabelHidden ? VisuallyHiddenText : Text
     const inputId = useId(id)
 
     return (
       <Cluster align="center">
-        {dangerouslyLabelHidden ? (
-          <VisuallyHiddenText as="label" htmlFor={inputId}>
-            {children}
-          </VisuallyHiddenText>
-        ) : (
-          <label htmlFor={inputId}>
-            <Text>{children}</Text>
-          </label>
-        )}
+        <ActualLabelComponent as="label" htmlFor={inputId}>
+          {children}
+        </ActualLabelComponent>
         <span className={wrapper({ className })}>
           {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
           <input

diff --git a/packages/smarthr-ui/src/components/Text/Text.tsx b/packages/smarthr-ui/src/components/Text/Text.tsx
@@ -81,24 +81,24 @@ const text = tv({
 })
 
 // VariantProps を使うとコメントが書けない〜🥹
-export type TextProps = VariantProps<typeof text> & {
+export type TextProps<T extends React.ElementType = 'span'> = VariantProps<typeof text> & {
   /** テキストコンポーネントの HTML タグ名。初期値は span */
-  as?: string | React.ComponentType<any> | undefined
+  as?: T
   /** 強調するかどうかの真偽値。指定すると em 要素になる */
   emphasis?: boolean
   /** 見た目の種類 */
   styleType?: StyleType
 }
 
-export const Text: React.FC<PropsWithChildren<TextProps & ComponentProps<'span'>>> = ({
+export const Text = <T extends React.ElementType = 'span'>({
   emphasis,
   styleType,
   weight = emphasis ? 'bold' : undefined,
   as: Component = emphasis ? 'em' : 'span',
   ...props
-}) => {
+}: PropsWithChildren<TextProps<T> & ComponentProps<T>>) => {
   const { size, italic, color, leading, whiteSpace, className, ...others } = props
-  const styleTypeValues = styleType ? STYLE_TYPE_MAP[styleType] : null
+  const styleTypeValues = styleType ? STYLE_TYPE_MAP[styleType as StyleType] : null
 
   const styles = useMemo(
     () =>