@elastic/eui 82.0.0 → 82.2.0

package/test-env/components/button/button_empty/button_empty.js

@@ -11,11 +11,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("../../common");
 var _services = require("../../../services");
-var _button_content_deprecated = require("../_button_content_deprecated");
+var _button_display_content = require("../button_display/_button_display_content");
 var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
 var _button_display = require("../button_display/_button_display");
+var _button_empty = require("./button_empty.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "iconType", "iconSide", "iconSize", "color", "size", "flush", "isDisabled", "disabled", "isLoading", "href", "target", "rel", "type", "buttonRef", "contentProps", "textProps", "isSelected"];
 /*
@@ -27,19 +27,9 @@ var _excluded = ["children", "className", "iconType", "iconSide", "iconSize", "c
  */
 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 sizeToClassNameMap = {
-  xs: 'euiButtonEmpty--xSmall',
-  s: 'euiButtonEmpty--small',
-  m: null
-};
-var SIZES = (0, _common.keysOf)(sizeToClassNameMap);
+var SIZES = ['xs', 's', 'm'];
 exports.SIZES = SIZES;
-var flushTypeToClassNameMap = {
-  left: 'euiButtonEmpty--flushLeft',
-  right: 'euiButtonEmpty--flushRight',
-  both: 'euiButtonEmpty--flushBoth'
-};
-var FLUSH_TYPES = (0, _common.keysOf)(flushTypeToClassNameMap);
+var FLUSH_TYPES = ['left', 'right', 'both'];
 
 /**
  * Extends EuiButtonContentProps which provides
@@ -80,7 +70,10 @@ var EuiButtonEmpty = function EuiButtonEmpty(props) {
   var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
   var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
     display: 'empty'
-  })[color];
+  });
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _button_empty.euiButtonEmptyStyles)(euiTheme);
+  var cssStyles = [styles.euiButtonEmpty, styles[size], buttonColorStyles[color], flush && styles.flush, flush && styles[flush], isDisabled && styles.isDisabled];
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return (0, _react2.jsx)(_services.EuiThemeProvider, {
@@ -92,11 +85,11 @@ var EuiButtonEmpty = function EuiButtonEmpty(props) {
       color: "text"
     })));
   }
-  var classes = (0, _classnames.default)('euiButtonEmpty', size ? sizeToClassNameMap[size] : null, flush ? flushTypeToClassNameMap[flush] : null, className);
-  var contentClassNames = (0, _classnames.default)('euiButtonEmpty__content', contentProps && contentProps.className);
-  var textClassNames = (0, _classnames.default)('euiButtonEmpty__text', textProps && textProps.className);
-  var cssStyles = [buttonColorStyles];
-  var innerNode = (0, _react2.jsx)(_button_content_deprecated.EuiButtonContentDeprecated, (0, _extends2.default)({
+  var classes = (0, _classnames.default)('euiButtonEmpty', className);
+  var contentClassNames = (0, _classnames.default)('euiButtonEmpty__content', contentProps === null || contentProps === void 0 ? void 0 : contentProps.className);
+  var textClassNames = (0, _classnames.default)('euiButtonEmpty__text', textProps === null || textProps === void 0 ? void 0 : textProps.className);
+  var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, (0, _extends2.default)({
+    isDisabled: isDisabled,
     isLoading: isLoading,
     iconType: iconType,
     iconSide: iconSide,
@@ -104,10 +97,9 @@ var EuiButtonEmpty = function EuiButtonEmpty(props) {
     textProps: _objectSpread(_objectSpread({}, textProps), {}, {
       className: textClassNames
     })
-  }, contentProps, {
-    // className has to come last to override contentProps.className
+  }, _objectSpread(_objectSpread({}, contentProps), {}, {
     className: contentClassNames
-  }), children);
+  })), children);
 
   // <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
   // this is a button and piggyback off its disabled styles.
@@ -148,14 +140,14 @@ EuiButtonEmpty.propTypes = {
      * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
   color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
-  size: _propTypes.default.oneOf(["xs", "s", "m"]),
+  size: _propTypes.default.any,
   /**
      * Ensure the text of the button sits flush to the left, right, or both sides of its container
      */
   /**
      * Ensure the text of the button sits flush to the left, right, or both sides of its container
      */
-  flush: _propTypes.default.oneOf(["left", "right", "both"]),
+  flush: _propTypes.default.any,
   /**
      * `disabled` is also allowed
      */
@@ -202,10 +194,9 @@ EuiButtonEmpty.propTypes = {
   /**
      * Can only be one side `left` or `right`
      */
-  iconSide: _propTypes.default.oneOf(["left", "right"]),
+  iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
   /**
-     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
-     * It doesn't apply to the icon.
+     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
      */
   textProps: _propTypes.default.shape({
     className: _propTypes.default.string,
@@ -215,7 +206,7 @@ EuiButtonEmpty.propTypes = {
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
-  iconSize: _propTypes.default.oneOf(["s", "m"]),
+  iconSize: _propTypes.default.any,
   className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
   "aria-label": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
   "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),

package/test-env/components/button/button_empty/button_empty.styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiButtonEmptyStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _button_display = require("../button_display/_button_display.styles");
+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)."; } /*
+                                                                                                                                                                                                                                                                                           * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+                                                                                                                                                                                                                                                                                           * or more contributor license agreements. Licensed under the Elastic License
+                                                                                                                                                                                                                                                                                           * 2.0 and the Server Side Public License, v 1; you may not use this file except
+                                                                                                                                                                                                                                                                                           * in compliance with, at your election, the Elastic License 2.0 or the Server
+                                                                                                                                                                                                                                                                                           * Side Public License, v 1.
+                                                                                                                                                                                                                                                                                           */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1lywbid-flush",
+  styles: "padding-inline:0;label:flush;"
+} : {
+  name: "1lywbid-flush",
+  styles: "padding-inline:0;label:flush;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiButtonEmptyStyles = function euiButtonEmptyStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // EuiButtonEmpty uses the same size/font styling as EuiButtonDisplay,
+  // but does not share enough of the same colors/props to the point
+  // of using the actual component - so we'll reuse its styles instead
+  var displayStyles = (0, _button_display.euiButtonDisplayStyles)(euiThemeContext);
+  return {
+    euiButtonEmpty: /*#__PURE__*/(0, _react.css)(displayStyles.euiButtonDisplay, " ", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(euiTheme.size.s)), _global_styling.euiCanAnimate, "{transition-timing-function:ease-in;transition-duration:", euiTheme.animation.fast, ";};label:euiButtonEmpty;"),
+    isDisabled: displayStyles.isDisabled,
+    // Sizes
+    xs: displayStyles.xs,
+    s: displayStyles.s,
+    m: displayStyles.m,
+    // Flush sides
+    flush: _ref,
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";;label:left;"),
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";;label:right;"),
+    both: /*#__PURE__*/(0, _react.css)(";label:both;")
+  };
+};
+exports.euiButtonEmptyStyles = euiButtonEmptyStyles;

package/test-env/components/button/button_group/button_group.js

@@ -10,10 +10,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
+var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
 var _button_group_button = require("./button_group_button");
-var _button = require("../button");
-var _services = require("../../../services");
+var _button_group = require("./button_group.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelectedMap", "isDisabled", "isFullWidth", "isIconOnly", "legend", "name", "onChange", "options", "type"];
 /*
@@ -23,11 +23,6 @@ var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelected
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var groupSizeToClassNameMap = {
-  s: '--small',
-  m: '--medium',
-  compressed: '--compressed'
-};
 var EuiButtonGroup = function EuiButtonGroup(_ref) {
   var className = _ref.className,
     _ref$buttonSize = _ref.buttonSize,
@@ -52,19 +47,25 @@ var EuiButtonGroup = function EuiButtonGroup(_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'single' : _ref$type,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiButtonGroup', "euiButtonGroup".concat(groupSizeToClassNameMap[buttonSize]), "euiButtonGroup".concat(_button.colorToClassNameMap[color]), {
-    'euiButtonGroup--fullWidth': isFullWidth,
-    'euiButtonGroup--isDisabled': isDisabled
+  var euiTheme = (0, _services.useEuiTheme)();
+  var wrapperStyles = (0, _button_group.euiButtonGroupStyles)();
+  var wrapperCssStyles = [wrapperStyles.euiButtonGroup, isFullWidth && wrapperStyles.fullWidth];
+  var styles = (0, _button_group.euiButtonGroupButtonsStyles)(euiTheme);
+  var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, styles[buttonSize]];
+  var classes = (0, _classnames.default)('euiButtonGroup', {
+    'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var typeIsSingle = type === 'single';
   var nameIfSingle = (0, _services.useGeneratedHtmlId)({
     conditionalId: name
   });
   return (0, _react2.jsx)("fieldset", (0, _extends2.default)({
+    css: wrapperCssStyles,
     className: classes
   }, rest, {
     disabled: isDisabled
   }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("legend", null, legend)), (0, _react2.jsx)("div", {
+    css: cssStyles,
     className: "euiButtonGroup__buttons"
   }, options.map(function (option, index) {
     return (0, _react2.jsx)(_button_group_button.EuiButtonGroupButton, (0, _extends2.default)({
@@ -148,11 +149,10 @@ EuiButtonGroup.propTypes = {
     /**
        * Can only be one side `left` or `right`
        */
-    iconSide: _propTypes.default.oneOf(["left", "right"]),
+    iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
     isLoading: _propTypes.default.bool,
     /**
-       * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
-       * It doesn't apply to the icon.
+       * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
        */
     textProps: _propTypes.default.shape({
       className: _propTypes.default.string,
@@ -162,7 +162,7 @@ EuiButtonGroup.propTypes = {
       ref: _propTypes.default.any,
       "data-text": _propTypes.default.string
     }),
-    iconSize: _propTypes.default.oneOf(["s", "m"]),
+    iconSize: _propTypes.default.any,
     className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
     "aria-label": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
     "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),

package/test-env/components/button/button_group/button_group.styles.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiButtonGroupStyles = exports.euiButtonGroupButtonsStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _form = require("../../form/form.styles");
+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)."; } /*
+                                                                                                                                                                                                                                                                                           * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+                                                                                                                                                                                                                                                                                           * or more contributor license agreements. Licensed under the Elastic License
+                                                                                                                                                                                                                                                                                           * 2.0 and the Server Side Public License, v 1; you may not use this file except
+                                                                                                                                                                                                                                                                                           * in compliance with, at your election, the Elastic License 2.0 or the Server
+                                                                                                                                                                                                                                                                                           * Side Public License, v 1.
+                                                                                                                                                                                                                                                                                           */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "jl0hie-fullWidth",
+  styles: "display:block;label:fullWidth;"
+} : {
+  name: "jl0hie-fullWidth",
+  styles: "display:block;label:fullWidth;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiButtonGroupStyles = function euiButtonGroupStyles() {
+  return {
+    euiButtonGroup: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;;label:euiButtonGroup;"),
+    fullWidth: _ref
+  };
+};
+exports.euiButtonGroupStyles = euiButtonGroupStyles;
+var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
+    controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
+    backgroundColor = _euiFormVariables.backgroundColor,
+    borderColor = _euiFormVariables.borderColor;
+  return {
+    // Base
+    euiButtonGroup__buttons: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " display:flex;;label:euiButtonGroup__buttons;"),
+    fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " .euiButtonGroupButton{flex:1;};label:fullWidth;"),
+    // Sizes
+    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
+    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";;label:compressed;")
+  };
+};
+exports.euiButtonGroupButtonsStyles = euiButtonGroupButtonsStyles;

package/test-env/components/button/button_group/button_group_button.js

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiButtonGroupButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-var _button = require("../button");
-var _inner_text = require("../../inner_text");
 var _services = require("../../../services");
-var _button2 = require("../../../themes/amsterdam/global_styling/mixins/button");
+var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
+var _inner_text = require("../../inner_text");
+var _button_display = require("../button_display/_button_display");
+var _button_group_button = require("./button_group_button.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "label", "name", "onChange", "size", "value", "color", "element", "type"];
 /*
@@ -25,8 +25,6 @@ var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "l
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-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 EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
   var className = _ref.className,
     id = _ref.id,
@@ -42,21 +40,16 @@ var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     _ref$color = _ref.color,
     _color = _ref$color === void 0 ? 'primary' : _ref$color,
     _ref$element = _ref.element,
-    element = _ref$element === void 0 ? 'button' : _ref$element,
+    _element = _ref$element === void 0 ? 'button' : _ref$element,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Force element to be a button if disabled
-  var el = isDisabled ? 'button' : element;
-  var newId = (0, _services.useGeneratedHtmlId)();
+  var element = isDisabled ? 'button' : _element;
   var elementProps = {};
   var singleInput;
-  if (el === 'label') {
-    elementProps = _objectSpread(_objectSpread({}, elementProps), {}, {
-      htmlFor: newId
-    });
+  if (element === 'label') {
     singleInput = (0, _react2.jsx)("input", {
-      id: newId,
       className: "euiScreenReaderOnly",
       name: name,
       checked: isSelected,
@@ -69,22 +62,28 @@ var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
       "data-test-subj": id
     });
   } else {
-    elementProps = _objectSpread(_objectSpread({}, elementProps), {}, {
-      id: newId,
+    elementProps = {
       'data-test-subj': id,
       isSelected: isSelected,
       type: type,
       onClick: function onClick() {
         return _onChange(id);
       }
-    });
+    };
   }
+  var isCompressed = size === 'compressed';
   var color = isDisabled ? 'disabled' : _color;
-  var display = isSelected ? 'fill' : size === 'compressed' ? 'empty' : 'base';
-  var buttonColorStyles = (0, _button2.useEuiButtonColorCSS)({
+  var display = isSelected ? 'fill' : isCompressed ? 'empty' : 'base';
+  var euiTheme = (0, _services.useEuiTheme)();
+  var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
     display: display
   })[color];
-  var buttonClasses = (0, _classnames.default)({
+  var focusColorStyles = isCompressed ? (0, _button_group_button._compressedButtonFocusColor)(euiTheme, color) : (0, _button_group_button._uncompressedButtonFocus)(euiTheme);
+  var styles = (0, _button_group_button.euiButtonGroupButtonStyles)(euiTheme);
+  var cssStyles = [styles.euiButtonGroupButton, isIconOnly && styles.iconOnly, styles[size], !isCompressed && styles.uncompressed, isDisabled && isSelected ? styles.disabledAndSelected : buttonColorStyles, !isDisabled && focusColorStyles];
+  var contentStyles = [styles.content.euiButtonGroupButton__content, isCompressed && styles.content.compressed];
+  var textStyles = [isIconOnly ? styles.text.euiButtonGroupButton__iconOnly : styles.text.euiButtonGroupButton__text];
+  var buttonClasses = (0, _classnames.default)('euiButtonGroupButton', {
     'euiButtonGroupButton-isSelected': isSelected,
     'euiButtonGroupButton-isIconOnly': isIconOnly
   }, className);
@@ -98,15 +97,17 @@ var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
     buttonTextRef = _useInnerText2[0],
     innerText = _useInnerText2[1];
-  return (0, _react2.jsx)(_button.EuiButtonDisplayDeprecated, (0, _extends2.default)({
-    css: [buttonColorStyles, ";label:EuiButtonGroupButton;"],
-    baseClassName: "euiButtonGroupButton",
+  return (0, _react2.jsx)(_button_display.EuiButtonDisplay, (0, _extends2.default)({
+    css: cssStyles,
     className: buttonClasses,
-    element: el,
+    element: element,
     isDisabled: isDisabled,
     size: size === 'compressed' ? 's' : size,
+    contentProps: {
+      css: contentStyles
+    },
     textProps: {
-      className: isIconOnly ? 'euiScreenReaderOnly' : 'euiButtonGroupButton__textShift',
+      css: textStyles,
       ref: buttonTextRef,
       'data-text': innerText
     },
@@ -142,11 +143,10 @@ EuiButtonGroupButton.propTypes = {
   /**
      * Can only be one side `left` or `right`
      */
-  iconSide: _propTypes.default.oneOf(["left", "right"]),
+  iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
   isLoading: _propTypes.default.bool,
   /**
-     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
-     * It doesn't apply to the icon.
+     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
      */
   textProps: _propTypes.default.shape({
     className: _propTypes.default.string,
@@ -156,7 +156,7 @@ EuiButtonGroupButton.propTypes = {
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
-  iconSize: _propTypes.default.oneOf(["s", "m"]),
+  iconSize: _propTypes.default.any,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/test-env/components/button/button_group/button_group_button.styles.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiButtonGroupButtonStyles = exports._uncompressedButtonFocus = exports._compressedButtonFocusColor = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../../services");
+var _global_styling = require("../../../global_styling");
+var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
+var _accessibility = require("../../accessibility");
+var _form = require("../../form/form.styles");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
+    controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius;
+  var compressedButtonHeight = (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+    return x - y * 2;
+  });
+  var uncompressedBorderRadii = function uncompressedBorderRadii(radiusSize) {
+    return "\n    border-radius: 0;\n\n    &:first-child {\n      ".concat((0, _global_styling.logicalShorthandCSS)('border-radius', "".concat(radiusSize, " 0 0 ").concat(radiusSize)), "\n    }\n\n    &:last-child {\n      ").concat((0, _global_styling.logicalShorthandCSS)('border-radius', "0 ".concat(radiusSize, " ").concat(radiusSize, " 0")), "\n    }\n  ");
+  };
+  return {
+    // Base
+    euiButtonGroupButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), " flex-shrink:1;flex-grow:0;", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;};label:euiButtonGroupButton;"),
+    iconOnly: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.s, ";;label:iconOnly;"),
+    // Sizes
+    s: /*#__PURE__*/(0, _react.css)(uncompressedBorderRadii(euiTheme.border.radius.small), ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(uncompressedBorderRadii(euiTheme.border.radius.medium), ";;label:m;"),
+    uncompressed: /*#__PURE__*/(0, _react.css)("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:not(.euiButtonGroupButton-isSelected)+.euiButtonGroupButton:not(.euiButtonGroupButton-isSelected){box-shadow:-", euiTheme.border.width.thin, " 0 0 0 ", (0, _services.transparentize)(euiTheme.colors.fullShade, 0.1), ";}&:is(.euiButtonGroupButton-isSelected)+.euiButtonGroupButton-isSelected{box-shadow:-", euiTheme.border.width.thin, " 0 0 0 ", (0, _services.transparentize)(euiTheme.colors.emptyShade, 0.2), ";};label:uncompressed;"),
+    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedButtonHeight), " line-height:", compressedButtonHeight, ";padding:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+      return x * 2;
+    }), ";background-clip:content-box;border-radius:", (0, _global_styling.mathWithUnits)([controlCompressedBorderRadius, euiTheme.border.width.thin], function (x, y) {
+      return x + y;
+    }), ";font-weight:", euiTheme.font.weight.regular, ";&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.semiBold, ";};label:compressed;"),
+    // States
+    disabledAndSelected: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeDisabledContrastColor)(euiTheme.colors.disabledText)(euiTheme.colors.disabled), ";background-color:", euiTheme.colors.disabled, ";;label:disabledAndSelected;"),
+    // Content wrapper
+    content: {
+      euiButtonGroupButton__content: /*#__PURE__*/(0, _react.css)(";label:euiButtonGroupButton__content;"),
+      compressed: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.s, ";;label:compressed;")
+    },
+    // Text wrapper
+    text: {
+      euiButtonGroupButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), ";;label:euiButtonGroupButton__text;"),
+      euiButtonGroupButton__iconOnly: /*#__PURE__*/(0, _react.css)((0, _accessibility.euiScreenReaderOnly)(), ";;label:euiButtonGroupButton__iconOnly;")
+    }
+  };
+};
+
+/**
+ * Focus utilities - made complex by the two different button styles
+ * and the fact that `label`/`input` combos need :focus-within,
+ * but `button` does not
+ */
+exports.euiButtonGroupButtonStyles = euiButtonGroupButtonStyles;
+var _outlineSelectors = function _outlineSelectors(outlineCss) {
+  return /*#__PURE__*/(0, _react.css)("&:is(button){&:focus-visible{", outlineCss, ";}}&:is(label){&:focus-within{", outlineCss, ";}@supports selector(:has(*)){/* Once all evergreen browsers support :has, we can remove\n           @supports and the outline: none reset just use this selector */&:focus-within{outline:none;}&:has(:focus-visible){", outlineCss, ";}}}");
+};
+var _compressedButtonFocusColor = function _compressedButtonFocusColor(euiThemeContext, color) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiButtonFillColor = (0, _button.euiButtonFillColor)(euiThemeContext, color),
+    backgroundColor = _euiButtonFillColor.backgroundColor;
+  return _outlineSelectors("outline: ".concat(euiTheme.focus.width, " solid ").concat(backgroundColor, ";"));
+};
+exports._compressedButtonFocusColor = _compressedButtonFocusColor;
+var _uncompressedButtonFocus = function _uncompressedButtonFocus(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return _outlineSelectors((0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.colors.fullShade));
+};
+exports._uncompressedButtonFocus = _uncompressedButtonFocus;

package/test-env/components/button/button_icon/button_icon.js

@@ -11,11 +11,11 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
-var _common = require("../../common");
 var _icon = require("../../icon");
 var _loading = require("../../loading");
 var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
 var _button_display = require("../button_display/_button_display");
+var _button_icon = require("./button_icon.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "disabled", "href", "type", "display", "target", "rel", "size", "buttonRef", "isSelected", "isLoading"];
 /*
@@ -25,20 +25,10 @@ var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "di
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var displayToClassNameMap = {
-  base: null,
-  empty: 'euiButtonIcon--empty',
-  fill: 'euiButtonIcon--fill'
-};
-var DISPLAYS = (0, _common.keysOf)(displayToClassNameMap);
-exports.DISPLAYS = DISPLAYS;
-var sizeToClassNameMap = {
-  xs: 'euiButtonIcon--xSmall',
-  s: 'euiButtonIcon--small',
-  m: 'euiButtonIcon--medium'
-};
-var SIZES = (0, _common.keysOf)(sizeToClassNameMap);
+var SIZES = ['xs', 's', 'm'];
 exports.SIZES = SIZES;
+var DISPLAYS = ['base', 'empty', 'fill'];
+exports.DISPLAYS = DISPLAYS;
 var EuiButtonIcon = function EuiButtonIcon(props) {
   var className = props.className,
     iconType = props.iconType,
@@ -73,16 +63,14 @@ var EuiButtonIcon = function EuiButtonIcon(props) {
     console.warn("EuiButtonIcon requires aria-label or aria-labelledby to be specified because icon-only\n      buttons are screen-reader-inaccessible without them.");
   }
   var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
-  var styles = {
-    euiButtonIcon: /*#__PURE__*/(0, _react2.css)(";label:euiButtonIcon;"),
-    colors: (0, _button.useEuiButtonColorCSS)({
-      display: display
-    }),
-    // Temporary extra style for empty `:hover` state until we decide how to handle universally
-    hoverStyles: /*#__PURE__*/(0, _react2.css)("&:hover{background-color:", (0, _button.euiButtonEmptyColor)(euiThemeContext, color).backgroundColor, ";};label:hoverStyles;")
-  };
-  var cssStyles = [styles.euiButtonIcon, styles.colors[color], display === 'empty' && styles.hoverStyles];
-  var classes = (0, _classnames.default)('euiButtonIcon', size && sizeToClassNameMap[size], className);
+  var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
+    display: display
+  });
+  var buttonFocusStyle = (0, _button.useEuiButtonFocusCSS)();
+  var styles = (0, _button_icon.euiButtonIconStyles)(euiThemeContext);
+  var emptyHoverStyles = (0, _button_icon._emptyHoverStyles)(euiThemeContext, color);
+  var cssStyles = [styles.euiButtonIcon, styles[size], buttonColorStyles[color], buttonFocusStyle, display === 'empty' && emptyHoverStyles, isDisabled && styles.isDisabled];
+  var classes = (0, _classnames.default)('euiButtonIcon', className);
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return (0, _react2.jsx)(_services.EuiThemeProvider, {
@@ -107,13 +95,23 @@ var EuiButtonIcon = function EuiButtonIcon(props) {
     });
   }
 
-  // `original` size doesn't exist in `EuiLoadingSpinner`
-  // when the `iconSize` is `original` we don't pass any size to the `EuiLoadingSpinner`
-  // so it gets the default size
-  var loadingSize = iconSize === 'original' ? undefined : iconSize;
   if (iconType && isLoading) {
+    // `original` size doesn't exist in `EuiLoadingSpinner`
+    // when the `iconSize` is `original` we don't pass any size to the `EuiLoadingSpinner`
+    // so it gets the default size
+    var loadingSize = iconSize === 'original' ? undefined : iconSize;
+
+    // When the button is disabled the text gets gray
+    // and in some buttons the background gets a light gray
+    // for better contrast we want to change the border of the spinner
+    // to have the same color of the text. This way we ensure the borders
+    // are always visible. The default spinner color could be very light.
+    var loadingSpinnerColor = isDisabled ? {
+      border: 'currentcolor'
+    } : undefined;
     buttonIcon = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-      size: loadingSize
+      size: loadingSize,
+      color: loadingSpinnerColor
     });
   }
 
@@ -172,7 +170,7 @@ EuiButtonIcon.propTypes = {
      * Overall size of button.
      * Matches the sizes of other EuiButtons
      */
-  size: _propTypes.default.oneOf(["xs", "s", "m"]),
+  size: _propTypes.default.any,
   /**
      * Size of the icon only.
      * This will not affect the overall size of the button
@@ -199,7 +197,7 @@ EuiButtonIcon.propTypes = {
      * `fill` is equivalent to a filled EuiButton
      * `empty` (default) is equivalent to an EuiButtonEmpty
      */
-  display: _propTypes.default.oneOf(["base", "empty", "fill"]),
+  display: _propTypes.default.any,
   /**
      * Disables the button and changes the icon to a loading spinner
      */