@elastic/eui 71.1.0 → 72.1.0

package/i18ntokens.json

@@ -485,11 +485,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 272,
+        "line": 290,
         "column": 8
       },
       "end": {
-        "line": 281,
+        "line": 299,
         "column": 9
       }
     },
@@ -501,11 +501,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 272,
+        "line": 290,
         "column": 8
       },
       "end": {
-        "line": 281,
+        "line": 299,
         "column": 9
       }
     },
@@ -517,11 +517,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 318,
+        "line": 341,
         "column": 12
       },
       "end": {
-        "line": 323,
+        "line": 346,
         "column": 14
       }
     },
@@ -533,11 +533,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 328,
+        "line": 351,
         "column": 12
       },
       "end": {
-        "line": 334,
+        "line": 357,
         "column": 13
       }
     },
@@ -549,11 +549,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 328,
+        "line": 351,
         "column": 12
       },
       "end": {
-        "line": 334,
+        "line": 357,
         "column": 13
       }
     },
@@ -565,11 +565,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 360,
+        "line": 383,
         "column": 16
       },
       "end": {
-        "line": 363,
+        "line": 386,
         "column": 17
       }
     },
@@ -581,11 +581,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 513,
+        "line": 534,
         "column": 10
       },
       "end": {
-        "line": 521,
+        "line": 542,
         "column": 12
       }
     },
@@ -3151,6 +3151,22 @@
     },
     "filepath": "src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx"
   },
+  {
+    "token": "euiQuickSelectPopover.buttonLabel",
+    "defString": "Date quick select",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 86,
+        "column": 22
+      },
+      "end": {
+        "line": 89,
+        "column": 3
+      }
+    },
+    "filepath": "src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx"
+  },
   {
     "token": "euiQuickSelect.legendText",
     "defString": "Quick select a time range",
@@ -5093,11 +5109,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 684,
+        "line": 688,
         "column": 16
       },
       "end": {
-        "line": 687,
+        "line": 691,
         "column": 18
       }
     },
@@ -5349,11 +5365,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 567,
+        "line": 570,
         "column": 16
       },
       "end": {
-        "line": 570,
+        "line": 573,
         "column": 18
       }
     },
@@ -5365,11 +5381,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 589,
+        "line": 592,
         "column": 14
       },
       "end": {
-        "line": 593,
+        "line": 596,
         "column": 16
       }
     },
@@ -5381,11 +5397,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 608,
+        "line": 611,
         "column": 14
       },
       "end": {
-        "line": 611,
+        "line": 614,
         "column": 16
       }
     },
@@ -5397,11 +5413,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 673,
+        "line": 676,
         "column": 6
       },
       "end": {
-        "line": 673,
+        "line": 676,
         "column": 78
       }
     },
@@ -5413,11 +5429,11 @@
     "highlighting": "code",
     "loc": {
       "start": {
-        "line": 700,
+        "line": 703,
         "column": 6
       },
       "end": {
-        "line": 706,
+        "line": 709,
         "column": 8
       }
     },
@@ -5429,11 +5445,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 718,
+        "line": 721,
         "column": 6
       },
       "end": {
-        "line": 727,
+        "line": 730,
         "column": 7
       }
     },
@@ -5445,11 +5461,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 718,
+        "line": 721,
         "column": 6
       },
       "end": {
-        "line": 727,
+        "line": 730,
         "column": 7
       }
     },

package/lib/components/basic_table/basic_table.js

@@ -1261,7 +1261,7 @@ EuiBasicTable.propTypes = {
     /**
        * Defines the horizontal alignment of the column
        */
-    align: _propTypes.default.oneOf(["left", "right", "center"]),
+    align: _propTypes.default.any,
 
     /**
        * Indicates whether this column should truncate its content when it doesn't fit
@@ -1320,7 +1320,7 @@ EuiBasicTable.propTypes = {
        */
     truncateText: _propTypes.default.bool,
     isExpander: _propTypes.default.bool,
-    align: _propTypes.default.oneOf(["left", "right", "center"]),
+    align: _propTypes.default.any,
 
     /**
        * Disables the user's ability to change the sort but still shows the current direction

package/lib/components/basic_table/in_memory_table.js

@@ -686,7 +686,7 @@ EuiInMemoryTable.propTypes = {
     /**
        * Defines the horizontal alignment of the column
        */
-    align: _propTypes.default.oneOf(["left", "right", "center"]),
+    align: _propTypes.default.any,
 
     /**
        * Indicates whether this column should truncate its content when it doesn't fit
@@ -745,7 +745,7 @@ EuiInMemoryTable.propTypes = {
        */
     truncateText: _propTypes.default.bool,
     isExpander: _propTypes.default.bool,
-    align: _propTypes.default.oneOf(["left", "right", "center"]),
+    align: _propTypes.default.any,
 
     /**
        * Disables the user's ability to change the sort but still shows the current direction
@@ -1200,10 +1200,7 @@ EuiInMemoryTable.propTypes = {
     "aria-label": _propTypes.default.string
   }).isRequired])]),
   sorting: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
-    sort: _propTypes.default.shape({
-      field: _propTypes.default.string.isRequired,
-      direction: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]).isRequired
-    }).isRequired
+    sort: _propTypes.default.any.isRequired
   }).isRequired]),
 
   /**

package/lib/components/basic_table/table.a11y.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _in_memory_table = require("./in_memory_table");
+
+var _health = require("../health");
+
+var _link = require("../link");
+
+var _services = require("../../services");
+
+var _data_store = require("../../../src-docs/src/views/tables/data_store");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+var store = (0, _data_store.createDataStore)();
+
+var InMemoryTable = function InMemoryTable() {
+  var columns = [{
+    field: 'firstName',
+    name: 'First Name',
+    sortable: true,
+    truncateText: true
+  }, {
+    field: 'lastName',
+    name: 'Last Name',
+    truncateText: true
+  }, {
+    field: 'github',
+    name: 'Github',
+    render: function render(username) {
+      return (0, _react2.jsx)(_link.EuiLink, {
+        href: "https://github.com/".concat(username),
+        target: "_blank"
+      }, username);
+    }
+  }, {
+    field: 'dateOfBirth',
+    name: 'Date of Birth',
+    dataType: 'date',
+    render: function render(date) {
+      return (0, _services.formatDate)(date, 'dobLong');
+    },
+    sortable: true
+  }, {
+    field: 'nationality',
+    name: 'Nationality',
+    render: function render(countryCode) {
+      var country = store.getCountry(countryCode);
+      return "".concat(country.flag, " ").concat(country.name);
+    }
+  }, {
+    field: 'online',
+    name: 'Online',
+    dataType: 'boolean',
+    render: function render(online) {
+      var color = online ? 'success' : 'danger';
+      var label = online ? 'Online' : 'Offline';
+      return (0, _react2.jsx)(_health.EuiHealth, {
+        color: color
+      }, label);
+    },
+    sortable: true
+  }];
+  var sorting = {
+    sort: {
+      field: 'dateOfBirth',
+      direction: 'desc'
+    }
+  };
+  return (0, _react2.jsx)(_in_memory_table.EuiInMemoryTable, {
+    "data-test-subj": "cy-in-memory-table",
+    tableCaption: "Demo of EuiInMemoryTable",
+    items: store.users,
+    columns: columns,
+    pagination: true,
+    sorting: sorting
+  });
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount((0, _react2.jsx)(InMemoryTable, null));
+  cy.get('div[data-test-subj="cy-in-memory-table"]').should('exist');
+});
+describe('EuiInMemoryTable', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations on pagination click', function () {
+      cy.get('a[data-test-subj="pagination-button-1"]').realClick();
+      cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
+      cy.checkAxe();
+    });
+    it('has zero violations after number of rows is increased', function () {
+      cy.get('button[data-test-subj="tablePaginationPopoverButton"]').realClick();
+      cy.get('div[data-popover-open="true"]').should('exist');
+      cy.get('button[data-test-subj="tablePagination-25-rows"]').realClick();
+      cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
+      cy.checkAxe();
+    });
+    it('has zero violations after sorting on a column', function () {
+      cy.realPress('Tab');
+      cy.get('button[data-test-subj="tableHeaderSortButton"]').first().should('have.focus');
+      cy.realPress('Enter');
+      cy.get('tbody tr.euiTableRow span.euiTableCellContent__text').first().contains('Another very long first name which will wrap or be truncated');
+    });
+    it('has zero violations when number of rows is increased by keyboard', function () {
+      cy.repeatRealPress('Tab', 14);
+      cy.get('button[data-test-subj="tablePaginationPopoverButton"]').should('have.focus').realPress('Space');
+      cy.get('div[data-popover-open="true"]').should('exist');
+      cy.get('div[data-popover-open="true"]').should('have.focus');
+      cy.repeatRealPress('Tab'); // Switched to Tab from ArrowDown because of flaky test runs
+
+      cy.get('button[data-test-subj="tablePagination-25-rows"]').realPress('Space');
+      cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
+      cy.checkAxe();
+    });
+    it('has zero violations when pagination is pressed', function () {
+      cy.repeatRealPress('Tab', 15);
+      cy.get('a[data-test-subj="pagination-button-1"]').should('have.focus').realPress('Enter');
+      cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/color_picker/color_picker.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiColorPickerVariables = void 0;
+
+var _global_styling = require("../../global_styling");
+
+/*
+ * 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 euiColorPickerVariables = function euiColorPickerVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    width: (0, _global_styling.mathWithUnits)([euiTheme.size.l, euiTheme.size.s], function (x, y) {
+      return x * 5 + y * 4;
+    })
+  };
+};
+
+exports.euiColorPickerVariables = euiColorPickerVariables;

package/lib/components/color_picker/color_stops/color_stop_thumb.js

@@ -37,6 +37,8 @@ var _spacer = require("../../spacer");
 
 var _range_thumb = require("../../form/range/range_thumb");
 
+var _color_stop_thumb = require("./color_stop_thumb.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "stop", "color", "onChange", "onFocus", "onRemove", "globalMin", "globalMax", "localMin", "localMax", "min", "max", "isRangeMin", "isRangeMax", "parentRef", "colorPickerMode", "colorPickerShowAlpha", "colorPickerSwatches", "disabled", "readOnly", "isPopoverOpen", "openPopover", "closePopover", "data-index", "aria-valuetext", "style", "valueInputProps"];
@@ -277,13 +279,20 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
     }
   };
 
-  var classes = (0, _classnames.default)('euiColorStopPopover', {
-    'euiColorStopPopover-hasFocus': hasFocus || isPopoverOpen
-  }, className);
-  return (0, _react2.jsx)(_popover.EuiPopover, _extends({}, rest, {
+  var euiTheme = (0, _services.useEuiTheme)();
+  var popoverStyles = (0, _color_stop_thumb.euiColorStopThumbPopoverStyles)(euiTheme);
+  var cssPopoverStyles = [popoverStyles.euiColorStopThumbPopover, (hasFocus || isPopoverOpen) && popoverStyles.hasFocus];
+  var thumbStyles = (0, _color_stop_thumb.euiColorStopThumbStyles)(euiTheme);
+  var cssThumbStyles = [thumbStyles.euiColorStopThumb, isPopoverOpen && thumbStyles.isPopoverOpen];
+  var colorStopStyles = (0, _color_stop_thumb.euiColorStopStyles)(euiTheme);
+  var cssColorStopStyles = colorStopStyles.euiColorStop;
+  var classes = (0, _classnames.default)('euiColorStopPopover', className);
+  return (0, _react2.jsx)(_popover.EuiPopover, _extends({
+    css: cssPopoverStyles
+  }, rest, {
     ref: popoverRef,
     className: classes,
-    anchorClassName: "euiColorStopPopover__anchor",
+    anchorClassName: "euiColorStopThumbPopover__anchor",
     panelPaddingSize: "s",
     isOpen: isPopoverOpen,
     closePopover: closePopover,
@@ -291,7 +300,9 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
     focusTrapProps: {
       clickOutsideDisables: false
     },
-    panelClassName: numberInputRef ? undefined : 'euiColorStopPopover-isLoadingPanel',
+    panelProps: {
+      css: numberInputRef ? undefined : popoverStyles.isLoadingPanel
+    },
     style: _objectSpread(_objectSpread({}, style), {}, {
       left: "".concat(getPositionFromStopFn(stop), "%")
     }),
@@ -323,6 +334,7 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
         "aria-label": ariaLabel,
         title: title,
         className: "euiColorStopThumb",
+        css: cssThumbStyles,
         tabIndex: -1,
         style: {
           background: background
@@ -332,6 +344,7 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
     })
   }), (0, _react2.jsx)("div", {
     className: "euiColorStop",
+    css: cssColorStopStyles,
     "data-test-subj": "euiColorStopPopover"
   }, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
     "aria-live": "polite"

package/lib/components/color_picker/color_stops/color_stop_thumb.styles.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiColorStopThumbStyles = exports.euiColorStopThumbPopoverStyles = exports.euiColorStopStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../../global_styling");
+
+var _range = require("../../form/range/range.styles");
+
+var _color_picker = require("../color_picker.styles");
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "zrzkfg-euiColorStopThumb",
+  styles: "&:not(:disabled){inset-block-start:0;margin-block-start:0;pointer-events:auto;cursor:grab;&:active{cursor:grabbing;}};label:euiColorStopThumb;"
+} : {
+  name: "zrzkfg-euiColorStopThumb",
+  styles: "&:not(:disabled){inset-block-start:0;margin-block-start:0;pointer-events:auto;cursor:grab;&:active{cursor:grabbing;}};label:euiColorStopThumb;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiColorStopThumbStyles = function euiColorStopThumbStyles(euiThemeContext) {
+  return {
+    // Base
+    euiColorStopThumb: _ref2,
+    isPopoverOpen: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbFocus)(euiThemeContext), ";;label:isPopoverOpen;")
+  };
+};
+
+exports.euiColorStopThumbStyles = euiColorStopThumbStyles;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1wndm4s-isLoadingPanel",
+  styles: "visibility:hidden!important;label:isLoadingPanel;"
+} : {
+  name: "1wndm4s-isLoadingPanel",
+  styles: "visibility:hidden!important;label:isLoadingPanel;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiColorStopThumbPopoverStyles = function euiColorStopThumbPopoverStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiColorStopThumbPopover: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:50%;inline-size:", range.thumbWidth, ";block-size:", range.thumbHeight, ";margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
+      return x * -0.5;
+    }), ";.euiColorStopThumbPopover__anchor{position:absolute;inline-size:100%;block-size:100%;&::before{content:'';display:block;position:absolute;inset-inline-start:0;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbWidth, ";border-radius:", range.thumbHeight, ";background:", euiTheme.colors.emptyShade, ";}};label:euiColorStopThumbPopover;"),
+    isLoadingPanel: _ref,
+    hasFocus: /*#__PURE__*/(0, _react.css)("z-index:", range.thumbZIndex, ";;label:hasFocus;")
+  };
+};
+
+exports.euiColorStopThumbPopoverStyles = euiColorStopThumbPopoverStyles;
+
+var euiColorStopStyles = function euiColorStopStyles(euiThemeContext) {
+  var colorPicker = (0, _color_picker.euiColorPickerVariables)(euiThemeContext);
+  return {
+    // Base
+    euiColorStop: /*#__PURE__*/(0, _react.css)("inline-size:", colorPicker.width, ";;label:euiColorStop;")
+  };
+};
+
+exports.euiColorStopStyles = euiColorStopStyles;

package/lib/components/color_picker/color_stops/color_stops.js

@@ -31,6 +31,8 @@ var _range_track = require("../../form/range/range_track");
 
 var _range_wrapper = require("../../form/range/range_wrapper");
 
+var _color_stops = require("./color_stops.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["addColor", "max", "min", "mode", "colorStops", "onChange", "disabled", "readOnly", "compressed", "fullWidth", "className", "label", "stopType", "stepNumber", "swatches", "showAlpha", "valueInputProps"];
@@ -210,11 +212,16 @@ var EuiColorStops = function EuiColorStops(_ref) {
       setFocusStopOnUpdate = _useState14[1];
 
   var isNotInteractive = disabled || readOnly;
-  var classes = (0, _classnames.default)('euiColorStops', {
-    'euiColorStops-isDragging': isHoverDisabled,
-    'euiColorStops-isDisabled': disabled,
-    'euiColorStops-isReadOnly': readOnly
-  }, className);
+  var isDragging = isHoverDisabled && !isNotInteractive;
+  var addContainerIsDisabled = isHoverDisabled || isNotInteractive;
+  var classes = (0, _classnames.default)('euiColorStops', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _color_stops.euiColorStopsStyles)(euiTheme);
+  var cssPopoverStyles = [styles.euiColorStops, !disabled ? styles.isEnabled : styles.isDisabled, readOnly && styles.isReadOnly, isDragging && styles.isDragging];
+  var cssTrackStyles = [styles.euiColorStops__track];
+  var cssAddTargetStyles = [styles.euiColorStops__addTarget];
+  var addContainerStyles = (0, _color_stops.euiColorStopsAddContainerStyles)(euiTheme);
+  var cssAddContainerStyles = [addContainerStyles.euiColorStopsAddContainer, !addContainerIsDisabled ? addContainerStyles.isEnabled : addContainerStyles.isDisabled];
 
   var getStopFromMouseLocationFn = function getStopFromMouseLocationFn(location) {
     // Guard against `null` ref in usage
@@ -415,7 +422,7 @@ var EuiColorStops = function EuiColorStops(_ref) {
         disabled: disabled,
         readOnly: readOnly,
         "aria-valuetext": "Stop: ".concat(colorStop.stop, ", Color: ").concat(colorStop.color, " (").concat(index + 1, " of ").concat(colorStops.length, ")"),
-        isPopoverOpen: colorStop.id === openedStopId,
+        isPopoverOpen: !isDragging && colorStop.id === openedStopId,
         openPopover: function openPopover() {
           setOpenedStopId(colorStop.id);
         },
@@ -425,7 +432,7 @@ var EuiColorStops = function EuiColorStops(_ref) {
         valueInputProps: valueInputProps
       });
     });
-  }, [colorStops, disabled, handleOnChange, max, min, mode, onRemove, openedStopId, rangeMax, rangeMin, readOnly, showAlpha, sortedStops, swatches, wrapperRef, valueInputProps]);
+  }, [colorStops, disabled, handleOnChange, isDragging, max, min, mode, onRemove, openedStopId, rangeMax, rangeMin, readOnly, showAlpha, sortedStops, swatches, wrapperRef, valueInputProps]);
   var positions = wrapperRef ? sortedStops.map(function (_ref3) {
     var stop = _ref3.stop;
     return getPositionFromStopFn(stop);
@@ -433,10 +440,10 @@ var EuiColorStops = function EuiColorStops(_ref) {
 
   var gradientStop = function gradientStop(colorStop, index) {
     var color = (0, _utils2.getChromaColor)(colorStop.color, showAlpha);
-    var rgba = color ? color.css() : 'currentColor';
+    var rgba = color ? color.css() : 'transparent';
 
     if (index === 0) {
-      return "currentColor, currentColor ".concat(positions[index], "%, ").concat(rgba, " ").concat(positions[index], "%");
+      return "transparent, transparent ".concat(positions[index], "%, ").concat(rgba, " ").concat(positions[index], "%");
     }
 
     return "".concat(rgba, " ").concat(positions[index], "%");
@@ -464,13 +471,15 @@ var EuiColorStops = function EuiColorStops(_ref) {
       percentageSteps = percentageSteps + percentage;
     });
     steppedGradient = steppedGradient.substring(0, steppedGradient.length - 2);
-    gradient = "linear-gradient(to right, currentColor ".concat(trailingPercentage, "%, ").concat(steppedGradient, ")");
+    gradient = "linear-gradient(to right, transparent ".concat(trailingPercentage, "%, ").concat(steppedGradient, ")");
   } else {
     var linearGradient = sortedStops.map(stopType === 'gradient' ? gradientStop : fixedStop);
     gradient = "linear-gradient(to right,".concat(linearGradient, ")");
   }
 
-  return (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, _extends({}, rest, {
+  return (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, _extends({
+    css: cssPopoverStyles
+  }, rest, {
     "data-test-subj": (0, _classnames.default)('euiColorStops', rest['data-test-subj']),
     ref: setWrapperRef,
     className: classes,
@@ -493,6 +502,8 @@ var EuiColorStops = function EuiColorStops(_ref) {
     token: "euiColorStops.screenReaderAnnouncement",
     default: "{label}: {readOnly} {disabled} Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop."
   }))), (0, _react2.jsx)(_range_track.EuiRangeTrack, {
+    className: "euiColorStops__track",
+    css: cssTrackStyles,
     min: min || rangeMin,
     max: max || rangeMax,
     compressed: compressed,
@@ -509,13 +520,13 @@ var EuiColorStops = function EuiColorStops(_ref) {
       trackWidth: trackWidth
     }), (0, _react2.jsx)("div", {
       "data-test-subj": "euiColorStopsAdd",
-      className: (0, _classnames.default)('euiColorStops__addContainer', {
-        'euiColorStops__addContainer-isDisabled': isHoverDisabled || disabled || readOnly
-      }),
+      className: "euiColorStops__addContainer",
+      css: cssAddContainerStyles,
       onClick: handleAddClick,
       onMouseMove: handleAddHover
     }, (0, _react2.jsx)("div", {
       className: "euiColorStops__addTarget",
+      css: cssAddTargetStyles,
       style: {
         left: "".concat(addTargetPosition, "%")
       }