@elastic/eui 70.4.0 → 71.0.0

package/lib/components/form/range/dual_range.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDualRangeStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _range = require("./range.styles");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var euiDualRangeStyles = function euiDualRangeStyles() {
+  return {
+    euiDualRange: /*#__PURE__*/(0, _react.css)(";label:euiDualRange;"),
+    euiDualRange__slider: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbPerBrowser)('visibility: hidden'), ";;label:euiDualRange__slider;")
+  };
+};
+
+exports.euiDualRangeStyles = euiDualRangeStyles;

package/lib/components/form/range/range.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiRange = void 0;
+exports.EuiRangeClass = exports.EuiRange = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -17,7 +17,11 @@ var _number = require("../../../services/number");
 
 var _popover = require("../../popover");
 
-var _accessibility = require("../../../services/accessibility");
+var _services = require("../../../services/");
+
+var _eui_form_context = require("../eui_form_context");
+
+var _range_levels_colors = require("./range_levels_colors");
 
 var _range_highlight = require("./range_highlight");
 
@@ -33,11 +37,11 @@ var _range_track = require("./range_track");
 
 var _range_wrapper = require("./range_wrapper");
 
-var _eui_form_context = require("../eui_form_context");
+var _range = require("./range.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "style", "tabIndex", "isInvalid"];
+var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -73,15 +77,15 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var EuiRange = /*#__PURE__*/function (_Component) {
-  _inherits(EuiRange, _Component);
+var EuiRangeClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiRangeClass, _Component);
 
-  var _super = _createSuper(EuiRange);
+  var _super = _createSuper(EuiRangeClass);
 
-  function EuiRange() {
+  function EuiRangeClass() {
     var _this;
 
-    _classCallCheck(this, EuiRange);
+    _classCallCheck(this, EuiRangeClass);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -92,7 +96,7 @@ var EuiRange = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "preventPopoverClose", false);
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      id: _this.props.id || (0, _accessibility.htmlIdGenerator)()(),
+      id: _this.props.id || (0, _services.htmlIdGenerator)()(),
       isPopoverOpen: false
     });
 
@@ -144,7 +148,7 @@ var EuiRange = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(EuiRange, [{
+  _createClass(EuiRangeClass, [{
     key: "isValid",
     get: function get() {
       return (0, _number.isWithinRange)(this.props.min, this.props.max, this.props.value || '');
@@ -184,9 +188,9 @@ var EuiRange = /*#__PURE__*/function (_Component) {
           onChange = _this$props.onChange,
           onFocus = _this$props.onFocus,
           value = _this$props.value,
-          style = _this$props.style,
           tabIndex = _this$props.tabIndex,
           isInvalid = _this$props.isInvalid,
+          theme = _this$props.theme,
           rest = _objectWithoutProperties(_this$props, _excluded);
 
       var id = this.state.id;
@@ -212,11 +216,13 @@ var EuiRange = /*#__PURE__*/function (_Component) {
         isInvalid: isInvalid,
         autoSize: !showInputOnly
       }, rest)) : null;
-      var classes = (0, _classnames.default)('euiRange', {
-        'euiRange--hasInput': showInput
-      }, className);
+      var classes = (0, _classnames.default)('euiRange', className);
+      var styles = (0, _range.euiRangeStyles)(theme);
+      var cssStyles = [styles.euiRange, showInput && styles.hasInput];
+      var thumbColor = levels && (0, _range_levels_colors.getLevelColor)(levels, Number(value));
       var theRange = (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, {
         className: classes,
+        css: cssStyles,
         fullWidth: fullWidth,
         compressed: compressed
       }, showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
@@ -234,49 +240,52 @@ var EuiRange = /*#__PURE__*/function (_Component) {
         levels: levels,
         onChange: this.handleOnChange,
         value: value,
-        "aria-hidden": showInput === true
-      }, (0, _react2.jsx)(_range_slider.EuiRangeSlider, _extends({
-        id: showInput ? undefined : id // Attach id only to the input if there is one
-        ,
-        name: name,
-        min: min,
-        max: max,
-        step: step,
-        value: value,
-        disabled: disabled,
-        compressed: compressed,
-        onChange: this.handleOnChange,
-        style: style,
-        showTicks: showTicks,
-        showRange: showRange,
-        tabIndex: showInput ? -1 : tabIndex,
-        onMouseDown: showInputOnly ? function () {
-          return _this2.preventPopoverClose = true;
-        } : undefined,
-        onFocus: showInput === true ? undefined : onFocus,
-        onBlur: showInputOnly ? this.onInputBlur : onBlur,
-        "aria-hidden": showInput === true ? true : false
-      }, rest)), showRange && this.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
-        compressed: compressed,
-        showTicks: showTicks,
-        min: Number(min),
-        max: Number(max),
-        lowerValue: Number(min),
-        upperValue: Number(value)
-      }), showValue && !!String(value).length && (0, _react2.jsx)(_range_tooltip.EuiRangeTooltip, {
-        compressed: compressed,
-        value: value,
-        max: max,
-        min: min,
-        name: name,
-        showTicks: showTicks,
-        valuePrepend: valuePrepend,
-        valueAppend: valueAppend
-      })), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
+        "aria-hidden": showInput === true,
+        showRange: showRange
+      }, function (trackWidth) {
+        return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_range_slider.EuiRangeSlider, _extends({
+          id: showInput ? undefined : id // Attach id only to the input if there is one
+          ,
+          name: name,
+          min: min,
+          max: max,
+          step: step,
+          value: value,
+          disabled: disabled,
+          onChange: _this2.handleOnChange,
+          showTicks: showTicks,
+          showRange: showRange,
+          tabIndex: showInput ? -1 : tabIndex,
+          onMouseDown: showInputOnly ? function () {
+            return _this2.preventPopoverClose = true;
+          } : undefined,
+          onFocus: showInput === true ? undefined : onFocus,
+          onBlur: showInputOnly ? _this2.onInputBlur : onBlur,
+          "aria-hidden": showInput === true ? true : false,
+          thumbColor: thumbColor
+        }, rest)), showRange && _this2.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
+          showTicks: showTicks,
+          min: Number(min),
+          max: Number(max),
+          lowerValue: Number(min),
+          upperValue: Number(value),
+          levels: levels,
+          trackWidth: trackWidth
+        }), showValue && !!String(value).length && (0, _react2.jsx)(_range_tooltip.EuiRangeTooltip, {
+          value: value,
+          max: max,
+          min: min,
+          name: name,
+          showTicks: showTicks,
+          valuePrepend: valuePrepend,
+          valueAppend: valueAppend
+        }));
+      }), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
         side: "max",
         disabled: disabled
       }, max), showInput && !showInputOnly && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
-        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer'
+        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
+        css: showTicks || ticks ? styles.euiRange__slimHorizontalSpacer : styles.euiRange__horizontalSpacer
       }), theInput));
       var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, {
         className: "euiRange__popover",
@@ -291,14 +300,14 @@ var EuiRange = /*#__PURE__*/function (_Component) {
     }
   }]);
 
-  return EuiRange;
+  return EuiRangeClass;
 }(_react.Component);
 
-exports.EuiRange = EuiRange;
+exports.EuiRangeClass = EuiRangeClass;
 
-_defineProperty(EuiRange, "contextType", _eui_form_context.FormContext);
+_defineProperty(EuiRangeClass, "contextType", _eui_form_context.FormContext);
 
-_defineProperty(EuiRange, "defaultProps", {
+_defineProperty(EuiRangeClass, "defaultProps", {
   min: 0,
   max: 100,
   step: 1,
@@ -312,39 +321,79 @@ _defineProperty(EuiRange, "defaultProps", {
   levels: []
 });
 
-EuiRange.propTypes = {
-  compressed: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
+EuiRangeClass.propTypes = {
+  /**
+     * Shows a tooltip styled value
+     */
+  showValue: _propTypes.default.bool,
 
   /**
-     * Expand to fill 100% of the parent.
-     * Defaults to `fullWidth` prop of `<EuiForm>`.
-     * @default false
+     * Appends to the tooltip
      */
-  fullWidth: _propTypes.default.bool,
-  id: _propTypes.default.string,
+  valueAppend: _propTypes.default.node,
+
+  /**
+     * Prepends to the tooltip
+     */
+  valuePrepend: _propTypes.default.node,
 
   /**
-     * Create colored indicators for certain intervals
+     * Only impacts the input rendered by the `showInput` prop.
+     * `string` | `ReactElement` or an array of these
      */
-  levels: _propTypes.default.arrayOf(_propTypes.default.shape({
-    min: _propTypes.default.number.isRequired,
-    max: _propTypes.default.number.isRequired,
+  prepend: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired).isRequired]),
+
+  /**
+     * Only impacts the input rendered by the `showInput` prop.
+     * `string` | `ReactElement` or an array of these
+     */
+  append: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired).isRequired]),
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
+  value: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.number.isRequired]).isRequired,
+  onChange: _propTypes.default.func,
+  max: _propTypes.default.number.isRequired,
+  min: _propTypes.default.number.isRequired,
 
+  /**
+     * The number to increment or decrement between each interval
+     * @default 1
+     */
+  step: _propTypes.default.number,
+
+  /**
+     * Specified ticks at specified values
+     */
+  ticks: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.number.isRequired,
+    label: _propTypes.default.node.isRequired
+  }).isRequired),
+
+  /**
+     * Modifies the number of tick marks and at what interval
+     */
+  tickInterval: _propTypes.default.number,
+
+  /**
+     * Create colored indicators for certain intervals.
+     * An array of #EuiRangeLevel objects
+     */
+  levels: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
        * Accepts one of `["primary", "success", "warning", "danger"]` or a valid CSS color value.
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOf(["primary", "success", "warning", "danger"]).isRequired, _propTypes.default.any.isRequired]).isRequired,
+    color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]).isRequired,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any
   }).isRequired),
-  step: _propTypes.default.number,
 
   /**
      * Pass `true` to displays an extra input control for direct manipulation.
-     * Pass `'inputWithPopover'` to only show the input but show the range in a dropdown.
+     * Pass `"inputWithPopover"` to only show the input but show the range in a dropdown.
      */
   showInput: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.oneOf(["inputWithPopover"])]),
 
@@ -362,42 +411,41 @@ EuiRange.propTypes = {
      * Shows clickable tick marks and labels at the given interval (`step`/`tickInterval`)
      */
   showTicks: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  name: _propTypes.default.string,
 
   /**
-     * Shows a tooltip styled value
+     * Only impacts ticks rendered by `showTicks` or inputs rendered by `showInput`.
      */
-  showValue: _propTypes.default.bool,
+  compressed: _propTypes.default.bool,
 
   /**
-     * Specified ticks at specified values
+     * Only impacts inputs rendered by the `showInput` prop.
+     * The range slider itself remains interactable unless `disabled` is applied.
      */
-  ticks: _propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.number.isRequired,
-    label: _propTypes.default.node.isRequired
-  }).isRequired),
+  readOnly: _propTypes.default.bool,
 
   /**
-     * Modifies the number of tick marks and at what interval
+     * Disables both the range track and any input(s)
      */
-  tickInterval: _propTypes.default.number,
+  disabled: _propTypes.default.bool,
 
   /**
-     * Appends to the tooltip
+     * Expand to fill 100% of the parent.
+     * Defaults to `fullWidth` prop of `<EuiForm>`.
+     * @default false
      */
-  valueAppend: _propTypes.default.node,
+  fullWidth: _propTypes.default.bool,
 
   /**
-     * Prepends to the tooltip
+     * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
-  valuePrepend: _propTypes.default.node,
+  isLoading: _propTypes.default.bool,
 
   /**
-     * Will only show if `showInput = inputWithPopover`
+     * Only impacts inputs rendered by the `showInput` prop
      */
-  isLoading: _propTypes.default.bool,
-  onChange: _propTypes.default.func,
-  className: _propTypes.default.string,
-  "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any
-};
+  isInvalid: _propTypes.default.bool
+};
+var EuiRange = (0, _services.withEuiTheme)(EuiRangeClass);
+exports.EuiRange = EuiRange;

package/lib/components/form/range/range.styles.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeVariables = exports.euiRangeTrackPerBrowser = exports.euiRangeThumbStyle = exports.euiRangeThumbPerBrowser = exports.euiRangeThumbFocusBoxShadow = exports.euiRangeThumbFocus = exports.euiRangeThumbBoxShadow = exports.euiRangeThumbBorder = exports.euiRangeStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../../services");
+
+var _global_styling = require("../../../global_styling");
+
+var _form = require("../form.styles");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var euiRangeVariables = function euiRangeVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var trackHeight = '6px';
+  var thumbHeight = euiTheme.size.base;
+  var thumbWidth = euiTheme.size.base;
+  var form = (0, _form.euiFormVariables)(euiThemeContext);
+  return {
+    trackColor: euiTheme.colors.lightShade,
+    highlightColor: euiTheme.colors.darkShade,
+    focusColor: euiTheme.colors.primary,
+    thumbHeight: thumbHeight,
+    thumbWidth: thumbWidth,
+    thumbBorderWidth: euiTheme.border.width.thick,
+    thumbBorderColor: euiTheme.colors.emptyShade,
+    thumbBackgroundColor: euiTheme.colors.darkShade,
+    // same as highlightColor
+    trackWidth: '100%',
+    trackHeight: trackHeight,
+    trackBorderWidth: '0px',
+    trackBorderColor: euiTheme.colors.lightShade,
+    // same as trackColor
+    trackBorderRadius: euiTheme.border.radius.medium,
+    tickHeight: trackHeight,
+    tickWidth: euiTheme.size.xs,
+    disabledOpacity: 0.5,
+    highlightHeight: trackHeight,
+    height: form.controlHeight,
+    compressedHeight: form.controlCompressedHeight,
+    // position of the track and highlight relative to the parent container
+    trackTopPositionWithTicks: (0, _global_styling.mathWithUnits)([thumbHeight, trackHeight], function (x, y) {
+      return (x - y) / 2;
+    }),
+    trackBottomPositionWithTicks: (0, _global_styling.mathWithUnits)([thumbHeight, trackHeight], function (x, y) {
+      return x - (x - y) / 2;
+    }),
+    trackTopPositionWithoutTicks: "calc(50% - (".concat(trackHeight, " / 2))"),
+    // Z-indexes
+    levelsZIndex: 1,
+    highlightZIndex: 2,
+    thumbZIndex: 3
+  };
+};
+
+exports.euiRangeVariables = euiRangeVariables;
+
+var euiRangeTrackPerBrowser = function euiRangeTrackPerBrowser(content) {
+  return "\n    &::-webkit-slider-runnable-track { ".concat(content, "; }\n    &::-moz-range-track { ").concat(content, "; }\n    &::-ms-fill-lower {").concat(content, "; }\n    &::-ms-fill-upper { ").concat(content, "; }\n  ");
+};
+
+exports.euiRangeTrackPerBrowser = euiRangeTrackPerBrowser;
+
+var euiRangeThumbBorder = function euiRangeThumbBorder(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    border: ".concat(range.thumbBorderWidth, " solid ").concat(range.thumbBorderColor, ";\n  ");
+};
+
+exports.euiRangeThumbBorder = euiRangeThumbBorder;
+
+var euiRangeThumbBoxShadow = function euiRangeThumbBoxShadow(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var shadowColor = "rgba(".concat((0, _services.hexToRgb)(euiTheme.colors.shadow), ", .2)");
+  var range = euiRangeVariables(euiThemeContext);
+  var borderWidth = range.thumbBorderWidth;
+  var halfBorderWidth = (0, _global_styling.mathWithUnits)(borderWidth, function (x) {
+    return x / 2;
+  });
+  var largeBorderWidth = (0, _global_styling.mathWithUnits)(borderWidth, function (x) {
+    return x * 2.5;
+  });
+  return "\n    box-shadow:\n      0 0 0 ".concat(halfBorderWidth, " ").concat(range.thumbBorderColor, ",\n      0 ").concat(borderWidth, " ").concat(borderWidth, " -").concat(halfBorderWidth, " ").concat(shadowColor, ",\n      0 ").concat(halfBorderWidth, " ").concat(largeBorderWidth, " -").concat(borderWidth, " ").concat(shadowColor, ";\n  ");
+};
+
+exports.euiRangeThumbBoxShadow = euiRangeThumbBoxShadow;
+
+var euiRangeThumbFocusBoxShadow = function euiRangeThumbFocusBoxShadow(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    box-shadow: 0 0 0 ".concat(range.thumbBorderWidth, " ").concat(range.focusColor, ";\n  ");
+};
+
+exports.euiRangeThumbFocusBoxShadow = euiRangeThumbFocusBoxShadow;
+
+var euiRangeThumbStyle = function euiRangeThumbStyle(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    ".concat(euiRangeThumbBoxShadow(euiThemeContext), ";\n    ").concat(euiRangeThumbBorder(euiThemeContext), ";\n    cursor: pointer;\n    background-color: ").concat(range.thumbBackgroundColor, ";\n    padding: 0;\n    block-size: ").concat(range.thumbHeight, ";\n    inline-size: ").concat(range.thumbWidth, ";\n    box-sizing: border-box;  // required for firefox or the border makes the width and height to increase\n  ");
+};
+
+exports.euiRangeThumbStyle = euiRangeThumbStyle;
+
+var euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
+  return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb  { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");
+};
+
+exports.euiRangeThumbPerBrowser = euiRangeThumbPerBrowser;
+
+var euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext, color) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n   ".concat(euiRangeThumbBorder(euiThemeContext), ";\n   ").concat(euiRangeThumbFocusBoxShadow(euiThemeContext), ";\n   background-color: ").concat(color || range.focusColor, ";\n  ");
+};
+
+exports.euiRangeThumbFocus = euiRangeThumbFocus;
+
+var euiRangeStyles = function euiRangeStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    // Base
+    euiRange: /*#__PURE__*/(0, _react.css)(";label:euiRange;"),
+    hasInput: /*#__PURE__*/(0, _react.css)(";label:hasInput;"),
+    euiRange__horizontalSpacer: /*#__PURE__*/(0, _react.css)("inline-size:", euiTheme.size.base, ";;label:euiRange__horizontalSpacer;"),
+    euiRange__slimHorizontalSpacer: /*#__PURE__*/(0, _react.css)("inline-size:", euiTheme.size.s, ";;label:euiRange__slimHorizontalSpacer;")
+  };
+};
+
+exports.euiRangeStyles = euiRangeStyles;

package/lib/components/form/range/range_draggable.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiRangeDraggable = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,12 +15,20 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _services = require("../../../services");
 
+var _global_styling = require("../../../global_styling");
+
+var _range_draggable = require("./range_draggable.styles");
+
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "showTicks", "lowerPosition", "upperPosition", "compressed", "onChange", "min", "max", "disabled", "value"];
+var _excluded = ["className", "showTicks", "lowerPosition", "upperPosition", "onChange", "min", "max", "disabled", "value"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -42,7 +52,6 @@ var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
       showTicks = _ref.showTicks,
       lowerPosition = _ref.lowerPosition,
       upperPosition = _ref.upperPosition,
-      compressed = _ref.compressed,
       onChange = _ref.onChange,
       min = _ref.min,
       max = _ref.max,
@@ -50,33 +59,36 @@ var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
       value = _ref.value,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var outerStyle = {
-    left: "calc(".concat(lowerPosition, ")"),
-    right: "calc(100% - ".concat(upperPosition, " - 16px)")
-  };
-  var classes = (0, _classnames.default)('euiRangeDraggable', {
-    'euiRangeDraggable--hasTicks': showTicks,
-    'euiRangeDraggable--compressed': compressed,
-    'euiRangeDraggable--disabled': disabled
-  }, className);
-
-  var handleChange = function handleChange(_ref2, isFirstInteraction) {
+  var euiTheme = (0, _services.useEuiTheme)();
+  var outerStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)({
+      left: lowerPosition,
+      right: "calc(100% - ".concat(upperPosition, " - ").concat(euiTheme.euiTheme.size.base, ")")
+    });
+  }, [lowerPosition, upperPosition, euiTheme.euiTheme.size.base]);
+  var handleChange = (0, _react.useCallback)(function (_ref2, isFirstInteraction) {
     var x = _ref2.x;
     if (disabled) return;
     onChange(x, isFirstInteraction);
-  };
+  }, [disabled, onChange]);
 
   var _useMouseMove = (0, _services.useMouseMove)(handleChange),
       _useMouseMove2 = _slicedToArray(_useMouseMove, 2),
       handleMouseDown = _useMouseMove2[0],
       handleInteraction = _useMouseMove2[1];
 
+  var classes = (0, _classnames.default)('euiRangeDraggable', className);
+  var styles = (0, _range_draggable.euiRangeDraggableStyles)(euiTheme);
+  var cssStyles = [styles.euiRangeDraggable, showTicks && styles.hasTicks, disabled && styles.disabled];
+  var innerStyles = (0, _range_draggable.euiRangeDraggableInnerStyles)(euiTheme);
+  var cssInnerStyles = [innerStyles.euiRangeDraggable__inner, disabled ? styles.disabled : innerStyles.enabled];
   var commonProps = {
     className: classes,
+    css: cssStyles,
     role: 'slider',
     'aria-valuemin': min,
     'aria-valuemax': max,
-    'aria-valuenow': value[0],
+    'aria-valuenow': Number(value[0]),
     'aria-valuetext': "".concat(value[0], ", ").concat(value[1]),
     'aria-disabled': !!disabled,
     tabIndex: !!disabled ? -1 : 0
@@ -84,7 +96,8 @@ var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
   return (0, _react2.jsx)("div", _extends({
     style: outerStyle
   }, commonProps, rest), (0, _react2.jsx)("div", {
-    className: "euiRangeDraggle__inner",
+    className: "euiRangeDraggable__inner",
+    css: cssInnerStyles,
     onMouseDown: handleMouseDown,
     onTouchStart: handleInteraction,
     onTouchMove: handleInteraction
@@ -93,12 +106,6 @@ var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
 
 exports.EuiRangeDraggable = EuiRangeDraggable;
 EuiRangeDraggable.propTypes = {
-  min: _propTypes.default.number.isRequired,
-  max: _propTypes.default.number.isRequired,
-  value: _propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired,
-  disabled: _propTypes.default.bool,
-  compressed: _propTypes.default.bool,
-  showTicks: _propTypes.default.bool,
   lowerPosition: _propTypes.default.string.isRequired,
   upperPosition: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func.isRequired