From 8ae98503f5cd7f08d737a2d8b61871fdbde5bbd9 Mon Sep 17 00:00:00 2001 From: Jessica Chowdhury <67977755+JessChowdhury@users.noreply.github.com> Date: Tue, 8 Aug 2023 15:00:21 +0100 Subject: [PATCH] docs: adds images to each field page (#3137) --- docs/fields/array.mdx | 10 +++++++--- docs/fields/blocks.mdx | 10 +++++++--- docs/fields/checkbox.mdx | 7 +++++++ docs/fields/code.mdx | 7 +++++++ docs/fields/collapsible.mdx | 7 +++++++ docs/fields/date.mdx | 7 +++++++ docs/fields/email.mdx | 9 ++++++++- docs/fields/group.mdx | 7 +++++++ docs/fields/json.mdx | 7 +++++++ docs/fields/number.mdx | 7 +++++++ docs/fields/point.mdx | 7 +++++++ docs/fields/radio.mdx | 7 +++++++ docs/fields/relationship.mdx | 7 +++++++ docs/fields/rich-text.mdx | 7 +++++++ docs/fields/row.mdx | 7 +++++++ docs/fields/select.mdx | 7 +++++++ docs/fields/tabs.mdx | 9 +++++++-- docs/fields/text.mdx | 7 +++++++ docs/fields/textarea.mdx | 7 +++++++ docs/fields/upload.mdx | 7 +++++++ 20 files changed, 141 insertions(+), 9 deletions(-) diff --git a/docs/fields/array.mdx b/docs/fields/array.mdx index f1371d8f0..949b28bb4 100644 --- a/docs/fields/array.mdx +++ b/docs/fields/array.mdx @@ -12,15 +12,19 @@ keywords: array, fields, config, configuration, documentation, Content Managemen Its uses can be simple or highly complex. + + **Example uses:** - A "slider" with an image ([upload field](/docs/fields/upload)) and a caption ([text field](/docs/fields/text)) - Navigational structures where editors can specify nav items containing pages ([relationship field](/docs/fields/relationship)), an "open in new tab" [checkbox field](/docs/fields/checkbox) - Event agenda "timeslots" where you need to specify start & end time ([date field](/docs/fields/date)), label ([text field](/docs/fields/text)), and Learn More page [relationship](/docs/fields/relationship) -![Array field in Payload admin panel](https://payloadcms.com/images/docs/fields/array.jpg) -_Admin panel screenshot of an Array field with a Row containing two text fields, a read-only text field and a checkbox_ - ### Config | Option | Description | diff --git a/docs/fields/blocks.mdx b/docs/fields/blocks.mdx index 64cb66e89..827581eea 100644 --- a/docs/fields/blocks.mdx +++ b/docs/fields/blocks.mdx @@ -13,15 +13,19 @@ keywords: blocks, fields, config, configuration, documentation, Content Manageme match the shape of one of your provided block configs. + + **Example uses:** - A layout builder tool that grants editors to design highly customizable page or post layouts. Blocks could include configs such as `Quote`, `CallToAction`, `Slider`, `Content`, `Gallery`, or others. - A form builder tool where available block configs might be `Text`, `Select`, or `Checkbox`. - Virtual event agenda "timeslots" where a timeslot could either be a `Break`, a `Presentation`, or a `BreakoutSession`. -![Blocks field in Payload admin panel](https://payloadcms.com/images/docs/fields/blocks.jpg) -_Admin panel screenshot of a Blocks field type with Call to Action and Number block examples_ - ### Field config | Option | Description | diff --git a/docs/fields/checkbox.mdx b/docs/fields/checkbox.mdx index 47745a621..4d3da6ec0 100644 --- a/docs/fields/checkbox.mdx +++ b/docs/fields/checkbox.mdx @@ -10,6 +10,13 @@ keywords: checkbox, fields, config, configuration, documentation, Content Manage The Checkbox field type saves a boolean in the database. + + ### Config | Option | Description | diff --git a/docs/fields/code.mdx b/docs/fields/code.mdx index 1ec79469b..a9126c904 100644 --- a/docs/fields/code.mdx +++ b/docs/fields/code.mdx @@ -11,6 +11,13 @@ keywords: code, fields, config, configuration, documentation, Content Management The Code field type saves a string in the database, but provides the Admin panel with a code editor styled interface. + + This field uses the `monaco-react` editor syntax highlighting. ### Config diff --git a/docs/fields/collapsible.mdx b/docs/fields/collapsible.mdx index 0ecd0f55e..a38a73494 100644 --- a/docs/fields/collapsible.mdx +++ b/docs/fields/collapsible.mdx @@ -10,6 +10,13 @@ keywords: row, fields, config, configuration, documentation, Content Management 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. + + ### Config | Option | Description | diff --git a/docs/fields/date.mdx b/docs/fields/date.mdx index 1c79df063..e6c2ca936 100644 --- a/docs/fields/date.mdx +++ b/docs/fields/date.mdx @@ -11,6 +11,13 @@ keywords: date, fields, config, configuration, documentation, Content Management with a customizable time picker interface. + + This field uses [`react-datepicker`](https://www.npmjs.com/package/react-datepicker) for the Admin panel component. ### Config diff --git a/docs/fields/email.mdx b/docs/fields/email.mdx index 0115d9780..7d36686fd 100644 --- a/docs/fields/email.mdx +++ b/docs/fields/email.mdx @@ -6,10 +6,17 @@ desc: The Email field enforces that the value provided is a valid email address. keywords: email, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express --- - + The Email field enforces that the value provided is a valid email address. + + ### Config | Option | Description | diff --git a/docs/fields/group.mdx b/docs/fields/group.mdx index 07d883908..b9cbdb432 100644 --- a/docs/fields/group.mdx +++ b/docs/fields/group.mdx @@ -11,6 +11,13 @@ keywords: group, fields, config, configuration, documentation, Content Managemen also groups fields together visually in the Admin panel. + + ### Config | Option | Description | diff --git a/docs/fields/json.mdx b/docs/fields/json.mdx index 17c8fbd58..34c8debc2 100644 --- a/docs/fields/json.mdx +++ b/docs/fields/json.mdx @@ -11,6 +11,13 @@ keywords: json, fields, config, configuration, documentation, Content Management The JSON field type saves actual JSON in the database, which differs from the Code field that saves the value as a string in the database. + + This field uses the `monaco-react` editor syntax highlighting. ### Config diff --git a/docs/fields/number.mdx b/docs/fields/number.mdx index b446c0d18..b78eb4d60 100644 --- a/docs/fields/number.mdx +++ b/docs/fields/number.mdx @@ -10,6 +10,13 @@ keywords: number, fields, config, configuration, documentation, Content Manageme The Number field stores and validates numeric entry and supports additional numerical validation and formatting features. + + ### Config | Option | Description | diff --git a/docs/fields/point.mdx b/docs/fields/point.mdx index 9a9894948..2494ee14d 100644 --- a/docs/fields/point.mdx +++ b/docs/fields/point.mdx @@ -11,6 +11,13 @@ keywords: point, geolocation, geospatial, geojson, 2dsphere, config, configurati The Point field type saves a pair of coordinates in the database and assigns an index for location related queries. + + The data structure in the database matches the GeoJSON structure to represent point. The Payload APIs simplifies the object data to only the [longitude, latitude] location. ### Config diff --git a/docs/fields/radio.mdx b/docs/fields/radio.mdx index 0934e37e2..46f93561e 100644 --- a/docs/fields/radio.mdx +++ b/docs/fields/radio.mdx @@ -10,6 +10,13 @@ keywords: radio, fields, config, configuration, documentation, Content Managemen The Radio Group field type allows for the selection of one value from a predefined set of possible values and presents a radio group-style set of inputs to the Admin panel. + + ### Config | Option | Description | diff --git a/docs/fields/relationship.mdx b/docs/fields/relationship.mdx index 976b1d2d4..8ff1c11dc 100644 --- a/docs/fields/relationship.mdx +++ b/docs/fields/relationship.mdx @@ -11,6 +11,13 @@ keywords: relationship, fields, config, configuration, documentation, Content Ma provides for the ability to easily relate documents together. + + **Example uses:** - To add `Product` documents to an `Order` document diff --git a/docs/fields/rich-text.mdx b/docs/fields/rich-text.mdx index 258646179..18e455168 100644 --- a/docs/fields/rich-text.mdx +++ b/docs/fields/rich-text.mdx @@ -10,6 +10,13 @@ keywords: rich text, fields, config, configuration, documentation, Content Manag The Rich Text field is a powerful way to allow editors to write dynamic content. The content is saved as JSON in the database and can be converted into any format, including HTML, that you need. + + The Admin component is built on the powerful [`slatejs`](https://docs.slatejs.org/) editor and is meant to be as extensible and customizable as possible. diff --git a/docs/fields/row.mdx b/docs/fields/row.mdx index 07be9d496..b6cfee864 100644 --- a/docs/fields/row.mdx +++ b/docs/fields/row.mdx @@ -10,6 +10,13 @@ keywords: row, fields, config, configuration, documentation, Content Management The Row field is presentational-only and only affects the Admin panel. By using it, you can arrange fields next to each other horizontally. + + ### Config | Option | Description | diff --git a/docs/fields/select.mdx b/docs/fields/select.mdx index 264c17a2f..4c87ae88f 100644 --- a/docs/fields/select.mdx +++ b/docs/fields/select.mdx @@ -11,6 +11,13 @@ keywords: select, multi-select, fields, config, configuration, documentation, Co a predefined list as an enumeration. + + ### Config | Option | Description | diff --git a/docs/fields/tabs.mdx b/docs/fields/tabs.mdx index 33fc66f45..afc7cb8d2 100644 --- a/docs/fields/tabs.mdx +++ b/docs/fields/tabs.mdx @@ -12,8 +12,13 @@ keywords: tabs, fields, config, configuration, documentation, Content Management component that separates certain sub-fields by a tabbed interface. -![Tabs field type used to separate Hero fields from Page Layout](https://payloadcms.com/images/docs/fields/tabs/tabs.jpg) -_Tabs field type used to separate Hero fields from Page Layout_ + + ### Config diff --git a/docs/fields/text.mdx b/docs/fields/text.mdx index 61c8c87f5..40dcd11c6 100644 --- a/docs/fields/text.mdx +++ b/docs/fields/text.mdx @@ -10,6 +10,13 @@ keywords: text, fields, config, configuration, documentation, Content Management The Text field type is one of the most commonly used fields. It saves a string to the database and provides the Admin panel with a simple text input. + + ### Config | Option | Description | diff --git a/docs/fields/textarea.mdx b/docs/fields/textarea.mdx index 69be15112..0bc8db3d0 100644 --- a/docs/fields/textarea.mdx +++ b/docs/fields/textarea.mdx @@ -10,6 +10,13 @@ keywords: textarea, fields, config, configuration, documentation, Content Manage The Textarea field is almost identical to the Text field but it features a slightly larger input that is better suited to edit longer text. + + ### Config | Option | Description | diff --git a/docs/fields/upload.mdx b/docs/fields/upload.mdx index ac2ad8304..5fe888a3e 100644 --- a/docs/fields/upload.mdx +++ b/docs/fields/upload.mdx @@ -15,6 +15,13 @@ keywords: upload, images media, fields, config, configuration, documentation, Co To use this field, you need to have a Collection configured to allow Uploads. For more information, [click here](/docs/upload/overview) to read about how to enable Uploads on a collection by collection basis. + + **Example uses:** - To provide a `Page` with a featured image