@elastic/eui 67.0.0 → 67.1.0

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) {

package/lib/components/badge/badge.styles.js

@@ -0,0 +1,61 @@
+"use strict";
+
+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;"
+} : {
+  name: "1hw5vc4-clickable",
+  styles: "cursor:pointer;label:clickable;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  return {
+    euiBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;vertical-align:middle;padding:0 ", 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:", parseFloat(String(euiTheme.border.radius.medium)) / 2, "px;", (0, _global_styling.logicalTextAlignCSS)('left'), " &:focus-within{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&+.euiBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
+    clickable: /*#__PURE__*/(0, _react.css)("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
+    disabled: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled').color, "!important;background-color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled').backgroundColor, "!important;;label:disabled;"),
+    // 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
+    'min-height', "".concat(euiTheme.base + parseFloat(String(euiTheme.border.width.thin)) * 2, "px")), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
+    // Text
+    text: {
+      euiBadge__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " cursor:inherit;;label:euiBadge__text;"),
+      clickable: _ref
+    },
+    // Icon
+    icon: {
+      euiBadge__icon: /*#__PURE__*/(0, _react.css)(";label:euiBadge__icon;"),
+      right: /*#__PURE__*/(0, _react.css)("&:not(:only-child){", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:right;"),
+      left: /*#__PURE__*/(0, _react.css)("&:not(:only-child){", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";};label:left;")
+    },
+    // Clickable icons (iconOnClick)
+    iconButton: {
+      euiBadge__iconButton: /*#__PURE__*/(0, _react.css)("font-size:0;&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", parseFloat(String(euiTheme.border.radius.small)) / 2, "px;}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:right;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";;label:left;")
+    },
+    // Used in badges with both onClick & iconOnClick
+    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;

package/lib/components/basic_table/in_memory_table.js

@@ -554,6 +554,10 @@ var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
 
       if (sortName !== prevState.prevProps.sortName || sortDirection !== prevState.prevProps.sortDirection) {
         updatedPrevState = _objectSpread(_objectSpread({}, updatedPrevState), {}, {
+          prevProps: _objectSpread(_objectSpread({}, updatedPrevState.prevProps), {}, {
+            sortName: sortName,
+            sortDirection: sortDirection
+          }),
           sortName: sortName,
           sortDirection: sortDirection
         });
@@ -1125,6 +1129,10 @@ EuiInMemoryTable.propTypes = {
         operator: _propTypes.default.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
       }).isRequired).isRequired,
       available: _propTypes.default.func
+    }).isRequired, _propTypes.default.shape({
+      type: _propTypes.default.oneOf(["custom_component"]).isRequired,
+      component: _propTypes.default.elementType.isRequired,
+      available: _propTypes.default.func
     }).isRequired]).isRequired),
 
     /**

package/lib/components/button/button.js

@@ -153,7 +153,6 @@ EuiButton.propTypes = {
 EuiButton.displayName = 'EuiButton'; // Use defaultProps for simple pass-through props
 
 EuiButton.defaultProps = {
-  minWidth: 112,
   size: 'm',
   color: 'primary'
 };

package/lib/components/button/button_display/_button_display.js

@@ -24,7 +24,7 @@ var _href_validator = require("../../../services/security/href_validator");
 
 var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
 
-var _excluded = ["children", "iconType", "iconSide", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type"];
+var _excluded = ["children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type", "style"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -63,6 +63,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
   var children = _ref2.children,
       iconType = _ref2.iconType,
       iconSide = _ref2.iconSide,
+      iconSize = _ref2.iconSize,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 'm' : _ref2$size,
       isDisabled = _ref2.isDisabled,
@@ -78,6 +79,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
       rel = _ref2.rel,
       _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? 'button' : _ref2$type,
+      style = _ref2.style,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
   var buttonIsDisabled = isButtonDisabled({
@@ -85,9 +87,8 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     isDisabled: isDisabled || disabled,
     isLoading: isLoading
   });
-  var minWidthPx = typeof minWidth === 'number' ? "".concat(minWidth, "px") : minWidth;
   var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _button_display.euiButtonDisplayStyles)(theme, minWidthPx);
+  var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
   var buttonRadiusStyle = (0, _mixins.useEuiButtonRadiusCSS)()[size];
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, _extends({
@@ -95,6 +96,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     isDisabled: buttonIsDisabled,
     iconType: iconType,
     iconSide: iconSide,
+    iconSize: iconSize,
     textProps: _objectSpread({}, textProps)
   }, contentProps), children);
   var element = href && !buttonIsDisabled ? 'a' : 'button';
@@ -123,6 +125,9 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
 
   return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
+      minWidth: minWidth
+    }) : style,
     ref: ref
   }, elementProps), relObj), rest), innerNode);
 });
@@ -194,7 +199,7 @@ EuiButtonDisplay.propTypes = {
   /**
      * Can only be one side `left` or `right`
      */
-  iconSide: _propTypes.default.oneOf(["left", "right", undefined]),
+  iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
 
   /**
      * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
@@ -207,7 +212,7 @@ EuiButtonDisplay.propTypes = {
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
-  iconSize: _propTypes.default.oneOf(["s", "m"]),
+  iconSize: _propTypes.default.any,
   isDisabled: _propTypes.default.bool,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,

package/lib/components/button/button_display/_button_display.styles.js

@@ -32,11 +32,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext, minWidth) {
+var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";", minWidth && (0, _global_styling.logicalCSS)('min-width', minWidth), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),

package/lib/components/button/button_display/_button_display_content.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiButtonDisplayContent = void 0;
+exports.ICON_SIZES = exports.ICON_SIDES = exports.EuiButtonDisplayContent = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -31,6 +31,11 @@ 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; }
 
+var ICON_SIZES = ['s', 'm'];
+exports.ICON_SIZES = ICON_SIZES;
+var ICON_SIDES = ['left', 'right'];
+exports.ICON_SIDES = ICON_SIDES;
+
 var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var children = _ref.children,
       textProps = _ref.textProps,
@@ -48,7 +53,7 @@ var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var styles = (0, _button_display_content.euiButtonDisplayContentStyles)(theme);
   var cssStyles = [styles.euiButtonDisplayContent, iconSide && styles[iconSide]];
   var cssSpinnerStyles = [styles.euiButtonDisplayContent__spinner];
-  var cssIconStyles = [styles.euiButtonDisplayContent__icon]; // Add an icon to the button if one exists.
+  var cssIconStyles = [styles.euiButtonDisplayContent__icon, iconSize && styles[iconSize]]; // Add an icon to the button if one exists.
 
   var icon; // When the button is disabled the text gets gray
   // and in some buttons the background gets a light gray
@@ -94,7 +99,7 @@ EuiButtonDisplayContent.propTypes = {
   /**
      * Can only be one side `left` or `right`
      */
-  iconSide: _propTypes.default.oneOf(["left", "right", undefined]),
+  iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
   isLoading: _propTypes.default.bool,
 
   /**
@@ -108,7 +113,7 @@ EuiButtonDisplayContent.propTypes = {
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
-  iconSize: _propTypes.default.oneOf(["s", "m"]),
+  iconSize: _propTypes.default.any,
   isDisabled: _propTypes.default.bool,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,

package/lib/components/button/button_display/_button_display_content.styles.js

@@ -47,7 +47,10 @@ var euiButtonDisplayContentStyles = function euiButtonDisplayContentStyles(_ref4
     left: /*#__PURE__*/(0, _react.css)(";label:left;"),
     right: _ref3,
     euiButtonDisplayContent__spinner: _ref2,
-    euiButtonDisplayContent__icon: _ref
+    euiButtonDisplayContent__icon: _ref,
+    // Icon size
+    s: /*#__PURE__*/(0, _react.css)(";label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(";label:m;")
   };
 };
 

package/lib/components/card/card.js

@@ -108,7 +108,7 @@ var EuiCard = function EuiCard(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var isClickable = !isDisabled && (onClick || href || selectable && !selectable.isDisabled);
   var euiThemeContext = (0, _services.useEuiTheme)();
-  var styles = (0, _card.euiCardStyles)(euiThemeContext, paddingSize, display);
+  var styles = (0, _card.euiCardStyles)(euiThemeContext, paddingSize);
   var cardStyles = [styles.card.euiCard, // Text alignment should always be left when horizontal
   styles.card.aligned[layout === 'horizontal' ? 'left' : textAlign], styles.card.layout[layout], isDisabled && styles.card.disabled];
   var contentStyles = [styles.content.euiCard__content, styles.content.layout[layout]];
@@ -154,7 +154,7 @@ var EuiCard = function EuiCard(_ref) {
 
   if (image && layout === 'vertical') {
     if ( /*#__PURE__*/(0, _react.isValidElement)(image) || typeof image === 'string') {
-      var imageStyles = [styles.euiCard__image];
+      var imageStyles = [styles.image.euiCard__image, display === 'transparent' && styles.image.transparent];
       imageNode = (0, _react2.jsx)("div", {
         className: "euiCard__image",
         css: imageStyles

package/lib/components/card/card.styles.js

@@ -57,7 +57,7 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color) {
+var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize) {
   var euiTheme = euiThemeContext.euiTheme;
   var paddingAmount = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingSize);
   var spacing = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingKey);
@@ -94,7 +94,10 @@ var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color)
       },
       disabled: _ref2
     },
-    euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+    image: {
+      euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+      transparent: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:transparent;")
+    },
     icon: {
       euiCard__icon: /*#__PURE__*/(0, _react.css)(";label:euiCard__icon;"),
       withImage: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', '50%'), ";", (0, _global_styling.logicalCSS)('left', '50%'), ";transform:translate(-50%, calc(-50% + -", paddingAmount, "))!important;;label:withImage;"),

package/lib/components/notification/notification_event.js

@@ -144,7 +144,7 @@ EuiNotificationEvent.propTypes = {
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
-  badgeColor: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
+  badgeColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
 
   /**
      * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`.

package/lib/components/notification/notification_event_meta.js

@@ -165,7 +165,7 @@ EuiNotificationEventMeta.propTypes = {
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
-  badgeColor: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
+  badgeColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
 
   /**
      * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`.

package/lib/components/popover/popover_title.js

@@ -47,9 +47,9 @@ var EuiPopoverTitle = function EuiPopoverTitle(_ref) {
       panelPadding = _useContext.paddingSize;
 
   var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _popover_title.euiPopoverTitleStyles)(euiTheme, panelPadding);
+  var styles = (0, _popover_title.euiPopoverTitleStyles)(euiTheme);
   var paddingStyles = (0, _global_styling.useEuiPaddingCSS)();
-  var cssStyles = [styles.euiPopoverTitle, // If a paddingSize is not directly provided, inherit from the EuiPopoverPanel
+  var cssStyles = [styles.euiPopoverTitle, styles.panelPaddingSizes[panelPadding], // If a paddingSize is not directly provided, inherit from the EuiPopoverPanel
   paddingStyles[paddingSize || panelPadding]];
   var classes = (0, _classnames.default)('euiPopoverTitle', className);
   return (0, _react2.jsx)("div", _extends({