@elastic/eui 63.0.1 → 64.0.0

package/optimize/lib/services/index.js

@@ -15,13 +15,9 @@ var _exportNames = {
   LEFT_ALIGNMENT: true,
   RIGHT_ALIGNMENT: true,
   CENTER_ALIGNMENT: true,
-  BREAKPOINTS: true,
-  BREAKPOINT_KEYS: true,
-  getBreakpoint: true,
-  isWithinBreakpoints: true,
   useIsWithinBreakpoints: true,
-  isWithinMaxBreakpoint: true,
-  isWithinMinBreakpoint: true,
+  useIsWithinMaxBreakpoint: true,
+  useIsWithinMinBreakpoint: true,
   CurrentEuiBreakpointContext: true,
   CurrentEuiBreakpointProvider: true,
   useCurrentEuiBreakpoint: true,
@@ -92,18 +88,6 @@ var _exportNames = {
   EuiWindowEvent: true,
   throttle: true
 };
-Object.defineProperty(exports, "BREAKPOINTS", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.BREAKPOINTS;
-  }
-});
-Object.defineProperty(exports, "BREAKPOINT_KEYS", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.BREAKPOINT_KEYS;
-  }
-});
 Object.defineProperty(exports, "CENTER_ALIGNMENT", {
   enumerable: true,
   get: function get() {
@@ -362,12 +346,6 @@ Object.defineProperty(exports, "formatText", {
     return _format.formatText;
   }
 });
-Object.defineProperty(exports, "getBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.getBreakpoint;
-  }
-});
 Object.defineProperty(exports, "getDurationAndPerformOnFrame", {
   enumerable: true,
   get: function get() {
@@ -446,24 +424,6 @@ Object.defineProperty(exports, "isValidHex", {
     return _color.isValidHex;
   }
 });
-Object.defineProperty(exports, "isWithinBreakpoints", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinBreakpoints;
-  }
-});
-Object.defineProperty(exports, "isWithinMaxBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinMaxBreakpoint;
-  }
-});
-Object.defineProperty(exports, "isWithinMinBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinMinBreakpoint;
-  }
-});
 Object.defineProperty(exports, "isWithinRange", {
   enumerable: true,
   get: function get() {
@@ -597,6 +557,18 @@ Object.defineProperty(exports, "useIsWithinBreakpoints", {
     return _breakpoint.useIsWithinBreakpoints;
   }
 });
+Object.defineProperty(exports, "useIsWithinMaxBreakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.useIsWithinMaxBreakpoint;
+  }
+});
+Object.defineProperty(exports, "useIsWithinMinBreakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.useIsWithinMinBreakpoint;
+  }
+});
 
 var keys = _interopRequireWildcard(require("./keys"));
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "63.0.1",
+  "version": "64.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -252,6 +252,7 @@
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
     "@emotion/react": "11.x",
+    "@emotion/cache": "11.x",
     "@types/react": "^16.9 || ^17.0",
     "@types/react-dom": "^16.9 || ^17.0",
     "moment": "^2.13.0",

package/src/components/index.scss

@@ -40,4 +40,3 @@
 @import 'table/index';
 @import 'tabs/index';
 @import 'tool_tip/index';
-@import 'tour/index';

package/test-env/components/accessibility/screen_reader_live/screen_reader_live.js

@@ -77,12 +77,12 @@ var EuiScreenReaderLive = function EuiScreenReaderLive(_ref) {
       // double announcements from VO when `focusRegionOnTextChange` is true
       ,
       "aria-hidden": toggle ? undefined : 'true',
-      "aria-live": focusRegionOnTextChange ? 'off' : ariaLive
+      "aria-live": !toggle || focusRegionOnTextChange ? 'off' : ariaLive
     }, isActive && toggle ? children : ''), (0, _react2.jsx)("div", {
       role: role,
       "aria-atomic": "true",
       "aria-hidden": !toggle ? undefined : 'true',
-      "aria-live": focusRegionOnTextChange ? 'off' : ariaLive
+      "aria-live": toggle || focusRegionOnTextChange ? 'off' : ariaLive
     }, isActive && !toggle ? children : '')))
   );
 };

package/test-env/components/accessibility/skip_link/skip_link.js

@@ -219,6 +219,7 @@ EuiSkipLink.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
@@ -226,5 +227,6 @@ EuiSkipLink.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   buttonRef: _propTypes.default.any
 };

package/test-env/components/accordion/accordion.js

@@ -51,7 +51,7 @@ var _accordion = require("./accordion.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "buttonProps", "buttonElement", "arrowProps", "theme"];
+var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "buttonProps", "buttonElement", "arrowProps", "theme"];
 
 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); }
 
@@ -163,6 +163,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           forceState = _this$props.forceState,
           isLoading = _this$props.isLoading,
           isLoadingMessage = _this$props.isLoadingMessage,
+          isDisabled = _this$props.isDisabled,
           buttonProps = _this$props.buttonProps,
           _this$props$buttonEle = _this$props.buttonElement,
           _ButtonElement = _this$props$buttonEle === void 0 ? 'button' : _this$props$buttonEle,
@@ -192,7 +193,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       }, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className); // Emotion styles
 
       var buttonStyles = (0, _accordion.euiAccordionButtonStyles)(theme);
-      var cssButtonStyles = [buttonStyles.euiAccordion__button];
+      var cssButtonStyles = [buttonStyles.euiAccordion__button, isDisabled && buttonStyles.disabled];
       var childrenStyles = (0, _accordion.euiAccordionChildrenStyles)(theme);
       var cssChildrenStyles = [childrenStyles.euiAccordion__children, isLoading && childrenStyles.isLoading, paddingSize === 'none' ? undefined : childrenStyles[paddingSize]];
       var childWrapperStyles = (0, _accordion.euiAccordionChildWrapperStyles)(theme);
@@ -219,7 +220,8 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           "aria-controls": id,
           "aria-expanded": isOpen,
           "aria-labelledby": buttonId,
-          tabIndex: buttonElementIsFocusable ? -1 : 0
+          tabIndex: buttonElementIsFocusable ? -1 : 0,
+          isDisabled: isDisabled
         }));
       }
 
@@ -254,8 +256,9 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         css: cssButtonStyles,
         "aria-controls": id,
         "aria-expanded": isOpen,
-        onClick: this.onToggle,
-        type: ButtonElement === 'button' ? 'button' : undefined
+        onClick: isDisabled ? undefined : this.onToggle,
+        type: ButtonElement === 'button' ? 'button' : undefined,
+        disabled: ButtonElement === 'button' ? isDisabled : undefined
       }), (0, _react2.jsx)("span", {
         className: buttonContentClasses
       }, buttonContent));
@@ -296,6 +299,7 @@ exports.EuiAccordionClass = EuiAccordionClass;
   paddingSize: 'none',
   arrowDisplay: 'left',
   isLoading: false,
+  isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
   buttonElement: 'button'
@@ -304,6 +308,7 @@ EuiAccordionClass.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   id: _propTypes.default.string.isRequired,
 
   /**
@@ -323,7 +328,8 @@ EuiAccordionClass.propTypes = {
   buttonProps: _propTypes.default.shape({
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   }),
 
   /**
@@ -385,7 +391,12 @@ EuiAccordionClass.propTypes = {
   /**
        * Choose whether the loading message replaces the content. Customize the message by passing a node
        */
-  isLoadingMessage: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.node.isRequired])
+  isLoadingMessage: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.node.isRequired]),
+
+  /**
+       * Disable the open/close interaction and visually subdues the trigger
+       */
+  isDisabled: _propTypes.default.bool
 };
 var EuiAccordion = (0, _services.withEuiTheme)(EuiAccordionClass);
 exports.EuiAccordion = EuiAccordion;

package/test-env/components/accordion/accordion.styles.js

@@ -14,7 +14,10 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiAccordion__button: /*#__PURE__*/(0, _react.css)((0, _mixins.euiFontSize)(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";text-align:left;width:100%;&:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;")
+    euiAccordion__button: /*#__PURE__*/(0, _react.css)((0, _mixins.euiFontSize)(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";text-align:left;width:100%;&:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
+    // Triggering button needs separate `disabled` key because the element that renders may not support `:disabled`;
+    // Hover pseudo selector for specificity
+    disabled: /*#__PURE__*/(0, _react.css)("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;")
   };
 };
 

package/test-env/components/aspect_ratio/aspect_ratio.js

@@ -17,9 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react2 = require("@emotion/react");
-
-var _excluded = ["children", "className", "height", "width", "maxWidth"];
+var _excluded = ["children", "className", "height", "width", "maxWidth", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -31,32 +29,23 @@ var EuiAspectRatio = function EuiAspectRatio(_ref) {
       height = _ref.height,
       width = _ref.width,
       maxWidth = _ref.maxWidth,
+      style = _ref.style,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiAspectRatio', className);
-  var euiAspectRatioStyle = {
+
+  var euiAspectRatioStyle = _objectSpread({
     aspectRatio: "".concat(width, " / ").concat(height),
-    height: '100%',
-    width: '100%'
-  };
+    height: 'auto',
+    width: '100%',
+    maxWidth: maxWidth
+  }, style);
 
   var props = _objectSpread({
     className: classes,
     style: euiAspectRatioStyle
   }, rest);
 
-  var content = /*#__PURE__*/_react.default.cloneElement(children, props);
-
-  var contentwithoptionalwrap = content;
-
-  if (maxWidth) {
-    contentwithoptionalwrap = (0, _react2.jsx)("div", {
-      style: {
-        maxWidth: maxWidth
-      }
-    }, content);
-  }
-
-  return contentwithoptionalwrap;
+  return /*#__PURE__*/_react.default.cloneElement(children, props);
 };
 
 exports.EuiAspectRatio = EuiAspectRatio;
@@ -64,6 +53,7 @@ EuiAspectRatio.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Aspect ratio height. For example 9 would be widescreen video.

package/test-env/components/avatar/avatar.js

@@ -117,6 +117,7 @@ EuiAvatar.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
          * Custom initials (max 2 characters).

package/test-env/components/badge/badge.js

@@ -270,6 +270,7 @@ EuiBadge.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Will apply an onclick to icon within the badge

package/test-env/components/badge/badge_group/badge_group.js

@@ -57,6 +57,7 @@ EuiBadgeGroup.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Space between badges

package/test-env/components/badge/beta_badge/beta_badge.js

@@ -160,6 +160,7 @@ EuiBetaBadge.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Will apply an onclick to the badge itself

package/test-env/components/badge/notification_badge/badge_notification.js

@@ -59,5 +59,6 @@ EuiNotificationBadge.propTypes = {
   color: _propTypes.default.oneOf(["accent", "subdued"]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

package/test-env/components/basic_table/basic_table.js

@@ -1139,6 +1139,7 @@ EuiBasicTable.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Describes how to extract a unique ID from each item, used for selections & expanded rows
@@ -1248,7 +1249,8 @@ EuiBasicTable.propTypes = {
     readOnly: _propTypes.default.bool,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   }).isRequired, _propTypes.default.shape({
     /**
        * A function that computes the value for each item and renders it
@@ -1288,7 +1290,8 @@ EuiBasicTable.propTypes = {
     readOnly: _propTypes.default.bool,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   }).isRequired, _propTypes.default.shape({
     /**
        * An array of one of the objects: #DefaultItemAction or #CustomItemAction

package/test-env/components/basic_table/in_memory_table.js

@@ -578,6 +578,7 @@ EuiInMemoryTable.propTypes = {
   className: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]), _propTypes.default.string]),
   "aria-label": _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]), _propTypes.default.string]),
   "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]), _propTypes.default.string]),
+  css: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]), _propTypes.default.any]),
 
   /**
      * Describes how to extract a unique ID from each item, used for selections & expanded rows
@@ -687,7 +688,8 @@ EuiInMemoryTable.propTypes = {
     readOnly: _propTypes.default.bool,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   }).isRequired, _propTypes.default.shape({
     /**
        * A function that computes the value for each item and renders it
@@ -727,7 +729,8 @@ EuiInMemoryTable.propTypes = {
     readOnly: _propTypes.default.bool,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   }).isRequired, _propTypes.default.shape({
     /**
        * An array of one of the objects: #DefaultItemAction or #CustomItemAction
@@ -1005,6 +1008,7 @@ EuiInMemoryTable.propTypes = {
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any,
       // Boolean values are not meaningful to this EuiSearchBox, but are allowed so that other
       // components can use e.g. a true value to mean "auto-derive a schema". See EuiInMemoryTable.
       // Admittedly, this is a bit of a hack.
@@ -1113,7 +1117,8 @@ EuiInMemoryTable.propTypes = {
     dateFormat: _propTypes.default.any,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   }).isRequired]),
   pagination: _propTypes.default.oneOfType([_propTypes.default.oneOf([undefined]), _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
     pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.number.isRequired),

package/test-env/components/beacon/beacon.js

@@ -56,6 +56,7 @@ EuiBeacon.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Height and width of the center circle. Value is passed directly to the `style` attribute

package/test-env/components/bottom_bar/bottom_bar.js

@@ -160,6 +160,7 @@ _EuiBottomBar.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * How to position the bottom bar against its parent.
@@ -242,6 +243,7 @@ EuiBottomBar.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * How to position the bottom bar against its parent.

package/test-env/components/breadcrumbs/breadcrumb.js

@@ -131,6 +131,7 @@ EuiBreadcrumbContent.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   href: _propTypes.default.string,
   rel: _propTypes.default.string,
   onClick: _propTypes.default.func,

package/test-env/components/breadcrumbs/breadcrumbs.js

@@ -109,6 +109,7 @@ EuiBreadcrumbs.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Hides extra (above the max) breadcrumbs under a collapsed item as the window gets smaller.
@@ -141,6 +142,7 @@ EuiBreadcrumbs.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     href: _propTypes.default.string,
     rel: _propTypes.default.string,
     onClick: _propTypes.default.func,

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

@@ -89,11 +89,13 @@ EuiButtonContentDeprecated.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
   iconSize: _propTypes.default.oneOf(["s", "m"]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

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

@@ -225,6 +225,7 @@ EuiButton.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
@@ -232,6 +233,7 @@ EuiButton.propTypes = {
   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]),
+  css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
   buttonRef: _propTypes.default.any
 };
 EuiButton.displayName = 'EuiButton';
@@ -362,6 +364,7 @@ EuiButtonDisplayDeprecated.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
@@ -369,6 +372,7 @@ EuiButtonDisplayDeprecated.propTypes = {
   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]),
+  css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
 
   /**
        * Provide a valid element to render the element as

package/test-env/components/button/button_display/_button_display.js

@@ -126,6 +126,7 @@ EuiButtonDisplay.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
@@ -134,6 +135,7 @@ EuiButtonDisplay.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Provide a valid element to render the element as

package/test-env/components/button/button_display/_button_display_content.js

@@ -97,6 +97,7 @@ EuiButtonDisplayContent.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
@@ -104,5 +105,6 @@ EuiButtonDisplayContent.propTypes = {
   isDisabled: _propTypes.default.bool.isRequired,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

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

@@ -219,11 +219,13 @@ EuiButtonEmpty.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
   iconSize: _propTypes.default.oneOf(["s", "m"]),
   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])
+  "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+  css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any])
 };

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

@@ -101,6 +101,7 @@ EuiButtonGroup.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Typical sizing is `s`. Medium `m` size should be reserved for major features.
@@ -186,13 +187,15 @@ EuiButtonGroup.propTypes = {
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any,
       ref: _propTypes.default.any,
       "data-text": _propTypes.default.string
     }),
     iconSize: _propTypes.default.oneOf(["s", "m"]),
     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])
+    "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+    css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any])
   }).isRequired).isRequired,
 
   /**

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

@@ -164,6 +164,7 @@ EuiButtonGroupButton.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     ref: _propTypes.default.any,
     "data-text": _propTypes.default.string
   }),
@@ -171,6 +172,7 @@ EuiButtonGroupButton.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Element to display based on single or multi

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

@@ -212,5 +212,6 @@ EuiButtonIcon.propTypes = {
   isLoading: _propTypes.default.bool,
   className: _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   buttonRef: _propTypes.default.any
 };