Allow to deselect color in ColorPickerWidget.

[ksuess]

fix #4838

Would be nice to be able to de-select a color in a general color picker widget.

[netlify]

✅ Deploy Preview for volto canceled.

Name	Link
🔨 Latest commit	9e3006e
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/6489f80bf972af0008a1908a

[ksuess]

I think this is the right approach, would you check please, @tiberiuichim, @sneridagh, thanks.

[cypress]

Passing run #5383 ↗︎

0

493

20

0

0

Details:

Merge branch 'master' into allow-deselect-color-in-ColorPickerWidget
Project: Volto	Commit: a3ec5c148e
Status: Passed	Duration: 14:28 💡
Started: Jun 1, 2023 5:07 PM	Ended: Jun 1, 2023 5:22 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[sneridagh]

@ksuess Did you try how does this behave when you have a color by default set? I would do that under a prop, since could be that you really want to have one by default, and do not allow to remove it.

[ksuess]

@ksuess Did you try how does this behave when you have a color by default set? I would do that under a prop, since could be that you really want to have one by default, and do not allow to remove it.

Respect missing_value of ColorPickerWidget on de-select

[ksuess]

Please backport to Volto 16.

[ksuess]

@ksuess Did you try how does this behave when you have a color by default set? I would do that under a prop, since could be that you really want to have one by default, and do not allow to remove it.

Respect missing_value of ColorPickerWidget on de-select

ping @sneridagh

[sneridagh]

@ksuess this is not what I meant... I still didn't have time to check it. Where the missing_value comes from? The question is:
Does this still work?

  const defaultBGColor = '#ddd';

  schema.properties.styles.schema.properties.backgroundColor = {
    widget: 'color_picker',
    title: intl.formatMessage(messages.backgroundColor),
    colors,
    default: defaultBGColor,
  };

[sneridagh]

@ksuess I tested it out and the defaults work as expected. Nevertheless, what is for missing_value?
Could you please add a PR to backport it to 16?

[ksuess]

@ksuess I tested it out and the defaults work as expected. Nevertheless, what is for missing_value?

With just default, the color value is default on deselect. Only with both default and missing_value it's possible to have a default on creating a new block, and having a fallback color value different from default value on de-select.

  const addMyCustomBlockColorStyling = ({ schema, intl }) => {
    addStyling({ schema, intl });

    schema.properties.styles.schema = {
      fieldsets: [
        {
          id: 'default',
          title: 'Default',
          fields: ['Background'],
        },
      ],
      properties: {
        Background: {
          title: 'Stil',
          widget: 'color_picker',
          default: 'blueBox',
          missing_value: 'grayBox',
          colors: [
            { name: 'greenBox', label: 'Ausserdem' },
            { name: 'blueBox', label: 'Bemerkung' },
            { name: 'grayBox', label: 'Wichtig' },
            { name: 'orangeBox', label: 'Achtung' },
          ],
        },
      },
      required: [],
    };

    return schema;
  };