@elastic/eui 59.0.1 → 59.1.0-rc1

package/es/components/accessibility/skip_link/skip_link.js

@@ -1,4 +1,4 @@
-var _excluded = ["destinationId", "tabIndex", "position", "children", "className"];
+var _excluded = ["destinationId", "tabIndex", "position", "children", "className", "euiTheme"];
 
 function _extends() { _extends = Object.assign || 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); }
 
@@ -16,22 +16,22 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
 import { EuiButton } from '../../button/button';
+import { withEuiSystem } from '../../provider/system';
 import { EuiScreenReaderOnly } from '../screen_reader_only';
 import { euiSkipLinkStyles } from './skip_link.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var POSITIONS = ['static', 'fixed', 'absolute'];
-export var EuiSkipLink = function EuiSkipLink(_ref) {
+export var _EuiSkipLink = function _EuiSkipLink(_ref) {
   var destinationId = _ref.destinationId,
       tabIndex = _ref.tabIndex,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'static' : _ref$position,
       children = _ref.children,
       className = _ref.className,
+      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var euiTheme = useEuiTheme();
   var styles = euiSkipLinkStyles(euiTheme);
   var classes = classNames('euiSkipLink', className);
   var cssStyles = [styles.euiSkipLink, position !== 'static' ? styles[position] : undefined]; // Create the `href` from `destinationId`
@@ -54,7 +54,7 @@ export var EuiSkipLink = function EuiSkipLink(_ref) {
     fill: true
   }, optionalProps, rest), children));
 };
-EuiSkipLink.propTypes = {
+_EuiSkipLink.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
 
@@ -148,7 +148,8 @@ EuiSkipLink.propTypes = {
   iconSide: PropTypes.oneOf(["left", "right"]),
 
   /**
-     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     * 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.
      */
   textProps: PropTypes.shape({
     className: PropTypes.string,
@@ -162,4 +163,5 @@ EuiSkipLink.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   buttonRef: PropTypes.any
-};
+};
+export var EuiSkipLink = withEuiSystem(_EuiSkipLink);

package/es/components/avatar/avatar.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
+var _excluded = ["className", "color", "euiTheme", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
 
 function _extends() { _extends = Object.assign || 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); }
 
@@ -31,17 +31,19 @@ import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { isColorDark, hexToRgb, isValidHex } from '../../services/color';
-import { euiPaletteColorBlindBehindText, toInitials, useEuiTheme } from '../../services';
+import { withEuiSystem } from '../provider/system';
+import { euiPaletteColorBlindBehindText, toInitials } from '../../services';
 import { EuiIcon } from '../icon';
 import { euiAvatarStyles } from './avatar.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['s', 'm', 'l', 'xl'];
 export var TYPES = ['space', 'user'];
-export var EuiAvatar = function EuiAvatar(_ref) {
+export var _EuiAvatar = function _EuiAvatar(_ref) {
   var _classNames;
 
   var className = _ref.className,
       color = _ref.color,
+      euiTheme = _ref.euiTheme,
       imageUrl = _ref.imageUrl,
       initials = _ref.initials,
       initialsLength = _ref.initialsLength,
@@ -58,7 +60,6 @@ export var EuiAvatar = function EuiAvatar(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var euiTheme = useEuiTheme();
   var styles = euiAvatarStyles(euiTheme);
   var visColors = euiPaletteColorBlindBehindText();
   var isPlain = color === 'plain';
@@ -111,9 +112,8 @@ export var EuiAvatar = function EuiAvatar(_ref) {
     role: isDisabled ? 'presentation' : 'img',
     title: name
   }, rest), content);
-}; // TODO: Migrate to a service
-
-EuiAvatar.propTypes = {
+};
+_EuiAvatar.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
@@ -174,6 +174,8 @@ EuiAvatar.propTypes = {
        */
   isDisabled: PropTypes.bool
 };
+export var EuiAvatar = withEuiSystem(_EuiAvatar); // TODO: Migrate to a service
+
 export var checkValidColor = function checkValidColor(color) {
   var validHex = color && isValidHex(color) || color === 'plain' || color === 'subdued';
 

package/es/components/bottom_bar/bottom_bar.js

@@ -1,4 +1,4 @@
-var _excluded = ["position", "paddingSize", "affordForDisplacement", "children", "className", "bodyClassName", "landmarkHeading", "usePortal", "left", "right", "bottom", "top", "style"];
+var _excluded = ["position", "paddingSize", "affordForDisplacement", "children", "className", "bodyClassName", "landmarkHeading", "usePortal", "left", "right", "bottom", "top", "style", "euiTheme"];
 
 function _extends() { _extends = Object.assign || 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); }
 
@@ -34,13 +34,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React, { forwardRef, useEffect, useState } from 'react';
-import { useCombinedRefs, useEuiTheme } from '../../services';
+import { useCombinedRefs } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
-import { euiBottomBarStyles } from './bottom_bar.styles';
+import { withEuiSystem } from '../provider/system';
 import { EuiThemeProvider } from '../../services/theme/provider';
+import { euiBottomBarStyles } from './bottom_bar.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 // Exported for testing
 export var paddingSizeToClassNameMap = {
@@ -50,8 +51,7 @@ export var paddingSizeToClassNameMap = {
   l: 'euiBottomBar--paddingLarge'
 };
 export var POSITIONS = ['static', 'fixed', 'sticky'];
-
-var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'fixed' : _ref$position,
       _ref$paddingSize = _ref.paddingSize,
@@ -72,9 +72,9 @@ var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
       bottom = _ref$bottom === void 0 ? 0 : _ref$bottom,
       top = _ref.top,
       style = _ref.style,
+      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var euiTheme = useEuiTheme();
   var styles = euiBottomBarStyles(euiTheme); // Force some props if `fixed` position, but not if the user has supplied these
 
   affordForDisplacement = position !== 'fixed' ? false : affordForDisplacement;
@@ -148,7 +148,6 @@ var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   return usePortal ? ___EmotionJSX(EuiPortal, null, bar) : bar;
 });
-
 _EuiBottomBar.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
@@ -213,9 +212,9 @@ _EuiBottomBar.propTypes = {
   left: PropTypes.any
 };
 export var EuiBottomBar = /*#__PURE__*/forwardRef(function (props, ref) {
-  var BottomBar = _EuiBottomBar;
+  var BottomBar = withEuiSystem(_EuiBottomBar);
   return ___EmotionJSX(EuiThemeProvider, {
-    colorMode: 'dark'
+    colorMode: "dark"
   }, ___EmotionJSX(BottomBar, _extends({
     ref: ref
   }, props)));

package/es/components/breadcrumbs/breadcrumbs.js

@@ -184,7 +184,8 @@ export var EuiBreadcrumbs = function EuiBreadcrumbs(_ref) {
         }, linkProps, breadcrumbRest), text);
       }
 
-      return ___EmotionJSX(EuiLink, _extends({
+      return ___EmotionJSX(EuiLink // @ts-expect-error Ref forwarding type mismatch
+      , _extends({
         ref: ref,
         color: isLastBreadcrumb ? 'text' : 'subdued',
         onClick: onClick,

package/es/components/button/{button_content.js → _button_content_deprecated.js}

@@ -25,7 +25,7 @@ var iconSideToClassNameMap = {
   right: 'euiButtonContent--iconRight'
 };
 export var ICON_SIDES = keysOf(iconSideToClassNameMap);
-export var EuiButtonContent = function EuiButtonContent(_ref) {
+export var EuiButtonContentDeprecated = function EuiButtonContentDeprecated(_ref) {
   var children = _ref.children,
       textProps = _ref.textProps,
       _ref$isLoading = _ref.isLoading,
@@ -60,7 +60,7 @@ export var EuiButtonContent = function EuiButtonContent(_ref) {
     className: contentClassNames
   }), buttonIcon, ___EmotionJSX("span", textProps, children));
 };
-EuiButtonContent.propTypes = {
+EuiButtonContentDeprecated.propTypes = {
   /**
      * Any `type` accepted by EuiIcon
      */
@@ -73,7 +73,8 @@ EuiButtonContent.propTypes = {
   isLoading: PropTypes.bool,
 
   /**
-     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     * 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.
      */
   textProps: PropTypes.shape({
     className: PropTypes.string,

package/es/components/button/button.js

@@ -25,7 +25,7 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { keysOf } from '../common';
 import { getSecureRelForTarget } from '../../services';
-import { EuiButtonContent } from './button_content';
+import { EuiButtonContentDeprecated as EuiButtonContent } from './_button_content_deprecated';
 import { validateHref } from '../../services/security/href_validator';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var colorToClassNameMap = {
@@ -94,11 +94,13 @@ export var EuiButton = function EuiButton(_ref) {
     relObj.type = type;
   }
 
-  return ___EmotionJSX(EuiButtonDisplay, _extends({
-    element: element,
-    baseClassName: "euiButton",
-    ref: buttonRef
-  }, elementProps, relObj, rest));
+  return (// eslint-disable-next-line react/jsx-pascal-case
+    ___EmotionJSX(EuiButtonDisplayDeprecated, _extends({
+      element: element,
+      baseClassName: "euiButton",
+      ref: buttonRef
+    }, elementProps, relObj, rest))
+  );
 };
 EuiButton.propTypes = {
   href: PropTypes.string,
@@ -196,7 +198,8 @@ EuiButton.propTypes = {
   iconSide: PropTypes.oneOf(["left", "right"]),
 
   /**
-     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     * 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.
      */
   textProps: PropTypes.shape({
     className: PropTypes.string,
@@ -214,13 +217,16 @@ EuiButton.propTypes = {
 EuiButton.displayName = 'EuiButton';
 
 /**
+ * *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 EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+export var EuiButtonDisplayDeprecated = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref2$element = _ref2.element,
       element = _ref2$element === void 0 ? 'button' : _ref2$element,
       baseClassName = _ref2.baseClassName,
@@ -283,7 +289,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     ref: ref
   }, rest), innerNode);
 });
-EuiButtonDisplay.propTypes = {
+EuiButtonDisplayDeprecated.propTypes = {
   children: PropTypes.node,
 
   /**
@@ -356,4 +362,4 @@ EuiButtonDisplay.propTypes = {
        */
   baseClassName: PropTypes.string.isRequired
 };
-EuiButtonDisplay.displayName = 'EuiButtonDisplay';
+EuiButtonDisplayDeprecated.displayName = 'EuiButtonDisplay';

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

@@ -0,0 +1,141 @@
+var _excluded = ["element", "children", "iconType", "iconSide", "size", "isDisabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps"];
+
+function _extends() { _extends = Object.assign || 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 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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+/*
+ * 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 React, { forwardRef } from 'react'; // @ts-ignore module doesn't export `createElement`
+
+import PropTypes from "prop-types";
+import { createElement } from '@emotion/react';
+import { useEuiTheme } from '../../../services';
+import { euiButtonDisplayStyles } from './_button_display.styles';
+import { EuiButtonDisplayContent } from './_button_display_content';
+/**
+ * Extends EuiButtonDisplayContentProps which provides
+ * `iconType`, `iconSide`, and `textProps`
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+/**
+ * EuiButtonDisplay is an internal-only component used for displaying
+ * any element as a button.
+ */
+export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$element = _ref.element,
+      element = _ref$element === void 0 ? 'button' : _ref$element,
+      children = _ref.children,
+      iconType = _ref.iconType,
+      iconSide = _ref.iconSide,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      isLoading = _ref.isLoading,
+      isSelected = _ref.isSelected,
+      fullWidth = _ref.fullWidth,
+      minWidth = _ref.minWidth,
+      contentProps = _ref.contentProps,
+      textProps = _ref.textProps,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var buttonIsDisabled = isLoading || isDisabled;
+  var minWidthPx = minWidth === 'number' ? "".concat(minWidth, "px") : minWidth;
+  var theme = useEuiTheme();
+  var styles = euiButtonDisplayStyles(theme, minWidthPx);
+  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, isDisabled && styles.isDisabled];
+
+  var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
+    isLoading: isLoading,
+    isDisabled: buttonIsDisabled,
+    iconType: iconType,
+    iconSide: iconSide,
+    textProps: _objectSpread({}, textProps)
+  }, contentProps), children);
+
+  return createElement(element, _objectSpread({
+    css: cssStyles,
+    disabled: element === 'button' && buttonIsDisabled,
+    'aria-pressed': element === 'button' ? isSelected : undefined,
+    ref: ref
+  }, rest), innerNode);
+});
+EuiButtonDisplay.propTypes = {
+  children: PropTypes.node,
+  size: PropTypes.oneOf(["xs", "s", "m"]),
+
+  /**
+     * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+     * *Only use when the readable text does not change between states.*
+     */
+  isSelected: PropTypes.bool,
+
+  /**
+     * Extends the button to 100% width
+     */
+  fullWidth: PropTypes.bool,
+
+  /**
+     * Override the default minimum width
+     */
+  minWidth: PropTypes.any,
+
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+  isLoading: PropTypes.bool,
+
+  /**
+     * Object of props passed to the <span/> wrapping the button's content
+     */
+  contentProps: PropTypes.any,
+  style: PropTypes.any,
+
+  /**
+     * Any `type` accepted by EuiIcon
+     */
+  iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "codeApp", "color", "compute", "console", "consoleApp", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboardShortcut", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenClass", "tokenProperty", "tokenEnum", "tokenVariable", "tokenMethod", "tokenAnnotation", "tokenException", "tokenInterface", "tokenParameter", "tokenField", "tokenElement", "tokenFunction", "tokenBoolean", "tokenString", "tokenArray", "tokenNumber", "tokenConstant", "tokenObject", "tokenEvent", "tokenKey", "tokenNull", "tokenStruct", "tokenPackage", "tokenOperator", "tokenEnumMember", "tokenRepo", "tokenSymbol", "tokenFile", "tokenModule", "tokenNamespace", "tokenDate", "tokenIP", "tokenNested", "tokenAlias", "tokenShape", "tokenGeo", "tokenRange", "tokenBinary", "tokenJoin", "tokenPercolator", "tokenFlattened", "tokenRankFeature", "tokenRankFeatures", "tokenKeyword", "tokenTag", "tokenCompletionSuggester", "tokenDenseVector", "tokenText", "tokenTokenCount", "tokenSearchType", "tokenHistogram"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
+
+  /**
+     * Can only be one side `left` or `right`
+     */
+  iconSide: PropTypes.oneOf(["left", "right", undefined]),
+
+  /**
+     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     */
+  textProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    ref: PropTypes.any,
+    "data-text": PropTypes.string
+  }),
+  iconSize: PropTypes.oneOf(["s", "m"]),
+  isDisabled: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
+
+  /**
+       * Provide a valid element to render the element as
+       */
+  element: PropTypes.oneOf(["a", "button", "span", "label"])
+};
+EuiButtonDisplay.displayName = 'EuiButtonDisplay';

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

@@ -0,0 +1,53 @@
+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 { euiFontSize, logicalCSS, logicalTextAlignStyle } from '../../../global_styling'; // 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: "15xpz7k-fullWidth",
+  styles: "display:block;width:100%;label:fullWidth;"
+} : {
+  name: "15xpz7k-fullWidth",
+  styles: "display:block;width:100%;label:fullWidth;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "8595p9-isDisabled",
+  styles: "cursor:not-allowed;label:isDisabled;"
+} : {
+  name: "8595p9-isDisabled",
+  styles: "cursor:not-allowed;label:isDisabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext, minWidth) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";", minWidth && logicalCSS('min-width', minWidth), ";;label:euiButtonDisplay;"),
+    // States
+    isDisabled: _ref2,
+    fullWidth: _ref,
+    // 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;")
+  };
+};

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

@@ -0,0 +1,100 @@
+var _excluded = ["children", "textProps", "isLoading", "isDisabled", "iconType", "iconSize", "iconSide"];
+
+function _extends() { _extends = Object.assign || 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; }
+
+/*
+ * 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 React from 'react';
+import PropTypes from "prop-types";
+import { useEuiTheme } from '../../../services';
+import { EuiLoadingSpinner } from '../../loading';
+import { EuiIcon } from '../../icon';
+import { euiButtonDisplayContentStyles } from './_button_display_content.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
+  var children = _ref.children,
+      textProps = _ref.textProps,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      iconType = _ref.iconType,
+      _ref$iconSize = _ref.iconSize,
+      iconSize = _ref$iconSize === void 0 ? 'm' : _ref$iconSize,
+      iconSide = _ref.iconSide,
+      contentProps = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useEuiTheme();
+  var styles = euiButtonDisplayContentStyles(theme);
+  var cssStyles = [styles.euiButtonDisplayContent, iconSide && styles[iconSide], isDisabled && styles.isDisabled];
+  var cssSpinnerStyles = [styles.euiButtonDisplayContent__spinner];
+  var cssIconStyles = [styles.euiButtonDisplayContent__icon]; // Add an icon to the button if one exists.
+
+  var icon; // When the button is disabled the text gets gray
+  // and in some buttons the background gets a light gray
+  // 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;
+
+  if (isLoading) {
+    icon = ___EmotionJSX(EuiLoadingSpinner, {
+      css: cssSpinnerStyles,
+      size: iconSize,
+      color: loadingSpinnerColor
+    });
+  } else if (iconType) {
+    icon = ___EmotionJSX(EuiIcon, {
+      css: cssIconStyles,
+      type: iconType,
+      size: iconSize,
+      color: "inherit" // forces the icon to inherit its parent color
+
+    });
+  }
+
+  var isText = typeof children === 'string';
+  return ___EmotionJSX("span", _extends({}, contentProps, {
+    css: cssStyles
+  }), icon, isText ? ___EmotionJSX("span", textProps, children) : children);
+};
+EuiButtonDisplayContent.propTypes = {
+  /**
+     * Any `type` accepted by EuiIcon
+     */
+  iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "codeApp", "color", "compute", "console", "consoleApp", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboardShortcut", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenClass", "tokenProperty", "tokenEnum", "tokenVariable", "tokenMethod", "tokenAnnotation", "tokenException", "tokenInterface", "tokenParameter", "tokenField", "tokenElement", "tokenFunction", "tokenBoolean", "tokenString", "tokenArray", "tokenNumber", "tokenConstant", "tokenObject", "tokenEvent", "tokenKey", "tokenNull", "tokenStruct", "tokenPackage", "tokenOperator", "tokenEnumMember", "tokenRepo", "tokenSymbol", "tokenFile", "tokenModule", "tokenNamespace", "tokenDate", "tokenIP", "tokenNested", "tokenAlias", "tokenShape", "tokenGeo", "tokenRange", "tokenBinary", "tokenJoin", "tokenPercolator", "tokenFlattened", "tokenRankFeature", "tokenRankFeatures", "tokenKeyword", "tokenTag", "tokenCompletionSuggester", "tokenDenseVector", "tokenText", "tokenTokenCount", "tokenSearchType", "tokenHistogram"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
+
+  /**
+     * Can only be one side `left` or `right`
+     */
+  iconSide: PropTypes.oneOf(["left", "right", undefined]),
+  isLoading: PropTypes.bool,
+
+  /**
+     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     */
+  textProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    ref: PropTypes.any,
+    "data-text": PropTypes.string
+  }),
+  iconSize: PropTypes.oneOf(["s", "m"]),
+  isDisabled: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string
+};