@elastic/eui 82.0.0 → 82.2.0

package/es/components/button/button.js

@@ -1,11 +1,4 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["buttonRef", "color", "fill"],
-  _excluded2 = ["element", "baseClassName", "children", "className", "iconType", "iconSide", "color", "size", "isDisabled", "isLoading", "isSelected", "contentProps", "textProps", "fullWidth", "minWidth", "style"];
-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) { _defineProperty(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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _excluded = ["buttonRef", "color", "fill"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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; }
@@ -24,9 +17,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  * Side Public License, v 1.
  */
 
-import React, { forwardRef } from 'react';
-import classNames from 'classnames';
-import { EuiButtonContentDeprecated as EuiButtonContent } from './_button_content_deprecated';
+import React from 'react';
 import { BUTTON_COLORS, useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../themes/amsterdam/global_styling/mixins/button';
 import { EuiButtonDisplay, isButtonDisabled } from './button_display/_button_display';
 import { EuiThemeProvider } from '../../services';
@@ -117,120 +108,4 @@ EuiButton.displayName = 'EuiButton';
 EuiButton.defaultProps = {
   size: 'm',
   color: 'primary'
-};
-export var sizeToClassNameMap = {
-  s: '--small',
-  m: null
-};
-export var colorToClassNameMap = {
-  primary: '--primary',
-  accent: '--accent',
-  success: '--success',
-  warning: '--warning',
-  danger: '--danger',
-  ghost: '--ghost',
-  text: '--text'
-};
-
-/**
- * *DEPRECATED*
- * EuiButtonDisplay is an internal-only component used for displaying
- * any element as a button.
- * NOTE: This component *must* be below EuiButton in the file and
- * EuiButton must also set a displayName for react-docgen-typescript
- * to correctly set EuiButton's docgenInfo and display a props table.
- * This component has been deprecated in favor of the new EuiButtonDisplay
- * that can be found in `src/components/button/button_display/_button_display.tsx`
- */
-export var EuiButtonDisplayDeprecated = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$element = _ref.element,
-    element = _ref$element === void 0 ? 'button' : _ref$element,
-    baseClassName = _ref.baseClassName,
-    children = _ref.children,
-    className = _ref.className,
-    iconType = _ref.iconType,
-    _ref$iconSide = _ref.iconSide,
-    iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide,
-    color = _ref.color,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'm' : _ref$size,
-    isDisabled = _ref.isDisabled,
-    isLoading = _ref.isLoading,
-    isSelected = _ref.isSelected,
-    contentProps = _ref.contentProps,
-    textProps = _ref.textProps,
-    fullWidth = _ref.fullWidth,
-    minWidth = _ref.minWidth,
-    style = _ref.style,
-    rest = _objectWithoutProperties(_ref, _excluded2);
-  var buttonIsDisabled = isButtonDisabled({
-    isLoading: isLoading,
-    isDisabled: isDisabled
-  });
-  var classes = classNames(baseClassName, color && colorToClassNameMap[color] ? "".concat(baseClassName).concat(colorToClassNameMap[color]) : undefined, size && sizeToClassNameMap[size] ? "".concat(baseClassName).concat(sizeToClassNameMap[size]) : null, fullWidth && "".concat(baseClassName, "--fullWidth"), className);
-
-  /**
-   * Not changing the content or text class names to match baseClassName yet,
-   * as it is a major breaking change.
-   */
-  var contentClassNames = classNames('euiButton__content', contentProps && contentProps.className);
-  var textClassNames = classNames('euiButton__text', textProps && textProps.className);
-  var innerNode = ___EmotionJSX(EuiButtonContent, _extends({
-    isLoading: isLoading,
-    iconType: iconType,
-    iconSide: iconSide,
-    textProps: _objectSpread(_objectSpread({}, textProps), {}, {
-      className: textClassNames
-    })
-  }, contentProps, {
-    // className has to come last to override contentProps.className
-    className: contentClassNames
-  }), children);
-  var calculatedStyle = style;
-  if (minWidth !== undefined || minWidth !== null) {
-    calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
-      // @ts-ignore - deprecated component
-      minWidth: minWidth
-    });
-  }
-  return /*#__PURE__*/React.createElement(element, _objectSpread({
-    className: classes,
-    style: calculatedStyle,
-    disabled: element === 'button' && buttonIsDisabled,
-    'aria-pressed': element === 'button' ? isSelected : undefined,
-    ref: ref
-  }, rest), innerNode);
-});
-EuiButtonDisplayDeprecated.propTypes = {
-  children: PropTypes.node,
-  /**
-     * Make button a solid color for prominence
-     */
-  fill: PropTypes.bool,
-  /**
-     * Any of the named color palette options.
-     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
-     */
-  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
-  /**
-     * Use size `s` in confined spaces
-     */
-  size: PropTypes.any,
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: PropTypes.bool,
-  className: PropTypes.string,
-  "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string,
-  css: PropTypes.any,
-  /**
-       * Provide a valid element to render the element as
-       */
-  element: PropTypes.oneOf(["a", "button", "span", "label"]).isRequired,
-  /**
-       * Provide the component's base class name to build the class list on
-       */
-  baseClassName: PropTypes.string.isRequired
-};
-EuiButtonDisplayDeprecated.displayName = 'EuiButtonDisplay';
+};

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

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type", "style"];
+var _excluded = ["element", "type", "children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "style"];
 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) { _defineProperty(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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -25,7 +25,6 @@ import { getSecureRelForTarget, useEuiTheme } from '../../../services';
 import { euiButtonDisplayStyles } from './_button_display.styles';
 import { EuiButtonDisplayContent } from './_button_display_content';
 import { validateHref } from '../../../services/security/href_validator';
-import { useEuiButtonRadiusCSS } from '../../../themes/amsterdam/global_styling/mixins';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var SIZES = ['xs', 's', 'm'];
 
@@ -47,7 +46,11 @@ export function isButtonDisabled(_ref) {
  * any element as a button.
  */
 export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
+  var _ref2$element = _ref2.element,
+    _element = _ref2$element === void 0 ? 'button' : _ref2$element,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'button' : _ref2$type,
+    children = _ref2.children,
     iconType = _ref2.iconType,
     _ref2$iconSide = _ref2.iconSide,
     iconSide = _ref2$iconSide === void 0 ? 'left' : _ref2$iconSide,
@@ -65,8 +68,6 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     href = _ref2.href,
     target = _ref2.target,
     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({
@@ -76,8 +77,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   });
   var theme = useEuiTheme();
   var styles = euiButtonDisplayStyles(theme);
-  var buttonRadiusStyle = useEuiButtonRadiusCSS()[size];
-  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
+  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled];
   var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
     isLoading: isLoading,
     isDisabled: buttonIsDisabled,
@@ -86,7 +86,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     iconSize: iconSize,
     textProps: textProps
   }, contentProps), children);
-  var element = href && !buttonIsDisabled ? 'a' : 'button';
+  var element = buttonIsDisabled ? 'button' : href ? 'a' : _element;
   var elementProps = {};
   // Element-specific attributes
   if (element === 'button') {
@@ -118,6 +118,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 EuiButtonDisplay.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
+  element: PropTypes.oneOf(["a", "button", "span", "label"]),
   children: PropTypes.node,
   size: PropTypes.any,
   /**

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

@@ -8,15 +8,12 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { css } from '@emotion/react';
 import { euiFontSize, logicalCSS, logicalShorthandCSS, logicalTextAlignStyle } from '../../../global_styling';
-
+import { euiButtonSizeMap } from '../../../themes/amsterdam/global_styling/mixins';
 // Provides a solid reset and base for handling sizing layout
 // Does not include any visual styles
 export var euiButtonBaseCSS = function euiButtonBaseCSS() {
   return "\n    display: inline-block;\n    appearance: none;\n    cursor: pointer;\n    ".concat(logicalTextAlignStyle('center'), ";\n    white-space: nowrap;\n    ").concat(logicalCSS('max-width', '100%'), ";\n    vertical-align: middle;\n  ");
 };
-var _buttonSize = function _buttonSize(size) {
-  return "\n    ".concat(logicalCSS('height', size), ";\n    // prevents descenders from getting cut off\n    line-height: ").concat(size, ";\n  ");
-};
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "8595p9-isDisabled",
   styles: "cursor:not-allowed;label:isDisabled;"
@@ -27,16 +24,21 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var sizes = euiButtonSizeMap(euiThemeContext);
+  var _buttonSize = function _buttonSize(sizeKey) {
+    var size = sizes[sizeKey];
+    return /*#__PURE__*/css(logicalCSS('height', size.height), " line-height:", size.height, ";", euiFontSize(euiThemeContext, size.fontScale), " border-radius:", size.radius, ";");
+  };
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";font-weight:", euiTheme.font.weight.medium, ";", logicalShorthandCSS('padding', "0 ".concat(euiTheme.size.m)), " &:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), " font-weight:", euiTheme.font.weight.medium, ";", logicalShorthandCSS('padding', "0 ".concat(euiTheme.size.m)), " &:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), ";;label:fullWidth;"),
     defaultMinWidth: /*#__PURE__*/css(logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
     // Sizes
-    xs: /*#__PURE__*/css(_buttonSize(euiTheme.size.l), euiFontSize(euiThemeContext, 'xs'), ";label:xs;"),
-    s: /*#__PURE__*/css(_buttonSize(euiTheme.size.xl), euiFontSize(euiThemeContext, 's'), ";label:s;"),
-    m: /*#__PURE__*/css(_buttonSize(euiTheme.size.xxl), euiFontSize(euiThemeContext, 's'), ";label:m;")
+    xs: /*#__PURE__*/css(_buttonSize('xs'), ";label:xs;"),
+    s: /*#__PURE__*/css(_buttonSize('s'), ";label:s;"),
+    m: /*#__PURE__*/css(_buttonSize('m'), ";label:m;")
   };
 };

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

@@ -11,6 +11,6 @@ export var euiButtonDisplayContentStyles = function euiButtonDisplayContentStyle
   var euiTheme = _ref.euiTheme;
   return {
     // Base
-    euiButtonDisplayContent: /*#__PURE__*/css(logicalCSS('height', '100%'), ";", logicalCSS('width', '100%'), ";display:flex;justify-content:center;align-items:center;vertical-align:middle;gap:", euiTheme.size.s, ";;label:euiButtonDisplayContent;")
+    euiButtonDisplayContent: /*#__PURE__*/css(logicalCSS('height', '100%'), " ", logicalCSS('width', '100%'), " display:flex;justify-content:center;align-items:center;vertical-align:middle;gap:", euiTheme.size.s, ";;label:euiButtonDisplayContent;")
   };
 };

package/es/components/button/button_empty/button_empty.js

@@ -19,24 +19,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { keysOf } from '../../common';
-import { EuiThemeProvider, getSecureRelForTarget } from '../../../services';
-import { EuiButtonContentDeprecated as EuiButtonContent } from '../_button_content_deprecated';
+import { useEuiTheme, EuiThemeProvider, getSecureRelForTarget } from '../../../services';
+import { EuiButtonDisplayContent } from '../button_display/_button_display_content';
 import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
 import { isButtonDisabled } from '../button_display/_button_display';
+import { euiButtonEmptyStyles } from './button_empty.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var sizeToClassNameMap = {
-  xs: 'euiButtonEmpty--xSmall',
-  s: 'euiButtonEmpty--small',
-  m: null
-};
-export var SIZES = keysOf(sizeToClassNameMap);
-var flushTypeToClassNameMap = {
-  left: 'euiButtonEmpty--flushLeft',
-  right: 'euiButtonEmpty--flushRight',
-  both: 'euiButtonEmpty--flushBoth'
-};
-export var FLUSH_TYPES = keysOf(flushTypeToClassNameMap);
+export var SIZES = ['xs', 's', 'm'];
+export var FLUSH_TYPES = ['left', 'right', 'both'];
 
 /**
  * Extends EuiButtonContentProps which provides
@@ -77,7 +67,10 @@ export var EuiButtonEmpty = function EuiButtonEmpty(props) {
   var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
   var buttonColorStyles = useEuiButtonColorCSS({
     display: 'empty'
-  })[color];
+  });
+  var euiTheme = useEuiTheme();
+  var styles = 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 ___EmotionJSX(EuiThemeProvider, {
@@ -89,11 +82,11 @@ export var EuiButtonEmpty = function EuiButtonEmpty(props) {
       color: "text"
     })));
   }
-  var classes = classNames('euiButtonEmpty', size ? sizeToClassNameMap[size] : null, flush ? flushTypeToClassNameMap[flush] : null, className);
-  var contentClassNames = classNames('euiButtonEmpty__content', contentProps && contentProps.className);
-  var textClassNames = classNames('euiButtonEmpty__text', textProps && textProps.className);
-  var cssStyles = [buttonColorStyles];
-  var innerNode = ___EmotionJSX(EuiButtonContent, _extends({
+  var classes = classNames('euiButtonEmpty', className);
+  var contentClassNames = classNames('euiButtonEmpty__content', contentProps === null || contentProps === void 0 ? void 0 : contentProps.className);
+  var textClassNames = classNames('euiButtonEmpty__text', textProps === null || textProps === void 0 ? void 0 : textProps.className);
+  var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
+    isDisabled: isDisabled,
     isLoading: isLoading,
     iconType: iconType,
     iconSide: iconSide,
@@ -101,10 +94,9 @@ export 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.
@@ -144,14 +136,14 @@ EuiButtonEmpty.propTypes = {
      * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
   color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
-  size: PropTypes.oneOf(["xs", "s", "m"]),
+  size: PropTypes.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.oneOf(["left", "right", "both"]),
+  flush: PropTypes.any,
   /**
      * `disabled` is also allowed
      */
@@ -198,10 +190,9 @@ EuiButtonEmpty.propTypes = {
   /**
      * Can only be one side `left` or `right`
      */
-  iconSide: PropTypes.oneOf(["left", "right"]),
+  iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.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.shape({
     className: PropTypes.string,
@@ -211,7 +202,7 @@ EuiButtonEmpty.propTypes = {
     ref: PropTypes.any,
     "data-text": PropTypes.string
   }),
-  iconSize: PropTypes.oneOf(["s", "m"]),
+  iconSize: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/button/button_empty/button_empty.styles.js

@@ -0,0 +1,41 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, logicalShorthandCSS, euiCanAnimate } from '../../../global_styling';
+import { euiButtonDisplayStyles } from '../button_display/_button_display.styles';
+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__
+};
+export 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 = euiButtonDisplayStyles(euiThemeContext);
+  return {
+    euiButtonEmpty: /*#__PURE__*/css(displayStyles.euiButtonDisplay, " ", logicalShorthandCSS('padding', "0 ".concat(euiTheme.size.s)), 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__*/css(logicalCSS('margin-right', euiTheme.size.s), ";;label:left;"),
+    right: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.s), ";;label:right;"),
+    both: /*#__PURE__*/css(";label:both;")
+  };
+};

package/es/components/button/button_group/button_group.js

@@ -13,16 +13,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React from 'react';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupButton } from './button_group_button';
-import { colorToClassNameMap } from '../button';
-import { useGeneratedHtmlId } from '../../../services';
+import { euiButtonGroupStyles, euiButtonGroupButtonsStyles } from './button_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var groupSizeToClassNameMap = {
-  s: '--small',
-  m: '--medium',
-  compressed: '--compressed'
-};
 export var EuiButtonGroup = function EuiButtonGroup(_ref) {
   var className = _ref.className,
     _ref$buttonSize = _ref.buttonSize,
@@ -47,19 +42,25 @@ export var EuiButtonGroup = function EuiButtonGroup(_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'single' : _ref$type,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiButtonGroup', "euiButtonGroup".concat(groupSizeToClassNameMap[buttonSize]), "euiButtonGroup".concat(colorToClassNameMap[color]), {
-    'euiButtonGroup--fullWidth': isFullWidth,
-    'euiButtonGroup--isDisabled': isDisabled
+  var euiTheme = useEuiTheme();
+  var wrapperStyles = euiButtonGroupStyles();
+  var wrapperCssStyles = [wrapperStyles.euiButtonGroup, isFullWidth && wrapperStyles.fullWidth];
+  var styles = euiButtonGroupButtonsStyles(euiTheme);
+  var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, styles[buttonSize]];
+  var classes = classNames('euiButtonGroup', {
+    'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var typeIsSingle = type === 'single';
   var nameIfSingle = useGeneratedHtmlId({
     conditionalId: name
   });
   return ___EmotionJSX("fieldset", _extends({
+    css: wrapperCssStyles,
     className: classes
   }, rest, {
     disabled: isDisabled
   }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("legend", null, legend)), ___EmotionJSX("div", {
+    css: cssStyles,
     className: "euiButtonGroup__buttons"
   }, options.map(function (option, index) {
     return ___EmotionJSX(EuiButtonGroupButton, _extends({
@@ -142,11 +143,10 @@ EuiButtonGroup.propTypes = {
     /**
        * Can only be one side `left` or `right`
        */
-    iconSide: PropTypes.oneOf(["left", "right"]),
+    iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([undefined])]),
     isLoading: PropTypes.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.shape({
       className: PropTypes.string,
@@ -156,7 +156,7 @@ EuiButtonGroup.propTypes = {
       ref: PropTypes.any,
       "data-text": PropTypes.string
     }),
-    iconSize: PropTypes.oneOf(["s", "m"]),
+    iconSize: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,

package/es/components/button/button_group/button_group.styles.js

@@ -0,0 +1,43 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+import { euiFormVariables } from '../../form/form.styles';
+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__
+};
+export var euiButtonGroupStyles = function euiButtonGroupStyles() {
+  return {
+    euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;;label:euiButtonGroup;"),
+    fullWidth: _ref
+  };
+};
+export var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
+    controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
+    backgroundColor = _euiFormVariables.backgroundColor,
+    borderColor = _euiFormVariables.borderColor;
+  return {
+    // Base
+    euiButtonGroup__buttons: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " display:flex;;label:euiButtonGroup__buttons;"),
+    fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton{flex:1;};label:fullWidth;"),
+    // Sizes
+    m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
+    s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
+    compressed: /*#__PURE__*/css(logicalCSS('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";;label:compressed;")
+  };
+};