docs: collapsible

docs/fields/collapsible.mdx

@@ -0,0 +1,44 @@
+---
+title: Collapsible Field
+label: Collapsible
+order: 60
+desc: With the Collapsible field, you can place fields within a collapsible layout component that can be collapsed / expanded.
+keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
+---
+
+<Banner >
+  The Collapsible field is presentational-only and only affects the Admin panel. By using it, you can place fields within a nice layout component that can be collapsed / expanded.
+</Banner>
+
+### Config
+
+| Option           | Description |
+| ---------------- | ----------- |
+| **`label`** *        | A label to render within the header of the collapsible component. |
+| **`fields`** *       | Array of field types to nest within this Collapsible. |
+| **`admin`**          | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
+
+*\* An asterisk denotes that a property is required.*
+
+### Example
+
+`collections/ExampleCollection.js`
+```js
+{
+  slug: 'example-collection',
+  fields: [
+    {
+      label: 'Header of collapsible goes here',
+      type: 'collapsible', // required
+      fields: [ // required
+        {
+          name: 'someTextField',
+          type: 'text',
+          required: true,
+        },
+      ],
+    }
+  ]
+}
+
+```

docs/fields/date.mdx

@@ -1,7 +1,7 @@
 ---
 title: Date Field
 label: Date
-order: 60
+order: 70
 desc: The Date field type stores a Date in the database. Learn how to use and customize the Date field, see examples and options.
 keywords: date, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/email.mdx

@@ -1,7 +1,7 @@
 ---
 title: Email Field
 label: Email
-order: 70
+order: 80
 desc: The Email field enforces that the value provided is a valid email address. Learn how to use Email fields, see examples and options.
 keywords: email, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/group.mdx

@@ -1,7 +1,7 @@
 ---
 title: Group Field
 label: Group
-order: 80
+order: 90
 desc: The Group field allows other fields to be nested under a common property. Learn how to use Group fields, see examples and options.
 keywords: group, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/number.mdx

@@ -1,7 +1,7 @@
 ---
 title: Number Field
 label: Number
-order: 90
+order: 100
 desc: Number fields store and validate numeric data. Learn how to use and format Number fields, see examples and Number field options.
 keywords: number, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/point.mdx

@@ -1,7 +1,7 @@
 ---
 title: Point Field
 label: Point
-order: 95
+order: 110
 desc: The Point field type stores coordinates in the database. Learn how to use Point field for geolocation and geometry.
 
 keywords: point, geolocation, geospatial, geojson, 2dsphere, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express

docs/fields/radio.mdx

@@ -1,7 +1,7 @@
 ---
 title: Radio Field
 label: Radio Group
-order: 100
+order: 120
 desc: The Radio field type allows for the selection of one value from a predefined set of possible values. Learn how to use Radio fields, see examples and options.
 keywords: radio, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/relationship.mdx

@@ -1,7 +1,7 @@
 ---
 title: Relationship Field
 label: Relationship
-order: 110
+order: 130
 desc: The Relationship field provides the ability to relate documents together. Learn how to use Relationship fields, see examples and options.
 keywords: relationship, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/rich-text.mdx

@@ -1,7 +1,7 @@
 ---
 title: Rich Text Field
 label: Rich Text
-order: 120
+order: 140
 desc: The Rich Text field allows dynamic content to be written through the Admin Panel. Learn how to use Rich Text fields, see examples and options.
 keywords: rich text, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/row.mdx

@@ -1,7 +1,7 @@
 ---
 title: Row Field
 label: Row
-order: 130
+order: 150
 desc: With the Row field you can arrange fields next to each other in the Admin Panel to help you customize your Dashboard.
 keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/select.mdx

@@ -1,7 +1,7 @@
 ---
 title: Select Field
 label: Select
-order: 140
+order: 160
 desc: The Select field provides a dropdown-style interface for choosing options from a predefined list. Learn how to use Select fields, see examples and options.
 keywords: select, multi-select, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/tabs.mdx

@@ -0,0 +1,9 @@
+---
+title: Tabs Field
+label: Tabs
+order: 170
+desc: Tabs field desc here
+keywords: tabs, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
+---
+
+Coming soon

docs/fields/text.mdx

@@ -1,7 +1,7 @@
 ---
 title: Text Field
 label: Text
-order: 150
+order: 180
 desc: Text field types simply save a string to the database and provide the Admin panel with a text input. Learn how to use Text fields, see examples and options.
 keywords: text, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/textarea.mdx

@@ -1,7 +1,7 @@
 ---
 title: Textarea Field
 label: Textarea
-order: 160
+order: 190
 desc: Textarea field types save a string to the database, similar to the Text field type but equipped for longer text. Learn how to use Textarea fields, see examples and options.
 keywords: textarea, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/ui.mdx

@@ -1,7 +1,7 @@
 ---
 title: UI Field
 label: UI
-order: 170
+order: 200
 desc: UI fields are purely presentational and allow developers to customize the admin panel to a very fine degree, including adding actions and other functions.
 keywords: custom field, react component, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

docs/fields/upload.mdx

@@ -1,7 +1,7 @@
 ---
 title: Upload Field
 label: Upload
-order: 180
+order: 210
 desc: Upload fields will allow a file to be uploaded, only from a collection supporting Uploads. Learn how to use Upload fields, see examples and options.
 keywords: upload, images media, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---

src/admin/components/elements/Collapsible/index.scss

@@ -17,7 +17,7 @@
     width: 100%;
     display: flex;
     align-items: center;
-    padding: base(.75) base(1);
+    padding: base(.5) base(1);
 
     &:hover {
       background: var(--theme-elevation-100);

src/admin/components/elements/Collapsible/index.tsx

@@ -20,7 +20,7 @@ export const Collapsible: React.FC<Props> = ({ children, onToggle, className, he
       isNested && `${baseClass}--nested`,
     ].filter(Boolean).join(' ')}
     >
-      <CollapsibleProvider withinCollapsible>
+      <CollapsibleProvider>
         <button
           type="button"
           className={`${baseClass}__toggle ${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`}

src/admin/components/elements/Collapsible/provider.tsx

@@ -4,7 +4,7 @@ import React, {
 
 const Context = createContext(false);
 
-export const CollapsibleProvider: React.FC<{ children?: React.ReactNode, withinCollapsible: boolean }> = ({ children, withinCollapsible }) => {
+export const CollapsibleProvider: React.FC<{ children?: React.ReactNode, withinCollapsible?: boolean }> = ({ children, withinCollapsible = true }) => {
   return (
     <Context.Provider value={withinCollapsible}>
       {children}