feat: allows group field gutter to be disabled

demo/collections/Localized.ts

@@ -12,6 +12,9 @@ const RichTextBlock: Block = {
       name: 'content',
       localized: true,
       type: 'richText',
+      admin: {
+        hideGutter: true,
+      },
     },
   ],
 };

docs/fields/group.mdx

@@ -25,10 +25,18 @@ keywords: group, fields, config, configuration, documentation, Content Managemen
 | **`defaultValue`**   | Provide an object of data to be used for this field's default value. |
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. If enabled, a separate, localized set of all data within this Group will be kept, so there is no need to specify each nested field as `localized`. |
 | **`required`**       | Require this field to have a value. |
-| **`admin`**          | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
+| **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
 
 *\* An asterisk denotes that a property is required.*
 
+### Admin config
+
+In addition to the default [field admin config](/docs/fields/overview#admin-config), the Group allows for the following admin property:
+
+**`hideGutter`**
+
+Set this property to `true` to hide this field's gutter within the admin panel. The field gutter is rendered as a vertical line and padding, but often if this field is nested within a Group, Block, or Array, you may want to hide the gutter.
+
 ### Example
 
 `collections/ExampleCollection.js`

docs/fields/rich-text.mdx

@@ -63,10 +63,6 @@ The default `elements` available in Payload are:
 
 The `leaves` property specifies built-in or custom [SlateJS leaves](https://docs.slatejs.org/concepts/08-rendering#leaves) to be enabled within the Admin panel.
 
-**`hideGutter`**
-
-Set this property to hide the gutter.
-
 The default `leaves` available in Payload are:
 
 - `bold`
@@ -75,6 +71,10 @@ The default `leaves` available in Payload are:
 - `strikethrough`
 - `underline`
 
+**`hideGutter`**
+
+Set this property to `true` to hide this field's gutter within the admin panel. The field gutter is rendered as a vertical line and padding, but often if this field is nested within a Group, Block, or Array, you may want to hide the gutter.
+
 ### Relationship element
 
 The built-in `relationship` element is a powerful way to reference other Documents directly within your Rich Text editor.

src/admin/components/forms/field-types/Group/index.tsx

@@ -20,6 +20,7 @@ const Group: React.FC<Props> = (props) => {
       readOnly,
       style,
       width,
+      hideGutter,
     },
     permissions,
   } = props;
@@ -34,7 +35,7 @@ const Group: React.FC<Props> = (props) => {
         width,
       }}
     >
-      <FieldTypeGutter />
+      { !hideGutter && (<FieldTypeGutter />) }
 
       <div className={`${baseClass}__content-wrapper`}>
         {label && (

src/fields/config/schema.ts

@@ -149,6 +149,9 @@ export const group = baseField.keys({
   label: joi.string(),
   fields: joi.array().items(joi.link('#field')),
   defaultValue: joi.object(),
+  admin: baseAdminFields.keys({
+    hideGutter: joi.boolean().default(false),
+  }),
 });
 
 export const array = baseField.keys({

src/fields/config/types.ts

@@ -128,6 +128,9 @@ export type DateField = FieldBase & {
 export type GroupField = FieldBase & {
   type: 'group';
   fields: Field[];
+  admin?: Admin & {
+    hideGutter?: boolean
+  }
 }
 
 export type RowField = FieldBase & {