mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Backports the following commits to 7.x: - [canvas] Color fixes + Storybook 5 (#34075)
This commit is contained in:
Clint Andrew Hall
GitHub
parent
bf0953bbab
commit
d4a845428f
39 changed files with 3368 additions and 1451 deletions
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
**/__snapshots__/** linguist-generated=true
|
||||
|
|
@ -30,13 +30,14 @@
|
|||
"@kbn/expect": "1.0.0",
|
||||
"@kbn/plugin-helpers": "9.0.2",
|
||||
"@kbn/test": "1.0.0",
|
||||
"@storybook/addon-actions": "^4.1.7",
|
||||
"@storybook/addon-actions": "^5.0.5",
|
||||
"@storybook/addon-console": "^1.1.0",
|
||||
"@storybook/addon-info": "^4.0.7",
|
||||
"@storybook/addon-knobs": "^4.0.7",
|
||||
"@storybook/addon-options": "^4.1.7",
|
||||
"@storybook/addon-storyshots": "^4.1.7",
|
||||
"@storybook/react": "^4.0.7",
|
||||
"@storybook/addon-info": "^5.0.5",
|
||||
"@storybook/addon-knobs": "^5.0.5",
|
||||
"@storybook/addon-options": "^5.0.5",
|
||||
"@storybook/addon-storyshots": "^5.0.5",
|
||||
"@storybook/react": "^5.0.5",
|
||||
"@storybook/theming": "^5.0.5",
|
||||
"@types/angular": "1.6.50",
|
||||
"@types/cheerio": "^0.22.10",
|
||||
"@types/chroma-js": "^1.4.1",
|
||||
|
|
@ -65,9 +66,10 @@
|
|||
"@types/recompose": "^0.30.2",
|
||||
"@types/reduce-reducers": "^0.1.3",
|
||||
"@types/sinon": "^5.0.1",
|
||||
"@types/storybook__addon-actions": "^3.4.1",
|
||||
"@types/storybook__addon-info": "^3.4.2",
|
||||
"@types/storybook__react": "^4.0.0",
|
||||
"@types/storybook__addon-actions": "^3.4.2",
|
||||
"@types/storybook__addon-info": "^4.1.1",
|
||||
"@types/storybook__addon-knobs": "^4.0.4",
|
||||
"@types/storybook__react": "^4.0.1",
|
||||
"@types/supertest": "^2.0.5",
|
||||
"@types/tinycolor2": "^1.4.1",
|
||||
"@types/uuid": "^3.4.4",
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { configure, addDecorator } from '@storybook/react';
|
||||
import { configure, addDecorator, addParameters } from '@storybook/react';
|
||||
import { withKnobs } from '@storybook/addon-knobs/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
import { withOptions } from '@storybook/addon-options';
|
||||
import { create } from '@storybook/theming';
|
||||
|
||||
// Import dependent CSS
|
||||
require('@elastic/eui/dist/eui_theme_light.css');
|
||||
|
|
@ -21,16 +21,16 @@ if (process.env.NODE_ENV === 'test') {
|
|||
} else {
|
||||
// Customize the info for each story.
|
||||
addDecorator(
|
||||
withInfo({
|
||||
withInfo({
|
||||
inline: true,
|
||||
styles: {
|
||||
infoBody: {
|
||||
margin: 20
|
||||
margin: 20,
|
||||
},
|
||||
infoStory: {
|
||||
margin: '40px 60px'
|
||||
}
|
||||
}
|
||||
margin: '40px 60px',
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
|
|
@ -44,7 +44,11 @@ function loadStories() {
|
|||
css.keys().forEach(filename => css(filename));
|
||||
|
||||
// Include the legacy styles
|
||||
const uiStyles = require.context('../../../../src/legacy/ui/public/styles', false, /[\/\\](?!mixins|variables|_|\.|bootstrap_(light|dark))[^\/\\]+\.less/);
|
||||
const uiStyles = require.context(
|
||||
'../../../../src/legacy/ui/public/styles',
|
||||
false,
|
||||
/[\/\\](?!mixins|variables|_|\.|bootstrap_(light|dark))[^\/\\]+\.less/
|
||||
);
|
||||
uiStyles.keys().forEach(key => uiStyles(key));
|
||||
|
||||
// Find all files ending in *.examples.ts
|
||||
|
|
@ -53,13 +57,18 @@ function loadStories() {
|
|||
}
|
||||
|
||||
// Set up the Storybook environment with custom settings.
|
||||
addDecorator(
|
||||
withOptions({
|
||||
goFullScreen: false,
|
||||
name: 'Canvas Storybook',
|
||||
showAddonsPanel: true,
|
||||
url: 'https://github.com/elastic/kibana/tree/master/x-pack/plugins/canvas'
|
||||
})
|
||||
);
|
||||
addParameters({
|
||||
options: {
|
||||
theme: create({
|
||||
base: 'light',
|
||||
brandTitle: 'Canvas Storybook',
|
||||
brandUrl: 'https://github.com/elastic/kibana/tree/master/x-pack/plugins/canvas',
|
||||
}),
|
||||
showPanel: true,
|
||||
isFullscreen: false,
|
||||
panelPosition: 'bottom',
|
||||
isToolshown: true,
|
||||
},
|
||||
});
|
||||
|
||||
configure(loadStories, module);
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ const path = require('path');
|
|||
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
|
||||
|
||||
// Extend the Storybook Webpack config with some customizations;
|
||||
module.exports = (_baseConfig, _env, config) => {
|
||||
module.exports = async ({ config, _mode }) => {
|
||||
// Include the React preset for Storybook JS files.
|
||||
config.module.rules.push({
|
||||
test: /\.js$/,
|
||||
include: /\.storybook/,
|
||||
exclude: /node_modules/,
|
||||
loaders: 'babel-loader',
|
||||
options: {
|
||||
presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export const progress = () => ({
|
|||
{
|
||||
name: 'valueColor',
|
||||
displayName: 'Progress color',
|
||||
help: 'Color of the progress bar',
|
||||
help: 'Accepts HEX, RGB or HTML Color names',
|
||||
argType: 'color',
|
||||
default: `#1785b0`,
|
||||
},
|
||||
|
|
@ -50,7 +50,7 @@ export const progress = () => ({
|
|||
{
|
||||
name: 'barColor',
|
||||
displayName: 'Background color',
|
||||
help: 'Color of the background bar',
|
||||
help: 'Accepts HEX, RGB or HTML Color names',
|
||||
argType: 'color',
|
||||
default: `#f0f0f0`,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ export const shape = () => ({
|
|||
name: 'fill',
|
||||
displayName: 'Fill',
|
||||
argType: 'color',
|
||||
help: 'Fill color of the shape',
|
||||
help: 'Accepts HEX, RGB or HTML Color names',
|
||||
},
|
||||
{
|
||||
name: 'border',
|
||||
displayName: 'Border',
|
||||
argType: 'color',
|
||||
help: 'Border color',
|
||||
help: 'Accepts HEX, RGB or HTML Color names',
|
||||
},
|
||||
{
|
||||
name: 'borderWidth',
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "white",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -42,7 +42,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgba(100, 150, 250, 0.5)",
|
||||
"background": "rgba(100, 150, 250, .5)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -57,7 +57,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -77,7 +77,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#FFF",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -111,7 +111,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -145,7 +145,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgba(100, 150, 250, 0.5)",
|
||||
"background": "rgba(100, 150, 250, .5)",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -179,7 +179,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -206,4 +206,40 @@ Array [
|
|||
]
|
||||
`;
|
||||
|
||||
exports[`Storyshots components/ColorDot invalid dots 1`] = `null`;
|
||||
exports[`Storyshots components/ColorDot invalid dots 1`] = `
|
||||
Array [
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>,
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>,
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -5,26 +5,28 @@
|
|||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { ReactNode, SFC } from 'react';
|
||||
import React, { FunctionComponent, ReactNode } from 'react';
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
export interface Props {
|
||||
/** Any valid CSS color. If not a valid CSS string, the dot will not render */
|
||||
value: string;
|
||||
/** Any valid CSS color. If not a valid CSS string, the dot will be transparent and checkered */
|
||||
value?: string;
|
||||
/** Nodes to display within the dot. Should fit within the constraints. */
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export const ColorDot: SFC<Props> = ({ value, children }) => {
|
||||
export const ColorDot: FunctionComponent<Props> = ({ value, children }) => {
|
||||
const tc = tinycolor(value);
|
||||
if (!tc.isValid()) {
|
||||
return null;
|
||||
let style = {};
|
||||
|
||||
if (tc.isValid()) {
|
||||
style = { background: value };
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="canvasColorDot">
|
||||
<div className="canvasColorDot__background canvasCheckered" />
|
||||
<div className="canvasColorDot__foreground" style={{ background: tc.toRgbString() }}>
|
||||
<div className="canvasColorDot__foreground" style={style}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,4 +8,5 @@ import { pure } from 'recompose';
|
|||
|
||||
import { ColorDot as Component } from './color_dot';
|
||||
|
||||
export { Props } from './color_dot';
|
||||
export const ColorDot = pure(Component);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -41,63 +41,13 @@ Array [
|
|||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="#abcdef"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<button
|
||||
aria-label="Add Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Remove Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882zM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
|
|
@ -115,7 +65,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(170, 187, 204)",
|
||||
"background": "#abc",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -138,13 +88,108 @@ Array [
|
|||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="#abc"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgba(50, 100, 150, .5)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem"
|
||||
style={
|
||||
Object {
|
||||
"display": "inline-block",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="euiFormControlLayout"
|
||||
>
|
||||
<div
|
||||
className="euiFormControlLayout__childrenWrapper"
|
||||
>
|
||||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="rgba(50, 100, 150, .5)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Storyshots components/ColorManager interactive 1`] = `
|
||||
<div>
|
||||
<div
|
||||
className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem"
|
||||
style={
|
||||
Object {
|
||||
"display": "inline-block",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="euiFormControlLayout"
|
||||
>
|
||||
<div
|
||||
className="euiFormControlLayout__childrenWrapper"
|
||||
>
|
||||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
|
|
@ -195,107 +240,27 @@ Array [
|
|||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Storyshots components/ColorManager interactive 1`] = `
|
||||
<div
|
||||
className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgba(255, 255, 255, 0)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem"
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"display": "inline-block",
|
||||
"marginTop": 20,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="euiFormControlLayout"
|
||||
>
|
||||
<div
|
||||
className="euiFormControlLayout__childrenWrapper"
|
||||
>
|
||||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<button
|
||||
aria-label="Add Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Remove Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882zM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<label>
|
||||
<input
|
||||
aria-checked={true}
|
||||
checked={true}
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
|
||||
<span>
|
||||
Show Buttons?
|
||||
</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -315,11 +280,7 @@ Array [
|
|||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgba(255, 255, 255, 0)",
|
||||
}
|
||||
}
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -340,63 +301,13 @@ Array [
|
|||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="#abcd"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<button
|
||||
aria-label="Add Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Remove Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882zM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
|
|
@ -412,11 +323,7 @@ Array [
|
|||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgba(255, 255, 255, 0)",
|
||||
}
|
||||
}
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -437,63 +344,13 @@ Array [
|
|||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="#canvas"
|
||||
value="canvas"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<button
|
||||
aria-label="Add Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Remove Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882zM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
|
@ -516,7 +373,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -539,7 +396,7 @@ Array [
|
|||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="#abcdef"
|
||||
/>
|
||||
|
|
@ -613,7 +470,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -636,7 +493,7 @@ Array [
|
|||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="#abcdef"
|
||||
/>
|
||||
|
|
@ -710,7 +567,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -733,7 +590,7 @@ Array [
|
|||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="#abcdef"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,19 +9,36 @@ import { storiesOf } from '@storybook/react';
|
|||
import React from 'react';
|
||||
import { ColorManager } from '../color_manager';
|
||||
|
||||
class Interactive extends React.Component<{}, { value: string }> {
|
||||
class Interactive extends React.Component<{}, { hasButtons: boolean; value: string }> {
|
||||
public state = {
|
||||
hasButtons: true,
|
||||
value: '',
|
||||
};
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<ColorManager
|
||||
onAddColor={action('onAddColor')}
|
||||
onRemoveColor={action('onRemoveColor')}
|
||||
onChange={value => this.setState({ value })}
|
||||
value={this.state.value}
|
||||
/>
|
||||
<div>
|
||||
<ColorManager
|
||||
hasButtons={this.state.hasButtons}
|
||||
onAddColor={action('onAddColor')}
|
||||
onRemoveColor={action('onRemoveColor')}
|
||||
onChange={value => this.setState({ value })}
|
||||
value={this.state.value}
|
||||
/>
|
||||
<p style={{ marginTop: 20 }}>
|
||||
<label>
|
||||
{/* tslint:disable-next-line:react-a11y-input-elements*/}
|
||||
<input
|
||||
aria-checked={this.state.hasButtons}
|
||||
type="checkbox"
|
||||
checked={this.state.hasButtons}
|
||||
onChange={() => this.setState({ hasButtons: !this.state.hasButtons })}
|
||||
/>
|
||||
{' '}
|
||||
<span>Show Buttons?</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -44,6 +61,7 @@ storiesOf('components/ColorManager', module)
|
|||
.add('default', () => [
|
||||
<ColorManager key="1" onChange={action('onChange')} value="#abcdef" />,
|
||||
<ColorManager key="2" onChange={action('onChange')} value="#abc" />,
|
||||
<ColorManager key="3" onChange={action('onChange')} value="rgba(50, 100, 150, .5)" />,
|
||||
])
|
||||
.add('invalid colors', () => [
|
||||
<ColorManager key="1" onChange={action('onChange')} value="#abcd" />,
|
||||
|
|
@ -51,18 +69,21 @@ storiesOf('components/ColorManager', module)
|
|||
])
|
||||
.add('with buttons', () => [
|
||||
<ColorManager
|
||||
hasButtons={true}
|
||||
key="1"
|
||||
onAddColor={action('onAddColor')}
|
||||
onChange={action('onChange')}
|
||||
value="#abcdef"
|
||||
/>,
|
||||
<ColorManager
|
||||
hasButtons={true}
|
||||
key="2"
|
||||
onChange={action('onChange')}
|
||||
onRemoveColor={action('onRemoveColor')}
|
||||
value="#abcdef"
|
||||
/>,
|
||||
<ColorManager
|
||||
hasButtons={true}
|
||||
key="3"
|
||||
onAddColor={action('onAddColor')}
|
||||
onChange={action('onChange')}
|
||||
|
|
|
|||
|
|
@ -6,74 +6,81 @@
|
|||
|
||||
import { EuiButtonIcon, EuiFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { SFC } from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { ColorDot } from '../color_dot/color_dot';
|
||||
|
||||
export interface Props {
|
||||
/** The function to call when the Add Color button is clicked. The button will not appear if there is no handler. */
|
||||
/** The function to call when the Add Color button is clicked. The button will be disabled if there is no handler. */
|
||||
onAddColor?: (value: string) => void;
|
||||
/** The function to call when the value is changed */
|
||||
onChange: (value: string) => void;
|
||||
/** The function to call when the Remove Color button is clicked. The button will not appear if there is no handler. */
|
||||
/** The function to call when the Remove Color button is clicked. The button will be disabled if there is no handler. */
|
||||
onRemoveColor?: (value: string) => void;
|
||||
/**
|
||||
* The value of the color manager. Only honors hexadecimal values.
|
||||
* Determines if the add/remove buttons are displayed.
|
||||
* @default false
|
||||
*/
|
||||
hasButtons?: boolean;
|
||||
/**
|
||||
* The value of the color manager. Only honors valid CSS values.
|
||||
* @default ''
|
||||
*/
|
||||
value?: string;
|
||||
}
|
||||
|
||||
export const ColorManager: SFC<Props> = ({ value = '', onAddColor, onRemoveColor, onChange }) => {
|
||||
export const ColorManager: FunctionComponent<Props> = ({
|
||||
value = '',
|
||||
onAddColor,
|
||||
onRemoveColor,
|
||||
onChange,
|
||||
hasButtons = false,
|
||||
}) => {
|
||||
const tc = tinycolor(value);
|
||||
const validColor = tc.isValid() && tc.getFormat() === 'hex';
|
||||
const validColor = tc.isValid();
|
||||
|
||||
if (value.length > 0 && !value.startsWith('#')) {
|
||||
value = '#' + value;
|
||||
let buttons = null;
|
||||
|
||||
if (hasButtons) {
|
||||
buttons = (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonIcon
|
||||
aria-label="Add Color"
|
||||
iconType="plusInCircle"
|
||||
isDisabled={!validColor || !onAddColor}
|
||||
onClick={() => onAddColor && onAddColor(value)}
|
||||
/>
|
||||
<EuiButtonIcon
|
||||
aria-label="Remove Color"
|
||||
iconType="minusInCircle"
|
||||
isDisabled={!validColor || !onRemoveColor}
|
||||
onClick={() => onRemoveColor && onRemoveColor(value)}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
}
|
||||
|
||||
const add = (
|
||||
<EuiButtonIcon
|
||||
aria-label="Add Color"
|
||||
iconType="plusInCircle"
|
||||
isDisabled={!validColor || !onAddColor}
|
||||
onClick={() => onAddColor && onAddColor(value)}
|
||||
/>
|
||||
);
|
||||
|
||||
const remove = (
|
||||
<EuiButtonIcon
|
||||
aria-label="Remove Color"
|
||||
iconType="minusInCircle"
|
||||
isDisabled={!validColor || !onRemoveColor}
|
||||
onClick={() => onRemoveColor && onRemoveColor(value)}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<EuiFlexGroup gutterSize="xs" alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
<ColorDot value={validColor ? value : 'rgba(255,255,255,0)'} />
|
||||
<ColorDot value={validColor ? value : undefined} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem style={{ display: 'inline-block' }}>
|
||||
{/* While the label indicates only hex values are honored, it can accept CSS values. */}
|
||||
<EuiFieldText
|
||||
value={value}
|
||||
isInvalid={!validColor && value.length > 0}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
onChange={e => onChange(e.target.value)}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
{(add || remove) && (
|
||||
<EuiFlexItem grow={false}>
|
||||
{add}
|
||||
{remove}
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
{buttons}
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
};
|
||||
|
||||
ColorManager.propTypes = {
|
||||
hasButtons: PropTypes.bool,
|
||||
onAddColor: PropTypes.func,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onRemoveColor: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -8,4 +8,5 @@ import { pure } from 'recompose';
|
|||
|
||||
import { ColorManager as Component } from './color_manager';
|
||||
|
||||
export { Props } from './color_manager';
|
||||
export const ColorManager = pure(Component);
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ exports[`Storyshots components/ColorPalette interactive 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -53,7 +53,7 @@ exports[`Storyshots components/ColorPalette interactive 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -79,7 +79,7 @@ exports[`Storyshots components/ColorPalette interactive 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -105,7 +105,7 @@ exports[`Storyshots components/ColorPalette interactive 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(170, 187, 204)",
|
||||
"background": "#abc",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -131,7 +131,7 @@ exports[`Storyshots components/ColorPalette interactive 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(221, 238, 255)",
|
||||
"background": "#def",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -157,7 +157,7 @@ exports[`Storyshots components/ColorPalette interactive 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -195,7 +195,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -221,7 +221,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -247,7 +247,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -273,7 +273,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(170, 187, 204)",
|
||||
"background": "#abc",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -299,7 +299,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(221, 238, 255)",
|
||||
"background": "#def",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -325,7 +325,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -359,7 +359,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -404,7 +404,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -430,7 +430,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -456,7 +456,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(170, 187, 204)",
|
||||
"background": "#abc",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -482,7 +482,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(221, 238, 255)",
|
||||
"background": "#def",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -508,7 +508,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -546,7 +546,7 @@ exports[`Storyshots components/ColorPalette six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -572,7 +572,7 @@ exports[`Storyshots components/ColorPalette six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -598,7 +598,7 @@ exports[`Storyshots components/ColorPalette six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -624,7 +624,7 @@ exports[`Storyshots components/ColorPalette six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(170, 187, 204)",
|
||||
"background": "#abc",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -650,7 +650,7 @@ exports[`Storyshots components/ColorPalette six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(221, 238, 255)",
|
||||
"background": "#def",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -676,7 +676,7 @@ exports[`Storyshots components/ColorPalette six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -713,7 +713,7 @@ exports[`Storyshots components/ColorPalette six colors, wrap at 4 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -758,7 +758,7 @@ exports[`Storyshots components/ColorPalette six colors, wrap at 4 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -784,7 +784,7 @@ exports[`Storyshots components/ColorPalette six colors, wrap at 4 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -810,7 +810,7 @@ exports[`Storyshots components/ColorPalette six colors, wrap at 4 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(170, 187, 204)",
|
||||
"background": "#abc",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -840,7 +840,7 @@ exports[`Storyshots components/ColorPalette six colors, wrap at 4 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(221, 238, 255)",
|
||||
"background": "#def",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -866,7 +866,7 @@ exports[`Storyshots components/ColorPalette six colors, wrap at 4 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -904,7 +904,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -930,7 +930,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -956,7 +956,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -990,7 +990,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -1035,7 +1035,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -1061,7 +1061,7 @@ Array [
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
import { EuiIcon, EuiLink } from '@elastic/eui';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { SFC } from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { readableColor } from '../../lib/readable_color';
|
||||
import { ColorDot } from '../color_dot';
|
||||
|
|
@ -26,13 +26,13 @@ export interface Props {
|
|||
/** The function to call when the color is changed. */
|
||||
onChange: (value: string) => void;
|
||||
/**
|
||||
* The value of the color in the selector. Should be hexadecimal. If it is not in the colors array, it will be ignored.
|
||||
* The value of the color in the selector. If not in the colors array, it will be ignored.
|
||||
* @default ''
|
||||
*/
|
||||
value?: string;
|
||||
}
|
||||
|
||||
export const ColorPalette: SFC<Props> = ({
|
||||
export const ColorPalette: FunctionComponent<Props> = ({
|
||||
colors = [],
|
||||
colorsPerRow = 6,
|
||||
onChange,
|
||||
|
|
@ -43,8 +43,7 @@ export const ColorPalette: SFC<Props> = ({
|
|||
}
|
||||
|
||||
colors = colors.filter(color => {
|
||||
const providedColor = tinycolor(color);
|
||||
return providedColor.isValid() && providedColor.getFormat() === 'hex';
|
||||
return tinycolor(color).isValid();
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -7,4 +7,5 @@
|
|||
import { pure } from 'recompose';
|
||||
import { ColorPalette as Component } from './color_palette';
|
||||
|
||||
export { Props } from './color_palette';
|
||||
export const ColorPalette = pure(Component);
|
||||
|
|
|
|||
|
|
@ -2,267 +2,285 @@
|
|||
|
||||
exports[`Storyshots components/ColorPicker interactive 1`] = `
|
||||
<div>
|
||||
<div
|
||||
className="canvasColorPalette"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="item-grid-row"
|
||||
>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(170, 187, 204)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(221, 238, 255)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
className="canvasColorPalette"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
className="item-grid-row"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "rgba(255, 255, 255, 0)",
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "#abc",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "#def",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="euiLink euiLink--primary canvasColorPalette__dot"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem"
|
||||
style={
|
||||
Object {
|
||||
"display": "inline-block",
|
||||
}
|
||||
}
|
||||
className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
className="euiFormControlLayout"
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<div
|
||||
className="euiFormControlLayout__childrenWrapper"
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
type="text"
|
||||
value=""
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<button
|
||||
aria-label="Add Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
<div
|
||||
className="euiFlexItem"
|
||||
style={
|
||||
Object {
|
||||
"display": "inline-block",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div
|
||||
className="euiFormControlLayout"
|
||||
>
|
||||
<path
|
||||
d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Remove Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
<div
|
||||
className="euiFormControlLayout__childrenWrapper"
|
||||
>
|
||||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<button
|
||||
aria-label="Add Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882zM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Remove Color"
|
||||
className="euiButtonIcon euiButtonIcon--primary"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiButtonIcon__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882zM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"marginTop": 20,
|
||||
}
|
||||
}
|
||||
>
|
||||
<label>
|
||||
<input
|
||||
aria-checked={true}
|
||||
checked={true}
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
|
||||
<span>
|
||||
Show Buttons?
|
||||
</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -294,7 +312,7 @@ exports[`Storyshots components/ColorPicker six colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -339,7 +357,7 @@ exports[`Storyshots components/ColorPicker six colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -365,7 +383,7 @@ exports[`Storyshots components/ColorPicker six colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -391,7 +409,7 @@ exports[`Storyshots components/ColorPicker six colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(170, 187, 204)",
|
||||
"background": "#abc",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -417,7 +435,7 @@ exports[`Storyshots components/ColorPicker six colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(221, 238, 255)",
|
||||
"background": "#def",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -443,7 +461,7 @@ exports[`Storyshots components/ColorPicker six colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -467,7 +485,7 @@ exports[`Storyshots components/ColorPicker six colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -490,7 +508,7 @@ exports[`Storyshots components/ColorPicker six colors 1`] = `
|
|||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="#fff"
|
||||
/>
|
||||
|
|
@ -579,7 +597,7 @@ exports[`Storyshots components/ColorPicker six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -605,7 +623,7 @@ exports[`Storyshots components/ColorPicker six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -631,7 +649,7 @@ exports[`Storyshots components/ColorPicker six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -657,7 +675,7 @@ exports[`Storyshots components/ColorPicker six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(170, 187, 204)",
|
||||
"background": "#abc",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -683,7 +701,7 @@ exports[`Storyshots components/ColorPicker six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(221, 238, 255)",
|
||||
"background": "#def",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -709,7 +727,7 @@ exports[`Storyshots components/ColorPicker six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(171, 205, 239)",
|
||||
"background": "#abcdef",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -733,7 +751,7 @@ exports[`Storyshots components/ColorPicker six colors, value missing 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(161, 178, 195)",
|
||||
"background": "#a1b2c3",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -756,7 +774,7 @@ exports[`Storyshots components/ColorPicker six colors, value missing 1`] = `
|
|||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="#a1b2c3"
|
||||
/>
|
||||
|
|
@ -845,7 +863,7 @@ exports[`Storyshots components/ColorPicker three colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -890,7 +908,7 @@ exports[`Storyshots components/ColorPicker three colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -916,7 +934,7 @@ exports[`Storyshots components/ColorPicker three colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -940,7 +958,7 @@ exports[`Storyshots components/ColorPicker three colors 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -963,7 +981,7 @@ exports[`Storyshots components/ColorPicker three colors 1`] = `
|
|||
<input
|
||||
className="euiFieldText"
|
||||
onChange={[Function]}
|
||||
placeholder="#hex color"
|
||||
placeholder="Color code"
|
||||
type="text"
|
||||
value="#fff"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean, withKnobs } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { ColorPicker } from '../color_picker';
|
||||
|
|
@ -12,28 +13,49 @@ import { ColorPicker } from '../color_picker';
|
|||
const THREE_COLORS = ['#fff', '#666', '#000'];
|
||||
const SIX_COLORS = ['#fff', '#666', '#000', '#abc', '#def', '#abcdef'];
|
||||
|
||||
class Interactive extends React.Component<{}, { value: string; colors: string[] }> {
|
||||
class Interactive extends React.Component<
|
||||
{},
|
||||
{ hasButtons: boolean; value: string; colors: string[] }
|
||||
> {
|
||||
public state = {
|
||||
value: '',
|
||||
colors: SIX_COLORS,
|
||||
hasButtons: true,
|
||||
};
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<ColorPicker
|
||||
colors={this.state.colors}
|
||||
onAddColor={value => this.setState({ colors: this.state.colors.concat(value) })}
|
||||
onRemoveColor={value =>
|
||||
this.setState({ colors: this.state.colors.filter(color => color !== value) })
|
||||
}
|
||||
onChange={value => this.setState({ value })}
|
||||
value={this.state.value}
|
||||
/>
|
||||
<div>
|
||||
<ColorPicker
|
||||
colors={this.state.colors}
|
||||
onAddColor={value => this.setState({ colors: this.state.colors.concat(value) })}
|
||||
onRemoveColor={value =>
|
||||
this.setState({ colors: this.state.colors.filter(color => color !== value) })
|
||||
}
|
||||
onChange={value => this.setState({ value })}
|
||||
hasButtons={this.state.hasButtons}
|
||||
value={this.state.value}
|
||||
/>
|
||||
<p style={{ marginTop: 20 }}>
|
||||
<label>
|
||||
{/* tslint:disable-next-line:react-a11y-input-elements*/}
|
||||
<input
|
||||
aria-checked={this.state.hasButtons}
|
||||
type="checkbox"
|
||||
checked={this.state.hasButtons}
|
||||
onChange={() => this.setState({ hasButtons: !this.state.hasButtons })}
|
||||
/>
|
||||
{' '}
|
||||
<span>Show Buttons?</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
storiesOf('components/ColorPicker', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addParameters({
|
||||
info: {
|
||||
inline: true,
|
||||
|
|
@ -55,6 +77,7 @@ storiesOf('components/ColorPicker', module)
|
|||
onRemoveColor={action('onRemoveColor')}
|
||||
onChange={action('onChange')}
|
||||
colors={THREE_COLORS}
|
||||
hasButtons={boolean('Has Buttons', true)}
|
||||
/>
|
||||
))
|
||||
.add('six colors', () => (
|
||||
|
|
@ -64,6 +87,7 @@ storiesOf('components/ColorPicker', module)
|
|||
onRemoveColor={action('onRemoveColor')}
|
||||
onChange={action('onChange')}
|
||||
colors={SIX_COLORS}
|
||||
hasButtons={boolean('Has Buttons', true)}
|
||||
/>
|
||||
))
|
||||
.add('six colors, value missing', () => (
|
||||
|
|
@ -73,6 +97,7 @@ storiesOf('components/ColorPicker', module)
|
|||
onRemoveColor={action('onRemoveColor')}
|
||||
onChange={action('onChange')}
|
||||
colors={SIX_COLORS}
|
||||
hasButtons={boolean('Has Buttons', true)}
|
||||
/>
|
||||
))
|
||||
.add('interactive', () => <Interactive />, {
|
||||
|
|
|
|||
|
|
@ -5,43 +5,32 @@
|
|||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { SFC } from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { ColorManager } from '../color_manager';
|
||||
import { ColorManager, Props as ColorManagerProps } from '../color_manager';
|
||||
import { ColorPalette } from '../color_palette';
|
||||
|
||||
export interface Props {
|
||||
export interface Props extends ColorManagerProps {
|
||||
/**
|
||||
* An array of hexadecimal color values. Non-hex will be ignored.
|
||||
* @default []
|
||||
*/
|
||||
colors?: string[];
|
||||
/** The function to call when the Add Color button is clicked. The button will not appear if there is no handler. */
|
||||
onAddColor?: (value: string) => void;
|
||||
/** The function to call when the color is changed. */
|
||||
onChange: (value: string) => void;
|
||||
/** The function to call when the Remove Color button is clicked. The button will not appear if there is no handler. */
|
||||
onRemoveColor?: (value: string) => void;
|
||||
/**
|
||||
* The value of the color in the selector. Should be hexadecimal. If it is not in the colors array, it will be ignored.
|
||||
* @default ''
|
||||
*/
|
||||
value?: string;
|
||||
}
|
||||
|
||||
export const ColorPicker: SFC<Props> = ({
|
||||
export const ColorPicker: FunctionComponent<Props> = ({
|
||||
colors = [],
|
||||
value = '',
|
||||
hasButtons = false,
|
||||
onAddColor,
|
||||
onChange,
|
||||
onRemoveColor,
|
||||
value = '',
|
||||
}) => {
|
||||
const tc = tinycolor(value);
|
||||
const isValidColor = tc.isValid() && tc.getFormat() === 'hex';
|
||||
const isValidColor = tc.isValid();
|
||||
|
||||
colors = colors.filter(color => {
|
||||
const providedColor = tinycolor(color);
|
||||
return providedColor.isValid() && providedColor.getFormat() === 'hex';
|
||||
return tinycolor(color).isValid();
|
||||
});
|
||||
|
||||
let canRemove = false;
|
||||
|
|
@ -61,6 +50,7 @@ export const ColorPicker: SFC<Props> = ({
|
|||
value={value}
|
||||
onAddColor={canAdd ? onAddColor : undefined}
|
||||
onRemoveColor={canRemove ? onRemoveColor : undefined}
|
||||
hasButtons={hasButtons}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -68,6 +58,7 @@ export const ColorPicker: SFC<Props> = ({
|
|||
|
||||
ColorPicker.propTypes = {
|
||||
colors: PropTypes.array,
|
||||
hasButtons: PropTypes.bool,
|
||||
onAddColor: PropTypes.func,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onRemoveColor: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -8,4 +8,5 @@ import { pure } from 'recompose';
|
|||
|
||||
import { ColorPicker as Component } from './color_picker';
|
||||
|
||||
export { Props } from './color_picker';
|
||||
export const ColorPicker = pure(Component);
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { EuiLink } from '@elastic/eui';
|
||||
import { Popover } from '../popover';
|
||||
import { ColorPicker } from '../color_picker';
|
||||
import { ColorDot } from '../color_dot';
|
||||
import { WorkpadColorPicker } from '../workpad_color_picker/';
|
||||
|
||||
export const ColorPickerMini = ({ onChange, value, anchorPosition, colors }) => {
|
||||
const button = handleClick => (
|
||||
<EuiLink style={{ fontSize: 0 }} onClick={handleClick}>
|
||||
<ColorDot value={value} clickable />
|
||||
</EuiLink>
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
id="color-picker-mini-popover"
|
||||
panelClassName="canvas canvasColorPickerMini__popover"
|
||||
button={button}
|
||||
anchorPosition={anchorPosition}
|
||||
>
|
||||
{() =>
|
||||
colors ? (
|
||||
<ColorPicker onChange={onChange} value={value} colors={colors} />
|
||||
) : (
|
||||
<WorkpadColorPicker onChange={onChange} value={value} />
|
||||
)
|
||||
}
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
ColorPickerMini.propTypes = {
|
||||
colors: PropTypes.array,
|
||||
value: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
anchorPosition: PropTypes.string,
|
||||
};
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.canvasColorPickerMini__popover {
|
||||
width: 250px;
|
||||
}
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots components/ColorPickerPopover interactive 1`] = `
|
||||
<div>
|
||||
<div
|
||||
className="euiPopover euiPopover--anchorDownCenter"
|
||||
container={null}
|
||||
id="color-picker-popover"
|
||||
onKeyDown={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="euiPopover__anchor"
|
||||
>
|
||||
<button
|
||||
className="euiLink euiLink--primary"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
style={
|
||||
Object {
|
||||
"marginTop": 20,
|
||||
}
|
||||
}
|
||||
>
|
||||
<label>
|
||||
<input
|
||||
aria-checked={true}
|
||||
checked={true}
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
|
||||
<span>
|
||||
Show Buttons?
|
||||
</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots components/ColorPickerPopover six colors 1`] = `
|
||||
<div
|
||||
className="euiPopover euiPopover--anchorDownCenter"
|
||||
container={null}
|
||||
id="color-picker-popover"
|
||||
onKeyDown={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="euiPopover__anchor"
|
||||
>
|
||||
<button
|
||||
className="euiLink euiLink--primary"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots components/ColorPickerPopover six colors, value missing 1`] = `
|
||||
<div
|
||||
className="euiPopover euiPopover--anchorDownCenter"
|
||||
container={null}
|
||||
id="color-picker-popover"
|
||||
onKeyDown={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="euiPopover__anchor"
|
||||
>
|
||||
<button
|
||||
className="euiLink euiLink--primary"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "#a1b2c3",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots components/ColorPickerPopover three colors 1`] = `
|
||||
<div
|
||||
className="euiPopover euiPopover--anchorDownCenter"
|
||||
container={null}
|
||||
id="color-picker-popover"
|
||||
onKeyDown={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="euiPopover__anchor"
|
||||
>
|
||||
<button
|
||||
className="euiLink euiLink--primary"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 0,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot"
|
||||
>
|
||||
<div
|
||||
className="canvasColorDot__background canvasCheckered"
|
||||
/>
|
||||
<div
|
||||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { ColorPickerPopover } from '../color_picker_popover';
|
||||
|
||||
const THREE_COLORS = ['#fff', '#666', '#000'];
|
||||
const SIX_COLORS = ['#fff', '#666', '#000', '#abc', '#def', '#abcdef'];
|
||||
|
||||
class Interactive extends React.Component<
|
||||
{},
|
||||
{ hasButtons: boolean; value: string; colors: string[] }
|
||||
> {
|
||||
public state = {
|
||||
value: '',
|
||||
colors: SIX_COLORS,
|
||||
hasButtons: true,
|
||||
};
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div>
|
||||
<ColorPickerPopover
|
||||
colors={this.state.colors}
|
||||
onChange={value => this.setState({ value })}
|
||||
onAddColor={action('onAddColor')}
|
||||
onRemoveColor={action('onRemoveColor')}
|
||||
value={this.state.value}
|
||||
anchorPosition="downCenter"
|
||||
hasButtons={this.state.hasButtons}
|
||||
/>
|
||||
<p style={{ marginTop: 20 }}>
|
||||
<label>
|
||||
{/* tslint:disable-next-line:react-a11y-input-elements*/}
|
||||
<input
|
||||
aria-checked={this.state.hasButtons}
|
||||
type="checkbox"
|
||||
checked={this.state.hasButtons}
|
||||
onChange={() => this.setState({ hasButtons: !this.state.hasButtons })}
|
||||
/>
|
||||
{' '}
|
||||
<span>Show Buttons?</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
storiesOf('components/ColorPickerPopover', module)
|
||||
.addParameters({
|
||||
info: {
|
||||
inline: true,
|
||||
styles: {
|
||||
infoBody: {
|
||||
margin: 20,
|
||||
},
|
||||
infoStory: {
|
||||
margin: '40px 60px',
|
||||
width: '320px',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
.add('three colors', () => (
|
||||
<ColorPickerPopover
|
||||
value="#fff"
|
||||
anchorPosition="downCenter"
|
||||
onChange={action('onChange')}
|
||||
colors={THREE_COLORS}
|
||||
/>
|
||||
))
|
||||
.add('six colors', () => (
|
||||
<ColorPickerPopover
|
||||
value="#fff"
|
||||
anchorPosition="downCenter"
|
||||
onChange={action('onChange')}
|
||||
colors={SIX_COLORS}
|
||||
/>
|
||||
))
|
||||
.add('six colors, value missing', () => (
|
||||
<ColorPickerPopover
|
||||
value="#a1b2c3"
|
||||
anchorPosition="downCenter"
|
||||
onChange={action('onChange')}
|
||||
colors={SIX_COLORS}
|
||||
/>
|
||||
))
|
||||
.add('interactive', () => <Interactive />, {
|
||||
info: {
|
||||
inline: true,
|
||||
source: false,
|
||||
propTablesExclude: [Interactive],
|
||||
styles: {
|
||||
infoBody: {
|
||||
margin: 20,
|
||||
},
|
||||
infoStory: {
|
||||
margin: '40px 60px',
|
||||
width: '320px',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.canvasColorPickerPopover__popover {
|
||||
width: $euiSize * 16;
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { EuiLink, PopoverAnchorPosition } from '@elastic/eui';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { ColorDot } from '../color_dot';
|
||||
import { ColorPicker, Props as ColorPickerProps } from '../color_picker';
|
||||
// @ts-ignore
|
||||
import { Popover } from '../popover';
|
||||
|
||||
export interface Props extends ColorPickerProps {
|
||||
anchorPosition: PopoverAnchorPosition;
|
||||
}
|
||||
|
||||
export const ColorPickerPopover: FunctionComponent<Props> = (props: Props) => {
|
||||
const { value, anchorPosition, ...rest } = props;
|
||||
const button = (handleClick: () => void) => (
|
||||
<EuiLink style={{ fontSize: 0 }} onClick={handleClick}>
|
||||
<ColorDot value={value} />
|
||||
</EuiLink>
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
id="color-picker-popover"
|
||||
panelClassName="canvas canvasColorPickerPopover__popover"
|
||||
button={button}
|
||||
anchorPosition={anchorPosition}
|
||||
>
|
||||
{() => <ColorPicker value={value} {...rest} />}
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
ColorPickerPopover.propTypes = {
|
||||
...ColorPicker.propTypes,
|
||||
anchorPosition: PropTypes.string,
|
||||
};
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
import { pure } from 'recompose';
|
||||
|
||||
import { ColorPickerMini as Component } from './color_picker_mini';
|
||||
import { ColorPickerPopover as Component } from './color_picker_popover';
|
||||
|
||||
export const ColorPickerMini = pure(Component);
|
||||
export { Props } from './color_picker_popover';
|
||||
export const ColorPickerPopover = pure(Component);
|
||||
|
|
@ -14,7 +14,7 @@ exports[`Storyshots components/ItemGrid color dot grid 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -29,7 +29,7 @@ exports[`Storyshots components/ItemGrid color dot grid 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -44,7 +44,7 @@ exports[`Storyshots components/ItemGrid color dot grid 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
|
@ -66,7 +66,7 @@ exports[`Storyshots components/ItemGrid complex grid 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(255, 255, 255)",
|
||||
"background": "#fff",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -100,7 +100,7 @@ exports[`Storyshots components/ItemGrid complex grid 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(102, 102, 102)",
|
||||
"background": "#666",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -134,7 +134,7 @@ exports[`Storyshots components/ItemGrid complex grid 1`] = `
|
|||
className="canvasColorDot__foreground"
|
||||
style={
|
||||
Object {
|
||||
"background": "rgb(0, 0, 0)",
|
||||
"background": "#000",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { EuiCard, EuiFormRow, EuiTitle, EuiSpacer, EuiSelect } from '@elastic/eui';
|
||||
import { ColorPickerMini } from '../color_picker_mini';
|
||||
import { WorkpadColorPicker } from '../workpad_color_picker';
|
||||
|
||||
export const PageConfig = ({
|
||||
pageIndex,
|
||||
|
|
@ -23,8 +23,8 @@ export const PageConfig = ({
|
|||
<h4>Page</h4>
|
||||
</EuiTitle>
|
||||
<EuiSpacer size="m" />
|
||||
<EuiFormRow label="Background color">
|
||||
<ColorPickerMini onChange={setBackground} value={background} />
|
||||
<EuiFormRow label="Background color" helpText="Accepts HEX, RGB or HTML Color names">
|
||||
<WorkpadColorPicker onChange={setBackground} value={background} />
|
||||
</EuiFormRow>
|
||||
{/* No need to show the transition for the first page because transitions occur when
|
||||
switching between pages (for example, when moving from the first page to the second
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiSelect, EuiSpacer, EuiButtonGroup } from '@elastic/eui';
|
||||
import { FontPicker } from '../font_picker';
|
||||
import { ColorPickerMini } from '../color_picker_mini';
|
||||
import { ColorPickerPopover } from '../color_picker_popover';
|
||||
import { fontSizes } from './font_sizes';
|
||||
|
||||
export const TextStylePicker = ({
|
||||
|
|
@ -136,7 +136,7 @@ export const TextStylePicker = ({
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false} style={{ fontSize: 0 }}>
|
||||
<ColorPickerMini
|
||||
<ColorPickerPopover
|
||||
value={color}
|
||||
onChange={value => doChange('color', value)}
|
||||
colors={colors}
|
||||
|
|
|
|||
|
|
@ -5,18 +5,24 @@
|
|||
*/
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
import { getWorkpadColors } from '../../state/selectors/workpad';
|
||||
// @ts-ignore
|
||||
import { addColor, removeColor } from '../../state/actions/workpad';
|
||||
// @ts-ignore
|
||||
import { getWorkpadColors } from '../../state/selectors/workpad';
|
||||
|
||||
import { WorkpadColorPicker as Component } from './workpad_color_picker';
|
||||
import { WorkpadColorPicker as Component } from '../workpad_color_picker/workpad_color_picker';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
export interface State {
|
||||
colors: string[];
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: State) => ({
|
||||
colors: getWorkpadColors(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
addColor,
|
||||
removeColor,
|
||||
onAddColor: addColor,
|
||||
onRemoveColor: removeColor,
|
||||
};
|
||||
|
||||
export const WorkpadColorPicker = connect(
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { ColorPicker } from '../color_picker';
|
||||
|
||||
export const WorkpadColorPicker = ({ onChange, value, colors, addColor, removeColor }) => {
|
||||
return (
|
||||
<div>
|
||||
<ColorPicker
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
colors={colors}
|
||||
addColor={addColor}
|
||||
removeColor={removeColor}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
WorkpadColorPicker.propTypes = {
|
||||
value: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
colors: PropTypes.array,
|
||||
addColor: PropTypes.func,
|
||||
removeColor: PropTypes.func,
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { ColorPickerPopover, Props } from '../color_picker_popover';
|
||||
|
||||
export const WorkpadColorPicker = (props: Props) => {
|
||||
return <ColorPickerPopover {...props} hasButtons={true} />;
|
||||
};
|
||||
|
||||
WorkpadColorPicker.propTypes = ColorPickerPopover.propTypes;
|
||||
|
|
@ -8,12 +8,12 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import { templateFromReactComponent } from '../../lib/template_from_react_component';
|
||||
import { ColorPickerMini } from '../../components/color_picker_mini/';
|
||||
import { ColorPickerPopover } from '../../components/color_picker_popover';
|
||||
|
||||
const ColorArgInput = ({ onValueChange, argValue, workpad }) => (
|
||||
<EuiFlexGroup gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
<ColorPickerMini value={argValue} onChange={onValueChange} colors={workpad.colors} />
|
||||
<ColorPickerPopover value={argValue} onChange={onValueChange} colors={workpad.colors} />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {
|
|||
EuiFieldNumber,
|
||||
EuiSuperSelect,
|
||||
} from '@elastic/eui';
|
||||
import { ColorPickerMini } from '../../../components/color_picker_mini';
|
||||
import { ColorPickerPopover } from '../../../components/color_picker_popover';
|
||||
|
||||
const styles = [
|
||||
'none',
|
||||
|
|
@ -87,7 +87,7 @@ export const BorderForm = ({ value, radius, onChange, colors }) => {
|
|||
|
||||
<EuiFlexItem grow={1}>
|
||||
<EuiFormRow label="Color" style={{ fontSize: 0 }}>
|
||||
<ColorPickerMini
|
||||
<ColorPickerPopover
|
||||
value={borderColor}
|
||||
onChange={borderColorChange}
|
||||
colors={colors}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { ColorPickerMini } from '../../../components/color_picker_mini';
|
||||
import { ColorPickerPopover } from '../../../components/color_picker_popover';
|
||||
|
||||
export const SimpleTemplate = ({ getArgValue, setArgValue, workpad }) => (
|
||||
<div style={{ fontSize: 0 }}>
|
||||
<ColorPickerMini
|
||||
<ColorPickerPopover
|
||||
value={getArgValue('backgroundColor')}
|
||||
onChange={color => setArgValue('backgroundColor', color)}
|
||||
colors={workpad.colors}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
|
|||
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiButtonIcon } from '@elastic/eui';
|
||||
import { set, del } from 'object-path-immutable';
|
||||
import { get } from 'lodash';
|
||||
import { ColorPickerMini } from '../../../components/color_picker_mini';
|
||||
import { ColorPickerPopover } from '../../../components/color_picker_popover';
|
||||
import { TooltipIcon } from '../../../components/tooltip_icon';
|
||||
|
||||
export const SimpleTemplate = props => {
|
||||
|
|
@ -47,7 +47,7 @@ export const SimpleTemplate = props => {
|
|||
<label htmlFor="series-style">Color </label>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem style={{ fontSize: 0 }}>
|
||||
<ColorPickerMini
|
||||
<ColorPickerPopover
|
||||
id="series-style"
|
||||
value={color}
|
||||
onChange={val => handlePlain('color', val)}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
@import '../components/clipboard/clipboard';
|
||||
@import '../components/color_dot/color_dot';
|
||||
@import '../components/color_palette/color_palette';
|
||||
@import '../components/color_picker_mini/color_picker_mini';
|
||||
@import '../components/color_picker_popover/color_picker_popover';
|
||||
@import '../components/datasource/datasource';
|
||||
@import '../components/datasource/datasource_preview/datasource_preview';
|
||||
@import '../components/datatable/datatable';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue