feat(ui): update Group field styles to match v4 design (#16423)

## Summary

Updates the Group field component styles to match the v4 design.

## Changes

- **Separator line position**: Changed from top border to bottom border
- each group now owns its bottom separator instead of top
- **Description color**: Updated FieldDescription color from
`--text-tertiary` to `--text-secondary`
- **ErrorPill positioning**: Restructured header to place ErrorPill
inline with the title (instead of after description)
- **Test collection**: Added test variants for required fields with
validation errors

## References


https://app.asana.com/1/10497086658021/project/1213409914712008/task/1214061555627424?focus=true

Author: JarrodMFlesch

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 {

packages/ui/src/fields/Group/index.tsx

@@ -81,8 +81,8 @@ export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
         <div className={`${baseClass}__wrap`}>
           {Boolean(Label || Description || label || fieldHasErrors) && (
             <div className={`${baseClass}__header`}>
-              {Boolean(Label || Description || label) && (
-                <header>
+              <div className={`${baseClass}__title-row`}>
+                {Boolean(Label || Description || label) && (
                   <RenderCustomComponent
                     CustomComponent={Label}
                     Fallback={
@@ -97,13 +97,13 @@ export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
                       </h3>
                     }
                   />
-                  <RenderCustomComponent
-                    CustomComponent={Description}
-                    Fallback={<FieldDescription description={description} path={path} />}
-                  />
-                </header>
-              )}
-              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
+                )}
+                {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
+              </div>
+              <RenderCustomComponent
+                CustomComponent={Description}
+                Fallback={<FieldDescription description={description} path={path} />}
+              />
             </div>
           )}
           {BeforeInput}

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,41 @@ 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,
+        },
+      ],
+    },
+    {
+      type: 'group',
+      name: 'unnamedGroup',
+      label: '',
+      fields: [
+        {
+          name: 'unnamedGroupField',
+          type: 'text',
+          label: 'Field in Unnamed Group',
+          required: true,
+        },
+      ],
+    },
   ],
 }