From 1ee77275de7c067c112caa429931cc8ab697f1f5 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 29 Jul 2019 15:39:21 -0400
Subject: [PATCH] Fix for delimited

---
 src-docs/src/views/range/compressed.js        | 25 +++++++++++++++++--
 .../__snapshots__/dual_range.test.js.snap     |  2 +-
 .../range/__snapshots__/range.test.js.snap    |  2 +-
 src/components/form/range/dual_range.js       |  4 +--
 src/components/form/range/range_wrapper.tsx   |  3 +++
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/views/range/compressed.js b/src-docs/src/views/range/compressed.js
index d8ff861d354e..eb34dfb062dc 100644
--- a/src-docs/src/views/range/compressed.js
+++ b/src-docs/src/views/range/compressed.js
@@ -51,7 +51,6 @@ export default class extends Component {
           id={makeId()}
           value={this.state.value}
           onChange={this.onChange}
-          // compressed
           showInput="only"
           showLabels
         />
@@ -62,7 +61,29 @@ export default class extends Component {
           id={makeId()}
           value={this.state.dualValue}
           onChange={this.onDualChange}
-          // compressed
+          showInput="only"
+          showLabels
+          levels={this.levels}
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiRange
+          id={makeId()}
+          value={this.state.value}
+          onChange={this.onChange}
+          compressed
+          showInput="only"
+          showLabels
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          value={this.state.dualValue}
+          onChange={this.onDualChange}
+          compressed
           showInput="only"
           showLabels
           levels={this.levels}
diff --git a/src/components/form/range/__snapshots__/dual_range.test.js.snap b/src/components/form/range/__snapshots__/dual_range.test.js.snap
index 93265b5a06d6..63f9b377f058 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.js.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.js.snap
@@ -82,7 +82,7 @@ exports[`EuiDualRange is rendered 1`] = `
 
 exports[`EuiDualRange props compressed should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiRangeWrapper--compressed euiDualRange"
 >
   <div
     class="euiRangeTrack"
diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap
index 26b7c322e843..4fdb09a4b5e1 100644
--- a/src/components/form/range/__snapshots__/range.test.js.snap
+++ b/src/components/form/range/__snapshots__/range.test.js.snap
@@ -73,7 +73,7 @@ exports[`EuiRange is rendered 1`] = `
 
 exports[`EuiRange props compressed should render 1`] = `
 <div
-  class="euiRangeWrapper euiRange"
+  class="euiRangeWrapper euiRangeWrapper--compressed euiRange"
 >
   <div
     class="euiRangeTrack"
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 307a6f2e745d..11003f64d9f7 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { keyCodes } from '../../../services';
 import { isWithinRange } from '../../../services/number';
 import { EuiPopover } from '../../popover';
-import { EuiFormControlLayoutRange } from '../form_control_layout';
+import { EuiFormControlLayoutDelimited } from '../form_control_layout';
 
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
@@ -407,7 +407,7 @@ export class EuiDualRange extends Component {
       <EuiPopover
         // ownFocus={popoverShouldOwnFocus}
         button={
-          <EuiFormControlLayoutRange
+          <EuiFormControlLayoutDelimited
             fullWidth={fullWidth}
             compressed={compressed}
             startControl={minInput}
diff --git a/src/components/form/range/range_wrapper.tsx b/src/components/form/range/range_wrapper.tsx
index 78cb6783f21f..8179bab02393 100644
--- a/src/components/form/range/range_wrapper.tsx
+++ b/src/components/form/range/range_wrapper.tsx
@@ -4,17 +4,20 @@ import classNames from 'classnames';
 export interface EuiRangeWrapperProps {
   className?: string;
   fullWidth?: boolean;
+  compressed?: boolean;
 }
 
 export const EuiRangeWrapper: FunctionComponent<EuiRangeWrapperProps> = ({
   children,
   className,
   fullWidth,
+  compressed,
 }) => {
   const classes = classNames(
     'euiRangeWrapper',
     {
       'euiRangeWrapper--fullWidth': fullWidth,
+      'euiRangeWrapper--compressed': compressed,
     },
     className
   );