From 6b7f7d69cc18e2890db01cc6bfc8063411735164 Mon Sep 17 00:00:00 2001
From: Justin Linn <justin@linnjs.com>
Date: Tue, 24 Feb 2026 23:06:35 -0500
Subject: [PATCH] fix(react): Remove inline styles and wrapper markup from
 components

---
 .../react/src/components/form/form-item.tsx   | 10 ---
 .../react/src/components/form/form-label.tsx  | 11 ---
 .../src/components/form/form-message.tsx      |  2 +-
 .../components/molecules/address-field.tsx    | 57 +++++++------
 .../components/molecules/full-name-field.tsx  |  9 +-
 .../src/components/review/review-item.tsx     | 45 ++--------
 .../src/components/review/review-list.tsx     | 82 ++++---------------
 .../src/components/review/review-section.tsx  | 60 +++-----------
 .../src/components/review/review.test.tsx     |  8 +-
 9 files changed, 74 insertions(+), 210 deletions(-)

diff --git a/packages/react/src/components/form/form-item.tsx b/packages/react/src/components/form/form-item.tsx
index 69301bd..8a49416 100644
--- a/packages/react/src/components/form/form-item.tsx
+++ b/packages/react/src/components/form/form-item.tsx
@@ -37,16 +37,6 @@ export interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {
  * />
  * ```
  *
- * @example With custom styling
- * ```tsx
- * <FormItem className="space-y-2">
- *   <FormLabel>Password</FormLabel>
- *   <FormControl>
- *     <TextInputField type="password" {...field} label="Password" />
- *   </FormControl>
- *   <FormMessage />
- * </FormItem>
- * ```
  */
 export const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
   ({ id, className, ...props }, ref) => {
diff --git a/packages/react/src/components/form/form-label.tsx b/packages/react/src/components/form/form-label.tsx
index 4a36717..591c054 100644
--- a/packages/react/src/components/form/form-label.tsx
+++ b/packages/react/src/components/form/form-label.tsx
@@ -40,17 +40,6 @@ export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelEleme
  * </FormItem>
  * ```
  *
- * @example With custom styling on error
- * ```tsx
- * <FormItem>
- *   <FormLabel className={fieldState.error ? 'text-red-500' : ''}>
- *     Username
- *   </FormLabel>
- *   <FormControl>
- *     <TextInputField {...field} label="Username" />
- *   </FormControl>
- * </FormItem>
- * ```
  */
 export const FormLabel = React.forwardRef<HTMLLabelElement, FormLabelProps>(
   ({ required, children, ...props }, ref) => {
diff --git a/packages/react/src/components/form/form-message.tsx b/packages/react/src/components/form/form-message.tsx
index a0a4e1e..09e80f3 100644
--- a/packages/react/src/components/form/form-message.tsx
+++ b/packages/react/src/components/form/form-message.tsx
@@ -48,7 +48,7 @@ export interface FormMessageProps extends React.HTMLAttributes<HTMLParagraphElem
  *     <TextInputField {...field} label="Email" />
  *   </FormControl>
  *   {fieldState.error && (
- *     <FormMessage className="text-red-600" />
+ *     <FormMessage />
  *   )}
  * </FormItem>
  * ```
diff --git a/packages/react/src/components/molecules/address-field.tsx b/packages/react/src/components/molecules/address-field.tsx
index 9118efd..e414899 100644
--- a/packages/react/src/components/molecules/address-field.tsx
+++ b/packages/react/src/components/molecules/address-field.tsx
@@ -152,6 +152,10 @@ export interface AddressFieldProps {
    * @default "Mailing address"
    */
   legend?: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
   /**
    * Street address field configuration
    */
@@ -278,6 +282,7 @@ export const AddressField = React.forwardRef<HTMLFieldSetElement, AddressFieldPr
   (
     {
       legend = 'Mailing address',
+      className,
       street,
       street2,
       city,
@@ -317,8 +322,8 @@ export const AddressField = React.forwardRef<HTMLFieldSetElement, AddressFieldPr
     const countryOptions = country?.options ?? DEFAULT_COUNTRIES;
 
     return (
-      <fieldset ref={ref} className="vads-u-margin-y--2" style={{ border: 'none', padding: 0 }}>
-        <legend className="vads-u-font-size--lg vads-u-font-weight--bold">{legend}</legend>
+      <fieldset ref={ref} className={className} data-slot="address-field">
+        <legend data-slot="address-field-legend">{legend}</legend>
 
         {/* Street address */}
         <TextInputField
@@ -354,34 +359,28 @@ export const AddressField = React.forwardRef<HTMLFieldSetElement, AddressFieldPr
           onChange={handleFieldChange('city')}
         />
 
-        {/* State and ZIP code row */}
-        <div style={{ display: 'flex', gap: '1rem' }}>
-          <div style={{ flex: 1 }}>
-            <SelectField
-              label={stateLabel}
-              {...(state?.hint && { hint: state.hint })}
-              {...(state?.required && { required: state.required })}
-              {...(state?.error && { error: state.error })}
-              {...(values?.state && { value: values.state })}
-              options={stateOptions}
-              onChange={handleFieldChange('state')}
-            />
-          </div>
+        {/* State and ZIP code */}
+        <SelectField
+          label={stateLabel}
+          {...(state?.hint && { hint: state.hint })}
+          {...(state?.required && { required: state.required })}
+          {...(state?.error && { error: state.error })}
+          {...(values?.state && { value: values.state })}
+          options={stateOptions}
+          onChange={handleFieldChange('state')}
+        />
 
-          <div style={{ flex: 1 }}>
-            <TextInputField
-              label={zipCodeLabel}
-              {...(zipCode?.hint && { hint: zipCode.hint })}
-              {...(zipCode?.required && { required: zipCode.required })}
-              {...(zipCode?.error && { error: zipCode.error })}
-              {...(values?.zipCode && { value: values.zipCode })}
-              autocomplete="postal-code"
-              inputmode="numeric"
-              maxlength={10}
-              onChange={handleFieldChange('zipCode')}
-            />
-          </div>
-        </div>
+        <TextInputField
+          label={zipCodeLabel}
+          {...(zipCode?.hint && { hint: zipCode.hint })}
+          {...(zipCode?.required && { required: zipCode.required })}
+          {...(zipCode?.error && { error: zipCode.error })}
+          {...(values?.zipCode && { value: values.zipCode })}
+          autocomplete="postal-code"
+          inputmode="numeric"
+          maxlength={10}
+          onChange={handleFieldChange('zipCode')}
+        />
 
         {/* Country (optional) */}
         {showCountry && (
diff --git a/packages/react/src/components/molecules/full-name-field.tsx b/packages/react/src/components/molecules/full-name-field.tsx
index b330e31..1a0ba36 100644
--- a/packages/react/src/components/molecules/full-name-field.tsx
+++ b/packages/react/src/components/molecules/full-name-field.tsx
@@ -76,6 +76,10 @@ export interface FullNameFieldProps {
    * @default 'Name'
    */
   legend?: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
   /**
    * First name field configuration
    */
@@ -187,6 +191,7 @@ const DEFAULT_SUFFIX_OPTIONS: SelectOption[] = [
  */
 export const FullNameField: React.FC<FullNameFieldProps> = ({
   legend = 'Name',
+  className,
   firstName,
   middleName,
   lastName,
@@ -208,8 +213,8 @@ export const FullNameField: React.FC<FullNameFieldProps> = ({
   const showSuffix = suffix?.show === true;
 
   return (
-    <fieldset className="vads-u-margin-y--2">
-      <legend className="vads-u-font-size--lg vads-u-font-weight--bold">{legend}</legend>
+    <fieldset className={className} data-slot="full-name-field">
+      <legend data-slot="full-name-field-legend">{legend}</legend>
 
       <TextInputField
         label={firstName.label || 'First name'}
diff --git a/packages/react/src/components/review/review-item.tsx b/packages/react/src/components/review/review-item.tsx
index 77978fe..a8875ad 100644
--- a/packages/react/src/components/review/review-item.tsx
+++ b/packages/react/src/components/review/review-item.tsx
@@ -59,12 +59,12 @@ export interface ReviewItemProps {
  * ```tsx
  * <ReviewItem
  *   label="Status"
- *   value={<span style={{ color: 'green' }}>Active</span>}
+ *   value={<span>Active</span>}
  * />
  * ```
  */
 export const ReviewItem = React.forwardRef<HTMLDListElement, ReviewItemProps>(
-  ({ label, value, valueList = false, className = '', ...props }, ref) => {
+  ({ label, value, valueList = false, className, ...props }, ref) => {
     // Handle null/undefined values
     const displayValue = value ?? 'Not provided';
 
@@ -72,13 +72,7 @@ export const ReviewItem = React.forwardRef<HTMLDListElement, ReviewItemProps>(
     const renderValue = () => {
       if (valueList && Array.isArray(value)) {
         return (
-          <ul
-            style={{
-              margin: 0,
-              paddingLeft: '1.5rem',
-              listStyleType: 'disc',
-            }}
-          >
+          <ul>
             {value.map((item, index) => (
               <li key={index}>{item ?? 'Not provided'}</li>
             ))}
@@ -95,36 +89,9 @@ export const ReviewItem = React.forwardRef<HTMLDListElement, ReviewItemProps>(
     };
 
     return (
-      <dl
-        ref={ref}
-        className={`review-item ${className}`.trim()}
-        style={{
-          display: 'grid',
-          gridTemplateColumns: '1fr 2fr',
-          gap: '1rem',
-          padding: '0.75rem 0',
-          borderBottom: '1px solid #d6d7d9',
-          margin: 0,
-        }}
-        {...props}
-      >
-        <dt
-          style={{
-            fontWeight: 'bold',
-            color: '#1b1b1b',
-            margin: 0,
-          }}
-        >
-          {label}
-        </dt>
-        <dd
-          style={{
-            margin: 0,
-            color: '#1b1b1b',
-          }}
-        >
-          {renderValue()}
-        </dd>
+      <dl ref={ref} className={className} data-slot="review-item" {...props}>
+        <dt data-slot="review-item-label">{label}</dt>
+        <dd data-slot="review-item-value">{renderValue()}</dd>
       </dl>
     );
   }
diff --git a/packages/react/src/components/review/review-list.tsx b/packages/react/src/components/review/review-list.tsx
index f5e0952..b1efb7e 100644
--- a/packages/react/src/components/review/review-list.tsx
+++ b/packages/react/src/components/review/review-list.tsx
@@ -73,77 +73,25 @@ export interface ReviewListProps {
  * <ReviewList items={items} listStyle="none" />
  * ```
  */
-export const ReviewList = React.forwardRef<HTMLDivElement, ReviewListProps>(
-  ({ items, listStyle = 'bullet', className = '', ...props }, ref) => {
-    const getListStyleType = () => {
-      switch (listStyle) {
-        case 'numbered':
-          return 'decimal';
-        case 'none':
-          return 'none';
-        case 'bullet':
-        default:
-          return 'disc';
-      }
-    };
-
-    const ElementType = listStyle === 'numbered' ? 'ol' : 'ul';
+export const ReviewList = React.forwardRef<HTMLElement, ReviewListProps>(
+  ({ items, listStyle = 'bullet', className, ...props }, ref) => {
+    const ListElement = listStyle === 'numbered' ? 'ol' : 'ul';
 
     return (
-      <div
-        ref={ref}
-        className={`review-list ${className}`.trim()}
-        style={{
-          backgroundColor: '#ffffff',
-          padding: '1rem',
-          borderRadius: '4px',
-          border: '1px solid #d6d7d9',
-        }}
+      <ListElement
+        ref={ref as React.Ref<HTMLOListElement>}
+        className={className}
+        data-list-style={listStyle}
+        data-slot="review-list"
         {...props}
       >
-        <ElementType
-          style={{
-            margin: 0,
-            paddingLeft: listStyle === 'none' ? 0 : '1.5rem',
-            listStyleType: getListStyleType(),
-          }}
-        >
-          {items.map((item, index) => (
-            <li
-              key={index}
-              style={{
-                marginBottom: index < items.length - 1 ? '0.75rem' : 0,
-                paddingBottom: index < items.length - 1 ? '0.75rem' : 0,
-                borderBottom: index < items.length - 1 ? '1px solid #e6e6e6' : 'none',
-              }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: '0.25rem',
-                }}
-              >
-                <strong
-                  style={{
-                    color: '#1b1b1b',
-                    fontWeight: 'bold',
-                  }}
-                >
-                  {item.label}
-                </strong>
-                <span
-                  style={{
-                    color: '#1b1b1b',
-                  }}
-                >
-                  {item.value ?? 'Not provided'}
-                </span>
-              </div>
-            </li>
-          ))}
-        </ElementType>
-      </div>
+        {items.map((item, index) => (
+          <li key={index} data-slot="review-list-item">
+            <strong data-slot="review-list-label">{item.label}</strong>
+            <span data-slot="review-list-value">{item.value ?? 'Not provided'}</span>
+          </li>
+        ))}
+      </ListElement>
     );
   }
 );
diff --git a/packages/react/src/components/review/review-section.tsx b/packages/react/src/components/review/review-section.tsx
index 232f6cb..0b39585 100644
--- a/packages/react/src/components/review/review-section.tsx
+++ b/packages/react/src/components/review/review-section.tsx
@@ -69,7 +69,7 @@ export interface ReviewSectionProps {
  * ```
  */
 export const ReviewSection = React.forwardRef<HTMLElement, ReviewSectionProps>(
-  ({ title, children, editHref, onEdit, editLabel = 'Edit', className = '', ...props }, ref) => {
+  ({ title, children, editHref, onEdit, editLabel = 'Edit', className, ...props }, ref) => {
     const handleEditClick = (e: React.MouseEvent) => {
       if (onEdit) {
         e.preventDefault();
@@ -78,53 +78,19 @@ export const ReviewSection = React.forwardRef<HTMLElement, ReviewSectionProps>(
     };
 
     return (
-      <section
-        ref={ref}
-        className={`review-section ${className}`.trim()}
-        style={{
-          backgroundColor: '#f0f0f0',
-          padding: '1.5rem',
-          marginBottom: '1.5rem',
-          borderRadius: '4px',
-          border: '1px solid #d6d7d9',
-        }}
-        {...props}
-      >
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: '1rem',
-          }}
-        >
-          <h3
-            style={{
-              margin: 0,
-              fontSize: '1.35rem',
-              fontWeight: 'bold',
-              color: '#1b1b1b',
-            }}
+      <section ref={ref} className={className} data-slot="review-section" {...props}>
+        <h3 data-slot="review-section-header">{title}</h3>
+        {(editHref || onEdit) && (
+          <a
+            aria-label={`${editLabel} ${title}`}
+            data-slot="review-section-edit"
+            href={editHref || '#'}
+            onClick={onEdit ? handleEditClick : undefined}
           >
-            {title}
-          </h3>
-          {(editHref || onEdit) && (
-            <a
-              aria-label={`${editLabel} ${title}`}
-              href={editHref || '#'}
-              style={{
-                color: '#005ea2',
-                textDecoration: 'underline',
-                fontSize: '1rem',
-                fontWeight: 'normal',
-              }}
-              onClick={onEdit ? handleEditClick : undefined}
-            >
-              {editLabel}
-            </a>
-          )}
-        </div>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>{children}</div>
+            {editLabel}
+          </a>
+        )}
+        {children}
       </section>
     );
   }
diff --git a/packages/react/src/components/review/review.test.tsx b/packages/react/src/components/review/review.test.tsx
index 1c999ef..a587d96 100644
--- a/packages/react/src/components/review/review.test.tsx
+++ b/packages/react/src/components/review/review.test.tsx
@@ -212,7 +212,7 @@ describe('ReviewList', () => {
 
     const list = container.querySelector('ul');
     expect(list).toBeInTheDocument();
-    expect(list).toHaveStyle({ listStyleType: 'disc' });
+    expect(list).toHaveAttribute('data-list-style', 'bullet');
 
     const listItems = container.querySelectorAll('li');
     expect(listItems).toHaveLength(3);
@@ -223,7 +223,7 @@ describe('ReviewList', () => {
 
     const list = container.querySelector('ol');
     expect(list).toBeInTheDocument();
-    expect(list).toHaveStyle({ listStyleType: 'decimal' });
+    expect(list).toHaveAttribute('data-list-style', 'numbered');
   });
 
   it('renders without list markers when listStyle is none', () => {
@@ -231,7 +231,7 @@ describe('ReviewList', () => {
 
     const list = container.querySelector('ul');
     expect(list).toBeInTheDocument();
-    expect(list).toHaveStyle({ listStyleType: 'none' });
+    expect(list).toHaveAttribute('data-list-style', 'none');
   });
 
   it('handles empty items array', () => {
@@ -315,7 +315,7 @@ describe('Review components integration', () => {
 
     // Check list rendering
     expect(screen.getByText('Languages')).toBeInTheDocument();
-    const languagesList = container.querySelectorAll('.review-item ul li');
+    const languagesList = container.querySelectorAll('[data-slot="review-item"] ul li');
     expect(languagesList).toHaveLength(2);
 
     // Check review list