@elastic/eui 66.0.0 → 67.1.0

package/i18ntokens.json

@@ -1941,11 +1941,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 92,
+        "line": 93,
         "column": 23
       },
       "end": {
-        "line": 96,
+        "line": 97,
         "column": 3
       }
     },
@@ -1957,11 +1957,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 97,
+        "line": 98,
         "column": 24
       },
       "end": {
-        "line": 101,
+        "line": 102,
         "column": 3
       }
     },
@@ -2885,11 +2885,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 124,
+        "line": 126,
         "column": 6
       },
       "end": {
-        "line": 127,
+        "line": 129,
         "column": 8
       }
     },
@@ -2901,11 +2901,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 131,
+        "line": 133,
         "column": 8
       },
       "end": {
-        "line": 134,
+        "line": 136,
         "column": 10
       }
     },
@@ -2917,11 +2917,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 136,
+        "line": 138,
         "column": 8
       },
       "end": {
-        "line": 139,
+        "line": 141,
         "column": 10
       }
     },
@@ -2933,11 +2933,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 146,
+        "line": 148,
         "column": 8
       },
       "end": {
-        "line": 149,
+        "line": 151,
         "column": 10
       }
     },
@@ -2949,11 +2949,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 153,
+        "line": 155,
         "column": 8
       },
       "end": {
-        "line": 156,
+        "line": 158,
         "column": 10
       }
     },
@@ -4437,11 +4437,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 43,
+        "line": 48,
         "column": 11
       },
       "end": {
-        "line": 43,
+        "line": 48,
         "column": 73
       }
     },
@@ -4453,11 +4453,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 44,
+        "line": 49,
         "column": 14
       },
       "end": {
-        "line": 47,
+        "line": 52,
         "column": 5
       }
     },
@@ -4469,11 +4469,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 48,
+        "line": 53,
         "column": 10
       },
       "end": {
-        "line": 48,
+        "line": 53,
         "column": 70
       }
     },
@@ -4485,11 +4485,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 49,
+        "line": 54,
         "column": 10
       },
       "end": {
-        "line": 49,
+        "line": 54,
         "column": 70
       }
     },
@@ -4501,11 +4501,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 66,
+        "line": 74,
         "column": 4
       },
       "end": {
-        "line": 70,
+        "line": 78,
         "column": 5
       }
     },
@@ -4517,11 +4517,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 72,
+        "line": 80,
         "column": 8
       },
       "end": {
-        "line": 76,
+        "line": 84,
         "column": 9
       }
     },
@@ -4533,11 +4533,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 146,
+        "line": 160,
         "column": 10
       },
       "end": {
-        "line": 153,
+        "line": 167,
         "column": 12
       }
     },
@@ -4549,11 +4549,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 198,
+        "line": 212,
         "column": 12
       },
       "end": {
-        "line": 203,
+        "line": 217,
         "column": 13
       }
     },
@@ -4565,11 +4565,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 238,
+        "line": 253,
         "column": 12
       },
       "end": {
-        "line": 246,
+        "line": 261,
         "column": 13
       }
     },
@@ -4581,11 +4581,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 288,
+        "line": 308,
         "column": 20
       },
       "end": {
-        "line": 288,
+        "line": 308,
         "column": 60
       }
     },
@@ -4597,11 +4597,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 289,
+        "line": 309,
         "column": 20
       },
       "end": {
-        "line": 289,
+        "line": 309,
         "column": 60
       }
     },
@@ -4613,11 +4613,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 290,
+        "line": 310,
         "column": 18
       },
       "end": {
-        "line": 290,
+        "line": 310,
         "column": 54
       }
     },
@@ -4629,11 +4629,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 291,
+        "line": 311,
         "column": 26
       },
       "end": {
-        "line": 291,
+        "line": 311,
         "column": 78
       }
     },
@@ -4645,11 +4645,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 292,
+        "line": 312,
         "column": 23
       },
       "end": {
-        "line": 292,
+        "line": 312,
         "column": 75
       }
     },
@@ -5301,11 +5301,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 194,
+        "line": 201,
         "column": 39
       },
       "end": {
-        "line": 197,
+        "line": 204,
         "column": 3
       }
     },
@@ -5317,11 +5317,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 194,
+        "line": 201,
         "column": 39
       },
       "end": {
-        "line": 197,
+        "line": 204,
         "column": 3
       }
     },
@@ -5333,11 +5333,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 220,
+        "line": 227,
         "column": 67
       },
       "end": {
-        "line": 228,
+        "line": 235,
         "column": 3
       }
     },
@@ -5349,11 +5349,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 220,
+        "line": 227,
         "column": 67
       },
       "end": {
-        "line": 228,
+        "line": 235,
         "column": 3
       }
     },
@@ -5365,11 +5365,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 220,
+        "line": 227,
         "column": 67
       },
       "end": {
-        "line": 228,
+        "line": 235,
         "column": 3
       }
     },
@@ -5381,11 +5381,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 220,
+        "line": 227,
         "column": 67
       },
       "end": {
-        "line": 228,
+        "line": 235,
         "column": 3
       }
     },

package/lib/components/badge/badge.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ICON_SIDES = exports.EuiBadge = exports.COLORS = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,8 +15,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 
-var _common = require("../common");
-
 var _services = require("../../services");
 
 var _inner_text = require("../inner_text");
@@ -25,12 +25,18 @@ var _utils = require("../color_picker/utils");
 
 var _href_validator = require("../../services/security/href_validator");
 
+var _badge = require("./badge.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "color", "iconType", "iconSide", "className", "isDisabled", "onClick", "iconOnClick", "onClickAriaLabel", "iconOnClickAriaLabel", "closeButtonProps", "href", "rel", "target", "style"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -55,30 +61,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-// TODO - replace with variables once https://github.com/elastic/eui/issues/2731 is closed
-var colorInk = '#000';
-var colorGhost = '#fff'; // The color blind palette has some stricter accessibility needs with regards to
+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 colorToHexMap = {
-  // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-  default: '#d3dae6',
-  primary: visColors[1],
-  success: visColors[0],
-  accent: visColors[2],
-  warning: visColors[5],
-  danger: visColors[9]
-};
-var COLORS = (0, _common.keysOf)(colorToHexMap);
-exports.COLORS = COLORS;
-var iconSideToClassNameMap = {
-  left: 'euiBadge--iconLeft',
-  right: 'euiBadge--iconRight'
-};
-var ICON_SIDES = (0, _common.keysOf)(iconSideToClassNameMap);
-exports.ICON_SIDES = ICON_SIDES;
 
 var EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
@@ -100,53 +90,63 @@ var EuiBadge = function EuiBadge(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = (0, _services.useEuiTheme)();
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var isDisabled = _isDisabled || !isHrefValid;
-  var optionalCustomStyles = style;
-  var textColor = null; // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-
-  var wcagContrastBase = 4.5; // WCAG AA contrast level
-
-  var wcagContrast = null;
-  var colorHex = null; // Check if a valid color name was provided
-
-  try {
-    if (COLORS.indexOf(color) > -1) {
-      // Get the hex equivalent for the provided color name
-      colorHex = colorToHexMap[color]; // Set dark or light text color based upon best contrast
-
-      textColor = setTextColor(colorHex);
-      optionalCustomStyles = _objectSpread({
-        backgroundColor: colorHex,
-        color: textColor
-      }, optionalCustomStyles);
-    } else if (color !== 'hollow') {
-      // This is a custom color that is neither from the base palette nor hollow
-      // Let's do our best to ensure that it provides sufficient contrast
-      // Set dark or light text color based upon best contrast
-      textColor = setTextColor(color); // Check the contrast
-
-      wcagContrast = getColorContrast(textColor, color);
-
-      if (wcagContrast < wcagContrastBase) {
-        // It's low contrast, so lets show a warning in the console
-        console.warn('Warning: ', color, ' badge has low contrast of ', wcagContrast.toFixed(2), '. Should be above ', wcagContrastBase, '.');
+  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
+
+        colorHex = colorToHexMap[color]; // Set dark or light text color based upon best contrast
+
+        textColor = setTextColor(euiTheme, colorHex);
+        return _objectSpread({
+          backgroundColor: colorHex,
+          color: textColor
+        }, 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
+
+        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
+        }, style);
       }
-
-      optionalCustomStyles = _objectSpread({
-        backgroundColor: color,
-        color: textColor
-      }, optionalCustomStyles);
+    } catch (err) {
+      handleInvalidColor(color);
     }
-  } catch (err) {
-    handleInvalidColor(color);
-  }
-
-  var classes = (0, _classnames.default)('euiBadge', {
-    'euiBadge-isClickable': (onClick || href) && !iconOnClick,
-    'euiBadge-isDisabled': isDisabled,
-    'euiBadge--hollow': color === 'hollow'
-  }, iconSideToClassNameMap[iconSide], className);
+  }, [color, style, euiTheme]);
+  var styles = (0, _badge.euiBadgeStyles)(euiTheme);
+  var cssStyles = [styles.euiBadge, (onClick || href) && !iconOnClick && styles.clickable, isDisabled && styles.disabled, color === 'hollow' && styles.hollow];
+  var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
+  var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
+  var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];
+  var classes = (0, _classnames.default)('euiBadge', className);
   var closeClassNames = (0, _classnames.default)('euiBadge__icon', closeButtonProps && closeButtonProps.className);
   var Element = href && !isDisabled ? 'a' : 'button';
   var relObj = {};
@@ -176,6 +176,7 @@ var EuiBadge = function EuiBadge(_ref) {
       optionalIcon = (0, _react2.jsx)("button", {
         type: "button",
         className: "euiBadge__iconButton",
+        css: iconButtonCssStyles,
         "aria-label": iconOnClickAriaLabel,
         disabled: isDisabled,
         title: iconOnClickAriaLabel,
@@ -184,7 +185,8 @@ var EuiBadge = function EuiBadge(_ref) {
         type: iconType,
         size: "s",
         color: "inherit" // forces the icon to inherit its parent color
-
+        ,
+        css: iconCssStyles
       }, closeButtonProps, {
         className: closeClassNames
       })));
@@ -193,6 +195,7 @@ var EuiBadge = function EuiBadge(_ref) {
         type: iconType,
         size: children ? 's' : 'm',
         className: "euiBadge__icon",
+        css: iconCssStyles,
         color: "inherit" // forces the icon to inherit its parent color
 
       });
@@ -204,28 +207,34 @@ var EuiBadge = function EuiBadge(_ref) {
   }
 
   var content = (0, _react2.jsx)("span", {
-    className: "euiBadge__content"
-  }, children && (0, _react2.jsx)("span", {
-    className: "euiBadge__text"
-  }, children), optionalIcon);
+    className: "euiBadge__content",
+    css: styles.euiBadge__content
+  }, iconSide === 'left' && optionalIcon, children && (0, _react2.jsx)("span", {
+    className: "euiBadge__text",
+    css: textCssStyles
+  }, children), iconSide === 'right' && optionalIcon);
 
   if (iconOnClick) {
     return onClick || href ? (0, _react2.jsx)("span", {
       className: classes,
+      css: cssStyles,
       style: optionalCustomStyles
     }, (0, _react2.jsx)("span", {
-      className: "euiBadge__content"
-    }, (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
+      className: "euiBadge__content",
+      css: styles.euiBadge__content
+    }, iconSide === 'left' && optionalIcon, (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
       return (0, _react2.jsx)(Element, _extends({
         className: "euiBadge__childButton",
+        css: styles.euiBadge__childButton,
         disabled: isDisabled,
         "aria-label": onClickAriaLabel,
         ref: ref,
         title: innerText
       }, relObj, rest), children);
-    }), optionalIcon)) : (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
+    }), iconSide === 'right' && optionalIcon)) : (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
       return (0, _react2.jsx)("span", _extends({
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -237,6 +246,7 @@ var EuiBadge = function EuiBadge(_ref) {
         disabled: isDisabled,
         "aria-label": onClickAriaLabel,
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -246,6 +256,7 @@ var EuiBadge = function EuiBadge(_ref) {
     return (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
       return (0, _react2.jsx)("span", _extends({
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -264,12 +275,12 @@ EuiBadge.propTypes = {
   /**
      * The side of the badge the icon should sit
      */
-  iconSide: _propTypes.default.oneOf(["left", "right"]),
+  iconSide: _propTypes.default.any,
 
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
-  color: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
+  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
 
   /**
      * Will override any color passed through the `color` prop.
@@ -315,13 +326,14 @@ function getColorContrast(textColor, color) {
   return contrastValue;
 }
 
-function setTextColor(bgColor) {
-  var textColor = _services.isColorDark.apply(void 0, _toConsumableArray((0, _chromaJs.default)(bgColor).rgb())) ? colorGhost : colorInk;
+function setTextColor(_ref2, bgColor) {
+  var euiTheme = _ref2.euiTheme;
+  var textColor = _services.isColorDark.apply(void 0, _toConsumableArray((0, _chromaJs.default)(bgColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return textColor;
 }
 
 function handleInvalidColor(color) {
-  var isNamedColor = color && COLORS.includes(color) || color === 'hollow';
+  var isNamedColor = COLORS.includes(color);
   var isValidColorString = color && (0, _utils.chromaValid)((0, _utils.parseColor)(color) || '');
 
   if (!isNamedColor && !isValidColorString) {