tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Added className property to admin, in addition to the existing style property. Also documented both properties.

Browse Source
This commit is contained in:
Oran Epelbaum
2022-01-05 21:24:11 +02:00
parent 65b0ad7f08
commit 50dd65ef92
23 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/fields/overview.mdx
View File

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

2
src/admin/components/forms/field-types/Checkbox/index.tsx
View File

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

2
src/admin/components/forms/field-types/Code/Code.tsx
View File

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

2
src/admin/components/forms/field-types/DateTime/index.tsx
View File

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

2
src/admin/components/forms/field-types/Email/index.tsx
View File

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

2
src/admin/components/forms/field-types/Group/index.tsx
View File

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

2
src/admin/components/forms/field-types/Number/index.tsx
View File

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

2
src/admin/components/forms/field-types/Password/index.tsx
View File

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

1
src/admin/components/forms/field-types/Password/types.ts
View File

@@ -9,6 +9,7 @@ export type Props = {
required?: boolean
validate?: Validate
style?: React.CSSProperties
className?: string,
width?: string
label?: string
description?: Description

2
src/admin/components/forms/field-types/Point/index.tsx
View File

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

2
src/admin/components/forms/field-types/RadioGroup/index.tsx
View File

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

2
src/admin/components/forms/field-types/Relationship/index.tsx
View File

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

2
src/admin/components/forms/field-types/RichText/RichText.tsx
View File

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

3
src/admin/components/forms/field-types/Select/Input.tsx
View File

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

2
src/admin/components/forms/field-types/Select/index.tsx
View File

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

3
src/admin/components/forms/field-types/Text/Input.tsx
View File

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

2
src/admin/components/forms/field-types/Text/index.tsx
View File

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

3
src/admin/components/forms/field-types/Textarea/Input.tsx
View File

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

2
src/admin/components/forms/field-types/Textarea/index.tsx
View File

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

3
src/admin/components/forms/field-types/Upload/Input.tsx
View File

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

2
src/admin/components/forms/field-types/Upload/index.tsx
View File

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

1
src/fields/config/schema.ts
View File

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

1
src/fields/config/types.ts
View File

@@ -29,6 +29,7 @@ type Admin = {
position?: 'sidebar';
width?: string;
style?: CSSProperties;
className?: string;
readOnly?: boolean;
disabled?: boolean;
condition?: Condition;