Fixed tooltip position

elastic · Jul 2, 2018 · b1936ed · b1936ed
1 parent b1cceb4
commit b1936ed
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 23 deletions.
diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap
@@ -238,7 +238,7 @@ exports[`EuiRange props ticks should render 1`] = `
 
 exports[`EuiRange props value should render 1`] = `
 <div
-  class="euiRange__wrapper"
+  class="euiRange__wrapper euiRange__wrapper--hasValue"
 >
   <div
     class="euiRange__inputWrapper"
@@ -249,10 +249,14 @@ exports[`EuiRange props value should render 1`] = `
       min="1"
       type="range"
     />
-    <output
-      class="euiRange__value euiRange__value--left"
-      style="left:100%"
-    />
+    <div
+      class="euiRange__valueWrapper"
+    >
+      <output
+        class="euiRange__value euiRange__value--left"
+        style="left:100%"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss
@@ -216,13 +216,6 @@ $euiRange__levelColors: (
 }
 
 .euiRange__wrapper--hasTicks {
-  .euiRange,
-  .euiRange__levels,
-  .euiRange__range {
-    //width: calc(100% + #{$euiRangeThumbWidth});
-    //margin-left: $euiRangeThumbWidth/2 * -1;
-  }
-
   .euiRange {
     height: $euiFormControlHeight/2; /* 3 */
   }
@@ -254,6 +247,17 @@ $euiRange__levelColors: (
   }
 }
 
+.euiRange__valueWrapper {
+  // Keeps tooltip (value) aligned to percentage of actual slider
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: calc(100% - #{$euiRangeThumbWidth});
+  margin-left: $euiRangeThumbWidth/2;
+}
+
 /*
  *  Input Range Customization by browser
  */
@@ -273,7 +277,6 @@ $euiRange__levelColors: (
   height: $euiFormControlHeight;
   appearance: none;
   background: transparent; // Otherwise white in Chrome
-  //margin: 0 $euiSizeS;
   width: 100%; // ensures the slider expands to fill flex display
   position: relative;
   z-index: $euiZLevel2; // stay above tick marks
@@ -304,7 +307,7 @@ $euiRange__levelColors: (
       background-color: $euiColorPrimary;
     }
 
-    ~ .euiRange__value {
+    ~ .euiRange__valueWrapper .euiRange__value {
       @include euiBottomShadow;
 
       &.euiRange__value--right {

diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
@@ -48,6 +48,7 @@ export const EuiRange = ({
       'euiRange__wrapper--hasTicks': showTicks,
       'euiRange__wrapper--hasLevels': levels.length,
       'euiRange__wrapper--hasRange': showRange,
+      'euiRange__wrapper--hasValue': showValue,
     },
   );
 
@@ -94,7 +95,7 @@ export const EuiRange = ({
   }
 
   const inputWrapperStyle = {};
-  let tickWidth;
+  let tickWidth; // TODO: Move to scope & change name
   let tickMarksNode;
   if (showTicks) {
     // Set the interval for which to show the tick marks
@@ -108,17 +109,20 @@ export const EuiRange = ({
     const ticksStyle = { margin: `0 ${tickWidthPercentage / -2}%` };
 
     // Loop from min to max, creating ticks at each interval
-    // (adds 1 to max to ensure that the max tick is also included)
-    const sequence = range(min, max + 1, interval);
+    // (adds 1 to max to ensure that the max tick is also included) TODO: add more about +1 for length
+    const toBeInclusive = .000000001;
+    const sequence = range(min, max + toBeInclusive, interval);
+    console.log(sequence);
 
     // Calculate if any extra margin should be added to the inputWrapper
     // because of longer tick labels on the ends
     const minLength = String(sequence[0]).length;
     const maxLength = String(sequence[sequence.length - 1]).length;
-    if (minLength > 2) {
+    const lastTickIsMax = sequence[sequence.length - 1] === max;
+    if (lastTickIsMax && minLength > 2) {
       inputWrapperStyle.marginLeft = `${(minLength / 5)}em`;
     }
-    if (maxLength > 2) {
+    if (lastTickIsMax && maxLength > 2) {
       inputWrapperStyle.marginRight = `${(maxLength / 5)}em`;
     }
 
@@ -180,8 +184,8 @@ export const EuiRange = ({
   let valueNode;
   if (showValue) {
     // Calculate the left position based on value
-    // Must be between 0-100%
     const decimal = (value - min) / rangeTotal;
+    // Must be between 0-100%
     let valuePosition = decimal <= 1 ? decimal : 1;
     valuePosition = valuePosition >= 0 ? valuePosition : 0;
 
@@ -201,9 +205,11 @@ export const EuiRange = ({
     );
 
     valueNode = (
-      <output className={valueClasses} htmlFor={name} style={valuePositionStyle}>
-        {value}
-      </output>
+      <div className="euiRange__valueWrapper">
+        <output className={valueClasses} htmlFor={name} style={valuePositionStyle}>
+          {value}
+        </output>
+      </div>
     );
   }
 
@@ -226,10 +232,12 @@ export const EuiRange = ({
           style={style}
           {...rest}
         />
+
         {valueNode}
         {rangeNode}
         {tickMarksNode}
         {levelsNode}
+
       </div>
 
       {maxLabelNode}