refactor(web-react): introduce standalone ValidationText and update all components #DS-2398

Drop Field components as they are all already split into standalone components.

Author: crishpeen

packages/web-react/package.json

@@ -318,14 +318,6 @@
       "require": "./dist/components/EmptyState/index.cjs",
       "default": "./dist/components/EmptyState/index.js"
     },
-    "./components/Field": {
-      "types": "./dist/components/Field/index.d.ts",
-      "development": "./src/components/Field/index.ts",
-      "production": "./dist/components/Field/index.js",
-      "import": "./dist/components/Field/index.js",
-      "require": "./dist/components/Field/index.cjs",
-      "default": "./dist/components/Field/index.js"
-    },
     "./components/FieldGroup": {
       "types": "./dist/components/FieldGroup/index.d.ts",
       "development": "./src/components/FieldGroup/index.ts",

packages/web-react/src/components/Checkbox/Checkbox.tsx

@@ -5,10 +5,9 @@ import React, { type ForwardedRef, forwardRef } from 'react';
 import { PropsProvider } from '../../context';
 import { useAriaDescribedBy, useAriaIds, useStyleProps } from '../../hooks';
 import { FormFieldVariants, type ForwardRefComponent, type SpiritCheckboxProps } from '../../types';
-import { ValidationText } from '../Field';
-import { useValidationTextRole } from '../Field/useValidationTextRole';
 import { HelperText } from '../HelperText';
 import { Label } from '../Label';
+import { ValidationText, useValidationTextRole } from '../ValidationText';
 import { useCheckboxStyleProps } from './useCheckboxStyleProps';
 
 const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElement>): JSX.Element => {
@@ -40,11 +39,11 @@ const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElemen
   return (
     <PropsProvider
       value={{
-        formFieldVariant: FormFieldVariants.INLINE,
+        formFieldVariant: isItem ? FormFieldVariants.ITEM : FormFieldVariants.INLINE,
         isDisabled,
-        isItem,
         isLabelHidden,
         isRequired,
+        validationState,
       }}
     >
       <div style={styleProps.style} className={classNames(classProps.root, styleProps.className)}>
@@ -65,7 +64,6 @@ const _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElemen
           <HelperText id={`${id}__helperText`} registerAria={register} helperText={helperText} />
           {validationState && (
             <ValidationText
-              UNSAFE_className={classProps.validationText}
               id={`${id}__validationText`}
               {...(hasValidationIcon && { hasValidationStateIcon: validationState })}
               validationText={validationText}

packages/web-react/src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -10,7 +10,6 @@ import {
   stylePropsTest,
   validHtmlAttributesTest,
   validationStatePropsTest,
-  validationTextPropsTest,
 } from '@local/tests';
 import Checkbox from '../Checkbox';
 
@@ -27,8 +26,6 @@ describe('Checkbox', () => {
 
   validationStatePropsTest(Checkbox, 'Checkbox--');
 
-  validationTextPropsTest(Checkbox, '.Checkbox__validationText');
-
   requiredPropsTest(Checkbox, 'checkbox', 'id', 'test-checkbox');
 
   validHtmlAttributesTest(Checkbox);

packages/web-react/src/components/Checkbox/__tests__/useCheckboxStyleProps.test.ts

@@ -12,7 +12,6 @@ describe('useCheckboxStyleProps', () => {
       root: 'Checkbox Checkbox--inputPositionStart',
       text: 'Checkbox__text',
       input: 'Checkbox__input',
-      validationText: 'Checkbox__validationText',
     });
   });
 

packages/web-react/src/components/Checkbox/useCheckboxStyleProps.ts

@@ -9,23 +9,21 @@ export interface CheckboxStyles {
     root: string;
     text: string;
     input: string;
-    validationText: string;
   };
   /** props to be passed to the input element */
   props: CheckboxProps;
 }
 
 export function useCheckboxStyleProps(props: SpiritCheckboxProps): CheckboxStyles {
-  const { inputPosition = InputPositions.START, isItem, validationState, ...restProps } = props;
-  const { isDisabled } = restProps;
+  const { inputPosition = InputPositions.START, validationState, ...restProps } = props;
+  const { isDisabled, isItem } = restProps;
 
   const checkboxClass = useClassNamePrefix('Checkbox');
   const checkboxDisabledClass = `${checkboxClass}--disabled`;
   const checkboxItemClass = `${checkboxClass}--item`;
   const checkboxInputClass = `${checkboxClass}__input`;
   const checkboxInputPositionClass = useInputPositionClass(checkboxClass, inputPosition);
   const checkboxTextClass = `${checkboxClass}__text`;
-  const checkboxValidationTextClass = `${checkboxClass}__validationText`;
   const checkboxValidationClass = `${checkboxClass}--${validationState}`;
 
   const rootStyles = classNames(checkboxClass, {
@@ -40,7 +38,6 @@ export function useCheckboxStyleProps(props: SpiritCheckboxProps): CheckboxStyle
       root: rootStyles,
       text: checkboxTextClass,
       input: checkboxInputClass,
-      validationText: checkboxValidationTextClass,
     },
     props: {
       ...restProps,

packages/web-react/src/components/Field/README.md

@@ -4,10 +4,10 @@ import classNames from 'classnames';
 import React from 'react';
 import { PropsProvider } from '../../context';
 import { useAriaDescribedBy, useAriaIds, useStyleProps } from '../../hooks';
-import { FormFieldVariants, type SpiritFieldGroupProps } from '../../types';
-import { ValidationText } from '../Field';
-import { useValidationTextRole } from '../Field/useValidationTextRole';
+import { type SpiritFieldGroupProps } from '../../types';
 import { HelperText } from '../HelperText';
+import { Label } from '../Label';
+import { ValidationText, useValidationTextRole } from '../ValidationText';
 import { VisuallyHidden } from '../VisuallyHidden';
 import { useFieldGroupStyleProps } from './useFieldGroupStyleProps';
 
@@ -38,7 +38,13 @@ const FieldGroup = (props: SpiritFieldGroupProps) => {
   });
 
   return (
-    <PropsProvider value={{ isDisabled, formFieldVariant: FormFieldVariants.BOX }}>
+    <PropsProvider
+      value={{
+        isDisabled,
+        isRequired,
+        validationState,
+      }}
+    >
       <fieldset
         {...transferProps}
         {...styleProps}
@@ -48,17 +54,16 @@ const FieldGroup = (props: SpiritFieldGroupProps) => {
       >
         <VisuallyHidden elementType="legend">{label}</VisuallyHidden>
         {!isLabelHidden && (
-          <div className={classProps.label} aria-hidden="true">
+          <Label elementType="div" aria-hidden="true">
             {label}
-          </div>
+          </Label>
         )}
         <div className={classProps.fields}>{children}</div>
         <HelperText id={`${id}__helperText`} registerAria={register} helperText={helperText} />
         {validationState && (
           <ValidationText
-            UNSAFE_className={classProps.validationText}
+            id={`${id}__validationText`}
             {...(hasValidationIcon && { hasValidationStateIcon: validationState })}
-            id={`${id}__helperText`}
             validationText={validationText}
             registerAria={register}
             role={validationTextRole}

packages/web-react/src/components/Field/index.ts

@@ -8,7 +8,6 @@ import {
   stylePropsTest,
   validHtmlAttributesTest,
   validationStatePropsTest,
-  validationTextPropsTest,
 } from '@local/tests';
 import FieldGroup from '../FieldGroup';
 
@@ -27,8 +26,6 @@ describe('FieldGroup', () => {
 
   validationStatePropsTest(FieldGroup, 'FieldGroup--');
 
-  validationTextPropsTest(FieldGroup, '.FieldGroup__validationText');
-
   stylePropsTest(
     (props) => <FieldGroup {...props} label="Label" id="field-group-example" data-testid="test-field-group" />,
     'test-field-group',
@@ -55,27 +52,13 @@ describe('FieldGroup', () => {
 
     expect(label).toHaveTextContent('Label');
 
-    const labelDiv = fieldGroup.querySelector('.FieldGroup__label') as HTMLElement;
-
-    expect(labelDiv).toHaveTextContent('Label');
-
     const list = fieldGroup.querySelector('.FieldGroup__fields') as HTMLElement;
     const items = list.querySelectorAll('div');
 
     expect(items).toHaveLength(3);
     expect(items[0]).toHaveTextContent('Item');
   });
 
-  it('should have className isRequired', () => {
-    render(
-      <FieldGroup id="example-field-group" label="Label" isRequired>
-        {itemList}
-      </FieldGroup>,
-    );
-
-    expect(screen.getAllByText('Label')[1]).toHaveClass('FieldGroup__label--required');
-  });
-
   it('should have className isDisabled', () => {
     render(
       <FieldGroup id="example-field-group" label="Label" isDisabled>