Feat(web-react): Add Label component to form components

- Checkbox, FileUploader, Modal, Radio, Select, TextFieldBase, Slider, Toggle components are updated to use Label component
lmc-eu · Feb 4, 2025 · dc6c75b · dc6c75b
1 parent a0e36bd
commit dc6c75b
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 35 deletions.
diff --git a/packages/web-react/src/components/Checkbox/Checkbox.tsx b/packages/web-react/src/components/Checkbox/Checkbox.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritCheckboxProps } from '../../types';
-import { HelperText, ValidationText, useAriaIds } from '../Field';
+import { HelperText, Label, ValidationText, useAriaIds } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { useCheckboxStyleProps } from './useCheckboxStyleProps';
 
@@ -33,7 +33,11 @@ const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElemen
   });
 
   return (
-    <label {...styleProps} htmlFor={id} className={classNames(classProps.root, styleProps.className)}>
+    <Label
+      htmlFor={id}
+      UNSAFE_style={styleProps.style}
+      UNSAFE_className={classNames(classProps.root, styleProps.className)}
+    >
       <input
         {...otherProps}
         aria-describedby={ids.join(' ')}
@@ -47,7 +51,9 @@ const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElemen
         ref={ref}
       />
       <span className={classProps.text}>
-        <span className={classProps.label}>{label}</span>
+        <Label elementType="span" UNSAFE_className={classProps.label}>
+          {label}
+        </Label>
         <HelperText
           className={classProps.helperText}
           elementType="span"
@@ -66,7 +72,7 @@ const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElemen
           />
         )}
       </span>
-    </label>
+    </Label>
   );
 };
 

diff --git a/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx b/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritFileUploaderInputProps } from '../../types';
-import { HelperText, ValidationText, useAriaIds } from '../Field';
+import { HelperText, Label, ValidationText, useAriaIds } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { Icon } from '../Icon';
 import { DEFAULT_FILE_QUEUE_LIMIT, DEFAULT_FILE_SIZE_LIMIT } from './constants';
@@ -85,9 +85,9 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
       onDrop={!isDisabled && isDragAndDropSupported ? onDrop : undefined}
       className={classNames(classProps.input.root, styleProps.className)}
     >
-      <label htmlFor={id} className={classProps.input.label}>
+      <Label htmlFor={id} UNSAFE_className={classProps.input.label}>
         {label}
-      </label>
+      </Label>
       <input
         aria-describedby={ids.join(' ')}
         type="file"
@@ -102,11 +102,11 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
       />
       <div ref={dropZoneRef} className={classProps.input.dropZone.root}>
         <Icon name={iconName} aria-hidden="true" />
-        <label htmlFor={id} className={classProps.input.dropZone.label}>
+        <Label htmlFor={id} UNSAFE_className={classProps.input.dropZone.label}>
           <span className={classProps.input.link}>{linkText}</span>
           &nbsp;
           <span className={classProps.input.dropLabel}>{labelText}</span>
-        </label>
+        </Label>
         <HelperText
           className={classProps.input.helper}
           id={`${id}__helperText`}

diff --git a/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx b/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx
@@ -4,6 +4,7 @@ import {
   Checkbox,
   Grid,
   GridItem,
+  Label,
   Modal,
   ModalBody,
   ModalDialog,
@@ -237,17 +238,17 @@ const ModalScrollingLongContent = () => {
                     }
                   />
                   <Grid UNSAFE_style={{ columnGap: 'var(--spirit-space-600)' }}>
-                    <label
-                      className="GridItem"
+                    <Label
+                      UNSAFE_className="GridItem"
                       htmlFor={`custom-height-${breakpoint}`}
-                      style={{
+                      UNSAFE_style={{
                         ['--grid-item-column-start' as string]: 1,
                         ['--grid-item-column-end' as string]: 6,
                         ['--grid-item-column-end-tablet' as string]: 4,
                       }}
                     >
                       Height
-                    </label>
+                    </Label>
                     <GridItem
                       columnStart={{ mobile: 6, tablet: 4 }}
                       columnEnd={{ mobile: 13, tablet: 7 }}
@@ -274,17 +275,17 @@ const ModalScrollingLongContent = () => {
                     />
                   </Grid>
                   <Grid UNSAFE_style={{ columnGap: 'var(--spirit-space-600)' }}>
-                    <label
-                      className="GridItem"
+                    <Label
+                      UNSAFE_className="GridItem"
                       htmlFor={`custom-max-height-${breakpoint}`}
-                      style={{
+                      UNSAFE_style={{
                         ['--grid-item-column-start' as string]: 1,
                         ['--grid-item-column-end' as string]: 6,
                         ['--grid-item-column-end-tablet' as string]: 4,
                       }}
                     >
                       Max height
-                    </label>
+                    </Label>
                     <GridItem
                       columnStart={{ mobile: 6, tablet: 4 }}
                       columnEnd={{ mobile: 13, tablet: 7 }}

diff --git a/packages/web-react/src/components/Radio/Radio.tsx b/packages/web-react/src/components/Radio/Radio.tsx
@@ -1,10 +1,10 @@
 'use client';
 
 import classNames from 'classnames';
-import React, { forwardRef, ForwardedRef } from 'react';
+import React, { ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritRadioProps } from '../../types';
-import { HelperText, useAriaIds } from '../Field';
+import { HelperText, Label, useAriaIds } from '../Field';
 import { useRadioStyleProps } from './useRadioStyleProps';
 
 /* We need an exception for components exported with forwardRef */
@@ -27,7 +27,11 @@ const _Radio = (props: SpiritRadioProps, ref: ForwardedRef<HTMLInputElement>): J
   const [ids, register] = useAriaIds(ariaDescribedBy);
 
   return (
-    <label htmlFor={id} {...styleProps} className={classNames(classProps.root, styleProps.className)}>
+    <Label
+      htmlFor={id}
+      UNSAFE_style={styleProps.style}
+      UNSAFE_className={classNames(classProps.root, styleProps.className)}
+    >
       <input
         {...otherProps}
         aria-describedby={ids.join(' ')}
@@ -41,7 +45,9 @@ const _Radio = (props: SpiritRadioProps, ref: ForwardedRef<HTMLInputElement>): J
         ref={ref}
       />
       <span className={classProps.text}>
-        <span className={classProps.label}>{label}</span>
+        <Label elementType="span" UNSAFE_className={classProps.label}>
+          {label}
+        </Label>
         <HelperText
           className={classProps.helperText}
           elementType="span"
@@ -50,7 +56,7 @@ const _Radio = (props: SpiritRadioProps, ref: ForwardedRef<HTMLInputElement>): J
           helperText={helperText}
         />
       </span>
-    </label>
+    </Label>
   );
 };
 

diff --git a/packages/web-react/src/components/Select/Select.tsx b/packages/web-react/src/components/Select/Select.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritSelectProps } from '../../types';
-import { HelperText, ValidationText, useAriaIds } from '../Field';
+import { HelperText, Label, ValidationText, useAriaIds } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { Icon } from '../Icon';
 import { useSelectStyleProps } from './useSelectStyleProps';
@@ -37,9 +37,9 @@ const _Select = (props: SpiritSelectProps, ref: ForwardedRef<HTMLSelectElement>)
 
   return (
     <div {...styleProps} className={classNames(classProps.root, styleProps.className)}>
-      <label htmlFor={id} className={classProps.label}>
+      <Label htmlFor={id} UNSAFE_className={classProps.label}>
         {label}
-      </label>
+      </Label>
       <div className={classProps.container}>
         <select
           {...transferProps}

diff --git a/packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx b/packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritTextFieldBaseProps, TextFieldBasePasswordToggleProps } from '../../types';
-import { HelperText, ValidationText, useAriaIds } from '../Field';
+import { HelperText, Label, ValidationText, useAriaIds } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import TextFieldBaseInput from './TextFieldBaseInput';
 import { useTextFieldBaseStyleProps } from './useTextFieldBaseStyleProps';
@@ -36,9 +36,9 @@ const _TextFieldBase = (props: SpiritTextFieldBaseProps, ref: ForwardedRef<HTMLI
 
   return (
     <div {...styleProps} className={classNames(classProps.root, styleProps.className)}>
-      <label htmlFor={id} className={classProps.label}>
+      <Label htmlFor={id} UNSAFE_className={classProps.label}>
         {label}
-      </label>
+      </Label>
       <TextFieldBaseInputWithPasswordToggle id={id} ref={ref} aria-describedby={ids.join(' ')} {...otherProps} />
       <HelperText
         className={classProps.helperText}

diff --git a/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx b/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { CSSProperties, ChangeEvent, FormEvent, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritSliderProps } from '../../types';
-import { HelperText, ValidationText, useAriaIds } from '../Field';
+import { HelperText, Label, ValidationText, useAriaIds } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { SLIDER_DEFAULT_PROPS } from './constants';
 import { useSliderStyleProps } from './useSliderStyleProps';
@@ -53,9 +53,9 @@ const _UnstableSlider = (props: SpiritSliderProps, ref: ForwardedRef<HTMLInputEl
 
   return (
     <div {...styleProps} {...otherProps} className={classNames(classProps.root, styleProps.className)}>
-      <label htmlFor={id} className={classProps.label}>
+      <Label htmlFor={id} UNSAFE_className={classProps.label}>
         {label}
-      </label>
+      </Label>
       <input
         aria-describedby={ids.join(' ')}
         className={classProps.input}

diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { ForwardedRef, forwardRef, useState } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritToggleProps } from '../../types';
-import { HelperText, useAriaIds, ValidationText } from '../Field';
+import { HelperText, Label, useAriaIds, ValidationText } from '../Field';
 import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { useToggleStyleProps } from './useToggleStyleProps';
 
@@ -40,9 +40,15 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE
   };
 
   return (
-    <label {...styleProps} htmlFor={id} className={classNames(classProps.root, styleProps.className)}>
+    <Label
+      htmlFor={id}
+      UNSAFE_style={styleProps.style}
+      UNSAFE_className={classNames(classProps.root, styleProps.className)}
+    >
       <span className={classProps.text}>
-        <span className={classProps.label}>{label}</span>
+        <Label elementType="span" UNSAFE_className={classProps.label}>
+          {label}
+        </Label>
         <HelperText
           className={classProps.helperText}
           elementType="span"
@@ -72,7 +78,7 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE
         onChange={handleOnChange}
         ref={ref}
       />
-    </label>
+    </Label>
   );
 };