-
Notifications
You must be signed in to change notification settings - Fork 841
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add EuiColorPicker. Upgrade Jest to 22.0.6. (#328)
- Loading branch information
Showing
22 changed files
with
1,756 additions
and
325 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
This file was deleted.
Oops, something went wrong.
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,5 @@ | ||
| // Fail if a test ends up `console.error`-ing, e.g. if React logs because of a | ||
| // failed prop types check. | ||
| console.error = message => { | ||
| throw new Error(message); | ||
| }; |
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,22 @@ | ||
| import React, { | ||
| Component, | ||
| } from 'react'; | ||
|
|
||
| import { EuiColorPicker } from '../../../../src/components'; | ||
|
|
||
| export class ColorPicker extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| color: '#ffffff' | ||
| }; | ||
| } | ||
|
|
||
| handleChange = (value) => { | ||
| this.setState({ color: value }); | ||
| }; | ||
|
|
||
| render() { | ||
| return <EuiColorPicker onChange={this.handleChange} color={this.state.color}/>; | ||
| } | ||
| } |
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,56 @@ | ||
| import React, { | ||
| Component, | ||
| } from 'react'; | ||
|
|
||
| import { | ||
| EuiColorPicker, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiKeyboardAccessible, | ||
| } from '../../../../src/components'; | ||
|
|
||
| export class ColorPickerLabelAndClear extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| color: null | ||
| }; | ||
| } | ||
|
|
||
| handleChange = (value) => { | ||
| this.setState({ color: value }); | ||
| }; | ||
|
|
||
| resetColor = () => { | ||
| this.setState({ color: null }); | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <EuiFlexGroup alignItems="center"> | ||
| <EuiFlexItem grow={false}> | ||
| <label className="kuiLabel"> | ||
| Background color | ||
| </label> | ||
| </EuiFlexItem> | ||
|
|
||
| <EuiFlexItem grow={false}> | ||
| <EuiColorPicker | ||
| onChange={this.handleChange} | ||
| color={this.state.color} | ||
| /> | ||
| </EuiFlexItem> | ||
|
|
||
| <EuiFlexItem grow={false}> | ||
| <p className="kuiText"> | ||
| <EuiKeyboardAccessible> | ||
| <a className="kuiLink" onClick={this.resetColor}> | ||
| Reset | ||
| </a> | ||
| </EuiKeyboardAccessible> | ||
| </p> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| } | ||
| } |
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,54 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { renderToHtml } from '../../services'; | ||
|
|
||
| import { | ||
| GuideSectionTypes, | ||
| } from '../../components'; | ||
|
|
||
| import { ColorPicker } from './color_picker'; | ||
| const colorPickerSource = require('!!raw-loader!./color_picker'); | ||
| const colorPickerHtml = renderToHtml(ColorPicker); | ||
|
|
||
| import { ColorPickerLabelAndClear } from './color_picker_clear'; | ||
| const colorPickerClearSource = require('!!raw-loader!./color_picker_clear'); | ||
| const colorPickerClearHtml = renderToHtml(ColorPickerLabelAndClear); | ||
|
|
||
| import { ColorPickerNoColorLabel } from './color_picker_no_color_label'; | ||
| const colorPickerNoColorLabelSource = require('!!raw-loader!./color_picker_no_color_label'); | ||
| const colorPickerNoColorLabelHtml = renderToHtml(ColorPickerNoColorLabel); | ||
|
|
||
| export const ColorPickerExample = { | ||
| title: 'Color Picker', | ||
| sections: [{ | ||
| title: 'Color Picker', | ||
| source: [{ | ||
| type: GuideSectionTypes.JS, | ||
| code: colorPickerSource, | ||
| }, { | ||
| type: GuideSectionTypes.HTML, | ||
| code: colorPickerHtml, | ||
| }], | ||
| demo: <ColorPicker />, | ||
| }, { | ||
| title: 'Color Picker with label and reset link', | ||
| source: [{ | ||
| type: GuideSectionTypes.JS, | ||
| code: colorPickerClearSource, | ||
| }, { | ||
| type: GuideSectionTypes.HTML, | ||
| code: colorPickerClearHtml, | ||
| }], | ||
| demo: <ColorPickerLabelAndClear />, | ||
| }, { | ||
| title: 'Color Picker without a color labe', | ||
| source: [{ | ||
| type: GuideSectionTypes.JS, | ||
| code: colorPickerNoColorLabelSource, | ||
| }, { | ||
| type: GuideSectionTypes.HTML, | ||
| code: colorPickerNoColorLabelHtml, | ||
| }], | ||
| demo: <ColorPickerNoColorLabel />, | ||
| }], | ||
| }; |
42 changes: 42 additions & 0 deletions
42
src-docs/src/views/color_picker/color_picker_no_color_label.js
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,42 @@ | ||
| import React, { | ||
| Component, | ||
| } from 'react'; | ||
|
|
||
| import { | ||
| EuiColorPicker, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| } from '../../../../src/components'; | ||
|
|
||
| export class ColorPickerNoColorLabel extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| color: '#00FFFF' | ||
| }; | ||
| } | ||
|
|
||
| handleChange = (value) => { | ||
| this.setState({ color: value }); | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <EuiFlexGroup alignItems="center"> | ||
| <EuiFlexItem grow={false}> | ||
| <label className="kuiLabel"> | ||
| Foreground color | ||
| </label> | ||
| </EuiFlexItem> | ||
|
|
||
| <EuiFlexItem grow={false}> | ||
| <EuiColorPicker | ||
| onChange={this.handleChange} | ||
| color={this.state.color} | ||
| showColorLabel={false} | ||
| /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| } | ||
| } |
76 changes: 76 additions & 0 deletions
76
src/components/color_picker/__snapshots__/color_picker.test.js.snap
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,76 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`renders EuiColorPicker 1`] = ` | ||
| <div | ||
| class="euiColorPicker testClass1 testClass2" | ||
| data-test-subj="test subject string" | ||
| > | ||
| <div | ||
| class="euiColorPicker__preview" | ||
| > | ||
| <div | ||
| aria-label="aria-label" | ||
| class="euiColorPicker__swatch" | ||
| data-test-subj="colorSwatch" | ||
| style="background:#ffeedd" | ||
| /> | ||
| <div | ||
| aria-label="Color selection is #ffeedd" | ||
| class="euiColorPicker__label" | ||
| > | ||
| #ffeedd | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = ` | ||
| <div | ||
| class="euiColorPicker testClass1 testClass2" | ||
| data-test-subj="test subject string" | ||
| > | ||
| <div | ||
| class="euiColorPicker__preview" | ||
| > | ||
| <div | ||
| aria-label="aria-label" | ||
| class="euiColorPicker__swatch euiColorPicker__emptySwatch" | ||
| data-test-subj="colorSwatch" | ||
| style="background:" | ||
| > | ||
| <svg> | ||
| <line | ||
| x1="0" | ||
| x2="100%" | ||
| y1="100%" | ||
| y2="0" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| <div | ||
| aria-label="Color selection is (transparent)" | ||
| class="euiColorPicker__label" | ||
| > | ||
| (transparent) | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`renders EuiColorPicker without a color label when showColorLabel is false 1`] = ` | ||
| <div | ||
| class="euiColorPicker testClass1 testClass2" | ||
| data-test-subj="test subject string" | ||
| > | ||
| <div | ||
| class="euiColorPicker__preview" | ||
| > | ||
| <div | ||
| aria-label="aria-label" | ||
| class="euiColorPicker__swatch" | ||
| data-test-subj="colorSwatch" | ||
| style="background:#ffffff" | ||
| /> | ||
| </div> | ||
| </div> | ||
| `; |
Oops, something went wrong.