@ember-eui/core 5.0.2 → 5.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.
Files changed (175) hide show
  1. package/addon/components/eui-accordion/index.hbs +1 -1
  2. package/addon/components/eui-breadcrumbs/index.hbs +9 -1
  3. package/addon/components/eui-context-menu-item/index.hbs +60 -0
  4. package/addon/components/eui-context-menu-item/index.ts +12 -0
  5. package/addon/components/eui-context-menu-panel/index.hbs +5 -0
  6. package/addon/components/eui-header-links/index.hbs +1 -1
  7. package/addon/components/eui-input-popover/index.hbs +37 -31
  8. package/addon/components/eui-popover/index.hbs +61 -102
  9. package/addon/components/eui-step-horizontal/index.hbs +11 -6
  10. package/addon/helpers/merge.ts +5 -0
  11. package/addon/utils/css-mappings/eui-avatar.ts +1 -0
  12. package/addon/utils/css-mappings/eui-context-menu-item.ts +26 -0
  13. package/addon/utils/css-mappings/eui-header-links.ts +1 -1
  14. package/addon/utils/css-mappings/index.ts +98 -96
  15. package/app/components/eui-context-menu-item/index.js +1 -0
  16. package/app/components/eui-context-menu-panel/index.js +1 -0
  17. package/app/helpers/merge.js +1 -0
  18. package/docs/display/notification-event/demo/demo2.md +3 -10
  19. package/docs/layout/{accordion.md → accordion/demo/d01-simple-and-unstyle.md} +18 -22
  20. package/docs/layout/accordion/demo/d02-arrow-display.md +34 -0
  21. package/docs/layout/{accordion-demo/demo2.md → accordion/demo/d03-multiple-accordions.md} +6 -5
  22. package/docs/layout/{accordion-demo/demo3.md → accordion/demo/d04-extra-actions.md} +2 -2
  23. package/docs/layout/{accordion-demo/demo4.md → accordion/demo/d05-opened-on-initial-render.md} +2 -2
  24. package/docs/layout/{accordion-demo/demo5.md → accordion/demo/d06-controlling-toggled-state.md} +3 -2
  25. package/docs/layout/{accordion-demo/demo6.md → accordion/demo/d07-loading-state.md} +2 -1
  26. package/docs/layout/accordion/demo/d08-when-content-changes-dynamically.md +71 -0
  27. package/docs/layout/{accordion-demo/demo8.md → accordion/demo/d09-interactive-content-in-the-trigger.md} +4 -4
  28. package/docs/layout/{accordion-demo/demo9.md → accordion/demo/d10-styled-for-forms.md} +44 -44
  29. package/docs/layout/accordion/index.md +23 -0
  30. package/docs/layout/{bottom-bar-demo/demo1.md → bottom-bar/demo/d01-basic.md} +0 -2
  31. package/docs/layout/{bottom-bar-demo/demo2.md → bottom-bar/demo/d02-positions.md} +0 -0
  32. package/docs/layout/{bottom-bar-demo/demo3.md → bottom-bar/demo/d03-displacement.md} +1 -0
  33. package/docs/layout/bottom-bar/index.md +18 -0
  34. package/docs/layout/flex/demo/d01-flex-group-is-for-a-single-row-layout.md +19 -0
  35. package/docs/layout/flex/demo/d02-flex-items-are-also-flex.md +18 -0
  36. package/docs/layout/flex/demo/d03-spans-instead-of-divs.md +19 -0
  37. package/docs/layout/flex/demo/d04-panels-grow-to-fill-flex-items.md +32 -0
  38. package/docs/layout/flex/demo/d05-turn-off-item-streching.md +12 -0
  39. package/docs/layout/flex/demo/d06-proportional-widths-of-items.md +32 -0
  40. package/docs/layout/flex/demo/d07-justify-and-align.md +11 -0
  41. package/docs/layout/flex/demo/d08-allowing-flex-items-to-wrap.md +43 -0
  42. package/docs/layout/flex/demo/d09-change-direction.md +13 -0
  43. package/docs/layout/flex/demo/d10-flex-grids-are-for-repeatable-items.md +33 -0
  44. package/docs/layout/flex/demo/d11-flex-grids-can-change-direction.md +33 -0
  45. package/docs/layout/flex/demo/d12-flex-grids-and-flex-groups-can-nest.md +30 -0
  46. package/docs/layout/flex/demo/d13-gutter-sizing.md +61 -0
  47. package/docs/layout/flex/demo/d14-responsive-layouts.md +29 -0
  48. package/docs/layout/flex/index.md +18 -0
  49. package/docs/layout/{flyout-demo/demo1.md → flyout/demo/d01-basic.md} +12 -16
  50. package/docs/layout/flyout/demo/d02-more-complicated-flyout.md +195 -0
  51. package/docs/layout/{flyout-demo/demo3.md → flyout/demo/d03-sizing.md} +5 -17
  52. package/docs/layout/{flyout-demo/demo4.md → flyout/demo/d04-adjusting-padding.md} +29 -36
  53. package/docs/layout/{flyout-demo/demo5.md → flyout/demo/d05-adding-a-banner.md} +6 -6
  54. package/docs/layout/{flyout-demo/demo6.md → flyout/demo/d06-without-ownfocus.md} +11 -14
  55. package/docs/layout/{flyout-demo/demo7.md → flyout/demo/d07-push-versus-overlay.md} +17 -3
  56. package/docs/layout/flyout/demo/d08-understanding-max-width.md +9 -0
  57. package/docs/layout/flyout/index.md +7 -0
  58. package/docs/layout/{header-demo/demo1.md → header/demo/d01-header.md} +138 -120
  59. package/docs/layout/header/demo/d02-sections.md +9 -0
  60. package/docs/layout/{header-demo/demo2.md → header/demo/d03-header-links.md} +2 -2
  61. package/docs/layout/{header-demo/demo3.md → header/demo/d04-fixed-header.md} +1 -1
  62. package/docs/layout/{header-demo/demo4.md → header/demo/d05-dark-theme.md} +3 -3
  63. package/docs/layout/{header-demo/demo5.md → header/demo/d06-portal-content-in-the-header.md} +20 -9
  64. package/docs/layout/{header-demo/demo6.md → header/demo/d07-header-notifications.md} +1 -1
  65. package/docs/layout/{header-demo/demo7.md → header/demo/d08-stacked-headers.md} +47 -26
  66. package/docs/layout/header/demo/d09-the-elastic-navigation-pattern.md +9 -0
  67. package/docs/layout/header/index.md +7 -0
  68. package/docs/layout/horizontal-rule/demo/d01-size.md +14 -0
  69. package/docs/layout/horizontal-rule/demo/d02-margins.md +38 -0
  70. package/docs/layout/horizontal-rule/horizontal-rule.md +7 -0
  71. package/docs/layout/modal/demo/d01-modal.md +73 -0
  72. package/docs/layout/modal/demo/d02-forms-in-a-modal.md +107 -0
  73. package/docs/layout/modal/demo/d03-confirm-modal.md +86 -0
  74. package/docs/layout/modal/demo/d04-loading-and-disabling-confirm-button.md +80 -0
  75. package/docs/layout/{modal-demo/demo5.md → modal/demo/d05-widths.md} +20 -39
  76. package/docs/layout/modal/index.md +13 -0
  77. package/docs/layout/page-header/demo/{demo1.md → d01-basic.md} +0 -2
  78. package/docs/layout/page-header/demo/{demo2.md → d02-tabs-in-the-page-header.md} +1 -2
  79. package/docs/layout/page-header/demo/{demo3.md → d03-tabs-in-the-page-header.md} +2 -3
  80. package/docs/layout/page-header/demo/{demo4.md → d04-breadcrumbs-in-the-page-header.md} +3 -2
  81. package/docs/layout/page-header/demo/{demo5.md → d05-breadcrumbs-in-the-page-header.md} +1 -28
  82. package/docs/layout/page-header/demo/{demo6.md → d06-customizing-the-page-header.md} +0 -0
  83. package/docs/layout/page-header/index.md +1 -2
  84. package/docs/layout/{panel-demo/demo1.md → panel/demo/d01-padding.md} +0 -0
  85. package/docs/layout/{panel-demo/demo2.md → panel/demo/d02-shadow-and-border.md} +2 -2
  86. package/docs/layout/{panel-demo/demo3.md → panel/demo/d03-colors-and-corners.md} +0 -0
  87. package/docs/layout/{panel-demo/demo4.md → panel/demo/d04-growing-height.md} +0 -0
  88. package/docs/layout/{panel-demo/demo5.md → panel/demo/d05-split-panels.md} +1 -1
  89. package/docs/layout/{panel.md → panel/index.md} +4 -0
  90. package/docs/layout/{popover-demo/demo1.md → popover/demo/d01-basic.md} +6 -4
  91. package/docs/layout/{popover-demo/demo2.md → popover/demo/d02-anchor-position.md} +0 -0
  92. package/docs/layout/popover/demo/d03-popover-titles-and-footers.md +133 -0
  93. package/docs/layout/{popover-demo/demo5.md → popover/demo/d04-popover-padding-sizes.md} +56 -31
  94. package/docs/layout/{popover-demo/demo6.md → popover/demo/d05-panel-class-name.md} +3 -3
  95. package/docs/layout/{popover-demo/demo7.md → popover/demo/d06-popover-with-block-level-display.md} +2 -3
  96. package/docs/layout/{popover-demo/demo3.md → popover/demo/d07-popover-on-a-fixed-element.md} +3 -11
  97. package/docs/layout/{popover-demo/demo8.md → popover/demo/d08-constraining-a-popover-inside-a-container.md} +0 -0
  98. package/docs/layout/{popover-demo/demo9.md → popover/demo/d09-popover-attached-to-input-element.md} +14 -12
  99. package/docs/layout/popover/demo/d10-setting-an-initial-focus.md +61 -0
  100. package/docs/layout/{popover-demo/demo10.md → popover/demo/d11-removing-the-focus-trap.md} +1 -1
  101. package/docs/layout/popover/demo/d12-popover-using-and-html-element-as-the-anchor.md +9 -0
  102. package/docs/layout/popover/index.md +7 -0
  103. package/docs/layout/resizable-container/demo/d01-horizontal-resizing.md +10 -0
  104. package/docs/layout/resizable-container/demo/d02-resizable-panel-options.md +10 -0
  105. package/docs/layout/resizable-container/demo/d03-horizontal-resizing-with-controlled-widths.md +10 -0
  106. package/docs/layout/resizable-container/demo/d04-vertical-resizing.md +10 -0
  107. package/docs/layout/resizable-container/demo/d05-collapsible-resizable-panels.md +10 -0
  108. package/docs/layout/resizable-container/demo/d06-responsive-layout.md +10 -0
  109. package/docs/layout/resizable-container/demo/d07-collapsible-panels-options.md +10 -0
  110. package/docs/layout/resizable-container/demo/d08-collapsible-panels-with-external-control.md +10 -0
  111. package/docs/layout/resizable-container/index.md +15 -0
  112. package/docs/layout/spacer/demo/d01-basic.md +44 -0
  113. package/docs/layout/spacer/index.md +7 -0
  114. package/docs/navigation/{breadcrumbs-demo/demo1.md → breadcrumbs/demo/d01-basic.md} +9 -6
  115. package/docs/navigation/{breadcrumbs-demo/demo2.md → breadcrumbs/demo/d02-limit-the-number-of-breadcrumbs.md} +0 -0
  116. package/docs/navigation/{breadcrumbs-demo/demo3.md → breadcrumbs/demo/d03-truncate-each-breadcrumb.md} +0 -0
  117. package/docs/navigation/{breadcrumbs-demo/demo4.md → breadcrumbs/demo/d04-truncate-each-breadcrumb-on-each-object.md} +0 -0
  118. package/docs/navigation/{breadcrumbs-demo/demo5.md → breadcrumbs/demo/d05-responsive.md} +14 -0
  119. package/docs/navigation/{breadcrumbs-demo/demo6.md → breadcrumbs/demo/d06-color-for-emphasis.md} +12 -23
  120. package/docs/navigation/breadcrumbs/index.md +7 -0
  121. package/docs/navigation/button/demo/d01-basic.md +85 -0
  122. package/docs/navigation/button/demo/d02-empty-button.md +68 -0
  123. package/docs/navigation/button/demo/d03-flush-empty-button.md +32 -0
  124. package/docs/navigation/button/demo/d04-buttons-with-icons.md +213 -0
  125. package/docs/navigation/button/demo/d05-icon-buttons.md +139 -0
  126. package/docs/navigation/button/demo/d06-buttons-as-links.md +51 -0
  127. package/docs/navigation/button/demo/d07-loading-state.md +38 -0
  128. package/docs/navigation/button/demo/d08-split-buttons.md +43 -0
  129. package/docs/navigation/button/demo/d09-toggle-buttons.md +10 -0
  130. package/docs/navigation/button/demo/d10-button-groups.md +10 -0
  131. package/docs/navigation/button/demo/d11-ghost.md +10 -0
  132. package/docs/navigation/button/index.md +13 -0
  133. package/docs/navigation/steps-demo/demo3.md +0 -1
  134. package/docs/{layout/page-template/demo/demo1.md → templates/page-template/demo/d01-a-full-page-with-everything.md} +1 -24
  135. package/docs/{layout/page-template/demo/demo2.md → templates/page-template/demo/d02-restricting-page-width.md} +0 -0
  136. package/docs/{layout/page-template/demo/demo3.md → templates/page-template/demo/d03-showing-a-bottom-bar.md} +0 -0
  137. package/docs/{layout/page-template/demo/demo4.md → templates/page-template/demo/d04-centered-body.md} +1 -1
  138. package/docs/{layout/page-template/demo/demo5.md → templates/page-template/demo/d05-centered-content.md} +1 -1
  139. package/docs/{layout/page-template/demo/demo6.md → templates/page-template/demo/d06-a-simple-page-with-tabs.md} +0 -0
  140. package/docs/{layout/page-template/demo/demo7.md → templates/page-template/demo/d07-full-height-layout.md} +0 -0
  141. package/docs/{layout/page-template/demo/demo8.md → templates/page-template/demo/d08-simple-layout-with-centered-body.md} +0 -0
  142. package/docs/{layout/page-template/demo/demo9.md → templates/page-template/demo/d09-simple-layout-with-centered-content.md} +0 -0
  143. package/docs/{layout/page-template/demo/demo10.md → templates/page-template/demo/d10-a-simple-page-layout-with-custom-content.md} +0 -0
  144. package/docs/templates/page-template/index.md +37 -0
  145. package/docs/templates/sitewide-search/demo/d01-basic-setup.md +10 -0
  146. package/docs/templates/sitewide-search/demo/d02-options.md +10 -0
  147. package/docs/templates/sitewide-search/index.md +9 -0
  148. package/docs/templates/super-date-picker/demo/d01-update-button.md +10 -0
  149. package/docs/templates/super-date-picker/demo/d02-quick-select-panels.md +10 -0
  150. package/docs/templates/super-date-picker/demo/d03-sizing.md +10 -0
  151. package/docs/templates/super-date-picker/demo/d04-auto-refresh.md +11 -0
  152. package/docs/templates/super-date-picker/demo/d05-elastic-pattern-with-kql.md +10 -0
  153. package/docs/templates/super-date-picker/index.md +12 -0
  154. package/package.json +3 -3
  155. package/docs/layout/accordion-demo/demo1.md +0 -33
  156. package/docs/layout/accordion-demo/demo7.md +0 -66
  157. package/docs/layout/bottom-bar.md +0 -1
  158. package/docs/layout/flex-demo/demo1.md +0 -358
  159. package/docs/layout/flex.md +0 -1
  160. package/docs/layout/flyout-demo/demo2.md +0 -87
  161. package/docs/layout/flyout.md +0 -1
  162. package/docs/layout/header.md +0 -1
  163. package/docs/layout/horizontal-rule-demo/demo1.md +0 -70
  164. package/docs/layout/horizontal-rule.md +0 -1
  165. package/docs/layout/modal-demo/demo1.md +0 -97
  166. package/docs/layout/modal-demo/demo2.md +0 -126
  167. package/docs/layout/modal-demo/demo3.md +0 -55
  168. package/docs/layout/modal-demo/demo4.md +0 -65
  169. package/docs/layout/modal.md +0 -1
  170. package/docs/layout/page-template/index.md +0 -11
  171. package/docs/layout/popover-demo/demo4.md +0 -118
  172. package/docs/layout/popover.md +0 -1
  173. package/docs/navigation/breadcrumbs.md +0 -1
  174. package/docs/navigation/button-demo/demo1.md +0 -413
  175. package/docs/navigation/button.md +0 -1
@@ -1,126 +0,0 @@
1
- ---
2
- order: 2
3
- ---
4
-
5
- # Overflow test
6
-
7
- ```hbs template
8
- <EuiButton
9
- @color='primary'
10
- {{on 'click' (fn this.activateModal 'overflowModalActive')}}
11
- >
12
- Show Modal
13
- </EuiButton>
14
- {{#if this.overflowModalActive}}
15
-
16
- <EuiModal
17
- @initialFocus='#donebutton'
18
- @onClose={{fn this.deactivateModal 'overflowModalActive'}}
19
- >
20
- <EuiModalHeader>
21
- <EuiTitle @size='l'>
22
- Overflow Test
23
- </EuiTitle>
24
- </EuiModalHeader>
25
- <EuiModalBody>
26
- <EuiText>
27
- <p>
28
- <strong>
29
- Palpatine
30
- </strong>
31
- : Did you ever hear the tragedy of Darth Plagueis The Wise?
32
- </p>
33
- <p>
34
- <strong>
35
- Anakin
36
- </strong>
37
- : No.
38
- </p>
39
- <p>
40
- <strong>
41
- Palpatine
42
- </strong>
43
- : I thought not. It's not a story the Jedi would tell you. It's a Sith
44
- legend. Darth Plagueis was a Dark Lord of the Sith, so powerful and so
45
- wise he could use the Force to influence the midichlorians to create
46
- life… He had such a knowledge of the dark side, he could even keep the
47
- ones he cared about from dying.
48
- </p>
49
- <p>
50
- <strong>
51
- Anakin
52
- </strong>
53
- : He could actually save people from death?
54
- </p>
55
- <p>
56
- Palpatine: The dark side of the Force is a pathway to many abilities
57
- some consider to be unnatural.
58
- </p>
59
- <p>
60
- <strong>
61
- Anakin
62
- </strong>
63
- : What happened to him?
64
- </p>
65
- <p>
66
- <strong>
67
- Palpatine
68
- </strong>
69
- : He became so powerful… the only thing he was afraid of was losing
70
- his power, which eventually, of course, he did. Unfortunately, he
71
- taught his apprentice everything he knew, then his apprentice killed
72
- him in his sleep. Ironic. He could save others from death, but not
73
- himself.
74
- </p>
75
- <p>
76
- <strong>
77
- Anakin
78
- </strong>
79
- : Is it possible to learn this power?
80
- </p>
81
- <p>
82
- <strong>
83
- Palpatine
84
- </strong>
85
- : Not from a Jedi.
86
- </p>
87
- </EuiText>
88
- </EuiModalBody>
89
- <EuiModalFooter>
90
- <EuiButton
91
- @color='primary'
92
- {{on 'click' (fn this.deactivateModal 'overflowModalActive')}}
93
- id='donebutton'
94
- >
95
- Done
96
- </EuiButton>
97
- </EuiModalFooter>
98
- </EuiModal>
99
- {{/if}}
100
- <EuiSpacer />
101
- ```
102
-
103
- ```js component
104
- import Component from '@glimmer/component';
105
- import { tracked } from '@glimmer/tracking';
106
- import { action } from '@ember/object';
107
-
108
- export default class DemoModalComponent extends Component {
109
- @tracked overflowModalActive = false;
110
-
111
- @action
112
- activateModal(modal) {
113
- this[modal] = true;
114
- }
115
-
116
- @action
117
- deactivateModal(modal) {
118
- this[modal] = false;
119
- }
120
-
121
- @action
122
- reloadPage() {
123
- location.reload();
124
- }
125
- }
126
- ```
@@ -1,55 +0,0 @@
1
- ---
2
- order: 3
3
- ---
4
-
5
- # Confirm Modal
6
-
7
- ```hbs template
8
- <EuiButton
9
- @color='primary'
10
- {{on 'click' (fn this.activateModal 'confirmModalActive')}}
11
- >
12
- Show Confirm Modal
13
- </EuiButton>
14
- {{#if this.confirmModalActive}}
15
- <EuiConfirmModal
16
- @title='Refresh the page?'
17
- @onConfirm={{this.reloadPage}}
18
- @buttonColor='primary'
19
- @confirmButtonText='Refresh'
20
- @cancelButtonText='Cancel'
21
- @onCancel={{fn this.deactivateModal 'confirmModalActive'}}
22
- >
23
- <EuiText>
24
- This action will trash all unsaved changes
25
- </EuiText>
26
- </EuiConfirmModal>
27
-
28
- {{/if}}
29
- <EuiSpacer />
30
- ```
31
-
32
- ```js component
33
- import Component from '@glimmer/component';
34
- import { tracked } from '@glimmer/tracking';
35
- import { action } from '@ember/object';
36
-
37
- export default class DemoModalComponent extends Component {
38
- @tracked confirmModalActive = false;
39
-
40
- @action
41
- activateModal(modal) {
42
- this[modal] = true;
43
- }
44
-
45
- @action
46
- deactivateModal(modal) {
47
- this[modal] = false;
48
- }
49
-
50
- @action
51
- reloadPage() {
52
- location.reload();
53
- }
54
- }
55
- ```
@@ -1,65 +0,0 @@
1
- ---
2
- order: 4
3
- ---
4
-
5
- # Loading modal
6
-
7
- <EuiText>
8
- <strong>EuiConfirmModal</strong> supports being able to apply loading and disabled states to the confirm button with the <EuiCode>confirmButtonDisabled</EuiCode> and <EuiCode>isLoading</EuiCode> props respectively. This is helpful to indicate the fetching of data and/or to wait for a user's input before enabling the confirm action.
9
- </EuiText>
10
-
11
- ```hbs template
12
- <EuiButton
13
- @color='primary'
14
- {{on 'click' (fn this.activateModal 'loadingModalActive')}}
15
- >
16
- Activate Loading Modal
17
- </EuiButton>
18
- {{#if this.loadingModalActive}}
19
-
20
- <EuiConfirmModal
21
- @title='Refresh the page?'
22
- @onConfirm={{this.reloadPage}}
23
- @buttonColor='primary'
24
- @confirmButtonText='Refresh'
25
- @cancelButtonText='Cancel'
26
- @isLoading={{this.isLoading}}
27
- @onCancel={{fn this.deactivateModal 'loadingModalActive'}}
28
- >
29
- <EuiText>
30
- Eui Modal with isLoading true and a timeout for removing is loading
31
- spinner
32
- </EuiText>
33
- </EuiConfirmModal>
34
- {{/if}}
35
- ```
36
-
37
- ```js component
38
- import Component from '@glimmer/component';
39
- import { tracked } from '@glimmer/tracking';
40
- import { action } from '@ember/object';
41
-
42
- export default class DemoModalComponent extends Component {
43
- @tracked loadingModalActive = false;
44
- @tracked isLoading = true;
45
-
46
- @action
47
- activateModal(modal) {
48
- this[modal] = true;
49
- setTimeout(() => {
50
- this.isLoading = false;
51
- }, 3500);
52
- }
53
-
54
- @action
55
- deactivateModal(modal) {
56
- this[modal] = false;
57
- this.isLoading = true;
58
- }
59
-
60
- @action
61
- reloadPage() {
62
- location.reload();
63
- }
64
- }
65
- ```
@@ -1 +0,0 @@
1
- <EuiPageHeader @pageTitle="Modal"/>
@@ -1,11 +0,0 @@
1
- ---
2
- order: 1
3
- title: Page Template
4
- ---
5
-
6
- <EuiPageHeader @pageTitle="Page Template" @bottomBorder={{true}}>
7
- <:description>
8
- <EuiText>While the <strong>EuiPageHeader</strong> component can be placed anywhere within your page layout, we recommend using it within the <a href="#"><strong>EuiPageTemplate</strong></a> component by passing the configuration props as its <EuiCode>pageHeader</EuiCode>.</EuiText>
9
- </:description>
10
-
11
- </EuiPageHeader>
@@ -1,118 +0,0 @@
1
- ---
2
- order: 4
3
- ---
4
-
5
- # Popover titles and footers
6
- <EuiText>
7
- Popovers often need titling. Use the
8
- <strong>EuiPopoverTitle</strong>
9
- component nested somewhere inside the popover contents.
10
- <br /><br />
11
- You can also add a similarly styled
12
- <strong>EuiPopoverFooter</strong>
13
- for smaller captions or call to action buttons.
14
- </EuiText>
15
-
16
- ```hbs template
17
- <EuiPopover
18
- @ownFocus={{true}}
19
- @isOpen={{this.pop1}}
20
- @closePopover={{set this 'pop1' false}}
21
- >
22
- <:button>
23
- <EuiButton
24
- @iconType='arrowDown'
25
- @iconSide='right'
26
- @fill={{true}}
27
- {{on 'click' (set this 'pop1' true)}}
28
- >
29
- With title
30
- </EuiButton>
31
- </:button>
32
- <:content>
33
- <EuiPopoverTitle>
34
- HELLO, I’M A POPOVER TITLE
35
- </EuiPopoverTitle>
36
- <div style='width: 300px;'>
37
- <EuiText size='s'>
38
- <p>
39
- Selfies migas stumptown hot chicken quinoa wolf green juice, mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
40
- </p>
41
- </EuiText>
42
- </div>
43
- </:content>
44
- </EuiPopover>
45
- <EuiPopover
46
- @ownFocus={{true}}
47
- @isOpen={{this.pop2}}
48
- @closePopover={{set this 'pop2' false}}
49
- >
50
- <:button>
51
- <EuiButton
52
- @iconType='arrowDown'
53
- @iconSide='right'
54
- @fill={{true}}
55
- {{on 'click' (set this 'pop2' true)}}
56
- >
57
- With footer
58
- </EuiButton>
59
- </:button>
60
- <:content>
61
- <div style='width: 300px;'>
62
- <EuiText size='s'>
63
- <p>
64
- Selfies migas stumptown hot chicken quinoa wolf green juice, mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
65
- </p>
66
- </EuiText>
67
- </div>
68
- <EuiPopoverFooter>
69
- Hello, I’m a small popover footer caption
70
- </EuiPopoverFooter>
71
- </:content>
72
- </EuiPopover>
73
- <EuiPopover
74
- @ownFocus={{true}}
75
- @isOpen={{this.pop3}}
76
- @closePopover={{set this 'pop3' false}}
77
- >
78
- <:button>
79
- <EuiButton
80
- @iconType='arrowDown'
81
- @iconSide='right'
82
- @fill={{true}}
83
- {{on 'click' (set this 'pop3' true)}}
84
- >
85
- With Title and footer button
86
- </EuiButton>
87
- </:button>
88
- <:content>
89
- <EuiPopoverTitle>
90
- HELLO, I’M A POPOVER TITLE
91
- </EuiPopoverTitle>
92
- <div style='width: 300px;'>
93
- <EuiText size='s'>
94
- <p>
95
- Selfies migas stumptown hot chicken quinoa wolf green juice, mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
96
- </p>
97
- </EuiText>
98
- </div>
99
- <EuiPopoverFooter>
100
- <EuiButton @fullWidth={{true}}>
101
- Manage this thing
102
- </EuiButton>
103
- </EuiPopoverFooter>
104
- </:content>
105
- </EuiPopover>
106
- ```
107
-
108
- ```javascript component
109
- import Component from '@glimmer/component';
110
- import { action } from '@ember/object';
111
- import { tracked } from '@glimmer/tracking';
112
-
113
- export default class PopoverDemo1 extends Component {
114
- @tracked pop1 = false;
115
- @tracked pop2 = false;
116
- @tracked pop3 = false;
117
- }
118
- ```
@@ -1 +0,0 @@
1
- <EuiPageHeader @pageTitle="Popover"/>
@@ -1 +0,0 @@
1
- <EuiPageHeader @pageTitle="Breadcrumbs"/>