[Feature branch] Added EuiFormControlLayoutDelimited component

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

@@ -0,0 +1,122 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiFormControlLayoutRange,
+  EuiSpacer,
+  EuiFormLabel,
+} from '../../../../src/components';
+
+export default () => (
+  <Fragment>
+    <EuiFormControlLayoutRange
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutRange
+      append={<EuiFormLabel>px</EuiFormLabel>}
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutRange
+      icon="vector"
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutRange
+      clear={{ onClick: () => {} }}
+      isLoading
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutRange
+      fullWidth
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutRange
+      isLoading
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+    <EuiFormControlLayoutRange
+      compressed
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayoutRange
+      prepend={<EuiFormLabel>Label</EuiFormLabel>}
+      startControl={
+        <input type="number" placeholder="0" className="euiFieldNumber" />
+      }
+      endControl={
+        <input type="number" placeholder="100" className="euiFieldNumber" />
+      }
+    />
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayoutRange
+      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,
+  EuiFormControlLayoutRange,
   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,41 @@ export const FormControlsExample = {
       },
       demo: <FormControlLayout />,
     },
+    {
+      title: 'Form control layout range',
+      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>EuiFormControlLayoutRange</EuiCode> is generally used
+            internally to consistently style form controls. This component
+            specifically lays out two form controls with a middle arrow. It
+            takes all of the same props as{' '}
+            <EuiCode>EuiFormControlLayout</EuiCode> except for{' '}
+            <EuiCode>children</EuiCode>. Instead it require both a{' '}
+            <strong>single</strong> <EuiCode>startControl</EuiCode> and a{' '}
+            <strong>single</strong> <EuiCode>endControl</EuiCode>.
+          </p>
+        </Fragment>
+      ),
+      props: {
+        EuiFormControlLayoutRange,
+      },
+      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,5 @@
+@import 'variables';
+@import 'form_control_layout/variables';
 
 @function euiFormControlGradient($color: $euiColorPrimary) {
   @return linear-gradient(to top,
@@ -44,11 +46,11 @@
     }
 
     &--inGroup:not(:read-only) {
-      height: $euiFormControlHeight - 2px; /* 2 */
+      height: $euiFormControlLayoutGroupInputHeight; /* 2 */
     }
 
     &--inGroup#{&}--compressed:not(:read-only) {
-      height: $euiFormControlCompressedHeight - 2px; /* 2 */
+      height: $euiFormControlLayoutGroupInputCompressedHeight; /* 2 */
     }
   }
 }
@@ -112,12 +114,12 @@
   background-size: 100% 100%; /* 3 */
 
   @if ($borderOnly) {
-    box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .84);
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
   } @else {
     box-shadow:
       0 1px 1px -1px transparentize($euiShadowColor, .8),
       0 4px 4px -2px transparentize($euiShadowColor, .8),
-      inset 0 0 0 1px transparentize($euiColorFullShade, .84);
+      inset 0 0 0 1px $euiFormBorderColor;
   }
 }
 

src/components/form/_variables.scss

@@ -16,8 +16,9 @@ $euiSwitchIconHeight: $euiSize !default;
 // Coloring
 $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default;
 $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
-$euiFormBorderColor: transparentize($euiColorFullShade, .9) !default;
-$euiFormBorderDisabledColor: transparentize($euiColorFullShade, .92) !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
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8);

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiFormControlLayoutRange is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiFormControlLayout euiFormControlLayoutRange testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiFormControlLayout__childrenWrapper"
+  >
+    <span
+      class="euiFormControlLayoutRange__child--noStyle euiFormControlLayoutRange__child--centered"
+    >
+      start
+    </span>
+    <div
+      class="euiText euiText--small euiFormControlLayoutRange__delimeter"
+    >
+      <div
+        class="euiTextColor euiTextColor--subdued"
+      >
+        →
+      </div>
+    </div>
+    <span
+      class="euiFormControlLayoutRange__child--noStyle euiFormControlLayoutRange__child--centered"
+    >
+      end
+    </span>
+  </div>
+</div>
+`;

src/components/form/form_control_layout/_form_control_layout.scss

@@ -28,7 +28,7 @@
   .euiFormControlLayout__prepend,
   .euiFormControlLayout__append {
     flex-shrink: 0;
-    height: $euiFormControlHeight - 2px; /* 1 */
+    height: $euiFormControlLayoutGroupInputHeight;
     line-height: $euiFontSize;
     border: none; // remove any border in case it exists
 
@@ -66,7 +66,7 @@
   &.euiFormControlLayout--compressed {
     .euiFormControlLayout__prepend,
     .euiFormControlLayout__append {
-      height: $euiFormControlCompressedHeight - 2px; /* 1 */
+      height: $euiFormControlLayoutGroupInputCompressedHeight;
 
       &.euiFormLabel,
       &.euiText {
@@ -76,12 +76,19 @@
     }
   }
 
+  > .euiFormControlLayout--compressed {
+    height: $euiFormControlLayoutGroupInputCompressedHeight;
+  }
+
   //
   // ReadOnly alterations
   &.euiFormControlLayout--readOnly {
     @include euiFormControlReadOnlyStyle;
     padding: 0; /* 1 */
-    background-color: transparent; // Ensures the input and layout don't double up on background color
+
+    input {
+      background-color: transparent; // Ensures the input and layout don't double up on background color
+    }
 
     .euiFormControlLayout__prepend,
     .euiFormControlLayout__append {

src/components/form/form_control_layout/_form_control_layout_range.scss

@@ -0,0 +1,56 @@
+.euiFormControlLayoutRange {
+  // Match just the regular drop shadow of inputs
+  @include euiFormControlDefaultShadow;
+  padding: 1px; /* 1 */
+
+  > .euiFormControlLayout__childrenWrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  input {
+    height: $euiFormControlLayoutGroupInputHeight;
+  }
+
+  &[class*='--compressed'] input {
+    height: $euiFormControlLayoutGroupInputCompressedHeight;
+    padding-top: 0; // Fixes IE
+    padding-bottom: 0; // Fixes IE
+  }
+
+  &[class*='--fullWidth'] input {
+    max-width: none;
+  }
+
+  .euiFormControlLayoutIcons {
+    // Absolutely positioning the icons doesn't work because they
+    // overlay only one of controls making the layout unbalanced
+    position: static; // Overrider absolute
+    padding-left: $euiFormControlPadding;
+    padding-right: $euiFormControlPadding;
+    flex-shrink: 0; // Fixes IE
+
+    &:not(.euiFormControlLayoutIcons--right) {
+      order: -1;
+    }
+  }
+}
+
+.euiFormControlLayoutRange__child--noStyle {
+  // sass-lint:disable-block no-important
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+.euiFormControlLayoutRange__child--centered {
+  text-align: center;
+}
+
+.euiFormControlLayoutRange__delimeter {
+  // sass-lint:disable-block no-important
+  // Override EuiText line-height
+  line-height: 1 !important;
+  flex: 0 0 auto;
+  padding-left: $euiFormControlPadding / 2;
+  padding-right: $euiFormControlPadding / 2;
+}