@elastic/eui 70.2.1 → 70.2.3

package/optimize/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "70.2.1",
+  "version": "70.2.3",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/components/date_picker/super_date_picker/_super_date_picker.scss

@@ -1,15 +1,17 @@
 // sass-lint:disable-block function-name-format
 
 .euiSuperDatePicker__flexWrapper {
-  // Need to offset 8px because of negative margins added by small size gutter
-  max-width: calc(100% + #{$euiSizeS});
+  max-width: 100%;
   // Set a sensible min-width for when width is auto
   min-width: MIN(($euiFormMaxWidth / 2) + $euiSuperDatePickerButtonWidth + $euiSizeS, 100%);
   width: $euiSuperDatePickerWidth + $euiSuperDatePickerButtonWidth + $euiSizeS;
 
+  @include euiBreakpoint('xs', 's') {
+    width: 100%;
+  }
+
   &.euiSuperDatePicker__flexWrapper--fullWidth {
-    // Need to offset 8px because of negative margins added by small size gutter
-    width: calc(100% + #{$euiSizeS});
+    width: 100%;
   }
 
   &.euiSuperDatePicker__flexWrapper--isQuickSelectOnly {
@@ -76,9 +78,3 @@
     cursor: not-allowed;
   }
 }
-
-@include euiBreakpoint('xs', 's') {
-  .euiSuperDatePicker__flexWrapper {
-    width: calc(100% + #{$euiSizeS});
-  }
-}

package/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -8,7 +8,7 @@
   max-height: $euiSizeM * 11;
   overflow: hidden;
   overflow-y: auto;
-  padding: $euiSizeS 0 $euiSizeXS; // Offset negative margin from flex items
+  margin: $euiSizeS 0 0;
 }
 
 // sass-lint:disable no-important
@@ -25,7 +25,9 @@
   font-size: $euiFontSizeS;
   line-height: $euiFontSizeS;
 
-  &:not(:last-of-type) {
-    margin-bottom: $euiSizeS;
+  &--recentlyUsed {
+    &:not(:last-of-type) {
+      margin-bottom: $euiSizeS;
+    }
   }
 }

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

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

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

@@ -88,7 +88,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,
@@ -123,7 +123,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
@@ -163,7 +163,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/test-env/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/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -35,8 +35,6 @@ var _popover = require("../../../popover");
 
 var _title = require("../../../title");
 
-var _spacer = require("../../../spacer");
-
 var _horizontal_rule = require("../../../horizontal_rule");
 
 var _text = require("../../../text");
@@ -156,9 +154,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/test-env/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/test-env/components/date_picker/super_date_picker/super_update_button.js

@@ -180,7 +180,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), {}, {

package/test-env/components/facet/facet_button.js

@@ -117,19 +117,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
      */
@@ -139,6 +148,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/test-env/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 = '';