@elastic/eui 95.1.0 → 95.2.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 +0 -240
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +0 -240
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/combo_box/combo_box_input/combo_box_input.js +2 -1
- package/es/components/context_menu/context_menu_item.js +1 -1
- package/es/components/form/file_picker/file_picker.js +49 -35
- package/es/components/form/file_picker/file_picker.styles.js +98 -0
- package/es/components/icon/assets/app_cases.js +9 -7
- package/es/components/icon/assets/logo_elastic_stack.js +6 -12
- package/es/components/steps/step.js +5 -3
- package/es/components/steps/step.styles.js +13 -5
- package/es/components/steps/step_horizontal.js +8 -3
- package/es/components/steps/step_horizontal.styles.js +1 -0
- package/es/components/steps/step_number.js +48 -24
- package/es/components/steps/step_number.styles.js +4 -2
- package/es/components/steps/steps.js +3 -1
- package/es/components/steps/steps_horizontal.js +1 -1
- package/es/services/theme/warning.js +7 -2
- package/eui.d.ts +72 -20
- package/i18ntokens.json +16 -16
- package/lib/components/combo_box/combo_box_input/combo_box_input.js +2 -1
- package/lib/components/context_menu/context_menu_item.js +1 -1
- package/lib/components/form/file_picker/file_picker.js +51 -37
- package/lib/components/form/file_picker/file_picker.styles.js +102 -0
- package/lib/components/icon/assets/app_cases.js +9 -7
- package/lib/components/icon/assets/logo_elastic_stack.js +6 -12
- package/lib/components/icon/svgs/app_cases.svg +6 -5
- package/lib/components/icon/svgs/logo_elastic_stack.svg +4 -7
- package/lib/components/steps/step.js +5 -3
- package/lib/components/steps/step.styles.js +13 -5
- package/lib/components/steps/step_horizontal.js +8 -3
- package/lib/components/steps/step_horizontal.styles.js +1 -0
- package/lib/components/steps/step_number.js +48 -24
- package/lib/components/steps/step_number.styles.js +3 -1
- package/lib/components/steps/steps.js +3 -1
- package/lib/components/steps/steps_horizontal.js +1 -1
- package/lib/services/theme/warning.js +7 -2
- package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +2 -1
- package/optimize/es/components/form/file_picker/file_picker.js +40 -34
- package/optimize/es/components/form/file_picker/file_picker.styles.js +98 -0
- package/optimize/es/components/icon/assets/app_cases.js +9 -7
- package/optimize/es/components/icon/assets/logo_elastic_stack.js +6 -12
- package/optimize/es/components/steps/step.js +2 -2
- package/optimize/es/components/steps/step.styles.js +13 -5
- package/optimize/es/components/steps/step_horizontal.js +8 -3
- package/optimize/es/components/steps/step_horizontal.styles.js +1 -0
- package/optimize/es/components/steps/step_number.js +44 -22
- package/optimize/es/components/steps/step_number.styles.js +4 -2
- package/optimize/es/components/steps/steps_horizontal.js +1 -1
- package/optimize/es/services/theme/warning.js +7 -2
- package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +2 -1
- package/optimize/lib/components/form/file_picker/file_picker.js +42 -36
- package/optimize/lib/components/form/file_picker/file_picker.styles.js +102 -0
- package/optimize/lib/components/icon/assets/app_cases.js +9 -7
- package/optimize/lib/components/icon/assets/logo_elastic_stack.js +6 -12
- package/optimize/lib/components/icon/svgs/app_cases.svg +6 -5
- package/optimize/lib/components/icon/svgs/logo_elastic_stack.svg +4 -7
- package/optimize/lib/components/steps/step.js +2 -2
- package/optimize/lib/components/steps/step.styles.js +13 -5
- package/optimize/lib/components/steps/step_horizontal.js +8 -3
- package/optimize/lib/components/steps/step_horizontal.styles.js +1 -0
- package/optimize/lib/components/steps/step_number.js +44 -22
- package/optimize/lib/components/steps/step_number.styles.js +3 -1
- package/optimize/lib/components/steps/steps_horizontal.js +1 -1
- package/optimize/lib/services/theme/warning.js +7 -2
- package/package.json +1 -1
- package/src/components/form/_index.scss +0 -1
- package/test-env/components/combo_box/combo_box_input/combo_box_input.js +2 -1
- package/test-env/components/context_menu/context_menu_item.js +1 -1
- package/test-env/components/form/file_picker/file_picker.js +46 -37
- package/test-env/components/form/file_picker/file_picker.styles.js +102 -0
- package/test-env/components/icon/assets/app_cases.js +9 -7
- package/test-env/components/icon/assets/logo_elastic_stack.js +6 -12
- package/test-env/components/steps/step.js +5 -3
- package/test-env/components/steps/step.styles.js +13 -5
- package/test-env/components/steps/step_horizontal.js +8 -3
- package/test-env/components/steps/step_horizontal.styles.js +1 -0
- package/test-env/components/steps/step_number.js +48 -24
- package/test-env/components/steps/step_number.styles.js +3 -1
- package/test-env/components/steps/steps.js +3 -1
- package/test-env/components/steps/steps_horizontal.js +1 -1
- package/test-env/services/theme/warning.js +7 -2
- package/src/components/form/file_picker/_file_picker.scss +0 -212
- package/src/components/form/file_picker/_index.scss +0 -2
- package/src/components/form/file_picker/_variables.scss +0 -1
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.euiFilePickerStyles = void 0;
|
|
7
|
+
var _react = require("@emotion/react");
|
|
8
|
+
var _global_styling = require("../../../global_styling");
|
|
9
|
+
var _form = require("../form.styles");
|
|
10
|
+
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)."; } /*
|
|
11
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
12
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
13
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
14
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
15
|
+
* Side Public License, v 1.
|
|
16
|
+
*/
|
|
17
|
+
var _ref = process.env.NODE_ENV === "production" ? {
|
|
18
|
+
name: "6h1iuq-euiFilePicker__clearButton",
|
|
19
|
+
styles: "pointer-events:auto;position:relative;label:euiFilePicker__clearButton;"
|
|
20
|
+
} : {
|
|
21
|
+
name: "6h1iuq-euiFilePicker__clearButton",
|
|
22
|
+
styles: "pointer-events:auto;position:relative;label:euiFilePicker__clearButton;",
|
|
23
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
24
|
+
};
|
|
25
|
+
var _ref2 = process.env.NODE_ENV === "production" ? {
|
|
26
|
+
name: "d8me89-euiFilePicker__rightIcon",
|
|
27
|
+
styles: "position:absolute;label:euiFilePicker__rightIcon;"
|
|
28
|
+
} : {
|
|
29
|
+
name: "d8me89-euiFilePicker__rightIcon",
|
|
30
|
+
styles: "position:absolute;label:euiFilePicker__rightIcon;",
|
|
31
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
32
|
+
};
|
|
33
|
+
var _ref3 = process.env.NODE_ENV === "production" ? {
|
|
34
|
+
name: "19x04ih-largeInteractive",
|
|
35
|
+
styles: "&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:underline;}.euiFilePicker__icon{transform:scale(1.1);}}};label:largeInteractive;"
|
|
36
|
+
} : {
|
|
37
|
+
name: "19x04ih-largeInteractive",
|
|
38
|
+
styles: "&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:underline;}.euiFilePicker__icon{transform:scale(1.1);}}};label:largeInteractive;",
|
|
39
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
40
|
+
};
|
|
41
|
+
var _ref4 = process.env.NODE_ENV === "production" ? {
|
|
42
|
+
name: "1j9s7hu-euiFilePicker__input",
|
|
43
|
+
styles: "position:absolute;inset:0;opacity:0;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;}&:disabled{opacity:0;};label:euiFilePicker__input;"
|
|
44
|
+
} : {
|
|
45
|
+
name: "1j9s7hu-euiFilePicker__input",
|
|
46
|
+
styles: "position:absolute;inset:0;opacity:0;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;}&:disabled{opacity:0;};label:euiFilePicker__input;",
|
|
47
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
48
|
+
};
|
|
49
|
+
var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
|
|
50
|
+
var euiTheme = euiThemeContext.euiTheme;
|
|
51
|
+
var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
|
|
52
|
+
var formVariables = (0, _form.euiFormVariables)(euiThemeContext);
|
|
53
|
+
var _euiFontSize = (0, _global_styling.euiFontSize)(euiThemeContext, 's'),
|
|
54
|
+
fontSize = _euiFontSize.fontSize,
|
|
55
|
+
lineHeight = _euiFontSize.lineHeight;
|
|
56
|
+
return {
|
|
57
|
+
euiFilePicker: /*#__PURE__*/(0, _react.css)("--euiFormControlLeftIconsCount:1;position:relative;&:has(input:focus){--euiFormControlStateColor:", euiTheme.colors.primary, ";};label:euiFilePicker;"),
|
|
58
|
+
isDroppingFile: /*#__PURE__*/(0, _react.css)("--euiFormControlStateColor:", euiTheme.colors.primary, ";;label:isDroppingFile;"),
|
|
59
|
+
invalid: /*#__PURE__*/(0, _react.css)("--euiFormControlStateColor:", euiTheme.colors.danger, ";;label:invalid;"),
|
|
60
|
+
hasFiles: /*#__PURE__*/(0, _react.css)("--euiFormControlRightIconsCount:1;font-weight:", euiTheme.font.weight.bold, ";;label:hasFiles;"),
|
|
61
|
+
loading: /*#__PURE__*/(0, _react.css)("--euiFormControlRightIconsCount:1;border-radius:", formVariables.controlCompressedBorderRadius, ";overflow:hidden;;label:loading;"),
|
|
62
|
+
// Skip the css() on the default width to avoid generating a className
|
|
63
|
+
formWidth: formStyles.formWidth,
|
|
64
|
+
fullWidth: /*#__PURE__*/(0, _react.css)(formStyles.fullWidth, ";label:fullWidth;"),
|
|
65
|
+
// The input is an invisible dropzone / button
|
|
66
|
+
input: {
|
|
67
|
+
euiFilePicker__input: _ref4,
|
|
68
|
+
largeInteractive: _ref3
|
|
69
|
+
},
|
|
70
|
+
euiFilePicker__prompt: /*#__PURE__*/(0, _react.css)("pointer-events:none;font-size:", fontSize, ";line-height:1;", (0, _global_styling.euiTextTruncate)(), " color:", euiTheme.colors.text, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.colors.lightShade, ");", _global_styling.euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
|
|
71
|
+
disabled: /*#__PURE__*/(0, _react.css)(formStyles.disabled, ";label:disabled;"),
|
|
72
|
+
// Skip the css() on the default height to avoid generating a className
|
|
73
|
+
uncompressed: formStyles.uncompressed,
|
|
74
|
+
compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, ";label:compressed;"),
|
|
75
|
+
// Completely different rendering style from the normal form controls
|
|
76
|
+
large: {
|
|
77
|
+
large: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.l, ";display:flex;flex-direction:column;align-items:center;justify-content:center;.euiFilePicker__promptText{", (0, _global_styling.euiTextTruncate)(), " line-height:", lineHeight, ";};label:large;"),
|
|
78
|
+
// Static heights so that surrounding contents don't shift around
|
|
79
|
+
uncompressed: "\n ".concat((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
|
|
80
|
+
return x * 8;
|
|
81
|
+
})), "\n border-radius: ").concat(formVariables.controlBorderRadius, ";\n "),
|
|
82
|
+
compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
|
|
83
|
+
return x * 6.5;
|
|
84
|
+
})), " border-radius:", formVariables.controlCompressedBorderRadius, ";;label:compressed;")
|
|
85
|
+
},
|
|
86
|
+
icon: {
|
|
87
|
+
euiFilePicker__icon: /*#__PURE__*/(0, _react.css)(";label:euiFilePicker__icon;"),
|
|
88
|
+
normal: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:normal;"),
|
|
89
|
+
uncompressed: "\n ".concat((0, _global_styling.logicalCSS)('left', euiTheme.size.m), "\n "),
|
|
90
|
+
compresssed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('width', euiTheme.size.m), ";;label:compresssed;"),
|
|
91
|
+
large: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), " ", _global_styling.euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:large;")
|
|
92
|
+
},
|
|
93
|
+
rightIcon: {
|
|
94
|
+
euiFilePicker__rightIcon: _ref2,
|
|
95
|
+
uncompressed: "\n ".concat((0, _global_styling.logicalCSS)('top', euiTheme.size.m), "\n ").concat((0, _global_styling.logicalCSS)('right', euiTheme.size.m), "\n "),
|
|
96
|
+
compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('top', '50%'), " ", (0, _global_styling.logicalCSS)('margin-top', (0, _global_styling.mathWithUnits)(euiTheme.size.m, function (x) {
|
|
97
|
+
return x / -2;
|
|
98
|
+
})), ";;label:compressed;")
|
|
99
|
+
},
|
|
100
|
+
euiFilePicker__clearButton: _ref
|
|
101
|
+
};
|
|
102
|
+
};
|
|
@@ -29,21 +29,23 @@ var EuiIconAppCases = function EuiIconAppCases(_ref) {
|
|
|
29
29
|
xmlns: "http://www.w3.org/2000/svg",
|
|
30
30
|
width: 32,
|
|
31
31
|
height: 32,
|
|
32
|
-
fill: "none",
|
|
33
32
|
viewBox: "0 0 32 32",
|
|
34
33
|
"aria-labelledby": titleId
|
|
35
34
|
}, props), title ? (0, _react2.jsx)("title", {
|
|
36
35
|
id: titleId
|
|
37
36
|
}, title) : null, (0, _react2.jsx)("path", {
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
d: "M4 6h22v7h-2V8H6v19H4V6Z",
|
|
38
|
+
className: "euiIcon__fillSecondary"
|
|
39
|
+
}), (0, _react2.jsx)("path", {
|
|
40
|
+
d: "M10 12H7v-2h3v2Zm1 0h12v-2H11v2Z",
|
|
41
|
+
className: "euiIcon__fillSecondary"
|
|
42
|
+
}), (0, _react2.jsx)("path", {
|
|
43
|
+
d: "M24 1H0v26h1l-1 .001v.026a2.256 2.256 0 0 0 .01.185 4.318 4.318 0 0 0 .563 1.792C1.194 30.064 2.399 31 4.5 31H17v-2H8.429a4.32 4.32 0 0 0 .57-1.927v-.062L9 27.005v-.003S9 27 8 27h1V16h21v3h2v-5H7v12.995l-.003.05a2.32 2.32 0 0 1-.298.95C6.442 28.436 5.898 29 4.5 29c-1.398 0-1.942-.564-2.199-1.004a2.32 2.32 0 0 1-.3-1.001L2 26.992V3h20v3h2V1Z"
|
|
40
44
|
}), (0, _react2.jsx)("path", {
|
|
41
|
-
d: "
|
|
45
|
+
d: "M23 21v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2Z"
|
|
42
46
|
}), (0, _react2.jsx)("path", {
|
|
43
47
|
fillRule: "evenodd",
|
|
44
|
-
d: "
|
|
45
|
-
className: "euiIcon__fillSecondary",
|
|
46
|
-
clipRule: "evenodd"
|
|
48
|
+
d: "M24 32a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm0-2a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z"
|
|
47
49
|
}));
|
|
48
50
|
};
|
|
49
51
|
var icon = exports.icon = EuiIconAppCases;
|
|
@@ -33,21 +33,15 @@ var EuiIconLogoElasticStack = function EuiIconLogoElasticStack(_ref) {
|
|
|
33
33
|
"aria-labelledby": titleId
|
|
34
34
|
}, props), title ? (0, _react2.jsx)("title", {
|
|
35
35
|
id: titleId
|
|
36
|
-
}, title) : null, (0, _react2.jsx)("
|
|
37
|
-
fill: "none",
|
|
38
|
-
fillRule: "evenodd"
|
|
39
|
-
}, (0, _react2.jsx)("path", {
|
|
36
|
+
}, title) : null, (0, _react2.jsx)("path", {
|
|
40
37
|
fill: "#F04E98",
|
|
41
|
-
d: "
|
|
38
|
+
d: "M0 2.37A2.37 2.37 0 0 1 2.37 0h27.26A2.37 2.37 0 0 1 32 2.37v6.52H0V2.37Z"
|
|
42
39
|
}), (0, _react2.jsx)("path", {
|
|
43
40
|
fill: "#00BFB3",
|
|
44
|
-
d: "M0
|
|
41
|
+
d: "M0 20.148h32v-8.296H0v8.296Z"
|
|
45
42
|
}), (0, _react2.jsx)("path", {
|
|
46
|
-
fill: "#
|
|
47
|
-
d: "
|
|
48
|
-
})
|
|
49
|
-
fill: "#FEC514",
|
|
50
|
-
d: "M17.5 23v9h12a2.5 2.5 0 0 0 2.5-2.5V23H17.5Z"
|
|
51
|
-
})));
|
|
43
|
+
fill: "#07C",
|
|
44
|
+
d: "M0 23.111h32v6.519A2.37 2.37 0 0 1 29.63 32H2.37A2.37 2.37 0 0 1 0 29.63v-6.52Z"
|
|
45
|
+
}));
|
|
52
46
|
};
|
|
53
47
|
var icon = exports.icon = EuiIconLogoElasticStack;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
<svg width="32" height="32" viewBox="0 0 32 32"
|
|
2
|
-
<path
|
|
3
|
-
<path d="
|
|
4
|
-
<path d="
|
|
5
|
-
<path
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
2
|
+
<path class="euiIcon__fillSecondary" d="M4 6h22v7h-2V8H6v19H4V6Z"/>
|
|
3
|
+
<path class="euiIcon__fillSecondary" d="M10 12H7v-2h3v2Zm1 0h12v-2H11v2Z"/>
|
|
4
|
+
<path d="M24 1H0v26h1l-1 .001v.026a2.256 2.256 0 0 0 .01.185 4.318 4.318 0 0 0 .563 1.792C1.194 30.064 2.399 31 4.5 31H17v-2H8.429a4.32 4.32 0 0 0 .57-1.927v-.062L9 27.005v-.003S9 27 8 27h1V16h21v3h2v-5H7v12.995l-.003.05a2.32 2.32 0 0 1-.298.95C6.442 28.436 5.898 29 4.5 29c-1.398 0-1.942-.564-2.199-1.004a2.32 2.32 0 0 1-.3-1.001L2 26.992V3h20v3h2V1Z"/>
|
|
5
|
+
<path d="M23 21v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2Z"/>
|
|
6
|
+
<path fill-rule="evenodd" d="M24 32a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm0-2a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z"/>
|
|
6
7
|
</svg>
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
2
|
-
|
|
3
|
-
<path fill="#
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
<path fill="#FEC514" d="M17.5,23 L17.5,32 L29.5,32 C30.881,32 32,30.881 32,29.5 L32,23 L17.5,23 Z"/>
|
|
7
|
-
</g>
|
|
8
|
-
</svg>
|
|
2
|
+
<path fill="#F04E98" d="M0 2.37A2.37 2.37 0 0 1 2.37 0h27.26A2.37 2.37 0 0 1 32 2.37v6.52H0V2.37Z"/>
|
|
3
|
+
<path fill="#00BFB3" d="M0 20.148h32v-8.296H0v8.296Z"/>
|
|
4
|
+
<path fill="#07C" d="M0 23.111h32v6.519A2.37 2.37 0 0 1 29.63 32H2.37A2.37 2.37 0 0 1 0 29.63v-6.52Z"/>
|
|
5
|
+
</svg>
|
|
@@ -57,9 +57,9 @@ var EuiStep = exports.EuiStep = function EuiStep(_ref) {
|
|
|
57
57
|
}, (0, _react2.jsx)(_step_number.EuiStepNumber, {
|
|
58
58
|
number: step,
|
|
59
59
|
status: status,
|
|
60
|
-
titleSize: titleSize
|
|
60
|
+
titleSize: titleSize === 'xxs' ? 'none' : titleSize
|
|
61
61
|
}), (0, _react2.jsx)(_title.EuiTitle, {
|
|
62
|
-
size: titleSize,
|
|
62
|
+
size: titleSize === 'xxs' ? 'xs' : titleSize,
|
|
63
63
|
className: "euiStep__title",
|
|
64
64
|
css: cssStepTitleStyles
|
|
65
65
|
}, /*#__PURE__*/(0, _react.createElement)(headingElement, null, title))), (0, _react2.jsx)("div", {
|
|
@@ -90,7 +90,9 @@ EuiStep.propTypes = {
|
|
|
90
90
|
*/
|
|
91
91
|
status: _propTypes.default.any,
|
|
92
92
|
/**
|
|
93
|
-
* Title sizing equivalent to EuiTitle
|
|
93
|
+
* Title sizing equivalent to **EuiTitle**, but only `m`, `s`, `xs` font sizes.
|
|
94
|
+
* The `xxs` size reduces the size of the accompanying step indicator, but not the title itself.
|
|
95
|
+
* @default s
|
|
94
96
|
*/
|
|
95
97
|
titleSize: _propTypes.default.any
|
|
96
98
|
};
|
|
@@ -19,6 +19,7 @@ var euiStepVariables = exports.euiStepVariables = function euiStepVariables(euiT
|
|
|
19
19
|
return {
|
|
20
20
|
numberSize: euiTheme.size.xl,
|
|
21
21
|
numberXSSize: euiTheme.size.l,
|
|
22
|
+
numberXXSSize: euiTheme.size.base,
|
|
22
23
|
numberMargin: euiTheme.size.base
|
|
23
24
|
};
|
|
24
25
|
};
|
|
@@ -38,9 +39,10 @@ var euiStepStyles = exports.euiStepStyles = function euiStepStyles(euiThemeConte
|
|
|
38
39
|
return {
|
|
39
40
|
euiStep: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-image:", lineGradient, ";background-repeat:no-repeat;};label:euiStep;"),
|
|
40
41
|
// Sizes
|
|
41
|
-
m: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ",
|
|
42
|
-
s: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ",
|
|
43
|
-
xs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ",
|
|
42
|
+
m: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiStep.numberSize, ";};label:m;"),
|
|
43
|
+
s: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiStep.numberSize, ";};label:s;"),
|
|
44
|
+
xs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiStep.numberXSSize, ";};label:xs;"),
|
|
45
|
+
xxs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:-", euiTheme.size.s, " ", euiStep.numberXXSSize, ";};label:xxs;")
|
|
44
46
|
};
|
|
45
47
|
};
|
|
46
48
|
var euiStepContentStyles = exports.euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
|
|
@@ -64,7 +66,12 @@ var euiStepContentStyles = exports.euiStepContentStyles = function euiStepConten
|
|
|
64
66
|
return x / 2 + y;
|
|
65
67
|
})), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberXSSize, function (x) {
|
|
66
68
|
return x / 2;
|
|
67
|
-
})), ";;label:xs;")
|
|
69
|
+
})), ";;label:xs;"),
|
|
70
|
+
xxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', (0, _global_styling.mathWithUnits)([euiStep.numberXXSSize, euiStep.numberMargin], function (x, y) {
|
|
71
|
+
return x / 2 + y;
|
|
72
|
+
})), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberXXSSize, function (x) {
|
|
73
|
+
return x / 2;
|
|
74
|
+
})), ";;label:xxs;")
|
|
68
75
|
};
|
|
69
76
|
};
|
|
70
77
|
var euiStepTitleStyles = exports.euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
|
|
@@ -77,6 +84,7 @@ var euiStepTitleStyles = exports.euiStepTitleStyles = function euiStepTitleStyle
|
|
|
77
84
|
// Sizes
|
|
78
85
|
m: /*#__PURE__*/(0, _react.css)(";label:m;"),
|
|
79
86
|
s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), ";;label:s;"),
|
|
80
|
-
xs: /*#__PURE__*/(0, _react.css)(";label:xs;")
|
|
87
|
+
xs: /*#__PURE__*/(0, _react.css)(";label:xs;"),
|
|
88
|
+
xxs: /*#__PURE__*/(0, _react.css)("line-height:", euiStep.numberXXSSize, ";;label:xxs;")
|
|
81
89
|
};
|
|
82
90
|
};
|
|
@@ -7,9 +7,9 @@ exports.EuiStepHorizontal = void 0;
|
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _services = require("../../services");
|
|
10
11
|
var _step_number = require("./step_number");
|
|
11
12
|
var _step_strings = require("./step_strings");
|
|
12
|
-
var _services = require("../../services");
|
|
13
13
|
var _step_horizontal = require("./step_horizontal.styles");
|
|
14
14
|
var _react2 = require("@emotion/react");
|
|
15
15
|
var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size"];
|
|
@@ -24,6 +24,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
24
24
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
25
25
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
26
26
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
|
|
27
|
+
// The titleSize map is not 1 to 1; small == xs on the titleSize map
|
|
28
|
+
var stepNumberSizeMap = {
|
|
29
|
+
xs: 'none',
|
|
30
|
+
s: 'xs',
|
|
31
|
+
m: 'm'
|
|
32
|
+
};
|
|
27
33
|
var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_ref) {
|
|
28
34
|
var className = _ref.className,
|
|
29
35
|
_ref$step = _ref.step,
|
|
@@ -95,8 +101,7 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
|
|
|
95
101
|
className: "euiStepHorizontal__number",
|
|
96
102
|
status: status,
|
|
97
103
|
number: step,
|
|
98
|
-
titleSize: size
|
|
99
|
-
,
|
|
104
|
+
titleSize: stepNumberSizeMap[size],
|
|
100
105
|
css: cssNumberStyles
|
|
101
106
|
}), (0, _react2.jsx)("span", {
|
|
102
107
|
className: "euiStepHorizontal__title",
|
|
@@ -44,6 +44,7 @@ var euiStepHorizontalStyles = exports.euiStepHorizontalStyles = function euiStep
|
|
|
44
44
|
// Adjust the size of the step number and connecting lines based on size
|
|
45
45
|
m: _generateStepSizeAndInset(euiStep.numberSize),
|
|
46
46
|
s: _generateStepSizeAndInset(euiStep.numberXSSize),
|
|
47
|
+
xs: _generateStepSizeAndInset(euiStep.numberXXSSize),
|
|
47
48
|
// Note: these selectors must be nested because focus/hover state
|
|
48
49
|
// is on the parent container, but affects specific children
|
|
49
50
|
enabled: /*#__PURE__*/(0, _react.css)("&:focus,&:hover{.euiStepHorizontal__title{text-decoration:underline;}}&:focus{outline:none;.euiStepHorizontal__number{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}.euiStepHorizontal__number:not(:focus-visible){outline:", euiTheme.focus.width, " solid ", euiTheme.colors.darkestShade, ";}};label:enabled;"),
|
|
@@ -9,9 +9,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _accessibility = require("../accessibility");
|
|
11
11
|
var _icon = require("../icon");
|
|
12
|
-
var _step_strings = require("./step_strings");
|
|
13
12
|
var _loading = require("../loading");
|
|
14
13
|
var _services = require("../../services");
|
|
14
|
+
var _step_strings = require("./step_strings");
|
|
15
15
|
var _step_number = require("./step_number.styles");
|
|
16
16
|
var _react2 = require("@emotion/react");
|
|
17
17
|
var _excluded = ["className", "status", "number", "titleSize"];
|
|
@@ -70,37 +70,59 @@ var EuiStepNumber = exports.EuiStepNumber = function EuiStepNumber(_ref) {
|
|
|
70
70
|
switch (status) {
|
|
71
71
|
// Loading spinner
|
|
72
72
|
case 'loading':
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
73
|
+
{
|
|
74
|
+
var iconSizeMap = {
|
|
75
|
+
none: 'm',
|
|
76
|
+
xs: 'l',
|
|
77
|
+
s: 'xl',
|
|
78
|
+
m: 'xl'
|
|
79
|
+
};
|
|
80
|
+
screenReaderText = ariaLabelsMap.loading;
|
|
81
|
+
content = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
|
|
82
|
+
className: "euiStepNumber__loader",
|
|
83
|
+
size: iconSizeMap[titleSize]
|
|
84
|
+
});
|
|
85
|
+
break;
|
|
86
|
+
}
|
|
79
87
|
// Statuses with icons
|
|
80
88
|
case 'danger':
|
|
81
89
|
case 'warning':
|
|
82
90
|
case 'complete':
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
91
|
+
{
|
|
92
|
+
var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status],
|
|
93
|
+
// EuiIcon does not support a xxs size so far,
|
|
94
|
+
// we use custom sizing here instead
|
|
95
|
+
titleSize === 'none' && contentStyles[titleSize]];
|
|
96
|
+
var iconTypeMap = {
|
|
97
|
+
danger: 'cross',
|
|
98
|
+
warning: 'warning',
|
|
99
|
+
complete: 'check'
|
|
100
|
+
};
|
|
101
|
+
var _iconSizeMap = {
|
|
102
|
+
xxs: 's',
|
|
103
|
+
xs: 's',
|
|
104
|
+
s: 'm',
|
|
105
|
+
m: 'm'
|
|
106
|
+
};
|
|
107
|
+
content = (0, _react2.jsx)(_icon.EuiIcon, {
|
|
108
|
+
type: iconTypeMap[status],
|
|
109
|
+
"aria-label": ariaLabelsMap[status],
|
|
110
|
+
size: _iconSizeMap[titleSize],
|
|
111
|
+
className: "euiStepNumber__icon",
|
|
112
|
+
css: cssIconStyles
|
|
113
|
+
});
|
|
114
|
+
break;
|
|
115
|
+
}
|
|
97
116
|
// Statuses with numbers
|
|
98
117
|
case 'incomplete':
|
|
99
118
|
case 'current':
|
|
100
119
|
case 'disabled':
|
|
101
120
|
default:
|
|
102
|
-
var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
|
|
103
121
|
screenReaderText = ariaLabelsMap[status || 'step'];
|
|
122
|
+
if (titleSize === 'none') {
|
|
123
|
+
break;
|
|
124
|
+
}
|
|
125
|
+
var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
|
|
104
126
|
content = (0, _react2.jsx)("span", {
|
|
105
127
|
"aria-hidden": "true",
|
|
106
128
|
className: "euiStepNumber__number",
|
|
@@ -120,9 +142,11 @@ EuiStepNumber.propTypes = {
|
|
|
120
142
|
status: _propTypes.default.any,
|
|
121
143
|
number: _propTypes.default.number,
|
|
122
144
|
/**
|
|
123
|
-
* Title sizing equivalent to EuiTitle, but only `m`, `s
|
|
145
|
+
* Title sizing equivalent to EuiTitle, but only `m`, `s`, `xs`.
|
|
146
|
+
* `none` indicates no step number should be rendered.
|
|
147
|
+
* @default s
|
|
124
148
|
*/
|
|
125
|
-
titleSize: _propTypes.default.any,
|
|
149
|
+
titleSize: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["none"])]),
|
|
126
150
|
className: _propTypes.default.string,
|
|
127
151
|
"aria-label": _propTypes.default.string,
|
|
128
152
|
"data-test-subj": _propTypes.default.string,
|
|
@@ -43,6 +43,7 @@ var euiStepNumberStyles = exports.euiStepNumberStyles = function euiStepNumberSt
|
|
|
43
43
|
m: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:m;"),
|
|
44
44
|
s: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:s;"),
|
|
45
45
|
xs: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:xs;"),
|
|
46
|
+
none: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:none;"),
|
|
46
47
|
// status
|
|
47
48
|
incomplete: /*#__PURE__*/(0, _react.css)("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
|
|
48
49
|
disabled: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled'), ";;label:disabled;"),
|
|
@@ -70,6 +71,7 @@ var euiStepNumberContentStyles = exports.euiStepNumberContentStyles = function e
|
|
|
70
71
|
incomplete: /*#__PURE__*/(0, _react.css)("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
|
|
71
72
|
loading: /*#__PURE__*/(0, _react.css)(";label:loading;"),
|
|
72
73
|
disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;"),
|
|
73
|
-
current: /*#__PURE__*/(0, _react.css)("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;")
|
|
74
|
+
current: /*#__PURE__*/(0, _react.css)("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;"),
|
|
75
|
+
none: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s), ";label:none;")
|
|
74
76
|
};
|
|
75
77
|
};
|
|
@@ -68,7 +68,9 @@ EuiSteps.propTypes = {
|
|
|
68
68
|
*/
|
|
69
69
|
headingElement: _propTypes.default.string,
|
|
70
70
|
/**
|
|
71
|
-
* Title sizing equivalent to EuiTitle
|
|
71
|
+
* Title sizing equivalent to **EuiTitle**, but only `m`, `s`, `xs` font sizes.
|
|
72
|
+
* The `xxs` size reduces the size of the accompanying step indicator, but not the title itself.
|
|
73
|
+
* @default s
|
|
72
74
|
*/
|
|
73
75
|
titleSize: _propTypes.default.any,
|
|
74
76
|
className: _propTypes.default.string,
|
|
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
22
22
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
23
23
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
24
24
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
|
|
25
|
-
var SIZES = exports.SIZES = ['s', 'm'];
|
|
25
|
+
var SIZES = exports.SIZES = ['xs', 's', 'm'];
|
|
26
26
|
var EuiStepsHorizontal = exports.EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
|
|
27
27
|
var className = _ref.className,
|
|
28
28
|
steps = _ref.steps,
|
|
@@ -13,8 +13,8 @@ exports.setEuiDevProviderWarning = exports.getEuiDevProviderWarning = exports.em
|
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
var providerWarning = undefined;
|
|
16
|
-
var setEuiDevProviderWarning = exports.setEuiDevProviderWarning = function setEuiDevProviderWarning(
|
|
17
|
-
return providerWarning =
|
|
16
|
+
var setEuiDevProviderWarning = exports.setEuiDevProviderWarning = function setEuiDevProviderWarning(warningType) {
|
|
17
|
+
return providerWarning = warningType;
|
|
18
18
|
};
|
|
19
19
|
var getEuiDevProviderWarning = exports.getEuiDevProviderWarning = function getEuiDevProviderWarning() {
|
|
20
20
|
return providerWarning;
|
|
@@ -22,6 +22,11 @@ var getEuiDevProviderWarning = exports.getEuiDevProviderWarning = function getEu
|
|
|
22
22
|
|
|
23
23
|
// Not a public top-level EUI export, currently for internal use
|
|
24
24
|
var emitEuiProviderWarning = exports.emitEuiProviderWarning = function emitEuiProviderWarning(providerMessage) {
|
|
25
|
+
// Handle callback types
|
|
26
|
+
if (typeof providerWarning === 'function') {
|
|
27
|
+
return providerWarning(providerMessage);
|
|
28
|
+
}
|
|
29
|
+
// Handle level types
|
|
25
30
|
switch (providerWarning) {
|
|
26
31
|
case 'log':
|
|
27
32
|
console.log(providerMessage);
|
|
@@ -285,7 +285,8 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
|
|
|
285
285
|
},
|
|
286
286
|
placeholder: showPlaceholder ? placeholder : undefined,
|
|
287
287
|
value: this.searchValue,
|
|
288
|
-
autoFocus: autoFocus
|
|
288
|
+
autoFocus: autoFocus,
|
|
289
|
+
autoComplete: "off"
|
|
289
290
|
// Force the menu to re-open on every input click - only necessary when plain text
|
|
290
291
|
,
|
|
291
292
|
onClick: this.asPlainText ? onFocus : undefined // Type shenanigans - event should be mostly the same
|