@elastic/eui 64.0.1 → 65.0.2

package/lib/components/button/button_icon/button_icon.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZES = exports.EuiButtonIcon = exports.DISPLAYS = exports.COLORS = void 0;
+exports.SIZES = exports.EuiButtonIcon = exports.DISPLAYS = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,7 +19,9 @@ var _icon = require("../../icon");
 
 var _loading = require("../../loading");
 
-var _href_validator = require("../../../services/security/href_validator");
+var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
+
+var _button_display = require("../button_display/_button_display");
 
 var _react2 = require("@emotion/react");
 
@@ -40,17 +42,6 @@ var displayToClassNameMap = {
 };
 var DISPLAYS = (0, _common.keysOf)(displayToClassNameMap);
 exports.DISPLAYS = DISPLAYS;
-var colorToClassNameMap = {
-  accent: 'euiButtonIcon--accent',
-  danger: 'euiButtonIcon--danger',
-  ghost: 'euiButtonIcon--ghost',
-  primary: 'euiButtonIcon--primary',
-  success: 'euiButtonIcon--success',
-  text: 'euiButtonIcon--text',
-  warning: 'euiButtonIcon--warning'
-};
-var COLORS = (0, _common.keysOf)(colorToClassNameMap);
-exports.COLORS = COLORS;
 var sizeToClassNameMap = {
   xs: 'euiButtonIcon--xSmall',
   s: 'euiButtonIcon--small',
@@ -59,41 +50,60 @@ var sizeToClassNameMap = {
 var SIZES = (0, _common.keysOf)(sizeToClassNameMap);
 exports.SIZES = SIZES;
 
-var EuiButtonIcon = function EuiButtonIcon(_ref) {
-  var className = _ref.className,
-      iconType = _ref.iconType,
-      _ref$iconSize = _ref.iconSize,
-      iconSize = _ref$iconSize === void 0 ? 'm' : _ref$iconSize,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _isDisabled = _ref.isDisabled,
-      disabled = _ref.disabled,
-      href = _ref.href,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'empty' : _ref$display,
-      target = _ref.target,
-      rel = _ref.rel,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'xs' : _ref$size,
-      buttonRef = _ref.buttonRef,
-      isSelected = _ref.isSelected,
-      isLoading = _ref.isLoading,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var isHrefValid = !href || (0, _href_validator.validateHref)(href);
-  var isDisabled = _isDisabled || disabled || !isHrefValid || isLoading;
+var EuiButtonIcon = function EuiButtonIcon(props) {
+  var className = props.className,
+      iconType = props.iconType,
+      _props$iconSize = props.iconSize,
+      iconSize = _props$iconSize === void 0 ? 'm' : _props$iconSize,
+      _props$color = props.color,
+      _color = _props$color === void 0 ? 'primary' : _props$color,
+      _isDisabled = props.isDisabled,
+      disabled = props.disabled,
+      href = props.href,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'button' : _props$type,
+      _props$display = props.display,
+      display = _props$display === void 0 ? 'empty' : _props$display,
+      target = props.target,
+      rel = props.rel,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'xs' : _props$size,
+      buttonRef = props.buttonRef,
+      isSelected = props.isSelected,
+      isLoading = props.isLoading,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  var isDisabled = (0, _button_display.isButtonDisabled)({
+    isDisabled: _isDisabled || disabled,
+    href: href,
+    isLoading: isLoading
+  });
   var ariaHidden = rest['aria-hidden'];
   var isAriaHidden = ariaHidden === 'true' || ariaHidden === true;
 
   if (!rest['aria-label'] && !rest['aria-labelledby'] && !isAriaHidden) {
     console.warn("EuiButtonIcon requires aria-label or aria-labelledby to be specified because icon-only\n      buttons are screen-reader-inaccessible without them.");
-  }
+  } // eslint-disable-next-line no-nested-ternary
+
+
+  var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
+  var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
+    display: display
+  })[color]; // Temporary extra style for empty `:hover` state until we decide how to handle universally
+
+  var hoverStyles = display === 'empty' ? /*#__PURE__*/(0, _react2.css)("&:hover{background-color:", (0, _button.euiButtonEmptyColor)(euiThemeContext, color).backgroundColor, ";};label:hoverStyles;") : /*#__PURE__*/(0, _react2.css)(";label:hoverStyles;");
+  var classes = (0, _classnames.default)('euiButtonIcon', size && sizeToClassNameMap[size], className);
+
+  if (_color === 'ghost') {
+    // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
+    return (0, _react2.jsx)(_services.EuiThemeProvider, {
+      colorMode: "dark"
+    }, (0, _react2.jsx)(EuiButtonIcon, _extends({}, props, {
+      color: "text"
+    })));
+  } // Add an icon to the button if one exists.
 
-  var classes = (0, _classnames.default)('euiButtonIcon', {
-    'euiButtonIcon-isDisabled': isDisabled
-  }, colorToClassNameMap[color], display && displayToClassNameMap[display], size && sizeToClassNameMap[size], className); // Add an icon to the button if one exists.
 
   var buttonIcon;
 
@@ -128,6 +138,7 @@ var EuiButtonIcon = function EuiButtonIcon(_ref) {
       rel: rel
     });
     return (0, _react2.jsx)("a", _extends({
+      css: [buttonColorStyles, hoverStyles, ";label:EuiButtonIcon;"],
       tabIndex: isAriaHidden ? -1 : undefined,
       className: classes,
       href: href,
@@ -139,6 +150,7 @@ var EuiButtonIcon = function EuiButtonIcon(_ref) {
 
   var buttonType;
   return (0, _react2.jsx)("button", _extends({
+    css: [buttonColorStyles, hoverStyles, ";label:EuiButtonIcon;"],
     tabIndex: isAriaHidden ? -1 : undefined,
     disabled: isDisabled,
     className: classes,
@@ -157,8 +169,14 @@ EuiButtonIcon.propTypes = {
 
   /**
      * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
+     */
+
+  /**
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
-  color: _propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
   "aria-label": _propTypes.default.string,
   "aria-labelledby": _propTypes.default.string,
   isDisabled: _propTypes.default.bool,

package/lib/components/call_out/call_out.styles.js

@@ -30,7 +30,8 @@ exports.euiCallOutStyles = euiCallOutStyles;
 var euiCallOutHeadingStyles = function euiCallOutHeadingStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return {
-    euiCallOutHeader: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.medium, ";margin-bottom:0!important;;label:euiCallOutHeader;"),
+    euiCallOutHeader: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important' // In case it's nested inside EuiText
+    ), ";;label:euiCallOutHeader;"),
     primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primaryText, ";;label:primary;"),
     success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.successText, ";;label:success;"),
     warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.warningText, ";;label:warning;"),