@elastic/eui 64.0.1 → 65.0.2

package/i18ntokens.json

@@ -5,11 +5,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 356,
+        "line": 360,
         "column": 16
       },
       "end": {
-        "line": 356,
+        "line": 360,
         "column": 76
       }
     },
@@ -261,15 +261,15 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 72,
+        "line": 63,
         "column": 11
       },
       "end": {
-        "line": 72,
+        "line": 63,
         "column": 72
       }
     },
-    "filepath": "src/components/card/card_select.tsx"
+    "filepath": "src/components/card/card_select/card_select.tsx"
   },
   {
     "token": "euiCardSelect.unavailable",
@@ -277,15 +277,15 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 74,
+        "line": 65,
         "column": 11
       },
       "end": {
-        "line": 74,
+        "line": 65,
         "column": 78
       }
     },
-    "filepath": "src/components/card/card_select.tsx"
+    "filepath": "src/components/card/card_select/card_select.tsx"
   },
   {
     "token": "euiCardSelect.select",
@@ -293,15 +293,15 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 76,
+        "line": 67,
         "column": 11
       },
       "end": {
-        "line": 76,
+        "line": 67,
         "column": 68
       }
     },
-    "filepath": "src/components/card/card_select.tsx"
+    "filepath": "src/components/card/card_select/card_select.tsx"
   },
   {
     "token": "euiCodeBlock.copyButton",
@@ -4197,11 +4197,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 228,
+        "line": 229,
         "column": 12
       },
       "end": {
-        "line": 228,
+        "line": 229,
         "column": 80
       }
     },
@@ -4213,11 +4213,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 238,
+        "line": 240,
         "column": 12
       },
       "end": {
-        "line": 241,
+        "line": 243,
         "column": 14
       }
     },

package/lib/components/accessibility/screen_reader_only/screen_reader_only.styles.js

@@ -7,6 +7,8 @@ exports.euiScreenReaderOnlyStyles = exports.euiScreenReaderOnly = void 0;
 
 var _react = require("@emotion/react");
 
+var _global_styling = require("../../../global_styling");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,7 +22,7 @@ var _react = require("@emotion/react");
  * See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
  */
 var euiScreenReaderOnly = function euiScreenReaderOnly() {
-  return "\n  // Take the element out of the layout\n  position: absolute;\n  // Keep it vertically inline\n  top: auto;\n  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text\n  left: -10000px;\n  // The element must have a size (for some screen readers)\n  width: 1px;\n  height: 1px;\n  // But reduce the visible size to nothing\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  // And ensure no overflows occur\n  overflow: hidden;\n  // Chrome requires the negative margin to not cause overflows of parent containers\n  margin: -1px;\n";
+  return "\n  // Take the element out of the layout\n  position: absolute;\n  // Keep it vertically inline\n  ".concat((0, _global_styling.logicalCSS)('top', 'auto'), "\n  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text\n  ").concat((0, _global_styling.logicalCSS)('left', '-10000px'), "\n  // The element must have a size (for some screen readers)\n  ").concat((0, _global_styling.logicalSizeCSS)('1px', '1px'), "\n  // But reduce the visible size to nothing\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  // And ensure no overflows occur\n  overflow: hidden;\n  // Chrome requires the negative margin to not cause overflows of parent containers\n  margin: -1px;\n");
 };
 /*
  * Styles

package/lib/components/accessibility/skip_link/skip_link.js

@@ -163,70 +163,20 @@ EuiSkipLink.propTypes = {
   fill: _propTypes.default.bool,
 
   /**
-     * Any of our named colors.
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
-  color: _propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
 
   /**
      * Use size `s` in confined spaces
      */
-  size: _propTypes.default.oneOf(["s", "m"]),
+  size: _propTypes.default.any,
 
   /**
      * `disabled` is also allowed
      */
   isDisabled: _propTypes.default.bool,
-
-  /**
-     * Applies the boolean state as the `aria-pressed` property to create a toggle button.
-     * *Only use when the readable text does not change between states.*
-     */
-  isSelected: _propTypes.default.bool,
-
-  /**
-     * Extends the button to 100% width
-     */
-  fullWidth: _propTypes.default.bool,
-
-  /**
-     * Override the default minimum width
-     */
-  minWidth: _propTypes.default.any,
-
-  /**
-     * Force disables the button and changes the icon to a loading spinner
-     */
-  isLoading: _propTypes.default.bool,
-
-  /**
-     * Object of props passed to the <span/> wrapping the button's content
-     */
-  contentProps: _propTypes.default.any,
-  style: _propTypes.default.any,
-
-  /**
-     * Any `type` accepted by EuiIcon
-     */
-  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "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", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "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", "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", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "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", "timelionApp", "timeRefresh", "timeslider", "training", "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", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "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", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
-
-  /**
-     * Can only be one side `left` or `right`
-     */
-  iconSide: _propTypes.default.oneOf(["left", "right"]),
-
-  /**
-     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
-     * It doesn't apply to the icon.
-     */
-  textProps: _propTypes.default.shape({
-    className: _propTypes.default.string,
-    "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string,
-    css: _propTypes.default.any,
-    ref: _propTypes.default.any,
-    "data-text": _propTypes.default.string
-  }),
-  iconSize: _propTypes.default.oneOf(["s", "m"]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/lib/components/accordion/accordion.js

@@ -29,6 +29,8 @@ var _button = require("../button");
 
 var _accordion = require("./accordion.styles");
 
+var _global_styling = require("../../global_styling");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "buttonProps", "buttonElement", "arrowProps", "theme"];
@@ -106,7 +108,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var forceState = _this.props.forceState;
       requestAnimationFrame(function () {
         var height = _this.childContent && (forceState ? forceState === 'open' : _this.state.isOpen) ? _this.childContent.clientHeight : 0;
-        _this.childWrapper && _this.childWrapper.setAttribute('style', "height: ".concat(height, "px"));
+        _this.childWrapper && _this.childWrapper.setAttribute('style', (0, _global_styling.logicalCSS)('height', "".concat(height, "px")));
       });
     });
 

package/lib/components/accordion/accordion.styles.js

@@ -7,14 +7,14 @@ exports.euiAccordionTriggerWrapperStyles = exports.euiAccordionSpinnerStyles = e
 
 var _react = require("@emotion/react");
 
-var _mixins = require("../../global_styling/mixins");
+var _global_styling = require("../../global_styling");
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiAccordion__button: /*#__PURE__*/(0, _react.css)((0, _mixins.euiFontSize)(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";text-align:left;width:100%;&:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
+    euiAccordion__button: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";", (0, _global_styling.logicalTextAlignCSS)('left'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " &:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
     // Triggering button needs separate `disabled` key because the element that renders may not support `:disabled`;
     // Hover pseudo selector for specificity
     disabled: /*#__PURE__*/(0, _react.css)("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;")
@@ -23,7 +23,7 @@ var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext
 
 exports.euiAccordionButtonStyles = euiAccordionButtonStyles;
 
-var _ref5 = process.env.NODE_ENV === "production" ? {
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1xvjonu-isLoading",
   styles: "align-items:center;display:flex;label:isLoading;"
 } : {
@@ -32,11 +32,11 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref6) {
-  var euiTheme = _ref6.euiTheme;
+var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
     euiAccordion__children: /*#__PURE__*/(0, _react.css)(";label:euiAccordion__children;"),
-    isLoading: _ref5,
+    isLoading: _ref4,
     xs: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.xs, ";;label:xs;"),
     s: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";;label:m;"),
@@ -47,20 +47,11 @@ var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref6) {
 
 exports.euiAccordionChildrenStyles = euiAccordionChildrenStyles;
 
-var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "xodlxj-isOpen",
-  styles: "height:auto;opacity:1;visibility:visible;label:isOpen;"
-} : {
-  name: "xodlxj-isOpen",
-  styles: "height:auto;opacity:1;visibility:visible;label:isOpen;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref7) {
-  var euiTheme = _ref7.euiTheme;
+var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref6) {
+  var euiTheme = _ref6.euiTheme;
   return {
-    euiAccordion__childWrapper: /*#__PURE__*/(0, _react.css)("height:0;opacity:0;overflow:hidden;transition:height ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,height;&:focus{outline:none;};label:euiAccordion__childWrapper;"),
-    isOpen: _ref4
+    euiAccordion__childWrapper: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 0), " opacity:0;overflow:hidden;transition:", _global_styling.logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,", _global_styling.logicals.height, ";&:focus{outline:none;};label:euiAccordion__childWrapper;"),
+    isOpen: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 'auto'), " opacity:1;visibility:visible;;label:isOpen;")
   };
 };
 
@@ -75,12 +66,12 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
   return {
-    euiAccordion__iconButton: /*#__PURE__*/(0, _react.css)("flex-shrink:0;margin-inline-end:", euiTheme.size.xs, ";transform:rotate(0deg)!important;transform:rotate(0deg)!important;;label:euiAccordion__iconButton;"),
+    euiAccordion__iconButton: /*#__PURE__*/(0, _react.css)("flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), " transform:rotate(0deg)!important;;label:euiAccordion__iconButton;"),
     isOpen: _ref3,
-    arrowRight: /*#__PURE__*/(0, _react.css)("margin-left:", euiTheme.size.xs, ";margin-right:0;;label:arrowRight;")
+    arrowRight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-right', 0), ";;label:arrowRight;")
   };
 };
 
@@ -103,10 +94,10 @@ var euiAccordionOptionalActionStyles = function euiAccordionOptionalActionStyles
 
 exports.euiAccordionOptionalActionStyles = euiAccordionOptionalActionStyles;
 
-var euiAccordionSpinnerStyles = function euiAccordionSpinnerStyles(_ref9) {
-  var euiTheme = _ref9.euiTheme;
+var euiAccordionSpinnerStyles = function euiAccordionSpinnerStyles(_ref8) {
+  var euiTheme = _ref8.euiTheme;
   return {
-    euiAccordion__spinner: /*#__PURE__*/(0, _react.css)("margin-right:", euiTheme.size.xs, ";;label:euiAccordion__spinner;")
+    euiAccordion__spinner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";;label:euiAccordion__spinner;")
   };
 };
 

package/lib/components/badge/beta_badge/beta_badge.js

@@ -21,7 +21,7 @@ var _icon = require("../../icon");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size"];
+var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -60,6 +60,7 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
       tooltipContent = _ref.tooltipContent,
       _ref$tooltipPosition = _ref.tooltipPosition,
       tooltipPosition = _ref$tooltipPosition === void 0 ? 'top' : _ref$tooltipPosition,
+      anchorProps = _ref.anchorProps,
       title = _ref.title,
       iconType = _ref.iconType,
       onClick = _ref.onClick,
@@ -125,7 +126,8 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
       return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
         position: tooltipPosition,
         content: tooltipContent,
-        title: title || label
+        title: title || label,
+        anchorProps: anchorProps
       }, content);
     } else {
       return (0, _react2.jsx)(_react.Fragment, null, content);
@@ -135,7 +137,8 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
       return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
         position: tooltipPosition,
         content: tooltipContent,
-        title: title || label
+        title: title || label,
+        anchorProps: anchorProps
       }, (0, _react2.jsx)("span", _extends({
         tabIndex: 0,
         className: classes,
@@ -200,6 +203,16 @@ EuiBetaBadge.propTypes = {
      */
   tooltipPosition: _propTypes.default.oneOf(["top", "right", "bottom", "left"]),
 
+  /**
+     * Passes onto the span wrapping the badge
+     */
+  anchorProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
+
   /**
      * Optional title will be supplied as tooltip title or title attribute
      * otherwise the label will be used

package/lib/components/basic_table/basic_table.js

@@ -1338,7 +1338,7 @@ EuiBasicTable.propTypes = {
       /**
          * Defines the color of the button
          */
-      color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]).isRequired, _propTypes.default.func.isRequired]), _propTypes.default.oneOfType([_propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired, _propTypes.default.func.isRequired])]),
+      color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]).isRequired, _propTypes.default.func.isRequired]),
 
       /**
          * The display name of the action (will be the button caption)

package/lib/components/basic_table/collapsed_item_actions.js

@@ -251,7 +251,7 @@ CollapsedItemActions.propTypes = {
     /**
        * Defines the color of the button
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]).isRequired, _propTypes.default.func.isRequired]), _propTypes.default.oneOfType([_propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired, _propTypes.default.func.isRequired])]),
+    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]).isRequired, _propTypes.default.func.isRequired]),
 
     /**
        * The display name of the action (will be the button caption)

package/lib/components/basic_table/in_memory_table.js

@@ -759,7 +759,7 @@ EuiInMemoryTable.propTypes = {
       /**
          * Defines the color of the button
          */
-      color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]).isRequired, _propTypes.default.func.isRequired]), _propTypes.default.oneOfType([_propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired, _propTypes.default.func.isRequired])]),
+      color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]).isRequired, _propTypes.default.func.isRequired]),
 
       /**
          * The display name of the action (will be the button caption)

package/lib/components/beacon/beacon.styles.js

@@ -22,7 +22,7 @@ var euiBeaconPulseSmall = (0, _react.keyframes)(_templateObject2 || (_templateOb
 var euiBeaconStyles = function euiBeaconStyles() {
   return {
     // Base
-    euiBeacon: /*#__PURE__*/(0, _react.css)("position:relative;background-color:", visColors[0], ";border-radius:50%;&:before,&:after{position:absolute;content:'';height:100%;width:100%;inset-inline-start:0;inset-block-start:0;background-color:transparent;border-radius:50%;box-shadow:0 0 1px 1px ", visColors[0], ";}&:before{transform:scale(1.6);opacity:0.4;}&:after{opacity:0;}", _global_styling.euiCanAnimate, "{&:before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&:after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;")
+    euiBeacon: /*#__PURE__*/(0, _react.css)("position:relative;background-color:", visColors[0], ";border-radius:50%;&:before,&:after{position:absolute;content:'';", (0, _global_styling.logicalSizeCSS)('100%', '100%'), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('top', 0), " background-color:transparent;border-radius:50%;box-shadow:0 0 1px 1px ", visColors[0], ";}&:before{transform:scale(1.6);opacity:0.4;}&:after{opacity:0;}", _global_styling.euiCanAnimate, "{&:before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&:after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;")
   };
 };