@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.
- package/dist/eui_theme_dark.css +2 -136
- package/dist/eui_theme_dark.json +0 -6
- package/dist/eui_theme_dark.json.d.ts +0 -6
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +2 -136
- package/dist/eui_theme_light.json +0 -6
- package/dist/eui_theme_light.json.d.ts +0 -6
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/accessibility/skip_link/skip_link.js +39 -2
- package/es/components/accessibility/skip_link/skip_link.styles.js +1 -1
- package/es/components/button/{button_content.js → _button_content_deprecated.js} +4 -3
- package/es/components/button/button.js +16 -10
- package/es/components/button/button_display/_button_display.js +141 -0
- package/es/components/button/button_display/_button_display.styles.js +53 -0
- package/es/components/button/button_display/_button_display_content.js +100 -0
- package/es/components/button/button_display/_button_display_content.styles.js +61 -0
- package/es/components/button/button_empty/button_empty.js +3 -2
- package/es/components/button/button_group/button_group.js +2 -1
- package/es/components/button/button_group/button_group_button.js +3 -2
- package/es/components/call_out/call_out.js +2 -1
- package/es/components/card/card.js +2 -1
- package/es/components/card/card_select.js +2 -1
- package/es/components/date_picker/auto_refresh/auto_refresh.js +2 -1
- package/es/components/facet/facet_button.js +31 -15
- package/es/components/facet/facet_button.styles.js +64 -0
- package/es/components/facet/facet_group.js +12 -23
- package/es/components/facet/facet_group.styles.js +79 -0
- package/es/components/header/header_links/header_link.js +2 -1
- package/es/components/loading/loading_spinner.js +14 -3
- package/es/components/loading/loading_spinner.styles.js +4 -4
- package/es/components/notification/notification_event.js +2 -1
- package/es/components/pagination/pagination_button.js +2 -1
- package/es/components/text/text.js +1 -3
- package/es/components/text/text_align.js +2 -2
- package/es/components/text/text_color.js +7 -3
- package/es/themes/amsterdam/index.js +9 -0
- package/es/themes/index.js +2 -1
- package/eui.d.ts +200 -17
- package/lib/components/accessibility/skip_link/skip_link.js +39 -2
- package/lib/components/accessibility/skip_link/skip_link.styles.js +1 -1
- package/lib/components/button/{button_content.js → _button_content_deprecated.js} +6 -5
- package/lib/components/button/button.js +19 -13
- package/lib/components/button/button_display/_button_display.js +146 -0
- package/lib/components/button/button_display/_button_display.styles.js +59 -0
- package/lib/components/button/button_display/_button_display_content.js +111 -0
- package/lib/components/button/button_display/_button_display_content.styles.js +64 -0
- package/lib/components/button/button_empty/button_empty.js +4 -3
- package/lib/components/button/button_group/button_group.js +2 -1
- package/lib/components/button/button_group/button_group_button.js +3 -2
- package/lib/components/call_out/call_out.js +2 -1
- package/lib/components/card/card.js +2 -1
- package/lib/components/card/card_select.js +2 -1
- package/lib/components/date_picker/auto_refresh/auto_refresh.js +2 -1
- package/lib/components/facet/facet_button.js +35 -15
- package/lib/components/facet/facet_button.styles.js +79 -0
- package/lib/components/facet/facet_group.js +12 -23
- package/lib/components/facet/facet_group.styles.js +82 -0
- package/lib/components/header/header_links/header_link.js +2 -1
- package/lib/components/loading/loading_spinner.js +14 -3
- package/lib/components/loading/loading_spinner.styles.js +4 -4
- package/lib/components/notification/notification_event.js +2 -1
- package/lib/components/text/text.js +1 -3
- package/lib/components/text/text_align.js +8 -2
- package/lib/components/text/text_color.js +13 -3
- package/lib/themes/amsterdam/index.js +18 -0
- package/lib/themes/index.js +21 -1
- package/optimize/es/components/accessibility/skip_link/skip_link.js +23 -1
- package/optimize/es/components/accessibility/skip_link/skip_link.styles.js +1 -1
- package/optimize/es/components/button/{button_content.js → _button_content_deprecated.js} +1 -1
- package/optimize/es/components/button/button.js +13 -8
- package/optimize/es/components/button/button_display/_button_display.js +73 -0
- package/optimize/es/components/button/button_display/_button_display.styles.js +53 -0
- package/optimize/es/components/button/button_display/_button_display_content.js +67 -0
- package/optimize/es/components/button/button_display/_button_display_content.styles.js +61 -0
- package/optimize/es/components/button/button_empty/button_empty.js +1 -1
- package/optimize/es/components/button/button_group/button_group_button.js +1 -1
- package/optimize/es/components/call_out/call_out.js +2 -1
- package/optimize/es/components/facet/facet_button.js +31 -15
- package/optimize/es/components/facet/facet_button.styles.js +64 -0
- package/optimize/es/components/facet/facet_group.js +10 -21
- package/optimize/es/components/facet/facet_group.styles.js +79 -0
- package/optimize/es/components/loading/loading_spinner.js +3 -2
- package/optimize/es/components/loading/loading_spinner.styles.js +4 -4
- package/optimize/es/components/text/text.js +1 -3
- package/optimize/es/components/text/text_align.js +2 -2
- package/optimize/es/components/text/text_color.js +7 -3
- package/optimize/es/themes/amsterdam/index.js +9 -0
- package/optimize/es/themes/index.js +2 -1
- package/optimize/lib/components/accessibility/skip_link/skip_link.js +25 -1
- package/optimize/lib/components/accessibility/skip_link/skip_link.styles.js +1 -1
- package/optimize/lib/components/button/{button_content.js → _button_content_deprecated.js} +3 -3
- package/optimize/lib/components/button/button.js +16 -11
- package/optimize/lib/components/button/button_display/_button_display.js +79 -0
- package/optimize/lib/components/button/button_display/_button_display.styles.js +59 -0
- package/optimize/lib/components/button/button_display/_button_display_content.js +78 -0
- package/optimize/lib/components/button/button_display/_button_display_content.styles.js +64 -0
- package/optimize/lib/components/button/button_empty/button_empty.js +2 -2
- package/optimize/lib/components/button/button_group/button_group_button.js +1 -1
- package/optimize/lib/components/call_out/call_out.js +2 -1
- package/optimize/lib/components/facet/facet_button.js +35 -15
- package/optimize/lib/components/facet/facet_button.styles.js +79 -0
- package/optimize/lib/components/facet/facet_group.js +10 -21
- package/optimize/lib/components/facet/facet_group.styles.js +82 -0
- package/optimize/lib/components/loading/loading_spinner.js +3 -2
- package/optimize/lib/components/loading/loading_spinner.styles.js +4 -4
- package/optimize/lib/components/text/text.js +1 -3
- package/optimize/lib/components/text/text_align.js +8 -2
- package/optimize/lib/components/text/text_color.js +13 -3
- package/optimize/lib/themes/amsterdam/index.js +18 -0
- package/optimize/lib/themes/index.js +21 -1
- package/package.json +1 -1
- package/src/components/index.scss +0 -1
- package/src/components/selectable/selectable_message/_selectable_message.scss +1 -0
- package/src/themes/amsterdam/overrides/_index.scss +0 -1
- package/test-env/components/accessibility/skip_link/skip_link.js +40 -2
- package/test-env/components/accessibility/skip_link/skip_link.styles.js +1 -1
- package/test-env/components/button/{button_content.js → _button_content_deprecated.js} +6 -5
- package/test-env/components/button/button.js +19 -13
- package/test-env/components/button/button_display/_button_display.js +143 -0
- package/test-env/components/button/button_display/_button_display.styles.js +59 -0
- package/test-env/components/button/button_display/_button_display_content.js +108 -0
- package/test-env/components/button/button_display/_button_display_content.styles.js +64 -0
- package/test-env/components/button/button_empty/button_empty.js +4 -3
- package/test-env/components/button/button_group/button_group.js +2 -1
- package/test-env/components/button/button_group/button_group_button.js +3 -2
- package/test-env/components/call_out/call_out.js +2 -1
- package/test-env/components/card/card.js +2 -1
- package/test-env/components/card/card_select.js +2 -1
- package/test-env/components/date_picker/auto_refresh/auto_refresh.js +2 -1
- package/test-env/components/facet/facet_button.js +35 -15
- package/test-env/components/facet/facet_button.styles.js +79 -0
- package/test-env/components/facet/facet_group.js +12 -23
- package/test-env/components/facet/facet_group.styles.js +82 -0
- package/test-env/components/header/header_links/header_link.js +2 -1
- package/test-env/components/loading/loading_spinner.js +14 -3
- package/test-env/components/loading/loading_spinner.styles.js +4 -4
- package/test-env/components/notification/notification_event.js +2 -1
- package/test-env/components/text/text.js +1 -3
- package/test-env/components/text/text_align.js +8 -2
- package/test-env/components/text/text_color.js +13 -3
- package/test-env/themes/amsterdam/index.js +18 -0
- package/test-env/themes/index.js +21 -1
- package/src/components/facet/_facet_button.scss +0 -69
- package/src/components/facet/_facet_group.scss +0 -24
- package/src/components/facet/_index.scss +0 -4
- package/src/components/facet/_variables.scss +0 -6
- 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
|
|
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
|
|
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
|
|
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
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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
|
-
|
|
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 =
|
|
64
|
-
|
|
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(
|
|
84
|
+
return ___EmotionJSX(EuiButtonDisplay, _extends({
|
|
70
85
|
className: classes,
|
|
71
|
-
|
|
72
|
-
|
|
86
|
+
css: cssStyles,
|
|
87
|
+
element: "button",
|
|
88
|
+
isDisabled: isDisabled,
|
|
73
89
|
ref: buttonRef,
|
|
74
|
-
title: rest['aria-label'] || innerText
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
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 {
|
|
20
|
-
import {
|
|
19
|
+
import { useEuiTheme } from '../../services';
|
|
20
|
+
import { euiFacetGroupStyles } from './facet_group.styles';
|
|
21
21
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
22
|
-
var
|
|
23
|
-
|
|
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
|
|
44
|
-
var
|
|
45
|
-
var
|
|
46
|
-
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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
|
|
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
|
|
26
|
-
return "".concat(highlight, " ").concat(
|
|
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, ";
|
|
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
|
|
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
|
|
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"
|
|
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
|
-
|
|
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';
|
package/es/themes/index.js
CHANGED
|
@@ -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';
|