@elastic/eui 93.1.1 → 93.3.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 (483) hide show
  1. package/dist/eui_theme_dark.css +3 -311
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +3 -311
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/avatar/avatar.js +1 -1
  6. package/es/components/badge/badge.js +1 -1
  7. package/es/components/badge/beta_badge/beta_badge.js +1 -1
  8. package/es/components/basic_table/basic_table.js +1 -1
  9. package/es/components/basic_table/in_memory_table.js +1 -1
  10. package/es/components/beacon/beacon.js +2 -3
  11. package/es/components/breadcrumbs/breadcrumb.js +9 -6
  12. package/es/components/breadcrumbs/breadcrumbs.js +4 -2
  13. package/es/components/button/button.js +1 -1
  14. package/es/components/button/button_display/_button_display.js +3 -4
  15. package/es/components/button/button_display/_button_display_content.js +1 -1
  16. package/es/components/button/button_empty/button_empty.js +3 -4
  17. package/es/components/button/button_group/button_group.js +4 -6
  18. package/es/components/button/button_group/button_group.styles.js +10 -13
  19. package/es/components/button/button_group/button_group_button.js +1 -1
  20. package/es/components/button/button_icon/button_icon.js +5 -6
  21. package/es/components/button/button_icon/button_icon.styles.js +11 -3
  22. package/es/components/call_out/call_out.js +1 -1
  23. package/es/components/card/card.js +2 -2
  24. package/es/components/card/card_select/card_select.js +1 -1
  25. package/es/components/code/code.js +2 -3
  26. package/es/components/code/code.styles.js +4 -2
  27. package/es/components/code/code_block.js +10 -12
  28. package/es/components/code/code_block.styles.js +6 -4
  29. package/es/components/code/code_block_controls.js +2 -3
  30. package/es/components/code/code_block_controls.styles.js +4 -2
  31. package/es/components/code/code_block_full_screen.js +2 -3
  32. package/es/components/code/code_syntax.styles.js +33 -38
  33. package/es/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.js +1 -1
  34. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +1 -1
  35. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js +2 -2
  36. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js +2 -2
  37. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -4
  38. package/es/components/comment_list/comment.js +2 -2
  39. package/es/components/comment_list/comment_event.js +1 -1
  40. package/es/components/comment_list/comment_list.js +2 -2
  41. package/es/components/comment_list/comment_timeline.js +1 -1
  42. package/es/components/datagrid/body/cell/data_grid_cell.js +31 -27
  43. package/es/components/datagrid/body/cell/data_grid_cell_wrapper.js +4 -2
  44. package/es/components/datagrid/body/data_grid_body.js +14 -13
  45. package/es/components/datagrid/body/data_grid_body_custom.js +16 -13
  46. package/es/components/datagrid/body/data_grid_body_virtualized.js +16 -13
  47. package/es/components/datagrid/body/data_grid_row_manager.js +1 -1
  48. package/es/components/datagrid/body/header/data_grid_header_cell.js +12 -12
  49. package/es/components/datagrid/body/header/data_grid_header_row.js +13 -13
  50. package/es/components/datagrid/controls/column_sorting_draggable.js +1 -1
  51. package/es/components/datagrid/controls/data_grid_toolbar_control.js +1 -1
  52. package/es/components/datagrid/data_grid.js +3 -1
  53. package/es/components/datagrid/utils/grid_height_width.js +4 -1
  54. package/es/components/datagrid/utils/in_memory.js +12 -12
  55. package/es/components/date_picker/date_picker.js +2 -2
  56. package/es/components/date_picker/date_picker_range.js +1 -1
  57. package/es/components/empty_prompt/empty_prompt.js +1 -1
  58. package/es/components/facet/facet_button.js +1 -1
  59. package/es/components/facet/facet_button.styles.js +1 -2
  60. package/es/components/form/field_number/field_number.js +1 -1
  61. package/es/components/form/field_text/field_text.js +2 -2
  62. package/es/components/form/form_control_layout/form_control_layout.js +2 -2
  63. package/es/components/form/form_control_layout/form_control_layout_custom_icon.js +1 -1
  64. package/es/components/form/form_control_layout/form_control_layout_icons.js +2 -2
  65. package/es/components/form/text_area/text_area.js +2 -2
  66. package/es/components/header/header_breadcrumbs/header_breadcrumbs.js +4 -2
  67. package/es/components/header/header_links/header_link.js +1 -1
  68. package/es/components/header/header_links/header_links.js +1 -1
  69. package/es/components/header/header_logo/header_logo.js +1 -1
  70. package/es/components/header/header_section/header_section_item_button.js +1 -1
  71. package/es/components/icon/assets/diff.js +33 -0
  72. package/es/components/icon/assets/new_chat.js +37 -0
  73. package/es/components/icon/icon.js +14 -17
  74. package/es/components/icon/icon.styles.js +6 -9
  75. package/es/components/icon/icon_map.js +2 -0
  76. package/es/components/key_pad_menu/key_pad_menu_item.js +1 -1
  77. package/es/components/link/external_link_icon.js +11 -8
  78. package/es/components/link/link.js +2 -3
  79. package/es/components/link/link.styles.js +4 -10
  80. package/es/components/list_group/list_group.js +2 -2
  81. package/es/components/list_group/list_group_item.js +2 -2
  82. package/es/components/list_group/list_group_item_extra_action.js +1 -1
  83. package/es/components/list_group/pinnable_list_group/pinnable_list_group.js +4 -4
  84. package/es/components/loading/loading_logo.js +1 -1
  85. package/es/components/markdown_editor/markdown_editor.js +1 -1
  86. package/es/components/markdown_editor/markdown_editor_drop_zone.js +1 -1
  87. package/es/components/markdown_editor/markdown_editor_footer.js +1 -1
  88. package/es/components/markdown_editor/markdown_editor_toolbar.js +1 -1
  89. package/es/components/page/page_header/page_header_content.js +5 -3
  90. package/es/components/page/page_sidebar/page_sidebar.js +8 -2
  91. package/es/components/page/page_sidebar/page_sidebar.styles.js +5 -1
  92. package/es/components/page_template/page_template.js +1 -1
  93. package/es/components/pagination/pagination_button.js +1 -1
  94. package/es/components/progress/progress.styles.js +2 -2
  95. package/es/components/selectable/selectable_list/selectable_list.js +1 -1
  96. package/es/components/selectable/selectable_list/selectable_list_item.js +1 -1
  97. package/es/components/selectable/selectable_templates/selectable_template_sitewide.js +1 -1
  98. package/es/components/side_nav/_side_nav_heading.js +61 -0
  99. package/es/components/side_nav/side_nav.js +63 -88
  100. package/es/components/side_nav/side_nav.styles.js +35 -0
  101. package/es/components/side_nav/side_nav_item.js +51 -50
  102. package/es/components/side_nav/side_nav_item.styles.js +72 -0
  103. package/es/components/skeleton/skeleton_circle.js +2 -3
  104. package/es/components/skeleton/skeleton_rectangle.js +2 -3
  105. package/es/components/skeleton/skeleton_text.js +16 -12
  106. package/es/components/skeleton/skeleton_title.js +2 -3
  107. package/es/components/table/table_header_button.js +1 -1
  108. package/es/components/text/text.js +2 -3
  109. package/es/components/text/text_align.js +1 -2
  110. package/es/components/text/text_align.styles.js +5 -7
  111. package/es/components/text/text_color.js +2 -3
  112. package/es/components/timeline/timeline_item_icon.js +1 -1
  113. package/es/components/title/title.js +2 -3
  114. package/es/components/title/title.styles.js +0 -7
  115. package/es/components/toast/global_toast_list.js +1 -1
  116. package/es/components/toast/toast.js +1 -1
  117. package/es/components/tool_tip/icon_tip.js +1 -1
  118. package/es/global_styling/mixins/_typography.js +17 -6
  119. package/es/services/theme/index.js +1 -0
  120. package/es/services/theme/provider.js +2 -1
  121. package/es/services/theme/style_memoization.js +98 -0
  122. package/es/themes/amsterdam/global_styling/mixins/button.js +47 -24
  123. package/eui.d.ts +238 -112
  124. package/i18ntokens.json +62 -44
  125. package/lib/components/avatar/avatar.js +1 -1
  126. package/lib/components/badge/badge.js +1 -1
  127. package/lib/components/badge/beta_badge/beta_badge.js +1 -1
  128. package/lib/components/basic_table/basic_table.js +1 -1
  129. package/lib/components/basic_table/in_memory_table.js +1 -1
  130. package/lib/components/beacon/beacon.js +1 -2
  131. package/lib/components/breadcrumbs/breadcrumb.js +9 -6
  132. package/lib/components/breadcrumbs/breadcrumbs.js +4 -2
  133. package/lib/components/button/button.js +1 -1
  134. package/lib/components/button/button_display/_button_display.js +2 -3
  135. package/lib/components/button/button_display/_button_display_content.js +1 -1
  136. package/lib/components/button/button_empty/button_empty.js +2 -3
  137. package/lib/components/button/button_group/button_group.js +3 -5
  138. package/lib/components/button/button_group/button_group.styles.js +10 -13
  139. package/lib/components/button/button_group/button_group_button.js +1 -1
  140. package/lib/components/button/button_icon/button_icon.js +4 -5
  141. package/lib/components/button/button_icon/button_icon.styles.js +10 -2
  142. package/lib/components/call_out/call_out.js +1 -1
  143. package/lib/components/card/card.js +2 -2
  144. package/lib/components/card/card_select/card_select.js +1 -1
  145. package/lib/components/code/code.js +1 -2
  146. package/lib/components/code/code.styles.js +4 -2
  147. package/lib/components/code/code_block.js +9 -11
  148. package/lib/components/code/code_block.styles.js +6 -4
  149. package/lib/components/code/code_block_controls.js +1 -2
  150. package/lib/components/code/code_block_controls.styles.js +4 -2
  151. package/lib/components/code/code_block_full_screen.js +1 -2
  152. package/lib/components/code/code_syntax.styles.js +34 -39
  153. package/lib/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.js +1 -1
  154. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +1 -1
  155. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js +2 -2
  156. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js +2 -2
  157. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -4
  158. package/lib/components/comment_list/comment.js +2 -2
  159. package/lib/components/comment_list/comment_event.js +1 -1
  160. package/lib/components/comment_list/comment_list.js +2 -2
  161. package/lib/components/comment_list/comment_timeline.js +1 -1
  162. package/lib/components/datagrid/body/cell/data_grid_cell.js +31 -27
  163. package/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js +4 -2
  164. package/lib/components/datagrid/body/data_grid_body.js +14 -13
  165. package/lib/components/datagrid/body/data_grid_body_custom.js +16 -13
  166. package/lib/components/datagrid/body/data_grid_body_virtualized.js +16 -13
  167. package/lib/components/datagrid/body/data_grid_row_manager.js +1 -1
  168. package/lib/components/datagrid/body/header/data_grid_header_cell.js +12 -12
  169. package/lib/components/datagrid/body/header/data_grid_header_row.js +13 -13
  170. package/lib/components/datagrid/controls/column_sorting_draggable.js +1 -1
  171. package/lib/components/datagrid/controls/data_grid_toolbar_control.js +1 -1
  172. package/lib/components/datagrid/data_grid.js +3 -1
  173. package/lib/components/datagrid/utils/grid_height_width.js +4 -1
  174. package/lib/components/datagrid/utils/in_memory.js +12 -12
  175. package/lib/components/date_picker/date_picker.js +2 -2
  176. package/lib/components/date_picker/date_picker_range.js +1 -1
  177. package/lib/components/empty_prompt/empty_prompt.js +1 -1
  178. package/lib/components/facet/facet_button.js +1 -1
  179. package/lib/components/facet/facet_button.styles.js +1 -2
  180. package/lib/components/form/field_number/field_number.js +1 -1
  181. package/lib/components/form/field_text/field_text.js +2 -2
  182. package/lib/components/form/form_control_layout/form_control_layout.js +2 -2
  183. package/lib/components/form/form_control_layout/form_control_layout_custom_icon.js +1 -1
  184. package/lib/components/form/form_control_layout/form_control_layout_icons.js +2 -2
  185. package/lib/components/form/text_area/text_area.js +2 -2
  186. package/lib/components/header/header_breadcrumbs/header_breadcrumbs.js +4 -2
  187. package/lib/components/header/header_links/header_link.js +1 -1
  188. package/lib/components/header/header_links/header_links.js +1 -1
  189. package/lib/components/header/header_logo/header_logo.js +1 -1
  190. package/lib/components/header/header_section/header_section_item_button.js +1 -1
  191. package/lib/components/icon/assets/diff.js +41 -0
  192. package/lib/components/icon/assets/new_chat.js +45 -0
  193. package/lib/components/icon/icon.js +13 -16
  194. package/lib/components/icon/icon.styles.js +5 -8
  195. package/lib/components/icon/icon_map.js +2 -0
  196. package/lib/components/icon/svgs/diff.svg +1 -0
  197. package/lib/components/icon/svgs/new_chat.svg +4 -0
  198. package/lib/components/key_pad_menu/key_pad_menu_item.js +1 -1
  199. package/lib/components/link/external_link_icon.js +10 -7
  200. package/lib/components/link/link.js +1 -2
  201. package/lib/components/link/link.styles.js +6 -14
  202. package/lib/components/list_group/list_group.js +2 -2
  203. package/lib/components/list_group/list_group_item.js +2 -2
  204. package/lib/components/list_group/list_group_item_extra_action.js +1 -1
  205. package/lib/components/list_group/pinnable_list_group/pinnable_list_group.js +4 -4
  206. package/lib/components/loading/loading_logo.js +1 -1
  207. package/lib/components/markdown_editor/markdown_editor.js +1 -1
  208. package/lib/components/markdown_editor/markdown_editor_drop_zone.js +1 -1
  209. package/lib/components/markdown_editor/markdown_editor_footer.js +1 -1
  210. package/lib/components/markdown_editor/markdown_editor_toolbar.js +1 -1
  211. package/lib/components/page/page_header/page_header_content.js +5 -3
  212. package/lib/components/page/page_sidebar/page_sidebar.js +8 -2
  213. package/lib/components/page/page_sidebar/page_sidebar.styles.js +5 -1
  214. package/lib/components/page_template/page_template.js +1 -1
  215. package/lib/components/pagination/pagination_button.js +1 -1
  216. package/lib/components/progress/progress.styles.js +1 -1
  217. package/lib/components/selectable/selectable_list/selectable_list.js +1 -1
  218. package/lib/components/selectable/selectable_list/selectable_list_item.js +1 -1
  219. package/lib/components/selectable/selectable_templates/selectable_template_sitewide.js +1 -1
  220. package/lib/components/side_nav/_side_nav_heading.js +67 -0
  221. package/lib/components/side_nav/side_nav.js +65 -89
  222. package/lib/components/side_nav/side_nav.styles.js +40 -0
  223. package/lib/components/side_nav/side_nav_item.js +51 -49
  224. package/lib/components/side_nav/side_nav_item.styles.js +78 -0
  225. package/lib/components/skeleton/skeleton_circle.js +1 -2
  226. package/lib/components/skeleton/skeleton_rectangle.js +1 -2
  227. package/lib/components/skeleton/skeleton_text.js +18 -11
  228. package/lib/components/skeleton/skeleton_title.js +1 -2
  229. package/lib/components/table/table_header_button.js +1 -1
  230. package/lib/components/text/text.js +1 -2
  231. package/lib/components/text/text_align.js +1 -2
  232. package/lib/components/text/text_align.styles.js +5 -7
  233. package/lib/components/text/text_color.js +1 -2
  234. package/lib/components/timeline/timeline_item_icon.js +1 -1
  235. package/lib/components/title/title.js +1 -2
  236. package/lib/components/title/title.styles.js +2 -10
  237. package/lib/components/toast/global_toast_list.js +1 -1
  238. package/lib/components/toast/toast.js +1 -1
  239. package/lib/components/tool_tip/icon_tip.js +1 -1
  240. package/lib/global_styling/mixins/_typography.js +27 -19
  241. package/lib/services/theme/index.js +13 -0
  242. package/lib/services/theme/provider.js +2 -1
  243. package/lib/services/theme/style_memoization.js +106 -0
  244. package/lib/themes/amsterdam/global_styling/mixins/button.js +49 -25
  245. package/optimize/es/components/beacon/beacon.js +2 -3
  246. package/optimize/es/components/breadcrumbs/breadcrumb.js +5 -4
  247. package/optimize/es/components/button/button_display/_button_display.js +2 -3
  248. package/optimize/es/components/button/button_empty/button_empty.js +2 -3
  249. package/optimize/es/components/button/button_group/button_group.js +3 -5
  250. package/optimize/es/components/button/button_group/button_group.styles.js +10 -13
  251. package/optimize/es/components/button/button_icon/button_icon.js +4 -5
  252. package/optimize/es/components/button/button_icon/button_icon.styles.js +8 -3
  253. package/optimize/es/components/code/code.js +2 -3
  254. package/optimize/es/components/code/code.styles.js +4 -2
  255. package/optimize/es/components/code/code_block.js +10 -12
  256. package/optimize/es/components/code/code_block.styles.js +6 -4
  257. package/optimize/es/components/code/code_block_controls.js +2 -3
  258. package/optimize/es/components/code/code_block_controls.styles.js +4 -2
  259. package/optimize/es/components/code/code_block_full_screen.js +2 -3
  260. package/optimize/es/components/code/code_syntax.styles.js +33 -38
  261. package/optimize/es/components/datagrid/body/cell/data_grid_cell.js +5 -3
  262. package/optimize/es/components/datagrid/body/cell/data_grid_cell_wrapper.js +4 -2
  263. package/optimize/es/components/datagrid/body/data_grid_body_custom.js +2 -0
  264. package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js +2 -0
  265. package/optimize/es/components/datagrid/body/data_grid_row_manager.js +1 -1
  266. package/optimize/es/components/datagrid/data_grid.js +3 -1
  267. package/optimize/es/components/datagrid/utils/grid_height_width.js +4 -1
  268. package/optimize/es/components/facet/facet_button.styles.js +1 -2
  269. package/optimize/es/components/icon/assets/diff.js +32 -0
  270. package/optimize/es/components/icon/assets/new_chat.js +36 -0
  271. package/optimize/es/components/icon/icon.js +13 -16
  272. package/optimize/es/components/icon/icon.styles.js +6 -9
  273. package/optimize/es/components/icon/icon_map.js +2 -0
  274. package/optimize/es/components/link/external_link_icon.js +11 -8
  275. package/optimize/es/components/link/link.js +2 -3
  276. package/optimize/es/components/link/link.styles.js +4 -10
  277. package/optimize/es/components/page/page_sidebar/page_sidebar.js +4 -2
  278. package/optimize/es/components/page/page_sidebar/page_sidebar.styles.js +5 -1
  279. package/optimize/es/components/page_template/page_template.js +1 -1
  280. package/optimize/es/components/progress/progress.styles.js +2 -2
  281. package/optimize/es/components/side_nav/_side_nav_heading.js +47 -0
  282. package/optimize/es/components/side_nav/side_nav.js +61 -72
  283. package/optimize/es/components/side_nav/side_nav.styles.js +35 -0
  284. package/optimize/es/components/side_nav/side_nav_item.js +51 -50
  285. package/optimize/es/components/side_nav/side_nav_item.styles.js +69 -0
  286. package/optimize/es/components/skeleton/skeleton_circle.js +2 -3
  287. package/optimize/es/components/skeleton/skeleton_rectangle.js +2 -3
  288. package/optimize/es/components/skeleton/skeleton_text.js +16 -12
  289. package/optimize/es/components/skeleton/skeleton_title.js +2 -3
  290. package/optimize/es/components/text/text.js +2 -3
  291. package/optimize/es/components/text/text_align.js +1 -2
  292. package/optimize/es/components/text/text_align.styles.js +5 -7
  293. package/optimize/es/components/text/text_color.js +2 -3
  294. package/optimize/es/components/title/title.js +2 -3
  295. package/optimize/es/components/title/title.styles.js +0 -7
  296. package/optimize/es/global_styling/mixins/_typography.js +14 -6
  297. package/optimize/es/services/theme/index.js +1 -0
  298. package/optimize/es/services/theme/provider.js +2 -1
  299. package/optimize/es/services/theme/style_memoization.js +93 -0
  300. package/optimize/es/themes/amsterdam/global_styling/mixins/button.js +47 -24
  301. package/optimize/lib/components/beacon/beacon.js +1 -2
  302. package/optimize/lib/components/breadcrumbs/breadcrumb.js +5 -4
  303. package/optimize/lib/components/button/button_display/_button_display.js +1 -2
  304. package/optimize/lib/components/button/button_empty/button_empty.js +1 -2
  305. package/optimize/lib/components/button/button_group/button_group.js +2 -4
  306. package/optimize/lib/components/button/button_group/button_group.styles.js +10 -13
  307. package/optimize/lib/components/button/button_icon/button_icon.js +3 -4
  308. package/optimize/lib/components/button/button_icon/button_icon.styles.js +8 -2
  309. package/optimize/lib/components/code/code.js +1 -2
  310. package/optimize/lib/components/code/code.styles.js +4 -2
  311. package/optimize/lib/components/code/code_block.js +9 -11
  312. package/optimize/lib/components/code/code_block.styles.js +6 -4
  313. package/optimize/lib/components/code/code_block_controls.js +1 -2
  314. package/optimize/lib/components/code/code_block_controls.styles.js +4 -2
  315. package/optimize/lib/components/code/code_block_full_screen.js +1 -2
  316. package/optimize/lib/components/code/code_syntax.styles.js +34 -39
  317. package/optimize/lib/components/datagrid/body/cell/data_grid_cell.js +5 -3
  318. package/optimize/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js +4 -2
  319. package/optimize/lib/components/datagrid/body/data_grid_body_custom.js +2 -0
  320. package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -0
  321. package/optimize/lib/components/datagrid/body/data_grid_row_manager.js +1 -1
  322. package/optimize/lib/components/datagrid/data_grid.js +3 -1
  323. package/optimize/lib/components/datagrid/utils/grid_height_width.js +4 -1
  324. package/optimize/lib/components/facet/facet_button.styles.js +1 -2
  325. package/optimize/lib/components/icon/assets/diff.js +41 -0
  326. package/optimize/lib/components/icon/assets/new_chat.js +45 -0
  327. package/optimize/lib/components/icon/icon.js +12 -15
  328. package/optimize/lib/components/icon/icon.styles.js +5 -8
  329. package/optimize/lib/components/icon/icon_map.js +2 -0
  330. package/optimize/lib/components/icon/svgs/diff.svg +1 -0
  331. package/optimize/lib/components/icon/svgs/new_chat.svg +4 -0
  332. package/optimize/lib/components/link/external_link_icon.js +10 -7
  333. package/optimize/lib/components/link/link.js +1 -2
  334. package/optimize/lib/components/link/link.styles.js +6 -14
  335. package/optimize/lib/components/page/page_sidebar/page_sidebar.js +4 -2
  336. package/optimize/lib/components/page/page_sidebar/page_sidebar.styles.js +5 -1
  337. package/optimize/lib/components/page_template/page_template.js +1 -1
  338. package/optimize/lib/components/progress/progress.styles.js +1 -1
  339. package/optimize/lib/components/side_nav/_side_nav_heading.js +53 -0
  340. package/optimize/lib/components/side_nav/side_nav.js +63 -73
  341. package/optimize/lib/components/side_nav/side_nav.styles.js +40 -0
  342. package/optimize/lib/components/side_nav/side_nav_item.js +51 -49
  343. package/optimize/lib/components/side_nav/side_nav_item.styles.js +76 -0
  344. package/optimize/lib/components/skeleton/skeleton_circle.js +1 -2
  345. package/optimize/lib/components/skeleton/skeleton_rectangle.js +1 -2
  346. package/optimize/lib/components/skeleton/skeleton_text.js +18 -11
  347. package/optimize/lib/components/skeleton/skeleton_title.js +1 -2
  348. package/optimize/lib/components/text/text.js +1 -2
  349. package/optimize/lib/components/text/text_align.js +1 -2
  350. package/optimize/lib/components/text/text_align.styles.js +5 -7
  351. package/optimize/lib/components/text/text_color.js +1 -2
  352. package/optimize/lib/components/title/title.js +1 -2
  353. package/optimize/lib/components/title/title.styles.js +2 -10
  354. package/optimize/lib/global_styling/mixins/_typography.js +25 -19
  355. package/optimize/lib/services/theme/index.js +13 -0
  356. package/optimize/lib/services/theme/provider.js +2 -1
  357. package/optimize/lib/services/theme/style_memoization.js +106 -0
  358. package/optimize/lib/themes/amsterdam/global_styling/mixins/button.js +49 -26
  359. package/package.json +3 -3
  360. package/src/components/datagrid/_data_grid_data_row.scss +4 -0
  361. package/src/components/index.scss +0 -1
  362. package/src/themes/amsterdam/overrides/_index.scss +0 -1
  363. package/test-env/components/avatar/avatar.js +1 -1
  364. package/test-env/components/badge/badge.js +1 -1
  365. package/test-env/components/badge/beta_badge/beta_badge.js +1 -1
  366. package/test-env/components/basic_table/basic_table.js +1 -1
  367. package/test-env/components/basic_table/in_memory_table.js +1 -1
  368. package/test-env/components/beacon/beacon.js +1 -2
  369. package/test-env/components/breadcrumbs/breadcrumb.js +9 -6
  370. package/test-env/components/breadcrumbs/breadcrumbs.js +4 -2
  371. package/test-env/components/button/button.js +1 -1
  372. package/test-env/components/button/button_display/_button_display.js +2 -3
  373. package/test-env/components/button/button_display/_button_display_content.js +1 -1
  374. package/test-env/components/button/button_empty/button_empty.js +2 -3
  375. package/test-env/components/button/button_group/button_group.js +3 -5
  376. package/test-env/components/button/button_group/button_group.styles.js +10 -13
  377. package/test-env/components/button/button_group/button_group_button.js +1 -1
  378. package/test-env/components/button/button_icon/button_icon.js +4 -5
  379. package/test-env/components/button/button_icon/button_icon.styles.js +8 -2
  380. package/test-env/components/call_out/call_out.js +1 -1
  381. package/test-env/components/card/card.js +2 -2
  382. package/test-env/components/card/card_select/card_select.js +1 -1
  383. package/test-env/components/code/code.styles.js +4 -2
  384. package/test-env/components/code/code_block.styles.js +6 -4
  385. package/test-env/components/code/code_block_controls.js +1 -2
  386. package/test-env/components/code/code_block_controls.styles.js +4 -2
  387. package/test-env/components/code/code_block_full_screen.js +1 -2
  388. package/test-env/components/code/code_syntax.styles.js +34 -39
  389. package/test-env/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.js +1 -1
  390. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +1 -1
  391. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js +2 -2
  392. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js +2 -2
  393. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -4
  394. package/test-env/components/comment_list/comment.js +2 -2
  395. package/test-env/components/comment_list/comment_event.js +1 -1
  396. package/test-env/components/comment_list/comment_list.js +2 -2
  397. package/test-env/components/comment_list/comment_timeline.js +1 -1
  398. package/test-env/components/datagrid/body/cell/data_grid_cell.js +31 -27
  399. package/test-env/components/datagrid/body/cell/data_grid_cell_wrapper.js +4 -2
  400. package/test-env/components/datagrid/body/data_grid_body.js +14 -13
  401. package/test-env/components/datagrid/body/data_grid_body_custom.js +16 -13
  402. package/test-env/components/datagrid/body/data_grid_body_virtualized.js +16 -13
  403. package/test-env/components/datagrid/body/data_grid_row_manager.js +1 -1
  404. package/test-env/components/datagrid/body/header/data_grid_header_cell.js +12 -12
  405. package/test-env/components/datagrid/body/header/data_grid_header_row.js +13 -13
  406. package/test-env/components/datagrid/controls/column_sorting_draggable.js +1 -1
  407. package/test-env/components/datagrid/controls/data_grid_toolbar_control.js +1 -1
  408. package/test-env/components/datagrid/data_grid.js +3 -1
  409. package/test-env/components/datagrid/utils/grid_height_width.js +4 -1
  410. package/test-env/components/datagrid/utils/in_memory.js +12 -12
  411. package/test-env/components/date_picker/date_picker.js +2 -2
  412. package/test-env/components/date_picker/date_picker_range.js +1 -1
  413. package/test-env/components/empty_prompt/empty_prompt.js +1 -1
  414. package/test-env/components/facet/facet_button.js +1 -1
  415. package/test-env/components/facet/facet_button.styles.js +1 -2
  416. package/test-env/components/form/field_number/field_number.js +1 -1
  417. package/test-env/components/form/field_text/field_text.js +2 -2
  418. package/test-env/components/form/form_control_layout/form_control_layout.js +2 -2
  419. package/test-env/components/form/form_control_layout/form_control_layout_custom_icon.js +1 -1
  420. package/test-env/components/form/form_control_layout/form_control_layout_icons.js +2 -2
  421. package/test-env/components/form/text_area/text_area.js +2 -2
  422. package/test-env/components/header/header_breadcrumbs/header_breadcrumbs.js +4 -2
  423. package/test-env/components/header/header_links/header_link.js +1 -1
  424. package/test-env/components/header/header_links/header_links.js +1 -1
  425. package/test-env/components/header/header_logo/header_logo.js +1 -1
  426. package/test-env/components/header/header_section/header_section_item_button.js +1 -1
  427. package/test-env/components/icon/assets/diff.js +41 -0
  428. package/test-env/components/icon/assets/new_chat.js +45 -0
  429. package/test-env/components/icon/icon.styles.js +5 -8
  430. package/test-env/components/icon/icon_map.js +2 -0
  431. package/test-env/components/key_pad_menu/key_pad_menu_item.js +1 -1
  432. package/test-env/components/link/external_link_icon.js +10 -7
  433. package/test-env/components/link/link.js +1 -2
  434. package/test-env/components/link/link.styles.js +6 -14
  435. package/test-env/components/list_group/list_group.js +2 -2
  436. package/test-env/components/list_group/list_group_item.js +2 -2
  437. package/test-env/components/list_group/list_group_item_extra_action.js +1 -1
  438. package/test-env/components/list_group/pinnable_list_group/pinnable_list_group.js +4 -4
  439. package/test-env/components/loading/loading_logo.js +1 -1
  440. package/test-env/components/markdown_editor/markdown_editor.js +1 -1
  441. package/test-env/components/markdown_editor/markdown_editor_drop_zone.js +1 -1
  442. package/test-env/components/markdown_editor/markdown_editor_footer.js +1 -1
  443. package/test-env/components/markdown_editor/markdown_editor_toolbar.js +1 -1
  444. package/test-env/components/page/page_header/page_header_content.js +5 -3
  445. package/test-env/components/page/page_sidebar/page_sidebar.js +8 -2
  446. package/test-env/components/page/page_sidebar/page_sidebar.styles.js +5 -1
  447. package/test-env/components/page_template/page_template.js +1 -1
  448. package/test-env/components/pagination/pagination_button.js +1 -1
  449. package/test-env/components/progress/progress.styles.js +1 -1
  450. package/test-env/components/selectable/selectable_list/selectable_list.js +1 -1
  451. package/test-env/components/selectable/selectable_list/selectable_list_item.js +1 -1
  452. package/test-env/components/selectable/selectable_templates/selectable_template_sitewide.js +1 -1
  453. package/test-env/components/side_nav/_side_nav_heading.js +66 -0
  454. package/test-env/components/side_nav/side_nav.js +65 -89
  455. package/test-env/components/side_nav/side_nav.styles.js +40 -0
  456. package/test-env/components/side_nav/side_nav_item.js +51 -49
  457. package/test-env/components/side_nav/side_nav_item.styles.js +76 -0
  458. package/test-env/components/skeleton/skeleton_circle.js +1 -2
  459. package/test-env/components/skeleton/skeleton_rectangle.js +1 -2
  460. package/test-env/components/skeleton/skeleton_text.js +18 -11
  461. package/test-env/components/skeleton/skeleton_title.js +1 -2
  462. package/test-env/components/table/table_header_button.js +1 -1
  463. package/test-env/components/text/text.js +1 -2
  464. package/test-env/components/text/text_align.js +1 -2
  465. package/test-env/components/text/text_align.styles.js +5 -7
  466. package/test-env/components/text/text_color.js +1 -2
  467. package/test-env/components/timeline/timeline_item_icon.js +1 -1
  468. package/test-env/components/title/title.js +1 -2
  469. package/test-env/components/title/title.styles.js +2 -10
  470. package/test-env/components/toast/global_toast_list.js +1 -1
  471. package/test-env/components/toast/toast.js +1 -1
  472. package/test-env/components/tool_tip/icon_tip.js +1 -1
  473. package/test-env/global_styling/mixins/_typography.js +25 -19
  474. package/test-env/services/theme/index.js +13 -0
  475. package/test-env/services/theme/provider.js +2 -1
  476. package/test-env/services/theme/style_memoization.js +106 -0
  477. package/test-env/themes/amsterdam/global_styling/mixins/button.js +49 -26
  478. package/src/components/side_nav/_index.scss +0 -5
  479. package/src/components/side_nav/_mixins.scss +0 -7
  480. package/src/components/side_nav/_side_nav.scss +0 -47
  481. package/src/components/side_nav/_side_nav_item.scss +0 -181
  482. package/src/components/side_nav/_variables.scss +0 -15
  483. package/src/themes/amsterdam/overrides/_side_nav.scss +0 -17
@@ -2375,6 +2375,9 @@ The following files still use the Sass version:
2375
2375
  -webkit-align-items: center;
2376
2376
  align-items: center;
2377
2377
  }
2378
+ .euiDataGridRowCell--controlColumn .euiDataGridRowCell__content.euiDataGridRowCell__content--defaultHeight {
2379
+ height: 100%;
2380
+ }
2378
2381
 
2379
2382
  .euiDataGridRowCell__actions,
2380
2383
  .euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
@@ -5671,296 +5674,6 @@ The following files still use the Sass version:
5671
5674
  transform: translateY(-1px);
5672
5675
  }
5673
5676
 
5674
- .euiSideNav__mobileToggle {
5675
- height: auto;
5676
- border-bottom: 1px solid #343741;
5677
- width: 100%;
5678
- text-align: left;
5679
- border-radius: 0 !important;
5680
- font-size: 16px;
5681
- padding: 0 16px;
5682
- }
5683
- .euiSideNav__mobileToggle .euiSideNav__mobileToggleText {
5684
- padding: 16px 0;
5685
- }
5686
- .euiSideNav__mobileToggle .euiSideNav__mobileToggleContent {
5687
- -webkit-justify-content: space-between;
5688
- justify-content: space-between;
5689
- }
5690
-
5691
- .euiSideNav__heading {
5692
- margin-bottom: 24px;
5693
- }
5694
-
5695
- @media only screen and (max-width: 574px) {
5696
- .euiSideNav__contentMobile-xs {
5697
- overflow: hidden;
5698
- visibility: hidden;
5699
- opacity: 0;
5700
- max-height: 0;
5701
- padding: 0 24px;
5702
- }
5703
- .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xs {
5704
- visibility: visible;
5705
- opacity: 1;
5706
- padding: 24px;
5707
- max-height: 5000px; /* 1 */
5708
- }
5709
- }
5710
- @media only screen and (max-width: 574px) and (prefers-reduced-motion: no-preference) {
5711
- .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xs {
5712
- transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
5713
- }
5714
- }
5715
- @media only screen and (min-width: 575px) and (max-width: 767px) {
5716
- .euiSideNav__contentMobile-s {
5717
- overflow: hidden;
5718
- visibility: hidden;
5719
- opacity: 0;
5720
- max-height: 0;
5721
- padding: 0 24px;
5722
- }
5723
- .euiSideNav-isOpenMobile .euiSideNav__contentMobile-s {
5724
- visibility: visible;
5725
- opacity: 1;
5726
- padding: 24px;
5727
- max-height: 5000px; /* 1 */
5728
- }
5729
- }
5730
- @media only screen and (min-width: 575px) and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
5731
- .euiSideNav-isOpenMobile .euiSideNav__contentMobile-s {
5732
- transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
5733
- }
5734
- }
5735
- @media only screen and (min-width: 768px) and (max-width: 991px) {
5736
- .euiSideNav__contentMobile-m {
5737
- overflow: hidden;
5738
- visibility: hidden;
5739
- opacity: 0;
5740
- max-height: 0;
5741
- padding: 0 24px;
5742
- }
5743
- .euiSideNav-isOpenMobile .euiSideNav__contentMobile-m {
5744
- visibility: visible;
5745
- opacity: 1;
5746
- padding: 24px;
5747
- max-height: 5000px; /* 1 */
5748
- }
5749
- }
5750
- @media only screen and (min-width: 768px) and (max-width: 991px) and (prefers-reduced-motion: no-preference) {
5751
- .euiSideNav-isOpenMobile .euiSideNav__contentMobile-m {
5752
- transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
5753
- }
5754
- }
5755
- @media only screen and (min-width: 992px) and (max-width: 1199px) {
5756
- .euiSideNav__contentMobile-l {
5757
- overflow: hidden;
5758
- visibility: hidden;
5759
- opacity: 0;
5760
- max-height: 0;
5761
- padding: 0 24px;
5762
- }
5763
- .euiSideNav-isOpenMobile .euiSideNav__contentMobile-l {
5764
- visibility: visible;
5765
- opacity: 1;
5766
- padding: 24px;
5767
- max-height: 5000px; /* 1 */
5768
- }
5769
- }
5770
- @media only screen and (min-width: 992px) and (max-width: 1199px) and (prefers-reduced-motion: no-preference) {
5771
- .euiSideNav-isOpenMobile .euiSideNav__contentMobile-l {
5772
- transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
5773
- }
5774
- }
5775
- @media only screen and (min-width: 1200px) {
5776
- .euiSideNav__contentMobile-xl {
5777
- overflow: hidden;
5778
- visibility: hidden;
5779
- opacity: 0;
5780
- max-height: 0;
5781
- padding: 0 24px;
5782
- }
5783
- .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xl {
5784
- visibility: visible;
5785
- opacity: 1;
5786
- padding: 24px;
5787
- max-height: 5000px; /* 1 */
5788
- }
5789
- }
5790
- @media only screen and (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
5791
- .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xl {
5792
- transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
5793
- }
5794
- }
5795
- /**
5796
- * 1. Text-align defaults to center, so we have to override that.
5797
- * 2. Color the text at the item level and then have the button inherit so overrides are easier
5798
- * 3. Enable ellipsis overflow to work (https://css-tricks.com/flexbox-truncated-text/)
5799
- * 4. Restrict the underline to the button __label so it doesn't affect other components that might live within
5800
- */
5801
- .euiSideNavItemButton {
5802
- font-size: 14px;
5803
- font-size: 1rem;
5804
- line-height: 1.7142857143rem;
5805
- text-align: left; /* 1 */
5806
- display: block;
5807
- width: 100%;
5808
- padding: 2px 0;
5809
- color: inherit; /* 2 */
5810
- }
5811
- .euiSideNavItemButton.euiSideNavItemButton--isClickable:not(:disabled):hover {
5812
- cursor: pointer;
5813
- }
5814
- .euiSideNavItemButton.euiSideNavItemButton--isClickable:not(:disabled):hover .euiSideNavItemButton__label, .euiSideNavItemButton.euiSideNavItemButton--isClickable:not(:disabled):focus .euiSideNavItemButton__label {
5815
- text-decoration: underline; /* 4 */
5816
- }
5817
- .euiSideNavItemButton.euiSideNavItemButton-isSelected {
5818
- color: #36A2EF;
5819
- font-weight: 700;
5820
- }
5821
- .euiSideNavItemButton.euiSideNavItemButton-isSelected .euiSideNavItemButton__label {
5822
- text-decoration: underline; /* 4 */
5823
- }
5824
- .euiSideNavItemButton:disabled {
5825
- cursor: not-allowed;
5826
- text-decoration: none;
5827
- color: #515761;
5828
- }
5829
-
5830
- .euiSideNavItemButton__content {
5831
- display: -webkit-flex;
5832
- display: flex;
5833
- -webkit-align-items: center;
5834
- align-items: center;
5835
- }
5836
-
5837
- .euiSideNavItemButton__icon {
5838
- margin-right: 8px;
5839
- }
5840
-
5841
- .euiSideNavItemButton__labelContainer {
5842
- min-width: 0; /* 3 */
5843
- }
5844
-
5845
- .euiSideNavItemButton__label {
5846
- -webkit-flex-grow: 1;
5847
- flex-grow: 1;
5848
- }
5849
-
5850
- .euiSideNavItemButton__label--truncated {
5851
- max-width: 100%;
5852
- overflow: hidden !important;
5853
- text-overflow: ellipsis !important;
5854
- white-space: nowrap !important;
5855
- }
5856
-
5857
- .euiSideNavItem--root {
5858
- /**
5859
- * 1. Create padding around focus area without indenting the item itself.
5860
- */
5861
- }
5862
- .euiSideNavItem--root.euiSideNavItem--rootIcon > .euiSideNavItem__items {
5863
- margin-left: 24px;
5864
- }
5865
- .euiSideNavItem--root > .euiSideNavItemButton {
5866
- margin-bottom: 8px;
5867
- padding: 0;
5868
- padding-left: 8px; /* 1 */
5869
- padding-right: 8px; /* 1 */
5870
- margin-left: -8px; /* 1 */
5871
- width: calc(100% + 16px); /* 1 */
5872
- }
5873
- .euiSideNavItem--root > .euiSideNavItemButton .euiSideNavItemButton__label {
5874
- overflow-wrap: break-word !important;
5875
- word-break: break-word;
5876
- color: #DFE5EF;
5877
- font-size: 16px;
5878
- font-size: 1.1428571429rem;
5879
- line-height: 1.7142857143rem;
5880
- font-weight: 700;
5881
- color: inherit;
5882
- }
5883
- .euiSideNavItem--root > .euiSideNavItem__items {
5884
- position: static;
5885
- margin-left: 0;
5886
- }
5887
- .euiSideNavItem--root > .euiSideNavItem__items::after {
5888
- display: none;
5889
- }
5890
- .euiSideNavItem--root + .euiSideNavItem--root {
5891
- margin-top: 32px;
5892
- }
5893
-
5894
- .euiSideNavItem--trunk {
5895
- color: #DFE5EF; /* 2 */
5896
- /**
5897
- * 1. Create padding around focus area without indenting the item itself.
5898
- */
5899
- }
5900
- .euiSideNavItem--trunk > .euiSideNavItemButton {
5901
- padding-left: 8px; /* 1 */
5902
- padding-right: 8px; /* 1 */
5903
- margin-left: -8px; /* 1 */
5904
- width: calc(100% + 16px); /* 1 */
5905
- }
5906
- .euiSideNavItem--trunk > .euiSideNavItem__items {
5907
- margin-left: 8px;
5908
- width: 100%;
5909
- }
5910
-
5911
- .euiSideNavItem--branch {
5912
- /**
5913
- * 1. Draw the vertical line to group an expanded item's child items together.
5914
- */
5915
- position: relative;
5916
- color: #878b95; /* 2 */
5917
- /**
5918
- * 2. Absolutely position the horizontal tick connecting the item to the vertical line.
5919
- */
5920
- }
5921
- .euiSideNavItem--branch::after { /* 1 */
5922
- position: absolute;
5923
- content: "";
5924
- top: 0;
5925
- bottom: 0;
5926
- width: 1px;
5927
- background: #343741;
5928
- left: 0;
5929
- }
5930
- .euiSideNavItem--branch:last-of-type::after {
5931
- height: 12px;
5932
- }
5933
- .euiSideNavItem--branch > .euiSideNavItemButton {
5934
- position: relative; /* 2 */
5935
- padding-left: 8px;
5936
- padding-right: 8px; /* 2 */
5937
- }
5938
- .euiSideNavItem--branch > .euiSideNavItemButton::after {
5939
- position: absolute; /* 2 */
5940
- content: "";
5941
- top: 12px;
5942
- left: 0;
5943
- width: 4px;
5944
- height: 1px;
5945
- background: #343741;
5946
- }
5947
- .euiSideNavItem--branch > .euiSideNavItem__items {
5948
- margin-left: 16px;
5949
- }
5950
-
5951
- .euiSideNavItem--emphasized {
5952
- background: rgba(52, 55, 65, 0.3);
5953
- color: #DFE5EF;
5954
- box-shadow: 100px 0 0 0 rgba(52, 55, 65, 0.3), -100px 0 0 0 rgba(52, 55, 65, 0.3);
5955
- }
5956
- .euiSideNavItem--emphasized > .euiSideNavItemButton {
5957
- font-weight: 700;
5958
- }
5959
- .euiSideNavItem--emphasized .euiSideNavItem--emphasized {
5960
- background: transparent;
5961
- box-shadow: none;
5962
- }
5963
-
5964
5677
  .euiSelectable {
5965
5678
  display: -webkit-flex;
5966
5679
  display: flex;
@@ -7174,25 +6887,4 @@ The following files still use the Sass version:
7174
6887
  .euiMarkdownEditorPreview,
7175
6888
  .euiMarkdownEditorFooter {
7176
6889
  border-radius: 0 0 6px 6px;
7177
- }
7178
-
7179
- .euiSideNavItem--root {
7180
- padding-bottom: 8px;
7181
- }
7182
- .euiSideNavItem--root + .euiSideNavItem--root {
7183
- padding-top: 8px;
7184
- margin-top: 8px;
7185
- }
7186
- .euiSideNavItem--root > .euiSideNavItemButton {
7187
- margin-bottom: 4px;
7188
- }
7189
- .euiSideNavItem--root > .euiSideNavItemButton .euiSideNavItemButton__label {
7190
- overflow-wrap: break-word !important;
7191
- word-break: break-word;
7192
- color: #DFE5EF;
7193
- font-size: 14px;
7194
- font-size: 1rem;
7195
- line-height: 1.7142857143rem;
7196
- font-weight: 700;
7197
- color: inherit;
7198
6890
  }