Enhance ColorPickerWidget

[sneridagh]

Now it accepts also colors definitions like:

type Color =
  | {
      label: string;
      style: Record<`--${string}`, string> & { name: string };
    }
  | {
      name: string;
      label: string;
    };

const colors: Color[] = [
  { style: { name: 'red', '--background-color': 'red' }, label: 'red' },
  {
    style: { name: 'yellow', '--background-color': 'yellow' },
    label: 'yellow',
  },
  { name: 'green', label: 'green' },
]

So now it supports to save an object containing a list of custom CSS properties definitions.

See documentation for more background.

[netlify]

✅ Deploy Preview for volto canceled.

Name	Link
🔨 Latest commit	86bad73
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/659673c1887d8200088869ee

[netlify]

✅ Deploy Preview for plone-components ready!

Name	Link
🔨 Latest commit	86bad73
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/659673c19a296b00087515d2
😎 Deploy Preview	https://deploy-preview-5585--plone-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stevepiercy]

In this comment is the link for the Deploy Preview correct?

https://deploy-preview-5585--plone-components.netlify.app/

I expected to see something like this:

https://6.docs.plone.org/storybook/?path=/story/edit-widgets-colorpicker--default

If it is not correct, then is this a configuration item in GitHub Workflows or Netlify?

[stevepiercy]

Mostly grammar and MyST syntax fixes, but added some structure and some questions.

[sneridagh]

In this comment is the link for the Deploy Preview correct?

https://deploy-preview-5585--plone-components.netlify.app/

I expected to see something like this:

https://6.docs.plone.org/storybook/?path=/story/edit-widgets-colorpicker--default

If it is not correct, then is this a configuration item in GitHub Workflows or Netlify?

No, it's not correct. Good catch. I configured the @plone/components package in the monorepo to have also a build. Github should be confusing both. I guess it has to do with the monorepo setup in Netlify. I will take a look.

[sneridagh]

@stevepiercy the emphasize-lines does not work :( Something we can do?

[stevepiercy]

@sneridagh I will poke around inside Netlify and GitHub actions and Makefile. There must be something in there that triggers it.

[stevepiercy]

@sneridagh needs a change log entry.

[stevepiercy]

@sneridagh also unit tests fail in CI.

[stevepiercy]

@sneridagh I found it. There is another site in Netlify, https://app.netlify.com/sites/plone-components/overview, that gets built on every pull request in Volto. I think we want it to build only when something in its package builds, not within the entire volto repo, correct?

[sneridagh]

@stevepiercy I will take a look at the unit tests I still want to polish the code a bit.

[sneridagh]

@stevepiercy is there a way to filter when to build it?

[stevepiercy]

@stevepiercy is there a way to filter when to build it?

Yup, similar to what we do for Volto docs, we can do a diff. Let's do this in a separate PR, because I don't want this one to become a victim of feature creep. I also want to add the Storybook build for docs to be reachable at volto-docs-preview-url/storybook so we can begin to use arbitrary relative links to it. I'll do both in a separate PR.

[davisagli]

I think we could just use the index in colors here and avoid requiring name. It seems unlikely that they will be reordered frequently.

[sneridagh]

@davisagli so you'd change the style use case branch? as in:

type Color =
  | {
      name: undefined;
      label: string;
      style: Record<`--${string}`, string>;
    }
  | {
      name: string;
      label: string;
      style: undefined;
    };

[davisagli]

@sneridagh yeah, that's the suggestion, but I don't feel strongly about it

[sneridagh]

@davisagli I don't know, I feel the way it is now is more consistent, when we deal with choices, we always have a "display name" (label) and a "token" (value). The token is invariable, but the display name could be i18n'd. If at some point you need to identify the color entry, you will have to equal the style property (which you could still do...) Answering myself while writing :)

Anyways, I don't have a strong opinion either at this point.

/cc @tiberiuichim @ichim-david @giuliaghisini @pnicolli any opinions about this?

[stevepiercy]

Looking good: https://deploy-preview-5585--volto.netlify.app/recipes/color-picker-widget.html

Just a minor suggestion to the news item, and it's GTG.