![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
storybook-color-picker
Advanced tools
Changelog
v2.3.0
09.01.2022.
Changed
Added default palettes.
colorPalettes
parameter replaced with colorPicker
.
default
and defaultColorPalette
parameters replaced with primaryPalette
.
Changed width of color group name for better display of long names.
Deprecation
colorPalettes
parameter name is deprecated.
colorPicker
instead.default
parameter name in preview.js
parameters is deprecated.
primaryPalette
instead.defaultColorPalette
parameter name in component and story parameters is deprecated. Use primaryPalette
instead.
primaryPalette
instead.Readme
A Storybook addon. It allows you to quickly find any color from your custom color palette and set it on component's controls and/or copy to clipboard.
Add one or multiple color palettes and set the primary palette globaly, for component or single story.
Created with TypeScript, React and Storybook.
To migrate from v1 to v2 adjust parameters
in preview.js
to match the pattern shown in Add palettes in usage section below.
$ npm i storybook-color-picker
In your .storybook
folder find main.js
file and add this addon like below.
module.exports = {
...
"addons": [
...
"storybook-color-picker"
]
};
This will add color picker and palettes everywhere in your storybook.
In your .storybook
folder find preview.js
file and add your color palette to parameters like below.
Scroll down to find out how your color palette must look like.
import yourFirstColorPalette from './yourFirstColorPalette.json';
import yourSecondColorPalette from './yourSecondColorPalette.json';
export const parameters = {
...
colorPicker: {
primaryPalette: 'Your first palette name', // Name of primary palette for all components and its stories. Optional (fallback to first palette from the palettes array).
palettes: [
{
name: 'Your first palette name', // string
palette: yourFirstColorPalette, // Palette as an Object or an Array. See bellow.
},
{
name: 'Your second palette name',
palette: yourSecondColorPalette,
},
]
}
};
This will add color picker and palettes to all component's stories.
In MyComponent.stories.js
add:
export default {
...
parameters: {
...
colorPicker: {
primaryPalette: 'Your first palette name',
palettes: [
{
name: 'Your first palette name',
palette: yourFirstColorPalette,
},
{
name: 'Your second palette name',
palette: yourSecondColorPalette,
},
]
}
}
};
This will add color picker and palettes to specific story.
In MyComponent.stories.js
add:
export const Primary = Template.bind({});
Primary.parameters = {
...
colorPicker: {
palettes: [
{
name: 'Your first palette name',
palette: yourFirstColorPalette,
},
]
}
}
Before v2.3.0 colorPicker
parameter was called colorPalettes
.
Before v2.3.0 primaryPalette
parameter was called default
.
Both are still supported but will be removed in next major release.
type ColorPaletteAsObject = Record<string, Record<string, string> | string>;
Example:
{
"white": "#fff", // valid hex, rgb, rgba, hsl, hsla
"black": "#000",
"light": {
" 500": "#aaa",
" 100": "rgba(238, 238, 238, .8)",
" 200": "rgb(238, 238, 238)",
" 300": "hsla(0, 0%, 73%, .8)",
" 400": "hsl(0, 0%, 73%)"
},
"dark": {
"0100": "#888",
"0500": "#000",
"0400": "#222",
"0200": "#666",
"0300": "#444"
}
}
Usefull tip: add white spaces or zeros before numerical keys to prevent auto sorting
type ColorPaletteAsArray = {
label: string,
values: [
{
label: string,
value: string,
}
],
};
Example:
[
{
"label": "light",
"values": [
{
"label": "100",
"value": "#fff"
},
{
"label": "200",
"value": "#aaa"
}
]
},
{
"label": "dark",
"values": [
{
"label": "100",
"value": "#222"
},
{
"label": "200",
"value": "#000000"
}
]
}
]
This will apply for all component's stories.
In MyComponent.stories.js
add:
export default {
...
parameters: {
colorPicker: {
primaryPalette: 'Your second palette name',
}
}
};
This will apply for specific story.
In MyComponent.stories.js
add:
export const Primary = Template.bind({});
Primary.parameters = {
...
colorPicker: {
primaryPalette: 'Your first palette name',
}
}
The following list increases by specificity.
primaryPalette
set on parameters in preview.js
primaryPalette
set on component parameters
primaryPalette
set on story MyComponent.parameters
Before v2.3.0 colorPicker
parameter was called colorPalettes
.
Before v2.3.0 primaryPalette
parameter was called defaultColorPalette
.
It is still supported but will be removed in next major release.
All controls with type of "color" will be detected automatically. You can add extra controls to whitch color may be applied. Only controls of type "text" may be added as extra.
Add list of extra controls to all component's stories.
In MyComponent.stories.js
add:
export default {
...
argTypes: {
backgroundColor: { control: 'color' }, // Color controls will be detected automatically
label: { control: 'text' }, // Text controls may be added as extra
text: { control: 'text' }, // Text controls may be added as extra
},
parameters: {
...
colorPicker: {
applyColorTo: ['label'] // Must match argType key
}
}
};
Add list of extra controls to selected story to overwrite list added to component globaly as in example above.
In MyComponent.stories.js
add:
export const Primary = Template.bind({});
Primary.parameters = {
...
colorPicker: {
applyColorTo: ['text'], // Pass empty array to clear extra controls
}
};
Before v2.3.0 colorPicker
parameter was called colorPalettes
.
It is still supported but will be removed in next major release.
Added in v2.3.0
To disable default palettes just add disableDefaultPalettes: true
to global, component or story parameters.
FAQs
Choose a color from custom color palette and set it on component's control and/or copy it to clipboard.
The npm package storybook-color-picker receives a total of 1,771 weekly downloads. As such, storybook-color-picker popularity was classified as popular.
We found that storybook-color-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.