From 306726944e9c9e6f75463705bdb014625ddde953 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Wed, 29 Apr 2026 13:26:12 -0400
Subject: [PATCH 1/2] feat(ui): update Group field styles to match v4 design

- Change separator line from top border to bottom border
- Update FieldDescription color from tertiary to secondary
- Restructure header to place ErrorPill next to title
- Add test variants for required fields with errors
---
 .../ui/src/fields/FieldDescription/index.css  |  2 +-
 packages/ui/src/fields/Group/index.css        | 14 +++---
 packages/ui/src/fields/Group/index.tsx        | 44 +++++++++----------
 test/v4/collections/Group/index.ts            | 25 +++++++++++
 4 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/packages/ui/src/fields/FieldDescription/index.css b/packages/ui/src/fields/FieldDescription/index.css
index afb25a7b35d..3491c2a8c6d 100644
--- a/packages/ui/src/fields/FieldDescription/index.css
+++ b/packages/ui/src/fields/FieldDescription/index.css
@@ -1,7 +1,7 @@
 @layer payload-default {
   .field-description {
     display: flex;
-    color: var(--text-tertiary);
+    color: var(--text-secondary);
   }
 
   .field-description--margin-bottom {
diff --git a/packages/ui/src/fields/Group/index.css b/packages/ui/src/fields/Group/index.css
index 3896132a49d..10e8c41e114 100644
--- a/packages/ui/src/fields/Group/index.css
+++ b/packages/ui/src/fields/Group/index.css
@@ -9,7 +9,7 @@
     &::before {
       content: '';
       position: absolute;
-      top: calc(var(--spacer-5) / 2);
+      top: calc(var(--spacer-5) / -2);
       left: calc(var(--gutter-h) * -1);
       right: calc(var(--gutter-h) * -1);
       height: 0;
@@ -87,15 +87,15 @@
 
   .group-field__header {
     margin-bottom: var(--spacer-2-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+  }
+
+  .group-field__title-row {
     display: flex;
     align-items: center;
     gap: var(--spacer-2);
-
-    > header {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacer-1);
-    }
   }
 
   .group-field__title {
diff --git a/packages/ui/src/fields/Group/index.tsx b/packages/ui/src/fields/Group/index.tsx
index 53e58ddfd26..e6bba7e6600 100644
--- a/packages/ui/src/fields/Group/index.tsx
+++ b/packages/ui/src/fields/Group/index.tsx
@@ -81,29 +81,27 @@ export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
         <div className={`${baseClass}__wrap`}>
           {Boolean(Label || Description || label || fieldHasErrors) && (
             <div className={`${baseClass}__header`}>
-              {Boolean(Label || Description || label) && (
-                <header>
-                  <RenderCustomComponent
-                    CustomComponent={Label}
-                    Fallback={
-                      <h3 className={`${baseClass}__title`}>
-                        <FieldLabel
-                          as="span"
-                          label={getTranslation(label, i18n)}
-                          localized={false}
-                          path={path}
-                          required={false}
-                        />
-                      </h3>
-                    }
-                  />
-                  <RenderCustomComponent
-                    CustomComponent={Description}
-                    Fallback={<FieldDescription description={description} path={path} />}
-                  />
-                </header>
-              )}
-              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
+              <div className={`${baseClass}__title-row`}>
+                <RenderCustomComponent
+                  CustomComponent={Label}
+                  Fallback={
+                    <h3 className={`${baseClass}__title`}>
+                      <FieldLabel
+                        as="span"
+                        label={getTranslation(label, i18n)}
+                        localized={false}
+                        path={path}
+                        required={false}
+                      />
+                    </h3>
+                  }
+                />
+                {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
+              </div>
+              <RenderCustomComponent
+                CustomComponent={Description}
+                Fallback={<FieldDescription description={description} path={path} />}
+              />
             </div>
           )}
           {BeforeInput}
diff --git a/test/v4/collections/Group/index.ts b/test/v4/collections/Group/index.ts
index 6d66b97d78f..42bb94b9407 100644
--- a/test/v4/collections/Group/index.ts
+++ b/test/v4/collections/Group/index.ts
@@ -9,6 +9,9 @@ const GroupFields: CollectionConfig = {
       name: 'shippingInfo',
       type: 'group',
       label: 'Shipping Info',
+      admin: {
+        description: 'Enter the shipping address details',
+      },
       fields: [
         {
           name: 'name',
@@ -37,6 +40,28 @@ const GroupFields: CollectionConfig = {
         },
       ],
     },
+    {
+      name: 'requiredInfo',
+      type: 'group',
+      label: 'Required Info',
+      admin: {
+        description: 'This group has required fields to test error state',
+      },
+      fields: [
+        {
+          name: 'requiredField',
+          type: 'text',
+          label: 'Required Field',
+          required: true,
+        },
+        {
+          name: 'anotherRequired',
+          type: 'text',
+          label: 'Another Required',
+          required: true,
+        },
+      ],
+    },
   ],
 }
 

From d6f8a79b0b43b6708a41b288d2483a5b30b28e3e Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Thu, 30 Apr 2026 15:33:33 -0400
Subject: [PATCH 2/2] bring back conditional label

---
 packages/ui/src/fields/Group/index.tsx | 30 ++++++++++++++------------
 test/v4/collections/Group/index.ts     | 13 +++++++++++
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/fields/Group/index.tsx b/packages/ui/src/fields/Group/index.tsx
index e6bba7e6600..debcfac10ee 100644
--- a/packages/ui/src/fields/Group/index.tsx
+++ b/packages/ui/src/fields/Group/index.tsx
@@ -82,20 +82,22 @@ export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
           {Boolean(Label || Description || label || fieldHasErrors) && (
             <div className={`${baseClass}__header`}>
               <div className={`${baseClass}__title-row`}>
-                <RenderCustomComponent
-                  CustomComponent={Label}
-                  Fallback={
-                    <h3 className={`${baseClass}__title`}>
-                      <FieldLabel
-                        as="span"
-                        label={getTranslation(label, i18n)}
-                        localized={false}
-                        path={path}
-                        required={false}
-                      />
-                    </h3>
-                  }
-                />
+                {Boolean(Label || Description || label) && (
+                  <RenderCustomComponent
+                    CustomComponent={Label}
+                    Fallback={
+                      <h3 className={`${baseClass}__title`}>
+                        <FieldLabel
+                          as="span"
+                          label={getTranslation(label, i18n)}
+                          localized={false}
+                          path={path}
+                          required={false}
+                        />
+                      </h3>
+                    }
+                  />
+                )}
                 {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
               </div>
               <RenderCustomComponent
diff --git a/test/v4/collections/Group/index.ts b/test/v4/collections/Group/index.ts
index 42bb94b9407..cce574f0e15 100644
--- a/test/v4/collections/Group/index.ts
+++ b/test/v4/collections/Group/index.ts
@@ -62,6 +62,19 @@ const GroupFields: CollectionConfig = {
         },
       ],
     },
+    {
+      type: 'group',
+      name: 'unnamedGroup',
+      label: '',
+      fields: [
+        {
+          name: 'unnamedGroupField',
+          type: 'text',
+          label: 'Field in Unnamed Group',
+          required: true,
+        },
+      ],
+    },
   ],
 }