kimpaow / sanity-color-list Goto Github PK
View Code? Open in Web Editor NEWSanity plugin that allows you to select a specific color from an array of colors.
License: MIT License
Sanity plugin that allows you to select a specific color from an array of colors.
License: MIT License
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
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 !
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?
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?
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}.
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.log
ed out.
initialValue: {
title: "Black",
value: "#000000",
_type: "backgroundColour",
},
Am I setting the initialvalue incorrectly? Adding the _type
doesn't seem to make a difference.
It would be nice if displaying both the name and the value was selectable through the options
Is it possible to set an initialValue?
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' },
],
},
},
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.
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?
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! :)
When changing the option borderradius
, only the 'inner' option has any effect.
borderradius: {
inner: "100%",
outer: "20%", // has no effect
},
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.