leverage Text component

primer · Nov 27, 2024 · fa4729d · fa4729d
1 parent df783b5
commit fa4729d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 24 deletions.
diff --git a/packages/react/src/forms/ControlGroup/ControlGroup.module.css b/packages/react/src/forms/ControlGroup/ControlGroup.module.css
@@ -10,25 +10,15 @@
 }
 
 .ControlGroup__label {
-  font-weight: var(--base-text-weight-semibold);
   margin: 0;
   padding: 0;
-  margin-bottom: var(--base-size-8);
-}
-
-.ControlGroup__caption {
-  font-size: var(--brand-text-size-100);
-  letter-spacing: var(--brand-text-letterSpacing-100);
-  line-height: var(--brand-text-lineHeight-100);
-  color: var(--brand-color-text-muted);
+  margin-block-end: var(--base-size-8);
 }
 
 .ControlGroup__validation {
   display: flex;
   gap: var(--base-size-4);
-  font-size: var(--brand-text-size-100);
-  font-weight: var(--base-text-weight-regular);
-  line-height: var(--brand-text-lineHeight-100);
+  font-weight: var(--base-text-weight-medium);
 }
 
 .ControlGroup__validation--success {
@@ -41,12 +31,12 @@
 
 .ControlGroup__validation-icon--success {
   position: relative;
-  top: -1.6px;
+  top: -1px;
 }
 
 .ControlGroup__validation-icon--error {
   position: relative;
-  top: -1px;
+  top: -0.5px;
 }
 
 .ControlGroup__validation--animate-in {

diff --git a/packages/react/src/forms/ControlGroup/ControlGroup.module.css.d.ts b/packages/react/src/forms/ControlGroup/ControlGroup.module.css.d.ts
@@ -1,7 +1,6 @@
 declare const styles: {
   readonly "ControlGroup__container": string;
   readonly "ControlGroup__label": string;
-  readonly "ControlGroup__caption": string;
   readonly "ControlGroup__validation": string;
   readonly "ControlGroup__validation--success": string;
   readonly "ControlGroup__validation--error": string;

diff --git a/packages/react/src/forms/ControlGroup/ControlGroup.tsx b/packages/react/src/forms/ControlGroup/ControlGroup.tsx
@@ -1,10 +1,11 @@
-import clsx from 'clsx'
 import React, {Children, createContext, forwardRef, isValidElement, useContext, type HTMLAttributes} from 'react'
+import clsx from 'clsx'
 import {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'
+import {useId} from '@reach/auto-id'
 
-import styles from './ControlGroup.module.css'
 import type {FormValidationStatus} from '..'
-import {useId} from '@reach/auto-id'
+import {Text} from '../..'
+import styles from './ControlGroup.module.css'
 
 type ControlGroupContext = {
   id?: string
@@ -54,13 +55,17 @@ const _ControlGroup = forwardRef<HTMLFieldSetElement, ControlGroupProps>(({class
 
 export type ControlGroupLabelProps = {visuallyHidden?: boolean} & HTMLAttributes<HTMLLegendElement>
 const ControlGroupLabel = forwardRef<HTMLLegendElement, ControlGroupLabelProps>(
-  ({className, visuallyHidden, ...props}, ref) => {
+  ({children, className, visuallyHidden, ...props}, ref) => {
     return (
       <legend
         ref={ref}
         className={clsx(styles.ControlGroup__label, visuallyHidden && 'visually-hidden', className)}
         {...props}
-      />
+      >
+        <Text as="span" weight="semibold" size="100">
+          {children}
+        </Text>
+      </legend>
     )
   },
 )
@@ -69,7 +74,7 @@ export type ControlGroupCaptionProps = HTMLAttributes<HTMLSpanElement>
 const ControlGroupCaption = forwardRef<HTMLSpanElement, ControlGroupCaptionProps>(({className, ...props}, ref) => {
   const {id} = useControlGroup()
 
-  return <span ref={ref} id={`${id}-caption`} className={clsx(styles.ControlGroup__caption, className)} {...props} />
+  return <Text as="span" size="100" variant="muted" ref={ref} id={`${id}-caption`} className={className} {...props} />
 })
 
 export type ControlGroupValidationProps = {variant: FormValidationStatus} & HTMLAttributes<HTMLSpanElement>
@@ -78,7 +83,9 @@ const ControlGroupValidation = forwardRef<HTMLSpanElement, ControlGroupValidatio
     const {id} = useControlGroup()
 
     return (
-      <span
+      <Text
+        as="span"
+        size="100"
         ref={ref}
         id={`${id}-validation`}
         className={clsx(
@@ -100,9 +107,8 @@ const ControlGroupValidation = forwardRef<HTMLSpanElement, ControlGroupValidatio
             <AlertFillIcon />
           </span>
         )}
-
         {children}
-      </span>
+      </Text>
     )
   },
 )