Fix for delimited

elastic · Jul 29, 2019 · 1ee7727 · 1ee7727
1 parent d8cedf4
commit 1ee7727
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
   );