Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EuiColorPicker opacity support #2850

Merged
merged 37 commits into from
Mar 12, 2020
Merged

EuiColorPicker opacity support #2850

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
78e8187
alpha range
thompsongl Feb 12, 2020
00f84a6
alpha tests
thompsongl Feb 12, 2020
59addfa
docs
thompsongl Feb 12, 2020
6af0bed
wip: rgba support
thompsongl Feb 14, 2020
3a95340
maintain alpha value
thompsongl Feb 19, 2020
9900dd9
prevent track visibility; clean up
thompsongl Feb 19, 2020
1465d18
Merge branch 'master' into colorpicker-opacity
thompsongl Feb 19, 2020
52c6aee
display toggles
thompsongl Feb 19, 2020
34a654a
docs validation
thompsongl Feb 20, 2020
3320fac
use rgba for swatches
thompsongl Feb 20, 2020
0338379
Merge branch 'master' into colorpicker-opacity
thompsongl Feb 20, 2020
db5b934
use rgba for css
thompsongl Feb 20, 2020
4a87871
better hue and format throughput
thompsongl Feb 21, 2020
cd89265
Merge branch 'master' into colorpicker-opacity
thompsongl Feb 24, 2020
2976b67
color stops validation
thompsongl Feb 24, 2020
ddc394a
more docs
thompsongl Feb 24, 2020
f0471f2
better format output
thompsongl Feb 24, 2020
8f21a0c
Merge branch 'master' into colorpicker-opacity
thompsongl Feb 25, 2020
cfc4c5e
disallow opacity when showAlpha=false
thompsongl Feb 25, 2020
7676221
Merge branch 'master' into colorpicker-opacity
thompsongl Mar 2, 2020
73bb0db
clean up
thompsongl Mar 2, 2020
f7f9948
Merge branch 'master' into colorpicker-opacity
thompsongl Mar 3, 2020
9e3471c
updated opacity and validity logic
thompsongl Mar 3, 2020
41733d6
fix button example
thompsongl Mar 3, 2020
9b0bea8
better format detection for null
thompsongl Mar 4, 2020
1345587
alpha channel for color stops
thompsongl Mar 4, 2020
522d598
allow empty range value
thompsongl Mar 4, 2020
887cd3d
sanitize rgb strings
thompsongl Mar 4, 2020
1de8de3
more resiliant sanitization
thompsongl Mar 4, 2020
99285c4
feedback
thompsongl Mar 4, 2020
48c42c3
clean up
thompsongl Mar 5, 2020
bac43b4
Merge branch 'master' into colorpicker-opacity
thompsongl Mar 11, 2020
5fd717f
usesEffect; clean up
thompsongl Mar 11, 2020
64dc808
utils tests
thompsongl Mar 11, 2020
b71ae10
comment
thompsongl Mar 12, 2020
751685d
Merge branch 'master' into colorpicker-opacity
thompsongl Mar 12, 2020
010f310
CL
thompsongl Mar 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"test-staged"
],
"dependencies": {
"@types/chroma-js": "^1.4.3",
"@types/chroma-js": "^2.0.0",
"@types/enzyme": "^3.1.13",
"@types/lodash": "^4.14.116",
"@types/numeral": "^0.0.25",
Expand Down
26 changes: 26 additions & 0 deletions src-docs/src/views/color_picker/alpha.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';

import { EuiColorPicker, EuiFormRow } from '../../../../src/components';
import { useColorPicker } from './utils';

export const Alpha = () => {
const [color, setColor, errors] = useColorPicker('#D36086');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like useColorPicker is probably a service we'll want to document and export if it's this helpful in a consuming application?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Going to open an issue for this. I hadn't thought about it, but it does seem really useful and could be something of a pattern for other relatively simple form-like components.


const handleChange = hex => {
setColor(hex);
};

return (
<EuiFormRow
label="Pick a color with optional opacity"
isInvalid={!!errors}
error={errors}>
<EuiColorPicker
onChange={handleChange}
color={color}
showAlpha={true}
isInvalid={!!errors}
/>
</EuiFormRow>
);
};
21 changes: 14 additions & 7 deletions src-docs/src/views/color_picker/color_picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,20 @@ export class ColorPicker extends Component {
}

return (
<EuiFormRow label="Pick a color" isInvalid={hasErrors} error={errors}>
<EuiColorPicker
onChange={this.handleChange}
color={this.state.color}
isInvalid={hasErrors}
/>
</EuiFormRow>
<>
<button
type="button"
onClick={() => this.setState({ color: '#DA8B45' })}>
change
</button>
<EuiFormRow label="Pick a color" isInvalid={hasErrors} error={errors}>
<EuiColorPicker
onChange={this.handleChange}
color={this.state.color}
isInvalid={hasErrors}
/>
</EuiFormRow>
</>
);
}
}
41 changes: 41 additions & 0 deletions src-docs/src/views/color_picker/color_picker_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,25 @@ const colorPickerRangeSnippet = `<EuiColorStops
/>
`;

import { Alpha } from './alpha';
const alphaSource = require('!!raw-loader!./alpha');
const alphaHtml = renderToHtml(Alpha);
const alphaSnippet = `<EuiColorPicker
id={colorPickerId}
onChange={handleChange}
color={chosenColor}
alpha={0.25}
isInvalid={hasErrors}
/>`;
const alphaSnippetShow = `<EuiColorPicker
id={colorPickerId}
onChange={handleChange}
color={chosenColor}
alpha={1}
showAlpha={true}
isInvalid={hasErrors}
/>`;

import { CustomSwatches } from './custom_swatches';
const customSwatchesSource = require('!!raw-loader!./custom_swatches');
const customSwatchesHtml = renderToHtml(CustomSwatches);
Expand Down Expand Up @@ -329,6 +348,28 @@ export const ColorPickerExample = {
snippet: colorPickerRangeSnippet,
demo: <ColorStopsRange />,
},
{
title: 'Alpha channel (opacity) selection',
source: [
{
type: GuideSectionTypes.JS,
code: alphaSource,
},
{
type: GuideSectionTypes.HTML,
code: alphaHtml,
},
],
text: (
<p>
Set the <EuiCode>alpha</EuiCode> prop to designate a starting opacity
value (decimal range, 0 to 1). To allow user updates to the color
opacity, set the <EuiCode>showAlpha</EuiCode> prop to `true`.
</p>
),
snippet: [alphaSnippet, alphaSnippetShow],
demo: <Alpha />,
},
{
title: 'Custom color swatches',
source: [
Expand Down
100 changes: 83 additions & 17 deletions src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`renders EuiColorPicker 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<div
style="color:#ffeedd"
style="color:rgba(255,238,221,1)"
>
<div
class="euiFormControlLayout"
Expand All @@ -27,7 +27,6 @@ exports[`renders EuiColorPicker 1`] = `
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
data-test-subj="colorPickerAnchor"
maxlength="7"
type="text"
value="#FFEEDD"
/>
Expand Down Expand Up @@ -90,7 +89,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
class="euiFormControlLayout__childrenWrapper"
>
<div
style="color:#ffffff"
style="color:rgba(255,255,255,1)"
>
<div
class="euiFormControlLayout"
Expand All @@ -103,7 +102,6 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
data-test-subj="colorPickerAnchor"
maxlength="7"
type="text"
value="#FFFFFF"
/>
Expand Down Expand Up @@ -177,7 +175,6 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
data-test-subj="colorPickerAnchor"
maxlength="7"
placeholder="Transparent"
type="text"
value=""
Expand Down Expand Up @@ -252,7 +249,6 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
data-test-subj="colorPickerAnchor"
maxlength="7"
placeholder="Transparent"
type="text"
value=""
Expand Down Expand Up @@ -321,7 +317,7 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<div
style="color:#ffeedd"
style="color:rgba(255,238,221,1)"
>
<div
class="euiFormControlLayout"
Expand All @@ -334,7 +330,6 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
autocomplete="off"
class="euiFieldText euiColorPicker__input euiColorPicker__input--inGroup euiFieldText--withIcon"
data-test-subj="colorPickerAnchor"
maxlength="7"
type="text"
value="#FFEEDD"
/>
Expand Down Expand Up @@ -388,6 +383,81 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
</div>
`;

exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
<div
class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
>
<div
class="euiPopover__anchor"
>
<div
class="euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<div
style="color:rgba(255,238,221,1)"
>
<div
class="euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
data-test-subj="colorPickerAnchor"
type="text"
value="#FFEEDD"
/>
<div
class="euiFormControlLayoutIcons"
>
<span
class="euiFormControlLayoutCustomIcon"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</div>
</div>
</div>
</div>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
>
<span
class="euiFormControlLayoutCustomIcon"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</div>
</div>
</div>
</div>
</div>
`;

exports[`renders compressed EuiColorPicker 1`] = `
<div
class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
Expand All @@ -402,7 +472,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<div
style="color:#ffeedd"
style="color:rgba(255,238,221,1)"
>
<div
class="euiFormControlLayout euiFormControlLayout--compressed"
Expand All @@ -415,7 +485,6 @@ exports[`renders compressed EuiColorPicker 1`] = `
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--compressed"
data-test-subj="colorPickerAnchor"
maxlength="7"
type="text"
value="#FFEEDD"
/>
Expand Down Expand Up @@ -478,7 +547,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<div
style="color:#ffeedd"
style="color:rgba(255,238,221,1)"
>
<div
class="euiFormControlLayout"
Expand All @@ -492,7 +561,6 @@ exports[`renders disabled EuiColorPicker 1`] = `
class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
data-test-subj="colorPickerAnchor"
disabled=""
maxlength="7"
type="text"
value="#FFEEDD"
/>
Expand Down Expand Up @@ -555,7 +623,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<div
style="color:#ffeedd"
style="color:rgba(255,238,221,1)"
>
<div
class="euiFormControlLayout euiFormControlLayout--fullWidth"
Expand All @@ -568,7 +636,6 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--fullWidth"
data-test-subj="colorPickerAnchor"
maxlength="7"
type="text"
value="#FFEEDD"
/>
Expand Down Expand Up @@ -674,7 +741,7 @@ exports[`renders inline EuiColorPicker 1`] = `
<input
class="euiHue__range"
id="undefined-hue"
max="360"
max="359"
min="0"
step="1"
type="range"
Expand Down Expand Up @@ -814,7 +881,7 @@ exports[`renders readOnly EuiColorPicker 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<div
style="color:#ffeedd"
style="color:rgba(255,238,221,1)"
>
<div
class="euiFormControlLayout euiFormControlLayout--readOnly"
Expand All @@ -827,7 +894,6 @@ exports[`renders readOnly EuiColorPicker 1`] = `
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
data-test-subj="colorPickerAnchor"
maxlength="7"
readonly=""
type="text"
value="#FFEEDD"
Expand Down
6 changes: 3 additions & 3 deletions src/components/color_picker/__snapshots__/hue.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Array [
class="euiHue__range"
data-test-subj="test subject string"
id="undefined-hue"
max="360"
max="359"
min="0"
step="1"
type="range"
Expand Down Expand Up @@ -52,7 +52,7 @@ Array [
class="euiHue__range"
data-test-subj="test subject string"
id="undefined-hue"
max="360"
max="359"
min="0"
step="1"
type="range"
Expand Down Expand Up @@ -82,7 +82,7 @@ Array [
class="euiHue__range"
data-test-subj="test subject string"
id="undefined-hue"
max="360"
max="359"
min="0"
step="1"
type="range"
Expand Down
10 changes: 7 additions & 3 deletions src/components/color_picker/_color_picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
}
}



// Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
.euiSwatchInput__stroke {
fill: none;
Expand All @@ -38,4 +36,10 @@
height: $euiFormControlLayoutGroupInputCompressedHeight !important;
border-radius: 0;
}
}
}

.euiColorPicker__alphaRange {
.euiRangeInput {
min-width: 0;
}
}
Loading