Skip to content

Using {admin: width} won't render color swatch for color picker #2

@puzzlesremixed

Description

@puzzlesremixed

Previously thanks for creating these fields!
I was playing around with the color picker field and i happens to have two of it on a single row. Thinking it would've been a better UI to have them placed side-by-side, i added overide the admin options to have the width of 50%.

{
  type: 'row',
  fields:
  [
    colorField({
      name: 'startColor',
      required: true,
      overrides: (field) => ({
        ...field,
        defaultValue: '#1e3a8a',
        admin: { width: '50%' },
      }),
    }),
    colorField({
      name: 'endColor',
      required: true,
      overrides: (field) => ({
        ...field,
        defaultValue: '#172554',
        admin: { width: '50%' },
      }),
    }),
  ],
}

With that config, the rendered field on the Payload looks like this :
Image
As it turns out, the Color Cell (little box where it displays the selected color and give you the option to pick custom color) didnt get rendered when using the width admin options.

Removing admin width options fixed the issue, although now the fields doesnt have specific width.
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions