@elastic/eui 71.1.0 → 72.1.0

package/optimize/es/components/key_pad_menu/key_pad_menu.a11y.js

@@ -0,0 +1,148 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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"/>
+import React, { useState } from 'react';
+import { EuiKeyPadMenu } from './key_pad_menu';
+import { EuiKeyPadMenuItem } from './key_pad_menu_item';
+import { EuiIcon } from '../icon';
+import { useGeneratedHtmlId } from '../../services';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var KeyPadMenu = function KeyPadMenu() {
+  var keypadButtonId__1 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'first'
+  });
+  var keypadButtonId__2 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'second'
+  });
+  var keypadButtonId__3 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'third'
+  });
+  var keypadButtonId__4 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'fourth'
+  });
+  var keypadButtonId__5 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'fifth'
+  });
+  var keypadButtonId__6 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'sixth'
+  });
+
+  var _useState = useState(keypadButtonId__6),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedID = _useState2[0],
+      setSelectedID = _useState2[1];
+
+  return ___EmotionJSX("div", {
+    "aria-label": "Menu keypad"
+  }, ___EmotionJSX(EuiKeyPadMenu, null, ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-1",
+    id: keypadButtonId__1,
+    label: "Button 1",
+    isSelected: selectedID === keypadButtonId__1,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__1);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-2",
+    id: keypadButtonId__2,
+    label: "Button 2",
+    isSelected: selectedID === keypadButtonId__2,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__2);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-3",
+    id: keypadButtonId__3,
+    label: "Button 3",
+    isSelected: selectedID === keypadButtonId__3,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__3);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-1",
+    id: keypadButtonId__4,
+    label: "Link 1",
+    href: "#/navigation/key-pad-menu",
+    isSelected: selectedID === keypadButtonId__4,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__4);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "link",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-2",
+    id: keypadButtonId__5,
+    label: "Link 2",
+    href: "#/navigation/key-pad-menu",
+    isSelected: selectedID === keypadButtonId__5,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__5);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "link",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-3",
+    id: keypadButtonId__6,
+    label: "Disabled Link 3",
+    isDisabled: true,
+    isSelected: selectedID === keypadButtonId__6
+  }, ___EmotionJSX(EuiIcon, {
+    type: "link",
+    size: "l"
+  }))));
+};
+
+beforeEach(function () {
+  cy.realMount(___EmotionJSX(KeyPadMenu, null));
+  cy.get('div[aria-label="Menu keypad"]').should('exist');
+});
+describe('EuiKeyPadMenu', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations on item click', function () {
+      cy.get('a[data-test-subj="cy-keypad-link-2"]').realClick();
+      cy.get('a[data-test-subj="cy-keypad-link-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+    });
+    it('has zero violations on item keypress', function () {
+      cy.repeatRealPress('Tab', 3);
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.focus');
+      cy.realPress('Space');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+      cy.realPress(['Shift', 'Tab']);
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.focus');
+      cy.realPress('Space');
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('not.have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js

@@ -9,7 +9,7 @@
 // are exported for two versions of TypeScript (3.4, 4.0) and implicit
 // imports during eui.d.ts generation default to the incorrect version (3.4).
 // Explicit imports here resolve the version mismatch.
-import markdown from 'remark-parse';
+import markdown from 'remark-parse-no-trim';
 import emoji from 'remark-emoji';
 import breaks from 'remark-breaks';
 import highlight from '../remark/remark_prismjs';

package/optimize/es/components/popover/popover.js

@@ -471,13 +471,13 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         panel = ___EmotionJSX(EuiPortal, {
           insert: insert
         }, ___EmotionJSX(EuiFocusTrap, _extends({
-          clickOutsideDisables: true
+          clickOutsideDisables: true,
+          onClickOutside: this.onClickOutside
         }, focusTrapProps, {
           returnFocus: returnFocus // Ignore temporary state of indecisive focus
           ,
           initialFocus: initialFocus,
           onDeactivation: onTrapDeactivation,
-          onClickOutside: this.onClickOutside,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
         }), ___EmotionJSX(EuiPopoverPanel, _extends({}, panelProps, {

package/optimize/es/components/selectable/selectable.js

@@ -246,7 +246,7 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onOptionClick", function (options, event) {
+    _defineProperty(_assertThisInitialized(_this), "onOptionClick", function (options, event, clickedOption) {
       var _this$props = _this.props,
           isPreFiltered = _this$props.isPreFiltered,
           onChange = _this$props.onChange;
@@ -258,7 +258,7 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
       });
 
       if (onChange) {
-        onChange(options, event);
+        onChange(options, event, clickedOption);
       }
     });
 

package/optimize/es/components/selectable/selectable_list/selectable_list.js

@@ -209,6 +209,9 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           onOptionClick = _this$props4.onOptionClick,
           options = _this$props4.options,
           singleSelection = _this$props4.singleSelection;
+
+      var changedOption = _objectSpread({}, addedOption);
+
       var updatedOptions = options.map(function (option) {
         // if singleSelection is enabled, uncheck any selected option(s)
         var updatedOption = _objectSpread({}, option);
@@ -220,11 +223,12 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
 
         if (option === addedOption) {
           updatedOption.checked = 'on';
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onRemoveOption", function (removedOption, event) {
@@ -232,33 +236,40 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           onOptionClick = _this$props5.onOptionClick,
           singleSelection = _this$props5.singleSelection,
           options = _this$props5.options;
+
+      var changedOption = _objectSpread({}, removedOption);
+
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
 
         if (option === removedOption && singleSelection !== 'always') {
           delete updatedOption.checked;
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onExcludeOption", function (excludedOption, event) {
       var _this$props6 = _this.props,
           onOptionClick = _this$props6.onOptionClick,
           options = _this$props6.options;
-      excludedOption.checked = 'off';
+
+      var changedOption = _objectSpread({}, excludedOption);
+
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
 
         if (option === excludedOption) {
           updatedOption.checked = 'off';
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
 
     return _this;

package/optimize/es/components/tabs/tab.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isSelected", "children", "className", "disabled", "href", "target", "rel", "prepend", "append", "size", "expand"];
+var _excluded = ["isSelected", "children", "className", "disabled", "href", "target", "rel", "prepend", "append"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -9,11 +9,12 @@ var _excluded = ["isSelected", "children", "className", "disabled", "href", "tar
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React from 'react';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { getSecureRelForTarget, useEuiTheme } from '../../services';
 import { validateHref } from '../../services/security/href_validator';
 import { euiTabStyles, euiTabContentStyles } from './tab.styles';
+import { EuiTabsContext } from './tabs_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTab = function EuiTab(_ref) {
   var isSelected = _ref.isSelected,
@@ -25,11 +26,12 @@ export var EuiTab = function EuiTab(_ref) {
       rel = _ref.rel,
       prepend = _ref.prepend,
       append = _ref.append,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      expand = _ref.expand,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var _useContext = useContext(EuiTabsContext),
+      size = _useContext.size,
+      expand = _useContext.expand;
+
   var euiTheme = useEuiTheme();
   var isHrefValid = !href || validateHref(href);
   var disabled = _disabled || !isHrefValid; // Keep CSS classnames for reference

package/optimize/es/components/tabs/tabs.js

@@ -12,8 +12,8 @@ var _excluded = ["children", "className", "bottomBorder", "expand", "size"];
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
 import { euiTabsStyles } from './tabs.styles';
+import { EuiTabsContext } from './tabs_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['s', 'm', 'l', 'xl'];
 export var EuiTabs = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -31,21 +31,17 @@ export var EuiTabs = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var classes = classNames('euiTabs', className);
   var styles = euiTabsStyles(euiTheme);
   var cssStyles = [styles.euiTabs, styles[size], bottomBorder && styles.bottomBorder];
-  var tabItems = React.Children.map(children, function (child) {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      return cloneElementWithCss(child, {
-        // we're passing the parent `size` and `expand` down to the children
-        size: size,
-        expand: expand
-      });
-    }
-  });
   return ___EmotionJSX("div", _extends({
     ref: ref,
     className: classes,
     css: cssStyles
   }, children && {
     role: 'tablist'
-  }, rest), tabItems);
+  }, rest), ___EmotionJSX(EuiTabsContext.Provider, {
+    value: {
+      expand: expand,
+      size: size
+    }
+  }, children));
 });
 EuiTabs.displayName = 'EuiTabs';

package/optimize/es/components/tabs/tabs_context.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+import { createContext } from 'react';
+export var contextDefaults = {
+  expand: false,
+  size: 'm'
+};
+export var EuiTabsContext = /*#__PURE__*/createContext(contextDefaults);

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

@@ -97,4 +97,13 @@ export var lightness = function lightness(color) {
 
 export var darken = function darken(color, amount) {
   return chroma(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.
+ */
+
+export var brighten = function brighten(color, amount) {
+  return chroma(color).brighten(amount).hex();
 };

package/optimize/es/services/index.js

@@ -7,25 +7,25 @@
  */
 // Export all keys under a `keys` named variable
 import * as keys from './keys';
-export { keys };
 export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
-export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from './alignment';
-export { useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint } from './breakpoint';
-export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, darken, makeHighContrastColor, makeDisabledContrastColor, wcagContrastMin } from './color';
+export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
+export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
+export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export { copyToClipboard } from './copy_to_clipboard';
 export * from './findElement';
-export { formatAuto, formatBoolean, formatDate, formatNumber, formatText, dateFormatAliases } from './format';
+export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText } from './format';
+export * from './hooks';
 export { isEvenlyDivisibleBy, isWithinRange } from './number';
 export { Pager } from './paging';
+export { calculatePopoverPosition, findPopoverPosition } from './popover';
 export { Random } from './random';
 export { getSecureRelForTarget } from './security';
-export { toSentenceCase, toInitials, slugify } from './string';
-export { PropertySortType, SortDirectionType, SortDirection, SortableProperties, Comparators } from './sort';
-export { calculatePopoverPosition, findPopoverPosition } from './popover';
+export { Comparators, PropertySortType, SortableProperties, SortDirection, SortDirectionType } from './sort';
+export { slugify, toInitials, toSentenceCase } from './string';
+export * from './theme';
+export { throttle } from './throttle';
 export { getDurationAndPerformOnFrame, getTransitionTimings, getWaitDuration, performOnFrame } from './transition';
 export { EuiWindowEvent } from './window_event';
-export * from './hooks';
-export { throttle } from './throttle';
-export * from './theme';
+export { keys };

package/optimize/lib/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/optimize/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/optimize/lib/components/color_picker/color_stops/color_stop_thumb.js

@@ -45,6 +45,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"];
@@ -262,13 +264,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,
@@ -276,7 +285,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), "%")
     }),
@@ -308,6 +319,7 @@ var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
         "aria-label": ariaLabel,
         title: title,
         className: "euiColorStopThumb",
+        css: cssThumbStyles,
         tabIndex: -1,
         style: {
           background: background
@@ -317,6 +329,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"