@elastic/eui 70.2.0 → 70.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/es/components/button/button.js +1 -0
  2. package/es/components/button/button_display/_button_display.js +3 -3
  3. package/es/components/button/button_display/_button_display.styles.js +2 -1
  4. package/es/components/date_picker/super_date_picker/super_update_button.js +1 -1
  5. package/es/components/facet/facet_button.js +55 -1
  6. package/es/components/page/page_section/page_section.js +3 -4
  7. package/es/components/tabs/tab.js +2 -1
  8. package/es/global_styling/mixins/_helpers.js +1 -1
  9. package/eui.d.ts +4 -3
  10. package/lib/components/button/button.js +1 -0
  11. package/lib/components/button/button_display/_button_display.js +3 -3
  12. package/lib/components/button/button_display/_button_display.styles.js +2 -1
  13. package/lib/components/date_picker/super_date_picker/super_update_button.js +1 -1
  14. package/lib/components/facet/facet_button.js +56 -2
  15. package/lib/components/page/page_section/page_section.js +3 -4
  16. package/lib/components/tabs/tab.js +2 -1
  17. package/lib/global_styling/mixins/_helpers.js +1 -1
  18. package/optimize/es/components/button/button.js +1 -0
  19. package/optimize/es/components/button/button_display/_button_display.js +2 -2
  20. package/optimize/es/components/button/button_display/_button_display.styles.js +2 -1
  21. package/optimize/es/components/date_picker/super_date_picker/super_update_button.js +1 -1
  22. package/optimize/es/components/page/page_section/page_section.js +3 -4
  23. package/optimize/es/components/tabs/tab.js +2 -1
  24. package/optimize/es/global_styling/mixins/_helpers.js +1 -1
  25. package/optimize/lib/components/button/button.js +1 -0
  26. package/optimize/lib/components/button/button_display/_button_display.js +2 -2
  27. package/optimize/lib/components/button/button_display/_button_display.styles.js +2 -1
  28. package/optimize/lib/components/date_picker/super_date_picker/super_update_button.js +1 -1
  29. package/optimize/lib/components/page/page_section/page_section.js +3 -4
  30. package/optimize/lib/components/tabs/tab.js +2 -1
  31. package/optimize/lib/global_styling/mixins/_helpers.js +1 -1
  32. package/package.json +1 -1
  33. package/test-env/components/button/button.js +1 -0
  34. package/test-env/components/button/button_display/_button_display.js +3 -3
  35. package/test-env/components/button/button_display/_button_display.styles.js +2 -1
  36. package/test-env/components/date_picker/super_date_picker/super_update_button.js +1 -1
  37. package/test-env/components/facet/facet_button.js +56 -2
  38. package/test-env/components/page/page_section/page_section.js +3 -4
  39. package/test-env/components/tabs/tab.js +2 -1
  40. package/test-env/global_styling/mixins/_helpers.js +1 -1
@@ -212,6 +212,7 @@ export var EuiButtonDisplayDeprecated = /*#__PURE__*/forwardRef(function (_ref,
212
212
 
213
213
  if (minWidth !== undefined || minWidth !== null) {
214
214
  calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
215
+ // @ts-ignore - deprecated component
215
216
  minWidth: minWidth
216
217
  });
217
218
  }
@@ -74,7 +74,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
74
74
  var theme = useEuiTheme();
75
75
  var styles = euiButtonDisplayStyles(theme);
76
76
  var buttonRadiusStyle = useEuiButtonRadiusCSS()[size];
77
- var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
77
+ var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
78
78
 
79
79
  var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
80
80
  isLoading: isLoading,
@@ -111,7 +111,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
111
111
 
112
112
  return createElement(element, _objectSpread(_objectSpread(_objectSpread({
113
113
  css: cssStyles,
114
- style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
114
+ style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
115
115
  minInlineSize: minWidth
116
116
  }) : style,
117
117
  ref: ref
@@ -150,7 +150,7 @@ EuiButtonDisplay.propTypes = {
150
150
  /**
151
151
  * Override the default minimum width
152
152
  */
153
- minWidth: PropTypes.any,
153
+ minWidth: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([false])]),
154
154
 
155
155
  /**
156
156
  * Force disables the button and changes the icon to a loading spinner
@@ -32,10 +32,11 @@ export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeCont
32
32
  var euiTheme = euiThemeContext.euiTheme;
33
33
  return {
34
34
  // Base
35
- 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;"),
35
+ euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
36
36
  // States
37
37
  isDisabled: _ref,
38
38
  fullWidth: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), ";;label:fullWidth;"),
39
+ defaultMinWidth: /*#__PURE__*/css(logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
39
40
  // Sizes
40
41
  xs: /*#__PURE__*/css(_buttonSize(euiTheme.size.l), euiFontSize(euiThemeContext, 'xs'), ";label:xs;"),
41
42
  s: /*#__PURE__*/css(_buttonSize(euiTheme.size.xl), euiFontSize(euiThemeContext, 's'), ";label:s;"),
@@ -181,7 +181,7 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
181
181
  sizes: responsive || 'none'
182
182
  }, ___EmotionJSX(EuiButton, _extends({
183
183
  className: classes,
184
- minWidth: 0
184
+ minWidth: false
185
185
  }, sharedButtonProps, {
186
186
  fill: fill,
187
187
  textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {
@@ -105,7 +105,7 @@ EuiFacetButton.propTypes = {
105
105
  /**
106
106
  * ReactNode to render as this component's content
107
107
  */
108
- children: PropTypes.node.isRequired,
108
+ children: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.node]),
109
109
 
110
110
  /**
111
111
  * Any node, but preferably a `EuiIcon` or `EuiAvatar`
@@ -113,11 +113,20 @@ EuiFacetButton.propTypes = {
113
113
  icon: PropTypes.node,
114
114
  isDisabled: PropTypes.bool,
115
115
 
116
+ /**
117
+ * Force disables the button and changes the icon to a loading spinner
118
+ */
119
+
116
120
  /**
117
121
  * Adds/swaps for loading spinner & disables
118
122
  */
119
123
  isLoading: PropTypes.bool,
120
124
 
125
+ /**
126
+ * Applies the boolean state as the `aria-pressed` property to create a toggle button.
127
+ * *Only use when the readable text does not change between states.*
128
+ */
129
+
121
130
  /**
122
131
  * Changes visual of button to indicate it's currently selected
123
132
  */
@@ -127,6 +136,51 @@ EuiFacetButton.propTypes = {
127
136
  * Adds a notification indicator for displaying the quantity provided
128
137
  */
129
138
  quantity: PropTypes.number,
139
+ size: PropTypes.any,
140
+
141
+ /**
142
+ * Extends the button to 100% width
143
+ */
144
+ fullWidth: PropTypes.bool,
145
+
146
+ /**
147
+ * Override the default minimum width
148
+ */
149
+ minWidth: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([false])]),
150
+
151
+ /**
152
+ * Object of props passed to the <span/> wrapping the button's content
153
+ */
154
+ contentProps: PropTypes.shape({
155
+ className: PropTypes.string,
156
+ "aria-label": PropTypes.string,
157
+ "data-test-subj": PropTypes.string,
158
+ css: PropTypes.any
159
+ }),
160
+ style: PropTypes.any,
161
+
162
+ /**
163
+ * Any `type` accepted by EuiIcon
164
+ */
165
+ 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]),
166
+
167
+ /**
168
+ * Can only be one side `left` or `right`
169
+ */
170
+ iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([undefined])]),
171
+
172
+ /**
173
+ * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
174
+ */
175
+ textProps: PropTypes.shape({
176
+ className: PropTypes.string,
177
+ "aria-label": PropTypes.string,
178
+ "data-test-subj": PropTypes.string,
179
+ css: PropTypes.any,
180
+ ref: PropTypes.any,
181
+ "data-text": PropTypes.string
182
+ }),
183
+ iconSize: PropTypes.any,
130
184
  className: PropTypes.string,
131
185
  "aria-label": PropTypes.string,
132
186
  "data-test-subj": PropTypes.string,
@@ -47,12 +47,11 @@ export var EuiPageSection = function EuiPageSection(_ref) {
47
47
  var colors = useEuiBackgroundColorCSS();
48
48
  var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
49
49
  var contentStyles = euiPageSectionContentStyles();
50
- var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
50
+ var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
51
51
  return ___EmotionJSX(Component, _extends({
52
52
  css: cssStyles
53
- }, rest), ___EmotionJSX("div", _extends({
54
- css: cssContentStyles
55
- }, contentProps, {
53
+ }, rest), ___EmotionJSX("div", _extends({}, contentProps, {
54
+ css: cssContentStyles,
56
55
  style: widthStyles
57
56
  }), children));
58
57
  };
@@ -30,7 +30,8 @@ export var EuiTab = function EuiTab(_ref) {
30
30
  rel = _ref.rel,
31
31
  prepend = _ref.prepend,
32
32
  append = _ref.append,
33
- size = _ref.size,
33
+ _ref$size = _ref.size,
34
+ size = _ref$size === void 0 ? 'm' : _ref$size,
34
35
  expand = _ref.expand,
35
36
  rest = _objectWithoutProperties(_ref, _excluded);
36
37
 
@@ -55,7 +55,7 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
55
55
 
56
56
  var direction = _direction || 'y';
57
57
  var side = _side || 'both';
58
- var hideHeight = "calc(".concat(size.base, " * 0.75 * 1.25)");
58
+ var hideHeight = size.s;
59
59
  var gradientStart = "\n ".concat(transparentize('red', 0.1), " 0%,\n ").concat(transparentize('red', 1), " ").concat(hideHeight, "\n ");
60
60
  var gradientEnd = "\n ".concat(transparentize('red', 1), " calc(100% - ").concat(hideHeight, "),\n ").concat(transparentize('red', 0.1), " 100%\n ");
61
61
  var gradient = '';
package/eui.d.ts CHANGED
@@ -1901,6 +1901,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
1901
1901
  euiButtonDisplay: import("@emotion/utils").SerializedStyles;
1902
1902
  isDisabled: import("@emotion/utils").SerializedStyles;
1903
1903
  fullWidth: import("@emotion/utils").SerializedStyles;
1904
+ defaultMinWidth: import("@emotion/utils").SerializedStyles;
1904
1905
  xs: import("@emotion/utils").SerializedStyles;
1905
1906
  s: import("@emotion/utils").SerializedStyles;
1906
1907
  m: import("@emotion/utils").SerializedStyles;
@@ -2052,7 +2053,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
2052
2053
  /**
2053
2054
  * Override the default minimum width
2054
2055
  */
2055
- minWidth?: CSSProperties['minWidth'];
2056
+ minWidth?: CSSProperties['minWidth'] | false;
2056
2057
  /**
2057
2058
  * Force disables the button and changes the icon to a loading spinner
2058
2059
  */
@@ -14442,8 +14443,8 @@ declare module '@elastic/eui/src/components/facet/facet_button.styles' {
14442
14443
  }
14443
14444
  declare module '@elastic/eui/src/components/facet/facet_button' {
14444
14445
  import { FunctionComponent, HTMLAttributes, ReactNode, RefCallback } from 'react';
14445
- import { CommonProps } from '@elastic/eui/src/components/common';
14446
- export interface EuiFacetButtonProps extends CommonProps, HTMLAttributes<HTMLButtonElement> {
14446
+ import { EuiButtonDisplayCommonProps } from '@elastic/eui/src/components/button/button_display/_button_display';
14447
+ export interface EuiFacetButtonProps extends EuiButtonDisplayCommonProps, HTMLAttributes<HTMLButtonElement> {
14447
14448
  buttonRef?: RefCallback<HTMLButtonElement>;
14448
14449
  /**
14449
14450
  * ReactNode to render as this component's content
@@ -231,6 +231,7 @@ var EuiButtonDisplayDeprecated = /*#__PURE__*/(0, _react.forwardRef)(function (_
231
231
 
232
232
  if (minWidth !== undefined || minWidth !== null) {
233
233
  calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
234
+ // @ts-ignore - deprecated component
234
235
  minWidth: minWidth
235
236
  });
236
237
  }
@@ -91,7 +91,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
91
91
  var theme = (0, _services.useEuiTheme)();
92
92
  var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
93
93
  var buttonRadiusStyle = (0, _mixins.useEuiButtonRadiusCSS)()[size];
94
- var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
94
+ var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
95
95
  var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, _extends({
96
96
  isLoading: isLoading,
97
97
  isDisabled: buttonIsDisabled,
@@ -126,7 +126,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
126
126
 
127
127
  return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
128
128
  css: cssStyles,
129
- style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
129
+ style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
130
130
  minInlineSize: minWidth
131
131
  }) : style,
132
132
  ref: ref
@@ -166,7 +166,7 @@ EuiButtonDisplay.propTypes = {
166
166
  /**
167
167
  * Override the default minimum width
168
168
  */
169
- minWidth: _propTypes.default.any,
169
+ minWidth: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([false])]),
170
170
 
171
171
  /**
172
172
  * Force disables the button and changes the icon to a loading spinner
@@ -36,10 +36,11 @@ var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
36
36
  var euiTheme = euiThemeContext.euiTheme;
37
37
  return {
38
38
  // Base
39
- 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;"),
39
+ 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;"),
40
40
  // States
41
41
  isDisabled: _ref,
42
42
  fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
43
+ defaultMinWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
43
44
  // Sizes
44
45
  xs: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.l), (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";label:xs;"),
45
46
  s: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.xl), (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";label:s;"),
@@ -194,7 +194,7 @@ var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
194
194
  sizes: responsive || 'none'
195
195
  }, (0, _react2.jsx)(_button.EuiButton, _extends({
196
196
  className: classes,
197
- minWidth: 0
197
+ minWidth: false
198
198
  }, sharedButtonProps, {
199
199
  fill: fill,
200
200
  textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {
@@ -120,19 +120,28 @@ EuiFacetButton.propTypes = {
120
120
  /**
121
121
  * ReactNode to render as this component's content
122
122
  */
123
- children: _propTypes.default.node.isRequired,
123
+ children: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.node]),
124
124
 
125
125
  /**
126
126
  * Any node, but preferably a `EuiIcon` or `EuiAvatar`
127
127
  */
128
128
  icon: _propTypes.default.node,
129
- isDisabled: _propTypes.default.bool,
129
+ isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool]),
130
+
131
+ /**
132
+ * Force disables the button and changes the icon to a loading spinner
133
+ */
130
134
 
131
135
  /**
132
136
  * Adds/swaps for loading spinner & disables
133
137
  */
134
138
  isLoading: _propTypes.default.bool,
135
139
 
140
+ /**
141
+ * Applies the boolean state as the `aria-pressed` property to create a toggle button.
142
+ * *Only use when the readable text does not change between states.*
143
+ */
144
+
136
145
  /**
137
146
  * Changes visual of button to indicate it's currently selected
138
147
  */
@@ -142,6 +151,51 @@ EuiFacetButton.propTypes = {
142
151
  * Adds a notification indicator for displaying the quantity provided
143
152
  */
144
153
  quantity: _propTypes.default.number,
154
+ size: _propTypes.default.any,
155
+
156
+ /**
157
+ * Extends the button to 100% width
158
+ */
159
+ fullWidth: _propTypes.default.bool,
160
+
161
+ /**
162
+ * Override the default minimum width
163
+ */
164
+ minWidth: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([false])]),
165
+
166
+ /**
167
+ * Object of props passed to the <span/> wrapping the button's content
168
+ */
169
+ contentProps: _propTypes.default.shape({
170
+ className: _propTypes.default.string,
171
+ "aria-label": _propTypes.default.string,
172
+ "data-test-subj": _propTypes.default.string,
173
+ css: _propTypes.default.any
174
+ }),
175
+ style: _propTypes.default.any,
176
+
177
+ /**
178
+ * Any `type` accepted by EuiIcon
179
+ */
180
+ 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]),
181
+
182
+ /**
183
+ * Can only be one side `left` or `right`
184
+ */
185
+ iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
186
+
187
+ /**
188
+ * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
189
+ */
190
+ textProps: _propTypes.default.shape({
191
+ className: _propTypes.default.string,
192
+ "aria-label": _propTypes.default.string,
193
+ "data-test-subj": _propTypes.default.string,
194
+ css: _propTypes.default.any,
195
+ ref: _propTypes.default.any,
196
+ "data-text": _propTypes.default.string
197
+ }),
198
+ iconSize: _propTypes.default.any,
145
199
  className: _propTypes.default.string,
146
200
  "aria-label": _propTypes.default.string,
147
201
  "data-test-subj": _propTypes.default.string,
@@ -56,12 +56,11 @@ var EuiPageSection = function EuiPageSection(_ref) {
56
56
  var colors = (0, _global_styling.useEuiBackgroundColorCSS)();
57
57
  var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
58
58
  var contentStyles = (0, _page_section.euiPageSectionContentStyles)();
59
- var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
59
+ var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
60
60
  return (0, _react2.jsx)(Component, _extends({
61
61
  css: cssStyles
62
- }, rest), (0, _react2.jsx)("div", _extends({
63
- css: cssContentStyles
64
- }, contentProps, {
62
+ }, rest), (0, _react2.jsx)("div", _extends({}, contentProps, {
63
+ css: cssContentStyles,
65
64
  style: widthStyles
66
65
  }), children));
67
66
  };
@@ -39,7 +39,8 @@ var EuiTab = function EuiTab(_ref) {
39
39
  rel = _ref.rel,
40
40
  prepend = _ref.prepend,
41
41
  append = _ref.append,
42
- size = _ref.size,
42
+ _ref$size = _ref.size,
43
+ size = _ref$size === void 0 ? 'm' : _ref$size,
43
44
  expand = _ref.expand,
44
45
  rest = _objectWithoutProperties(_ref, _excluded);
45
46
 
@@ -66,7 +66,7 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
66
66
 
67
67
  var direction = _direction || 'y';
68
68
  var side = _side || 'both';
69
- var hideHeight = "calc(".concat(size.base, " * 0.75 * 1.25)");
69
+ var hideHeight = size.s;
70
70
  var gradientStart = "\n ".concat((0, _color.transparentize)('red', 0.1), " 0%,\n ").concat((0, _color.transparentize)('red', 1), " ").concat(hideHeight, "\n ");
71
71
  var gradientEnd = "\n ".concat((0, _color.transparentize)('red', 1), " calc(100% - ").concat(hideHeight, "),\n ").concat((0, _color.transparentize)('red', 0.1), " 100%\n ");
72
72
  var gradient = '';
@@ -146,6 +146,7 @@ export var EuiButtonDisplayDeprecated = /*#__PURE__*/forwardRef(function (_ref,
146
146
 
147
147
  if (minWidth !== undefined || minWidth !== null) {
148
148
  calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
149
+ // @ts-ignore - deprecated component
149
150
  minWidth: minWidth
150
151
  });
151
152
  }
@@ -68,7 +68,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
68
68
  var theme = useEuiTheme();
69
69
  var styles = euiButtonDisplayStyles(theme);
70
70
  var buttonRadiusStyle = useEuiButtonRadiusCSS()[size];
71
- var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
71
+ var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
72
72
 
73
73
  var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
74
74
  isLoading: isLoading,
@@ -105,7 +105,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
105
105
 
106
106
  return createElement(element, _objectSpread(_objectSpread(_objectSpread({
107
107
  css: cssStyles,
108
- style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
108
+ style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
109
109
  minInlineSize: minWidth
110
110
  }) : style,
111
111
  ref: ref
@@ -32,10 +32,11 @@ export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeCont
32
32
  var euiTheme = euiThemeContext.euiTheme;
33
33
  return {
34
34
  // Base
35
- 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;"),
35
+ euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
36
36
  // States
37
37
  isDisabled: _ref,
38
38
  fullWidth: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), ";;label:fullWidth;"),
39
+ defaultMinWidth: /*#__PURE__*/css(logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
39
40
  // Sizes
40
41
  xs: /*#__PURE__*/css(_buttonSize(euiTheme.size.l), euiFontSize(euiThemeContext, 'xs'), ";label:xs;"),
41
42
  s: /*#__PURE__*/css(_buttonSize(euiTheme.size.xl), euiFontSize(euiThemeContext, 's'), ";label:s;"),
@@ -163,7 +163,7 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
163
163
  sizes: responsive || 'none'
164
164
  }, ___EmotionJSX(EuiButton, _extends({
165
165
  className: classes,
166
- minWidth: 0
166
+ minWidth: false
167
167
  }, sharedButtonProps, {
168
168
  fill: fill,
169
169
  textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {
@@ -42,12 +42,11 @@ export var EuiPageSection = function EuiPageSection(_ref) {
42
42
  var colors = useEuiBackgroundColorCSS();
43
43
  var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
44
44
  var contentStyles = euiPageSectionContentStyles();
45
- var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
45
+ var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
46
46
  return ___EmotionJSX(Component, _extends({
47
47
  css: cssStyles
48
- }, rest), ___EmotionJSX("div", _extends({
49
- css: cssContentStyles
50
- }, contentProps, {
48
+ }, rest), ___EmotionJSX("div", _extends({}, contentProps, {
49
+ css: cssContentStyles,
51
50
  style: widthStyles
52
51
  }), children));
53
52
  };
@@ -25,7 +25,8 @@ export var EuiTab = function EuiTab(_ref) {
25
25
  rel = _ref.rel,
26
26
  prepend = _ref.prepend,
27
27
  append = _ref.append,
28
- size = _ref.size,
28
+ _ref$size = _ref.size,
29
+ size = _ref$size === void 0 ? 'm' : _ref$size,
29
30
  expand = _ref.expand,
30
31
  rest = _objectWithoutProperties(_ref, _excluded);
31
32
 
@@ -55,7 +55,7 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
55
55
 
56
56
  var direction = _direction || 'y';
57
57
  var side = _side || 'both';
58
- var hideHeight = "calc(".concat(size.base, " * 0.75 * 1.25)");
58
+ var hideHeight = size.s;
59
59
  var gradientStart = "\n ".concat(transparentize('red', 0.1), " 0%,\n ").concat(transparentize('red', 1), " ").concat(hideHeight, "\n ");
60
60
  var gradientEnd = "\n ".concat(transparentize('red', 1), " calc(100% - ").concat(hideHeight, "),\n ").concat(transparentize('red', 0.1), " 100%\n ");
61
61
  var gradient = '';
@@ -168,6 +168,7 @@ var EuiButtonDisplayDeprecated = /*#__PURE__*/(0, _react.forwardRef)(function (_
168
168
 
169
169
  if (minWidth !== undefined || minWidth !== null) {
170
170
  calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
171
+ // @ts-ignore - deprecated component
171
172
  minWidth: minWidth
172
173
  });
173
174
  }
@@ -86,7 +86,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
86
86
  var theme = (0, _services.useEuiTheme)();
87
87
  var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
88
88
  var buttonRadiusStyle = (0, _mixins.useEuiButtonRadiusCSS)()[size];
89
- var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
89
+ var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
90
90
  var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, (0, _extends2.default)({
91
91
  isLoading: isLoading,
92
92
  isDisabled: buttonIsDisabled,
@@ -121,7 +121,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
121
121
 
122
122
  return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
123
123
  css: cssStyles,
124
- style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
124
+ style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
125
125
  minInlineSize: minWidth
126
126
  }) : style,
127
127
  ref: ref
@@ -36,10 +36,11 @@ var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
36
36
  var euiTheme = euiThemeContext.euiTheme;
37
37
  return {
38
38
  // Base
39
- 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;"),
39
+ 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;"),
40
40
  // States
41
41
  isDisabled: _ref,
42
42
  fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
43
+ defaultMinWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
43
44
  // Sizes
44
45
  xs: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.l), (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";label:xs;"),
45
46
  s: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.xl), (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";label:s;"),
@@ -178,7 +178,7 @@ var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
178
178
  sizes: responsive || 'none'
179
179
  }, (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
180
180
  className: classes,
181
- minWidth: 0
181
+ minWidth: false
182
182
  }, sharedButtonProps, {
183
183
  fill: fill,
184
184
  textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {
@@ -51,12 +51,11 @@ var EuiPageSection = function EuiPageSection(_ref) {
51
51
  var colors = (0, _global_styling.useEuiBackgroundColorCSS)();
52
52
  var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
53
53
  var contentStyles = (0, _page_section.euiPageSectionContentStyles)();
54
- var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
54
+ var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
55
55
  return (0, _react2.jsx)(Component, (0, _extends2.default)({
56
56
  css: cssStyles
57
- }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({
58
- css: cssContentStyles
59
- }, contentProps, {
57
+ }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({}, contentProps, {
58
+ css: cssContentStyles,
60
59
  style: widthStyles
61
60
  }), children));
62
61
  };
@@ -35,7 +35,8 @@ var EuiTab = function EuiTab(_ref) {
35
35
  rel = _ref.rel,
36
36
  prepend = _ref.prepend,
37
37
  append = _ref.append,
38
- size = _ref.size,
38
+ _ref$size = _ref.size,
39
+ size = _ref$size === void 0 ? 'm' : _ref$size,
39
40
  expand = _ref.expand,
40
41
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
41
42
  var euiTheme = (0, _services.useEuiTheme)();
@@ -66,7 +66,7 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
66
66
 
67
67
  var direction = _direction || 'y';
68
68
  var side = _side || 'both';
69
- var hideHeight = "calc(".concat(size.base, " * 0.75 * 1.25)");
69
+ var hideHeight = size.s;
70
70
  var gradientStart = "\n ".concat((0, _color.transparentize)('red', 0.1), " 0%,\n ").concat((0, _color.transparentize)('red', 1), " ").concat(hideHeight, "\n ");
71
71
  var gradientEnd = "\n ".concat((0, _color.transparentize)('red', 1), " calc(100% - ").concat(hideHeight, "),\n ").concat((0, _color.transparentize)('red', 0.1), " 100%\n ");
72
72
  var gradient = '';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elastic/eui",
3
3
  "description": "Elastic UI Component Library",
4
- "version": "70.2.0",
4
+ "version": "70.2.2",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "lib",
7
7
  "module": "es",
@@ -218,6 +218,7 @@ var EuiButtonDisplayDeprecated = /*#__PURE__*/(0, _react.forwardRef)(function (_
218
218
 
219
219
  if (minWidth !== undefined || minWidth !== null) {
220
220
  calculatedStyle = _objectSpread(_objectSpread({}, calculatedStyle), {}, {
221
+ // @ts-ignore - deprecated component
221
222
  minWidth: minWidth
222
223
  });
223
224
  }
@@ -88,7 +88,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
88
88
  var theme = (0, _services.useEuiTheme)();
89
89
  var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
90
90
  var buttonRadiusStyle = (0, _mixins.useEuiButtonRadiusCSS)()[size];
91
- var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
91
+ var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
92
92
  var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, (0, _extends2.default)({
93
93
  isLoading: isLoading,
94
94
  isDisabled: buttonIsDisabled,
@@ -123,7 +123,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
123
123
 
124
124
  return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
125
125
  css: cssStyles,
126
- style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
126
+ style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
127
127
  minInlineSize: minWidth
128
128
  }) : style,
129
129
  ref: ref
@@ -163,7 +163,7 @@ EuiButtonDisplay.propTypes = {
163
163
  /**
164
164
  * Override the default minimum width
165
165
  */
166
- minWidth: _propTypes.default.any,
166
+ minWidth: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([false])]),
167
167
 
168
168
  /**
169
169
  * Force disables the button and changes the icon to a loading spinner
@@ -36,10 +36,11 @@ var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
36
36
  var euiTheme = euiThemeContext.euiTheme;
37
37
  return {
38
38
  // Base
39
- 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;"),
39
+ 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;"),
40
40
  // States
41
41
  isDisabled: _ref,
42
42
  fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
43
+ defaultMinWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), ";;label:defaultMinWidth;"),
43
44
  // Sizes
44
45
  xs: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.l), (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";label:xs;"),
45
46
  s: /*#__PURE__*/(0, _react.css)(_buttonSize(euiTheme.size.xl), (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";label:s;"),
@@ -180,7 +180,7 @@ var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
180
180
  sizes: responsive || 'none'
181
181
  }, (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
182
182
  className: classes,
183
- minWidth: 0
183
+ minWidth: false
184
184
  }, sharedButtonProps, {
185
185
  fill: fill,
186
186
  textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {
@@ -117,19 +117,28 @@ EuiFacetButton.propTypes = {
117
117
  /**
118
118
  * ReactNode to render as this component's content
119
119
  */
120
- children: _propTypes.default.node.isRequired,
120
+ children: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.node]),
121
121
 
122
122
  /**
123
123
  * Any node, but preferably a `EuiIcon` or `EuiAvatar`
124
124
  */
125
125
  icon: _propTypes.default.node,
126
- isDisabled: _propTypes.default.bool,
126
+ isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool]),
127
+
128
+ /**
129
+ * Force disables the button and changes the icon to a loading spinner
130
+ */
127
131
 
128
132
  /**
129
133
  * Adds/swaps for loading spinner & disables
130
134
  */
131
135
  isLoading: _propTypes.default.bool,
132
136
 
137
+ /**
138
+ * Applies the boolean state as the `aria-pressed` property to create a toggle button.
139
+ * *Only use when the readable text does not change between states.*
140
+ */
141
+
133
142
  /**
134
143
  * Changes visual of button to indicate it's currently selected
135
144
  */
@@ -139,6 +148,51 @@ EuiFacetButton.propTypes = {
139
148
  * Adds a notification indicator for displaying the quantity provided
140
149
  */
141
150
  quantity: _propTypes.default.number,
151
+ size: _propTypes.default.any,
152
+
153
+ /**
154
+ * Extends the button to 100% width
155
+ */
156
+ fullWidth: _propTypes.default.bool,
157
+
158
+ /**
159
+ * Override the default minimum width
160
+ */
161
+ minWidth: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([false])]),
162
+
163
+ /**
164
+ * Object of props passed to the <span/> wrapping the button's content
165
+ */
166
+ contentProps: _propTypes.default.shape({
167
+ className: _propTypes.default.string,
168
+ "aria-label": _propTypes.default.string,
169
+ "data-test-subj": _propTypes.default.string,
170
+ css: _propTypes.default.any
171
+ }),
172
+ style: _propTypes.default.any,
173
+
174
+ /**
175
+ * Any `type` accepted by EuiIcon
176
+ */
177
+ 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]),
178
+
179
+ /**
180
+ * Can only be one side `left` or `right`
181
+ */
182
+ iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
183
+
184
+ /**
185
+ * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
186
+ */
187
+ textProps: _propTypes.default.shape({
188
+ className: _propTypes.default.string,
189
+ "aria-label": _propTypes.default.string,
190
+ "data-test-subj": _propTypes.default.string,
191
+ css: _propTypes.default.any,
192
+ ref: _propTypes.default.any,
193
+ "data-text": _propTypes.default.string
194
+ }),
195
+ iconSize: _propTypes.default.any,
142
196
  className: _propTypes.default.string,
143
197
  "aria-label": _propTypes.default.string,
144
198
  "data-test-subj": _propTypes.default.string,
@@ -53,12 +53,11 @@ var EuiPageSection = function EuiPageSection(_ref) {
53
53
  var colors = (0, _global_styling.useEuiBackgroundColorCSS)();
54
54
  var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
55
55
  var contentStyles = (0, _page_section.euiPageSectionContentStyles)();
56
- var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
56
+ var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
57
57
  return (0, _react2.jsx)(Component, (0, _extends2.default)({
58
58
  css: cssStyles
59
- }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({
60
- css: cssContentStyles
61
- }, contentProps, {
59
+ }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({}, contentProps, {
60
+ css: cssContentStyles,
62
61
  style: widthStyles
63
62
  }), children));
64
63
  };
@@ -37,7 +37,8 @@ var EuiTab = function EuiTab(_ref) {
37
37
  rel = _ref.rel,
38
38
  prepend = _ref.prepend,
39
39
  append = _ref.append,
40
- size = _ref.size,
40
+ _ref$size = _ref.size,
41
+ size = _ref$size === void 0 ? 'm' : _ref$size,
41
42
  expand = _ref.expand,
42
43
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
43
44
  var euiTheme = (0, _services.useEuiTheme)();
@@ -66,7 +66,7 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
66
66
 
67
67
  var direction = _direction || 'y';
68
68
  var side = _side || 'both';
69
- var hideHeight = "calc(".concat(size.base, " * 0.75 * 1.25)");
69
+ var hideHeight = size.s;
70
70
  var gradientStart = "\n ".concat((0, _color.transparentize)('red', 0.1), " 0%,\n ").concat((0, _color.transparentize)('red', 1), " ").concat(hideHeight, "\n ");
71
71
  var gradientEnd = "\n ".concat((0, _color.transparentize)('red', 1), " calc(100% - ").concat(hideHeight, "),\n ").concat((0, _color.transparentize)('red', 0.1), " 100%\n ");
72
72
  var gradient = '';