[Feature branch] Added EuiFormControlLayoutDelimited component (#2117)

As a layout helper component to create date and number ranges

* Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version

src-docs/src/views/form_controls/form_control_layout_range.js

@@ -0,0 +1,137 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiFormControlLayoutDelimited,
+  EuiSpacer,
+  EuiFormLabel,
+  EuiIcon,
+} from '../../../../src/components';
+
+export default () => (
+  <Fragment>
+    <EuiFormControlLayoutDelimited
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutDelimited
+      append={<EuiFormLabel>px</EuiFormLabel>}
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutDelimited
+      icon="vector"
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutDelimited
+      clear={{ onClick: () => {} }}
+      isLoading
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutDelimited
+      fullWidth
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutDelimited
+      isLoading
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutDelimited
+      compressed
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayoutDelimited
+      prepend={<EuiFormLabel>Add</EuiFormLabel>}
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      delimiter="+"
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayoutDelimited
+      prepend={<EuiFormLabel>Merge</EuiFormLabel>}
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      delimiter={<EuiIcon type="merge" />}
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayoutDelimited
+      readOnly
+      prepend={<EuiFormLabel>Read only</EuiFormLabel>}
+      startControl={
+        <input
+          type="number"
+          placeholder="0"
+          className="euiFieldNumber"
+          readOnly
+        />
+      }
+      endControl={
+        <input
+          type="number"
+          placeholder="100"
+          className="euiFieldNumber"
+          readOnly
+        />
+      }
+    />
+  </Fragment>
+);

src-docs/src/views/form_controls/form_controls_example.js

@@ -18,6 +18,7 @@ import {
   EuiFieldText,
   EuiFilePicker,
   EuiFormControlLayout,
+  EuiFormControlLayoutDelimited,
   EuiLink,
   EuiRadio,
   EuiRadioGroup,
@@ -78,6 +79,10 @@ import FormControlLayout from './form_control_layout';
 const formControlLayoutSource = require('!!raw-loader!./form_control_layout');
 const formControlLayoutHtml = renderToHtml(FormControlLayout);
 
+import FormControlLayoutRange from './form_control_layout_range';
+const formControlLayoutRangeSource = require('!!raw-loader!./form_control_layout_range');
+const formControlLayoutRangeHtml = renderToHtml(FormControlLayoutRange);
+
 export const FormControlsExample = {
   title: 'Form controls',
   sections: [
@@ -351,5 +356,45 @@ export const FormControlsExample = {
       },
       demo: <FormControlLayout />,
     },
+    {
+      title: 'Form control layout delimited',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: formControlLayoutRangeSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: formControlLayoutRangeHtml,
+        },
+      ],
+      text: (
+        <Fragment>
+          <p>
+            <EuiBadge color={'warning'}>Building block only</EuiBadge>
+          </p>
+
+          <p>
+            Like <EuiCode>EuiFormControlLayout</EuiCode>,{' '}
+            <EuiCode>EuiFormControlLayoutDelimited</EuiCode> is generally used
+            internally to consistently style form controls. This component
+            specifically lays out two form controls with center text or icon.
+          </p>
+          <p>
+            It takes all of the same props as{' '}
+            <EuiCode>EuiFormControlLayout</EuiCode> except for{' '}
+            <EuiCode>children</EuiCode>. Instead it requires both a{' '}
+            <strong>single</strong> <EuiCode>startControl</EuiCode> and a{' '}
+            <strong>single</strong> <EuiCode>endControl</EuiCode>. You can
+            optionally change the center content to a different string or node
+            (like an EuiIcon).
+          </p>
+        </Fragment>
+      ),
+      props: {
+        EuiFormControlLayoutDelimited,
+      },
+      demo: <FormControlLayoutRange />,
+    },
   ],
 };

src/components/date_picker/_date_picker_range.scss

@@ -1,5 +1,6 @@
 @import '../form/variables';
 @import '../form/mixins';
+@import '../form/form_control_layout/variables';
 
 /**
  * 1. Account for inner box-shadow style border
@@ -34,7 +35,7 @@
     padding: 0;
 
     .euiDatePicker {
-      height: $euiFormControlHeight - 2px;
+      height: $euiFormControlLayoutGroupInputHeight;
     }
   }
 

src/components/date_picker/super_date_picker/_mixins.scss

@@ -1,10 +1,12 @@
+@import '../../form/form_control_layout/variables';
+
 @mixin euiSuperDatePickerText {
   @include euiFormControlText;
   display: block;
   width: 100%;
   padding: 0 $euiSizeS;
-  line-height: $euiFormControlHeight - 2px;
-  height: $euiFormControlHeight - 2px;
+  line-height: $euiFormControlLayoutGroupInputHeight;
+  height: $euiFormControlLayoutGroupInputHeight;
   word-break: break-all;
   transition: background $euiAnimSpeedFast ease-in;
 }

src/components/form/_index.scss

@@ -1,5 +1,3 @@
-@import 'form_control_layout/mixins';
-
 @import 'variables';
 @import 'mixins';
 

src/components/form/_mixins.scss

@@ -1,3 +1,6 @@
+@import 'variables';
+@import 'form_control_layout/variables';
+
 @mixin euiPlaceholderPerBrowser {
   // sass-lint:disable-block no-vendor-prefixes
   // Each prefix must be it's own content block
@@ -54,11 +57,11 @@
     }
 
     &--inGroup:not(:read-only) {
-      height: $euiFormControlHeight - 2px; /* 2 */
+      height: $euiFormControlLayoutGroupInputHeight; /* 2 */
     }
 
     &--inGroup#{&}--compressed:not(:read-only) {
-      height: $euiFormControlCompressedHeight - 2px; /* 2 */
+      height: $euiFormControlLayoutGroupInputCompressedHeight; /* 2 */
     }
   }
 }

src/components/form/_variables.scss

@@ -16,7 +16,7 @@ $euiSwitchIconHeight: $euiSize !default;
 // Coloring
 $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default;
 $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
-$euiFormBorderOpaqueColor: shade(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%) !default;
+$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 60%) !default;
 $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade

src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap

@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiFormControlLayoutDelimited is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiFormControlLayout euiFormControlLayoutDelimited testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiFormControlLayout__childrenWrapper"
+  >
+    <span
+      class="euiFormControlLayoutDelimited__child--noStyle euiFormControlLayoutDelimited__child--centered"
+    >
+      start
+    </span>
+    <div
+      class="euiText euiText--small euiFormControlLayoutDelimited__delimeter"
+    >
+      <div
+        class="euiTextColor euiTextColor--subdued"
+      >
+        →
+      </div>
+    </div>
+    <span
+      class="euiFormControlLayoutDelimited__child--noStyle euiFormControlLayoutDelimited__child--centered"
+    >
+      end
+    </span>
+  </div>
+</div>
+`;
+
+exports[`EuiFormControlLayoutDelimited props delimiter is rendered as a node 1`] = `
+<div
+  class="euiFormControlLayout euiFormControlLayoutDelimited"
+>
+  <div
+    class="euiFormControlLayout__childrenWrapper"
+  >
+    <span
+      class="euiFormControlLayoutDelimited__child--noStyle euiFormControlLayoutDelimited__child--centered"
+    >
+      start
+    </span>
+    <div
+      class="euiText euiText--small euiFormControlLayoutDelimited__delimeter"
+    >
+      <div
+        class="euiTextColor euiTextColor--subdued"
+      >
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </div>
+    </div>
+    <span
+      class="euiFormControlLayoutDelimited__child--noStyle euiFormControlLayoutDelimited__child--centered"
+    >
+      end
+    </span>
+  </div>
+</div>
+`;
+
+exports[`EuiFormControlLayoutDelimited props delimiter is rendered as a string 1`] = `
+<div
+  class="euiFormControlLayout euiFormControlLayoutDelimited"
+>
+  <div
+    class="euiFormControlLayout__childrenWrapper"
+  >
+    <span
+      class="euiFormControlLayoutDelimited__child--noStyle euiFormControlLayoutDelimited__child--centered"
+    >
+      start
+    </span>
+    <div
+      class="euiText euiText--small euiFormControlLayoutDelimited__delimeter"
+    >
+      <div
+        class="euiTextColor euiTextColor--subdued"
+      >
+        +
+      </div>
+    </div>
+    <span
+      class="euiFormControlLayoutDelimited__child--noStyle euiFormControlLayoutDelimited__child--centered"
+    >
+      end
+    </span>
+  </div>
+</div>
+`;