@elastic/eui 58.0.0 → 58.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/dist/eui_theme_dark.css +10 -160
  2. package/dist/eui_theme_dark.json +1 -8
  3. package/dist/eui_theme_dark.json.d.ts +0 -7
  4. package/dist/eui_theme_dark.min.css +1 -1
  5. package/dist/eui_theme_light.css +10 -160
  6. package/dist/eui_theme_light.json +1 -8
  7. package/dist/eui_theme_light.json.d.ts +0 -7
  8. package/dist/eui_theme_light.min.css +1 -1
  9. package/es/components/accessibility/index.js +1 -1
  10. package/es/components/accessibility/screen_reader_only/index.js +1 -1
  11. package/es/components/accessibility/screen_reader_only/screen_reader_only.styles.js +6 -15
  12. package/es/components/accordion/accordion.js +48 -20
  13. package/es/components/accordion/accordion.styles.js +115 -0
  14. package/es/components/call_out/call_out.styles.js +8 -8
  15. package/es/components/datagrid/controls/column_sorting_draggable.js +6 -3
  16. package/es/components/empty_prompt/empty_prompt.js +2 -2
  17. package/es/components/mark/mark.styles.js +2 -1
  18. package/es/components/page/page_content/page_content.js +0 -2
  19. package/es/components/page/page_template.js +0 -2
  20. package/es/components/panel/index.js +1 -1
  21. package/es/components/panel/panel.js +23 -36
  22. package/es/components/panel/panel.style.js +49 -0
  23. package/es/components/popover/popover.js +1 -1
  24. package/es/components/resizable_container/resizable_panel.js +8 -2
  25. package/es/global_styling/mixins/_color.js +9 -8
  26. package/es/global_styling/mixins/_padding.js +6 -5
  27. package/eui.d.ts +285 -107
  28. package/i18ntokens.json +30 -14
  29. package/lib/components/accessibility/index.js +2 -2
  30. package/lib/components/accessibility/screen_reader_only/index.js +2 -2
  31. package/lib/components/accessibility/screen_reader_only/screen_reader_only.styles.js +15 -17
  32. package/lib/components/accordion/accordion.js +52 -21
  33. package/lib/components/accordion/accordion.styles.js +132 -0
  34. package/lib/components/call_out/call_out.styles.js +8 -8
  35. package/lib/components/datagrid/controls/column_sorting_draggable.js +5 -2
  36. package/lib/components/empty_prompt/empty_prompt.js +2 -2
  37. package/lib/components/mark/mark.styles.js +3 -1
  38. package/lib/components/page/page_content/page_content.js +0 -2
  39. package/lib/components/page/page_template.js +0 -2
  40. package/lib/components/panel/index.js +0 -6
  41. package/lib/components/panel/panel.js +27 -39
  42. package/lib/components/panel/panel.style.js +53 -0
  43. package/lib/components/popover/popover.js +1 -1
  44. package/lib/components/resizable_container/resizable_panel.js +9 -4
  45. package/lib/global_styling/mixins/_color.js +10 -8
  46. package/lib/global_styling/mixins/_padding.js +7 -5
  47. package/optimize/es/components/accessibility/index.js +1 -1
  48. package/optimize/es/components/accessibility/screen_reader_only/index.js +1 -1
  49. package/optimize/es/components/accessibility/screen_reader_only/screen_reader_only.styles.js +6 -15
  50. package/optimize/es/components/accordion/accordion.js +47 -18
  51. package/optimize/es/components/accordion/accordion.styles.js +115 -0
  52. package/optimize/es/components/call_out/call_out.styles.js +8 -8
  53. package/optimize/es/components/datagrid/controls/column_sorting_draggable.js +6 -3
  54. package/optimize/es/components/empty_prompt/empty_prompt.js +2 -1
  55. package/optimize/es/components/mark/mark.styles.js +2 -1
  56. package/optimize/es/components/panel/index.js +1 -1
  57. package/optimize/es/components/panel/panel.js +23 -34
  58. package/optimize/es/components/panel/panel.style.js +49 -0
  59. package/optimize/es/components/popover/popover.js +1 -1
  60. package/optimize/es/components/resizable_container/resizable_panel.js +8 -1
  61. package/optimize/es/global_styling/mixins/_color.js +9 -8
  62. package/optimize/es/global_styling/mixins/_padding.js +6 -5
  63. package/optimize/lib/components/accessibility/index.js +2 -2
  64. package/optimize/lib/components/accessibility/screen_reader_only/index.js +2 -2
  65. package/optimize/lib/components/accessibility/screen_reader_only/screen_reader_only.styles.js +15 -17
  66. package/optimize/lib/components/accordion/accordion.js +50 -19
  67. package/optimize/lib/components/accordion/accordion.styles.js +132 -0
  68. package/optimize/lib/components/call_out/call_out.styles.js +8 -8
  69. package/optimize/lib/components/datagrid/controls/column_sorting_draggable.js +5 -2
  70. package/optimize/lib/components/empty_prompt/empty_prompt.js +2 -1
  71. package/optimize/lib/components/mark/mark.styles.js +3 -1
  72. package/optimize/lib/components/panel/index.js +0 -6
  73. package/optimize/lib/components/panel/panel.js +27 -37
  74. package/optimize/lib/components/panel/panel.style.js +53 -0
  75. package/optimize/lib/components/popover/popover.js +1 -1
  76. package/optimize/lib/components/resizable_container/resizable_panel.js +9 -3
  77. package/optimize/lib/global_styling/mixins/_color.js +10 -8
  78. package/optimize/lib/global_styling/mixins/_padding.js +7 -5
  79. package/package.json +2 -2
  80. package/src/components/accordion/_index.scss +0 -1
  81. package/src/components/panel/_index.scss +0 -1
  82. package/src/components/panel/split_panel/_split_panel.scss +1 -25
  83. package/src/components/table/_table.scss +2 -4
  84. package/src/global_styling/mixins/_panel.scss +8 -11
  85. package/src/themes/amsterdam/global_styling/mixins/_index.scss +0 -1
  86. package/test-env/components/accessibility/index.js +2 -2
  87. package/test-env/components/accessibility/screen_reader_only/index.js +2 -2
  88. package/test-env/components/accessibility/screen_reader_only/screen_reader_only.styles.js +15 -17
  89. package/test-env/components/accordion/accordion.js +52 -21
  90. package/test-env/components/accordion/accordion.styles.js +132 -0
  91. package/test-env/components/call_out/call_out.styles.js +8 -8
  92. package/test-env/components/datagrid/controls/column_sorting_draggable.js +5 -2
  93. package/test-env/components/empty_prompt/empty_prompt.js +2 -2
  94. package/test-env/components/mark/mark.styles.js +3 -1
  95. package/test-env/components/page/page_content/page_content.js +0 -2
  96. package/test-env/components/page/page_template.js +0 -2
  97. package/test-env/components/panel/index.js +0 -6
  98. package/test-env/components/panel/panel.js +27 -39
  99. package/test-env/components/panel/panel.style.js +53 -0
  100. package/test-env/components/popover/popover.js +1 -1
  101. package/test-env/components/resizable_container/resizable_panel.js +9 -4
  102. package/test-env/global_styling/mixins/_color.js +10 -8
  103. package/test-env/global_styling/mixins/_padding.js +7 -5
  104. package/src/components/accordion/_accordion.scss +0 -89
  105. package/src/themes/amsterdam/global_styling/mixins/_panel.scss +0 -61
@@ -1067,84 +1067,6 @@ SOFTWARE.
1067
1067
  overflow: hidden;
1068
1068
  margin: -1px; }
1069
1069
 
1070
- .euiAccordion__triggerWrapper {
1071
- display: -webkit-flex;
1072
- display: flex;
1073
- -webkit-align-items: center;
1074
- align-items: center; }
1075
-
1076
- .euiAccordion__button {
1077
- font-size: 14px;
1078
- font-size: 1rem;
1079
- line-height: 1.71429rem;
1080
- text-align: left;
1081
- width: 100%;
1082
- -webkit-flex-grow: 1;
1083
- flex-grow: 1;
1084
- display: -webkit-flex;
1085
- display: flex;
1086
- -webkit-align-items: center;
1087
- align-items: center; }
1088
- .euiAccordion__button:hover, .euiAccordion__button:focus {
1089
- text-decoration: underline;
1090
- cursor: pointer; }
1091
-
1092
- .euiAccordion__iconButton {
1093
- margin-right: 4px;
1094
- -webkit-flex-shrink: 0;
1095
- flex-shrink: 0;
1096
- -webkit-transform: rotate(0deg) !important;
1097
- transform: rotate(0deg) !important; }
1098
- .euiAccordion__iconButton-isOpen {
1099
- -webkit-transform: rotate(90deg) !important;
1100
- transform: rotate(90deg) !important; }
1101
- .euiAccordion__iconButton--right {
1102
- margin-right: 0;
1103
- margin-left: 4px; }
1104
-
1105
- .euiAccordion__optionalAction {
1106
- -webkit-flex-shrink: 0;
1107
- flex-shrink: 0; }
1108
-
1109
- .euiAccordion__childWrapper {
1110
- will-change: opacity, visibility, height;
1111
- visibility: hidden;
1112
- height: 0;
1113
- opacity: 0;
1114
- overflow: hidden;
1115
- transition: height 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
1116
- .euiAccordion__childWrapper:focus {
1117
- outline: none; }
1118
-
1119
- .euiAccordion__padding--xs {
1120
- padding: 4px; }
1121
-
1122
- .euiAccordion__padding--s {
1123
- padding: 8px; }
1124
-
1125
- .euiAccordion__padding--m {
1126
- padding: 16px; }
1127
-
1128
- .euiAccordion__padding--l {
1129
- padding: 24px; }
1130
-
1131
- .euiAccordion__padding--xl {
1132
- padding: 32px; }
1133
-
1134
- .euiAccordion.euiAccordion-isOpen .euiAccordion__childWrapper {
1135
- visibility: visible;
1136
- opacity: 1;
1137
- height: auto; }
1138
-
1139
- .euiAccordion__children-isLoading {
1140
- line-height: 1.5;
1141
- display: -webkit-flex;
1142
- display: flex;
1143
- -webkit-align-items: center;
1144
- align-items: center; }
1145
- .euiAccordion__children-isLoading .euiAccordion__spinner {
1146
- margin-right: 4px; }
1147
-
1148
1070
  .euiAccordionForm__extraAction {
1149
1071
  opacity: 0;
1150
1072
  transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
@@ -3721,7 +3643,7 @@ SOFTWARE.
3721
3643
  .euiCommentEvent--regular.euiCommentEvent--regular--borderRadiusNone {
3722
3644
  border-radius: 0; }
3723
3645
  .euiCommentEvent--regular.euiCommentEvent--regular--borderRadiusMedium {
3724
- border-radius: 6px; }
3646
+ border-radius: 4px; }
3725
3647
  .euiCommentEvent--regular.euiCommentEvent--regular--transparent {
3726
3648
  background-color: transparent; }
3727
3649
  .euiCommentEvent--regular.euiCommentEvent--regular--plain {
@@ -5635,7 +5557,7 @@ SOFTWARE.
5635
5557
  .euiDroppable--withPanel.euiDroppable--withPanel--borderRadiusNone {
5636
5558
  border-radius: 0; }
5637
5559
  .euiDroppable--withPanel.euiDroppable--withPanel--borderRadiusMedium {
5638
- border-radius: 6px; }
5560
+ border-radius: 4px; }
5639
5561
  .euiDroppable--withPanel.euiDroppable--withPanel--transparent {
5640
5562
  background-color: transparent; }
5641
5563
  .euiDroppable--withPanel.euiDroppable--withPanel--plain {
@@ -11276,82 +11198,19 @@ SOFTWARE.
11276
11198
  height: 24px;
11277
11199
  padding-top: 6px; }
11278
11200
 
11279
- .euiPanel {
11280
- -webkit-flex-grow: 1;
11281
- flex-grow: 1; }
11282
- .euiPanel.euiPanel--flexGrowZero {
11283
- -webkit-flex-grow: 0;
11284
- flex-grow: 0; }
11285
- .euiPanel.euiPanel--hasShadow {
11286
- box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); }
11287
- .euiPanel.euiPanel--hasBorder {
11288
- border: 1px solid #343741;
11289
- box-shadow: none; }
11290
- .euiPanel.euiPanel--isClickable {
11291
- transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
11292
- .euiPanel.euiPanel--isClickable:enabled {
11293
- display: block;
11294
- width: 100%;
11295
- text-align: left; }
11296
- .euiPanel.euiPanel--isClickable:hover, .euiPanel.euiPanel--isClickable:focus {
11297
- box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125);
11298
- -webkit-transform: translateY(-2px);
11299
- transform: translateY(-2px);
11300
- cursor: pointer; }
11301
- .euiPanel.euiPanel--borderRadiusNone {
11302
- border-radius: 0; }
11303
- .euiPanel.euiPanel--borderRadiusMedium {
11304
- border-radius: 6px; }
11305
- .euiPanel.euiPanel--transparent {
11306
- background-color: transparent; }
11307
- .euiPanel.euiPanel--plain {
11308
- background-color: #1D1E24; }
11309
- .euiPanel.euiPanel--subdued {
11310
- background-color: #141519; }
11311
- .euiPanel.euiPanel--accent {
11312
- background-color: #4a2b39; }
11313
- .euiPanel.euiPanel--primary {
11314
- background-color: #103148; }
11315
- .euiPanel.euiPanel--success {
11316
- background-color: #264341; }
11317
- .euiPanel.euiPanel--warning {
11318
- background-color: #493f22; }
11319
- .euiPanel.euiPanel--danger {
11320
- background-color: #4a201e; }
11321
-
11322
- .euiPanel--paddingSmall {
11323
- padding: 8px; }
11324
-
11325
- .euiPanel--paddingMedium {
11326
- padding: 16px; }
11327
-
11328
- .euiPanel--paddingLarge {
11329
- padding: 24px; }
11330
-
11331
11201
  .euiSplitPanel {
11332
11202
  display: -webkit-flex;
11333
11203
  display: flex;
11334
11204
  -webkit-flex-direction: column;
11335
11205
  flex-direction: column;
11336
- min-width: 0; }
11206
+ min-width: 0;
11207
+ overflow: hidden; }
11337
11208
  .euiSplitPanel .euiSplitPanel__inner {
11338
11209
  -webkit-flex-basis: 0%;
11339
11210
  flex-basis: 0%;
11340
11211
  -webkit-transform: none !important;
11341
11212
  transform: none !important;
11342
11213
  box-shadow: none !important; }
11343
- .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusNone > .euiSplitPanel__inner:first-child,
11344
- .euiSplitPanel.euiPanel--borderRadiusNone > .euiSplitPanel__inner:first-child {
11345
- border-radius: -1 -1 0 0; }
11346
- .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusNone > .euiSplitPanel__inner:last-child,
11347
- .euiSplitPanel.euiPanel--borderRadiusNone > .euiSplitPanel__inner:last-child {
11348
- border-radius: 0 0 -1 -1; }
11349
- .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusMedium > .euiSplitPanel__inner:first-child,
11350
- .euiSplitPanel.euiPanel--borderRadiusMedium > .euiSplitPanel__inner:first-child {
11351
- border-radius: 5px 5px 0 0; }
11352
- .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusMedium > .euiSplitPanel__inner:last-child,
11353
- .euiSplitPanel.euiPanel--borderRadiusMedium > .euiSplitPanel__inner:last-child {
11354
- border-radius: 0 0 5px 5px; }
11355
11214
 
11356
11215
  .euiSplitPanel--row {
11357
11216
  -webkit-flex-direction: row;
@@ -11359,14 +11218,6 @@ SOFTWARE.
11359
11218
  .euiSplitPanel--row.euiSplitPanel-isResponsive {
11360
11219
  -webkit-flex-direction: column;
11361
11220
  flex-direction: column; }
11362
- .euiSplitPanel--row.euiPanel--borderRadiusNone > .euiSplitPanel__inner:first-child {
11363
- border-radius: -1 0 0 -1; }
11364
- .euiSplitPanel--row.euiPanel--borderRadiusNone > .euiSplitPanel__inner:last-child {
11365
- border-radius: 0 -1 -1 0; }
11366
- .euiSplitPanel--row.euiPanel--borderRadiusMedium > .euiSplitPanel__inner:first-child {
11367
- border-radius: 5px 0 0 5px; }
11368
- .euiSplitPanel--row.euiPanel--borderRadiusMedium > .euiSplitPanel__inner:last-child {
11369
- border-radius: 0 5px 5px 0; }
11370
11221
 
11371
11222
  .euiPage {
11372
11223
  display: -webkit-flex;
@@ -13902,7 +13753,7 @@ button.euiSuggestItem {
13902
13753
  line-height: 1.71429rem;
13903
13754
  font-weight: 700;
13904
13755
  font-weight: 500;
13905
- border-top: none; }
13756
+ border: none; }
13906
13757
  .euiTableFooterCell .euiTableHeaderButton,
13907
13758
  .euiTableHeaderCell .euiTableHeaderButton {
13908
13759
  text-align: left;
@@ -13941,7 +13792,7 @@ button.euiSuggestItem {
13941
13792
  text-align: left;
13942
13793
  width: 32px;
13943
13794
  vertical-align: middle;
13944
- border-top: none; }
13795
+ border: none; }
13945
13796
 
13946
13797
  .euiTableRow:hover {
13947
13798
  background-color: #1e1e25; }
@@ -13992,8 +13843,7 @@ button.euiSuggestItem {
13992
13843
  vertical-align: middle; }
13993
13844
 
13994
13845
  .euiTableFooterCell {
13995
- background-color: #25262E;
13996
- border-bottom: none; }
13846
+ background-color: #25262E; }
13997
13847
 
13998
13848
  /**
13999
13849
  * 1. Vertically align all children.
@@ -14171,7 +14021,7 @@ button.euiSuggestItem {
14171
14021
  .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusNone {
14172
14022
  border-radius: 0; }
14173
14023
  .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusMedium {
14174
- border-radius: 6px; }
14024
+ border-radius: 4px; }
14175
14025
  .euiTable.euiTable--responsive .euiTableRow.euiTableRow--transparent {
14176
14026
  background-color: transparent; }
14177
14027
  .euiTable.euiTable--responsive .euiTableRow.euiTableRow--plain {
@@ -14333,7 +14183,7 @@ button.euiSuggestItem {
14333
14183
  .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusNone {
14334
14184
  border-radius: 0; }
14335
14185
  .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusMedium {
14336
- border-radius: 6px; }
14186
+ border-radius: 4px; }
14337
14187
  .euiTable.euiTable--responsive .euiTableRow.euiTableRow--transparent {
14338
14188
  background-color: transparent; }
14339
14189
  .euiTable.euiTable--responsive .euiTableRow.euiTableRow--plain {
@@ -16446,7 +16296,7 @@ button.euiSuggestItem {
16446
16296
  .euiPopover__panel.euiPopover__panel-isAttached.euiPanel--borderRadiusNone {
16447
16297
  border-radius: 0; }
16448
16298
  .euiPopover__panel.euiPopover__panel-isAttached.euiPanel--borderRadiusMedium {
16449
- border-radius: 6px; }
16299
+ border-radius: 4px; }
16450
16300
 
16451
16301
  .euiPopover__panel .euiPopover__panelArrow:before {
16452
16302
  -webkit-filter: blur(3px);
@@ -1,11 +1,4 @@
1
1
  {
2
- "paddingSizes": {
3
- "xs": "4px",
4
- "s": "8px",
5
- "m": "16px",
6
- "l": "24px",
7
- "xl": "32px"
8
- },
9
2
  "euiBadgeGroupGutterTypes": {
10
3
  "gutterExtraSmall": "4px",
11
4
  "gutterSmall": "8px"
@@ -566,7 +559,7 @@
566
559
  },
567
560
  "euiPanelBorderRadiusModifiers": {
568
561
  "borderRadiusNone": 0,
569
- "borderRadiusMedium": "6px"
562
+ "borderRadiusMedium": "4px"
570
563
  },
571
564
  "euiPanelBackgroundColorModifiers": {
572
565
  "transparent": "rgba(0, 0, 0, 0)",
@@ -1,12 +1,5 @@
1
1
  declare module '@elastic/eui/dist/eui_theme_dark.json' {
2
2
  const sassVariables: {
3
- paddingSizes: {
4
- xs: string;
5
- s: string;
6
- m: string;
7
- l: string;
8
- xl: string;
9
- };
10
3
  euiBadgeGroupGutterTypes: {
11
4
  gutterExtraSmall: string;
12
5
  gutterSmall: string;