@elastic/eui 76.3.0 → 77.0.0

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

@@ -1,67 +1,48 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.checkValidColor = exports.TYPES = exports.SIZES = exports.EuiAvatar = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _color = require("../../services/color");
-
 var _services = require("../../services");
-
 var _icon = require("../icon");
-
 var _avatar = require("./avatar.styles");
-
 var _react2 = require("@emotion/react");
-
 var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SIZES = ['s', 'm', 'l', 'xl'];
 exports.SIZES = SIZES;
 var TYPES = ['space', 'user'];
 exports.TYPES = TYPES;
-
 var EuiAvatar = function EuiAvatar(_ref) {
   var _classNames;
-
   var className = _ref.className,
-      color = _ref.color,
-      imageUrl = _ref.imageUrl,
-      initials = _ref.initials,
-      initialsLength = _ref.initialsLength,
-      iconType = _ref.iconType,
-      iconSize = _ref.iconSize,
-      iconColor = _ref.iconColor,
-      name = _ref.name,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'user' : _ref$type,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      style = _ref.style,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    color = _ref.color,
+    imageUrl = _ref.imageUrl,
+    initials = _ref.initials,
+    initialsLength = _ref.initialsLength,
+    iconType = _ref.iconType,
+    iconSize = _ref.iconSize,
+    iconColor = _ref.iconColor,
+    name = _ref.name,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'user' : _ref$type,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    style = _ref.style,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _avatar.euiAvatarStyles)(euiTheme);
   var visColors = (0, _services.euiPaletteColorBlindBehindText)();
@@ -70,29 +51,24 @@ var EuiAvatar = function EuiAvatar(_ref) {
   var classes = (0, _classnames.default)('euiAvatar', (_classNames = {}, (0, _defineProperty2.default)(_classNames, "euiAvatar--".concat(size), size), (0, _defineProperty2.default)(_classNames, "euiAvatar--".concat(type), type), (0, _defineProperty2.default)(_classNames, 'euiAvatar-isDisabled', isDisabled), _classNames), className);
   var cssStyles = [styles.euiAvatar, styles[size], styles[type], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
   checkValidInitials(initials);
-
   var avatarStyle = _objectSpread({}, style);
-
   var iconCustomColor = iconColor;
   var isNamedColor = color === 'plain' || color === 'subdued' || color === null;
-
   if (!isNamedColor) {
     checkValidColor(color);
     var assignedColor = color || visColors[Math.floor(name.length % visColors.length)];
     var textColor = _color.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _color.hexToRgb)(assignedColor))) ? '#FFFFFF' : '#000000';
     avatarStyle.backgroundColor = assignedColor;
-    avatarStyle.color = textColor; // Allow consumers to let the icons keep their default color (like app icons)
-    // when passing `iconColor = null`, otherwise continue to pass on `iconColor` or adjust with textColor
+    avatarStyle.color = textColor;
 
+    // Allow consumers to let the icons keep their default color (like app icons)
+    // when passing `iconColor = null`, otherwise continue to pass on `iconColor` or adjust with textColor
     iconCustomColor = iconColor || iconColor === null ? iconColor : textColor;
   }
-
   if (imageUrl) {
     avatarStyle.backgroundImage = "url(".concat(imageUrl, ")");
   }
-
   var content;
-
   if (!imageUrl && !iconType) {
     // Create the initials
     var calculatedInitials = (0, _services.toInitials)(name, initialsLength, initials);
@@ -107,7 +83,6 @@ var EuiAvatar = function EuiAvatar(_ref) {
       color: iconCustomColor === null ? undefined : iconCustomColor
     });
   }
-
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: cssStyles,
     className: classes,
@@ -116,59 +91,50 @@ var EuiAvatar = function EuiAvatar(_ref) {
     role: isDisabled ? 'presentation' : 'img',
     title: name
   }, rest), content);
-}; // TODO: Migrate to a service
-
+};
 
+// TODO: Migrate to a service
 exports.EuiAvatar = EuiAvatar;
 EuiAvatar.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-
   /**
          * Custom initials (max 2 characters).
          * By default will take the first character (of each word).
          */
   initials: _propTypes.default.string,
-
   /**
          * Specify how many characters to show (1 or 2).
          * By default, will show based on number of words (max first 2).
          */
   initialsLength: _propTypes.default.oneOf([1, 2]),
-
   /**
          * Path to an image to display instead of initials
          */
   imageUrl: _propTypes.default.string,
-
   /**
        * Any EUI glyph, logo or custom icon to display instead of initials
        */
   iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "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", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "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", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "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", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "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", "pivot", "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", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "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", "warning", "alert", "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]),
-
   /**
        * Manually change icon size
        */
   iconSize: _propTypes.default.any,
-
   /**
        * Manually change icon color
        */
   iconColor: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]).isRequired, _propTypes.default.oneOf([null])]),
-
   /**
        * Full name of avatar for title attribute and calculating initial if not provided
        */
   name: _propTypes.default.string.isRequired,
-
   /**
        * Accepts hex values like `#FFFFFF`, `#000` otherwise a viz palette color will be assigned.
        * Or pass `'plain'` for an empty shade, `'subdued'` for a light gray shade or `null` to remove entirely and the text/icon color will `inherit`
        */
   color: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.oneOf(["plain", "subdued", null])]),
-
   /**
        * The type of avatar mainly controlling the shape.
        * `user` = circle
@@ -176,23 +142,18 @@ EuiAvatar.propTypes = {
        */
   type: _propTypes.default.any,
   size: _propTypes.default.any,
-
   /**
        * Grays out the avatar to simulate being disabled
        */
   isDisabled: _propTypes.default.bool
 };
-
 var checkValidColor = function checkValidColor(color) {
   var validHex = color && (0, _color.isValidHex)(color) || color === 'plain' || color === 'subdued';
-
   if (color && !validHex) {
     throw new Error('EuiAvatar needs to pass a valid color. This can either be a three ' + 'or six character hex value');
   }
 };
-
 exports.checkValidColor = checkValidColor;
-
 function checkValidInitials(initials) {
   // Must be a string of 1 or 2 characters
   if (initials && initials.length > 2) {

package/test-env/components/avatar/avatar.styles.js

@@ -4,19 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.euiAvatarStyles = void 0;
-
 var _react = require("@emotion/react");
-
 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 _avatarSize = function _avatarSize(_ref3) {
   var size = _ref3.size,
-      fontSize = _ref3.fontSize;
+    fontSize = _ref3.fontSize;
   return "\n    ".concat((0, _global_styling.logicalCSS)('width', size), ";\n    ").concat((0, _global_styling.logicalCSS)('height', size), ";\n    line-height: ").concat(size, ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
-
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "14sj6wh-isDisabled",
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;"
@@ -25,7 +20,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-
 var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "ont6vs-user",
   styles: "border-radius:50%;label:user;"
@@ -34,7 +28,6 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "border-radius:50%;label:user;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-
 var euiAvatarStyles = function euiAvatarStyles(_ref4) {
   var euiTheme = _ref4.euiTheme;
   return {
@@ -66,5 +59,4 @@ var euiAvatarStyles = function euiAvatarStyles(_ref4) {
     }), ";label:xl;")
   };
 };
-
 exports.euiAvatarStyles = euiAvatarStyles;

package/test-env/components/avatar/index.js

@@ -15,5 +15,4 @@ Object.defineProperty(exports, "checkValidColor", {
     return _avatar.checkValidColor;
   }
 });
-
 var _avatar = require("./avatar");

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

@@ -1,107 +1,79 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ICON_SIDES = exports.EuiBadge = exports.COLORS = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
-
 var _services = require("../../services");
-
 var _inner_text = require("../inner_text");
-
 var _icon = require("../icon");
-
 var _utils = require("../color_picker/utils");
-
 var _href_validator = require("../../services/security/href_validator");
-
 var _badge = require("./badge.styles");
-
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 var _react2 = require("@emotion/react");
-
 var _excluded = ["children", "color", "iconType", "iconSide", "className", "isDisabled", "onClick", "iconOnClick", "onClickAriaLabel", "iconOnClickAriaLabel", "closeButtonProps", "href", "rel", "target", "style"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ICON_SIDES = ['left', 'right'];
 exports.ICON_SIDES = ICON_SIDES;
 var COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
 exports.COLORS = COLORS;
-// The color blind palette has some stricter accessibility needs with regards to
-// charts and contrast. We use the euiPaletteColorBlindBehindText variant here since our
-// accessibility concerns pertain to foreground (text) and background contrast
-var visColors = (0, _services.euiPaletteColorBlindBehindText)();
-
 var EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'default' : _ref$color,
-      iconType = _ref.iconType,
-      _ref$iconSide = _ref.iconSide,
-      iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide,
-      className = _ref.className,
-      _isDisabled = _ref.isDisabled,
-      onClick = _ref.onClick,
-      iconOnClick = _ref.iconOnClick,
-      onClickAriaLabel = _ref.onClickAriaLabel,
-      iconOnClickAriaLabel = _ref.iconOnClickAriaLabel,
-      closeButtonProps = _ref.closeButtonProps,
-      href = _ref.href,
-      rel = _ref.rel,
-      target = _ref.target,
-      style = _ref.style,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    iconType = _ref.iconType,
+    _ref$iconSide = _ref.iconSide,
+    iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide,
+    className = _ref.className,
+    _isDisabled = _ref.isDisabled,
+    onClick = _ref.onClick,
+    iconOnClick = _ref.iconOnClick,
+    onClickAriaLabel = _ref.onClickAriaLabel,
+    iconOnClickAriaLabel = _ref.iconOnClickAriaLabel,
+    closeButtonProps = _ref.closeButtonProps,
+    href = _ref.href,
+    rel = _ref.rel,
+    target = _ref.target,
+    style = _ref.style,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var isDisabled = _isDisabled || !isHrefValid;
   var optionalCustomStyles = (0, _react.useMemo)(function () {
-    var colorToHexMap = {
-      default: euiTheme.euiTheme.colors.lightShade,
-      hollow: '',
-      primary: visColors[1],
-      success: visColors[0],
-      accent: visColors[2],
-      warning: visColors[5],
-      danger: visColors[9]
-    };
     var textColor = null;
     var contrastRatio = null;
     var colorHex = null;
-
     try {
       // Check if a valid color name was provided
       if (COLORS.includes(color)) {
-        if (color === 'hollow') return style; // hollow uses its own CSS class
         // Get the hex equivalent for the provided color name
+        switch (color) {
+          case 'hollow':
+            return style;
+          // hollow uses its own Emotion class
+          case 'default':
+            colorHex = euiTheme.euiTheme.colors.lightShade;
+            break;
+          default:
+            colorHex = (0, _mixins.euiButtonFillColor)(euiTheme, color).backgroundColor;
+            break;
+        }
 
-        colorHex = colorToHexMap[color]; // Set dark or light text color based upon best contrast
-
+        // Set dark or light text color based upon best contrast
         textColor = setTextColor(euiTheme, colorHex);
         return _objectSpread({
           backgroundColor: colorHex,
@@ -109,16 +81,16 @@ var EuiBadge = function EuiBadge(_ref) {
         }, style);
       } else {
         // This is a custom color- let's do our best to ensure that it provides sufficient contrast
+
         // Set dark or light text color based upon best contrast
-        textColor = setTextColor(euiTheme, color); // Check the contrast
+        textColor = setTextColor(euiTheme, color);
 
+        // Check the contrast
         contrastRatio = getColorContrast(textColor, color);
-
         if (contrastRatio < _services.wcagContrastMin) {
           // It's low contrast, so lets show a warning in the console
           console.warn('Warning: ', color, ' badge has low contrast of ', contrastRatio.toFixed(2), '. Should be above ', _services.wcagContrastMin, '.');
         }
-
         return _objectSpread({
           backgroundColor: color,
           color: textColor
@@ -137,7 +109,6 @@ var EuiBadge = function EuiBadge(_ref) {
   var closeClassNames = (0, _classnames.default)('euiBadge__icon', closeButtonProps && closeButtonProps.className);
   var Element = href && !isDisabled ? 'a' : 'button';
   var relObj = {};
-
   if (href && !isDisabled) {
     relObj.href = href;
     relObj.target = target;
@@ -147,19 +118,15 @@ var EuiBadge = function EuiBadge(_ref) {
       rel: rel
     });
   }
-
   if (onClick) {
     relObj.onClick = onClick;
   }
-
   var optionalIcon = null;
-
   if (iconType) {
     if (iconOnClick) {
       if (!iconOnClickAriaLabel) {
         console.warn('When passing the iconOnClick props to EuiBadge, you must also provide iconOnClickAriaLabel');
       }
-
       optionalIcon = (0, _react2.jsx)("button", {
         type: "button",
         className: "euiBadge__iconButton",
@@ -184,7 +151,6 @@ var EuiBadge = function EuiBadge(_ref) {
         className: "euiBadge__icon",
         css: iconCssStyles,
         color: "inherit" // forces the icon to inherit its parent color
-
       });
     }
   }
@@ -192,7 +158,6 @@ var EuiBadge = function EuiBadge(_ref) {
   if (onClick && !onClickAriaLabel) {
     console.warn('When passing onClick to EuiBadge, you must also provide onClickAriaLabel');
   }
-
   var content = (0, _react2.jsx)("span", {
     className: "euiBadge__content",
     css: styles.euiBadge__content
@@ -200,7 +165,6 @@ var EuiBadge = function EuiBadge(_ref) {
     className: "euiBadge__text",
     css: textCssStyles
   }, children), iconSide === 'right' && optionalIcon);
-
   if (iconOnClick) {
     return onClick || href ? (0, _react2.jsx)("span", {
       className: classes,
@@ -251,29 +215,24 @@ var EuiBadge = function EuiBadge(_ref) {
     });
   }
 };
-
 exports.EuiBadge = EuiBadge;
 EuiBadge.propTypes = {
   /**
      * Accepts any string from our icon library
      */
   iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "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", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "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", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "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", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "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", "pivot", "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", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "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", "warning", "alert", "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]),
-
   /**
      * The side of the badge the icon should sit
      */
   iconSide: _propTypes.default.any,
-
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
   color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
-
   /**
      * Will override any color passed through the `color` prop.
      */
   isDisabled: _propTypes.default.bool,
-
   /**
      * Props passed to the close button.
      */
@@ -282,22 +241,18 @@ EuiBadge.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-
   /**
      * Will apply an onclick to icon within the badge
      */
   iconOnClick: _propTypes.default.func,
-
   /**
      * Aria label applied to the iconOnClick button
      */
   iconOnClickAriaLabel: _propTypes.default.any,
-
   /**
      * Will apply an onclick to the badge itself
      */
   onClick: _propTypes.default.func,
-
   /**
      * Aria label applied to the onClick button
      */
@@ -306,23 +261,18 @@ EuiBadge.propTypes = {
   target: _propTypes.default.string,
   rel: _propTypes.default.string
 };
-
 function getColorContrast(textColor, color) {
   var contrastValue = _chromaJs.default.contrast(textColor, color);
-
   return contrastValue;
 }
-
 function setTextColor(_ref2, bgColor) {
   var euiTheme = _ref2.euiTheme;
   var textColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _chromaJs.default)(bgColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return textColor;
 }
-
 function handleInvalidColor(color) {
   var isNamedColor = COLORS.includes(color);
   var isValidColorString = color && (0, _utils.chromaValid)((0, _utils.parseColor)(color) || '');
-
   if (!isNamedColor && !isValidColorString) {
     console.warn('EuiBadge expects a valid color. This can either be a three or six ' + "character hex value, rgb(a) value, hsv value, hollow, or one of the following: ".concat(COLORS, ". ") + "Instead got ".concat(color, "."));
   }

package/test-env/components/badge/badge.styles.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.euiBadgeStyles = void 0;
-
 var _react = require("@emotion/react");
-
 var _global_styling = require("../../global_styling");
-
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
-
 var _services = require("../../services");
-
 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 _ref = process.env.NODE_ENV === "production" ? {
   name: "1hw5vc4-clickable",
   styles: "cursor:pointer;label:clickable;"
@@ -23,10 +17,9 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "cursor:pointer;label:clickable;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-
 var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
-      colorMode = euiThemeContext.colorMode;
+    colorMode = euiThemeContext.colorMode;
   return {
     euiBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;vertical-align:middle;", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(euiTheme.size.s)), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.base + 2, "px;font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
       return x / 2;
@@ -36,7 +29,8 @@ var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     // Hollow has a border and is mostly used for autocompleters.
     hollow: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";border-color:", colorMode === 'DARK' ? (0, _services.tint)(euiTheme.border.color, 0.15) : euiTheme.border.color, ";color:", euiTheme.colors.text, ";;label:hollow;"),
     // Content wrapper
-    euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)( // Ensure proper height in case of just displaying an icon
+    euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)(
+    // Ensure proper height in case of just displaying an icon
     'min-height', "".concat((0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
       return euiTheme.base + x * 2;
     }))), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
@@ -63,5 +57,4 @@ var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     euiBadge__childButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " text-align:inherit;font-weight:inherit;line-height:inherit;color:inherit;&:disabled{cursor:not-allowed;}&:not(:disabled){&:hover,&:focus{text-decoration:underline;}};label:euiBadge__childButton;")
   };
 };
-
 exports.euiBadgeStyles = euiBadgeStyles;