Add label and clear link to color picker (#12422)

* Add label and clear link to color picker * address code comments * Add extra example for no color label * Remove unnecessary div * Add tests for showColorLabel and transparent color choice
elastic · Jun 20, 2017 · ca553f2 · ca553f2
1 parent 22a70b7
commit ca553f2
Show file tree

Hide file tree

Showing 10 changed files with 298 additions and 20 deletions.
diff --git a/ui_framework/components/color_picker/__snapshots__/color_picker.test.js.snap b/ui_framework/components/color_picker/__snapshots__/color_picker.test.js.snap
@@ -23,3 +23,54 @@ exports[`renders KuiColorPicker 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders KuiColorPicker with an empty swatch when color is null 1`] = `
+<div
+  class="kuiColorPicker testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="kuiColorPicker__preview"
+  >
+    <div
+      aria-label="aria-label"
+      class="kuiColorPicker__swatch kuiColorPicker__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="kuiColorPicker__label"
+    >
+      (transparent)
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders KuiColorPicker without a color label when showColorLabel is false 1`] = `
+<div
+  class="kuiColorPicker testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="kuiColorPicker__preview"
+  >
+    <div
+      aria-label="aria-label"
+      class="kuiColorPicker__swatch"
+      data-test-subj="colorSwatch"
+      style="background:#ffffff;"
+    />
+  </div>
+</div>
+`;
diff --git a/ui_framework/components/color_picker/_color_picker.scss b/ui_framework/components/color_picker/_color_picker.scss
@@ -1,6 +1,5 @@
 .kuiColorPicker {
   cursor: pointer;
-  display: inline-block
 }
 
   .kuiColorPicker__preview {
@@ -13,6 +12,20 @@
     height: $colorPickerSize;
     border-radius: $globalBorderRadius;
     box-shadow: inset 0 0 0 1px rgba(#000, 0.2);
+    display: inline-block;
+  }
+
+  .kuiColorPicker__emptySwatch {
+    svg {
+      position: absolute;
+      width: $colorPickerSize;
+      height: $colorPickerSize;
+    }
+
+    svg line {
+      stroke: rgb(255, 0, 0);
+      stroke-width: 2;
+    }
   }
 
   .kuiColorPicker__label {

diff --git a/ui_framework/components/color_picker/color_picker.js b/ui_framework/components/color_picker/color_picker.js
@@ -4,6 +4,8 @@ import classNames from 'classnames';
 
 import { ChromePicker } from 'react-color';
 
+import { KuiColorPickerSwatch } from './color_picker_swatch';
+
 export class KuiColorPicker extends React.Component {
   constructor(props) {
     super(props);
@@ -41,8 +43,21 @@ export class KuiColorPicker extends React.Component {
     document.removeEventListener('click', this.closeColorSelector);
   }
 
+  getColorLabel() {
+    const { color } = this.props;
+    const colorValue = color === null ? '(transparent)' : color;
+    return (
+      <div
+        className="kuiColorPicker__label"
+        aria-label={`Color selection is ${ colorValue }`}
+      >
+        { colorValue }
+      </div>
+    );
+  }
+
   render() {
-    const { color, className } = this.props;
+    const { color, className, showColorLabel } = this.props;
     const classes = classNames('kuiColorPicker', className);
     return (
       <div
@@ -54,24 +69,14 @@ export class KuiColorPicker extends React.Component {
           className="kuiColorPicker__preview"
           onClick={ this.toggleColorSelector }
         >
-          <div
-            className="kuiColorPicker__swatch"
-            aria-label={ this.props['aria-label'] }
-            data-test-subj="colorSwatch"
-            style={{ background: color }}
-          />
-          <div
-            className="kuiColorPicker__label"
-            aria-label={`Color selection is ${color}`}
-          >
-            { color }
-          </div>
+          <KuiColorPickerSwatch color={ color } aria-label={ this.props['aria-label'] } />
+          { showColorLabel ? this.getColorLabel() : null }
         </div>
         {
           this.state.showColorSelector ?
             <div className="kuiColorPickerPopUp" data-test-subj="colorPickerPopup">
               <ChromePicker
-                color={ color }
+                color={ color ? color : '#ffffff' }
                 disableAlpha={ true }
                 onChange={ this.handleColorSelection }
               />
@@ -85,10 +90,12 @@ export class KuiColorPicker extends React.Component {
 
 KuiColorPicker.propTypes = {
   className: PropTypes.string,
-  color: PropTypes.string.isRequired,
+  color: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  showColorLabel: PropTypes.bool,
 };
 
 KuiColorPicker.defaultProps = {
-  'aria-label': 'Select a color'
+  'aria-label': 'Select a color',
+  showColorLabel: true,
 };
diff --git a/ui_framework/components/color_picker/color_picker.test.js b/ui_framework/components/color_picker/color_picker.test.js
@@ -24,6 +24,29 @@ test('renders KuiColorPicker', () => {
   expect(colorPicker).toMatchSnapshot();
 });
 
+test('renders KuiColorPicker with an empty swatch when color is null', () => {
+  const colorPicker = render(
+    <KuiColorPicker
+      onChange={ onChange }
+      color={ null }
+      { ...requiredProps }
+    />
+  );
+  expect(colorPicker).toMatchSnapshot();
+});
+
+test('renders KuiColorPicker without a color label when showColorLabel is false', () => {
+  const colorPicker = render(
+    <KuiColorPicker
+      onChange={ onChange }
+      color={ '#ffffff' }
+      showColorLabel={ false }
+      { ...requiredProps }
+    />
+  );
+  expect(colorPicker).toMatchSnapshot();
+});
+
 test('pop up color selector is not shown by default', () => {
   const colorPicker = mount(
     <KuiColorPicker

diff --git a/ui_framework/components/color_picker/color_picker_empty_swatch.js b/ui_framework/components/color_picker/color_picker_empty_swatch.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export function KuiColorPickerEmptySwatch() {
+  return (
+    <svg>
+      <line x1="0" y1="100%" x2="100%" y2="0" />
+    </svg>
+  );
+}
+
diff --git a/ui_framework/components/color_picker/color_picker_swatch.js b/ui_framework/components/color_picker/color_picker_swatch.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { KuiColorPickerEmptySwatch } from './color_picker_empty_swatch';
+
+export function KuiColorPickerSwatch(props) {
+  const { color, className } = props;
+  const isClear = !color;
+  const classes = classNames('kuiColorPicker__swatch', className, {
+    'kuiColorPicker__emptySwatch': isClear,
+  });
+  let children;
+
+  if (isClear) {
+    children = <KuiColorPickerEmptySwatch />;
+  }
+
+  return (
+    <div
+      className={ classes }
+      aria-label={ props['aria-label'] }
+      data-test-subj="colorSwatch"
+      style={{ background: color ? color : '' }}
+    >
+      {children}
+    </div>
+  );
+}
+
+KuiColorPickerSwatch.propTypes = {
+  className: PropTypes.string,
+  color: PropTypes.string,
+};
+
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -667,8 +667,7 @@ body {
     opacity: 1; }
 
 .kuiColorPicker {
-  cursor: pointer;
-  display: inline-block; }
+  cursor: pointer; }
 
 .kuiColorPicker__preview {
   display: -webkit-box;
@@ -684,7 +683,17 @@ body {
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  display: inline-block; }
+
+.kuiColorPicker__emptySwatch svg {
+  position: absolute;
+  width: 20px;
+  height: 20px; }
+
+.kuiColorPicker__emptySwatch svg line {
+  stroke: red;
+  stroke-width: 2; }
 
 .kuiColorPicker__label {
   font-size: 14px;

diff --git a/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js b/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import {
+  KuiColorPicker,
+  KuiFieldGroup,
+  KuiFieldGroupSection,
+  KuiKeyboardAccessible,
+} from '../../../../components/index';
+
+export class ColorPickerLabelAndClear extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      color: null
+    };
+  }
+
+  handleChange = (value) => {
+    this.setState({ color: value });
+  };
+
+  resetColor = () => {
+    this.setState({ color: null });
+  };
+
+  render() {
+    return (
+      <KuiFieldGroup>
+        <KuiFieldGroupSection>
+          <label className="kuiLabel">
+            Background color
+          </label>
+        </KuiFieldGroupSection>
+
+        <KuiFieldGroupSection>
+          <KuiColorPicker
+            onChange={ this.handleChange }
+            color={ this.state.color }
+          />
+        </KuiFieldGroupSection>
+
+        <KuiFieldGroupSection>
+          <p className="kuiText">
+            <KuiKeyboardAccessible>
+              <a className="kuiLink" onClick={ this.resetColor }>
+                Reset
+              </a>
+            </KuiKeyboardAccessible>
+          </p>
+        </KuiFieldGroupSection>
+      </KuiFieldGroup>
+    );
+  }
+}
diff --git a/ui_framework/doc_site/src/views/color_picker/color_picker_example.js b/ui_framework/doc_site/src/views/color_picker/color_picker_example.js
@@ -13,6 +13,14 @@ import { ColorPicker } from './color_picker';
 const colorPickerSource = require('!!raw!./color_picker');
 const colorPickerHtml = renderToHtml(ColorPicker);
 
+import { ColorPickerLabelAndClear } from './color_picker_clear';
+const colorPickerClearSource = require('!!raw!./color_picker_clear');
+const colorPickerClearHtml = renderToHtml(ColorPickerLabelAndClear);
+
+import { ColorPickerNoColorLabel } from './color_picker_no_color_label';
+const colorPickerNoColorLabelSource = require('!!raw!./color_picker_no_color_label');
+const colorPickerNoColorLabelHtml = renderToHtml(ColorPickerNoColorLabel);
+
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
@@ -29,5 +37,33 @@ export default props => (
         <ColorPicker />
       </GuideDemo>
     </GuideSection>
+    <GuideSection
+      title="Color Picker with label and reset link"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: colorPickerClearSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: colorPickerClearHtml,
+      }]}
+    >
+      <GuideDemo>
+        <ColorPickerLabelAndClear />
+      </GuideDemo>
+    </GuideSection>
+    <GuideSection
+      title="Color Picker without a color label"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: colorPickerNoColorLabelSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: colorPickerNoColorLabelHtml,
+      }]}
+    >
+      <GuideDemo>
+        <ColorPickerNoColorLabel />
+      </GuideDemo>
+    </GuideSection>
   </GuidePage>
 );