kimpaow / sanity-color-list Goto Github PK

Unfortunately I can't get this to work when using it inside of an array (outside of an array works great).

For example:

...
{
    title: `Cover`,
    name: `cover`,
    type: `array`,
    description: `The background for the card.`,
    of: [
        {
            type: `image`,
            options: { sources: [Default, Unsplash] },
        },
        {
            type: `colors`,
            options: {
                list: [
                    { title: `Red`, value: `#f16d70` },
                    { title: `Teal`, value: `#88c6db` },
                ],
            },
        },
    ],
},
...

returns an Uncaught Error: Invalid item type: "[object Object]". Default array input can only contain objects (for now) error.

Hey, thanks for creating and sharing this plugin! :)

I have a request - in the screenshot you see that the labels for the color lists are quite big in comparison to labels at the same place in hierarchy further up on the screenshot ("Page keywords"). Would it be possible to get the labels to adjust regarding the hierarchy?

When changing the option borderradius, only the 'inner' option has any effect.

borderradius: {
    inner: "100%",
    outer: "20%", // has no effect
},

Hei again! :) I have one more feedback :) I noticed that colors can't be deselected once one of them is selected. Clicking the selected one for deselecting would be really great or perhaps a default "none" or "transparent" color.

I noticed also that clicking the selected one would cause the document to change status to draft - means even no new color got selected.

Btw. using your plugin in production - thanks a lot again for making and sharing it! :)

Hi, thanks for this plugin!

Now that Studio v.3 has been released as developer preview, do you think you'll be releasing a compatible plugin for it?

I have some colors which are very light and they get quite difficult to spot regarding which is selected. You see it in the screenshots.

I don't have really a suggestion, but perhaps keeping the circle a bit darker would help. What do you think?

Is it possible to set an initialValue?

I would like to pick a color from the color palette of an image asset.

So, I was thinking, could the color list be generated?

For example by passing a function instead of an array to the list option? I guess it should be an async function so that you could look up the asset reference and generate a color list.

Does it make sense?

Nice plugin @KimPaow !

Unknown mark type "73e86a2b7bef", please specify a serializer for it in the serializers.marks prop

How do I go about getting the type field to be set for this when its within BlockContent?

Say I have an object like:

export default {
  name: "backgroundColour",
  title: "Background Colour",
  type: "colorlist",
  options: {
    list: [
      { title: "Black", value: "#000000" },
      { title: "White", value: "#ffffff" },
    ],
  },
  initialValue: { title: "White", value: "#ffffff" },
  validation: (Rule) => Rule.required(),
}

And I use it in a different schema like so:

export default {
  title: "Page area",
  name: "pageArea",
  type: "object",
  fields: [
  // other fields
    {
      title: "Background Colour",
      name: "backgroundColour",
      type: "backgroundColour",
      initialValue: {
        title: "Black",
        value: "#000000",
      },
      validation: (Rule) => Rule.required(),
    }
  ]
};

the CMS marks the item's value as invalid when it's intialised. I think this is because it adds an additional field of _type, or at least it does when it's console.loged out.

initialValue: {
    title: "Black",
    value: "#000000",
    _type: "backgroundColour",
},

Am I setting the initialvalue incorrectly? Adding the _type doesn't seem to make a difference.

When using validation for a field with type colorlist and the validation fails there is a warning icon next to the field label in the studio. When hovering over the icon the studio crashes with the error Error: flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering.

This can be recreated by creating a new studio with for instance the blog template. Then add the example field from the readme and add validation.

{
    title: "Color List",
    description: "Pick a color",
    name: "colors",
    type: "colorlist",
    options: {
      list: [
        { title: "Red", value: "#f16d70" },
        { title: "Teal", value: "#88c6db" },
        { title: "Purple", value: "#aca0cc" },
        { title: "Green", value: "#bdcdcb" },
        { title: "White", value: "white" },
      ],
    },
    validation: (Rule) => Rule.required(),
  },

When creating a document the warning icon appears, when hovering over the icon the studio crashes.

I'm using the following versions:

@sanity/cli                   2.35.0 (up to date)
@sanity/base                  2.35.0 (up to date)
@sanity/core                  2.35.0 (up to date)
@sanity/default-layout        2.35.0 (up to date)
@sanity/default-login         2.35.0 (up to date)
@sanity/desk-tool             2.35.1 (up to date)
@sanity/eslint-config-studio   2.0.1 (up to date)
@sanity/vision                2.35.0 (up to date)

Node and npm

v16.17.0
8.19.2

Hi

Great and clean plugin. It would be useful for me to return the title field in the query so it can be used for CSS classes like bg-${color.title}.

Hi :) ,
I noticed that I cannot validate the color-list :/
Is there anyway that you can help me?

{
        name: 'color',
        title: 'Color',
        type: 'colors', 
        validation: Rule => Rule.required(),
        options: {
          list: [
            { title: 'Blue', value: '#00b8ff' },
            { title: 'Yellow', value: '#ffe700' },
          ],
        },
      },

It would be nice if displaying both the name and the value was selectable through the options