use Text component

primer · Nov 29, 2024 · 89831d8 · 89831d8
1 parent 1115a2b
commit 89831d8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 19 deletions.
diff --git a/packages/react/src/forms/FormControl/FormControl.module.css b/packages/react/src/forms/FormControl/FormControl.module.css
@@ -66,19 +66,11 @@
 
 .FormControl-hint {
   grid-column: 1 / 3;
-  color: var(--brand-color-text-muted);
   display: block;
-  font-size: var(--brand-text-size-100);
-  font-weight: var(--base-text-weight-regular);
-  letter-spacing: var(--brand-text-letterSpacing-100);
-  line-height: var(--brand-text-lineHeight-100);
 }
 
 /*Validation*/
 .FormControl-validation {
-  font-weight: var(--base-text-weight-regular);
-  font-size: var(--brand-text-size-100);
-  line-height: var(--brand-text-lineHeight-100);
   display: flex;
   gap: var(--base-size-4);
 }
@@ -93,12 +85,12 @@
 
 .FormControl-validation-success-icon {
   position: relative;
-  top: -1.6px;
+  top: -1px;
 }
 
 .FormControl-validation-error-icon {
   position: relative;
-  top: -1px;
+  top: -0.5px;
 }
 
 .FormControl-validation--animate-in {

diff --git a/packages/react/src/forms/FormControl/FormControl.test.tsx b/packages/react/src/forms/FormControl/FormControl.test.tsx
@@ -1,4 +1,4 @@
-import React, {render, cleanup} from '@testing-library/react'
+import React, {render, cleanup, prettyDOM} from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {axe, toHaveNoViolations} from 'jest-axe'
 

diff --git a/packages/react/src/forms/FormControl/FormControl.tsx b/packages/react/src/forms/FormControl/FormControl.tsx
@@ -11,6 +11,7 @@ import {Select} from '../Select'
 import {TextInput} from '../TextInput'
 import {Textarea} from '../Textarea'
 import {Radio} from '../Radio'
+import {Text} from '../..'
 
 import styles from './FormControl.module.css'
 
@@ -222,7 +223,9 @@ type FormControlValidationProps = {
 
 const FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {
   return (
-    <span
+    <Text
+      as="span"
+      size="100"
       className={clsx(
         styles['FormControl-validation'],
         validationStatus && styles['FormControl-validation--animate-in'],
@@ -242,18 +245,14 @@ const FormControlValidation = ({children, validationStatus, className, ...props}
         </span>
       )}
       {children}
-    </span>
+    </Text>
   )
 }
 
 type FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>
 
-const FormControlHint = ({children, className, ...rest}: FormControlHintProps) => {
-  return (
-    <span className={clsx(styles['FormControl-hint'], className)} {...rest}>
-      {children}
-    </span>
-  )
+const FormControlHint = ({className, ...rest}: FormControlHintProps) => {
+  return <Text as="span" size="100" variant="muted" className={clsx(styles['FormControl-hint'], className)} {...rest} />
 }
 
 /**