@elastic/eui 70.2.1 → 70.2.3

package/es/components/button/button.js

@@ -212,6 +212,7 @@ export var EuiButtonDisplayDeprecated = /*#__PURE__*/forwardRef(function (_ref,
 
   if (minWidth !== undefined || minWidth !== null) {
     calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
+      // @ts-ignore - deprecated component
       minWidth: minWidth
     });
   }

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

@@ -74,7 +74,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, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
+  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
 
   var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
     isLoading: isLoading,
@@ -111,7 +111,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 
   return createElement(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
-    style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
       minInlineSize: minWidth
     }) : style,
     ref: ref
@@ -150,7 +150,7 @@ EuiButtonDisplay.propTypes = {
   /**
      * Override the default minimum width
      */
-  minWidth: PropTypes.any,
+  minWidth: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([false])]),
 
   /**
      * Force disables the button and changes the icon to a loading spinner

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

@@ -32,10 +32,11 @@ export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeCont
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", 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;"),

package/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -35,7 +35,6 @@ import { EuiButtonEmpty } from '../../../button';
 import { EuiIcon } from '../../../icon';
 import { EuiPopover } from '../../../popover';
 import { EuiTitle } from '../../../title';
-import { EuiSpacer } from '../../../spacer';
 import { EuiHorizontalRule } from '../../../horizontal_rule';
 import { EuiText } from '../../../text';
 import { EuiQuickSelect } from './quick_select';
@@ -146,9 +145,7 @@ export var EuiQuickSelectPopover = /*#__PURE__*/function (_Component) {
           margin: "s"
         }), ___EmotionJSX(EuiTitle, {
           size: "xxxs"
-        }, ___EmotionJSX("span", null, title)), ___EmotionJSX(EuiSpacer, {
-          size: "xs"
-        }), ___EmotionJSX(EuiText, {
+        }, ___EmotionJSX("span", null, title)), ___EmotionJSX(EuiText, {
           size: "s",
           className: "euiQuickSelectPopover__section"
         }, /*#__PURE__*/React.cloneElement(content, {

package/es/components/date_picker/super_date_picker/quick_select_popover/recently_used.js

@@ -37,7 +37,7 @@ export var EuiRecentlyUsed = function EuiRecentlyUsed(_ref) {
     };
 
     return ___EmotionJSX("li", {
-      className: "euiQuickSelectPopover__sectionItem",
+      className: "euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed",
       key: "".concat(start, "-").concat(end)
     }, ___EmotionJSX(EuiLink, {
       onClick: applyRecentlyUsed

package/es/components/date_picker/super_date_picker/super_update_button.js

@@ -181,7 +181,7 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
         sizes: responsive || 'none'
       }, ___EmotionJSX(EuiButton, _extends({
         className: classes,
-        minWidth: 0
+        minWidth: false
       }, sharedButtonProps, {
         fill: fill,
         textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {

package/es/components/facet/facet_button.js

@@ -105,7 +105,7 @@ EuiFacetButton.propTypes = {
   /**
      * ReactNode to render as this component's content
      */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.node]),
 
   /**
      * Any node, but preferably a `EuiIcon` or `EuiAvatar`
@@ -113,11 +113,20 @@ EuiFacetButton.propTypes = {
   icon: PropTypes.node,
   isDisabled: PropTypes.bool,
 
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+
   /**
      * Adds/swaps for loading spinner & disables
      */
   isLoading: PropTypes.bool,
 
+  /**
+     * 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.*
+     */
+
   /**
      * Changes visual of button to indicate it's currently selected
      */
@@ -127,6 +136,51 @@ EuiFacetButton.propTypes = {
      * Adds a notification indicator for displaying the quantity provided
      */
   quantity: PropTypes.number,
+  size: PropTypes.any,
+
+  /**
+     * Extends the button to 100% width
+     */
+  fullWidth: PropTypes.bool,
+
+  /**
+     * Override the default minimum width
+     */
+  minWidth: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([false])]),
+
+  /**
+     * Object of props passed to the <span/> wrapping the button's content
+     */
+  contentProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: 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", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "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", "filterExclude", "filterIgnore", "filterInclude", "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", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "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", "namespace", "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", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "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", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
+
+  /**
+     * Can only be one side `left` or `right`
+     */
+  iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([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,
+    css: PropTypes.any,
+    ref: PropTypes.any,
+    "data-text": PropTypes.string
+  }),
+  iconSize: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/global_styling/mixins/_helpers.js

@@ -55,7 +55,7 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
 
   var direction = _direction || 'y';
   var side = _side || 'both';
-  var hideHeight = "calc(".concat(size.base, " * 0.75 * 1.25)");
+  var hideHeight = size.s;
   var gradientStart = "\n  ".concat(transparentize('red', 0.1), " 0%,\n  ").concat(transparentize('red', 1), " ").concat(hideHeight, "\n  ");
   var gradientEnd = "\n  ".concat(transparentize('red', 1), " calc(100% - ").concat(hideHeight, "),\n  ").concat(transparentize('red', 0.1), " 100%\n  ");
   var gradient = '';

package/eui.d.ts

@@ -1901,6 +1901,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	    euiButtonDisplay: import("@emotion/utils").SerializedStyles;
 	    isDisabled: import("@emotion/utils").SerializedStyles;
 	    fullWidth: import("@emotion/utils").SerializedStyles;
+	    defaultMinWidth: import("@emotion/utils").SerializedStyles;
 	    xs: import("@emotion/utils").SerializedStyles;
 	    s: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
@@ -2052,7 +2053,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	    /**
 	     * Override the default minimum width
 	     */
-	    minWidth?: CSSProperties['minWidth'];
+	    minWidth?: CSSProperties['minWidth'] | false;
 	    /**
 	     * Force disables the button and changes the icon to a loading spinner
 	     */
@@ -14442,8 +14443,8 @@ declare module '@elastic/eui/src/components/facet/facet_button.styles' {
 }
 declare module '@elastic/eui/src/components/facet/facet_button' {
 	import { FunctionComponent, HTMLAttributes, ReactNode, RefCallback } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	export interface EuiFacetButtonProps extends CommonProps, HTMLAttributes<HTMLButtonElement> {
+	import { EuiButtonDisplayCommonProps } from '@elastic/eui/src/components/button/button_display/_button_display';
+	export interface EuiFacetButtonProps extends EuiButtonDisplayCommonProps, HTMLAttributes<HTMLButtonElement> {
 	    buttonRef?: RefCallback<HTMLButtonElement>;
 	    /**
 	     * ReactNode to render as this component's content

package/lib/components/button/button.js

@@ -231,6 +231,7 @@ var EuiButtonDisplayDeprecated = /*#__PURE__*/(0, _react.forwardRef)(function (_
 
   if (minWidth !== undefined || minWidth !== null) {
     calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
+      // @ts-ignore - deprecated component
       minWidth: minWidth
     });
   }

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

@@ -91,7 +91,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
   var buttonRadiusStyle = (0, _mixins.useEuiButtonRadiusCSS)()[size];
-  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
+  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, _extends({
     isLoading: isLoading,
     isDisabled: buttonIsDisabled,
@@ -126,7 +126,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
 
   return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
-    style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
       minInlineSize: minWidth
     }) : style,
     ref: ref
@@ -166,7 +166,7 @@ EuiButtonDisplay.propTypes = {
   /**
      * Override the default minimum width
      */
-  minWidth: _propTypes.default.any,
+  minWidth: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([false])]),
 
   /**
      * Force disables the button and changes the icon to a loading spinner

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

@@ -36,10 +36,11 @@ var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
+    defaultMinWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
     // Sizes
     xs: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.l), (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";label:xs;"),
     s: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.xl), (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";label:s;"),

package/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -19,8 +19,6 @@ var _popover = require("../../../popover");
 
 var _title = require("../../../title");
 
-var _spacer = require("../../../spacer");
-
 var _horizontal_rule = require("../../../horizontal_rule");
 
 var _text = require("../../../text");
@@ -166,9 +164,7 @@ var EuiQuickSelectPopover = /*#__PURE__*/function (_Component) {
           margin: "s"
         }), (0, _react2.jsx)(_title.EuiTitle, {
           size: "xxxs"
-        }, (0, _react2.jsx)("span", null, title)), (0, _react2.jsx)(_spacer.EuiSpacer, {
-          size: "xs"
-        }), (0, _react2.jsx)(_text.EuiText, {
+        }, (0, _react2.jsx)("span", null, title)), (0, _react2.jsx)(_text.EuiText, {
           size: "s",
           className: "euiQuickSelectPopover__section"
         }, /*#__PURE__*/_react.default.cloneElement(content, {

package/lib/components/date_picker/super_date_picker/quick_select_popover/recently_used.js

@@ -54,7 +54,7 @@ var EuiRecentlyUsed = function EuiRecentlyUsed(_ref) {
     };
 
     return (0, _react2.jsx)("li", {
-      className: "euiQuickSelectPopover__sectionItem",
+      className: "euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed",
       key: "".concat(start, "-").concat(end)
     }, (0, _react2.jsx)(_link.EuiLink, {
       onClick: applyRecentlyUsed

package/lib/components/date_picker/super_date_picker/super_update_button.js

@@ -194,7 +194,7 @@ var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
         sizes: responsive || 'none'
       }, (0, _react2.jsx)(_button.EuiButton, _extends({
         className: classes,
-        minWidth: 0
+        minWidth: false
       }, sharedButtonProps, {
         fill: fill,
         textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {

package/lib/components/facet/facet_button.js

@@ -120,19 +120,28 @@ EuiFacetButton.propTypes = {
   /**
      * ReactNode to render as this component's content
      */
-  children: _propTypes.default.node.isRequired,
+  children: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.node]),
 
   /**
      * Any node, but preferably a `EuiIcon` or `EuiAvatar`
      */
   icon: _propTypes.default.node,
-  isDisabled: _propTypes.default.bool,
+  isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool]),
+
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
 
   /**
      * Adds/swaps for loading spinner & disables
      */
   isLoading: _propTypes.default.bool,
 
+  /**
+     * 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.*
+     */
+
   /**
      * Changes visual of button to indicate it's currently selected
      */
@@ -142,6 +151,51 @@ EuiFacetButton.propTypes = {
      * Adds a notification indicator for displaying the quantity provided
      */
   quantity: _propTypes.default.number,
+  size: _propTypes.default.any,
+
+  /**
+     * Extends the button to 100% width
+     */
+  fullWidth: _propTypes.default.bool,
+
+  /**
+     * Override the default minimum width
+     */
+  minWidth: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([false])]),
+
+  /**
+     * Object of props passed to the <span/> wrapping the button's content
+     */
+  contentProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
+  style: _propTypes.default.any,
+
+  /**
+     * Any `type` accepted by EuiIcon
+     */
+  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "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", "filterExclude", "filterIgnore", "filterInclude", "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", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "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", "namespace", "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", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "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", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
+
+  /**
+     * Can only be one side `left` or `right`
+     */
+  iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
+
+  /**
+     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+     */
+  textProps: _propTypes.default.shape({
+    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.any,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/lib/global_styling/mixins/_helpers.js

@@ -66,7 +66,7 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
 
   var direction = _direction || 'y';
   var side = _side || 'both';
-  var hideHeight = "calc(".concat(size.base, " * 0.75 * 1.25)");
+  var hideHeight = size.s;
   var gradientStart = "\n  ".concat((0, _color.transparentize)('red', 0.1), " 0%,\n  ").concat((0, _color.transparentize)('red', 1), " ").concat(hideHeight, "\n  ");
   var gradientEnd = "\n  ".concat((0, _color.transparentize)('red', 1), " calc(100% - ").concat(hideHeight, "),\n  ").concat((0, _color.transparentize)('red', 0.1), " 100%\n  ");
   var gradient = '';

package/optimize/es/components/button/button.js

@@ -146,6 +146,7 @@ export var EuiButtonDisplayDeprecated = /*#__PURE__*/forwardRef(function (_ref,
 
   if (minWidth !== undefined || minWidth !== null) {
     calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
+      // @ts-ignore - deprecated component
       minWidth: minWidth
     });
   }

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

@@ -68,7 +68,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, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
+  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
 
   var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
     isLoading: isLoading,
@@ -105,7 +105,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 
   return createElement(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
-    style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
       minInlineSize: minWidth
     }) : style,
     ref: ref

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

@@ -32,10 +32,11 @@ export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeCont
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", 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;"),

package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -22,7 +22,6 @@ import { EuiButtonEmpty } from '../../../button';
 import { EuiIcon } from '../../../icon';
 import { EuiPopover } from '../../../popover';
 import { EuiTitle } from '../../../title';
-import { EuiSpacer } from '../../../spacer';
 import { EuiHorizontalRule } from '../../../horizontal_rule';
 import { EuiText } from '../../../text';
 import { EuiQuickSelect } from './quick_select';
@@ -133,9 +132,7 @@ export var EuiQuickSelectPopover = /*#__PURE__*/function (_Component) {
           margin: "s"
         }), ___EmotionJSX(EuiTitle, {
           size: "xxxs"
-        }, ___EmotionJSX("span", null, title)), ___EmotionJSX(EuiSpacer, {
-          size: "xs"
-        }), ___EmotionJSX(EuiText, {
+        }, ___EmotionJSX("span", null, title)), ___EmotionJSX(EuiText, {
           size: "s",
           className: "euiQuickSelectPopover__section"
         }, /*#__PURE__*/React.cloneElement(content, {

package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/recently_used.js

@@ -36,7 +36,7 @@ export var EuiRecentlyUsed = function EuiRecentlyUsed(_ref) {
     };
 
     return ___EmotionJSX("li", {
-      className: "euiQuickSelectPopover__sectionItem",
+      className: "euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed",
       key: "".concat(start, "-").concat(end)
     }, ___EmotionJSX(EuiLink, {
       onClick: applyRecentlyUsed

package/optimize/es/components/date_picker/super_date_picker/super_update_button.js

@@ -163,7 +163,7 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
         sizes: responsive || 'none'
       }, ___EmotionJSX(EuiButton, _extends({
         className: classes,
-        minWidth: 0
+        minWidth: false
       }, sharedButtonProps, {
         fill: fill,
         textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {

package/optimize/es/global_styling/mixins/_helpers.js

@@ -55,7 +55,7 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
 
   var direction = _direction || 'y';
   var side = _side || 'both';
-  var hideHeight = "calc(".concat(size.base, " * 0.75 * 1.25)");
+  var hideHeight = size.s;
   var gradientStart = "\n  ".concat(transparentize('red', 0.1), " 0%,\n  ").concat(transparentize('red', 1), " ").concat(hideHeight, "\n  ");
   var gradientEnd = "\n  ".concat(transparentize('red', 1), " calc(100% - ").concat(hideHeight, "),\n  ").concat(transparentize('red', 0.1), " 100%\n  ");
   var gradient = '';

package/optimize/lib/components/button/button.js

@@ -168,6 +168,7 @@ var EuiButtonDisplayDeprecated = /*#__PURE__*/(0, _react.forwardRef)(function (_
 
   if (minWidth !== undefined || minWidth !== null) {
     calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
+      // @ts-ignore - deprecated component
       minWidth: minWidth
     });
   }

package/optimize/lib/components/button/button_display/_button_display.js

@@ -86,7 +86,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
   var buttonRadiusStyle = (0, _mixins.useEuiButtonRadiusCSS)()[size];
-  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
+  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, (0, _extends2.default)({
     isLoading: isLoading,
     isDisabled: buttonIsDisabled,
@@ -121,7 +121,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
 
   return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
-    style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
       minInlineSize: minWidth
     }) : style,
     ref: ref

package/optimize/lib/components/button/button_display/_button_display.styles.js

@@ -36,10 +36,11 @@ var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
+    defaultMinWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
     // Sizes
     xs: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.l), (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";label:xs;"),
     s: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.xl), (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";label:s;"),

package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -33,8 +33,6 @@ var _popover = require("../../../popover");
 
 var _title = require("../../../title");
 
-var _spacer = require("../../../spacer");
-
 var _horizontal_rule = require("../../../horizontal_rule");
 
 var _text = require("../../../text");
@@ -154,9 +152,7 @@ var EuiQuickSelectPopover = /*#__PURE__*/function (_Component) {
           margin: "s"
         }), (0, _react2.jsx)(_title.EuiTitle, {
           size: "xxxs"
-        }, (0, _react2.jsx)("span", null, title)), (0, _react2.jsx)(_spacer.EuiSpacer, {
-          size: "xs"
-        }), (0, _react2.jsx)(_text.EuiText, {
+        }, (0, _react2.jsx)("span", null, title)), (0, _react2.jsx)(_text.EuiText, {
           size: "s",
           className: "euiQuickSelectPopover__section"
         }, /*#__PURE__*/_react.default.cloneElement(content, {

package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/recently_used.js

@@ -52,7 +52,7 @@ var EuiRecentlyUsed = function EuiRecentlyUsed(_ref) {
     };
 
     return (0, _react2.jsx)("li", {
-      className: "euiQuickSelectPopover__sectionItem",
+      className: "euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed",
       key: "".concat(start, "-").concat(end)
     }, (0, _react2.jsx)(_link.EuiLink, {
       onClick: applyRecentlyUsed

package/optimize/lib/components/date_picker/super_date_picker/super_update_button.js

@@ -178,7 +178,7 @@ var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
         sizes: responsive || 'none'
       }, (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
         className: classes,
-        minWidth: 0
+        minWidth: false
       }, sharedButtonProps, {
         fill: fill,
         textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {