From 711f9ff1ee44208e3f18da441637db59e6891267 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Mon, 28 Oct 2019 00:06:32 -0700 Subject: [PATCH] Storybook: Add ColorPicker component (#18013) * Add color picker component to Storybook * Switch screen-reader-text to new VisuallyHidden * Update ColorPicker tests snapshots * Add story for showing Alpha Channel * Move state out of exported component * Lowercase story name --- packages/components/src/color-picker/hue.js | 6 +-- .../components/src/color-picker/inputs.js | 9 +++-- .../components/src/color-picker/saturation.js | 6 +-- .../src/color-picker/stories/index.js | 39 +++++++++++++++++++ .../test/__snapshots__/index.js.snap | 24 ++++++------ 5 files changed, 62 insertions(+), 22 deletions(-) create mode 100644 packages/components/src/color-picker/stories/index.js diff --git a/packages/components/src/color-picker/hue.js b/packages/components/src/color-picker/hue.js index 214df7e725bdc1..0c97020d89efdc 100644 --- a/packages/components/src/color-picker/hue.js +++ b/packages/components/src/color-picker/hue.js @@ -43,6 +43,7 @@ import { TAB } from '@wordpress/keycodes'; */ import { calculateHueChange } from './utils'; import KeyboardShortcuts from '../keyboard-shortcuts'; +import VisuallyHidden from '../visually-hidden'; export class Hue extends Component { constructor() { @@ -157,12 +158,11 @@ export class Hue extends Component { style={ pointerLocation } onKeyDown={ this.preventKeyEvents } /> -

{ __( 'Move the arrow left or right to change hue.' ) } -

+ { /* eslint-enable jsx-a11y/no-static-element-interactions */ } diff --git a/packages/components/src/color-picker/inputs.js b/packages/components/src/color-picker/inputs.js index 39817d13edb74f..42e77a31e71820 100644 --- a/packages/components/src/color-picker/inputs.js +++ b/packages/components/src/color-picker/inputs.js @@ -17,6 +17,7 @@ import { pure } from '@wordpress/compose'; */ import IconButton from '../icon-button'; import TextControl from '../text-control'; +import VisuallyHidden from '../visually-hidden'; import { isValidHex } from './utils'; /* Wrapper for TextControl, only used to handle intermediate state while typing. */ @@ -175,9 +176,9 @@ export class Inputs extends Component { } else if ( this.state.view === 'rgb' ) { return (
- + { __( 'Color value in RGB' ) } - +
- + { __( 'Color value in HSL' ) } - +
-
{ __( 'Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.' ) } -
+
); diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js new file mode 100644 index 00000000000000..19bca39729d4f5 --- /dev/null +++ b/packages/components/src/color-picker/stories/index.js @@ -0,0 +1,39 @@ + +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import ColorPicker from '../'; + +export default { title: 'ColorPicker', component: ColorPicker }; + +const ColorPickerWithState = ( { ...props } ) => { + const [ color, setColor ] = useState( '#f00' ); + return ( + setColor( value.hex ) } + /> + ); +}; + +export const _default = () => { + return ( + + ); +}; + +export const alphaEnabled = () => { + return ( + + ); +}; diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap index 5d61a24e5ac9e6..a3713f860f3c01 100644 --- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap +++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap @@ -39,7 +39,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = ` } />
Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation. @@ -99,7 +99,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = ` tabIndex="0" />

Move the arrow left or right to change hue. @@ -213,7 +213,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] = } />

Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation. @@ -273,7 +273,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] = tabIndex="0" />

Move the arrow left or right to change hue. @@ -387,7 +387,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] = } />

Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation. @@ -447,7 +447,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] = tabIndex="0" />

Move the arrow left or right to change hue. @@ -561,7 +561,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = ` } />

Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation. @@ -621,7 +621,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = ` tabIndex="0" />

Move the arrow left or right to change hue. @@ -735,7 +735,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = ` } />

Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation. @@ -795,7 +795,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = ` tabIndex="0" />

Move the arrow left or right to change hue. @@ -909,7 +909,7 @@ exports[`ColorPicker should render color picker 1`] = ` } />

Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation. @@ -969,7 +969,7 @@ exports[`ColorPicker should render color picker 1`] = ` tabIndex="0" />

Move the arrow left or right to change hue.