@elastic/eui 71.1.0 → 72.0.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 +20 -28
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +20 -28
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/date_picker/auto_refresh/refresh_interval.js +3 -1
- package/es/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js +5 -2
- package/es/components/date_picker/super_date_picker/quick_select_popover/quick_select.js +3 -1
- package/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +160 -173
- package/es/components/date_picker/super_date_picker/quick_select_popover/recently_used.js +5 -2
- package/es/components/date_picker/super_date_picker/super_date_picker.js +16 -0
- package/es/components/error_boundary/error_boundary.a11y.js +67 -0
- package/es/components/expression/expression.a11y.js +254 -0
- package/es/components/filter_group/filter_group.a11y.js +281 -0
- package/es/components/focus_trap/focus_trap.a11y.js +131 -0
- package/es/components/form/file_picker/file_picker.js +1 -0
- package/es/components/header/header.a11y.js +374 -0
- package/es/components/icon/icon_ML.a11y.js +33 -0
- package/es/components/icon/icon_apps.a11y.js +33 -0
- package/es/components/icon/icon_editor.a11y.js +33 -0
- package/es/components/icon/icon_elastic.a11y.js +33 -0
- package/es/components/icon/icon_glyphs.a11y.js +33 -0
- package/es/components/icon/icon_tokens.a11y.js +33 -0
- package/es/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js +1 -1
- package/es/components/selectable/selectable.js +4 -3
- package/es/components/selectable/selectable_list/selectable_list.js +17 -5
- package/es/components/tabs/tab.js +7 -17
- package/es/components/tabs/tabbed_content/tabbed_content.js +0 -16
- package/es/components/tabs/tabs.js +7 -11
- package/es/components/tabs/tabs_context.js +13 -0
- package/eui.d.ts +41 -32
- package/i18ntokens.json +30 -14
- package/lib/components/date_picker/auto_refresh/refresh_interval.js +3 -1
- package/lib/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js +5 -2
- package/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select.js +3 -1
- package/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +155 -168
- package/lib/components/date_picker/super_date_picker/quick_select_popover/recently_used.js +5 -2
- package/lib/components/date_picker/super_date_picker/super_date_picker.js +16 -0
- package/lib/components/error_boundary/error_boundary.a11y.js +75 -0
- package/lib/components/expression/expression.a11y.js +262 -0
- package/lib/components/filter_group/filter_group.a11y.js +287 -0
- package/lib/components/focus_trap/focus_trap.a11y.js +140 -0
- package/lib/components/form/file_picker/file_picker.js +1 -0
- package/lib/components/header/header.a11y.js +385 -0
- package/lib/components/icon/icon_ML.a11y.js +40 -0
- package/lib/components/icon/icon_apps.a11y.js +40 -0
- package/lib/components/icon/icon_editor.a11y.js +40 -0
- package/lib/components/icon/icon_elastic.a11y.js +40 -0
- package/lib/components/icon/icon_glyphs.a11y.js +40 -0
- package/lib/components/icon/icon_tokens.a11y.js +40 -0
- package/lib/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js +2 -2
- package/lib/components/selectable/selectable.js +4 -3
- package/lib/components/selectable/selectable_list/selectable_list.js +17 -5
- package/lib/components/tabs/tab.js +14 -17
- package/lib/components/tabs/tabbed_content/tabbed_content.js +0 -16
- package/lib/components/tabs/tabs.js +8 -14
- package/lib/components/tabs/tabs_context.js +23 -0
- package/optimize/es/components/date_picker/auto_refresh/refresh_interval.js +3 -1
- package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js +5 -2
- package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/quick_select.js +3 -1
- package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +145 -169
- package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/recently_used.js +5 -2
- package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js +2 -0
- package/optimize/es/components/error_boundary/error_boundary.a11y.js +67 -0
- package/optimize/es/components/expression/expression.a11y.js +243 -0
- package/optimize/es/components/filter_group/filter_group.a11y.js +271 -0
- package/optimize/es/components/focus_trap/focus_trap.a11y.js +120 -0
- package/optimize/es/components/form/file_picker/file_picker.js +1 -0
- package/optimize/es/components/header/header.a11y.js +364 -0
- package/optimize/es/components/icon/icon_ML.a11y.js +33 -0
- package/optimize/es/components/icon/icon_apps.a11y.js +33 -0
- package/optimize/es/components/icon/icon_editor.a11y.js +33 -0
- package/optimize/es/components/icon/icon_elastic.a11y.js +33 -0
- package/optimize/es/components/icon/icon_glyphs.a11y.js +33 -0
- package/optimize/es/components/icon/icon_tokens.a11y.js +33 -0
- package/optimize/es/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js +1 -1
- package/optimize/es/components/selectable/selectable.js +2 -2
- package/optimize/es/components/selectable/selectable_list/selectable_list.js +15 -4
- package/optimize/es/components/tabs/tab.js +7 -5
- package/optimize/es/components/tabs/tabs.js +7 -11
- package/optimize/es/components/tabs/tabs_context.js +13 -0
- package/optimize/lib/components/date_picker/auto_refresh/refresh_interval.js +3 -1
- package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js +5 -2
- package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select.js +3 -1
- package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +146 -167
- package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/recently_used.js +5 -2
- package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js +2 -0
- package/optimize/lib/components/error_boundary/error_boundary.a11y.js +75 -0
- package/optimize/lib/components/expression/expression.a11y.js +254 -0
- package/optimize/lib/components/filter_group/filter_group.a11y.js +287 -0
- package/optimize/lib/components/focus_trap/focus_trap.a11y.js +140 -0
- package/optimize/lib/components/form/file_picker/file_picker.js +1 -0
- package/optimize/lib/components/header/header.a11y.js +385 -0
- package/optimize/lib/components/icon/icon_ML.a11y.js +40 -0
- package/optimize/lib/components/icon/icon_apps.a11y.js +40 -0
- package/optimize/lib/components/icon/icon_editor.a11y.js +40 -0
- package/optimize/lib/components/icon/icon_elastic.a11y.js +40 -0
- package/optimize/lib/components/icon/icon_glyphs.a11y.js +40 -0
- package/optimize/lib/components/icon/icon_tokens.a11y.js +40 -0
- package/optimize/lib/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js +2 -2
- package/optimize/lib/components/selectable/selectable.js +2 -2
- package/optimize/lib/components/selectable/selectable_list/selectable_list.js +15 -4
- package/optimize/lib/components/tabs/tab.js +15 -5
- package/optimize/lib/components/tabs/tabs.js +8 -14
- package/optimize/lib/components/tabs/tabs_context.js +23 -0
- package/package.json +4 -6
- package/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss +14 -0
- package/src/components/form/file_picker/_file_picker.scss +14 -14
- package/test-env/components/date_picker/auto_refresh/refresh_interval.js +3 -1
- package/test-env/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js +5 -2
- package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select.js +3 -1
- package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js +153 -166
- package/test-env/components/date_picker/super_date_picker/quick_select_popover/recently_used.js +5 -2
- package/test-env/components/date_picker/super_date_picker/super_date_picker.js +16 -0
- package/test-env/components/error_boundary/error_boundary.a11y.js +75 -0
- package/test-env/components/expression/expression.a11y.js +254 -0
- package/test-env/components/filter_group/filter_group.a11y.js +287 -0
- package/test-env/components/focus_trap/focus_trap.a11y.js +140 -0
- package/test-env/components/form/file_picker/file_picker.js +1 -0
- package/test-env/components/header/header.a11y.js +385 -0
- package/test-env/components/icon/icon_ML.a11y.js +40 -0
- package/test-env/components/icon/icon_apps.a11y.js +40 -0
- package/test-env/components/icon/icon_editor.a11y.js +40 -0
- package/test-env/components/icon/icon_elastic.a11y.js +40 -0
- package/test-env/components/icon/icon_glyphs.a11y.js +40 -0
- package/test-env/components/icon/icon_tokens.a11y.js +40 -0
- package/test-env/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js +2 -2
- package/test-env/components/selectable/selectable.js +4 -3
- package/test-env/components/selectable/selectable_list/selectable_list.js +17 -5
- package/test-env/components/tabs/tab.js +15 -17
- package/test-env/components/tabs/tabbed_content/tabbed_content.js +0 -16
- package/test-env/components/tabs/tabs.js +8 -14
- package/test-env/components/tabs/tabs_context.js +23 -0
|
@@ -0,0 +1,374 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
|
|
3
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
|
|
5
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
+
|
|
7
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
+
|
|
9
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
+
|
|
11
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
+
|
|
13
|
+
/*
|
|
14
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
15
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
16
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
17
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
18
|
+
* Side Public License, v 1.
|
|
19
|
+
*/
|
|
20
|
+
/// <reference types="../../../cypress/support"/>
|
|
21
|
+
import React, { useState } from 'react';
|
|
22
|
+
import { EuiAvatar } from '../avatar';
|
|
23
|
+
import { EuiFlexGroup, EuiFlexItem } from '../flex';
|
|
24
|
+
import { EuiHeaderBreadcrumbs } from './header_breadcrumbs';
|
|
25
|
+
import { EuiHeader } from './header';
|
|
26
|
+
import { EuiHeaderLogo } from './header_logo';
|
|
27
|
+
import { EuiHeaderSectionItemButton, EuiHeaderSectionItem, EuiHeaderSection } from './header_section';
|
|
28
|
+
import { EuiIcon } from '../icon';
|
|
29
|
+
import { EuiKeyPadMenu, EuiKeyPadMenuItem } from '../key_pad_menu';
|
|
30
|
+
import { EuiLink } from '../link';
|
|
31
|
+
import { EuiPopover, EuiPopoverTitle } from '../popover';
|
|
32
|
+
import { EuiSelectable, EuiSelectableMessage, EuiSelectableTemplateSitewide } from '../selectable';
|
|
33
|
+
import { EuiSpacer } from '../spacer';
|
|
34
|
+
import { EuiText } from '../text';
|
|
35
|
+
import { useGeneratedHtmlId } from '../../services';
|
|
36
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
37
|
+
|
|
38
|
+
var Header = function Header() {
|
|
39
|
+
var renderLogo = function renderLogo() {
|
|
40
|
+
return ___EmotionJSX(EuiHeaderLogo, {
|
|
41
|
+
iconType: "logoElastic",
|
|
42
|
+
href: "#",
|
|
43
|
+
onClick: function onClick(e) {
|
|
44
|
+
return e.preventDefault();
|
|
45
|
+
},
|
|
46
|
+
"aria-label": "Go to home page"
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
var renderBreadcrumbs = function renderBreadcrumbs() {
|
|
51
|
+
var breadcrumbs = [{
|
|
52
|
+
text: 'Management',
|
|
53
|
+
href: '#',
|
|
54
|
+
onClick: function onClick(e) {
|
|
55
|
+
e.preventDefault();
|
|
56
|
+
},
|
|
57
|
+
'data-test-subj': 'breadcrumbsAnimals',
|
|
58
|
+
className: 'customClass'
|
|
59
|
+
}, {
|
|
60
|
+
text: 'Truncation test is here for a really long item',
|
|
61
|
+
href: '#',
|
|
62
|
+
onClick: function onClick(e) {
|
|
63
|
+
e.preventDefault();
|
|
64
|
+
}
|
|
65
|
+
}, {
|
|
66
|
+
text: 'Hidden',
|
|
67
|
+
'data-test-subj': 'cy-breadcrumb-hidden',
|
|
68
|
+
href: '#',
|
|
69
|
+
onClick: function onClick(e) {
|
|
70
|
+
e.preventDefault();
|
|
71
|
+
}
|
|
72
|
+
}, {
|
|
73
|
+
text: 'Users',
|
|
74
|
+
href: '#',
|
|
75
|
+
onClick: function onClick(e) {
|
|
76
|
+
e.preventDefault();
|
|
77
|
+
}
|
|
78
|
+
}, {
|
|
79
|
+
text: 'Create'
|
|
80
|
+
}];
|
|
81
|
+
return ___EmotionJSX(EuiHeaderBreadcrumbs, {
|
|
82
|
+
"aria-label": "Header breadcrumbs example",
|
|
83
|
+
breadcrumbs: breadcrumbs
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
var search = ___EmotionJSX(EuiSelectableTemplateSitewide, {
|
|
88
|
+
options: [],
|
|
89
|
+
searchProps: {
|
|
90
|
+
compressed: true
|
|
91
|
+
},
|
|
92
|
+
popoverButton: ___EmotionJSX(EuiHeaderSectionItemButton, {
|
|
93
|
+
"aria-label": "Sitewide search"
|
|
94
|
+
}, ___EmotionJSX(EuiIcon, {
|
|
95
|
+
type: "search",
|
|
96
|
+
size: "m"
|
|
97
|
+
})),
|
|
98
|
+
emptyMessage: ___EmotionJSX(EuiSelectableMessage, {
|
|
99
|
+
style: {
|
|
100
|
+
minHeight: 300
|
|
101
|
+
},
|
|
102
|
+
"data-test-subj": "cy-search-menu"
|
|
103
|
+
}, ___EmotionJSX("p", null, "Please see the component page for", ' ', ___EmotionJSX("strong", null, "EuiSelectableTemplateSitewide"), "on how to configure your sitewide search."))
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
return ___EmotionJSX(EuiHeader, null, ___EmotionJSX(EuiHeaderSection, {
|
|
107
|
+
grow: false
|
|
108
|
+
}, ___EmotionJSX(EuiHeaderSectionItem, {
|
|
109
|
+
border: "right"
|
|
110
|
+
}, renderLogo()), ___EmotionJSX(EuiHeaderSectionItem, {
|
|
111
|
+
border: "right"
|
|
112
|
+
}, ___EmotionJSX(HeaderSpacesMenu, null))), renderBreadcrumbs(), ___EmotionJSX(EuiHeaderSection, {
|
|
113
|
+
side: "right"
|
|
114
|
+
}, ___EmotionJSX(EuiHeaderSectionItem, null, search), ___EmotionJSX(EuiHeaderSectionItem, null, ___EmotionJSX(HeaderUserMenu, null)), ___EmotionJSX(EuiHeaderSectionItem, null, ___EmotionJSX(HeaderAppMenu, null))));
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
var HeaderUserMenu = function HeaderUserMenu() {
|
|
118
|
+
var headerUserPopoverId = useGeneratedHtmlId({
|
|
119
|
+
prefix: 'headerUserPopover'
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
var _useState = useState(false),
|
|
123
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
124
|
+
isOpen = _useState2[0],
|
|
125
|
+
setIsOpen = _useState2[1];
|
|
126
|
+
|
|
127
|
+
var onMenuButtonClick = function onMenuButtonClick() {
|
|
128
|
+
setIsOpen(!isOpen);
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
var closeMenu = function closeMenu() {
|
|
132
|
+
setIsOpen(false);
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
var button = ___EmotionJSX(EuiHeaderSectionItemButton, {
|
|
136
|
+
"aria-controls": headerUserPopoverId,
|
|
137
|
+
"aria-expanded": isOpen,
|
|
138
|
+
"aria-haspopup": "true",
|
|
139
|
+
"aria-label": "Account menu",
|
|
140
|
+
onClick: onMenuButtonClick
|
|
141
|
+
}, ___EmotionJSX(EuiAvatar, {
|
|
142
|
+
name: "John Username",
|
|
143
|
+
size: "s"
|
|
144
|
+
}));
|
|
145
|
+
|
|
146
|
+
return ___EmotionJSX(EuiPopover, {
|
|
147
|
+
id: headerUserPopoverId,
|
|
148
|
+
button: button,
|
|
149
|
+
isOpen: isOpen,
|
|
150
|
+
anchorPosition: "downRight",
|
|
151
|
+
closePopover: closeMenu,
|
|
152
|
+
panelPaddingSize: "none",
|
|
153
|
+
"data-test-subj": "cy-account-menu"
|
|
154
|
+
}, ___EmotionJSX("div", {
|
|
155
|
+
style: {
|
|
156
|
+
width: 320
|
|
157
|
+
}
|
|
158
|
+
}, ___EmotionJSX(EuiFlexGroup, {
|
|
159
|
+
gutterSize: "m",
|
|
160
|
+
className: "euiHeaderProfile",
|
|
161
|
+
responsive: false
|
|
162
|
+
}, ___EmotionJSX(EuiFlexItem, {
|
|
163
|
+
grow: false
|
|
164
|
+
}, ___EmotionJSX(EuiAvatar, {
|
|
165
|
+
name: "John Username",
|
|
166
|
+
size: "xl"
|
|
167
|
+
})), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiText, null, ___EmotionJSX("p", null, "John Username")), ___EmotionJSX(EuiSpacer, {
|
|
168
|
+
size: "m"
|
|
169
|
+
}), ___EmotionJSX(EuiFlexGroup, null, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiFlexGroup, {
|
|
170
|
+
justifyContent: "spaceBetween"
|
|
171
|
+
}, ___EmotionJSX(EuiFlexItem, {
|
|
172
|
+
grow: false
|
|
173
|
+
}, ___EmotionJSX(EuiLink, null, "Edit profile")), ___EmotionJSX(EuiFlexItem, {
|
|
174
|
+
grow: false
|
|
175
|
+
}, ___EmotionJSX(EuiLink, null, "Log out")))))))));
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
var HeaderSpacesMenu = function HeaderSpacesMenu() {
|
|
179
|
+
var headerSpacesPopoverId = useGeneratedHtmlId({
|
|
180
|
+
prefix: 'headerSpacesPopover'
|
|
181
|
+
});
|
|
182
|
+
var spacesValues = [{
|
|
183
|
+
label: 'Sales team',
|
|
184
|
+
prepend: ___EmotionJSX(EuiAvatar, {
|
|
185
|
+
type: "space",
|
|
186
|
+
name: "Sales Team",
|
|
187
|
+
size: "s"
|
|
188
|
+
}),
|
|
189
|
+
checked: 'on'
|
|
190
|
+
}, {
|
|
191
|
+
label: 'Engineering',
|
|
192
|
+
prepend: ___EmotionJSX(EuiAvatar, {
|
|
193
|
+
type: "space",
|
|
194
|
+
name: "Engineering",
|
|
195
|
+
size: "s"
|
|
196
|
+
})
|
|
197
|
+
}];
|
|
198
|
+
|
|
199
|
+
var _useState3 = useState(spacesValues),
|
|
200
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
201
|
+
spaces = _useState4[0],
|
|
202
|
+
setSpaces = _useState4[1];
|
|
203
|
+
|
|
204
|
+
var _useState5 = useState(spaces.filter(function (option) {
|
|
205
|
+
return option.checked;
|
|
206
|
+
})[0]),
|
|
207
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
208
|
+
selectedSpace = _useState6[0],
|
|
209
|
+
setSelectedSpace = _useState6[1];
|
|
210
|
+
|
|
211
|
+
var _useState7 = useState(false),
|
|
212
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
213
|
+
isOpen = _useState8[0],
|
|
214
|
+
setIsOpen = _useState8[1];
|
|
215
|
+
|
|
216
|
+
var isListExtended = function isListExtended() {
|
|
217
|
+
return spaces.length > 4 ? true : false;
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
var onMenuButtonClick = function onMenuButtonClick() {
|
|
221
|
+
setIsOpen(!isOpen);
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
var closePopover = function closePopover() {
|
|
225
|
+
setIsOpen(false);
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
var onChange = function onChange(options) {
|
|
229
|
+
setSpaces(options);
|
|
230
|
+
setSelectedSpace(options.filter(function (option) {
|
|
231
|
+
return option.checked;
|
|
232
|
+
})[0]);
|
|
233
|
+
setIsOpen(false);
|
|
234
|
+
};
|
|
235
|
+
|
|
236
|
+
var button = ___EmotionJSX(EuiHeaderSectionItemButton, {
|
|
237
|
+
"aria-controls": headerSpacesPopoverId,
|
|
238
|
+
"aria-expanded": isOpen,
|
|
239
|
+
"aria-haspopup": "true",
|
|
240
|
+
"aria-label": "Spaces menu",
|
|
241
|
+
onClick: onMenuButtonClick
|
|
242
|
+
}, selectedSpace.prepend);
|
|
243
|
+
|
|
244
|
+
return ___EmotionJSX(EuiPopover, {
|
|
245
|
+
id: headerSpacesPopoverId,
|
|
246
|
+
button: button,
|
|
247
|
+
isOpen: isOpen,
|
|
248
|
+
anchorPosition: "downLeft",
|
|
249
|
+
closePopover: closePopover,
|
|
250
|
+
panelPaddingSize: "none"
|
|
251
|
+
}, ___EmotionJSX(EuiSelectable, {
|
|
252
|
+
searchable: isListExtended(),
|
|
253
|
+
searchProps: {
|
|
254
|
+
placeholder: 'Find a space',
|
|
255
|
+
compressed: true
|
|
256
|
+
},
|
|
257
|
+
options: spaces,
|
|
258
|
+
singleSelection: "always",
|
|
259
|
+
style: {
|
|
260
|
+
width: 300
|
|
261
|
+
},
|
|
262
|
+
onChange: onChange,
|
|
263
|
+
listProps: {
|
|
264
|
+
rowHeight: 40,
|
|
265
|
+
showIcons: false
|
|
266
|
+
},
|
|
267
|
+
"data-test-subj": "cy-spaces-menu"
|
|
268
|
+
}, function (list, search) {
|
|
269
|
+
return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiPopoverTitle, {
|
|
270
|
+
paddingSize: "s"
|
|
271
|
+
}, search || 'Your spaces'), list);
|
|
272
|
+
}));
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
var HeaderAppMenu = function HeaderAppMenu() {
|
|
276
|
+
var headerAppPopoverId = useGeneratedHtmlId({
|
|
277
|
+
prefix: 'headerAppPopover'
|
|
278
|
+
});
|
|
279
|
+
var headerAppKeyPadMenuId = useGeneratedHtmlId({
|
|
280
|
+
prefix: 'headerAppKeyPadMenu'
|
|
281
|
+
});
|
|
282
|
+
|
|
283
|
+
var _useState9 = useState(false),
|
|
284
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
285
|
+
isOpen = _useState10[0],
|
|
286
|
+
setIsOpen = _useState10[1];
|
|
287
|
+
|
|
288
|
+
var onMenuButtonClick = function onMenuButtonClick() {
|
|
289
|
+
setIsOpen(!isOpen);
|
|
290
|
+
};
|
|
291
|
+
|
|
292
|
+
var closeMenu = function closeMenu() {
|
|
293
|
+
setIsOpen(false);
|
|
294
|
+
};
|
|
295
|
+
|
|
296
|
+
var button = ___EmotionJSX(EuiHeaderSectionItemButton, {
|
|
297
|
+
"aria-controls": headerAppKeyPadMenuId,
|
|
298
|
+
"aria-expanded": isOpen,
|
|
299
|
+
"aria-haspopup": "true",
|
|
300
|
+
"aria-label": "Apps menu with 1 new app",
|
|
301
|
+
notification: "1",
|
|
302
|
+
onClick: onMenuButtonClick
|
|
303
|
+
}, ___EmotionJSX(EuiIcon, {
|
|
304
|
+
type: "apps",
|
|
305
|
+
size: "m"
|
|
306
|
+
}));
|
|
307
|
+
|
|
308
|
+
return ___EmotionJSX(EuiPopover, {
|
|
309
|
+
id: headerAppPopoverId,
|
|
310
|
+
button: button,
|
|
311
|
+
isOpen: isOpen,
|
|
312
|
+
anchorPosition: "downRight",
|
|
313
|
+
closePopover: closeMenu
|
|
314
|
+
}, ___EmotionJSX(EuiKeyPadMenu, {
|
|
315
|
+
id: headerAppKeyPadMenuId,
|
|
316
|
+
style: {
|
|
317
|
+
width: 288
|
|
318
|
+
},
|
|
319
|
+
"data-test-subj": "cy-apps-menu"
|
|
320
|
+
}, ___EmotionJSX(EuiKeyPadMenuItem, {
|
|
321
|
+
label: "Discover"
|
|
322
|
+
}, ___EmotionJSX(EuiIcon, {
|
|
323
|
+
type: "discoverApp",
|
|
324
|
+
size: "l"
|
|
325
|
+
})), ___EmotionJSX(EuiKeyPadMenuItem, {
|
|
326
|
+
label: "Dashboard"
|
|
327
|
+
}, ___EmotionJSX(EuiIcon, {
|
|
328
|
+
type: "dashboardApp",
|
|
329
|
+
size: "l"
|
|
330
|
+
})), ___EmotionJSX(EuiKeyPadMenuItem, {
|
|
331
|
+
label: "Dev Tools"
|
|
332
|
+
}, ___EmotionJSX(EuiIcon, {
|
|
333
|
+
type: "devToolsApp",
|
|
334
|
+
size: "l"
|
|
335
|
+
}))));
|
|
336
|
+
};
|
|
337
|
+
|
|
338
|
+
beforeEach(function () {
|
|
339
|
+
cy.viewport(1024, 768); // medium breakpoint
|
|
340
|
+
|
|
341
|
+
cy.realMount(___EmotionJSX(Header, null));
|
|
342
|
+
});
|
|
343
|
+
describe('EuiHeader', function () {
|
|
344
|
+
describe('Automated accessibility check', function () {
|
|
345
|
+
it('has zero violations on first render', function () {
|
|
346
|
+
cy.checkAxe();
|
|
347
|
+
});
|
|
348
|
+
it('has zero violations when Spaces menu is expanded', function () {
|
|
349
|
+
cy.get('button[aria-label="Spaces menu"]').realClick();
|
|
350
|
+
cy.get('div[data-test-subj="cy-spaces-menu"]').should('exist');
|
|
351
|
+
cy.checkAxe();
|
|
352
|
+
});
|
|
353
|
+
it('has zero violations when Account menu is expanded', function () {
|
|
354
|
+
cy.get('button[aria-label="Account menu"]').realClick();
|
|
355
|
+
cy.get('div[data-test-subj="cy-account-menu"]').should('exist');
|
|
356
|
+
cy.checkAxe();
|
|
357
|
+
});
|
|
358
|
+
it('has zero violations when Sitewide search is expanded', function () {
|
|
359
|
+
cy.get('button[aria-label="Sitewide search"]').realClick();
|
|
360
|
+
cy.get('div[data-test-subj="cy-search-menu"]').should('exist');
|
|
361
|
+
cy.checkAxe();
|
|
362
|
+
});
|
|
363
|
+
it('has zero violations when Apps menu is expanded', function () {
|
|
364
|
+
cy.get('button[aria-label="Apps menu with 1 new app"]').realClick();
|
|
365
|
+
cy.get('ul[data-test-subj="cy-apps-menu"]').should('exist');
|
|
366
|
+
cy.checkAxe();
|
|
367
|
+
});
|
|
368
|
+
it('has zero violations when a hidden breadcrumb is expanded', function () {
|
|
369
|
+
cy.get('button[aria-label="See collapsed breadcrumbs"]').realClick();
|
|
370
|
+
cy.get('a[data-test-subj="cy-breadcrumb-hidden"]').should('exist');
|
|
371
|
+
cy.checkAxe();
|
|
372
|
+
});
|
|
373
|
+
});
|
|
374
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
/// <reference types="../../../cypress/support"/>
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import { EuiIcon } from './icon';
|
|
11
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
12
|
+
describe('EuiIcons', function () {
|
|
13
|
+
describe('Automated accessibility check for ML icons', function () {
|
|
14
|
+
var MLIcons = ['dataVisualizer', 'createAdvancedJob', 'classificationJob', 'createMultiMetricJob', 'outlierDetectionJob', 'createPopulationJob', 'regressionJob', 'createSingleMetricJob'];
|
|
15
|
+
|
|
16
|
+
var MLGrid = function MLGrid() {
|
|
17
|
+
return ___EmotionJSX("div", null, MLIcons.map(function (glyph) {
|
|
18
|
+
return ___EmotionJSX(EuiIcon, {
|
|
19
|
+
className: "eui-alignMiddle",
|
|
20
|
+
type: glyph
|
|
21
|
+
});
|
|
22
|
+
}));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
it('has zero violations on first render', function () {
|
|
26
|
+
cy.mount(___EmotionJSX(MLGrid, null));
|
|
27
|
+
cy.get('div[data-cy-root]').find('svg', {
|
|
28
|
+
timeout: 5000
|
|
29
|
+
}).should('have.length', 8);
|
|
30
|
+
cy.checkAxe();
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
/// <reference types="../../../cypress/support"/>
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import { EuiIcon } from './icon';
|
|
11
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
12
|
+
describe('EuiIcons', function () {
|
|
13
|
+
describe('Automated accessibility check for app icons', function () {
|
|
14
|
+
var AppIcons = ['addDataApp', 'advancedSettingsApp', 'agentApp', 'apmApp', 'appSearchApp', 'auditbeatApp', 'canvasApp', 'casesApp', 'codeApp', 'consoleApp', 'crossClusterReplicationApp', 'dashboardApp', 'devToolsApp', 'discoverApp', 'emsApp', 'filebeatApp', 'fleetApp', 'gisApp', 'graphApp', 'grokApp', 'heartbeatApp', 'indexManagementApp', 'indexPatternApp', 'indexRollupApp', 'lensApp', 'logsApp', 'machineLearningApp', 'managementApp', 'metricbeatApp', 'metricsApp', 'monitoringApp', 'notebookApp', 'packetbeatApp', 'pipelineApp', 'recentlyViewedApp', 'reportingApp', 'savedObjectsApp', 'searchProfilerApp', 'securityAnalyticsApp', 'securityApp', 'spacesApp', 'sqlApp', 'timelionApp', 'upgradeAssistantApp', 'uptimeApp', 'usersRolesApp', 'visualizeApp', 'watchesApp', 'workplaceSearchApp'];
|
|
15
|
+
|
|
16
|
+
var AppGrid = function AppGrid() {
|
|
17
|
+
return ___EmotionJSX("div", null, AppIcons.map(function (glyph) {
|
|
18
|
+
return ___EmotionJSX(EuiIcon, {
|
|
19
|
+
className: "eui-alignMiddle",
|
|
20
|
+
type: glyph
|
|
21
|
+
});
|
|
22
|
+
}));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
it('has zero violations on first render', function () {
|
|
26
|
+
cy.mount(___EmotionJSX(AppGrid, null));
|
|
27
|
+
cy.get('div[data-cy-root]').find('svg', {
|
|
28
|
+
timeout: 5000
|
|
29
|
+
}).should('have.length', 49);
|
|
30
|
+
cy.checkAxe();
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
/// <reference types="../../../cypress/support"/>
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import { EuiIcon } from './icon';
|
|
11
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
12
|
+
describe('EuiIcons', function () {
|
|
13
|
+
describe('Automated accessibility check for editor icons', function () {
|
|
14
|
+
var EditorIcons = ['editorAlignCenter', 'editorAlignLeft', 'editorAlignRight', 'editorBold', 'editorChecklist', 'editorCodeBlock', 'editorComment', 'editorDistributeHorizontal', 'editorDistributeVertical', 'editorHeading', 'editorItalic', 'editorItemAlignBottom', 'editorItemAlignCenter', 'editorItemAlignLeft', 'editorItemAlignMiddle', 'editorItemAlignRight', 'editorItemAlignTop', 'editorLink', 'editorOrderedList', 'editorPositionBottomLeft', 'editorPositionBottomRight', 'editorPositionTopLeft', 'editorPositionTopRight', 'editorRedo', 'editorStrike', 'editorTable', 'editorUnderline', 'editorUndo', 'editorUnorderedList'];
|
|
15
|
+
|
|
16
|
+
var EditorGrid = function EditorGrid() {
|
|
17
|
+
return ___EmotionJSX("div", null, EditorIcons.map(function (glyph) {
|
|
18
|
+
return ___EmotionJSX(EuiIcon, {
|
|
19
|
+
className: "eui-alignMiddle",
|
|
20
|
+
type: glyph
|
|
21
|
+
});
|
|
22
|
+
}));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
it('has zero violations on first render', function () {
|
|
26
|
+
cy.mount(___EmotionJSX(EditorGrid, null));
|
|
27
|
+
cy.get('div[data-cy-root]').find('svg', {
|
|
28
|
+
timeout: 5000
|
|
29
|
+
}).should('have.length', 29);
|
|
30
|
+
cy.checkAxe();
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
/// <reference types="../../../cypress/support"/>
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import { EuiIcon } from './icon';
|
|
11
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
12
|
+
describe('EuiIcons', function () {
|
|
13
|
+
describe('Automated accessibility check for Elastic logos', function () {
|
|
14
|
+
var ElasticLogos = ['logoElastic', 'logoElasticStack', 'logoElasticsearch', 'logoAppSearch', 'logoBeats', 'logoBusinessAnalytics', 'logoCloud', 'logoCloudEnterprise', 'logoEnterpriseSearch', 'logoKibana', 'logoLogging', 'logoLogstash', 'logoMaps', 'logoMetrics', 'logoObservability', 'logoSecurity', 'logoSiteSearch', 'logoUptime', 'logoWorkplaceSearch'];
|
|
15
|
+
|
|
16
|
+
var ElasticGrid = function ElasticGrid() {
|
|
17
|
+
return ___EmotionJSX("div", null, ElasticLogos.map(function (glyph) {
|
|
18
|
+
return ___EmotionJSX(EuiIcon, {
|
|
19
|
+
className: "eui-alignMiddle",
|
|
20
|
+
type: glyph
|
|
21
|
+
});
|
|
22
|
+
}));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
it('has zero violations on first render', function () {
|
|
26
|
+
cy.mount(___EmotionJSX(ElasticGrid, null));
|
|
27
|
+
cy.get('div[data-cy-root]').find('svg', {
|
|
28
|
+
timeout: 5000
|
|
29
|
+
}).should('have.length', 19);
|
|
30
|
+
cy.checkAxe();
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
/// <reference types="../../../cypress/support"/>
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import { EuiIcon } from './icon';
|
|
11
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
12
|
+
describe('EuiIcons', function () {
|
|
13
|
+
describe('Automated accessibility check for glyph icons', function () {
|
|
14
|
+
var GlyphIcons = ['accessibility', 'aggregate', 'alert', 'analyzeEvent', 'annotation', 'apmTrace', 'apps', 'arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowStart', 'arrowEnd', 'article', 'asterisk', 'beaker', 'bell', 'bellSlash', 'beta', 'bolt', 'boxesHorizontal', 'boxesVertical', 'branch', 'branchUser', 'broom', 'brush', 'bug', 'bullseye', 'calendar', 'check', 'checkInCircleFilled', 'cheer', 'clock', 'cloudDrizzle', 'cloudStormy', 'cloudSunny', 'cluster', 'color', 'compute', 'console', 'container', 'continuityAbove', 'continuityAboveBelow', 'continuityBelow', 'continuityWithin', 'controlsHorizontal', 'controlsVertical', 'copy', 'copyClipboard', 'cross', 'crosshairs', 'crossInACircleFilled', 'currency', 'cut', 'database', 'desktop', 'discuss', 'document', 'documents', 'documentEdit', 'documentation', 'dot', 'dotInCircle', 'doubleArrowLeft', 'doubleArrowRight', 'download', 'email', 'empty', 'eql', 'eraser', 'exit', 'expand', 'expandMini', 'exportAction', 'eye', 'eyeClosed', 'faceHappy', 'faceNeutral', 'faceSad', 'filter', 'filterExclude', 'filterIgnore', 'filterInclude', 'filterInCircle', 'flag', 'fold', 'folderCheck', 'folderClosed', 'folderExclamation', 'folderOpen', 'frameNext', 'framePrevious', 'fullScreen', 'fullScreenExit', 'function', 'gear', 'glasses', 'globe', 'grab', 'grabHorizontal', 'grid', 'heart', 'heatmap', 'help', 'home', 'iInCircle', 'image', 'importAction', 'indexClose', 'indexEdit', 'indexFlush', 'indexMapping', 'indexOpen', 'indexRuntime', 'indexSettings', 'indexTemporary', 'infinity', 'inputOutput', 'inspect', 'invert', 'ip', 'keyboard', 'kqlField', 'kqlFunction', 'kqlOperand', 'kqlSelector', 'kqlValue', 'kubernetesNode', 'kubernetesPod', 'launch', 'layers', 'lettering', 'lineDashed', 'lineDotted', 'lineSolid', 'link', 'list', 'listAdd', 'lock', 'lockOpen', 'logstashFilter', 'logstashIf', 'logstashInput', 'logstashOutput', 'logstashQueue', 'magnifyWithExclamation', 'magnifyWithMinus', 'magnifyWithPlus', 'magnet', 'mapMarker', 'memory', 'merge', 'menu', 'menuDown', 'menuLeft', 'menuRight', 'menuUp', 'minimize', 'minus', 'minusInCircle', 'minusInCircleFilled', 'mobile', 'moon', 'namespace', 'nested', 'node', 'number', 'offline', 'online', 'package', 'pageSelect', 'pagesSelect', 'paperClip', 'partial', 'pause', 'payment', 'pencil', 'percent', 'pin', 'pinFilled', 'play', 'playFilled', 'plus', 'plusInCircle', 'plusInCircleFilled', 'popout', 'push', 'questionInCircle', 'quote', 'refresh', 'reporter', 'returnKey', 'save', 'scale', 'search', 'securitySignal', 'securitySignalDetected', 'securitySignalResolved', 'sessionViewer', 'shard', 'share', 'snowflake', 'sortable', 'sortAscending', 'sortDescending', 'sortDown', 'sortLeft', 'sortRight', 'sortUp', 'spaces', 'starEmpty', 'starEmptySpace', 'starFilled', 'starFilledSpace', 'starMinusEmpty', 'starMinusFilled', 'starPlusEmpty', 'starPlusFilled', 'stats', 'stop', 'stopFilled', 'stopSlash', 'storage', 'string', 'submodule', 'sun', 'symlink', 'tableOfContents', 'tableDensityExpanded', 'tableDensityCompact', 'tableDensityNormal', 'tag', 'tear', 'temperature', 'timeline', 'timeRefresh', 'timeslider', 'training', 'trash', 'unfold', 'unlink', 'user', 'userAvatar', 'users', 'vector', 'videoPlayer', 'visArea', 'visAreaStacked', 'visBarHorizontal', 'visBarHorizontalStacked', 'visBarVertical', 'visBarVerticalStacked', 'visGauge', 'visGoal', 'visLine', 'visMapCoordinate', 'visMapRegion', 'visMetric', 'visPie', 'visTable', 'visTagCloud', 'visText', 'visTimelion', 'visVega', 'visVisualBuilder', 'wordWrap', 'wordWrapDisabled', 'wrench'];
|
|
15
|
+
|
|
16
|
+
var GlyphGrid = function GlyphGrid() {
|
|
17
|
+
return ___EmotionJSX("div", null, GlyphIcons.map(function (glyph) {
|
|
18
|
+
return ___EmotionJSX(EuiIcon, {
|
|
19
|
+
className: "eui-alignMiddle",
|
|
20
|
+
type: glyph
|
|
21
|
+
});
|
|
22
|
+
}));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
it('has zero violations on first render', function () {
|
|
26
|
+
cy.mount(___EmotionJSX(GlyphGrid, null));
|
|
27
|
+
cy.get('svg[data-icon-type="wrench"]', {
|
|
28
|
+
timeout: 5000
|
|
29
|
+
}).should('exist');
|
|
30
|
+
cy.checkAxe();
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
/// <reference types="../../../cypress/support"/>
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import { EuiIcon } from './icon';
|
|
11
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
12
|
+
describe('EuiIcons', function () {
|
|
13
|
+
describe('Automated accessibility check for token icons', function () {
|
|
14
|
+
var TokenIcons = ['tokenAlias', 'tokenAnnotation', 'tokenArray', 'tokenBinary', 'tokenBoolean', 'tokenClass', 'tokenCompletionSuggester', 'tokenConstant', 'tokenDate', 'tokenDenseVector', 'tokenElement', 'tokenEnum', 'tokenEnumMember', 'tokenEvent', 'tokenException', 'tokenField', 'tokenFile', 'tokenFlattened', 'tokenFunction', 'tokenGeo', 'tokenHistogram', 'tokenInterface', 'tokenIP', 'tokenJoin', 'tokenKey', 'tokenKeyword', 'tokenMethod', 'tokenMetricCounter', 'tokenMetricGauge', 'tokenModule', 'tokenNamespace', 'tokenNested', 'tokenNull', 'tokenNumber', 'tokenObject', 'tokenOperator', 'tokenPackage', 'tokenParameter', 'tokenPercolator', 'tokenProperty', 'tokenRange', 'tokenRankFeature', 'tokenRankFeatures', 'tokenRepo', 'tokenSearchType', 'tokenShape', 'tokenString', 'tokenStruct', 'tokenSymbol', 'tokenTag', 'tokenText', 'tokenTokenCount', 'tokenVariable'];
|
|
15
|
+
|
|
16
|
+
var TokenGrid = function TokenGrid() {
|
|
17
|
+
return ___EmotionJSX("div", null, TokenIcons.map(function (glyph) {
|
|
18
|
+
return ___EmotionJSX(EuiIcon, {
|
|
19
|
+
className: "eui-alignMiddle",
|
|
20
|
+
type: glyph
|
|
21
|
+
});
|
|
22
|
+
}));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
it('has zero violations on first render', function () {
|
|
26
|
+
cy.mount(___EmotionJSX(TokenGrid, null));
|
|
27
|
+
cy.get('div[data-cy-root]').find('svg', {
|
|
28
|
+
timeout: 5000
|
|
29
|
+
}).should('have.length', 53);
|
|
30
|
+
cy.checkAxe();
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
});
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
// are exported for two versions of TypeScript (3.4, 4.0) and implicit
|
|
10
10
|
// imports during eui.d.ts generation default to the incorrect version (3.4).
|
|
11
11
|
// Explicit imports here resolve the version mismatch.
|
|
12
|
-
import markdown from 'remark-parse';
|
|
12
|
+
import markdown from 'remark-parse-no-trim';
|
|
13
13
|
import emoji from 'remark-emoji';
|
|
14
14
|
import breaks from 'remark-breaks';
|
|
15
15
|
import highlight from '../remark/remark_prismjs';
|
|
@@ -275,7 +275,7 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
|
|
|
275
275
|
});
|
|
276
276
|
});
|
|
277
277
|
|
|
278
|
-
_defineProperty(_assertThisInitialized(_this), "onOptionClick", function (options, event) {
|
|
278
|
+
_defineProperty(_assertThisInitialized(_this), "onOptionClick", function (options, event, clickedOption) {
|
|
279
279
|
var _this$props = _this.props,
|
|
280
280
|
isPreFiltered = _this$props.isPreFiltered,
|
|
281
281
|
onChange = _this$props.onChange;
|
|
@@ -287,7 +287,7 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
|
|
|
287
287
|
});
|
|
288
288
|
|
|
289
289
|
if (onChange) {
|
|
290
|
-
onChange(options, event);
|
|
290
|
+
onChange(options, event, clickedOption);
|
|
291
291
|
}
|
|
292
292
|
});
|
|
293
293
|
|
|
@@ -723,7 +723,8 @@ EuiSelectable.propTypes = {
|
|
|
723
723
|
|
|
724
724
|
/**
|
|
725
725
|
* Passes back the altered `options` array with selected options having `checked: 'on'`.
|
|
726
|
-
* Also passes back the React click/keyboard event as a second argument
|
|
726
|
+
* Also passes back the React click/keyboard event as a second argument,
|
|
727
|
+
* and the option that triggered the onChange event as a third argument.
|
|
727
728
|
*/
|
|
728
729
|
onChange: PropTypes.func,
|
|
729
730
|
|