FormField feedback

mongodb · Apr 23, 2024 · 3b444b2 · 3b444b2
1 parent f45f938
commit 3b444b2
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 26 deletions.
diff --git a/packages/form-field/src/FormField.spec.tsx b/packages/form-field/src/FormField.spec.tsx
@@ -350,7 +350,11 @@ describe('packages/form-field', () => {
       const feedback = getByTestId(LGIDS_FORM_FIELD.feedback);
       expect(input).toHaveAttribute(
         'aria-describedby',
-        description?.id + ' ' + feedback?.id,
+        expect.stringContaining(description?.id!),
+      );
+      expect(input).toHaveAttribute(
+        'aria-describedby',
+        expect.stringContaining(feedback?.id),
       );
     });
   });

diff --git a/packages/form-field/src/FormField/FormField.styles.ts b/packages/form-field/src/FormField/FormField.styles.ts
@@ -1,7 +1,15 @@
 import { css } from '@leafygreen-ui/emotion';
-import { BaseFontSize, Size, spacing, typeScales } from '@leafygreen-ui/tokens';
+import {
+  BaseFontSize,
+  Size,
+  spacing,
+  typeScales,
+  Variant,
+} from '@leafygreen-ui/tokens';
 
-export const getFontSize = ({
+import { FormFieldState } from './FormField.types';
+
+export const getFontSizeStyles = ({
   baseFontSize,
   size,
 }: {
@@ -24,12 +32,24 @@ export const getFontSize = ({
 
   if (size === Size.Large) {
     return css`
-      font-size: 18px;
-      line-height: 24px;
+      font-size: ${typeScales.large.fontSize}px;
+      line-height: ${typeScales.large.lineHeight}px;
     `;
   }
 };
 
+export const convertFormFieldStateToIconVariant = (state: FormFieldState) => {
+  if (state === FormFieldState.Error) {
+    return Variant.Error;
+  }
+
+  if (state === FormFieldState.Valid) {
+    return Variant.Success;
+  }
+
+  return Variant.Primary;
+};
+
 export const textContainerStyle = css`
   display: flex;
   flex-direction: column;

diff --git a/packages/form-field/src/FormField/FormField.tsx b/packages/form-field/src/FormField/FormField.tsx
@@ -9,12 +9,12 @@ import {
   useUpdatedBaseFontSize,
 } from '@leafygreen-ui/typography';
 
-import { DEFAULT_MESSAGES } from '../constants';
+import { DEFAULT_MESSAGES, LGIDS_FORM_FIELD } from '../constants';
 import { FormFieldProvider } from '../FormFieldContext';
 import { FormFieldFeedback } from '../FormFieldFeedback';
 
 import {
-  getFontSize,
+  getFontSizeStyles,
   marginBottom,
   textContainerStyle,
 } from './FormField.styles';
@@ -50,7 +50,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
     fwdRef,
   ) => {
     const baseFontSize = useUpdatedBaseFontSize(baseFontSizeProp);
-    const fontStyles = getFontSize({ baseFontSize, size });
+    const fontStyles = getFontSizeStyles({ baseFontSize, size });
 
     const { labelId, descriptionId, feedbackId, inputId, inputProps } =
       useFormFieldProps({ label, description, state, id, disabled, ...rest });
@@ -77,7 +77,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
             >
               {label && (
                 <Label
-                  data-testid="lg-form_field-label"
+                  data-testid={LGIDS_FORM_FIELD.label}
                   className={fontStyles}
                   htmlFor={inputId}
                   id={labelId}
@@ -88,7 +88,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
               )}
               {description && (
                 <Description
-                  data-testid="lg-form_field-description"
+                  data-testid={LGIDS_FORM_FIELD.description}
                   className={fontStyles}
                   id={descriptionId}
                   disabled={disabled}

diff --git a/packages/form-field/src/FormField/useFormFieldProps.ts b/packages/form-field/src/FormField/useFormFieldProps.ts
@@ -1,5 +1,7 @@
 import { useIdAllocator } from '@leafygreen-ui/hooks';
 
+import { LGIDS_FORM_FIELD } from '../constants';
+
 import { FormFieldProps, FormFieldState } from './FormField.types';
 
 export interface FormFieldInputElementProps {
@@ -28,12 +30,12 @@ export const useFormFieldProps = ({
   disabled,
   ...rest
 }: Partial<FormFieldProps>): FormFieldElementProps => {
-  const labelId = useIdAllocator({ prefix: 'lg-form-field-label' });
+  const labelId = useIdAllocator({ prefix: LGIDS_FORM_FIELD.label });
   const descriptionId = useIdAllocator({
-    prefix: 'lg-form-field-description',
+    prefix: LGIDS_FORM_FIELD.description,
   });
-  const feedbackId = useIdAllocator({ prefix: 'lg-form-field-description' });
-  const generatedInputId = useIdAllocator({ prefix: 'lg-form-field-input' });
+  const feedbackId = useIdAllocator({ prefix: LGIDS_FORM_FIELD.feedback });
+  const generatedInputId = useIdAllocator({ prefix: LGIDS_FORM_FIELD.input });
   const inputId = id ?? generatedInputId;
 
   const hasError = state === FormFieldState.Error;

diff --git a/packages/form-field/src/FormFieldFeedback/FormFieldFeedback.styles.ts b/packages/form-field/src/FormFieldFeedback/FormFieldFeedback.styles.ts
@@ -22,6 +22,8 @@ export const iconWrapperStyles = css`
 
 export const getIconWrapperHeight = (size: Size) => {
   return css`
-    height: ${size === Size.Large ? 24 : typeScales.body1.lineHeight}px;
+    height: ${size === Size.Large
+      ? typeScales.large.lineHeight
+      : typeScales.body1.lineHeight}px;
   `;
 };
diff --git a/packages/form-field/src/FormFieldFeedback/FormFieldFeedback.tsx b/packages/form-field/src/FormFieldFeedback/FormFieldFeedback.tsx
@@ -7,7 +7,10 @@ import { color } from '@leafygreen-ui/tokens';
 import { Body, Error, useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
 import { LGIDS_FORM_FIELD } from '../constants';
-import { getFontSize } from '../FormField/FormField.styles';
+import {
+  convertFormFieldStateToIconVariant,
+  getFontSizeStyles,
+} from '../FormField/FormField.styles';
 import { FormFieldState } from '../FormField/FormField.types';
 
 import {
@@ -31,17 +34,20 @@ export const FormFieldFeedback = ({
 }: FormFieldFeedbackProps) => {
   const { theme } = useDarkMode();
   const baseFontSize = useUpdatedBaseFontSize();
-  const fontStyles = getFontSize({ baseFontSize, size });
+  const fontStyles = getFontSizeStyles({ baseFontSize, size });
 
   const isErrorState = state === FormFieldState.Error;
   const isValidState = state === FormFieldState.Valid;
   const showFormFieldFeedback = (isErrorState || isValidState) && !disabled;
 
-  const iconProps = {
-    glyph: isErrorState ? 'Warning' : 'Checkmark',
-    fill: color[theme].icon[isErrorState ? 'error' : 'success'].default,
-    title: isErrorState ? 'Error' : 'Valid',
-  } as const;
+  const iconProps = showFormFieldFeedback
+    ? ({
+        glyph: isErrorState ? 'Warning' : 'Checkmark',
+        fill: color[theme].icon[convertFormFieldStateToIconVariant(state)]
+          .default,
+        title: isErrorState ? 'Error' : 'Valid',
+      } as const)
+    : undefined;
 
   return (
     <div
@@ -58,9 +64,11 @@ export const FormFieldFeedback = ({
     >
       {showFormFieldFeedback && (
         <>
-          <div className={cx(iconWrapperStyles, getIconWrapperHeight(size))}>
-            <Icon {...iconProps} aria-hidden />
-          </div>
+          {iconProps && (
+            <div className={cx(iconWrapperStyles, getIconWrapperHeight(size))}>
+              <Icon {...iconProps} aria-hidden />
+            </div>
+          )}
           {isErrorState ? (
             <Error
               data-lgid={LGIDS_FORM_FIELD.errorMessage}

diff --git a/packages/form-field/src/constants.ts b/packages/form-field/src/constants.ts
@@ -2,10 +2,13 @@ const LGID_ROOT = 'lg-form_field';
 
 export const LGIDS_FORM_FIELD = {
   root: LGID_ROOT,
+  description: `${LGID_ROOT}-description`,
   errorMessage: `${LGID_ROOT}-error_message`,
   feedback: `${LGID_ROOT}-feedback`,
-  successMessage: `${LGID_ROOT}-success_message`,
+  input: `${LGID_ROOT}-input`,
+  label: `${LGID_ROOT}-label`,
   optional: `${LGID_ROOT}-optional`,
+  successMessage: `${LGID_ROOT}-success_message`,
 } as const;
 
 export const DEFAULT_MESSAGES = {