Adds prepend and append to the EuiColorPicker (#2819)

* Adding prepend and append to the color picker * Adding missing className * Updating tests * Adding changelog * Fixing border radius when in group * Improving prepend and append props description * Addibg missing popover className
elastic · Feb 4, 2020 · 745816f · 745816f
1 parent 4f2e52f
commit 745816f
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Converted `EuiDescribedFormGroup` to TypeScript ([#2810](https://github.com/elastic/eui/pull/2810))
 - Changed SASS comments to non-compiled comments in invisibles files ([#2807](https://github.com/elastic/eui/pull/2807))
 - Added `rowHeader` prop to `EuiBasicTable` to allow consumers to set the identifying cell in a row ([#2802](https://github.com/elastic/eui/pull/2802))
+- Added prepend and append to `EuiColorPicker` ([#2819](https://github.com/elastic/eui/pull/2819))
 - Improved `EuiDescribedFormGroup` accessibility by avoiding duplicated output in screen readers ([#2783](https://github.com/elastic/eui/pull/2783))
 - Added optional `key` attribute to `EuiContextMenu` items and relaxed `name` attribute to allow any React node ([#2817](https://github.com/elastic/eui/pull/2817))
 

diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js
@@ -16,7 +16,7 @@ export const KitchenSink = () => {
   return (
     <React.Fragment>
       {/* DisplayToggles wrapper for Docs only */}
-      <DisplayToggles canLoading={false}>
+      <DisplayToggles canLoading={false} canPrepend={true} canAppend={true}>
         <EuiColorPicker color={color} onChange={setColor} />
       </DisplayToggles>
       <EuiSpacer />

diff --git a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders EuiColorPicker 1`] = `
 <div
-  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
+  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
 >
   <div
     class="euiPopover__anchor"
@@ -78,7 +78,7 @@ exports[`renders EuiColorPicker 1`] = `
 
 exports[`renders EuiColorPicker with a color swatch when color is defined 1`] = `
 <div
-  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
+  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
 >
   <div
     class="euiPopover__anchor"
@@ -154,7 +154,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
 
 exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
 <div
-  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
+  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
 >
   <div
     class="euiPopover__anchor"
@@ -229,7 +229,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
 
 exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
 <div
-  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
+  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
 >
   <div
     class="euiPopover__anchor"
@@ -302,9 +302,95 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
 </div>
 `;
 
+exports[`renders a EuiColorPicker with a prepend and append 1`] = `
+<div
+  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
+>
+  <div
+    class="euiPopover__anchor"
+  >
+    <div
+      class="euiFormControlLayout euiFormControlLayout--group"
+    >
+      <label
+        class="euiFormLabel euiFormControlLayout__prepend"
+      >
+        prepend
+      </label>
+      <div
+        class="euiFormControlLayout__childrenWrapper"
+      >
+        <div
+          style="color:#ffeedd"
+        >
+          <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 euiColorPicker__input--inGroup euiFieldText--withIcon"
+                data-test-subj="colorPickerAnchor"
+                maxlength="7"
+                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>
+      <label
+        class="euiFormLabel euiFormControlLayout__append"
+      >
+        append
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders compressed EuiColorPicker 1`] = `
 <div
-  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
+  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
 >
   <div
     class="euiPopover__anchor"
@@ -380,7 +466,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
 
 exports[`renders disabled EuiColorPicker 1`] = `
 <div
-  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
+  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
 >
   <div
     class="euiPopover__anchor"
@@ -457,7 +543,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
 
 exports[`renders fullWidth EuiColorPicker 1`] = `
 <div
-  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
+  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
 >
   <div
     class="euiPopover__anchor"
@@ -716,7 +802,7 @@ exports[`renders inline EuiColorPicker 1`] = `
 
 exports[`renders readOnly EuiColorPicker 1`] = `
 <div
-  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock"
+  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
 >
   <div
     class="euiPopover__anchor"

diff --git a/src/components/color_picker/_color_picker.scss b/src/components/color_picker/_color_picker.scss
@@ -1,7 +1,6 @@
 .euiColorPicker {
   position: relative;
   width: $euiColorPickerWidth;
-
 }
 
 .euiColorPicker__popoverAnchor {
@@ -28,3 +27,15 @@
   // sass-lint:disable no-important
   padding-bottom: 0 !important;
 }
+
+// sass-lint:disable no-important
+.euiColorPicker__input--inGroup {
+  height: $euiFormControlLayoutGroupInputHeight !important;
+  box-shadow: none !important;
+  border-radius: 0;
+
+  &.euiFieldText--compressed {
+    height: $euiFormControlLayoutGroupInputCompressedHeight !important;
+    border-radius: 0;
+  }
+}
diff --git a/src/components/color_picker/color_picker.test.tsx b/src/components/color_picker/color_picker.test.tsx
@@ -79,6 +79,20 @@ test('renders inline EuiColorPicker', () => {
   expect(colorPicker).toMatchSnapshot();
 });
 
+test('renders a EuiColorPicker with a prepend and append', () => {
+  const component = render(
+    <EuiColorPicker
+      onChange={onChange}
+      color="#ffeedd"
+      prepend="prepend"
+      append="append"
+      {...requiredProps}
+    />
+  );
+
+  expect(component).toMatchSnapshot();
+});
+
 test('renders EuiColorPicker with an empty swatch when color is null', () => {
   const colorPicker = render(
     <EuiColorPicker onChange={onChange} color={null} {...requiredProps} />

diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx
@@ -17,7 +17,10 @@ import { EuiFocusTrap } from '../focus_trap';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 // @ts-ignore
 import { EuiFieldText } from '../form/field_text';
-import { EuiFormControlLayout } from '../form/form_control_layout';
+import {
+  EuiFormControlLayout,
+  EuiFormControlLayoutProps,
+} from '../form/form_control_layout';
 import { EuiI18n } from '../i18n';
 import { EuiPopover } from '../popover';
 import {
@@ -77,6 +80,16 @@ export interface EuiColorPickerProps
    *  Array of hex strings (3 or 6 character) to use as swatch options. Defaults to EUI visualization colors
    */
   swatches?: string[];
+
+  /**
+   * Creates an input group with element(s) coming before input. It only shows when the `display` is set to `default`.
+   */
+  prepend?: EuiFormControlLayoutProps['prepend'];
+
+  /**
+   * Creates an input group with element(s) coming after input. It only shows when the `display` is set to `default`.
+   */
+  append?: EuiFormControlLayoutProps['append'];
 }
 
 function isKeyboardEvent(
@@ -102,6 +115,8 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   readOnly = false,
   swatches = VISUALIZATION_COLORS,
   popoverZIndex,
+  prepend,
+  append,
 }) => {
   const [isColorSelectorShown, setIsColorSelectorShown] = useState(false);
   const [colorAsHsv, setColorAsHsv] = useState(
@@ -124,13 +139,17 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   }, [color, lastHex]);
 
   const classes = classNames('euiColorPicker', className);
+  const popoverClass = 'euiColorPicker__popoverAnchor';
   const panelClasses = classNames('euiColorPicker__popoverPanel', {
     'euiColorPicker__popoverPanel--pickerOnly': mode === 'picker',
     'euiColorPicker__popoverPanel--customButton': button,
   });
   const swatchClass = 'euiColorPicker__swatchSelect';
   const testSubjAnchor = 'colorPickerAnchor';
   const testSubjPopover = 'colorPickerPopover';
+  const inputClasses = classNames('euiColorPicker__input', {
+    'euiColorPicker__input--inGroup': prepend || append,
+  });
 
   const handleOnChange = (hex: string) => {
     setLastHex(hex);
@@ -313,7 +332,9 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
         readOnly={readOnly}
         fullWidth={fullWidth}
         compressed={compressed}
-        onKeyDown={handleToggleOnKeyDown}>
+        onKeyDown={handleToggleOnKeyDown}
+        prepend={prepend}
+        append={append}>
         <div
           // Used to pass the chosen color through to form layout SVG using currentColor
           style={{ color: showColor && color ? color : undefined }}>
@@ -325,7 +346,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
             ]}>
             {([openLabel, closeLabel]: string[]) => (
               <EuiFieldText
-                className="euiColorPicker__input"
+                className={inputClasses}
                 onClick={handleInputActivity}
                 onKeyDown={handleInputActivity}
                 value={color ? color.toUpperCase() : ''}
@@ -360,6 +381,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
       isOpen={isColorSelectorShown}
       closePopover={handleFinalSelection}
       zIndex={popoverZIndex}
+      className={popoverClass}
       panelClassName={panelClasses}
       display={button ? 'inlineBlock' : 'block'}
       attachToAnchor={button ? false : true}