@elastic/eui 59.0.0 → 59.1.0

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 (147) hide show
  1. package/dist/eui_theme_dark.css +2 -136
  2. package/dist/eui_theme_dark.json +0 -6
  3. package/dist/eui_theme_dark.json.d.ts +0 -6
  4. package/dist/eui_theme_dark.min.css +1 -1
  5. package/dist/eui_theme_light.css +2 -136
  6. package/dist/eui_theme_light.json +0 -6
  7. package/dist/eui_theme_light.json.d.ts +0 -6
  8. package/dist/eui_theme_light.min.css +1 -1
  9. package/es/components/accessibility/skip_link/skip_link.js +39 -2
  10. package/es/components/accessibility/skip_link/skip_link.styles.js +1 -1
  11. package/es/components/button/{button_content.js → _button_content_deprecated.js} +4 -3
  12. package/es/components/button/button.js +16 -10
  13. package/es/components/button/button_display/_button_display.js +141 -0
  14. package/es/components/button/button_display/_button_display.styles.js +53 -0
  15. package/es/components/button/button_display/_button_display_content.js +100 -0
  16. package/es/components/button/button_display/_button_display_content.styles.js +61 -0
  17. package/es/components/button/button_empty/button_empty.js +3 -2
  18. package/es/components/button/button_group/button_group.js +2 -1
  19. package/es/components/button/button_group/button_group_button.js +3 -2
  20. package/es/components/call_out/call_out.js +2 -1
  21. package/es/components/card/card.js +2 -1
  22. package/es/components/card/card_select.js +2 -1
  23. package/es/components/date_picker/auto_refresh/auto_refresh.js +2 -1
  24. package/es/components/facet/facet_button.js +31 -15
  25. package/es/components/facet/facet_button.styles.js +64 -0
  26. package/es/components/facet/facet_group.js +12 -23
  27. package/es/components/facet/facet_group.styles.js +79 -0
  28. package/es/components/header/header_links/header_link.js +2 -1
  29. package/es/components/loading/loading_spinner.js +14 -3
  30. package/es/components/loading/loading_spinner.styles.js +4 -4
  31. package/es/components/notification/notification_event.js +2 -1
  32. package/es/components/pagination/pagination_button.js +2 -1
  33. package/es/components/text/text.js +1 -3
  34. package/es/components/text/text_align.js +2 -2
  35. package/es/components/text/text_color.js +7 -3
  36. package/es/themes/amsterdam/index.js +9 -0
  37. package/es/themes/index.js +2 -1
  38. package/eui.d.ts +200 -17
  39. package/lib/components/accessibility/skip_link/skip_link.js +39 -2
  40. package/lib/components/accessibility/skip_link/skip_link.styles.js +1 -1
  41. package/lib/components/button/{button_content.js → _button_content_deprecated.js} +6 -5
  42. package/lib/components/button/button.js +19 -13
  43. package/lib/components/button/button_display/_button_display.js +146 -0
  44. package/lib/components/button/button_display/_button_display.styles.js +59 -0
  45. package/lib/components/button/button_display/_button_display_content.js +111 -0
  46. package/lib/components/button/button_display/_button_display_content.styles.js +64 -0
  47. package/lib/components/button/button_empty/button_empty.js +4 -3
  48. package/lib/components/button/button_group/button_group.js +2 -1
  49. package/lib/components/button/button_group/button_group_button.js +3 -2
  50. package/lib/components/call_out/call_out.js +2 -1
  51. package/lib/components/card/card.js +2 -1
  52. package/lib/components/card/card_select.js +2 -1
  53. package/lib/components/date_picker/auto_refresh/auto_refresh.js +2 -1
  54. package/lib/components/facet/facet_button.js +35 -15
  55. package/lib/components/facet/facet_button.styles.js +79 -0
  56. package/lib/components/facet/facet_group.js +12 -23
  57. package/lib/components/facet/facet_group.styles.js +82 -0
  58. package/lib/components/header/header_links/header_link.js +2 -1
  59. package/lib/components/loading/loading_spinner.js +14 -3
  60. package/lib/components/loading/loading_spinner.styles.js +4 -4
  61. package/lib/components/notification/notification_event.js +2 -1
  62. package/lib/components/text/text.js +1 -3
  63. package/lib/components/text/text_align.js +8 -2
  64. package/lib/components/text/text_color.js +13 -3
  65. package/lib/themes/amsterdam/index.js +18 -0
  66. package/lib/themes/index.js +21 -1
  67. package/optimize/es/components/accessibility/skip_link/skip_link.js +23 -1
  68. package/optimize/es/components/accessibility/skip_link/skip_link.styles.js +1 -1
  69. package/optimize/es/components/button/{button_content.js → _button_content_deprecated.js} +1 -1
  70. package/optimize/es/components/button/button.js +13 -8
  71. package/optimize/es/components/button/button_display/_button_display.js +73 -0
  72. package/optimize/es/components/button/button_display/_button_display.styles.js +53 -0
  73. package/optimize/es/components/button/button_display/_button_display_content.js +67 -0
  74. package/optimize/es/components/button/button_display/_button_display_content.styles.js +61 -0
  75. package/optimize/es/components/button/button_empty/button_empty.js +1 -1
  76. package/optimize/es/components/button/button_group/button_group_button.js +1 -1
  77. package/optimize/es/components/call_out/call_out.js +2 -1
  78. package/optimize/es/components/facet/facet_button.js +31 -15
  79. package/optimize/es/components/facet/facet_button.styles.js +64 -0
  80. package/optimize/es/components/facet/facet_group.js +10 -21
  81. package/optimize/es/components/facet/facet_group.styles.js +79 -0
  82. package/optimize/es/components/loading/loading_spinner.js +3 -2
  83. package/optimize/es/components/loading/loading_spinner.styles.js +4 -4
  84. package/optimize/es/components/text/text.js +1 -3
  85. package/optimize/es/components/text/text_align.js +2 -2
  86. package/optimize/es/components/text/text_color.js +7 -3
  87. package/optimize/es/themes/amsterdam/index.js +9 -0
  88. package/optimize/es/themes/index.js +2 -1
  89. package/optimize/lib/components/accessibility/skip_link/skip_link.js +25 -1
  90. package/optimize/lib/components/accessibility/skip_link/skip_link.styles.js +1 -1
  91. package/optimize/lib/components/button/{button_content.js → _button_content_deprecated.js} +3 -3
  92. package/optimize/lib/components/button/button.js +16 -11
  93. package/optimize/lib/components/button/button_display/_button_display.js +79 -0
  94. package/optimize/lib/components/button/button_display/_button_display.styles.js +59 -0
  95. package/optimize/lib/components/button/button_display/_button_display_content.js +78 -0
  96. package/optimize/lib/components/button/button_display/_button_display_content.styles.js +64 -0
  97. package/optimize/lib/components/button/button_empty/button_empty.js +2 -2
  98. package/optimize/lib/components/button/button_group/button_group_button.js +1 -1
  99. package/optimize/lib/components/call_out/call_out.js +2 -1
  100. package/optimize/lib/components/facet/facet_button.js +35 -15
  101. package/optimize/lib/components/facet/facet_button.styles.js +79 -0
  102. package/optimize/lib/components/facet/facet_group.js +10 -21
  103. package/optimize/lib/components/facet/facet_group.styles.js +82 -0
  104. package/optimize/lib/components/loading/loading_spinner.js +3 -2
  105. package/optimize/lib/components/loading/loading_spinner.styles.js +4 -4
  106. package/optimize/lib/components/text/text.js +1 -3
  107. package/optimize/lib/components/text/text_align.js +8 -2
  108. package/optimize/lib/components/text/text_color.js +13 -3
  109. package/optimize/lib/themes/amsterdam/index.js +18 -0
  110. package/optimize/lib/themes/index.js +21 -1
  111. package/package.json +1 -1
  112. package/src/components/index.scss +0 -1
  113. package/src/components/selectable/selectable_message/_selectable_message.scss +1 -0
  114. package/src/themes/amsterdam/overrides/_index.scss +0 -1
  115. package/test-env/components/accessibility/skip_link/skip_link.js +40 -2
  116. package/test-env/components/accessibility/skip_link/skip_link.styles.js +1 -1
  117. package/test-env/components/button/{button_content.js → _button_content_deprecated.js} +6 -5
  118. package/test-env/components/button/button.js +19 -13
  119. package/test-env/components/button/button_display/_button_display.js +143 -0
  120. package/test-env/components/button/button_display/_button_display.styles.js +59 -0
  121. package/test-env/components/button/button_display/_button_display_content.js +108 -0
  122. package/test-env/components/button/button_display/_button_display_content.styles.js +64 -0
  123. package/test-env/components/button/button_empty/button_empty.js +4 -3
  124. package/test-env/components/button/button_group/button_group.js +2 -1
  125. package/test-env/components/button/button_group/button_group_button.js +3 -2
  126. package/test-env/components/call_out/call_out.js +2 -1
  127. package/test-env/components/card/card.js +2 -1
  128. package/test-env/components/card/card_select.js +2 -1
  129. package/test-env/components/date_picker/auto_refresh/auto_refresh.js +2 -1
  130. package/test-env/components/facet/facet_button.js +35 -15
  131. package/test-env/components/facet/facet_button.styles.js +79 -0
  132. package/test-env/components/facet/facet_group.js +12 -23
  133. package/test-env/components/facet/facet_group.styles.js +82 -0
  134. package/test-env/components/header/header_links/header_link.js +2 -1
  135. package/test-env/components/loading/loading_spinner.js +14 -3
  136. package/test-env/components/loading/loading_spinner.styles.js +4 -4
  137. package/test-env/components/notification/notification_event.js +2 -1
  138. package/test-env/components/text/text.js +1 -3
  139. package/test-env/components/text/text_align.js +8 -2
  140. package/test-env/components/text/text_color.js +13 -3
  141. package/test-env/themes/amsterdam/index.js +18 -0
  142. package/test-env/themes/index.js +21 -1
  143. package/src/components/facet/_facet_button.scss +0 -69
  144. package/src/components/facet/_facet_group.scss +0 -24
  145. package/src/components/facet/_index.scss +0 -4
  146. package/src/components/facet/_variables.scss +0 -6
  147. package/src/themes/amsterdam/overrides/_facet.scss +0 -10
@@ -404,7 +404,8 @@ EuiCard.propTypes = {
404
404
  iconSide: PropTypes.oneOf(["left", "right"]),
405
405
 
406
406
  /**
407
- * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
407
+ * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
408
+ * It doesn't apply to the icon.
408
409
  */
409
410
  textProps: PropTypes.shape({
410
411
  className: PropTypes.string,
@@ -116,7 +116,8 @@ EuiCardSelect.propTypes = {
116
116
  iconSide: PropTypes.oneOf(["left", "right"]),
117
117
 
118
118
  /**
119
- * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
119
+ * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
120
+ * It doesn't apply to the icon.
120
121
  */
121
122
  textProps: PropTypes.shape({
122
123
  className: PropTypes.string,
@@ -205,7 +205,8 @@ EuiAutoRefreshButton.propTypes = {
205
205
  contentProps: PropTypes.any,
206
206
 
207
207
  /**
208
- * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
208
+ * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
209
+ * It doesn't apply to the icon.
209
210
  */
210
211
  textProps: PropTypes.shape({
211
212
  className: PropTypes.string,
@@ -19,6 +19,10 @@ import classNames from 'classnames';
19
19
  import { EuiNotificationBadge } from '../badge';
20
20
  import { EuiLoadingSpinner } from '../loading';
21
21
  import { EuiInnerText } from '../inner_text';
22
+ import { cloneElementWithCss } from '../../services/theme/clone_element';
23
+ import { useEuiTheme } from '../../services';
24
+ import { euiFacetButtonStyles, euiFacetButtonTextStyles, euiFacetButtonIconStyles, euiFacetButtonQuantityStyles, euiFacetButtonLoadingSpinnerStyles } from './facet_button.styles';
25
+ import { EuiButtonDisplay } from '../button/button_display/_button_display';
22
26
  import { jsx as ___EmotionJSX } from "@emotion/react";
23
27
  export var EuiFacetButton = function EuiFacetButton(_ref) {
24
28
  var children = _ref.children,
@@ -36,20 +40,30 @@ export var EuiFacetButton = function EuiFacetButton(_ref) {
36
40
 
37
41
  // If in the loading state, force disabled to true
38
42
  isDisabled = isLoading ? true : isDisabled;
39
- var classes = classNames('euiFacetButton', {
40
- 'euiFacetButton--isSelected': isSelected,
41
- 'euiFacetButton--unSelected': !isSelected
42
- }, className); // Add quantity number if provided or loading indicator
43
+ var selection = isSelected ? 'isSelected' : 'unSelected';
44
+ var classes = classNames('euiFacetButton', className);
45
+ var theme = useEuiTheme();
46
+ var styles = euiFacetButtonStyles(theme);
47
+ var cssStyles = [styles.euiFacetButton];
48
+ var textStyles = euiFacetButtonTextStyles(theme);
49
+ var cssTextStyles = [textStyles.euiFacetButton__text, textStyles[selection]];
50
+ var quantityStyles = euiFacetButtonQuantityStyles();
51
+ var cssQuantityStyles = [quantityStyles.euiFacetButton__quantity, isDisabled && quantityStyles.isDisabled];
52
+ var iconStyles = euiFacetButtonIconStyles();
53
+ var cssIconStyles = [iconStyles.euiFacetButton__icon, isDisabled && quantityStyles.isDisabled];
54
+ var loadingSpinnerStyles = euiFacetButtonLoadingSpinnerStyles();
55
+ var cssLoadingSpinnerStyles = [loadingSpinnerStyles.euiFacetButton__loadingSpinner]; // Add quantity number if provided or loading indicator
43
56
 
44
57
  var buttonQuantity;
45
58
 
46
59
  if (isLoading) {
47
60
  buttonQuantity = ___EmotionJSX(EuiLoadingSpinner, {
48
- className: "euiFacetButton__spinner",
61
+ css: cssLoadingSpinnerStyles,
49
62
  size: "m"
50
63
  });
51
64
  } else if (typeof quantity === 'number') {
52
65
  buttonQuantity = ___EmotionJSX(EuiNotificationBadge, {
66
+ css: cssQuantityStyles,
53
67
  className: "euiFacetButton__quantity",
54
68
  size: "m",
55
69
  color: !isSelected || isDisabled ? 'subdued' : 'accent'
@@ -60,25 +74,27 @@ export var EuiFacetButton = function EuiFacetButton(_ref) {
60
74
  var buttonIcon;
61
75
 
62
76
  if ( /*#__PURE__*/React.isValidElement(icon)) {
63
- buttonIcon = /*#__PURE__*/React.cloneElement(icon, {
64
- className: classNames(icon.props.className, 'euiFacetButton__icon')
77
+ buttonIcon = cloneElementWithCss(icon, {
78
+ css: cssIconStyles,
79
+ className: 'euiFacetButton__icon'
65
80
  });
66
81
  }
67
82
 
68
83
  return ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
69
- return ___EmotionJSX("button", _extends({
84
+ return ___EmotionJSX(EuiButtonDisplay, _extends({
70
85
  className: classes,
71
- disabled: isDisabled,
72
- type: "button",
86
+ css: cssStyles,
87
+ element: "button",
88
+ isDisabled: isDisabled,
73
89
  ref: buttonRef,
74
- title: rest['aria-label'] || innerText
75
- }, rest), ___EmotionJSX("span", {
76
- className: "euiFacetButton__content"
77
- }, buttonIcon, ___EmotionJSX("span", {
90
+ title: rest['aria-label'] || innerText,
91
+ size: "s"
92
+ }, rest), buttonIcon, ___EmotionJSX("span", {
93
+ css: cssTextStyles,
78
94
  className: "euiFacetButton__text",
79
95
  "data-text": innerText,
80
96
  ref: ref
81
- }, children), buttonQuantity));
97
+ }, children), buttonQuantity);
82
98
  });
83
99
  };
84
100
  EuiFacetButton.propTypes = {
@@ -0,0 +1,64 @@
1
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
2
+
3
+ /*
4
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
5
+ * or more contributor license agreements. Licensed under the Elastic License
6
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
7
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
8
+ * Side Public License, v 1.
9
+ */
10
+ import { css } from '@emotion/react';
11
+ import { euiTextTruncate, euiTextShift, logicalTextAlignCSS } from '../../global_styling';
12
+ import { euiLinkFocusCSS } from '../link/link.styles';
13
+ export var euiFacetButtonStyles = function euiFacetButtonStyles(_ref3) {
14
+ var euiTheme = _ref3.euiTheme;
15
+ return {
16
+ // Base
17
+ euiFacetButton: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";&:hover,&:focus{&:not(:disabled) [class*='euiFacetButton__text']{text-decoration:underline;}}&:focus:not(:disabled) [class*='euiFacetButton__text']{", euiLinkFocusCSS(euiTheme), ";}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;&:hover,&:focus{text-decoration:none;}};label:euiFacetButton;")
18
+ };
19
+ };
20
+ export var euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref4) {
21
+ var euiTheme = _ref4.euiTheme;
22
+ return {
23
+ euiFacetButton__text: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), " flex-grow:1;;label:euiFacetButton__text;"),
24
+ isSelected: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";;label:isSelected;"),
25
+ unSelected: /*#__PURE__*/css(";label:unSelected;")
26
+ };
27
+ };
28
+
29
+ var _ref2 = process.env.NODE_ENV === "production" ? {
30
+ name: "mpq8zy-isDisabled",
31
+ styles: "opacity:0.5;label:isDisabled;"
32
+ } : {
33
+ name: "mpq8zy-isDisabled",
34
+ styles: "opacity:0.5;label:isDisabled;",
35
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
36
+ };
37
+
38
+ export var euiFacetButtonIconStyles = function euiFacetButtonIconStyles() {
39
+ return {
40
+ euiFacetButton__icon: /*#__PURE__*/css(";label:euiFacetButton__icon;"),
41
+ isDisabled: _ref2
42
+ };
43
+ };
44
+ export var euiFacetButtonLoadingSpinnerStyles = function euiFacetButtonLoadingSpinnerStyles() {
45
+ return {
46
+ euiFacetButton__loadingSpinner: /*#__PURE__*/css(";label:euiFacetButton__loadingSpinner;")
47
+ };
48
+ };
49
+
50
+ var _ref = process.env.NODE_ENV === "production" ? {
51
+ name: "mpq8zy-isDisabled",
52
+ styles: "opacity:0.5;label:isDisabled;"
53
+ } : {
54
+ name: "mpq8zy-isDisabled",
55
+ styles: "opacity:0.5;label:isDisabled;",
56
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
57
+ };
58
+
59
+ export var euiFacetButtonQuantityStyles = function euiFacetButtonQuantityStyles() {
60
+ return {
61
+ euiFacetButton__quantity: /*#__PURE__*/css(";label:euiFacetButton__quantity;"),
62
+ isDisabled: _ref
63
+ };
64
+ };
@@ -16,21 +16,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
16
16
  import React from 'react';
17
17
  import PropTypes from "prop-types";
18
18
  import classNames from 'classnames';
19
- import { keysOf } from '../common';
20
- import { EuiFlexGroup } from '../flex';
19
+ import { useEuiTheme } from '../../services';
20
+ import { euiFacetGroupStyles } from './facet_group.styles';
21
21
  import { jsx as ___EmotionJSX } from "@emotion/react";
22
- var layoutToClassNameMap = {
23
- vertical: 'euiFacetGroup--vertical',
24
- horizontal: 'euiFacetGroup--horizontal'
25
- };
26
- export var LAYOUTS = keysOf(layoutToClassNameMap);
27
- var gutterSizeToClassNameMap = {
28
- none: 'euiFacetGroup--gutterNone',
29
- s: 'euiFacetGroup--gutterSmall',
30
- m: 'euiFacetGroup--gutterMedium',
31
- l: 'euiFacetGroup--gutterLarge'
32
- };
33
- export var GUTTER_SIZES = keysOf(gutterSizeToClassNameMap);
22
+ export var LAYOUTS = ['vertical', 'horizontal'];
23
+ export var GUTTER_SIZES = ['none', 's', 'm', 'l'];
34
24
  export var EuiFacetGroup = function EuiFacetGroup(_ref) {
35
25
  var children = _ref.children,
36
26
  className = _ref.className,
@@ -40,14 +30,13 @@ export var EuiFacetGroup = function EuiFacetGroup(_ref) {
40
30
  gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
41
31
  rest = _objectWithoutProperties(_ref, _excluded);
42
32
 
43
- var classes = classNames('euiFacetGroup', layoutToClassNameMap[layout], gutterSizeToClassNameMap[gutterSize], className);
44
- var direction = layout === 'vertical' ? 'column' : 'row';
45
- var wrap = layout === 'vertical' ? false : true;
46
- return ___EmotionJSX(EuiFlexGroup, _extends({
33
+ var theme = useEuiTheme();
34
+ var styles = euiFacetGroupStyles(theme, layout);
35
+ var cssStyles = [styles.euiFacetGroup, styles[gutterSize], styles[layout]];
36
+ var classes = classNames('euiFacetGroup', className);
37
+ return ___EmotionJSX("div", _extends({
47
38
  className: classes,
48
- direction: direction,
49
- wrap: wrap,
50
- gutterSize: "none"
39
+ css: cssStyles
51
40
  }, rest), children);
52
41
  };
53
42
  EuiFacetGroup.propTypes = {
@@ -58,11 +47,11 @@ EuiFacetGroup.propTypes = {
58
47
  /**
59
48
  * Vertically in a column, or horizontally in one wrapping line
60
49
  */
61
- layout: PropTypes.oneOf(["vertical", "horizontal"]),
50
+ layout: PropTypes.any,
62
51
 
63
52
  /**
64
53
  * Distance between facet buttons.
65
54
  * Horizontal layout always adds more distance horizontally between buttons.
66
55
  */
67
- gutterSize: PropTypes.oneOf(["none", "s", "m", "l"])
56
+ gutterSize: PropTypes.any
68
57
  };
@@ -0,0 +1,79 @@
1
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
2
+
3
+ /*
4
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
5
+ * or more contributor license agreements. Licensed under the Elastic License
6
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
7
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
8
+ * Side Public License, v 1.
9
+ */
10
+ import { css } from '@emotion/react';
11
+ import { useEuiTheme } from '../../services';
12
+
13
+ var _facetGroupGutterSize = function _facetGroupGutterSize(_ref4) {
14
+ var gutterSize = _ref4.gutterSize,
15
+ layout = _ref4.layout;
16
+
17
+ var _useEuiTheme = useEuiTheme(),
18
+ euiTheme = _useEuiTheme.euiTheme;
19
+
20
+ var isHorizontalLayout = layout === 'horizontal';
21
+ var gutterHorizontal = "calc(".concat(euiTheme.size.m, " + ").concat(gutterSize, ")");
22
+ var gutterVertical = gutterSize;
23
+ return isHorizontalLayout ? "gap: ".concat(gutterVertical, " ").concat(gutterHorizontal, ";") : "gap: ".concat(gutterVertical, " 0;");
24
+ };
25
+
26
+ var _ref = process.env.NODE_ENV === "production" ? {
27
+ name: "omnk2l-vertical",
28
+ styles: "flex-direction:column;label:vertical;"
29
+ } : {
30
+ name: "omnk2l-vertical",
31
+ styles: "flex-direction:column;label:vertical;",
32
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
33
+ };
34
+
35
+ var _ref2 = process.env.NODE_ENV === "production" ? {
36
+ name: "envaaw-horizontal",
37
+ styles: "flex-direction:row;flex-wrap:wrap;label:horizontal;"
38
+ } : {
39
+ name: "envaaw-horizontal",
40
+ styles: "flex-direction:row;flex-wrap:wrap;label:horizontal;",
41
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
42
+ };
43
+
44
+ var _ref3 = process.env.NODE_ENV === "production" ? {
45
+ name: "1g68sie-euiFacetGroup",
46
+ styles: "display:flex;flex-grow:1;label:euiFacetGroup;"
47
+ } : {
48
+ name: "1g68sie-euiFacetGroup",
49
+ styles: "display:flex;flex-grow:1;label:euiFacetGroup;",
50
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
51
+ };
52
+
53
+ export var euiFacetGroupStyles = function euiFacetGroupStyles(_ref5, layout) {
54
+ var euiTheme = _ref5.euiTheme;
55
+ return {
56
+ // Base
57
+ euiFacetGroup: _ref3,
58
+ // Gutter sizes
59
+ none: /*#__PURE__*/css(_facetGroupGutterSize({
60
+ gutterSize: '0',
61
+ layout: layout
62
+ }), ";label:none;"),
63
+ s: /*#__PURE__*/css(_facetGroupGutterSize({
64
+ gutterSize: euiTheme.size.xs,
65
+ layout: layout
66
+ }), ";label:s;"),
67
+ m: /*#__PURE__*/css(_facetGroupGutterSize({
68
+ gutterSize: euiTheme.size.s,
69
+ layout: layout
70
+ }), ";label:m;"),
71
+ l: /*#__PURE__*/css(_facetGroupGutterSize({
72
+ gutterSize: euiTheme.size.m,
73
+ layout: layout
74
+ }), ";label:l;"),
75
+ // layouts
76
+ horizontal: _ref2,
77
+ vertical: _ref
78
+ };
79
+ };
@@ -111,7 +111,8 @@ EuiHeaderLink.propTypes = {
111
111
  iconSide: PropTypes.oneOf(["left", "right"]),
112
112
 
113
113
  /**
114
- * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
114
+ * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
115
+ * It doesn't apply to the icon.
115
116
  */
116
117
  textProps: PropTypes.shape({
117
118
  className: PropTypes.string,
@@ -1,4 +1,4 @@
1
- var _excluded = ["size", "className", "aria-label"];
1
+ var _excluded = ["size", "className", "aria-label", "color"];
2
2
 
3
3
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
 
@@ -26,10 +26,11 @@ export var EuiLoadingSpinner = function EuiLoadingSpinner(_ref) {
26
26
  size = _ref$size === void 0 ? 'm' : _ref$size,
27
27
  className = _ref.className,
28
28
  ariaLabel = _ref['aria-label'],
29
+ color = _ref.color,
29
30
  rest = _objectWithoutProperties(_ref, _excluded);
30
31
 
31
32
  var euiTheme = useEuiTheme();
32
- var styles = euiLoadingSpinnerStyles(euiTheme);
33
+ var styles = euiLoadingSpinnerStyles(euiTheme, color);
33
34
  var cssStyles = [styles.euiLoadingSpinner, styles[size]];
34
35
  var classes = classNames('euiLoadingSpinner', className);
35
36
  var defaultLabel = useLoadingAriaLabel();
@@ -44,5 +45,15 @@ EuiLoadingSpinner.propTypes = {
44
45
  className: PropTypes.string,
45
46
  "aria-label": PropTypes.string,
46
47
  "data-test-subj": PropTypes.string,
47
- size: PropTypes.any
48
+ size: PropTypes.any,
49
+
50
+ /**
51
+ * Sets the color of the border and highlight.
52
+ * Each key accepts any valid CSS color value as a `string`
53
+ * See #EuiLoadingSpinnerColor
54
+ */
55
+ color: PropTypes.shape({
56
+ border: PropTypes.any,
57
+ highlight: PropTypes.any
58
+ })
48
59
  };
@@ -22,14 +22,14 @@ var spinnerSizes = {
22
22
  xxl: 'xxl'
23
23
  };
24
24
 
25
- var spinnerColors = function spinnerColors(main, highlight) {
26
- return "".concat(highlight, " ").concat(main, " ").concat(main, " ").concat(main);
25
+ var spinnerColorsCSS = function spinnerColorsCSS(border, highlight) {
26
+ return "\n border-color: ".concat(highlight, " ").concat(border, " ").concat(border, " ").concat(border, ";\n ");
27
27
  };
28
28
 
29
- export var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(_ref) {
29
+ export var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(_ref, color) {
30
30
  var euiTheme = _ref.euiTheme;
31
31
  return {
32
- euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";border-color:", spinnerColors(euiTheme.border.color, euiTheme.colors.primary), ";", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
32
+ euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", spinnerColorsCSS((color === null || color === void 0 ? void 0 : color.border) || euiTheme.colors.lightShade, (color === null || color === void 0 ? void 0 : color.highlight) || euiTheme.colors.primary), ";", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
33
33
  // Sizes
34
34
  s: /*#__PURE__*/css("width:", euiTheme.size[spinnerSizes.s], ";height:", euiTheme.size[spinnerSizes.s], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
35
35
  m: /*#__PURE__*/css("width:", euiTheme.size[spinnerSizes.m], ";height:", euiTheme.size[spinnerSizes.m], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),
@@ -254,7 +254,8 @@ EuiNotificationEvent.propTypes = {
254
254
  iconSide: PropTypes.oneOf(["left", "right"]),
255
255
 
256
256
  /**
257
- * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
257
+ * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
258
+ * It doesn't apply to the icon.
258
259
  */
259
260
  textProps: PropTypes.shape({
260
261
  className: PropTypes.string,
@@ -144,7 +144,8 @@ EuiPaginationButton.propTypes = {
144
144
  iconSide: PropTypes.oneOf(["left", "right"]),
145
145
 
146
146
  /**
147
- * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
147
+ * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
148
+ * It doesn't apply to the icon.
148
149
  */
149
150
  textProps: PropTypes.shape({
150
151
  className: PropTypes.string,
@@ -1,4 +1,4 @@
1
- var _excluded = ["size", "color", "grow", "textAlign", "children", "className", "style"];
1
+ var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
2
2
 
3
3
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
 
@@ -31,7 +31,6 @@ export var EuiText = function EuiText(_ref) {
31
31
  textAlign = _ref.textAlign,
32
32
  children = _ref.children,
33
33
  className = _ref.className,
34
- style = _ref.style,
35
34
  rest = _objectWithoutProperties(_ref, _excluded);
36
35
 
37
36
  var euiTheme = useEuiTheme();
@@ -47,7 +46,6 @@ export var EuiText = function EuiText(_ref) {
47
46
  if (color) {
48
47
  text = ___EmotionJSX(EuiTextColor, {
49
48
  color: color,
50
- style: style,
51
49
  cloneElement: true
52
50
  }, text);
53
51
  }
@@ -17,7 +17,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
17
17
  * in compliance with, at your election, the Elastic License 2.0 or the Server
18
18
  * Side Public License, v 1.
19
19
  */
20
- import React from 'react';
20
+ import React, { isValidElement } from 'react';
21
21
  import PropTypes from "prop-types";
22
22
  import { cloneElementWithCss } from '../../services/theme/clone_element';
23
23
  import { euiTextAlignStyles } from './text_align.styles';
@@ -38,7 +38,7 @@ export var EuiTextAlign = function EuiTextAlign(_ref) {
38
38
  css: cssStyles
39
39
  }, rest);
40
40
 
41
- if (cloneElement) {
41
+ if ( /*#__PURE__*/isValidElement(children) && cloneElement) {
42
42
  return cloneElementWithCss(children, props);
43
43
  } else {
44
44
  return ___EmotionJSX("div", props, children);
@@ -17,7 +17,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
17
17
  * in compliance with, at your election, the Elastic License 2.0 or the Server
18
18
  * Side Public License, v 1.
19
19
  */
20
- import React from 'react';
20
+ import React, { isValidElement } from 'react';
21
21
  import PropTypes from "prop-types";
22
22
  import { cloneElementWithCss } from '../../services/theme/clone_element';
23
23
  import { useEuiTheme } from '../../services';
@@ -51,8 +51,12 @@ export var EuiTextColor = function EuiTextColor(_ref) {
51
51
  style: euiTextStyle
52
52
  }, rest);
53
53
 
54
- if (cloneElement) {
55
- return cloneElementWithCss(children, props);
54
+ if ( /*#__PURE__*/isValidElement(children) && cloneElement) {
55
+ var childrenStyle = _objectSpread(_objectSpread({}, children.props.style), euiTextStyle);
56
+
57
+ return cloneElementWithCss(children, _objectSpread(_objectSpread({}, props), {}, {
58
+ style: childrenStyle
59
+ }));
56
60
  } else {
57
61
  var Component = component;
58
62
  return ___EmotionJSX(Component, props, children);
@@ -0,0 +1,9 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+ // Only globally export the mixins we allow consumers to re-use
9
+ export * from './global_styling/mixins/shadow';
@@ -6,4 +6,5 @@
6
6
  * Side Public License, v 1.
7
7
  */
8
8
  export { EUI_THEMES, isDefaultTheme } from './themes';
9
- export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from './amsterdam/theme';
9
+ export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from './amsterdam/theme';
10
+ export * from './amsterdam';