@elastic/eui 102.0.0 → 102.1.0

package/optimize/es/components/color_picker/color_picker.js

@@ -16,6 +16,7 @@ import { useEuiMemoizedStyles, keys, useEuiPaletteColorBlind } from '../../servi
 import { EuiFieldText, EuiFormControlLayout, EuiFormRow, EuiRange } from '../form';
 import { useEuiI18n } from '../i18n';
 import { EuiPopover } from '../popover';
+import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiColorPickerSwatch } from './color_picker_swatch';
 import { EuiHue } from './hue';
 import { EuiSaturation } from './saturation';
@@ -85,15 +86,16 @@ export var EuiColorPicker = function EuiColorPicker(_ref) {
     isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
     placeholder = _ref.placeholder,
     dataTestSubj = _ref['data-test-subj'];
-  var _useEuiI18n = useEuiI18n(['euiColorPicker.popoverLabel', 'euiColorPicker.colorLabel', 'euiColorPicker.colorErrorMessage', 'euiColorPicker.transparent', 'euiColorPicker.alphaLabel', 'euiColorPicker.openLabel', 'euiColorPicker.closeLabel'], ['Color selection dialog', 'Color value', 'Invalid color value', 'Transparent', 'Alpha channel (opacity) value', 'Press the escape key to close the popover', 'Press the down key to open a popover containing color options']),
-    _useEuiI18n2 = _slicedToArray(_useEuiI18n, 7),
+  var _useEuiI18n = useEuiI18n(['euiColorPicker.popoverLabel', 'euiColorPicker.colorLabel', 'euiColorPicker.selectedColorLabel', 'euiColorPicker.colorErrorMessage', 'euiColorPicker.transparent', 'euiColorPicker.alphaLabel', 'euiColorPicker.openLabel', 'euiColorPicker.closeLabel'], ['Color selection dialog', 'Color value', 'Selected color', 'Invalid color value', 'Transparent', 'Alpha channel (opacity) value', 'Press the escape key to close the popover', 'Press the down key to open a popover containing color options']),
+    _useEuiI18n2 = _slicedToArray(_useEuiI18n, 8),
     popoverLabel = _useEuiI18n2[0],
     colorLabel = _useEuiI18n2[1],
-    colorErrorMessage = _useEuiI18n2[2],
-    transparent = _useEuiI18n2[3],
-    alphaLabel = _useEuiI18n2[4],
-    openLabel = _useEuiI18n2[5],
-    closeLabel = _useEuiI18n2[6];
+    selectedColorLabel = _useEuiI18n2[2],
+    colorErrorMessage = _useEuiI18n2[3],
+    transparent = _useEuiI18n2[4],
+    alphaLabel = _useEuiI18n2[5],
+    openLabel = _useEuiI18n2[6],
+    closeLabel = _useEuiI18n2[7];
   var defaultSwatches = useEuiPaletteColorBlind();
   var swatches = _swatches !== null && _swatches !== void 0 ? _swatches : defaultSwatches;
   var preferredFormat = useMemo(function () {
@@ -343,7 +345,10 @@ export var EuiColorPicker = function EuiColorPicker(_ref) {
     hex: chromaColor ? chromaColor.hex() : undefined,
     onChange: handleHueSelection,
     onKeyDown: handleOnKeyDown
-  })), showSwatches && ___EmotionJSX("ul", {
+  }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, selectedColorLabel, ": ", chromaColor === null || chromaColor === void 0 ? void 0 : chromaColor.hex().toUpperCase()))), showSwatches && ___EmotionJSX("ul", {
     css: styles.euiColorPicker__swatches,
     className: "euiColorPicker__swatches"
   }, swatches.map(function (swatch, index) {

package/optimize/es/components/color_picker/hue.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "hex", "hue", "id", "onChange"];
 /*
@@ -13,8 +14,9 @@ import React from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiI18n } from '../i18n';
+import { EuiI18n, useEuiI18n } from '../i18n';
 import { euiHueStyles } from './hue.styles';
+import { EuiToolTip } from '../tool_tip';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var HUE_RANGE = 359;
 export var EuiHue = function EuiHue(_ref) {
@@ -27,9 +29,16 @@ export var EuiHue = function EuiHue(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiHue', className);
   var styles = useEuiMemoizedStyles(euiHueStyles);
+  var _useEuiI18n = useEuiI18n(['euiHue.ariaValueText', 'euiHue.ariaRoleDescription'], ['Hue', 'Hue slider']),
+    _useEuiI18n2 = _slicedToArray(_useEuiI18n, 2),
+    ariaValueText = _useEuiI18n2[0],
+    ariaRoleDescription = _useEuiI18n2[1];
   var handleChange = function handleChange(e) {
     onChange(Number(e.target.value));
   };
+  var hueValue = typeof hue === 'string' ? parseInt(hue) : hue;
+  // align the tooltip contextually closer to the thumb
+  var tooltipPosition = hueValue < Math.floor(HUE_RANGE / 2) ? 'left' : 'right';
   return ___EmotionJSX("div", {
     css: styles.euiHue,
     className: classes
@@ -38,9 +47,14 @@ export var EuiHue = function EuiHue(_ref) {
   }, ___EmotionJSX(EuiI18n, {
     token: "euiHue.label",
     default: "Select the HSV color mode 'hue' value"
-  }))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-    "aria-live": "polite"
-  }, hex)), ___EmotionJSX("input", _extends({
+  }))), ___EmotionJSX(EuiToolTip, {
+    content: hex,
+    anchorProps: {
+      css: styles.euiHue__tooltip
+    },
+    disableScreenReaderOutput: true,
+    position: tooltipPosition
+  }, ___EmotionJSX("input", _extends({
     id: "".concat(id, "-hue"),
     min: 0,
     max: HUE_RANGE,
@@ -49,6 +63,8 @@ export var EuiHue = function EuiHue(_ref) {
     css: styles.euiHue__range,
     className: "euiHue__range",
     value: hue,
-    onChange: handleChange
-  }, rest)));
+    onChange: handleChange,
+    "aria-roledescription": ariaRoleDescription,
+    "aria-valuetext": "".concat(ariaValueText, " ").concat(hue, "\xB0")
+  }, rest))));
 };

package/optimize/es/components/color_picker/hue.styles.js

@@ -26,9 +26,10 @@ export var euiHueStyles = function euiHueStyles(euiThemeContext) {
       preferred: "border: ".concat(euiTheme.border.thin, ";"),
       forced: preventForcedColors(euiThemeContext)
     }), ";;label:euiHue;"),
-    euiHue__range: /*#__PURE__*/css(logicalCSS('height', thumbSize), logicalCSS('width', "calc(100% + 2px)"), logicalCSS('margin-horizontal', '-1px'), " ", logicalCSS('margin-top', mathWithUnits(height, function (x) {
+    euiHue__tooltip: /*#__PURE__*/css(logicalCSS('height', thumbSize), logicalCSS('width', "calc(100% + 2px)"), logicalCSS('margin-horizontal', '-1px'), " ", logicalCSS('margin-top', mathWithUnits(height, function (x) {
       return x / -2;
-    })), "appearance:none;background:transparent;&::-webkit-slider-thumb{-webkit-appearance:none;}", euiRangeThumbPerBrowser("\n        ".concat(euiRangeThumbStyle(euiThemeContext), "\n        border-width: ").concat(thumbBorder, ";\n\n        ").concat(highContrastModeStyles(euiThemeContext, {
+    })), ";;label:euiHue__tooltip;"),
+    euiHue__range: /*#__PURE__*/css(logicalCSS('height', '100%'), " ", logicalCSS('width', '100%'), "appearance:none;background:transparent;&::-webkit-slider-thumb{-webkit-appearance:none;}", euiRangeThumbPerBrowser("\n        ".concat(euiRangeThumbStyle(euiThemeContext), "\n        border-width: ").concat(thumbBorder, ";\n\n        ").concat(highContrastModeStyles(euiThemeContext, {
       none: "\n            background-color: transparent;\n            box-shadow: ".concat(thumbBoxShadow, ";\n          "),
       preferred: "\n            background-color: ".concat(euiTheme.colors.ghost, ";\n            border: ").concat(thumbBorder, " solid ").concat(euiTheme.colors.ink, ";\n            box-shadow: none;\n          ")
     }), "\n      ")), "&:focus{outline:none;}", highContrastModeStyles(euiThemeContext, {

package/optimize/es/components/color_picker/saturation.js

@@ -19,6 +19,7 @@ import { keys, useMouseMove, useEuiMemoizedStyles, useGeneratedHtmlId } from '..
 import { isNil } from '../../services/predicate';
 import { logicalStyles } from '../../global_styling';
 import { useEuiI18n } from '../i18n';
+import { EuiToolTip } from '../tool_tip';
 import { getEventPosition } from './utils';
 import { euiSaturationStyles } from './saturation.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -41,10 +42,11 @@ export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
   var instructionsId = "".concat(id, "-instructions");
   var indicatorId = "".concat(id, "-saturationIndicator");
-  var _useEuiI18n = useEuiI18n(['euiSaturation.ariaLabel', 'euiSaturation.screenReaderInstructions'], ['HSV color mode saturation and value 2-axis slider', "Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value."]),
-    _useEuiI18n2 = _slicedToArray(_useEuiI18n, 2),
-    roleDescString = _useEuiI18n2[0],
-    instructionsString = _useEuiI18n2[1];
+  var _useEuiI18n = useEuiI18n(['euiSaturation.ariaLabel', 'euiSaturation.roleDescription', 'euiSaturation.screenReaderInstructions'], ['Select a color', 'HSV color mode saturation and value 2-axis slider.', "Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value."]),
+    _useEuiI18n2 = _slicedToArray(_useEuiI18n, 3),
+    ariaLabel = _useEuiI18n2[0],
+    roleDescString = _useEuiI18n2[1],
+    instructionsString = _useEuiI18n2[2];
   var _useState = useState({
       left: 0,
       top: 0
@@ -166,18 +168,21 @@ export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, ___EmotionJSX("div", {
     css: styles.euiSaturation__saturation,
     className: "euiSaturation__saturation"
-  })), ___EmotionJSX("button", {
+  })), ___EmotionJSX(EuiToolTip, {
+    content: hex,
+    anchorProps: {
+      css: styles.euiSaturation__tooltip,
+      style: logicalStyles(indicator)
+    },
+    disableScreenReaderOutput: true // required to prevent verbose screen reader output
+  }, ___EmotionJSX("button", {
     id: indicatorId,
     css: styles.euiSaturation__indicator,
     className: "euiSaturation__indicator",
-    style: logicalStyles(indicator),
     "aria-roledescription": roleDescString,
-    "aria-label": hex,
+    "aria-label": ariaLabel,
     "aria-describedby": instructionsId
-  }), ___EmotionJSX("span", {
-    hidden: true,
-    "aria-live": "assertive"
-  }, hex), ___EmotionJSX("span", {
+  })), ___EmotionJSX("span", {
     hidden: true,
     id: instructionsId
   }, instructionsString));

package/optimize/es/components/color_picker/saturation.styles.js

@@ -30,7 +30,8 @@ export var euiSaturationStyles = function euiSaturationStyles(euiThemeContext) {
     }), ";;label:euiSaturation;"),
     euiSaturation__lightness: /*#__PURE__*/css("position:absolute;inset:0;border-radius:", gradientBorderRadius, ";background:linear-gradient(\n        to right,\n        rgba(255, 255, 255, 1),\n        rgba(255, 255, 255, 0)\n      );;label:euiSaturation__lightness;"),
     euiSaturation__saturation: /*#__PURE__*/css("position:absolute;inset:0;border-radius:", gradientBorderRadius, ";background:linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));;label:euiSaturation__saturation;"),
-    euiSaturation__indicator: /*#__PURE__*/css("z-index:2;position:absolute;", logicalSizeCSS(indicatorSize), " transform:translateX(-50%) translateY(-50%);border-radius:100%;", highContrastModeStyles(euiThemeContext, {
+    euiSaturation__tooltip: /*#__PURE__*/css("z-index:2;position:absolute;", logicalSizeCSS(indicatorSize), " transform:translateX(-50%) translateY(-50%);border-radius:100%;;label:euiSaturation__tooltip;"),
+    euiSaturation__indicator: /*#__PURE__*/css("position:absolute;inset:0;", logicalSizeCSS(indicatorSize), " border-radius:100%;", highContrastModeStyles(euiThemeContext, {
       none: "\n          border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.darkestShade, ";\n\n          &::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            border-radius: 100%;\n            border: ").concat(euiTheme.border.width.thin, " solid\n              ").concat(euiTheme.colors.lightestShade, ";\n          }\n        "),
       preferred: "\n          border: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.ink, ";\n          background-color: ").concat(euiTheme.colors.ghost, ";\n        ")
     }), ";;label:euiSaturation__indicator;")

package/optimize/es/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -42,8 +42,8 @@ export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
         "data-test-subj": "euiDataGridCellExpandButton",
         display: "fill",
         color: "primary",
-        iconSize: "m",
-        iconType: "expandMini",
+        iconSize: "s",
+        iconType: "expand",
         "aria-hidden": true,
         onClick: onExpandClick,
         title: expandButtonTitle

package/optimize/es/components/datagrid/body/cell/data_grid_cell_actions.styles.js

@@ -28,7 +28,7 @@ export var euiDataGridCellActionsStyles = function euiDataGridCellActionsStyles(
     })), " background-color:inherit;}", cellSelectors.hoverColor, " &{background-color:", cellOutline.hoverColor, ";border-color:", cellOutline.hoverColor, ";}", euiCanAnimate, "{transform:scaleY(0);transform-origin:bottom;", cellSelectors.showAnimation, " &{animation-duration:", euiTheme.animation.fast, ";animation-name:", slideUp, ";animation-iteration-count:1;animation-fill-mode:forwards;}", cellSelectors.hoverAnimation, " &{animation-delay:", euiTheme.animation.slow, ";}};label:euiDataGridRowCell__actions;"),
     euiDataGridRowCell__actionButtonIcon: /*#__PURE__*/css(logicalCSS('width', euiTheme.size.base), " ", logicalCSS('height', mathWithUnits([euiTheme.size.base, euiTheme.size.xs], function (x, y) {
       return x + y;
-    })), " border-radius:0;&,svg{background-color:transparent!important;color:currentColor!important;fill:currentColor!important;}&.euiDataGridRowCell__expandCell .euiIcon{", logicalCSS('width', '120%'), " ", logicalCSS('height', '100%'), ";}", highContrastModeStyles(euiThemeContext, {
+    })), " border-radius:0;&,svg{background-color:transparent!important;color:currentColor!important;fill:currentColor!important;}", highContrastModeStyles(euiThemeContext, {
       preferred: 'border: none;'
     }), ";;label:euiDataGridRowCell__actionButtonIcon;")
   };

package/optimize/es/components/table/table_header_cell.js

@@ -1,6 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "align", "onSort", "isSorted", "isSortAscending", "className", "scope", "mobileOptions", "width", "style", "readOnly", "tooltipProps", "description", "append"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -16,7 +19,7 @@ import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiIcon } from '../icon';
 import { EuiInnerText } from '../inner_text';
-import { EuiIconTip } from '../tool_tip';
+import { EuiIconTip, EuiToolTip } from '../tool_tip';
 import { resolveWidthAsStyle } from './utils';
 import { useEuiTableIsResponsive } from './mobile/responsive_context';
 import { EuiTableCellContent } from './_table_cell_content';
@@ -31,6 +34,21 @@ var CellContents = function CellContents(_ref) {
     canSort = _ref.canSort,
     isSorted = _ref.isSorted,
     isSortAscending = _ref.isSortAscending;
+  var tooltipIcon = tooltipProps ? canSort ? ___EmotionJSX(EuiIcon, _extends({
+    className: "euiTableSortIcon",
+    type: tooltipProps.icon || 'questionInCircle',
+    size: "m",
+    color: "subdued"
+  }, tooltipProps.iconProps)) : ___EmotionJSX(EuiIconTip, _extends({
+    content: tooltipProps.content,
+    type: tooltipProps.icon || 'questionInCircle',
+    size: "m",
+    color: "subdued",
+    position: "top",
+    iconProps: _objectSpread({
+      role: 'button'
+    }, tooltipProps.iconProps)
+  }, tooltipProps.tooltipProps)) : null;
   return ___EmotionJSX(EuiTableCellContent, {
     className: className,
     align: align,
@@ -51,14 +69,7 @@ var CellContents = function CellContents(_ref) {
         className: "eui-textTruncate"
       }, children);
     });
-  }), description && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, description)), tooltipProps && ___EmotionJSX(EuiIconTip, _extends({
-    content: tooltipProps.content,
-    type: tooltipProps.icon || 'questionInCircle',
-    size: "m",
-    color: "subdued",
-    position: "top",
-    iconProps: tooltipProps.iconProps
-  }, tooltipProps.tooltipProps)), isSorted ? ___EmotionJSX(EuiIcon, {
+  }), description && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, description)), tooltipIcon, isSorted ? ___EmotionJSX(EuiIcon, {
     className: "euiTableSortIcon",
     type: isSortAscending ? 'sortUp' : 'sortDown',
     size: "m"
@@ -120,7 +131,11 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     role: "columnheader",
     "aria-sort": ariaSortValue,
     style: inlineStyles
-  }, rest), canSort ? ___EmotionJSX("button", {
+  }, rest), canSort ? ___EmotionJSX(EuiToolTip, _extends({
+    content: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content
+  }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.tooltipProps, {
+    display: "block"
+  }), ___EmotionJSX("button", {
     type: "button",
     css: styles.euiTableHeaderCell__button,
     className: classNames('euiTableHeaderButton', {
@@ -128,5 +143,5 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     }),
     onClick: onSort,
     "data-test-subj": "tableHeaderSortButton"
-  }, ___EmotionJSX(CellContents, cellContentsProps)) : ___EmotionJSX(CellContents, cellContentsProps), append);
+  }, ___EmotionJSX(CellContents, cellContentsProps))) : ___EmotionJSX(CellContents, cellContentsProps), append);
 };

package/optimize/es/components/tool_tip/tool_tip.js

@@ -171,7 +171,10 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_this, "onEscapeKey", function (event) {
       if (event.key === keys.ESCAPE) {
-        if (_this.state.visible) event.stopPropagation();
+        // when the tooltip is only visual, we don't want it to add an additional key stop
+        if (!_this.props.disableScreenReaderOutput) {
+          if (_this.state.visible) event.stopPropagation();
+        }
         _this.setState({
           hasFocus: false
         }); // Allows mousing over back into the tooltip to work correctly

package/optimize/es/global_styling/mixins/_button.js

@@ -1,4 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -14,7 +15,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { css, keyframes } from '@emotion/react';
 import { getTokenName, euiCanAnimate } from '@elastic/eui-theme-common';
 import { makeHighContrastColor, useEuiMemoizedStyles } from '../../services';
-export var BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'neutral', 'success', 'warning', 'risk', 'danger'];
+
+/** Tentative usage; these exist only to be used as button directly when used within other components */
+export var SEVERITY_COLORS = ['neutral', 'risk'];
+export var BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+export var EXTENDED_BUTTON_COLORS = [].concat(BUTTON_COLORS, SEVERITY_COLORS);
 export var BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
 /**
  * Creates the `base` version of button styles with proper text contrast.
@@ -86,7 +91,7 @@ export var euiButtonEmptyColor = function euiButtonEmptyColor(euiThemeContext, c
 /**
  * Given the button display type, returns the Emotion based color keys.
  * @param options Button display type
- * @returns An object of `_EuiButtonColor` keys including `disabled`
+ * @returns An object of `_EuiExtendedButtonColor` keys including `disabled`
  */
 export var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -96,7 +101,7 @@ export var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
   return colorsDisplaysMap[display];
 };
 var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext) {
-  var COLORS = [].concat(BUTTON_COLORS, ['disabled']);
+  var COLORS = [].concat(_toConsumableArray(EXTENDED_BUTTON_COLORS), ['disabled']);
   var displaysColorsMap = {};
   BUTTON_DISPLAYS.forEach(function (display) {
     displaysColorsMap[display] = {};

package/optimize/es/global_styling/mixins/_color.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -10,9 +11,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import { css } from '@emotion/react';
-import { useEuiMemoizedStyles } from '../../services';
 import { getTokenName } from '@elastic/eui-theme-common';
-export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'neutral', 'success', 'warning', 'risk', 'danger'];
+import { useEuiMemoizedStyles } from '../../services';
+import { SEVERITY_COLORS } from './_button';
+export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'].concat(_toConsumableArray(SEVERITY_COLORS));
 /**
  * @deprecated - use background tokens directly
  * @returns A single background color with optional alpha transparency

package/optimize/es/test/index.d.ts

@@ -24,7 +24,8 @@ declare module '@elastic/eui/optimize/es/test/take_mounted_snapshot' {
 
 }
 declare module '@elastic/eui/optimize/es/test/find_test_subject' {
-	import { ReactWrapper, ShallowWrapper } from 'enzyme'; const MATCHERS: readonly ["=", "~=", "|=", "^=", "$=", "*="]; type FindTestSubject<T extends ShallowWrapper | ReactWrapper> = (mountedComponent: T, testSubjectSelector: string, matcher?: (typeof MATCHERS)[number]) => ReturnType<T['find']>;
+	import { ReactWrapper, ShallowWrapper } from 'enzyme'; const MATCHERS: readonly ["=", "~=", "|=", "^=", "$=", "*="];
+	type FindTestSubject<T extends ShallowWrapper | ReactWrapper> = (mountedComponent: T, testSubjectSelector: string, matcher?: (typeof MATCHERS)[number]) => ReturnType<T['find']>;
 	export const findTestSubject: FindTestSubject<ShallowWrapper<any> | ReactWrapper<any>>;
 	export {};
 

package/optimize/lib/components/color_picker/color_picker.js

@@ -16,6 +16,7 @@ var _services = require("../../services");
 var _form = require("../form");
 var _i18n = require("../i18n");
 var _popover = require("../popover");
+var _accessibility = require("../accessibility");
 var _color_picker_swatch = require("./color_picker_swatch");
 var _hue = require("./hue");
 var _saturation = require("./saturation");
@@ -95,15 +96,16 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
     isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
     placeholder = _ref.placeholder,
     dataTestSubj = _ref['data-test-subj'];
-  var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiColorPicker.popoverLabel', 'euiColorPicker.colorLabel', 'euiColorPicker.colorErrorMessage', 'euiColorPicker.transparent', 'euiColorPicker.alphaLabel', 'euiColorPicker.openLabel', 'euiColorPicker.closeLabel'], ['Color selection dialog', 'Color value', 'Invalid color value', 'Transparent', 'Alpha channel (opacity) value', 'Press the escape key to close the popover', 'Press the down key to open a popover containing color options']),
-    _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 7),
+  var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiColorPicker.popoverLabel', 'euiColorPicker.colorLabel', 'euiColorPicker.selectedColorLabel', 'euiColorPicker.colorErrorMessage', 'euiColorPicker.transparent', 'euiColorPicker.alphaLabel', 'euiColorPicker.openLabel', 'euiColorPicker.closeLabel'], ['Color selection dialog', 'Color value', 'Selected color', 'Invalid color value', 'Transparent', 'Alpha channel (opacity) value', 'Press the escape key to close the popover', 'Press the down key to open a popover containing color options']),
+    _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 8),
     popoverLabel = _useEuiI18n2[0],
     colorLabel = _useEuiI18n2[1],
-    colorErrorMessage = _useEuiI18n2[2],
-    transparent = _useEuiI18n2[3],
-    alphaLabel = _useEuiI18n2[4],
-    openLabel = _useEuiI18n2[5],
-    closeLabel = _useEuiI18n2[6];
+    selectedColorLabel = _useEuiI18n2[2],
+    colorErrorMessage = _useEuiI18n2[3],
+    transparent = _useEuiI18n2[4],
+    alphaLabel = _useEuiI18n2[5],
+    openLabel = _useEuiI18n2[6],
+    closeLabel = _useEuiI18n2[7];
   var defaultSwatches = (0, _services.useEuiPaletteColorBlind)();
   var swatches = _swatches !== null && _swatches !== void 0 ? _swatches : defaultSwatches;
   var preferredFormat = (0, _react.useMemo)(function () {
@@ -353,7 +355,10 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
     hex: chromaColor ? chromaColor.hex() : undefined,
     onChange: handleHueSelection,
     onKeyDown: handleOnKeyDown
-  })), showSwatches && (0, _react2.jsx)("ul", {
+  }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, selectedColorLabel, ": ", chromaColor === null || chromaColor === void 0 ? void 0 : chromaColor.hex().toUpperCase()))), showSwatches && (0, _react2.jsx)("ul", {
     css: styles.euiColorPicker__swatches,
     className: "euiColorPicker__swatches"
   }, swatches.map(function (swatch, index) {

package/optimize/lib/components/color_picker/hue.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiHue = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -13,6 +14,7 @@ var _services = require("../../services");
 var _accessibility = require("../accessibility");
 var _i18n = require("../i18n");
 var _hue = require("./hue.styles");
+var _tool_tip = require("../tool_tip");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "hex", "hue", "id", "onChange"];
 /*
@@ -33,9 +35,16 @@ var EuiHue = exports.EuiHue = function EuiHue(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiHue', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_hue.euiHueStyles);
+  var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiHue.ariaValueText', 'euiHue.ariaRoleDescription'], ['Hue', 'Hue slider']),
+    _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 2),
+    ariaValueText = _useEuiI18n2[0],
+    ariaRoleDescription = _useEuiI18n2[1];
   var handleChange = function handleChange(e) {
     onChange(Number(e.target.value));
   };
+  var hueValue = typeof hue === 'string' ? parseInt(hue) : hue;
+  // align the tooltip contextually closer to the thumb
+  var tooltipPosition = hueValue < Math.floor(HUE_RANGE / 2) ? 'left' : 'right';
   return (0, _react2.jsx)("div", {
     css: styles.euiHue,
     className: classes
@@ -44,9 +53,14 @@ var EuiHue = exports.EuiHue = function EuiHue(_ref) {
   }, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiHue.label",
     default: "Select the HSV color mode 'hue' value"
-  }))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-    "aria-live": "polite"
-  }, hex)), (0, _react2.jsx)("input", (0, _extends2.default)({
+  }))), (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: hex,
+    anchorProps: {
+      css: styles.euiHue__tooltip
+    },
+    disableScreenReaderOutput: true,
+    position: tooltipPosition
+  }, (0, _react2.jsx)("input", (0, _extends2.default)({
     id: "".concat(id, "-hue"),
     min: 0,
     max: HUE_RANGE,
@@ -55,6 +69,8 @@ var EuiHue = exports.EuiHue = function EuiHue(_ref) {
     css: styles.euiHue__range,
     className: "euiHue__range",
     value: hue,
-    onChange: handleChange
-  }, rest)));
+    onChange: handleChange,
+    "aria-roledescription": ariaRoleDescription,
+    "aria-valuetext": "".concat(ariaValueText, " ").concat(hue, "\xB0")
+  }, rest))));
 };

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

@@ -32,9 +32,10 @@ var euiHueStyles = exports.euiHueStyles = function euiHueStyles(euiThemeContext)
       preferred: "border: ".concat(euiTheme.border.thin, ";"),
       forced: (0, _high_contrast.preventForcedColors)(euiThemeContext)
     }), ";;label:euiHue;"),
-    euiHue__range: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', thumbSize), (0, _global_styling.logicalCSS)('width', "calc(100% + 2px)"), (0, _global_styling.logicalCSS)('margin-horizontal', '-1px'), " ", (0, _global_styling.logicalCSS)('margin-top', (0, _global_styling.mathWithUnits)(height, function (x) {
+    euiHue__tooltip: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', thumbSize), (0, _global_styling.logicalCSS)('width', "calc(100% + 2px)"), (0, _global_styling.logicalCSS)('margin-horizontal', '-1px'), " ", (0, _global_styling.logicalCSS)('margin-top', (0, _global_styling.mathWithUnits)(height, function (x) {
       return x / -2;
-    })), "appearance:none;background:transparent;&::-webkit-slider-thumb{-webkit-appearance:none;}", (0, _range.euiRangeThumbPerBrowser)("\n        ".concat((0, _range.euiRangeThumbStyle)(euiThemeContext), "\n        border-width: ").concat(thumbBorder, ";\n\n        ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    })), ";;label:euiHue__tooltip;"),
+    euiHue__range: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), "appearance:none;background:transparent;&::-webkit-slider-thumb{-webkit-appearance:none;}", (0, _range.euiRangeThumbPerBrowser)("\n        ".concat((0, _range.euiRangeThumbStyle)(euiThemeContext), "\n        border-width: ").concat(thumbBorder, ";\n\n        ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: "\n            background-color: transparent;\n            box-shadow: ".concat(thumbBoxShadow, ";\n          "),
       preferred: "\n            background-color: ".concat(euiTheme.colors.ghost, ";\n            border: ").concat(thumbBorder, " solid ").concat(euiTheme.colors.ink, ";\n            box-shadow: none;\n          ")
     }), "\n      ")), "&:focus{outline:none;}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {

package/optimize/lib/components/color_picker/saturation.js

@@ -16,6 +16,7 @@ var _services = require("../../services");
 var _predicate = require("../../services/predicate");
 var _global_styling = require("../../global_styling");
 var _i18n = require("../i18n");
+var _tool_tip = require("../tool_tip");
 var _utils = require("./utils");
 var _saturation = require("./saturation.styles");
 var _react2 = require("@emotion/react");
@@ -50,10 +51,11 @@ var EuiSaturation = exports.EuiSaturation = /*#__PURE__*/(0, _react.forwardRef)(
   });
   var instructionsId = "".concat(id, "-instructions");
   var indicatorId = "".concat(id, "-saturationIndicator");
-  var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiSaturation.ariaLabel', 'euiSaturation.screenReaderInstructions'], ['HSV color mode saturation and value 2-axis slider', "Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value."]),
-    _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 2),
-    roleDescString = _useEuiI18n2[0],
-    instructionsString = _useEuiI18n2[1];
+  var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiSaturation.ariaLabel', 'euiSaturation.roleDescription', 'euiSaturation.screenReaderInstructions'], ['Select a color', 'HSV color mode saturation and value 2-axis slider.', "Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value."]),
+    _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 3),
+    ariaLabel = _useEuiI18n2[0],
+    roleDescString = _useEuiI18n2[1],
+    instructionsString = _useEuiI18n2[2];
   var _useState = (0, _react.useState)({
       left: 0,
       top: 0
@@ -175,18 +177,21 @@ var EuiSaturation = exports.EuiSaturation = /*#__PURE__*/(0, _react.forwardRef)(
   }, (0, _react2.jsx)("div", {
     css: styles.euiSaturation__saturation,
     className: "euiSaturation__saturation"
-  })), (0, _react2.jsx)("button", {
+  })), (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: hex,
+    anchorProps: {
+      css: styles.euiSaturation__tooltip,
+      style: (0, _global_styling.logicalStyles)(indicator)
+    },
+    disableScreenReaderOutput: true // required to prevent verbose screen reader output
+  }, (0, _react2.jsx)("button", {
     id: indicatorId,
     css: styles.euiSaturation__indicator,
     className: "euiSaturation__indicator",
-    style: (0, _global_styling.logicalStyles)(indicator),
     "aria-roledescription": roleDescString,
-    "aria-label": hex,
+    "aria-label": ariaLabel,
     "aria-describedby": instructionsId
-  }), (0, _react2.jsx)("span", {
-    hidden: true,
-    "aria-live": "assertive"
-  }, hex), (0, _react2.jsx)("span", {
+  })), (0, _react2.jsx)("span", {
     hidden: true,
     id: instructionsId
   }, instructionsString));

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

@@ -36,7 +36,8 @@ var euiSaturationStyles = exports.euiSaturationStyles = function euiSaturationSt
     }), ";;label:euiSaturation;"),
     euiSaturation__lightness: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;border-radius:", gradientBorderRadius, ";background:linear-gradient(\n        to right,\n        rgba(255, 255, 255, 1),\n        rgba(255, 255, 255, 0)\n      );;label:euiSaturation__lightness;"),
     euiSaturation__saturation: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;border-radius:", gradientBorderRadius, ";background:linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));;label:euiSaturation__saturation;"),
-    euiSaturation__indicator: /*#__PURE__*/(0, _react.css)("z-index:2;position:absolute;", (0, _global_styling.logicalSizeCSS)(indicatorSize), " transform:translateX(-50%) translateY(-50%);border-radius:100%;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    euiSaturation__tooltip: /*#__PURE__*/(0, _react.css)("z-index:2;position:absolute;", (0, _global_styling.logicalSizeCSS)(indicatorSize), " transform:translateX(-50%) translateY(-50%);border-radius:100%;;label:euiSaturation__tooltip;"),
+    euiSaturation__indicator: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;", (0, _global_styling.logicalSizeCSS)(indicatorSize), " border-radius:100%;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: "\n          border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.darkestShade, ";\n\n          &::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            border-radius: 100%;\n            border: ").concat(euiTheme.border.width.thin, " solid\n              ").concat(euiTheme.colors.lightestShade, ";\n          }\n        "),
       preferred: "\n          border: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.ink, ";\n          background-color: ").concat(euiTheme.colors.ghost, ";\n        ")
     }), ";;label:euiSaturation__indicator;")

package/optimize/lib/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -52,8 +52,8 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
         "data-test-subj": "euiDataGridCellExpandButton",
         display: "fill",
         color: "primary",
-        iconSize: "m",
-        iconType: "expandMini",
+        iconSize: "s",
+        iconType: "expand",
         "aria-hidden": true,
         onClick: onExpandClick,
         title: expandButtonTitle

package/optimize/lib/components/datagrid/body/cell/data_grid_cell_actions.styles.js

@@ -34,7 +34,7 @@ var euiDataGridCellActionsStyles = exports.euiDataGridCellActionsStyles = functi
     })), " background-color:inherit;}", cellSelectors.hoverColor, " &{background-color:", cellOutline.hoverColor, ";border-color:", cellOutline.hoverColor, ";}", _global_styling.euiCanAnimate, "{transform:scaleY(0);transform-origin:bottom;", cellSelectors.showAnimation, " &{animation-duration:", euiTheme.animation.fast, ";animation-name:", slideUp, ";animation-iteration-count:1;animation-fill-mode:forwards;}", cellSelectors.hoverAnimation, " &{animation-delay:", euiTheme.animation.slow, ";}};label:euiDataGridRowCell__actions;"),
     euiDataGridRowCell__actionButtonIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([euiTheme.size.base, euiTheme.size.xs], function (x, y) {
       return x + y;
-    })), " border-radius:0;&,svg{background-color:transparent!important;color:currentColor!important;fill:currentColor!important;}&.euiDataGridRowCell__expandCell .euiIcon{", (0, _global_styling.logicalCSS)('width', '120%'), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    })), " border-radius:0;&,svg{background-color:transparent!important;color:currentColor!important;fill:currentColor!important;}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       preferred: 'border: none;'
     }), ";;label:euiDataGridRowCell__actionButtonIcon;")
   };