-
Notifications
You must be signed in to change notification settings - Fork 843
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
EuiColorPicker opacity support (#2850)
* alpha range * alpha tests * docs * wip: rgba support * maintain alpha value * prevent track visibility; clean up * display toggles * docs validation * use rgba for swatches * use rgba for css * better hue and format throughput * color stops validation * more docs * better format output * disallow opacity when showAlpha=false * clean up * updated opacity and validity logic * fix button example * better format detection for null * alpha channel for color stops * allow empty range value * sanitize rgb strings * more resiliant sanitization * feedback * clean up * usesEffect; clean up * utils tests * comment * CL
- Loading branch information
1 parent
1457a41
commit cbbf27b
Showing
27 changed files
with
904 additions
and
256 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { EuiColorPicker, EuiFormRow } from '../../../../src/components'; | ||
| import { useColorPicker } from './utils'; | ||
|
|
||
| export const Alpha = () => { | ||
| const [color, setColor, errors] = useColorPicker('#D36086'); | ||
| const [color2, setColor2, errors2] = useColorPicker('211, 96, 134'); | ||
|
|
||
| const customSwatches = [ | ||
| '#54B399', | ||
| '#6092C0', | ||
| '#D36086', | ||
| '#9170B8', | ||
| '#CA8EAE', | ||
| '#54B39940', | ||
| '#6092C040', | ||
| '#D3608640', | ||
| '#9170B840', | ||
| '#CA8EAE40', | ||
| ]; | ||
|
|
||
| const customSwatches2 = [ | ||
| '211, 96, 134, 0.25', | ||
| '211, 96, 134, 0.5', | ||
| '211, 96, 134, 0.75', | ||
| '211, 96, 134', | ||
| ]; | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiFormRow | ||
| label="Pick a color with optional opacity" | ||
| isInvalid={!!errors} | ||
| error={errors}> | ||
| <EuiColorPicker | ||
| onChange={setColor} | ||
| color={color} | ||
| showAlpha={true} | ||
| isInvalid={!!errors} | ||
| swatches={customSwatches} | ||
| /> | ||
| </EuiFormRow> | ||
|
|
||
| <EuiFormRow | ||
| label="Using RGBa format" | ||
| isInvalid={!!errors2} | ||
| error={errors2}> | ||
| <EuiColorPicker | ||
| onChange={setColor2} | ||
| color={color2} | ||
| showAlpha={true} | ||
| format="rgba" | ||
| isInvalid={!!errors2} | ||
| swatches={customSwatches2} | ||
| /> | ||
| </EuiFormRow> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,13 @@ | ||
| import React, { Component } from 'react'; | ||
| import React from 'react'; | ||
|
|
||
| import { EuiColorPicker, EuiFormRow } from '../../../../src/components'; | ||
| import { isValidHex } from '../../../../src/services'; | ||
|
|
||
| export class ColorPicker extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| color: '#D36086', | ||
| }; | ||
| } | ||
|
|
||
| handleChange = value => { | ||
| this.setState({ color: value }); | ||
| }; | ||
|
|
||
| render() { | ||
| const hasErrors = !isValidHex(this.state.color) && this.state.color !== ''; | ||
|
|
||
| let errors; | ||
| if (hasErrors) { | ||
| errors = ['Provide a valid hex value']; | ||
| } | ||
|
|
||
| return ( | ||
| <EuiFormRow label="Pick a color" isInvalid={hasErrors} error={errors}> | ||
| <EuiColorPicker | ||
| onChange={this.handleChange} | ||
| color={this.state.color} | ||
| isInvalid={hasErrors} | ||
| /> | ||
| </EuiFormRow> | ||
| ); | ||
| } | ||
| } | ||
| import { useColorPicker } from './utils'; | ||
|
|
||
| export const ColorPicker = () => { | ||
| const [color, setColor, errors] = useColorPicker('#D36086'); | ||
| return ( | ||
| <EuiFormRow label="Pick a color" isInvalid={!!errors} error={errors}> | ||
| <EuiColorPicker onChange={setColor} color={color} isInvalid={!!errors} /> | ||
| </EuiFormRow> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { EuiColorPicker, EuiFormRow } from '../../../../src/components'; | ||
| import { useColorPicker } from './utils'; | ||
|
|
||
| export const Formats = () => { | ||
| const [color, setColor, errors] = useColorPicker('#D36086'); | ||
| const [color2, setColor2, errors2] = useColorPicker('#D36086'); | ||
| const [color3, setColor3, errors3] = useColorPicker('211, 96, 134'); | ||
| return ( | ||
| <> | ||
| <EuiFormRow label="Auto format" isInvalid={!!errors} error={errors}> | ||
| <EuiColorPicker | ||
| onChange={setColor} | ||
| color={color} | ||
| isInvalid={!!errors} | ||
| /> | ||
| </EuiFormRow> | ||
| <EuiFormRow label="Hex format" isInvalid={!!errors2} error={errors2}> | ||
| <EuiColorPicker | ||
| format="hex" | ||
| onChange={setColor2} | ||
| color={color2} | ||
| isInvalid={!!errors2} | ||
| /> | ||
| </EuiFormRow> | ||
| <EuiFormRow label="RGB(a) format" isInvalid={!!errors3} error={errors3}> | ||
| <EuiColorPicker | ||
| format="rgba" | ||
| onChange={setColor3} | ||
| color={color3} | ||
| isInvalid={!!errors3} | ||
| showAlpha={true} | ||
| /> | ||
| </EuiFormRow> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.