@elastic/eui 71.1.0 → 72.1.0

package/optimize/lib/services/color/manipulation.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = exports.darken = void 0;
+exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = exports.darken = exports.brighten = void 0;
 
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 
@@ -134,5 +134,17 @@ exports.lightness = lightness;
 var darken = function darken(color, amount) {
   return (0, _chromaJs.default)(color).darken(amount).hex();
 };
+/**
+ * Returns the brighten value of a color. 0-100
+ * @param color - Color to manipulate
+ * @param amount - Amount to change in absolute terms. 0-1.
+ */
+
+
+exports.darken = darken;
+
+var brighten = function brighten(color, amount) {
+  return (0, _chromaJs.default)(color).brighten(amount).hex();
+};
 
-exports.darken = darken;
+exports.brighten = brighten;

package/optimize/lib/services/index.js

@@ -12,83 +12,84 @@ var _exportNames = {
   comboBoxKeys: true,
   htmlIdGenerator: true,
   useGeneratedHtmlId: true,
+  CENTER_ALIGNMENT: true,
   LEFT_ALIGNMENT: true,
   RIGHT_ALIGNMENT: true,
-  CENTER_ALIGNMENT: true,
-  useIsWithinBreakpoints: true,
-  useIsWithinMaxBreakpoint: true,
-  useIsWithinMinBreakpoint: true,
   CurrentEuiBreakpointContext: true,
   CurrentEuiBreakpointProvider: true,
   useCurrentEuiBreakpoint: true,
-  isColorDark: true,
-  isValidHex: true,
+  useIsWithinBreakpoints: true,
+  useIsWithinMaxBreakpoint: true,
+  useIsWithinMinBreakpoint: true,
+  brighten: true,
   calculateContrast: true,
   calculateLuminance: true,
-  hexToHsv: true,
-  hexToRgb: true,
-  hsvToHex: true,
-  hsvToRgb: true,
-  rgbToHex: true,
-  rgbToHsv: true,
-  VISUALIZATION_COLORS: true,
-  DEFAULT_VISUALIZATION_COLOR: true,
   colorPalette: true,
-  euiPaletteForLightBackground: true,
-  euiPaletteForDarkBackground: true,
+  darken: true,
+  DEFAULT_VISUALIZATION_COLOR: true,
+  desaturate: true,
   euiPaletteColorBlind: true,
   euiPaletteColorBlindBehindText: true,
+  euiPaletteComplimentary: true,
+  euiPaletteCool: true,
+  euiPaletteForDarkBackground: true,
+  euiPaletteForLightBackground: true,
   euiPaletteForStatus: true,
   euiPaletteForTemperature: true,
-  euiPaletteComplimentary: true,
+  euiPaletteGray: true,
   euiPaletteNegative: true,
   euiPalettePositive: true,
-  euiPaletteCool: true,
   euiPaletteWarm: true,
-  euiPaletteGray: true,
   getSteppedGradient: true,
-  transparentize: true,
-  tint: true,
-  shade: true,
-  tintOrShade: true,
-  shadeOrTint: true,
-  saturate: true,
-  desaturate: true,
+  hexToHsv: true,
+  hexToRgb: true,
+  hsvToHex: true,
+  hsvToRgb: true,
+  isColorDark: true,
+  isValidHex: true,
   lightness: true,
-  darken: true,
-  makeHighContrastColor: true,
   makeDisabledContrastColor: true,
+  makeHighContrastColor: true,
+  rgbToHex: true,
+  rgbToHsv: true,
+  saturate: true,
+  shade: true,
+  shadeOrTint: true,
+  tint: true,
+  tintOrShade: true,
+  transparentize: true,
+  VISUALIZATION_COLORS: true,
   wcagContrastMin: true,
   useColorPickerState: true,
   useColorStopsState: true,
   copyToClipboard: true,
+  dateFormatAliases: true,
   formatAuto: true,
   formatBoolean: true,
   formatDate: true,
   formatNumber: true,
   formatText: true,
-  dateFormatAliases: true,
   isEvenlyDivisibleBy: true,
   isWithinRange: true,
   Pager: true,
+  calculatePopoverPosition: true,
+  findPopoverPosition: true,
   Random: true,
   getSecureRelForTarget: true,
-  toSentenceCase: true,
-  toInitials: true,
-  slugify: true,
+  Comparators: true,
   PropertySortType: true,
-  SortDirectionType: true,
-  SortDirection: true,
   SortableProperties: true,
-  Comparators: true,
-  calculatePopoverPosition: true,
-  findPopoverPosition: true,
+  SortDirection: true,
+  SortDirectionType: true,
+  slugify: true,
+  toInitials: true,
+  toSentenceCase: true,
+  throttle: true,
   getDurationAndPerformOnFrame: true,
   getTransitionTimings: true,
   getWaitDuration: true,
   performOnFrame: true,
-  EuiWindowEvent: true,
-  throttle: true
+  EuiWindowEvent: true
 };
 Object.defineProperty(exports, "CENTER_ALIGNMENT", {
   enumerable: true,
@@ -186,6 +187,12 @@ Object.defineProperty(exports, "accessibleClickKeys", {
     return _accessibility.accessibleClickKeys;
   }
 });
+Object.defineProperty(exports, "brighten", {
+  enumerable: true,
+  get: function get() {
+    return _color.brighten;
+  }
+});
 Object.defineProperty(exports, "calculateContrast", {
   enumerable: true,
   get: function get() {
@@ -630,24 +637,6 @@ Object.keys(_findElement).forEach(function (key) {
 
 var _format = require("./format");
 
-var _number = require("./number");
-
-var _paging = require("./paging");
-
-var _random = require("./random");
-
-var _security = require("./security");
-
-var _string = require("./string");
-
-var _sort = require("./sort");
-
-var _popover = require("./popover");
-
-var _transition = require("./transition");
-
-var _window_event = require("./window_event");
-
 var _hooks = require("./hooks");
 
 Object.keys(_hooks).forEach(function (key) {
@@ -662,7 +651,19 @@ Object.keys(_hooks).forEach(function (key) {
   });
 });
 
-var _throttle = require("./throttle");
+var _number = require("./number");
+
+var _paging = require("./paging");
+
+var _popover = require("./popover");
+
+var _random = require("./random");
+
+var _security = require("./security");
+
+var _sort = require("./sort");
+
+var _string = require("./string");
 
 var _theme = require("./theme");
 
@@ -678,6 +679,12 @@ Object.keys(_theme).forEach(function (key) {
   });
 });
 
+var _throttle = require("./throttle");
+
+var _transition = require("./transition");
+
+var _window_event = require("./window_event");
+
 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; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "71.1.0",
+  "version": "72.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -52,9 +52,7 @@
   },
   "resolutions": {
     "**/prismjs": "1.27.0",
-    "**/trim": "0.0.3",
-    "**/react": "^17.0.0",
-    "**/known-css-properties": "0.24.0"
+    "**/react": "^17.0.0"
   },
   "pre-commit": [
     "test-staged"
@@ -90,7 +88,7 @@
     "rehype-stringify": "^8.0.0",
     "remark-breaks": "^2.0.2",
     "remark-emoji": "^2.1.0",
-    "remark-parse": "^8.0.3",
+    "remark-parse-no-trim": "^8.0.4",
     "remark-rehype": "^8.0.0",
     "tabbable": "^5.2.1",
     "text-diff": "^1.0.1",
@@ -115,7 +113,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^51.1.1",
+    "@elastic/charts": "^51.2.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",

package/src/components/color_picker/_index.scss

@@ -3,6 +3,5 @@
 @import 'color_picker_swatch';
 @import 'hue';
 @import 'saturation';
-@import 'color_stops/index';
 @import 'color_palette_picker/index';
 @import 'color_palette_display/index';

package/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -1,6 +1,19 @@
 .euiQuickSelectPopover__content {
   width: $euiFormMaxWidth;
   max-width: 100%;
+
+  .euiQuickSelectPopover__panel {
+    &:not(:first-child) {
+      border-top: $euiBorderThin;
+      padding-top: $euiSizeM;
+      margin-top: $euiSizeM;
+    }
+
+    .euiQuickSelectPopover__panelTitle {
+      float: left;
+      margin-bottom: $euiSizeM;
+    }
+  }
 }
 
 .euiQuickSelectPopover__section {
@@ -9,6 +22,7 @@
   overflow: hidden;
   overflow-y: auto;
   margin: $euiSizeS 0 0;
+  clear: both;
 }
 
 .euiQuickSelectPopover__buttonText {

package/src/components/form/file_picker/_file_picker.scss

@@ -64,30 +64,28 @@
 /**
   * 1. Don't block the user from dropping files onto the filepicker.
   * 2. Ensure space for import icon, loading spinner, and clear button (only if it has files)
-  * 3. Delay focus gradient or else it will only partially transition while file chooser opens
   * 4. Static height so that it doesn't shift its surrounding contents around
   */
 .euiFilePicker__prompt {
-  @include euiFormControlDefaultShadow;
   @include euiFormControlWithIcon; /* 2 */
   height: $euiFormControlHeight;
   padding-top: $euiFormControlPadding;
   padding-right: $euiFormControlPadding;
   padding-bottom: $euiFormControlPadding;
   pointer-events: none; /* 1 */
+  border: $euiBorderWidthThick dashed $euiColorLightShade;
   border-radius: $euiFormControlBorderRadius;
 
   transition:
-    box-shadow $euiAnimSpeedFast ease-in,
-    background-color $euiAnimSpeedFast ease-in,
-    background-image $euiAnimSpeedFast ease-in,
-    background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 3 */
+    border-color $euiAnimSpeedFast ease-in,
+    background-color $euiAnimSpeedFast ease-in;
 
   .euiFilePicker--compressed & {
     @include euiFormControlStyleCompressed($includeStates: false);
     @include euiFormControlWithIcon($compressed: true); /* 2 */
     height: $euiFormControlCompressedHeight;
     border-radius: $euiFormControlCompressedBorderRadius;
+    box-shadow: none;
   }
 
   .euiFilePicker--large & {
@@ -104,7 +102,7 @@
   }
 
   .euiFilePicker-isInvalid & {
-    @include euiFormControlInvalidStyle;
+    border: $euiBorderWidthThick dashed $euiColorDanger;
   }
 }
 
@@ -113,9 +111,14 @@
   @include euiTextTruncate;
   line-height: $euiSize;
 
-  // make normal sized prompt look like placeholder
+  // Make normal sized prompt stand out a bit more - on the large size we don't need this as it's already identifiable
   .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) & {
-    color: $euiColorMediumShade;
+    color: $euiColorPrimaryText;
+  }
+
+  // Offset/center prompt text for non-large file-pickers
+  .euiFilePicker:not(.euiFilePicker--large) & {
+    margin-top: $euiSizeXS / -2;
   }
 }
 
@@ -150,16 +153,13 @@
 // Focus
 .euiFilePicker__showDrop .euiFilePicker__prompt,
 .euiFilePicker__input:focus + .euiFilePicker__prompt {
-  @include euiFormControlFocusStyle;
-
-  .euiFilePicker--compressed & {
-    @include euiFormControlFocusStyle($borderOnly: true);
-  }
+  border-color: $euiColorPrimary;
 }
 
 // Disabled
 .euiFilePicker__input:disabled + .euiFilePicker__prompt {
   @include euiFormControlDisabledStyle;
+  box-shadow: none;
 }
 
 // Make space for the icons on the right

package/src/themes/amsterdam/overrides/_index.scss

@@ -1,4 +1,3 @@
-@import 'color_stops';
 @import 'combo_box';
 @import 'data_grid';
 @import 'date_picker';

package/test-env/components/basic_table/basic_table.js

@@ -1228,7 +1228,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
@@ -1287,7 +1287,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/test-env/components/basic_table/in_memory_table.js

@@ -671,7 +671,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
@@ -730,7 +730,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
@@ -1185,10 +1185,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/test-env/components/basic_table/table.a11y.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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");
+
+/*
+ * 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/test-env/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/test-env/components/color_picker/color_stops/color_stop_thumb.js

@@ -47,6 +47,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"];
@@ -264,13 +266,20 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
     }
   };
 
-  var classes = (0, _classnames.default)('euiColorStopPopover', {
-    'euiColorStopPopover-hasFocus': hasFocus || isPopoverOpen
-  }, className);
-  return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({}, 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, (0, _extends2.default)({
+    css: cssPopoverStyles
+  }, rest, {
     ref: popoverRef,
     className: classes,
-    anchorClassName: "euiColorStopPopover__anchor",
+    anchorClassName: "euiColorStopThumbPopover__anchor",
     panelPaddingSize: "s",
     isOpen: isPopoverOpen,
     closePopover: closePopover,
@@ -278,7 +287,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), "%")
     }),
@@ -310,6 +321,7 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
         "aria-label": ariaLabel,
         title: title,
         className: "euiColorStopThumb",
+        css: cssThumbStyles,
         tabIndex: -1,
         style: {
           background: background
@@ -319,6 +331,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"