fix: styles empty version diff row for dark mode

docs/fields/tabs.mdx

@@ -2,8 +2,70 @@
 title: Tabs Field
 label: Tabs
 order: 170
-desc: Tabs field desc here
+desc: The Tabs field is a great way to organize complex editing experiences into specific tab-based areas.
 keywords: tabs, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-Coming soon
+<Banner >
+  The Tabs field is presentational-only and only affects the Admin panel. By using it, you can place fields within a nice layout component that separates certain sub-fields by a tabbed interface.
+</Banner>
+
+![Tabs field type used to separate Hero fields from Page Layout](https://payloadcms.com/images/fields/tabs/tabs.jpg)
+*Tabs field type used to separate Hero fields from Page Layout*
+
+### Config
+
+| Option           | Description |
+| ---------------- | ----------- |
+| **`tabs`** *     | Array of tabs to render within this Tabs field. |
+| **`admin`**      | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
+
+#### Tab-specific Config
+
+Each tab has its own required `label` and `fields` array. You can also optionally pass a `description` to render within each individual tab.
+
+| Option            | Description |
+| ----------------- | ----------- |
+| **`label`** *     | The label to render on the tab itself. |
+| **`fields`** *    | The fields to render within this tab. |
+| **`description`** | Optionally render a description within this tab to describe the contents of the tab itself. |
+
+*\* An asterisk denotes that a property is required.*
+
+### Example
+
+`collections/ExampleCollection.js`
+```js
+{
+  slug: 'example-collection',
+  fields: [
+    {
+      type: 'tabs', // required
+      tabs: [ // required
+        {
+          label: 'Tab One Label', // required
+          description: 'This will appear within the tab above the fields.'
+          fields: [ // required
+            {
+              name: 'someTextField',
+              type: 'text',
+              required: true,
+            },
+          ],
+        },
+        {
+          label: 'Tab Two Label', // required
+          fields: [ // required
+            {
+              name: 'numberField',
+              type: 'number',
+              required: true,
+            },
+          ],
+        }
+      ]
+
+    }
+  ]
+}
+```

src/admin/components/forms/field-types/Tabs/index.scss

@@ -13,9 +13,7 @@
   }
 
   &--within-collapsible {
-    margin-left: calc(#{$baseline} * -1);
-    margin-right: calc(#{$baseline} * -1);
-    margin-bottom: 0;
+    margin: 0 calc(#{$baseline} * -1);
 
     .tabs-field__tabs,
     .tabs-field__content-wrap {

src/admin/components/views/Version/RenderFieldsToDiff/fields/styles.ts

@@ -8,6 +8,7 @@ export const diffStyles = {
       removedColor: 'var(--theme-error-900)',
       wordAddedBackground: 'var(--theme-success-200)',
       wordRemovedBackground: 'var(--theme-error-200)',
+      emptyLineBackground: 'var(--theme-elevation-50)',
     },
   },
 };

test/fields/collections/RichText/index.ts

@@ -8,6 +8,9 @@ const RichTextFields: CollectionConfig = {
       name: 'selectHasMany',
       hasMany: true,
       type: 'select',
+      admin: {
+        description: 'This select field is rendered here to ensure its options dropdown renders above the rich text toolbar.',
+      },
       options: [
         {
           label: 'Value One',
@@ -58,7 +61,7 @@ const RichTextFields: CollectionConfig = {
 };
 
 export const richTextDoc = {
-  select: ['one', 'five'],
+  selectHasMany: ['one', 'five'],
   richText: [
     {
       children: [