@elastic/eui 102.0.0 → 102.1.0

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiTableHeaderCell = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -21,7 +22,8 @@ var _table_cell_content = require("./_table_cell_content");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _react2 = require("@emotion/react");
 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) { (0, _defineProperty2.default)(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
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
@@ -37,6 +39,21 @@ var CellContents = function CellContents(_ref) {
     canSort = _ref.canSort,
     isSorted = _ref.isSorted,
     isSortAscending = _ref.isSortAscending;
+  var tooltipIcon = tooltipProps ? canSort ? (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
+    className: "euiTableSortIcon",
+    type: tooltipProps.icon || 'questionInCircle',
+    size: "m",
+    color: "subdued"
+  }, tooltipProps.iconProps)) : (0, _react2.jsx)(_tool_tip.EuiIconTip, (0, _extends2.default)({
+    content: tooltipProps.content,
+    type: tooltipProps.icon || 'questionInCircle',
+    size: "m",
+    color: "subdued",
+    position: "top",
+    iconProps: _objectSpread({
+      role: 'button'
+    }, tooltipProps.iconProps)
+  }, tooltipProps.tooltipProps)) : null;
   return (0, _react2.jsx)(_table_cell_content.EuiTableCellContent, {
     className: className,
     align: align,
@@ -57,14 +74,7 @@ var CellContents = function CellContents(_ref) {
         className: "eui-textTruncate"
       }, children);
     });
-  }), description && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, description)), tooltipProps && (0, _react2.jsx)(_tool_tip.EuiIconTip, (0, _extends2.default)({
-    content: tooltipProps.content,
-    type: tooltipProps.icon || 'questionInCircle',
-    size: "m",
-    color: "subdued",
-    position: "top",
-    iconProps: tooltipProps.iconProps
-  }, tooltipProps.tooltipProps)), isSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
+  }), description && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, description)), tooltipIcon, isSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
     className: "euiTableSortIcon",
     type: isSortAscending ? 'sortUp' : 'sortDown',
     size: "m"
@@ -126,7 +136,11 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     role: "columnheader",
     "aria-sort": ariaSortValue,
     style: inlineStyles
-  }, rest), canSort ? (0, _react2.jsx)("button", {
+  }, rest), canSort ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
+    content: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content
+  }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.tooltipProps, {
+    display: "block"
+  }), (0, _react2.jsx)("button", {
     type: "button",
     css: styles.euiTableHeaderCell__button,
     className: (0, _classnames.default)('euiTableHeaderButton', {
@@ -134,5 +148,5 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     }),
     onClick: onSort,
     "data-test-subj": "tableHeaderSortButton"
-  }, (0, _react2.jsx)(CellContents, cellContentsProps)) : (0, _react2.jsx)(CellContents, cellContentsProps), append);
+  }, (0, _react2.jsx)(CellContents, cellContentsProps))) : (0, _react2.jsx)(CellContents, cellContentsProps), append);
 };

package/optimize/lib/components/tool_tip/tool_tip.js

@@ -179,7 +179,10 @@ var EuiToolTip = exports.EuiToolTip = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)(_this, "onEscapeKey", function (event) {
       if (event.key === _services.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/lib/global_styling/mixins/_button.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_DISPLAYS = exports.BUTTON_COLORS = void 0;
+exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.SEVERITY_COLORS = exports.EXTENDED_BUTTON_COLORS = exports.BUTTON_DISPLAYS = exports.BUTTON_COLORS = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
@@ -19,7 +20,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var BUTTON_COLORS = exports.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 */
+var SEVERITY_COLORS = exports.SEVERITY_COLORS = ['neutral', 'risk'];
+var BUTTON_COLORS = exports.BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+var EXTENDED_BUTTON_COLORS = exports.EXTENDED_BUTTON_COLORS = [].concat(BUTTON_COLORS, SEVERITY_COLORS);
 var BUTTON_DISPLAYS = exports.BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
 /**
  * Creates the `base` version of button styles with proper text contrast.
@@ -91,7 +95,7 @@ var euiButtonEmptyColor = exports.euiButtonEmptyColor = function euiButtonEmptyC
 /**
  * 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`
  */
 var useEuiButtonColorCSS = exports.useEuiButtonColorCSS = function useEuiButtonColorCSS() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -101,7 +105,7 @@ var useEuiButtonColorCSS = exports.useEuiButtonColorCSS = function useEuiButtonC
   return colorsDisplaysMap[display];
 };
 var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext) {
-  var COLORS = [].concat(BUTTON_COLORS, ['disabled']);
+  var COLORS = [].concat((0, _toConsumableArray2.default)(EXTENDED_BUTTON_COLORS), ['disabled']);
   var displaysColorsMap = {};
   BUTTON_DISPLAYS.forEach(function (display) {
     displaysColorsMap[display] = {};

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

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useEuiBorderColorCSS = exports.useEuiBackgroundColorCSS = exports.useEuiBackgroundColor = exports.euiBorderColor = exports.euiBackgroundColor = exports.BACKGROUND_COLORS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
-var _services = require("../../services");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
+var _services = require("../../services");
+var _button = require("./_button");
 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) { (0, _defineProperty2.default)(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
@@ -17,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var BACKGROUND_COLORS = exports.BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'neutral', 'success', 'warning', 'risk', 'danger'];
+var BACKGROUND_COLORS = exports.BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'].concat((0, _toConsumableArray2.default)(_button.SEVERITY_COLORS));
 /**
  * @deprecated - use background tokens directly
  * @returns A single background color with optional alpha transparency

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

@@ -24,7 +24,8 @@ declare module '@elastic/eui/optimize/lib/test/take_mounted_snapshot' {
 
 }
 declare module '@elastic/eui/optimize/lib/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "102.0.0",
+  "version": "102.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -248,7 +248,7 @@
     "stylelint-config-standard": "^33.0.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "terser-webpack-plugin": "^5.3.5",
-    "typescript": "4.5.3",
+    "typescript": "^5.8.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",

package/test-env/components/accessibility/skip_link/skip_link.js

@@ -137,6 +137,13 @@ EuiSkipLink.propTypes = {
   fill: _propTypes.default.bool,
   /**
      * Any of the named color palette options.
+     *
+     * Do not use the following colors for standalone buttons directly,
+     * they exist to serve other components:
+     *  - accent
+     *  - warning
+     *  - neutral
+     *  - risk
      */
   color: _propTypes.default.any,
   /**

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

@@ -70,6 +70,13 @@ EuiButton.propTypes = {
   fill: _propTypes.default.bool,
   /**
      * Any of the named color palette options.
+     *
+     * Do not use the following colors for standalone buttons directly,
+     * they exist to serve other components:
+     *  - accent
+     *  - warning
+     *  - neutral
+     *  - risk
      */
   color: _propTypes.default.any,
   /**

package/test-env/components/button/button_empty/button_empty.js

@@ -118,6 +118,13 @@ EuiButtonEmpty.propTypes = {
   onClick: _propTypes.default.func,
   /**
      * Any of the named color palette options.
+     *
+     * Do not use the following colors for standalone buttons directly,
+     * they exist to serve other components:
+     *  - accent
+     *  - warning
+     *  - neutral
+     *  - risk
      */
   color: _propTypes.default.any,
   size: _propTypes.default.any,

package/test-env/components/button/button_group/button_group.js

@@ -105,6 +105,11 @@ EuiButtonGroup.propTypes = {
   legend: _propTypes.default.string.isRequired,
   /**
      * Any of the named color palette options.
+     *
+     * Do not use the following colors for standalone buttons directly,
+     * they exist to serve other components:
+     *  - accent
+     *  - warning
      */
   color: _propTypes.default.any,
   /**

package/test-env/components/button/button_icon/button_icon.js

@@ -135,6 +135,13 @@ EuiButtonIcon.propTypes = {
   iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "anomalyChart", "anomalySwimLane", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "changePointDetection", "check", "checkCircle", "checkInCircleFilled", "cheer", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "color", "comment", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastHigh", "controls", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInCircle", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "diff", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "errorFilled", "esqlVis", "exit", "expand", "expandMini", "export", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flask", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logPatternAnalysis", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "minusInSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plugs", "plus", "plusInCircle", "plusInCircleFilled", "plusInSquare", "popout", "push", "questionInCircle", "quote", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "warningFilled", "alert", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired,
   /**
      * Any of the named color palette options.
+     *
+     * Do not use the following colors for standalone buttons directly,
+     * they exist to serve other components:
+     *  - accent
+     *  - warning
+     *  - neutral
+     *  - risk
      */
   color: _propTypes.default.any,
   "aria-label": _propTypes.default.string,

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

@@ -421,6 +421,13 @@ EuiCard.propTypes = {
     fill: _propTypes.default.bool,
     /**
        * Any of the named color palette options.
+       *
+       * Do not use the following colors for standalone buttons directly,
+       * they exist to serve other components:
+       *  - accent
+       *  - warning
+       *  - neutral
+       *  - risk
        */
     color: _propTypes.default.any,
     /**

package/test-env/components/card/card_select/card_select.js

@@ -57,6 +57,13 @@ EuiCardSelect.propTypes = {
   fill: _propTypes.default.bool,
   /**
      * Any of the named color palette options.
+     *
+     * Do not use the following colors for standalone buttons directly,
+     * they exist to serve other components:
+     *  - accent
+     *  - warning
+     *  - neutral
+     *  - risk
      */
   color: _propTypes.default.any,
   /**

package/test-env/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.js

@@ -222,6 +222,13 @@ KibanaCollapsibleNavSolution.propTypes = {
       iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "anomalyChart", "anomalySwimLane", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "changePointDetection", "check", "checkCircle", "checkInCircleFilled", "cheer", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "color", "comment", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastHigh", "controls", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInCircle", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "diff", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "errorFilled", "esqlVis", "exit", "expand", "expandMini", "export", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flask", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logPatternAnalysis", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "minusInSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plugs", "plus", "plusInCircle", "plusInCircleFilled", "plusInSquare", "popout", "push", "questionInCircle", "quote", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "warningFilled", "alert", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired,
       /**
          * Any of the named color palette options.
+         *
+         * Do not use the following colors for standalone buttons directly,
+         * they exist to serve other components:
+         *  - accent
+         *  - warning
+         *  - neutral
+         *  - risk
          */
       color: _propTypes.default.any,
       "aria-label": _propTypes.default.string,

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

@@ -17,6 +17,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");
@@ -96,15 +97,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 () {
@@ -354,7 +356,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/test-env/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 _propTypes = _interopRequireDefault(require("prop-types"));
@@ -14,6 +15,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"];
 /*
@@ -34,9 +36,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
@@ -45,9 +54,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,
@@ -56,8 +70,10 @@ 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))));
 };
 EuiHue.propTypes = {
   className: _propTypes.default.string,

package/test-env/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/test-env/components/color_picker/saturation.js

@@ -17,6 +17,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");
@@ -51,10 +52,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
@@ -176,18 +178,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/test-env/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/test-env/components/datagrid/body/cell/data_grid_cell.js

@@ -208,6 +208,13 @@ EuiDataGridCellContent.propTypes = {
           iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "anomalyChart", "anomalySwimLane", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "changePointDetection", "check", "checkCircle", "checkInCircleFilled", "cheer", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "color", "comment", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastHigh", "controls", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInCircle", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "diff", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "errorFilled", "esqlVis", "exit", "expand", "expandMini", "export", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flask", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logPatternAnalysis", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "minusInSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plugs", "plus", "plusInCircle", "plusInCircleFilled", "plusInSquare", "popout", "push", "questionInCircle", "quote", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "warningFilled", "alert", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired,
           /**
              * Any of the named color palette options.
+             *
+             * Do not use the following colors for standalone buttons directly,
+             * they exist to serve other components:
+             *  - accent
+             *  - warning
+             *  - neutral
+             *  - risk
              */
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,

package/test-env/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/test-env/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;")
   };