Merge pull request #415 from oranoran/admin-classname

Added "className" property to admin + documented existing "style" property

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. |

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(' ')}

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(' ');

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(' ');

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(' ');

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={{

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(' ');

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(' ');
 

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

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(' ');

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`,

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`,

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(' ');

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(' ');

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}
     />

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(' ');

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}
     />

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(' ');

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}

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(' ');

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}

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),

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;