From 50dd65ef9225ca956f6ffd9630f9acda71430ad4 Mon Sep 17 00:00:00 2001
From: Oran Epelbaum <oran@avian.aero>
Date: Wed, 5 Jan 2022 21:24:11 +0200
Subject: [PATCH] Added className property to admin, in addition to the
 existing style property. Also documented both properties.

---
 docs/fields/overview.mdx                                      | 2 ++
 src/admin/components/forms/field-types/Checkbox/index.tsx     | 2 ++
 src/admin/components/forms/field-types/Code/Code.tsx          | 2 ++
 src/admin/components/forms/field-types/DateTime/index.tsx     | 2 ++
 src/admin/components/forms/field-types/Email/index.tsx        | 2 ++
 src/admin/components/forms/field-types/Group/index.tsx        | 2 ++
 src/admin/components/forms/field-types/Number/index.tsx       | 2 ++
 src/admin/components/forms/field-types/Password/index.tsx     | 2 ++
 src/admin/components/forms/field-types/Password/types.ts      | 1 +
 src/admin/components/forms/field-types/Point/index.tsx        | 2 ++
 src/admin/components/forms/field-types/RadioGroup/index.tsx   | 2 ++
 src/admin/components/forms/field-types/Relationship/index.tsx | 2 ++
 src/admin/components/forms/field-types/RichText/RichText.tsx  | 2 ++
 src/admin/components/forms/field-types/Select/Input.tsx       | 3 +++
 src/admin/components/forms/field-types/Select/index.tsx       | 2 ++
 src/admin/components/forms/field-types/Text/Input.tsx         | 3 +++
 src/admin/components/forms/field-types/Text/index.tsx         | 2 ++
 src/admin/components/forms/field-types/Textarea/Input.tsx     | 3 +++
 src/admin/components/forms/field-types/Textarea/index.tsx     | 2 ++
 src/admin/components/forms/field-types/Upload/Input.tsx       | 3 +++
 src/admin/components/forms/field-types/Upload/index.tsx       | 2 ++
 src/fields/config/schema.ts                                   | 1 +
 src/fields/config/types.ts                                    | 1 +
 23 files changed, 47 insertions(+)

diff --git a/docs/fields/overview.mdx b/docs/fields/overview.mdx
index d1a01ad75..38b7a7737 100644
--- a/docs/fields/overview.mdx
+++ b/docs/fields/overview.mdx
@@ -114,6 +114,8 @@ In addition to each field's base configuration, you can define specific traits a
 | `description` | Helper text to display with the field to provide more information for the editor user. [Click here](#description) for more info. |
 | `position`    | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`. |
 | `width`       | Restrict the width of a field. you can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally. |
+| `style`       | Attach raw CSS style properties to the root DOM element of a field. |
+| `className`   | Attach a CSS class name to the root DOM element of a field. |
 | `readOnly`    | Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value. |
 | `disabled`    | If a field is `disabled`, it is completely omitted from the Admin panel. |
 | `hidden`      | Setting a field's `hidden` property on its `admin` config will transform it into a `hidden` input type. Its value will still submit with the Admin panel's requests, but the field itself will not be visible to editors. |
diff --git a/src/admin/components/forms/field-types/Checkbox/index.tsx b/src/admin/components/forms/field-types/Checkbox/index.tsx
index 4bf44687b..e5897aff9 100644
--- a/src/admin/components/forms/field-types/Checkbox/index.tsx
+++ b/src/admin/components/forms/field-types/Checkbox/index.tsx
@@ -23,6 +23,7 @@ const Checkbox: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       description,
       condition,
@@ -54,6 +55,7 @@ const Checkbox: React.FC<Props> = (props) => {
         'field-type',
         baseClass,
         showError && 'error',
+        className,
         value && `${baseClass}--checked`,
         readOnly && `${baseClass}--read-only`,
       ].filter(Boolean).join(' ')}
diff --git a/src/admin/components/forms/field-types/Code/Code.tsx b/src/admin/components/forms/field-types/Code/Code.tsx
index bf6c0db10..d107305f9 100644
--- a/src/admin/components/forms/field-types/Code/Code.tsx
+++ b/src/admin/components/forms/field-types/Code/Code.tsx
@@ -22,6 +22,7 @@ const Code: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       language,
       description,
@@ -62,6 +63,7 @@ const Code: React.FC<Props> = (props) => {
   const classes = [
     'field-type',
     'code',
+    className,
     showError && 'error',
     readOnly && 'read-only',
   ].filter(Boolean).join(' ');
diff --git a/src/admin/components/forms/field-types/DateTime/index.tsx b/src/admin/components/forms/field-types/DateTime/index.tsx
index 1e17e22bb..840b4f1b8 100644
--- a/src/admin/components/forms/field-types/DateTime/index.tsx
+++ b/src/admin/components/forms/field-types/DateTime/index.tsx
@@ -24,6 +24,7 @@ const DateTime: React.FC<Props> = (props) => {
       placeholder,
       readOnly,
       style,
+      className,
       width,
       date,
       description,
@@ -52,6 +53,7 @@ const DateTime: React.FC<Props> = (props) => {
   const classes = [
     'field-type',
     baseClass,
+    className,
     showError && `${baseClass}--has-error`,
     readOnly && 'read-only',
   ].filter(Boolean).join(' ');
diff --git a/src/admin/components/forms/field-types/Email/index.tsx b/src/admin/components/forms/field-types/Email/index.tsx
index 91979c3b6..8299af5b1 100644
--- a/src/admin/components/forms/field-types/Email/index.tsx
+++ b/src/admin/components/forms/field-types/Email/index.tsx
@@ -18,6 +18,7 @@ const Email: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       placeholder,
       autoComplete,
@@ -51,6 +52,7 @@ const Email: React.FC<Props> = (props) => {
   const classes = [
     'field-type',
     'email',
+    className,
     showError && 'error',
     readOnly && 'read-only',
   ].filter(Boolean).join(' ');
diff --git a/src/admin/components/forms/field-types/Group/index.tsx b/src/admin/components/forms/field-types/Group/index.tsx
index 440315de3..867ffaa1a 100644
--- a/src/admin/components/forms/field-types/Group/index.tsx
+++ b/src/admin/components/forms/field-types/Group/index.tsx
@@ -21,6 +21,7 @@ const Group: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       hideGutter,
       description,
@@ -35,6 +36,7 @@ const Group: React.FC<Props> = (props) => {
       className={[
         'field-type',
         baseClass,
+        className,
         !label && `${baseClass}--no-label`,
       ].filter(Boolean).join(' ')}
       style={{
diff --git a/src/admin/components/forms/field-types/Number/index.tsx b/src/admin/components/forms/field-types/Number/index.tsx
index cb8b4c01c..9a9445da7 100644
--- a/src/admin/components/forms/field-types/Number/index.tsx
+++ b/src/admin/components/forms/field-types/Number/index.tsx
@@ -21,6 +21,7 @@ const NumberField: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       step,
       placeholder,
@@ -61,6 +62,7 @@ const NumberField: React.FC<Props> = (props) => {
   const classes = [
     'field-type',
     'number',
+    className,
     showError && 'error',
     readOnly && 'read-only',
   ].filter(Boolean).join(' ');
diff --git a/src/admin/components/forms/field-types/Password/index.tsx b/src/admin/components/forms/field-types/Password/index.tsx
index 5bafb357d..3206fd34c 100644
--- a/src/admin/components/forms/field-types/Password/index.tsx
+++ b/src/admin/components/forms/field-types/Password/index.tsx
@@ -15,6 +15,7 @@ const Password: React.FC<Props> = (props) => {
     required,
     validate = password,
     style,
+    className,
     width,
     autoComplete,
     label,
@@ -42,6 +43,7 @@ const Password: React.FC<Props> = (props) => {
   const classes = [
     'field-type',
     'password',
+    className,
     showError && 'error',
   ].filter(Boolean).join(' ');
 
diff --git a/src/admin/components/forms/field-types/Password/types.ts b/src/admin/components/forms/field-types/Password/types.ts
index 3814c6392..4d267647d 100644
--- a/src/admin/components/forms/field-types/Password/types.ts
+++ b/src/admin/components/forms/field-types/Password/types.ts
@@ -9,6 +9,7 @@ export type Props = {
   required?: boolean
   validate?: Validate
   style?: React.CSSProperties
+  className?: string,
   width?: string
   label?: string
   description?: Description
diff --git a/src/admin/components/forms/field-types/Point/index.tsx b/src/admin/components/forms/field-types/Point/index.tsx
index 2bdfd8940..6985d66c8 100644
--- a/src/admin/components/forms/field-types/Point/index.tsx
+++ b/src/admin/components/forms/field-types/Point/index.tsx
@@ -21,6 +21,7 @@ const PointField: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       step,
       placeholder,
@@ -61,6 +62,7 @@ const PointField: React.FC<Props> = (props) => {
   const classes = [
     'field-type',
     baseClass,
+    className,
     showError && 'error',
     readOnly && 'read-only',
   ].filter(Boolean).join(' ');
diff --git a/src/admin/components/forms/field-types/RadioGroup/index.tsx b/src/admin/components/forms/field-types/RadioGroup/index.tsx
index 4e84db9d5..50c349fc1 100644
--- a/src/admin/components/forms/field-types/RadioGroup/index.tsx
+++ b/src/admin/components/forms/field-types/RadioGroup/index.tsx
@@ -25,6 +25,7 @@ const RadioGroup: React.FC<Props> = (props) => {
       readOnly,
       layout = 'horizontal',
       style,
+      className,
       width,
       description,
       condition,
@@ -53,6 +54,7 @@ const RadioGroup: React.FC<Props> = (props) => {
   const classes = [
     'field-type',
     baseClass,
+    className,
     `${baseClass}--layout-${layout}`,
     showError && 'error',
     readOnly && `${baseClass}--read-only`,
diff --git a/src/admin/components/forms/field-types/Relationship/index.tsx b/src/admin/components/forms/field-types/Relationship/index.tsx
index cf8dda5a6..d791d5650 100644
--- a/src/admin/components/forms/field-types/Relationship/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/index.tsx
@@ -34,6 +34,7 @@ const Relationship: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       description,
       condition,
@@ -257,6 +258,7 @@ const Relationship: React.FC<Props> = (props) => {
   const classes = [
     'field-type',
     baseClass,
+    className,
     showError && 'error',
     errorLoading && 'error-loading',
     readOnly && `${baseClass}--read-only`,
diff --git a/src/admin/components/forms/field-types/RichText/RichText.tsx b/src/admin/components/forms/field-types/RichText/RichText.tsx
index 0d01ad500..15ff3c348 100644
--- a/src/admin/components/forms/field-types/RichText/RichText.tsx
+++ b/src/admin/components/forms/field-types/RichText/RichText.tsx
@@ -52,6 +52,7 @@ const RichText: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       placeholder,
       description,
@@ -132,6 +133,7 @@ const RichText: React.FC<Props> = (props) => {
   const classes = [
     baseClass,
     'field-type',
+    className,
     showError && 'error',
     readOnly && `${baseClass}--read-only`,
   ].filter(Boolean).join(' ');
diff --git a/src/admin/components/forms/field-types/Select/Input.tsx b/src/admin/components/forms/field-types/Select/Input.tsx
index 558fe71c5..9c1fa6076 100644
--- a/src/admin/components/forms/field-types/Select/Input.tsx
+++ b/src/admin/components/forms/field-types/Select/Input.tsx
@@ -20,6 +20,7 @@ export type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'options'> &
   description?: Description
   onChange?: (value: ReactSelectValue) => void
   style?: React.CSSProperties
+  className?: string
   width?: string
   hasMany?: boolean
   options?: OptionObject[]
@@ -37,6 +38,7 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
     onChange,
     description,
     style,
+    className,
     width,
     options,
     hasMany,
@@ -45,6 +47,7 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
   const classes = [
     'field-type',
     'select',
+    className,
     showError && 'error',
     readOnly && 'read-only',
   ].filter(Boolean).join(' ');
diff --git a/src/admin/components/forms/field-types/Select/index.tsx b/src/admin/components/forms/field-types/Select/index.tsx
index c34b63d0d..e990f4baa 100644
--- a/src/admin/components/forms/field-types/Select/index.tsx
+++ b/src/admin/components/forms/field-types/Select/index.tsx
@@ -29,6 +29,7 @@ const Select: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       description,
       condition,
@@ -88,6 +89,7 @@ const Select: React.FC<Props> = (props) => {
       errorMessage={errorMessage}
       description={description}
       style={style}
+      className={className}
       width={width}
       hasMany={hasMany}
     />
diff --git a/src/admin/components/forms/field-types/Text/Input.tsx b/src/admin/components/forms/field-types/Text/Input.tsx
index 9f6c96d5e..5269436dc 100644
--- a/src/admin/components/forms/field-types/Text/Input.tsx
+++ b/src/admin/components/forms/field-types/Text/Input.tsx
@@ -19,6 +19,7 @@ export type TextInputProps = Omit<TextField, 'type'> & {
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void
   placeholder?: string
   style?: React.CSSProperties
+  className?: string
   width?: string
 }
 
@@ -35,12 +36,14 @@ const TextInput: React.FC<TextInputProps> = (props) => {
     onChange,
     description,
     style,
+    className,
     width,
   } = props;
 
   const classes = [
     'field-type',
     'text',
+    className,
     showError && 'error',
     readOnly && 'read-only',
   ].filter(Boolean).join(' ');
diff --git a/src/admin/components/forms/field-types/Text/index.tsx b/src/admin/components/forms/field-types/Text/index.tsx
index 53b3cf848..2a16f505f 100644
--- a/src/admin/components/forms/field-types/Text/index.tsx
+++ b/src/admin/components/forms/field-types/Text/index.tsx
@@ -16,6 +16,7 @@ const Text: React.FC<Props> = (props) => {
       placeholder,
       readOnly,
       style,
+      className,
       width,
       description,
       condition,
@@ -53,6 +54,7 @@ const Text: React.FC<Props> = (props) => {
       placeholder={placeholder}
       readOnly={readOnly}
       style={style}
+      className={className}
       width={width}
       description={description}
     />
diff --git a/src/admin/components/forms/field-types/Textarea/Input.tsx b/src/admin/components/forms/field-types/Textarea/Input.tsx
index 06633b5b0..9aed9d695 100644
--- a/src/admin/components/forms/field-types/Textarea/Input.tsx
+++ b/src/admin/components/forms/field-types/Textarea/Input.tsx
@@ -18,6 +18,7 @@ export type TextAreaInputProps = Omit<TextareaField, 'type'> & {
   onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
   placeholder?: string
   style?: React.CSSProperties
+  className?: string
   width?: string
   rows?: number
 }
@@ -28,6 +29,7 @@ const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
     required,
     readOnly,
     style,
+    className,
     width,
     placeholder,
     description,
@@ -42,6 +44,7 @@ const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
   const classes = [
     'field-type',
     'textarea',
+    className,
     showError && 'error',
     readOnly && 'read-only',
   ].filter(Boolean).join(' ');
diff --git a/src/admin/components/forms/field-types/Textarea/index.tsx b/src/admin/components/forms/field-types/Textarea/index.tsx
index 409c408e3..58444d3a3 100644
--- a/src/admin/components/forms/field-types/Textarea/index.tsx
+++ b/src/admin/components/forms/field-types/Textarea/index.tsx
@@ -16,6 +16,7 @@ const Textarea: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       placeholder,
       rows,
@@ -61,6 +62,7 @@ const Textarea: React.FC<Props> = (props) => {
       placeholder={placeholder}
       readOnly={readOnly}
       style={style}
+      className={className}
       width={width}
       description={description}
       rows={rows}
diff --git a/src/admin/components/forms/field-types/Upload/Input.tsx b/src/admin/components/forms/field-types/Upload/Input.tsx
index 28da9038d..1e61eaa8d 100644
--- a/src/admin/components/forms/field-types/Upload/Input.tsx
+++ b/src/admin/components/forms/field-types/Upload/Input.tsx
@@ -27,6 +27,7 @@ export type UploadInputProps = Omit<UploadField, 'type'> & {
   onChange?: (e) => void
   placeholder?: string
   style?: React.CSSProperties
+  className?: string
   width?: string
   fieldTypes?: FieldTypes
   collection?: SanitizedCollectionConfig
@@ -40,6 +41,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
     required,
     readOnly,
     style,
+    className,
     width,
     description,
     label,
@@ -65,6 +67,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
   const classes = [
     'field-type',
     baseClass,
+    className,
     showError && 'error',
     readOnly && 'read-only',
   ].filter(Boolean).join(' ');
diff --git a/src/admin/components/forms/field-types/Upload/index.tsx b/src/admin/components/forms/field-types/Upload/index.tsx
index 38f100f52..67c139b8f 100644
--- a/src/admin/components/forms/field-types/Upload/index.tsx
+++ b/src/admin/components/forms/field-types/Upload/index.tsx
@@ -24,6 +24,7 @@ const Upload: React.FC<Props> = (props) => {
     admin: {
       readOnly,
       style,
+      className,
       width,
       description,
       condition,
@@ -76,6 +77,7 @@ const Upload: React.FC<Props> = (props) => {
         errorMessage={errorMessage}
         readOnly={readOnly}
         style={style}
+        className={className}
         width={width}
         collection={collection}
         fieldTypes={fieldTypes}
diff --git a/src/fields/config/schema.ts b/src/fields/config/schema.ts
index 077300834..a655ce4d0 100644
--- a/src/fields/config/schema.ts
+++ b/src/fields/config/schema.ts
@@ -9,6 +9,7 @@ export const baseAdminFields = joi.object().keys({
   position: joi.string().valid('sidebar'),
   width: joi.string(),
   style: joi.object().unknown(),
+  className: joi.string(),
   readOnly: joi.boolean().default(false),
   hidden: joi.boolean().default(false),
   disabled: joi.boolean().default(false),
diff --git a/src/fields/config/types.ts b/src/fields/config/types.ts
index 99999de02..dc4a35afc 100644
--- a/src/fields/config/types.ts
+++ b/src/fields/config/types.ts
@@ -29,6 +29,7 @@ type Admin = {
   position?: 'sidebar';
   width?: string;
   style?: CSSProperties;
+  className?: string;
   readOnly?: boolean;
   disabled?: boolean;
   condition?: Condition;