From ddeb3c89c6f81e0c8e77a23159f6b7b9766e1a6b Mon Sep 17 00:00:00 2001 From: Tomasz Kajtoch Date: Thu, 24 Oct 2024 16:13:58 +0200 Subject: [PATCH 1/2] Squashed commit of the following: commit 9a2b5b2274b6b786b3133c2cf5e68b6af43a4ad7 Author: Tomasz Kajtoch Date: Thu Oct 24 15:31:43 2024 +0200 fix(website): remove infima default table styles commit ea783c4de10a1a3ae788beb6abb208459332ad7d Author: Tomasz Kajtoch Date: Thu Oct 24 13:57:59 2024 +0200 docs(website): fix markdown examples and formatting commit b165b261f9e22292051951e6aab844e6f77a9462 Author: Tomasz Kajtoch Date: Thu Oct 24 13:57:48 2024 +0200 docs(website): remove hardcoded "opens in a new tab or window" text from anchors commit a656ba684f7efa4cdd5b1394f0884d67d386dab4 Author: Tomasz Kajtoch Date: Thu Oct 24 13:57:03 2024 +0200 docs(website): fix elastic charts docs examples and content formatting commit 49f3a8e139ab67925019d6eb735cf42452f0fc0a Author: Tomasz Kajtoch Date: Thu Oct 24 13:56:27 2024 +0200 feat(website): add @elastic/charts dependency and very basic charts theme switching commit 0833119fee694d0f7b80e185b23c9c5874e806bd Author: Tomasz Kajtoch Date: Thu Oct 24 00:29:31 2024 +0200 docs: content fixes commit 0fd2e026c52fea310786bfbc38a509c74705d0f3 Author: Tomasz Kajtoch Date: Thu Oct 24 00:29:11 2024 +0200 feat(docusaurus-theme): allow controlling global `Demo` scope commit 6b2530e9997a48a5458939c5b4af57c79edb89bb Author: Tomasz Kajtoch Date: Wed Oct 23 15:09:21 2024 +0200 docs: wrap context menu guideline with BrowserOnly to make it work with SSR commit bdb0e9aacc36feb487c7f3baf676a8f8d65d9570 Author: Tomasz Kajtoch Date: Wed Oct 23 15:08:37 2024 +0200 docs: fix pagination guidelines link commit db098e4c3bf99d8df842934b23f4f4292864e27f Author: Tomasz Kajtoch Date: Wed Oct 23 14:46:47 2024 +0200 docs: fix testing guidelines page commit bfd437bc362d569d2db0407c41fb460077fff389 Author: Tomasz Kajtoch Date: Wed Oct 23 14:38:30 2024 +0200 docs: remove temporary components index page commit add473cdbde041e673b63c3e02b4f4cbaa86bdf3 Author: Tomasz Kajtoch Date: Wed Oct 23 14:30:20 2024 +0200 docs: add latest components docs commit 405590197d07003c52bd06aca23bbd4cff6eff3a Author: Tomasz Kajtoch Date: Wed Oct 23 14:29:35 2024 +0200 feat(website): add Example utility component commit 432dd02269a4b64027130c6974ba6af2ff9cb4a6 Author: Tomasz Kajtoch Date: Tue Oct 22 23:01:55 2024 +0200 fix(docusaurus-theme): reset default list styles --- ...infima-npm-0.2.0-alpha.44-145834fad0.patch | 59 + package.json | 3 +- .../src/components/demo/demo.tsx | 4 +- .../src/components/demo/scope.ts | 21 +- .../docusaurus-theme/src/components/index.ts | 1 + .../src/theme/Demo/default_scope.ts | 19 + .../src/theme/MDXComponents/OrderedList.tsx | 1 + .../src/theme/MDXComponents/UnorderedList.tsx | 1 + .../src/theme/reset.styles.ts | 4 + .../docusaurus-theme/src/theme/theme.d.ts | 6 + .../docs/01_guidelines/getting_started.mdx | 264 -- .../01_guidelines/testing/recommendations.mdx | 136 - .../website/docs/02_components/_category_.yml | 3 - .../display/aspect_ratio/_category_.yml | 3 - .../display/aspect_ratio/overview.mdx | 22 - .../display/avatar/_category_.yml | 3 - .../02_components/display/avatar/overview.mdx | 48 - .../display/badge/_category_.yml | 3 - .../02_components/display/badge/overview.mdx | 74 - .../display/callout/_category_.yml | 3 - .../display/callout/overview.mdx | 54 - .../02_components/display/callout/testing.mdx | 35 - .../callout/testing_quick_reference.svg | 89 - .../02_components/display/card/_category_.yml | 3 - .../02_components/display/card/overview.mdx | 118 - .../display/comment_list/_category_.yml | 3 - .../display/comment_list/overview.mdx | 92 - .../display/description_list/_category_.yml | 3 - .../display/description_list/overview.mdx | 83 - .../display/drag_and_drop/_category_.yml | 3 - .../display/drag_and_drop/overview.mdx | 327 -- .../display/empty_prompt/_category_.yml | 3 - .../display/empty_prompt/overview.mdx | 95 - .../display/health/_category_.yml | 3 - .../02_components/display/health/overview.mdx | 20 - .../display/image/_category_.yml | 3 - .../02_components/display/image/overview.mdx | 63 - .../display/list_group/_category_.yml | 3 - .../display/list_group/overview.mdx | 72 - .../display/loading/_category_.yml | 3 - .../display/loading/overview.mdx | 39 - .../display/progress/_category_.yml | 3 - .../display/progress/overview.mdx | 64 - .../display/skeleton/_category_.yml | 3 - .../display/skeleton/overview.mdx | 79 - .../02_components/display/stat/_category_.yml | 3 - .../02_components/display/stat/overview.mdx | 56 - .../02_components/display/text/_category_.yml | 3 - .../02_components/display/text/overview.mdx | 46 - .../02_components/display/text/testing.mdx | 15 - .../display/timeline/_category_.yml | 3 - .../display/timeline/overview.mdx | 58 - .../display/title/_category_.yml | 3 - .../02_components/display/title/overview.mdx | 12 - .../02_components/display/title/testing.mdx | 15 - .../display/toast/_category_.yml | 3 - .../02_components/display/toast/overview.mdx | 52 - .../display/tooltip/_category_.yml | 3 - .../display/tooltip/overview.mdx | 60 - .../02_components/display/tour/_category_.yml | 3 - .../02_components/display/tour/overview.mdx | 70 - .../forms/auto_refresh/_category_.yml | 3 - .../forms/auto_refresh/overview.mdx | 25 - .../forms/color_selection/_category_.yml | 3 - .../forms/color_selection/overview.mdx | 114 - .../forms/combo_box/_category_.yml | 3 - .../forms/combo_box/overview.mdx | 127 - .../forms/compressed_forms/_category_.yml | 4 - .../forms/compressed_forms/overview.mdx | 58 - .../forms/date_picker/_category_.yml | 3 - .../forms/date_picker/overview.mdx | 101 - .../forms/expression/_category_.yml | 3 - .../forms/expression/overview.mdx | 52 - .../forms/filter_group/_category_.yml | 3 - .../forms/filter_group/overview.mdx | 43 - .../forms/form_controls/_category_.yml | 4 - .../forms/form_controls/overview.mdx | 139 - .../forms/form_layouts/_category_.yml | 4 - .../forms/form_layouts/overview.mdx | 112 - .../forms/form_validation/_category_.yml | 4 - .../forms/form_validation/overview.mdx | 11 - .../forms/inline_edit/_category_.yml | 3 - .../forms/inline_edit/overview.mdx | 89 - .../forms/range_sliders/_category_.yml | 3 - .../forms/range_sliders/overview.mdx | 108 - .../forms/search_bar/_category_.yml | 3 - .../forms/search_bar/overview.mdx | 90 - .../forms/selectable/_category_.yml | 3 - .../forms/selectable/overview.mdx | 155 - .../forms/selection_controls/_category_.yml | 4 - .../forms/selection_controls/overview.mdx | 105 - .../forms/super_select/_category_.yml | 3 - .../forms/super_select/overview.mdx | 41 - .../layout/accordion/_category_.yml | 3 - .../layout/accordion/overview.mdx | 102 - .../layout/bottom_bar/_category_.yml | 3 - .../layout/bottom_bar/overview.mdx | 36 - .../02_components/layout/flex/_category_.yml | 3 - .../02_components/layout/flex/overview.mdx | 105 - .../layout/flyout/_category_.yml | 3 - .../02_components/layout/flyout/overview.mdx | 87 - .../layout/header/_category_.yml | 3 - .../02_components/layout/header/overview.mdx | 96 - .../layout/horizontal_rule/_category_.yml | 3 - .../layout/horizontal_rule/overview.mdx | 14 - .../02_components/layout/modal/_category_.yml | 3 - .../02_components/layout/modal/overview.mdx | 50 - .../layout/page_header/_category_.yml | 3 - .../layout/page_header/overview.mdx | 48 - .../02_components/layout/panel/_category_.yml | 3 - .../02_components/layout/panel/overview.mdx | 52 - .../layout/popover/_category_.yml | 3 - .../02_components/layout/popover/overview.mdx | 102 - .../layout/resizable_container/_category_.yml | 3 - .../layout/resizable_container/overview.mdx | 116 - .../layout/spacer/_category_.yml | 3 - .../02_components/layout/spacer/overview.mdx | 10 - .../navigation/breadcrumbs/_category_.yml | 3 - .../navigation/breadcrumbs/overview.mdx | 67 - .../navigation/button/_category_.yml | 3 - .../navigation/button/testing.mdx | 37 - .../navigation/collapsible_nav/_category_.yml | 3 - .../navigation/collapsible_nav/overview.mdx | 45 - .../navigation/combo_box/testing.mdx | 56 - .../combo_box/testing_quick_reference.svg | 257 -- .../navigation/context_menu/_category_.yml | 3 - .../navigation/context_menu/overview.mdx | 44 - .../navigation/facet/_category_.yml | 3 - .../navigation/facet/overview.mdx | 22 - .../navigation/key_pad_menu/_category_.yml | 3 - .../navigation/key_pad_menu/overview.mdx | 50 - .../navigation/link/_category_.yml | 3 - .../navigation/link/overview.mdx | 32 - .../02_components/navigation/link/testing.mdx | 16 - .../navigation/pagination/_category_.yml | 3 - .../navigation/pagination/overview.mdx | 59 - .../navigation/side_nav/_category_.yml | 3 - .../navigation/side_nav/overview.mdx | 66 - .../navigation/steps/_category_.yml | 3 - .../navigation/steps/overview.mdx | 46 - .../navigation/tabs/_category_.yml | 3 - .../navigation/tabs/overview.mdx | 39 - .../navigation/tree_view/_category_.yml | 3 - .../navigation/tree_view/overview.mdx | 38 - .../super_date_picker/_category_.yml | 3 - .../templates/super_date_picker/overview.mdx | 6 - .../templates/super_date_picker/testing.mdx | 64 - .../display/_category_.yml | 2 +- .../docs/components/display/aspect_ratio.mdx | 74 + .../docs/components/display/avatar.mdx | 223 ++ .../website/docs/components/display/badge.mdx | 420 +++ .../docs/components/display/callout.mdx | 214 ++ .../website/docs/components/display/card.mdx | 703 ++++ .../docs/components/display/comment_list.mdx | 772 ++++ .../components/display/comment_list_props.tsx | 154 + .../components/display/description_list.mdx | 436 +++ .../docs/components/display/drag_and_drop.mdx | 936 +++++ .../display/empty_prompt/_category_.yml | 3 + .../display/empty_prompt/illustration.svg | 939 +++++ .../display/empty_prompt/overview.mdx | 423 +++ .../docs/components/display/health.mdx | 84 + .../components/display/icons/_category_.yml | 3 + .../docs/components/display/icons/custom.svg | 14 + .../components/display/icons/icon_colors.ts | 14 + .../components/display/icons/icon_sizes.ts | 9 + .../components/display/icons/icon_types.ts | 307 ++ .../display/icons/icon_types_apps.ts | 54 + .../display/icons/icon_types_editor.ts | 33 + .../display/icons/icon_types_logos.ts | 24 + .../components/display/icons/icon_types_ml.ts | 12 + .../display/icons/icon_types_tokens.ts | 59 + .../components/display/icons/overview.mdx | 518 +++ .../website/docs/components/display/image.mdx | 236 ++ .../docs/components/display/list_group.mdx | 462 +++ .../docs/components/display/loading.mdx | 106 + .../docs/components/display/progress.mdx | 401 ++ .../docs/components/display/skeleton.mdx | 524 +++ .../website/docs/components/display/stat.mdx | 361 ++ .../website/docs/components/display/text.mdx | 504 +++ .../docs/components/display/timeline.mdx | 258 ++ .../website/docs/components/display/title.mdx | 67 + .../components/display/toast/_category_.yml | 3 + .../components/display/toast/overview.mdx | 272 ++ .../docs/components/display/tooltip.mdx | 252 ++ .../components/display/tour/_category_.yml | 3 + .../docs/components/display/tour/overview.mdx | 890 +++++ .../editors_and_syntax/_category_.yml | 3 + .../components/editors_and_syntax/code.mdx | 1916 ++++++++++ .../editors_and_syntax/markdown_editor.mdx | 444 +++ .../editors_and_syntax/markdown_format.mdx | 418 +++ .../editors_and_syntax/markdown_plugins.mdx | 643 ++++ .../components/elastic_charts/_category_.yml | 3 + .../elastic_charts/accessibility_features.mdx | 445 +++ .../components/elastic_charts/categorical.mdx | 28 + .../components/elastic_charts/categorical.tsx | 461 +++ .../elastic_charts/category_chart.tsx | 287 ++ .../elastic_charts/creating_charts.mdx | 200 + .../docs/components/elastic_charts/data.tsx | 504 +++ .../elastic_charts/metric_anatomy.png | Bin 0 -> 163686 bytes .../elastic_charts/metric_chart.mdx | 656 ++++ .../elastic_charts/metric_chart_no_data.tsx | 57 + .../elastic_charts/metric_chart_resizing.tsx | 55 + .../elastic_charts/metric_intro.png | Bin 0 -> 249734 bytes .../part_to_whole_comparisons.mdx | 308 ++ .../components/elastic_charts/pie_alts.tsx | 319 ++ .../components/elastic_charts/pie_slices.tsx | 321 ++ .../docs/components/elastic_charts/shared.tsx | 172 + .../docs/components/elastic_charts/sizes.tsx | 367 ++ .../docs/components/elastic_charts/sizing.mdx | 260 ++ .../components/elastic_charts/time_chart.tsx | 194 + .../components/elastic_charts/time_series.mdx | 26 + .../elastic_charts/use_chart_base_theme.ts | 11 + .../forms/_category_.yml | 2 +- .../docs/components/forms/auto_refresh.mdx | 101 + .../docs/components/forms/color_selection.mdx | 762 ++++ .../docs/components/forms/combo_box.mdx | 2028 +++++++++++ .../components/forms/compressed_forms.mdx | 825 +++++ .../docs/components/forms/date_picker.mdx | 669 ++++ .../docs/components/forms/expression.mdx | 618 ++++ .../docs/components/forms/filter_group.mdx | 299 ++ .../forms/form_controls/_category_.yml | 3 + .../forms/form_controls/overview.mdx | 992 +++++ .../forms/form_layouts/_category_.yml | 3 + .../forms/form_layouts/guidelines.mdx | 91 + .../forms/form_layouts/overview.mdx | 903 +++++ .../forms/form_validation/_category_.yml | 3 + .../forms/form_validation/guidelines.mdx | 37 + .../forms/form_validation/overview.mdx | 82 + .../docs/components/forms/inline_edit.mdx | 404 +++ .../docs/components/forms/range_sliders.mdx | 709 ++++ .../docs/components/forms/search_bar.mdx | 1065 ++++++ .../docs/components/forms/selectable.mdx | 1123 ++++++ .../forms/selection_controls/_category_.yml | 3 + .../forms/selection_controls/overview.mdx | 403 +++ .../docs/components/forms/super_select.mdx | 193 + .../guidelines}/_category_.yml | 1 + .../components/guidelines/accessibility.mdx | 422 +++ .../components/guidelines/getting_started.mdx | 246 ++ .../guidelines}/testing/_category_.yml | 0 .../guidelines}/testing/introduction.mdx | 0 .../guidelines/testing/recommendations.mdx | 147 + .../guidelines/writing/_category_.yml | 3 + .../guidelines/writing/examples.mdx | 473 +++ .../guidelines/writing/guidelines.mdx | 569 +++ packages/website/docs/components/index.mdx | 1 - .../layout/_category_.yml | 2 +- .../docs/components/layout/accordion.mdx | 733 ++++ .../docs/components/layout/bottom_bar.mdx | 215 ++ .../website/docs/components/layout/flex.mdx | 522 +++ .../layout/flex_preview_wrapper.tsx | 20 + .../website/docs/components/layout/flyout.mdx | 1154 ++++++ .../website/docs/components/layout/header.mdx | 1680 +++++++++ .../components/layout/horizontal_rule.mdx | 72 + .../components/layout/modal/_category_.yml | 3 + .../components/layout/modal/guidelines.mdx | 356 ++ .../docs/components/layout/modal/overview.mdx | 496 +++ .../layout/page_components/_category_.yml | 3 + .../layout/page_components/fake_paragraph.svg | 10 + .../layout/page_components/fake_sidebar.svg | 12 + .../layout/page_components/overview.mdx | 261 ++ .../page_components/preview_wrapper.tsx | 17 + .../docs/components/layout/page_header.mdx | 184 + .../components/layout/panel/_category_.yml | 3 + .../components/layout/panel/guidelines.mdx | 318 ++ .../docs/components/layout/panel/overview.mdx | 234 ++ .../docs/components/layout/popover.mdx | 1326 +++++++ .../components/layout/resizable_container.mdx | 1125 ++++++ .../website/docs/components/layout/spacer.mdx | 57 + .../layout/spacer_preview_wrapper.tsx | 24 + .../navigation/_category_.yml | 2 +- .../components/navigation/breadcrumbs.mdx | 477 +++ .../navigation/button/_category_.yml | 3 + .../navigation/button/button_empty.svg | 12 + .../navigation/button/button_left.svg | 19 + .../navigation/button/button_placement.svg | 47 + .../navigation/button/button_popover.svg | 49 + .../navigation/button/button_right.svg | 19 + .../navigation/button/button_table.svg | 46 + .../navigation/button/button_types.svg | 17 + .../navigation/button/button_types_bad.svg | 18 + .../navigation/button/guidelines.mdx | 339 ++ .../button/guidelines_context_menu.tsx | 60 + .../navigation/button/overview.mdx | 130 +- .../components/navigation/collapsible_nav.mdx | 629 ++++ .../components/navigation/context_menu.mdx | 646 ++++ .../docs/components/navigation/facet.mdx | 364 ++ .../components/navigation/key_pad_menu.mdx | 331 ++ .../docs/components/navigation/link.mdx | 191 + .../navigation/pagination/_category_.yml | 3 + .../navigation/pagination/guidelines.mdx | 340 ++ .../navigation/pagination/overview.mdx | 287 ++ .../pagination/pagination_filters.gif | Bin 0 -> 629008 bytes .../pagination/pagination_infinite_do.svg | 1 + .../pagination/pagination_infinite_dont.svg | 1 + .../docs/components/navigation/side_nav.mdx | 395 ++ .../docs/components/navigation/steps.mdx | 498 +++ .../components/navigation/tabs/_category_.yml | 3 + .../components/navigation/tabs/guidelines.mdx | 26 + .../components/navigation/tabs/overview.mdx | 571 +++ .../docs/components/navigation/tree_view.mdx | 200 + .../components/tabular_content/_category_.yml | 3 + .../components/tabular_content/data_grid.mdx | 1051 ++++++ .../tabular_content/data_grid_advanced.mdx | 1198 ++++++ .../data_grid_cells_and_popovers.mdx | 1057 ++++++ .../data_grid_schema_and_columns.mdx | 962 +++++ .../data_grid_style_and_display.mdx | 1157 ++++++ .../tabular_content/data_grid_toolbar.mdx | 681 ++++ .../tabular_content/in_memory_tables.mdx | 1277 +++++++ .../components/tabular_content/tables.mdx | 3224 +++++++++++++++++ .../templates/_category_.yml | 2 +- .../templates/page_template/_category_.yml | 3 + .../page_template/content_center.svg | 7 + .../templates/page_template/do_1.png | Bin 0 -> 94670 bytes .../templates/page_template/do_10.png | Bin 0 -> 174315 bytes .../templates/page_template/do_11a.png | Bin 0 -> 122607 bytes .../templates/page_template/do_11b.png | Bin 0 -> 112677 bytes .../templates/page_template/do_2.png | Bin 0 -> 109000 bytes .../templates/page_template/do_3.png | Bin 0 -> 45747 bytes .../templates/page_template/do_6.png | Bin 0 -> 90252 bytes .../templates/page_template/do_7.png | Bin 0 -> 77308 bytes .../templates/page_template/do_8.png | Bin 0 -> 85718 bytes .../templates/page_template/do_9.png | Bin 0 -> 414009 bytes .../templates/page_template/dont_1.png | Bin 0 -> 97350 bytes .../templates/page_template/dont_10.png | Bin 0 -> 183206 bytes .../templates/page_template/dont_2.png | Bin 0 -> 107986 bytes .../templates/page_template/dont_3.png | Bin 0 -> 51973 bytes .../templates/page_template/dont_4.png | Bin 0 -> 49923 bytes .../templates/page_template/dont_5.png | Bin 0 -> 35057 bytes .../templates/page_template/dont_6.png | Bin 0 -> 41148 bytes .../templates/page_template/dont_8.png | Bin 0 -> 92152 bytes .../templates/page_template/dont_9.png | Bin 0 -> 427889 bytes .../templates/page_template/guidelines.mdx | 186 + .../templates/page_template/overview.mdx | 279 ++ .../templates/page_template/single.svg | 5 + .../components/templates/sitewide_option.tsx | 41 + .../components/templates/sitewide_search.mdx | 437 +++ .../templates/super_date_picker.mdx | 777 ++++ .../docs/components/theming/_category_.yml | 3 + .../docs/components/theming/borders.mdx | 122 + .../theming/borders/border_preview.tsx | 15 + .../theming/borders/border_radii_table.tsx | 33 + .../theming/borders/border_radius_preview.tsx | 16 + .../theming/borders/border_width.tsx | 15 + .../theming/borders/border_widths_table.tsx | 33 + .../theming/borders/borders_table.tsx | 26 + .../theming/borders/color_preview.tsx | 15 + .../docs/components/theming/breakpoints.mdx | 188 + .../components/theming/breakpoints_table.tsx | 46 + .../docs/components/theming/color_mode.mdx | 289 ++ .../current_custom_breakpoint_preview.tsx | 5 + .../components/theming/provider_details.tsx | 65 + .../components/theming/theme_provider.mdx | 396 ++ .../components/theming/theme_values_table.tsx | 101 + .../theming/use_eui_breakpoint_preview.tsx | 29 + .../use_eui_min_max_breakpoint_preview.tsx | 22 + packages/website/docs/content/overview.mdx | 2 +- packages/website/docs/docgen_demo.mdx | 9 - packages/website/docs/introduction.mdx | 5 - .../docs/patterns/confirmation_prompts.mdx | 4 +- .../error_messages/error_validation.mdx | 8 +- .../patterns/error_messages/error_writing.mdx | 10 +- .../docs/patterns/error_messages/overview.mdx | 2 +- .../website/docs/patterns/help_content.mdx | 10 +- .../website/docs/patterns/pre_ga_badges.mdx | 2 +- packages/website/package.json | 5 + .../display_toggles/display_toggles.tsx | 237 ++ .../src/components/display_toggles/index.ts | 9 + .../src/components/example/example.tsx | 110 + .../website/src/components/example/index.ts | 9 + packages/website/src/components/index.ts | 10 + .../website/src/theme/Demo/default_scope.ts | 28 + packages/website/src/theme/Root.tsx | 28 + yarn.lock | 55 +- 373 files changed, 60920 insertions(+), 5593 deletions(-) create mode 100644 .yarn/patches/infima-npm-0.2.0-alpha.44-145834fad0.patch create mode 100644 packages/docusaurus-theme/src/theme/Demo/default_scope.ts delete mode 100644 packages/website/docs/01_guidelines/getting_started.mdx delete mode 100644 packages/website/docs/01_guidelines/testing/recommendations.mdx delete mode 100644 packages/website/docs/02_components/_category_.yml delete mode 100644 packages/website/docs/02_components/display/aspect_ratio/_category_.yml delete mode 100644 packages/website/docs/02_components/display/aspect_ratio/overview.mdx delete mode 100644 packages/website/docs/02_components/display/avatar/_category_.yml delete mode 100644 packages/website/docs/02_components/display/avatar/overview.mdx delete mode 100644 packages/website/docs/02_components/display/badge/_category_.yml delete mode 100644 packages/website/docs/02_components/display/badge/overview.mdx delete mode 100644 packages/website/docs/02_components/display/callout/_category_.yml delete mode 100644 packages/website/docs/02_components/display/callout/overview.mdx delete mode 100644 packages/website/docs/02_components/display/callout/testing.mdx delete mode 100644 packages/website/docs/02_components/display/callout/testing_quick_reference.svg delete mode 100644 packages/website/docs/02_components/display/card/_category_.yml delete mode 100644 packages/website/docs/02_components/display/card/overview.mdx delete mode 100644 packages/website/docs/02_components/display/comment_list/_category_.yml delete mode 100644 packages/website/docs/02_components/display/comment_list/overview.mdx delete mode 100644 packages/website/docs/02_components/display/description_list/_category_.yml delete mode 100644 packages/website/docs/02_components/display/description_list/overview.mdx delete mode 100644 packages/website/docs/02_components/display/drag_and_drop/_category_.yml delete mode 100644 packages/website/docs/02_components/display/drag_and_drop/overview.mdx delete mode 100644 packages/website/docs/02_components/display/empty_prompt/_category_.yml delete mode 100644 packages/website/docs/02_components/display/empty_prompt/overview.mdx delete mode 100644 packages/website/docs/02_components/display/health/_category_.yml delete mode 100644 packages/website/docs/02_components/display/health/overview.mdx delete mode 100644 packages/website/docs/02_components/display/image/_category_.yml delete mode 100644 packages/website/docs/02_components/display/image/overview.mdx delete mode 100644 packages/website/docs/02_components/display/list_group/_category_.yml delete mode 100644 packages/website/docs/02_components/display/list_group/overview.mdx delete mode 100644 packages/website/docs/02_components/display/loading/_category_.yml delete mode 100644 packages/website/docs/02_components/display/loading/overview.mdx delete mode 100644 packages/website/docs/02_components/display/progress/_category_.yml delete mode 100644 packages/website/docs/02_components/display/progress/overview.mdx delete mode 100644 packages/website/docs/02_components/display/skeleton/_category_.yml delete mode 100644 packages/website/docs/02_components/display/skeleton/overview.mdx delete mode 100644 packages/website/docs/02_components/display/stat/_category_.yml delete mode 100644 packages/website/docs/02_components/display/stat/overview.mdx delete mode 100644 packages/website/docs/02_components/display/text/_category_.yml delete mode 100644 packages/website/docs/02_components/display/text/overview.mdx delete mode 100644 packages/website/docs/02_components/display/text/testing.mdx delete mode 100644 packages/website/docs/02_components/display/timeline/_category_.yml delete mode 100644 packages/website/docs/02_components/display/timeline/overview.mdx delete mode 100644 packages/website/docs/02_components/display/title/_category_.yml delete mode 100644 packages/website/docs/02_components/display/title/overview.mdx delete mode 100644 packages/website/docs/02_components/display/title/testing.mdx delete mode 100644 packages/website/docs/02_components/display/toast/_category_.yml delete mode 100644 packages/website/docs/02_components/display/toast/overview.mdx delete mode 100644 packages/website/docs/02_components/display/tooltip/_category_.yml delete mode 100644 packages/website/docs/02_components/display/tooltip/overview.mdx delete mode 100644 packages/website/docs/02_components/display/tour/_category_.yml delete mode 100644 packages/website/docs/02_components/display/tour/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/auto_refresh/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/auto_refresh/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/color_selection/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/color_selection/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/combo_box/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/combo_box/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/compressed_forms/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/compressed_forms/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/date_picker/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/date_picker/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/expression/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/expression/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/filter_group/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/filter_group/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/form_controls/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/form_controls/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/form_layouts/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/form_layouts/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/form_validation/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/form_validation/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/inline_edit/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/inline_edit/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/range_sliders/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/range_sliders/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/search_bar/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/search_bar/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/selectable/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/selectable/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/selection_controls/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/selection_controls/overview.mdx delete mode 100644 packages/website/docs/02_components/forms/super_select/_category_.yml delete mode 100644 packages/website/docs/02_components/forms/super_select/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/accordion/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/accordion/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/bottom_bar/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/bottom_bar/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/flex/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/flex/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/flyout/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/flyout/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/header/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/header/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/horizontal_rule/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/horizontal_rule/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/modal/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/modal/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/page_header/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/page_header/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/panel/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/panel/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/popover/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/popover/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/resizable_container/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/resizable_container/overview.mdx delete mode 100644 packages/website/docs/02_components/layout/spacer/_category_.yml delete mode 100644 packages/website/docs/02_components/layout/spacer/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/breadcrumbs/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/breadcrumbs/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/button/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/button/testing.mdx delete mode 100644 packages/website/docs/02_components/navigation/collapsible_nav/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/collapsible_nav/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/combo_box/testing.mdx delete mode 100644 packages/website/docs/02_components/navigation/combo_box/testing_quick_reference.svg delete mode 100644 packages/website/docs/02_components/navigation/context_menu/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/context_menu/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/facet/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/facet/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/key_pad_menu/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/key_pad_menu/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/link/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/link/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/link/testing.mdx delete mode 100644 packages/website/docs/02_components/navigation/pagination/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/pagination/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/side_nav/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/side_nav/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/steps/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/steps/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/tabs/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/tabs/overview.mdx delete mode 100644 packages/website/docs/02_components/navigation/tree_view/_category_.yml delete mode 100644 packages/website/docs/02_components/navigation/tree_view/overview.mdx delete mode 100644 packages/website/docs/02_components/templates/super_date_picker/_category_.yml delete mode 100644 packages/website/docs/02_components/templates/super_date_picker/overview.mdx delete mode 100644 packages/website/docs/02_components/templates/super_date_picker/testing.mdx rename packages/website/docs/{02_components => components}/display/_category_.yml (72%) create mode 100644 packages/website/docs/components/display/aspect_ratio.mdx create mode 100644 packages/website/docs/components/display/avatar.mdx create mode 100644 packages/website/docs/components/display/badge.mdx create mode 100644 packages/website/docs/components/display/callout.mdx create mode 100644 packages/website/docs/components/display/card.mdx create mode 100644 packages/website/docs/components/display/comment_list.mdx create mode 100644 packages/website/docs/components/display/comment_list_props.tsx create mode 100644 packages/website/docs/components/display/description_list.mdx create mode 100644 packages/website/docs/components/display/drag_and_drop.mdx create mode 100644 packages/website/docs/components/display/empty_prompt/_category_.yml create mode 100644 packages/website/docs/components/display/empty_prompt/illustration.svg create mode 100644 packages/website/docs/components/display/empty_prompt/overview.mdx create mode 100644 packages/website/docs/components/display/health.mdx create mode 100644 packages/website/docs/components/display/icons/_category_.yml create mode 100644 packages/website/docs/components/display/icons/custom.svg create mode 100644 packages/website/docs/components/display/icons/icon_colors.ts create mode 100644 packages/website/docs/components/display/icons/icon_sizes.ts create mode 100644 packages/website/docs/components/display/icons/icon_types.ts create mode 100644 packages/website/docs/components/display/icons/icon_types_apps.ts create mode 100644 packages/website/docs/components/display/icons/icon_types_editor.ts create mode 100644 packages/website/docs/components/display/icons/icon_types_logos.ts create mode 100644 packages/website/docs/components/display/icons/icon_types_ml.ts create mode 100644 packages/website/docs/components/display/icons/icon_types_tokens.ts create mode 100644 packages/website/docs/components/display/icons/overview.mdx create mode 100644 packages/website/docs/components/display/image.mdx create mode 100644 packages/website/docs/components/display/list_group.mdx create mode 100644 packages/website/docs/components/display/loading.mdx create mode 100644 packages/website/docs/components/display/progress.mdx create mode 100644 packages/website/docs/components/display/skeleton.mdx create mode 100644 packages/website/docs/components/display/stat.mdx create mode 100644 packages/website/docs/components/display/text.mdx create mode 100644 packages/website/docs/components/display/timeline.mdx create mode 100644 packages/website/docs/components/display/title.mdx create mode 100644 packages/website/docs/components/display/toast/_category_.yml create mode 100644 packages/website/docs/components/display/toast/overview.mdx create mode 100644 packages/website/docs/components/display/tooltip.mdx create mode 100644 packages/website/docs/components/display/tour/_category_.yml create mode 100644 packages/website/docs/components/display/tour/overview.mdx create mode 100644 packages/website/docs/components/editors_and_syntax/_category_.yml create mode 100644 packages/website/docs/components/editors_and_syntax/code.mdx create mode 100644 packages/website/docs/components/editors_and_syntax/markdown_editor.mdx create mode 100644 packages/website/docs/components/editors_and_syntax/markdown_format.mdx create mode 100644 packages/website/docs/components/editors_and_syntax/markdown_plugins.mdx create mode 100644 packages/website/docs/components/elastic_charts/_category_.yml create mode 100644 packages/website/docs/components/elastic_charts/accessibility_features.mdx create mode 100644 packages/website/docs/components/elastic_charts/categorical.mdx create mode 100644 packages/website/docs/components/elastic_charts/categorical.tsx create mode 100644 packages/website/docs/components/elastic_charts/category_chart.tsx create mode 100644 packages/website/docs/components/elastic_charts/creating_charts.mdx create mode 100644 packages/website/docs/components/elastic_charts/data.tsx create mode 100644 packages/website/docs/components/elastic_charts/metric_anatomy.png create mode 100644 packages/website/docs/components/elastic_charts/metric_chart.mdx create mode 100644 packages/website/docs/components/elastic_charts/metric_chart_no_data.tsx create mode 100644 packages/website/docs/components/elastic_charts/metric_chart_resizing.tsx create mode 100644 packages/website/docs/components/elastic_charts/metric_intro.png create mode 100644 packages/website/docs/components/elastic_charts/part_to_whole_comparisons.mdx create mode 100644 packages/website/docs/components/elastic_charts/pie_alts.tsx create mode 100644 packages/website/docs/components/elastic_charts/pie_slices.tsx create mode 100644 packages/website/docs/components/elastic_charts/shared.tsx create mode 100644 packages/website/docs/components/elastic_charts/sizes.tsx create mode 100644 packages/website/docs/components/elastic_charts/sizing.mdx create mode 100644 packages/website/docs/components/elastic_charts/time_chart.tsx create mode 100644 packages/website/docs/components/elastic_charts/time_series.mdx create mode 100644 packages/website/docs/components/elastic_charts/use_chart_base_theme.ts rename packages/website/docs/{02_components => components}/forms/_category_.yml (71%) create mode 100644 packages/website/docs/components/forms/auto_refresh.mdx create mode 100644 packages/website/docs/components/forms/color_selection.mdx create mode 100644 packages/website/docs/components/forms/combo_box.mdx create mode 100644 packages/website/docs/components/forms/compressed_forms.mdx create mode 100644 packages/website/docs/components/forms/date_picker.mdx create mode 100644 packages/website/docs/components/forms/expression.mdx create mode 100644 packages/website/docs/components/forms/filter_group.mdx create mode 100644 packages/website/docs/components/forms/form_controls/_category_.yml create mode 100644 packages/website/docs/components/forms/form_controls/overview.mdx create mode 100644 packages/website/docs/components/forms/form_layouts/_category_.yml create mode 100644 packages/website/docs/components/forms/form_layouts/guidelines.mdx create mode 100644 packages/website/docs/components/forms/form_layouts/overview.mdx create mode 100644 packages/website/docs/components/forms/form_validation/_category_.yml create mode 100644 packages/website/docs/components/forms/form_validation/guidelines.mdx create mode 100644 packages/website/docs/components/forms/form_validation/overview.mdx create mode 100644 packages/website/docs/components/forms/inline_edit.mdx create mode 100644 packages/website/docs/components/forms/range_sliders.mdx create mode 100644 packages/website/docs/components/forms/search_bar.mdx create mode 100644 packages/website/docs/components/forms/selectable.mdx create mode 100644 packages/website/docs/components/forms/selection_controls/_category_.yml create mode 100644 packages/website/docs/components/forms/selection_controls/overview.mdx create mode 100644 packages/website/docs/components/forms/super_select.mdx rename packages/website/docs/{01_guidelines => components/guidelines}/_category_.yml (74%) create mode 100644 packages/website/docs/components/guidelines/accessibility.mdx create mode 100644 packages/website/docs/components/guidelines/getting_started.mdx rename packages/website/docs/{01_guidelines => components/guidelines}/testing/_category_.yml (100%) rename packages/website/docs/{01_guidelines => components/guidelines}/testing/introduction.mdx (100%) create mode 100644 packages/website/docs/components/guidelines/testing/recommendations.mdx create mode 100644 packages/website/docs/components/guidelines/writing/_category_.yml create mode 100644 packages/website/docs/components/guidelines/writing/examples.mdx create mode 100644 packages/website/docs/components/guidelines/writing/guidelines.mdx delete mode 100644 packages/website/docs/components/index.mdx rename packages/website/docs/{02_components => components}/layout/_category_.yml (72%) create mode 100644 packages/website/docs/components/layout/accordion.mdx create mode 100644 packages/website/docs/components/layout/bottom_bar.mdx create mode 100644 packages/website/docs/components/layout/flex.mdx create mode 100644 packages/website/docs/components/layout/flex_preview_wrapper.tsx create mode 100644 packages/website/docs/components/layout/flyout.mdx create mode 100644 packages/website/docs/components/layout/header.mdx create mode 100644 packages/website/docs/components/layout/horizontal_rule.mdx create mode 100644 packages/website/docs/components/layout/modal/_category_.yml create mode 100644 packages/website/docs/components/layout/modal/guidelines.mdx create mode 100644 packages/website/docs/components/layout/modal/overview.mdx create mode 100644 packages/website/docs/components/layout/page_components/_category_.yml create mode 100644 packages/website/docs/components/layout/page_components/fake_paragraph.svg create mode 100644 packages/website/docs/components/layout/page_components/fake_sidebar.svg create mode 100644 packages/website/docs/components/layout/page_components/overview.mdx create mode 100644 packages/website/docs/components/layout/page_components/preview_wrapper.tsx create mode 100644 packages/website/docs/components/layout/page_header.mdx create mode 100644 packages/website/docs/components/layout/panel/_category_.yml create mode 100644 packages/website/docs/components/layout/panel/guidelines.mdx create mode 100644 packages/website/docs/components/layout/panel/overview.mdx create mode 100644 packages/website/docs/components/layout/popover.mdx create mode 100644 packages/website/docs/components/layout/resizable_container.mdx create mode 100644 packages/website/docs/components/layout/spacer.mdx create mode 100644 packages/website/docs/components/layout/spacer_preview_wrapper.tsx rename packages/website/docs/{02_components => components}/navigation/_category_.yml (74%) create mode 100644 packages/website/docs/components/navigation/breadcrumbs.mdx create mode 100644 packages/website/docs/components/navigation/button/_category_.yml create mode 100644 packages/website/docs/components/navigation/button/button_empty.svg create mode 100644 packages/website/docs/components/navigation/button/button_left.svg create mode 100644 packages/website/docs/components/navigation/button/button_placement.svg create mode 100644 packages/website/docs/components/navigation/button/button_popover.svg create mode 100644 packages/website/docs/components/navigation/button/button_right.svg create mode 100644 packages/website/docs/components/navigation/button/button_table.svg create mode 100644 packages/website/docs/components/navigation/button/button_types.svg create mode 100644 packages/website/docs/components/navigation/button/button_types_bad.svg create mode 100644 packages/website/docs/components/navigation/button/guidelines.mdx create mode 100644 packages/website/docs/components/navigation/button/guidelines_context_menu.tsx rename packages/website/docs/{02_components => components}/navigation/button/overview.mdx (87%) create mode 100644 packages/website/docs/components/navigation/collapsible_nav.mdx create mode 100644 packages/website/docs/components/navigation/context_menu.mdx create mode 100644 packages/website/docs/components/navigation/facet.mdx create mode 100644 packages/website/docs/components/navigation/key_pad_menu.mdx create mode 100644 packages/website/docs/components/navigation/link.mdx create mode 100644 packages/website/docs/components/navigation/pagination/_category_.yml create mode 100644 packages/website/docs/components/navigation/pagination/guidelines.mdx create mode 100644 packages/website/docs/components/navigation/pagination/overview.mdx create mode 100644 packages/website/docs/components/navigation/pagination/pagination_filters.gif create mode 100644 packages/website/docs/components/navigation/pagination/pagination_infinite_do.svg create mode 100644 packages/website/docs/components/navigation/pagination/pagination_infinite_dont.svg create mode 100644 packages/website/docs/components/navigation/side_nav.mdx create mode 100644 packages/website/docs/components/navigation/steps.mdx create mode 100644 packages/website/docs/components/navigation/tabs/_category_.yml create mode 100644 packages/website/docs/components/navigation/tabs/guidelines.mdx create mode 100644 packages/website/docs/components/navigation/tabs/overview.mdx create mode 100644 packages/website/docs/components/navigation/tree_view.mdx create mode 100644 packages/website/docs/components/tabular_content/_category_.yml create mode 100644 packages/website/docs/components/tabular_content/data_grid.mdx create mode 100644 packages/website/docs/components/tabular_content/data_grid_advanced.mdx create mode 100644 packages/website/docs/components/tabular_content/data_grid_cells_and_popovers.mdx create mode 100644 packages/website/docs/components/tabular_content/data_grid_schema_and_columns.mdx create mode 100644 packages/website/docs/components/tabular_content/data_grid_style_and_display.mdx create mode 100644 packages/website/docs/components/tabular_content/data_grid_toolbar.mdx create mode 100644 packages/website/docs/components/tabular_content/in_memory_tables.mdx create mode 100644 packages/website/docs/components/tabular_content/tables.mdx rename packages/website/docs/{02_components => components}/templates/_category_.yml (73%) create mode 100644 packages/website/docs/components/templates/page_template/_category_.yml create mode 100644 packages/website/docs/components/templates/page_template/content_center.svg create mode 100644 packages/website/docs/components/templates/page_template/do_1.png create mode 100644 packages/website/docs/components/templates/page_template/do_10.png create mode 100644 packages/website/docs/components/templates/page_template/do_11a.png create mode 100644 packages/website/docs/components/templates/page_template/do_11b.png create mode 100644 packages/website/docs/components/templates/page_template/do_2.png create mode 100644 packages/website/docs/components/templates/page_template/do_3.png create mode 100644 packages/website/docs/components/templates/page_template/do_6.png create mode 100644 packages/website/docs/components/templates/page_template/do_7.png create mode 100644 packages/website/docs/components/templates/page_template/do_8.png create mode 100644 packages/website/docs/components/templates/page_template/do_9.png create mode 100644 packages/website/docs/components/templates/page_template/dont_1.png create mode 100644 packages/website/docs/components/templates/page_template/dont_10.png create mode 100644 packages/website/docs/components/templates/page_template/dont_2.png create mode 100644 packages/website/docs/components/templates/page_template/dont_3.png create mode 100644 packages/website/docs/components/templates/page_template/dont_4.png create mode 100644 packages/website/docs/components/templates/page_template/dont_5.png create mode 100644 packages/website/docs/components/templates/page_template/dont_6.png create mode 100644 packages/website/docs/components/templates/page_template/dont_8.png create mode 100644 packages/website/docs/components/templates/page_template/dont_9.png create mode 100644 packages/website/docs/components/templates/page_template/guidelines.mdx create mode 100644 packages/website/docs/components/templates/page_template/overview.mdx create mode 100644 packages/website/docs/components/templates/page_template/single.svg create mode 100644 packages/website/docs/components/templates/sitewide_option.tsx create mode 100644 packages/website/docs/components/templates/sitewide_search.mdx create mode 100644 packages/website/docs/components/templates/super_date_picker.mdx create mode 100644 packages/website/docs/components/theming/_category_.yml create mode 100644 packages/website/docs/components/theming/borders.mdx create mode 100644 packages/website/docs/components/theming/borders/border_preview.tsx create mode 100644 packages/website/docs/components/theming/borders/border_radii_table.tsx create mode 100644 packages/website/docs/components/theming/borders/border_radius_preview.tsx create mode 100644 packages/website/docs/components/theming/borders/border_width.tsx create mode 100644 packages/website/docs/components/theming/borders/border_widths_table.tsx create mode 100644 packages/website/docs/components/theming/borders/borders_table.tsx create mode 100644 packages/website/docs/components/theming/borders/color_preview.tsx create mode 100644 packages/website/docs/components/theming/breakpoints.mdx create mode 100644 packages/website/docs/components/theming/breakpoints_table.tsx create mode 100644 packages/website/docs/components/theming/color_mode.mdx create mode 100644 packages/website/docs/components/theming/current_custom_breakpoint_preview.tsx create mode 100644 packages/website/docs/components/theming/provider_details.tsx create mode 100644 packages/website/docs/components/theming/theme_provider.mdx create mode 100644 packages/website/docs/components/theming/theme_values_table.tsx create mode 100644 packages/website/docs/components/theming/use_eui_breakpoint_preview.tsx create mode 100644 packages/website/docs/components/theming/use_eui_min_max_breakpoint_preview.tsx delete mode 100644 packages/website/docs/docgen_demo.mdx delete mode 100644 packages/website/docs/introduction.mdx create mode 100644 packages/website/src/components/display_toggles/display_toggles.tsx create mode 100644 packages/website/src/components/display_toggles/index.ts create mode 100644 packages/website/src/components/example/example.tsx create mode 100644 packages/website/src/components/example/index.ts create mode 100644 packages/website/src/components/index.ts create mode 100644 packages/website/src/theme/Demo/default_scope.ts create mode 100644 packages/website/src/theme/Root.tsx diff --git a/.yarn/patches/infima-npm-0.2.0-alpha.44-145834fad0.patch b/.yarn/patches/infima-npm-0.2.0-alpha.44-145834fad0.patch new file mode 100644 index 00000000000..fb01d259378 --- /dev/null +++ b/.yarn/patches/infima-npm-0.2.0-alpha.44-145834fad0.patch @@ -0,0 +1,59 @@ +diff --git a/dist/css/default/default.css b/dist/css/default/default.css +index 66dd808169d8697ca5de07ba260c9ee01338d855..df63274cf24a6176a66c05557aa14314b776178a 100644 +--- a/dist/css/default/default.css ++++ b/dist/css/default/default.css +@@ -1165,54 +1165,6 @@ ol ol ol { + list-style-type: lower-alpha; + } + +-/** +- * Copyright (c) Facebook, Inc. and its affiliates. +- * +- * This source code is licensed under the MIT license found in the +- * LICENSE file in the root directory of this source tree. +- */ +- +-table { +- border-collapse: collapse; +- display: block; +- margin-bottom: var(--ifm-spacing-vertical); +- overflow: auto; +-} +- +-table thead tr { +- border-bottom: 2px solid var(--ifm-table-border-color); +- } +- +-table thead { +- background-color: var(--ifm-table-stripe-background); +- } +- +-table tr { +- background-color: var(--ifm-table-background); +- border-top: var(--ifm-table-border-width) solid +- var(--ifm-table-border-color); +- } +- +-table tr:nth-child(2n) { +- background-color: var(--ifm-table-stripe-background); +- } +- +-table th, +- table td { +- border: var(--ifm-table-border-width) solid var(--ifm-table-border-color); +- padding: var(--ifm-table-cell-padding); +- } +- +-table th { +- background-color: var(--ifm-table-head-background); +- color: var(--ifm-table-head-color); +- font-weight: var(--ifm-table-head-font-weight); +- } +- +-table td { +- color: var(--ifm-table-cell-color); +- } +- + /** + * Copyright (c) Facebook, Inc. and its affiliates. + * diff --git a/package.json b/package.json index 5dbceed52ec..aa2f6e7db25 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "@babel/core": "^7.21.8", "jsdom": "24.1.0", "@types/jsdom@npm:^20.0.0": "patch:@types/jsdom@npm%3A20.0.1#~/.yarn/patches/@types-jsdom-npm-20.0.1-5bb899e006.patch", - "infima@npm:0.2.0-alpha.43": "patch:infima@npm%3A0.2.0-alpha.43#~/.yarn/patches/infima-npm-0.2.0-alpha.43-8d3b77b44d.patch" + "infima@npm:0.2.0-alpha.43": "patch:infima@npm%3A0.2.0-alpha.43#~/.yarn/patches/infima-npm-0.2.0-alpha.43-8d3b77b44d.patch", + "infima@npm:0.2.0-alpha.44": "patch:infima@npm%3A0.2.0-alpha.44#~/.yarn/patches/infima-npm-0.2.0-alpha.44-145834fad0.patch" }, "packageManager": "yarn@4.2.2" } diff --git a/packages/docusaurus-theme/src/components/demo/demo.tsx b/packages/docusaurus-theme/src/components/demo/demo.tsx index e87d020c346..578c1033c2d 100644 --- a/packages/docusaurus-theme/src/components/demo/demo.tsx +++ b/packages/docusaurus-theme/src/components/demo/demo.tsx @@ -22,11 +22,12 @@ import { UseEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; +import { demoDefaultScope } from '@theme/Demo/default_scope'; import { DemoContext, DemoContextObject } from './context'; import { DemoEditor } from './editor'; import { DemoPreview } from './preview'; import { DemoSource } from './source'; -import { demoDefaultScope } from './scope'; +import { originalScope } from './scope'; import { DemoActionsBar } from './actions_bar'; import { demoCodeTransformer } from './code_transformer'; import { DemoPreviewProps } from './preview/preview'; @@ -81,6 +82,7 @@ export const Demo = ({ const finalScope = useMemo( () => ({ + ...originalScope, ...demoDefaultScope, ...scope, }), diff --git a/packages/docusaurus-theme/src/components/demo/scope.ts b/packages/docusaurus-theme/src/components/demo/scope.ts index ae03620cce1..dff70ba3a8f 100644 --- a/packages/docusaurus-theme/src/components/demo/scope.ts +++ b/packages/docusaurus-theme/src/components/demo/scope.ts @@ -7,27 +7,8 @@ */ import React from 'react'; -import * as EUI from '@elastic/eui'; -import * as EmotionReact from '@emotion/react'; -/** - * A custom client-side require() alternative to inform users it's not available - * in our demo environment - */ -const clientSideRequire = () => { - throw new Error('require() is not accessible in the interactive demo environment! All EUI and React exports are available in the global scope for you to use without the need to import them.'); -} - -export const demoDefaultScope: Record = { - // React +export const originalScope: Record = { React, ...React, - - // EUI exports - ...EUI, - - // Emotion - ...EmotionReact, - - require: clientSideRequire, }; diff --git a/packages/docusaurus-theme/src/components/index.ts b/packages/docusaurus-theme/src/components/index.ts index ca5195b8861..36e84461a5b 100644 --- a/packages/docusaurus-theme/src/components/index.ts +++ b/packages/docusaurus-theme/src/components/index.ts @@ -8,3 +8,4 @@ export { createDemo } from './demo'; export { Guideline, GuidelineText } from './guideline'; +export { AppThemeContext } from './theme_context'; diff --git a/packages/docusaurus-theme/src/theme/Demo/default_scope.ts b/packages/docusaurus-theme/src/theme/Demo/default_scope.ts new file mode 100644 index 00000000000..2dc1e9142e3 --- /dev/null +++ b/packages/docusaurus-theme/src/theme/Demo/default_scope.ts @@ -0,0 +1,19 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +/** + * A custom client-side require() alternative to inform users it's not available + * in our demo environment + */ +const clientSideRequire = () => { + throw new Error('require() is not accessible in the interactive demo environment! All EUI and React exports are available in the global scope for you to use without the need to import them.'); +} + +export const demoDefaultScope = { + require: clientSideRequire, +}; diff --git a/packages/docusaurus-theme/src/theme/MDXComponents/OrderedList.tsx b/packages/docusaurus-theme/src/theme/MDXComponents/OrderedList.tsx index 6e707cd166a..64b2e0e4283 100644 --- a/packages/docusaurus-theme/src/theme/MDXComponents/OrderedList.tsx +++ b/packages/docusaurus-theme/src/theme/MDXComponents/OrderedList.tsx @@ -12,6 +12,7 @@ import { css } from '@emotion/react'; const getOrderedListStyles = ({ euiTheme }: UseEuiTheme) => css` margin-inline-start: ${euiTheme.size.l}; + list-style: decimal; `; export const OrderedList = ({ children, ...restProps }: HTMLAttributes) => { diff --git a/packages/docusaurus-theme/src/theme/MDXComponents/UnorderedList.tsx b/packages/docusaurus-theme/src/theme/MDXComponents/UnorderedList.tsx index cebbc7aea0d..8e8d2a08ad4 100644 --- a/packages/docusaurus-theme/src/theme/MDXComponents/UnorderedList.tsx +++ b/packages/docusaurus-theme/src/theme/MDXComponents/UnorderedList.tsx @@ -12,6 +12,7 @@ import { css } from '@emotion/react'; const getUnorderedListStyles = ({ euiTheme }: UseEuiTheme) => css` margin-inline-start: ${euiTheme.size.l}; + list-style: disc; `; export const UnorderedList = ({ children, ...restProps }: HTMLAttributes) => { diff --git a/packages/docusaurus-theme/src/theme/reset.styles.ts b/packages/docusaurus-theme/src/theme/reset.styles.ts index c17baf75ec9..a947384d2f0 100644 --- a/packages/docusaurus-theme/src/theme/reset.styles.ts +++ b/packages/docusaurus-theme/src/theme/reset.styles.ts @@ -39,6 +39,10 @@ export const getResetStyles = (theme: UseEuiTheme) => { margin: 0; } + ul, ol { + list-style: none; + } + * { ${euiFocusRing(theme, 'outset', { color: euiTheme.colors.primary })}; } diff --git a/packages/docusaurus-theme/src/theme/theme.d.ts b/packages/docusaurus-theme/src/theme/theme.d.ts index 1ee3edd7ba1..ef999f973ac 100644 --- a/packages/docusaurus-theme/src/theme/theme.d.ts +++ b/packages/docusaurus-theme/src/theme/theme.d.ts @@ -542,3 +542,9 @@ declare module '@theme/Heading' { export default function Heading(props: Props): JSX.Element; } + +declare module '@theme/Demo/default_scope' { + export type ScopeType = Record; + + export const demoDefaultScope: ScopeType; +} diff --git a/packages/website/docs/01_guidelines/getting_started.mdx b/packages/website/docs/01_guidelines/getting_started.mdx deleted file mode 100644 index 6175877fd4e..00000000000 --- a/packages/website/docs/01_guidelines/getting_started.mdx +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: Getting started -slug: getting-started ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Installation - -EUI is published through [NPM](https://www.npmjs.com/package/@elastic/eui) as a dependency. To install EUI into -an existing project, use the `yarn` CLI (`npm` is not supported). - - - - ```shell - yarn add @elastic/eui - ``` - - - ```shell - pnpm add @elastic/eui - ``` - - - -Note that EUI has [several `peerDependencies` requirements](https://github.com/elastic/eui/blob/main/package.json) -that will also need to be installed when starting with a blank project. - - - - ```shell - yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/css moment prop-types - ``` - - - ```shell - pnpm add @elastic/eui @elastic/datemath @emotion/react @emotion/css moment prop-types - ``` - - - -You can read more about other ways to consume EUI in our wiki. - -## Setting up your application - -EUI uses CSS-in-JS (specifically [Emotion](https://emotion.sh)) for its styles and theming. As such, we require an `` wrapper around your application in order for various theme-related UI & UX (such as dark/light mode switching) to work as expected. - -```jsx -import React from 'react'; - -import { EuiProvider, EuiText } from '@elastic/eui'; - -const MyApp = () => ( - -

Hello World!

 - -); - -export default MyApp; -``` - -For more configuration options of the provider, see the -[**EuiProvider** documentation](https://eui.elastic.co/#/utilities/provider). - -## Styling your application - -You can build custom components using EUI's theme tokens, consumed via `useEuiTheme()`. The below example uses Emotion's `css` prop, but any CSS-in-JS library should be able to interpolate the JS variables. - -For more ways to consume EUI's theme, see the [**EuiThemeProvider** documentation](https://eui.elastic.co/#/theming/theme-provider#consuming-with-the-react-hook). - -```jsx -import React from 'react'; -import { EuiIcon, EuiCode, EuiText, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; - -export default () => { - const { euiTheme } = useEuiTheme(); - return ( - -

- {' '} - This primary color will adjust based on the light or dark theme value -

- -

- The padding of this box is created using calc(){' '} - because EUI's theme sizes are string pixel values that are - calculated off the theme's base -

- - ); -}; -``` - -### Customizing with classes - -For consumers using vanilla or preprocessed CSS, all components allow you to pass a custom `className` prop, which will be appended onto the component. - -:::warning Avoid overwriting `.eui` class names -EUI's class names are not a guaranteed API and are prone to change, which will risk breaking your theme. Target your custom classNames instead. -::: - -While EUI's styles are generally low in [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) due to our usage of CSS-in-JS, you may need to ensure that your CSS is defined after ours in your ``. See [EuiProvider's cache customization](https://eui.elastic.co/#/utilities/provider#cache-customization) for more style injection options. - -```jsx -import React from 'react'; -import { EuiButton } from '@elastic/eui'; - -const myCustomCSS = ` - .myCustomButton { - background-color: pink; - } -`; - -export default () => ( - <> - - Hello world! - -); -``` - -### Customizing the style tokens - -EUI can be slightly customized to fit your branding needs by altering the base tokens like color and typography. You can pass a full or partial list of override tokens to the **EuiProvider**'s `modify` prop. - -:::warning Touch the least amount of variables possible -By nature, EUI is very rigid. You shouldn't need much to make drastic changes to color. Most themes are less then a dozen variable overwrites in total. -::: - -For a full list of global tokens visit [Customizing themes](https://eui.elastic.co/#/theming/customizing-themes). For more examples of the modify prop, see the [**EuiThemeProvider** docs](https://eui.elastic.co/#/theming/theme-provider#simple-instance-overrides). - -```jsx -import React, { FunctionComponent, ReactNode } from 'react'; -import { EuiCode, EuiText, EuiThemeProvider, useEuiTheme } from '@elastic/eui'; - -const Box: FunctionComponent<{ children: ReactNode }> = ({ children }) => { - const { euiTheme } = useEuiTheme(); - - return ( - -

{children}

- - ); -}; - -export default () => { - const overrides = { - colors: { - LIGHT: { lightShade: '#d3e6df' }, - DARK: { lightShade: '#394c4b' }, - }, - }; - - return ( - - - The background of this box is using the locally overridden value of{' '} - euiTheme.colors.lightShade - - - ); -}; -``` - -## Fonts - -By default, EUI ships with a font stack that includes some outside, open source fonts. If your system is internet -available you can include these by adding the following imports to your SCSS/CSS files, otherwise you'll need -to bundle the physical fonts in your build. EUI will drop to System Fonts (which you may prefer) in their absence. - -```jsx - -``` - -Or grab all weights, including italics, between 400 and 700 as a variable font. - -```jsx - -``` - - -### Embedding with @font-face - -If your application doesn't allow grabbing the font assets from a CDN, you'll need to download and locally provide -the font files. You can download the files directly from their source site [rsms.me/inter/](https://rsms.me/inter), -then follow the instructions in the provided CSS file for importing. -We recommend using the single variable font file and importing with the following settings: - -```scss -@font-face { - font-family: 'Inter'; - font-weight: 300 900; - font-display: swap; - font-style: oblique 0deg 10deg; - src: url("Inter.var.woff2") format("woff2"); -} -``` - -## Components, Services and Testing imports - -You can import React components from the top-level EUI module. - -```jsx -import { - EuiButton, - EuiCallOut, - EuiPanel, -} from '@elastic/eui'; -``` - -Most services are published from the lib/services directory. -Some are published from their module directories in this directory. - -```jsx -import { keys } from '@elastic/eui/lib/services'; -import { Timer } from '@elastic/eui/lib/services/time'; -``` - -Test utilities are published from the lib/test directory. - -```jsx -import { findTestSubject } from '@elastic/eui/lib/test'; // Enzyme -import { findByTestSubject, render, screen } from '@elastic/eui/lib/test/rtl'; // React Testing Library -``` - -## Customizing component defaults - -While all props can be individually customized via props, some components can have their default props customized -globally via **EuiProvider's** `componentDefaults` API. -[Read more in EuiProvider's documentation](https://eui.elastic.co/#/utilities/provider#component-defaults). - -```jsx - - - -``` diff --git a/packages/website/docs/01_guidelines/testing/recommendations.mdx b/packages/website/docs/01_guidelines/testing/recommendations.mdx deleted file mode 100644 index 7058491319a..00000000000 --- a/packages/website/docs/01_guidelines/testing/recommendations.mdx +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Testing recommendations -sidebar_label: Recommendations ---- - -
- Our general set of do's and don'ts for testing components and views. -
- -## Choose the right selectors - -Follow RTL's [Guiding Principles](https://testing-library.com/docs/guiding-principles/) -and [query priorities](https://testing-library.com/docs/queries/about/#priority) when choosing right element selectors. - -Prioritize accessible and semantic queries (e.g., `[role="dialog"]`) followed by `data-test-subj` attributes over -other, more complicated and prone to breaking queries (e.g. `div > span.title`) whenever possible. - -Check out our component-specific testing docs to find the selectors we officially support. - -**Do:** -```js -screen.getByRole('dialog'); // react-testing-library -cy.get('[role="dialog"]'); // cypress -driver.findElement(By.cssSelector('[role="dialog"]')); // selenium -``` - -**Don't:** -```js -container.querySelector('.euiFlyout'); // react-testing-library -cy.get('.euiFlyout'); // cypress -driver.findElement(By.cssSelector('.euiFlyout')); // selenium -``` - -## Don't use snapshots - -**The EUI team strongly discourages snapshot testing**, despite its simplicity. -Snapshot tests are prone to frequent failures due to the smallest things, like whitespace changes. -Developers often update stored snapshots when they see them fail without thinking too much about why they fail. - -Tests should tell a story and be considered an instant red flag whenever they fail. -They should focus on the important details like the data a component is displaying -or if the data is coming from a prop or being dynamically calculated. - -Instead, consider writing simple but precise assertion tests. - -**Do:** -```js -const { getByText, getByRole } = render(); -expect(getByText('Hello, World!')).toBeInTheDocument(); -expect(getByRole('button')).toHaveTextContent('Save'); -``` - -**Don't:** -```js -const { container } = render(); // react-testing-library -expect(container).toMatchSnapshot(); -``` - -## Avoid time-based waits - -Sometimes the easiest solution to fixing a test is adding a wait/sleep call. In most cases, though, -this can't be considered a reliable fix, because: - -1. It significantly increases total test run time, especially when used often -2. Every machine will take a different amount of time to execute the code, and some — especially CI runners -— are prone to lag during the test run. - -Instead, use the utilities available for every testing framework to wait for elements to appear -or for asynchronous operations to finish execution. - -**Do:** -```js -screen.getByRole('button', { name: 'Save document' }); -expect(await screen.findByText('Document saved successfully')).toBeInTheDocument(); -``` - -**Don't:** -```js -screen.getByRole('button', { name: 'Save document' }); -await new Promise((resolve) => setTimeout(resolve, 1000)); -expect(screen.getByText('Document saved successfully')).toBeInTheDocument(); -``` - -## Write clear test names - -Test cases and suites should have unambiguous names and match the naming convention throughout the project. -Use short but descriptive names written in plain English. - -We recommend using the third-person singular simple present tense for its short form and ease of reading. - -**Do:** -```js -describe('arraySearch()', () => { // use tested function name as the root group name - it('accepts object arrays', () => { /* [...] */ }); - it('accepts string arrays', () => { /* [...] */ }); - it('throw on non-array inputs', () => { /* [...] */}); - it('supports the `options.caseSensitive` option', () => { /*[...]*/ }); -}); -``` - -**Don't:** -```js -describe('array search', () => { // bad: not pointing to what exactly this group is testing - it('object arrays', () => { /* [...] */ }); // bad: not enough context - it('arraySearch(["a", "b"])', () => { /* [...] */ }); // bad: function call example may not be easily understandable - it('should throw on non-array inputs', () => { /* [...] */ }); - it('supports options.caseSensitive', () => { /* [...] */ }); // bad: using two different naming conventions; see line above -}); -``` - -### Wrap property names and data in `` ` `` - -When including property and argument names in the test name string, wrap them in backticks (`` ` ``) to clearly -separate them from the rest of the text. - -**Do:** -```js -it('returns an empty object when the `value` string is empty'); -``` - -**Don't:** -```js -it('returns an empty object when the value string is empty'); -``` - -## Add debug-friendly comments or error messages - -Consider adding custom error messages or code comments for assertions that are not obvious. -For [jest](https://jestjs.io/), we recommend adding a comment on top or to the right of the assertion, -so in case of an error, it will be printed out together as the failing code fragment. - -**Do:** -```js -// Total should equal the result of 1234^2 / 3.14 rounded to two decimal places -expect(screen.getByText('Total: 484954.14')).toBeInTheDocument(); -``` diff --git a/packages/website/docs/02_components/_category_.yml b/packages/website/docs/02_components/_category_.yml deleted file mode 100644 index 2f7ae480de9..00000000000 --- a/packages/website/docs/02_components/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -label: Components -collapsed: false -position: 1 diff --git a/packages/website/docs/02_components/display/aspect_ratio/_category_.yml b/packages/website/docs/02_components/display/aspect_ratio/_category_.yml deleted file mode 100644 index ffbabcbae63..00000000000 --- a/packages/website/docs/02_components/display/aspect_ratio/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_aspect_ratio_overview diff --git a/packages/website/docs/02_components/display/aspect_ratio/overview.mdx b/packages/website/docs/02_components/display/aspect_ratio/overview.mdx deleted file mode 100644 index 9dc9dae718f..00000000000 --- a/packages/website/docs/02_components/display/aspect_ratio/overview.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -id: component_aspect_ratio_overview -title: Aspect ratio -export_name: EuiAspectRatio -slug: /components/aspect-ratio ---- - -:::warning - -In some cases, aspect ratio sizing may not be supported by the embed. -This component will only work with ones that do, like YouTube. - -::: - -**EuiAspectRatio** provides a way to responsively resize a single block level child element to a specified ratio. -This is useful for things like YouTube iframes or other embeds that initially have a fixed size. -If you need something similar for images, take a look at CSS's -[object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). - - - - diff --git a/packages/website/docs/02_components/display/avatar/_category_.yml b/packages/website/docs/02_components/display/avatar/_category_.yml deleted file mode 100644 index d34a7c08cf3..00000000000 --- a/packages/website/docs/02_components/display/avatar/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_avatar_overview diff --git a/packages/website/docs/02_components/display/avatar/overview.mdx b/packages/website/docs/02_components/display/avatar/overview.mdx deleted file mode 100644 index 700c5bd424c..00000000000 --- a/packages/website/docs/02_components/display/avatar/overview.mdx +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: component_avatar_overview -title: Avatar -export_name: EuiAvatar -slug: /components/avatar ---- - -The **EuiAvatar** component typically creates a user icon. -It will accept `name` (required) and `image` props and will configure the display and accessibility as needed. -By default, the background colors come from the set of colors used for visualizations. -Otherwise, you can pass a hex value to the `color` prop. - - - -## Initials - -The initials displayed in the avatar try to be smart based on the name prop. -If the name contains spaces, it will display the first character of each word, **always maxing out at 2 characters**. -You can customize this by passing a combination of `initialsLength` and/or `initials` props. -However, the avatar will still always max out at 2 characters. - - - -## Types - -The avatar `type`, which primarily defines the shape, is keyworded and can be `"user"` (default) -or `"space"` (for workspaces). - - - -## Icons - -Icons can also be displayed instead of initials or images. When simply passing an `iconType`, -it will both size and color appropriately based on the other **EuiAvatar** props. -To customize these specifically, pass `iconSize` and `iconColor`. - -If your icon has multiples or custom colors like a logo, you can keep the default `iconColor` by passing `null`. -Otherwise, it will get the appropriate contrast acceptable variant. -Just ensure that you also are providing an accessible background color to match that of the icon's color. - - - -## Disabled - -While **EuiAvatar** doesn't accept any interactive behaviors itself, you can create a visually presented disabled -avatar by adding `isDisabled` when placed within a disabled element. - - diff --git a/packages/website/docs/02_components/display/badge/_category_.yml b/packages/website/docs/02_components/display/badge/_category_.yml deleted file mode 100644 index e611d904dc1..00000000000 --- a/packages/website/docs/02_components/display/badge/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_badge_overview diff --git a/packages/website/docs/02_components/display/badge/overview.mdx b/packages/website/docs/02_components/display/badge/overview.mdx deleted file mode 100644 index bfdf4e5a5cd..00000000000 --- a/packages/website/docs/02_components/display/badge/overview.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: component_badge_overview -title: Badge -export_name: - - EuiBadge - - EuiBadgeGroup - - EuiBetaBadge - - EuiNotificationBadge -slug: /components/badge ---- - -**EuiBadges** are used to focus on important bits of information. Although they will automatically space themselves -if you use them in a repetitive fashion it is good form to wrap them using a **EuiBadgeGroup** so that they will -wrap when width is constrained (as seen below). - - - -## Badge with Icon - -Badges can use icons on the left and right (default) sides. - - - -## Badge with onClick events - -Badges can have `onClick` events applied to the badge itself or the icon within the badge. The latter option is useful for when you might use badges in other components (like a tag system with autocomplete where you need close events). - -:::note - -`onClick` with `iconOnClick` - -When providing both these click handlers, **EuiBadge** must alter the contents so that it does not contain nested button tags. Please make note that if you provide props other than those explicit to **EuiBadge**, they will always be applied to the main `button` tag which may be inside of the outer most tag. - -::: - - - -## Badge for health status - -Badges can work as health status indicators in places where there are a lot of repeated statuses, e.g. in tables. - - - -## Badge with href - -Badges can also be made to render anchor tags by passing an `href`. - - - -## Badge groups and truncation - -Badges, like buttons, will only every be a single line of text. This means text will not wrap, but be truncated if the badge's width reaches that of its parent's. - -For this reason, badges also auto-apply the inner text of the badge to the `title` attribute of the element to provide default browser tooltips with the full badge text. - -To ensure proper wrapping, truncation and spacing of multiple badges, it is advisable to wrap them in a **EuiBadgeGroup**. - - - -## Beta badge type - -The **EuiBetaBadge** was created specifically to call out modules that are not in GA. Generally the labels used are "Beta" or "Lab". They require an extra `tooltipContent` to describe the purpose of the badge. You can pass an optional `title` prop to populate the tooltip title or html title attribute but by default it will use the `label`. - -If you pass in an `iconType`, only the icon will be used in the badge itself and the label will be applied as the title. Only use an icon when attaching the beta badge to small components. Beta badges can also be made clickable by passing `href` or `onClick` as needed. - -They can also be used in conjunction with [**EuiCards**](#/display/card) and [**EuiKeyPadMenuItems**](#/navigation/key-pad-menu). - - - -## Notification badge type - -Used to showcase the number of notifications, alerts, or hidden selections. This badge type is commonly used in the [**EuiHeader**](#/layout/header) and [**EuiFilterButton**](#/forms/filter-group) components. - - diff --git a/packages/website/docs/02_components/display/callout/_category_.yml b/packages/website/docs/02_components/display/callout/_category_.yml deleted file mode 100644 index 456ae1b0f69..00000000000 --- a/packages/website/docs/02_components/display/callout/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_callout_overview diff --git a/packages/website/docs/02_components/display/callout/overview.mdx b/packages/website/docs/02_components/display/callout/overview.mdx deleted file mode 100644 index c7bba48a5a2..00000000000 --- a/packages/website/docs/02_components/display/callout/overview.mdx +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: component_callout_overview -title: Callout -export_name: EuiCallOut -slug: /components/callout ---- - -**EuiCallOut** contains a message directly related to content on the page. -This includes general information, success, warning, and error messages. - -**Keep these guidelines in mind:** - -* Minimize the number of callouts per page. -* Stack callouts in the order in which they require users' attention: error, warning, info, and then success. -* Offer only one action per callout and ensure it's an action users can perform quickly. -* If the callout has a permanent spot in the UI, but needs to be less obstructive, - set the `size` property to `s` (small). -* Use an `iconType` if it adds context. - -## Info - -Use **EuiCallOut** to communicate general information to the user. - - - -## Success - -Use this callout to notify the user of an action that successfully completed. -Use success callouts sparingly—callouts are typically used for things that are broken rather than things that succeed. - - - -## Warning - -Use this callout to warn the user against decisions they might regret. -You should receive a warning message when the program detects that **something is not behaving right, -but it didn't cause any termination**. - - - -## Danger - -Use this callout to let the user know that something went wrong. For example if you want to communicate an error. -You should receive an error message when the issue is **terminal, this doesn't always mean that the operation -stops completely, but the task is not complete**. - - - -## Dismissible callouts - -To render a cross icon in the top right hand corner, pass an `onDismiss` callback that handles -conditionally rendering your callout. - - diff --git a/packages/website/docs/02_components/display/callout/testing.mdx b/packages/website/docs/02_components/display/callout/testing.mdx deleted file mode 100644 index 0d060cd7c6f..00000000000 --- a/packages/website/docs/02_components/display/callout/testing.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Testing EuiCallOut -sidebar_label: Testing ---- - -import QuickReference from './testing_quick_reference.svg'; - -## Quick reference - - - -## How to test EuiCallOut? - -**EuiCallOut** adds simple wrapper elements to the rendered title, icon, and children. When testing, you should -focus on the inner content that's being passed to the component instead of testing the exact DOM structure. - -We recommend testing for the expected text to exist in the document or within a section of the document it's supposed -to be rendered in (e.g., by `screen.getByText('Lorem ipsum')`). In case there might be multiple EuiCallOuts rendered, -we recommend adding `data-test-subj` attributes to each of them and running queries within specific EuiCallOut -elements to ensure the test is running assertions on the right one. - -## Testing icon type - -You can use the `data-icon-type` attribute of the `.euiIcon` element to check what icon type is rendered. -This level of detail in tests is often unnecessary, and we recommend having really good tests -for the inner data this component renders first before testing icon and callout types. - -## Available selectors - -| Selector | Description | -|:---------------------------------------------|:--------------------| -| `.euiCallOut` | Root element | -| `.euiCallOutHeader__title` | Callout title | -| `.euiIcon` | Callout header icon | -| `[data-test-subj="euiDismissCalloutButton"]` | Dismiss button | diff --git a/packages/website/docs/02_components/display/callout/testing_quick_reference.svg b/packages/website/docs/02_components/display/callout/testing_quick_reference.svg deleted file mode 100644 index 26f2c1f2ed3..00000000000 --- a/packages/website/docs/02_components/display/callout/testing_quick_reference.svg +++ /dev/null @@ -1,89 +0,0 @@ - - EuiCallOut selectors quick reference - EuiCallOut provides three selectors for its inner elements: .euiIcon for the rendered icon, .euiCallOutHeader__title for the title, and [data-test-subj="euiDismissCalloutButton"] for the dismiss button. EuiCallOut's root element can be queried using the .euiCallOut selector - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/website/docs/02_components/display/card/_category_.yml b/packages/website/docs/02_components/display/card/_category_.yml deleted file mode 100644 index d7b2791b0b7..00000000000 --- a/packages/website/docs/02_components/display/card/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_card_overview diff --git a/packages/website/docs/02_components/display/card/overview.mdx b/packages/website/docs/02_components/display/card/overview.mdx deleted file mode 100644 index b1c2be79dda..00000000000 --- a/packages/website/docs/02_components/display/card/overview.mdx +++ /dev/null @@ -1,118 +0,0 @@ ---- -id: component_card_overview -title: Card -export_name: - - EuiCard - - EuiCheckableCard -slug: /components/card ---- - -**EuiCard** is a content-oriented component built on top of [**EuiPanel**](#/layout/panel). -Be sure to check out the [guidelines for properly nesting panels](#/layout/panel/guidelines). - -## Basic card - -At its core an **EuiCard** should contain a `title`,`description`, and an `icon`. -You can make the whole card clickable by giving it an `onClick` handler or `href`. - -For accessibility and heading hierarchy, a card's title element is a `span` by default. -However, this can be changed via the `titleElement` prop without altering the visual size. - - - -## Layout - -Most of the time, cards should read from top to bottom (vertical). However, in some cases, you may want the icon -to be to the left of the content. In this case, add the prop `layout="horizontal"`. -Works best when the icon is size `xl`. - -:::danger - -Horizontal layouts **do not** work with images, footers, or `textAlign`. Therefore, these properties will be ignored. - -::: - - - -## Images - -Images can be added in place of, or in conjunction with, icons. Just pass an url into the `image` prop, -and it will expand to the edges of the card. - -:::note - -Make sure that all images are the **same proportions** when used in a singular row. - -Also, when passing an **element** to the `image` prop that consists solely of inline elements -or does not contain an`` element, each element will require a style of `width: 100%`. - -::: - - - -## Footer - -Footers can contain any number of elements and will always align to the bottom of the card. -However, if you supply a footer containing a **EuiButton** you **must not** also give it an `onClick`. - -:::warning - -When using footers to display generic "Go" buttons, you must provide an `aria-label` to the button itself -that refers back to the title of the card. - -::: - - - -## Beta badge - -If the card links to or references a module that is not GA (beta, lab, etc.), you can add a `betaBadgeProps.label` -and `betaBadgeProps.tooltipContent` to the card, and it will properly create and position an **EuiBetaBadge**. -If you want to change the title of the tooltip, supply a `betaBadgeProps.title` prop. - - - -## Selectable - -When you have a list of cards that can be selected but **do not navigate anywhere**, you can add the `selectable` prop. -The prop is an object that extends **EuiButtonEmpty**. It will apply the button as seen below, -and passing `selectable.isSelected=true` will alter the styles of the card and button to look selected. - -:::warning - -When providing an extra link to more details or such, be sure to stop event propagation from also selecting the card. - -::: - - - -## Checkable - -**EuiCheckableCard** wraps an **EuiRadio** or **EuiCheckbox** with a more-prominent panel, -allowing for children to be displayed. - -:::warning - -When used as a radio group, you must provide a `fieldset` with a `legend` for accessibility. - -::: - - - -## Custom children - -In the event that you need **more than** just paragraph text for the `description`, you can supplement with anything -you need as the `children` of the component. You can also completely replace the description with custom children, -but **EuiCard** at least one of these. - - - -## Plain and other colors - -If you need a card with no borders or shadows pass `display="plain"`. This is a good option to avoid nested panels. -Adding an interaction to the card will provide the clickable styling on hover. The `display` prop also accepts all -other **EuiPanel** colors like `'transparent'`. - -For non-interactive cards, reduce or eliminate the padding as needed to suit your layout with the prop `paddingSize`. - - diff --git a/packages/website/docs/02_components/display/comment_list/_category_.yml b/packages/website/docs/02_components/display/comment_list/_category_.yml deleted file mode 100644 index 11f0c355266..00000000000 --- a/packages/website/docs/02_components/display/comment_list/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_comment_list_overview diff --git a/packages/website/docs/02_components/display/comment_list/overview.mdx b/packages/website/docs/02_components/display/comment_list/overview.mdx deleted file mode 100644 index 8c2f7b54704..00000000000 --- a/packages/website/docs/02_components/display/comment_list/overview.mdx +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: component_comment_list_overview -title: Comment list -export_name: - - EuiCommentList - - EuiComment -slug: /components/comment-list ---- - -The **EuiCommentList** is a timeline component built on top of [**EuiTimeline**](#/display/timeline). -It allows you to display comments or logged actions that either a user or a system has performed. - -:::warning - -For accessibility, it is highly recommended to provide a descriptive `aria-label` or the ID of an external label -to the `aria-labelledby` prop of the **EuiCommentList**. A `timelineAvatarAriaLabel` should be provided -for every **EuiComment** with or without a `timelineAvatar` as `IconType`. - -::: - -## Basic comment list - -Use **EuiCommentList** to display a list of **EuiComments**. -Pass an array of **EuiComment** objects and **EuiCommentList** will generate a comment thread. - - - -## Comment - -The **EuiComment** is flexible and adapts the design according to the props passed. - - - -The following demo shows how you can combine different props to create different types of comments events like -a regular, update, update with a danger background and a custom one. - - - -## Timeline avatar - -The timeline icon is a very important part of the comment: - -* By default, each **EuiComment** shows an avatar with the `userAvatar` icon. A `timelineAvatarAriaLabel` should - be provided when using this default option. -* You can customize your avatar by passing to the `timelineAvatar` any of the icon types that - [**EuiIcon**](#/display/icons) supports. The icon will show inside a `subdued` avatar. Consider this option when - showing a system update. Providing a `timelineAvatarAriaLabel` is recommended. -* You can further customize the timeline icon by passing to the `timelineAvatar` a [**EuiAvatar**](#/display/avatar). - - - -## Comment event actions - -There are scenarios where you might want to allow the user to perform `actions` related to each comment. -Some common `actions` include: editing, deleting, sharing and copying. To add custom `actions` to a comment, -use the `actions` prop. These will be placed to the right of the metadata in the comment's header. We recommend -using a [**EuiButtonIcon**](#/navigation/button) to trigger an action. When having multiple actions, consider -grouping them in a nested menu system using a [**EuiPopover**](#/layout/popover) with -a [**EuiContextMenu**](#/navigation/context-menu). - - - -## A comment system - -The below example uses a list of **EuiComments**, a [**EuiMarkdownEditor**](#/editors-syntax/markdown-editor), -and a [**EuiMarkdownFormat**](#/editors-syntax/markdown-format) to create a simple comment system. - -* Each comment renders in a **EuiComment**. -* We use the **EuiMarkdownEditor** to post the `EuiComment.children`. This means the content uses Markdown. -* When the new **EuiComment** is posted, we use the **EuiMarkdownFormat** to wrap the `EuiComment.children` - and render the Markdown correctly. - -When dealing with asynchronous events like posting a message we recommend setting the **EuiMarkdownEditor** to -a `readOnly` state and the "Add comment" **EuiButton** to a `isLoading` state. This will ensure users understand -that the content cannot be changed while the comment is being submitted. - - diff --git a/packages/website/docs/02_components/display/description_list/_category_.yml b/packages/website/docs/02_components/display/description_list/_category_.yml deleted file mode 100644 index bc8e9b3121e..00000000000 --- a/packages/website/docs/02_components/display/description_list/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_description_list_overview diff --git a/packages/website/docs/02_components/display/description_list/overview.mdx b/packages/website/docs/02_components/display/description_list/overview.mdx deleted file mode 100644 index 46c9f36220a..00000000000 --- a/packages/website/docs/02_components/display/description_list/overview.mdx +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: component_description_list_overview -title: Description list -export_name: - - EuiDescriptionList - - EuiDescriptionListTitle - - EuiDescriptionListDescription -slug: /components/description-list ---- - -**EuiDescriptionList** is a component for listing pairs of information together. You can use the component on its own, -passing in an object for the list. - -You can also use the **EuiDescriptionListTitle** and **EuiDescriptionListDescription** components separately -to build a list manually. - - - -## Reverse style - -Setting the `textStyle` prop to `reverse` will reverse the text styles of the `title` and `description` elements -so that the description is more prominent. This works best for key/value type content. - -Adding this property to the `inline` type will not change anything. - - - -## As columns - -Using the prop `type` set to `column` description lists can be presented in an inline, column format. - - - -To return to the typical row format on smaller screens set `type` to `responsiveColumn`. -The following list will only show the column format on larger screens. - - - -The optional `columnWidths` prop allows customizing specific column widths (e.g. `['100px', '200px']`). -The first array value applies to the title column, and the second applies to the description column. - -Passing numbers instead of CSS width strings will use a ratio of widths. For example, `[1, 3]` will render -a description column 3x the width of the title column. In other words, titles will have a width -of 25% descriptions will have a width of 75%. - -For advanced usage, column width strings also accept -[CSS grid special units, sizing, keywords, and sizing functions](https://css-tricks.com/snippets/css/complete-guide-grid/#aa-special-units-functions). - - - -## Inline - -Using a prop `type` set to `inline` description lists can be presented in an inline, blob format. -This is useful for JSON code blocks. Inline description lists are sized smaller than normal lists due -to their compact nature. - - - -## Customizing appearance - -### Alignment & Compression - -Utilize the `align` and `compressed` props to refine the presentation of your description list. -These are compatible with both column and inline types. - -### Vertical spacing - -Modify the `rowGutterSize` prop to control the vertical spacing between `EuiDescriptionList` elements. -This will not affect inline list types. - -### Horizontal spacing - -Adjust the spacing between the title and description with the `columnGutterSize` prop. -This will not affect inline or row types. - - - -## Passing className - -When using the `listItems` prop to pass an object of items and you need to also add a `className` -(or other available prop) to the individual pieces, you can use the `titleProps` and `descriptionProps` to do so. - - diff --git a/packages/website/docs/02_components/display/drag_and_drop/_category_.yml b/packages/website/docs/02_components/display/drag_and_drop/_category_.yml deleted file mode 100644 index 66115508d8d..00000000000 --- a/packages/website/docs/02_components/display/drag_and_drop/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_drag_and_drop_overview diff --git a/packages/website/docs/02_components/display/drag_and_drop/overview.mdx b/packages/website/docs/02_components/display/drag_and_drop/overview.mdx deleted file mode 100644 index 33597d24723..00000000000 --- a/packages/website/docs/02_components/display/drag_and_drop/overview.mdx +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: component_drag_and_drop_overview -title: Drag and drop -export_name: - - EuiDragDropContext - - EuiDroppable - - EuiDraggable -slug: /components/drag-and-drop ---- - -An extension of [@hello-pangea/dnd](https://github.com/hello-pangea/dnd) (which is an actively maintained fork -of [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)) with a compatible API and built-in -style opinions. Functionality results from 3 components working together: - -* ``: Section of your application containing the draggable elements and the drop targets. -* ``: Area into which items can be dropped. Contains one or more ``. -* ``: Items that can be dragged. Must be part of an `` - -:::warning Consider your users, use case - -Drag and drop interfaces are not well-adapted to many cases, and may be less suitable than other form types -for data operations. For instance, drag and drop interaction relies heavily on spatial orientation that may -not be entirely valid to all users (e.g., screen readers as the sole source of information). -Similarly, users navigating by keyboard may not be afforded nuanced, dual-axis drag item manipulation. - -EUI (largely due to the great work already in @hello-pangea/dnd) has and will continue to ensure accessibility -where possible. With that in mind, keep your users' working context in mind. - -::: - -## Just the facts - -**EuiDraggable** makes very few assumptions about what content it contains. To give affordance to draggable elements -and to ensure a consistent experience, child elements must be able to accept a border and drop shadow -(automatically applied via CSS). No other style opinions are applied, however. - -Similarly, **EuiDroppable** must accept a background color overlay (automatically applied via CSS), -but has no other restrictions. - -All **EuiDragDropContext** elements are discrete and isolated; **EuiDroppables** and **EuiDraggables** cannot -be shared/transferred between instances. Also, **EuiDragDropContexts** cannot be nested. It is recommended that -a single, high-level **EuiDragDropContext** is used and **EuiDroppables** account for categorical and functional -separation (see later examples). - -**EuiDragDropContext** handles all events but makes no assumptions about the result of a drop event. -As such, the following event handlers are available: - -* `onBeforeDragStart` -* `onDragStart` -* `onDragUpdate` -* `onDragEnd` (required) - -EUI also provides methods for helping to deal to common action types: - -* `reorder`: change an item's location in a droppable area -* `copy`: create a duplicate of an item in a different droppable area -* `move`: move an item to a different droppable area - - - -## Simple item reorder - -The simplest case, demonstrating a single **EuiDroppable** with `reorder` behavior. - -Notice the ability to change rendered content based on dragging state. **EuiDraggable** `children` is a render prop -that mush return a `ReactElement`. The `snapshot` parameter on that function has state data that can be used -to alter appearance or behavior (e.g., `isDragging`). - - - -## Custom drag handle - -By default, the entire element surface can initiate a drag. To specify an element within as the handle and create -a containing group, set `customDragHandle=true` and `hasInteractiveChildren=true` on the **EuiDraggable**. - -The `provided` parameter on the **EuiDraggable** `children` render prop has all data required for functionality. -Along with the `customDragHandle` flag,`provided.dragHandleProps` needs to be added to the intended handle element. - - - -:::note - -**Icon-only** custom drag handles require an accessible label. Add an `aria-label="Drag handle"` attribute -to your React component or HTML element that receives`provided.dragHandleProps`. - -::: - -## Interactive elements - -**EuiDraggable** can contain interactive elements such as buttons and form fields. Interactive elements require -`customDragHandle=true` and `hasInteractiveChildren=true` on the **EuiDraggable**. These props will maintain drag -functionality and accessibility, while enabling click, keypress, etc., events on the interactive child elements. - - - -## Move between lists - -By default, all **EuiDroppable** elements are of the same type and will accept **EuiDraggable** elements from -others in the same **EuiDragDropContext**. - -The EUI `move` method is demonstrated in this example. - - - -## Distinguish droppable areas by type - -Setting the `type` prop on an **EuiDroppable** element will ensure that it will only accept **EuiDraggable** elements -from the same type of **EuiDroppable**. - -Notice that the enabled, compatible **EuiDroppable** elements have a visual change that indicates they can accept -the actively moving/focused **EuiDraggable** element. - - - -## Copyable items - -For cases where collections of **EuiDraggable** elements are static or can be used in multiple places set -`cloneDraggables=true` on the parent **EuiDroppable**. The **EuiDroppable** becomes disabled (does not accept -new **EuiDraggable** elements) in this scenario to avoid mixed content intentions. - -The EUI `copy` method is available and demonstrated in the example below. Note that the data point used -as `draggableId` in **EuiDraggable** must change to allow for real duplication. - -`isRemovable` is used in the example for cloned items. This API is likely to change, but currently provides -the visual changes with drop-to-remove interactions. - - - -## Portalled items - -**EuiDraggables** use fixed positioning to render and animate the item being dragged. -This positioning logic does not work as expected when used inside of containers that have their own -[stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). - -To ensure dragging works as expected inside e.g. **EuiFlyout** or **EuiModal** use the prop `usePortal` on **EuiDraggable** components. -This will render the currently dragged element inside a portal appended to the document body (or wherever -**EuiPortal** is configured to `insert` to by default). - -:::warning -If the styling of the your draggable content is scoped to a parent component, the styling won't be applied -while dragging it when using `usePortal`. This is due to the portalled position in the DOM, which changes -previous hierarchical relations to other ancestor elements. To prevent this from happening, we recommend -applying styling from within the **EuiDraggable** scope without any parent selectors. -::: - -```tsx interactive -import React, { FunctionComponent, ReactElement, useState } from 'react'; -import { - EuiButton, - EuiCode, - EuiDragDropContext, - EuiDraggable, - EuiDroppable, - EuiFlyout, - EuiFlyoutBody, - EuiFlyoutHeader, - EuiModal, - EuiModalBody, - EuiModalHeader, - EuiPanel, - EuiSpacer, - EuiTitle, - euiDragDropReorder, - htmlIdGenerator -} from '@elastic/eui'; -import { DroppableProps, OnDragEndResponder } from '@hello-pangea/dnd'; - -const makeId = htmlIdGenerator(); - -const makeList = (number, start = 1) => - Array.from({ length: number }, (v, k) => k + start).map((el) => { - return { - content: `Item ${el}`, - id: makeId(), - }; - }); - -const DragContainer: FunctionComponent<{ - children: ReactElement | ReactElement[] | DroppableProps['children']; - onDragEnd: OnDragEndResponder; -}> = ({ children, onDragEnd }) => ( - - - {children} - - -); - -export default () => { - const [isFlyoutOpen, setFlyoutOpen] = useState(false); - const [isModalOpen, setModalOpen] = useState(false); - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - - const [list, setList] = useState(makeList(3)); - const onDragEnd = ({ source, destination }) => { - if (source && destination) { - const items = euiDragDropReorder(list, source.index, destination.index); - - setList(items); - } - }; - - return ( - <> - setFlyoutOpen(!isFlyoutOpen)}> - Toggle flyout - - - setModalOpen(!isModalOpen)}> - Toggle modal - - - {isFlyoutOpen && ( - setFlyoutOpen(false)}> - - -

- Portalled EuiDraggable items -

- - - - - {list.map(({ content, id }, idx) => ( - - {(provided, state) => ( - - {content} - {state.isDragging && ' ✨'} - - )} - - ))} - - - - )} - - {isModalOpen && ( - setModalOpen(false)}> - - -

- Portalled EuiDraggable items -

- - - - - {list.map(({ content, id }, idx) => ( - - {(provided, state) => ( - - {content} - {state.isDragging && ' ✨'} - - )} - - ))} - - - - )} - - - - setIsPopoverOpen(false)} - button={ - setIsPopoverOpen(!isPopoverOpen)}> - Toggle popover - - } - panelPaddingSize="none" - panelProps={{ css: { inlineSize: 200 } }} - > - { - if (source && destination) { - const items = euiDragDropReorder( - list, - source.index, - destination.index - ); - setList(items); - } - }} - > - {list.map(({ content, id }, idx) => ( - - {(provided, state) => ( - {content} - )} - - ))} - - - - ); -}; -``` - -## Kitchen sink - -**EuiDraggables** in **EuiDroppables**, **EuiDroppables** in **EuiDraggables**, custom drag handles, horizontal -movement, vertical movement, flexbox, panel inception, you name it. - - diff --git a/packages/website/docs/02_components/display/empty_prompt/_category_.yml b/packages/website/docs/02_components/display/empty_prompt/_category_.yml deleted file mode 100644 index a33adcd95a1..00000000000 --- a/packages/website/docs/02_components/display/empty_prompt/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_empty_prompt_overview diff --git a/packages/website/docs/02_components/display/empty_prompt/overview.mdx b/packages/website/docs/02_components/display/empty_prompt/overview.mdx deleted file mode 100644 index d9b7c334882..00000000000 --- a/packages/website/docs/02_components/display/empty_prompt/overview.mdx +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: component_empty_prompt_overview -title: Empty prompt -export_name: EuiEmptyPrompt -slug: /components/empty-prompt ---- - -The **EuiEmptyPrompt** is the building block to create an empty state. You can use it as a placeholder -for any type of empty content. They are especially helpful for replacing entire pages or parts of a product -that contain no content. - -Be sure to read the full [empty prompt usage guidelines](#/guidelines/empty-prompt). - -While no one piece of content is required, each **EuiEmptyPrompt** should contain at least -a `title` (wrapped in an HTML heading element) and/or a `description`. They usually contain one or more -`actions` that promotes the primary call-to-actions. You can also provide a `footer` to direct users -towards making informed decisions. - - - -## Less content, more actions - -You can remove parts of the prompt to simplify it. You can also provide an array of multiple actions. -Be sure to list primary actions first and secondary actions as empty buttons. - - - -## Panel options - -The **EuiEmptyPrompt** is wrapped by [**EuiPanel**](#/layout/panel). By default, the panel is set to `transparent` -but you can customize other panel options like `color`, `hasBorder` and `paddingSize`. Changing the `color` prop will -also attempt to adjust the `iconColor` and `footer` color. - -Read the [usage guidelines](#/guidelines/empty-prompt) to better understand when to use certain panel props. - - - -## Title sizes and icon colors - -Other customization options include changing the `titleSize` to any of the [**EuiTitle** sizes](#/display/title) -and `iconColor`. When using an application or solution logo as the `iconType`, you can reset to the multi-tone -colors with `iconColor="default"` - - - -## Loading and error prompts - -Empty prompts can also be used to emulate loading and error states, by utilizing the same patterns. - -For **loading** states, instead of passing a `iconType`, you can provide a custom `icon` -and pass in one of our [loading components](#/display/loading). - - - -For **error** states, you can simply set the `color` to `danger`. - - - -## Layout - -You can supply a `layout` of either `"horizontal"` or `"vertical"` with the default being `vertical`. -When creating empty states we want the content to be short and straight to the point. So most of the time, -the `vertical` layout is enough. All the content will be center aligned and this type of text alignment -only works with small content. - -When you have longer body text with multiple calls to action, you can use the `horizontal` layout. -This layout works best when you can provide a larger graphic like an illustration as the `icon`. For consistency, -we recommend providing the illustration using a [**EuiImage**](#/display/image) with `size="fullWidth"`. - - - -## More types of empty states - -**EuiEmptyPrompt** can be used for more than just **empty** pages. The following example showcases different types -of empty states that you can create with the **EuiEmptyPrompt**. -For a full list see the [usage guidelines](#/guidelines/empty-prompt). - - - -## Using in a page template - -When using a **EuiEmptyPrompt** in a [**EuiPageTemplate**](#/templates/page-template), -we recommend using the namespaced component so the template can determine which how to display the empty prompt based -on the rest of the template configuration. - -The following example shows the usage -of the [**EuiPageTemplate.EmptyPrompt**](#/templates/page-template#empty-pages-or-content) namespaced component. - - - -You can then tie multiple types of empty states together to create a seamless loading to empty or loading -to error experience. The following example shows how to incorporate these states with -[**EuiPageTemplate.EmptyPrompt**](#/templates/page-template#empty-pages-or-content). - - diff --git a/packages/website/docs/02_components/display/health/_category_.yml b/packages/website/docs/02_components/display/health/_category_.yml deleted file mode 100644 index 03fffc40069..00000000000 --- a/packages/website/docs/02_components/display/health/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_health_overview diff --git a/packages/website/docs/02_components/display/health/overview.mdx b/packages/website/docs/02_components/display/health/overview.mdx deleted file mode 100644 index d6c7d562231..00000000000 --- a/packages/website/docs/02_components/display/health/overview.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -id: component_health_overview -title: Health -export_name: EuiHealth -slug: /components/health ---- - -The **EuiHealth** component should be used when showing comparative health of listed objects (like servers, -HTTP response status codes (as per convenience), nodes, indexes, etc.). Because icons are vague and bulky -and color alone does not work, color plus text provides a recognizable, lightweight combo that works -in most situations. - - - -## Text sizes - -Match the text size of **EuiHealth** to your context by passing `xs / s / m / inherit` to the `textSize` prop. -The `inherit` style will get its font size from the parent element. - - diff --git a/packages/website/docs/02_components/display/image/_category_.yml b/packages/website/docs/02_components/display/image/_category_.yml deleted file mode 100644 index ef341ac64af..00000000000 --- a/packages/website/docs/02_components/display/image/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_image_overview diff --git a/packages/website/docs/02_components/display/image/overview.mdx b/packages/website/docs/02_components/display/image/overview.mdx deleted file mode 100644 index 2854de904b9..00000000000 --- a/packages/website/docs/02_components/display/image/overview.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: component_image_overview -title: Image -export_name: EuiImage -slug: /components/image ---- - -Use **EuiImage** when you need to place a static image into a page with an optional caption. - -:::note Writing meaningful image alt text - -This page has several examples of alt text written to aid screen reader users, as well as several examples of when -_not_ to include alt text. When an image is decorative, or if the image is adequately described by surrounding text, -it is better to pass an empty `""` string instead. - -When an image is not already sufficiently described, the alt text passed should help non-visual users understand -the purpose of the image within the context of the overall page. -See [WebAIM](https://webaim.org/techniques/alttext/) for a more detailed guide to writing effective alt text. - -::: - - - -## Click an image for a fullscreen version - -Apply the `allowFullScreen` prop to make the image clickable and show a fullscreen version. -Note that the second image also passes `fullScreenIconColor="dark"` to change icon color to better contrast -against the light background of that image. - - - -## Images can be sized - -Images can be sized by passing the `size` prop a value of `s / m / l / xl / original / fullWidth / number / string`. -This size sets the **maximum** length of the longest edge of the image, whether that is height or width, and scales it. -Only the provided sizing values will also increase the size of a smaller image. - - - -## Supporting SVG images - -If you are using an SVG source within `EuiImage`, the SVG image may not show up! While this is surprising to the user, -if your image doesn't have a width or viewbox set, it is behaving in accordance with the SVG spec. - -In order to work with an SVG image that lacks a defined size, you'll want to set a `size` prop. -If you are using the `allowFullScreen` prop as well, you will also want to add a `width` prop. - - - -## Float images within text - -When using `EuiImage` within `EuiText` it is often useful to apply floats. Almost always you'll want to pair -the `float` prop usage, with a `margin` prop usage to give space around your image. Margins, when used in combo -with floats, will adjust depending upon the position of the float. - -:::warning Be careful with floats - -Floats should only be used on images within **large** bodies of text. -Specifically, we only suggest using them with `EuiText` which comes automatically clears floats. - -::: - - diff --git a/packages/website/docs/02_components/display/list_group/_category_.yml b/packages/website/docs/02_components/display/list_group/_category_.yml deleted file mode 100644 index 98564da992d..00000000000 --- a/packages/website/docs/02_components/display/list_group/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_list_group_overview diff --git a/packages/website/docs/02_components/display/list_group/overview.mdx b/packages/website/docs/02_components/display/list_group/overview.mdx deleted file mode 100644 index 1b389ac680f..00000000000 --- a/packages/website/docs/02_components/display/list_group/overview.mdx +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: component_list_group_overview -title: List group -export_name: - - EuiListGroup - - EuiListGroupItems - - EuiPinnableListGroup -slug: /components/list-group ---- - -The **EuiListGroup** component is used to present **EuiListGroupItems** in a neatly formatted list. -Use the `flush` and `bordered` properties for full-width and bordered presentations, respectively. - -Adjust the `gutterSize` prop to increase or decrease the spacing between items. - - - -## List of links - -Display **EuiListGroupItems** as links by providing an `href` value and change their state with -the `isActive` and `isDisabled` properties. - -If your link is external or will open in a new tab, you can manually set the `external` property. -However, just like with the [**EuiLink**](#/navigation/link) component, setting `target="_blank"` defaults to `external={true}`. - -As is done in this example, the **EuiListGroup** component can also accept an array of items -via the `listItems` property. - - - -## Secondary link actions - -The `extraAction` property adds a secondary icon button to any list item. It accepts several properties -of its own, including `color`, `onClick`, `iconType`, and `alwaysShow`, and can be used for actions -such as pinning, favoriting, or deleting an item. - - - -## Text wrapping and tooltips - -Optional props `showToolTip` and `wrapLines` can be used to augment the display of list items. -Use these when lists are inside small containers where it is likely that the content will be truncated. - -Similarly, `toolTipText` can be used to provide tooltip text. -By default, the tooltip will have the text same as the `label`. - -You can also use `toolTipProps` to customize tooltip placement, title, and other behaviors. - - - -## List item color and size - -**EuiListGroupItems** will get by default the color `text`. You can enforce a different color of `primary`, `text`, -or `subdued` with the `color` prop. Or provide the prop directly to **EuiListGroup**. - -They also accept options for text size; `'xs' | 's' | 'm' | 'l'`. - - - -## Pinnable list group - -**EuiPinnableListGroup** is simply an extra wrapper around an [**EuiListGroup**](#/display/list-group) -that provides visual indicators for **pinning**. - -Pinning is the concept that users can click a pin icon and add it to a subset of links -(most likely shown in different list group). By providing an `onPinClick` handler, the component will automatically -add the pin action to the item. However, the consuming application must manage the `listItems`and their `pinned` state. - -In order to get the full benefit of using **EuiPinnableListGroup**, the component only supports providing -list items via the `listItem` prop and does not support `children`. - - diff --git a/packages/website/docs/02_components/display/loading/_category_.yml b/packages/website/docs/02_components/display/loading/_category_.yml deleted file mode 100644 index 3870c6c84cf..00000000000 --- a/packages/website/docs/02_components/display/loading/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_loading_overview diff --git a/packages/website/docs/02_components/display/loading/overview.mdx b/packages/website/docs/02_components/display/loading/overview.mdx deleted file mode 100644 index fea868ef5db..00000000000 --- a/packages/website/docs/02_components/display/loading/overview.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: component_loading_overview -title: Loading -export_name: - - EuiLoadingElastic - - EuiLoadingLogo - - EuiLoadingSpinner -slug: /components/loading ---- - -Use loading indicators sparingly and opt for showing actual [progress](#/display/progress#progress-with-values) -over infinite spinners. It is ok to use multiple loaders on a page if each section is progressively loaded. -However, if the entire page is loaded at once, use a single, larger loading indicator. - -## Elastic - -The **EuiLoadingElastic** loader is great for full page or Elastic product loading screens. - - - -## Logos - -**EuiLoadingLogo** accepts any of our [**EuiIcon**](#/display/icons#elastic-logos) logos. -It should only be used in very large panels, like fullscreen pages. - - - -## Chart - -To indicate that a visualization is loading, use **EuiLoadingChart**. -The multicolor version should be used sparingly, and only when a single large visualization is being loaded. - - - -## Spinner - -**EuiLoadingSpinner** is a simple spinner for most loading contexts. - - diff --git a/packages/website/docs/02_components/display/progress/_category_.yml b/packages/website/docs/02_components/display/progress/_category_.yml deleted file mode 100644 index dac1bbb9ee5..00000000000 --- a/packages/website/docs/02_components/display/progress/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_progress_overview diff --git a/packages/website/docs/02_components/display/progress/overview.mdx b/packages/website/docs/02_components/display/progress/overview.mdx deleted file mode 100644 index 14770ff14b8..00000000000 --- a/packages/website/docs/02_components/display/progress/overview.mdx +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: component_progress_overview -title: Progress -export_name: EuiProgress -slug: /components/progress ---- - -The **EuiProgress** component by default will display in an indeterminate loading state (rendered as a single div) -until you define a `max` and `value` prop. The `size` prop refers to its vertical height. -It will always stretch `100%` to its container. - - - -## Progress with values - -Once the `max` and `value` props are set, it will act as a determinate progress bar. -This is rendered using an HTML5 `progress` tag. - - - -## Progress can have absolute or fixed positions - -Using the `position` prop we can align our bar to be `fixed` or `absolute`. In both options, the background color -of the base bar is dropped (since the context of width is already known from your wrapping element). -For the absolute option, make sure that your wrapping element has `position: relative` applied. - -:::note - -Note about progress bars over fixed headers - -Using **EuiProgress** with a `fixed` position may result in it being overlayed when its parent wrapper has -a `z-index` value lower than another fixed element, such as **EuiHeader**. In that case, wrap **EuiProgress** -in an **EuiPortal** as seen on the Snippet tab. - -::: - - - -## Sizes - -You can adjust the `size` of both determinate and indeterminate progress bars. - - - -## Colors - -**EuiProgress** supports a few options for `color`. You can pass any value from our basic color set -or from our visualization palette (`vis0` through `vis9`). To learn more about color usage, -go to the [Colors](#/theming/colors/values) page. - -Additionally, you can pass any valid color string like a hex value or named color. -Each `valueText` renders with a high contrast version of the color. - - - -## Progress for charts - -Determinate progress bar can be used as simple bar charts. Use them with the `label` and `valueText` props -to show the data corresponding to each bar. - -Setting `valueText={true}` will add a % sign next to the `value` passed. If you want to display -a custom `valueText`, you can pass a node instead. - - diff --git a/packages/website/docs/02_components/display/skeleton/_category_.yml b/packages/website/docs/02_components/display/skeleton/_category_.yml deleted file mode 100644 index 7bb4779d265..00000000000 --- a/packages/website/docs/02_components/display/skeleton/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_skeleton_overview diff --git a/packages/website/docs/02_components/display/skeleton/overview.mdx b/packages/website/docs/02_components/display/skeleton/overview.mdx deleted file mode 100644 index 9971faf95b6..00000000000 --- a/packages/website/docs/02_components/display/skeleton/overview.mdx +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: component_skeleton_overview -title: Skeleton -export_name: - - EuiSkeleton - - EuiSkeletonText - - EuiSkeletonTitle - - EuiSkeletonCircle - - EuiSkeletonRectangle - - EuiSkeletonLoading -slug: /components/skeleton ---- - -The **EuiSkeleton** components are placeholder components for content which has yet to load. -They provide meaningful previews, avoid layout content shifts, and add accessible announcements -to screen readers when content is done loading. - -:::note - -Using the `contentAriaLabel` prop - -The `contentAriaLabel` prop should be used to help describe the type of content that is loading -to screen reader users. If you do not provide a descriptive label and have multiple loading skeletons -on the page, screen reader users may hear a multitude of “Loaded” messages in a row, -with no meaningful indication of what actually loaded. - -::: - -## Text - -Use **EuiSkeletonText** to display a placeholder for multiple lines of text. - - - -## Title - -Use **EuiSkeletonTitle** to display a placeholder for heading titles. - - - -## Circle - -Use **EuiSkeletonCircle** to display a circular preview, mainly for avatars. - - - -## Rectangle - -**EuiSkeletonRectangle** allows you define a large and customizable shape via its `width`, `height`, -and `borderRadius` props. - - - -## Combining multiple skeletons - -**EuiSkeletonLoading** is a light wrapper around the **EuiSkeleton** components that handles loading accessibility -and flipping between skeleton and loaded content. - -As you may have noticed in the previous demos, toggling multiple skeletons to their loaded state all at once triggers -multiple queued screen reader announcements, which can be annoying to SR users. - -To circumvent this, use **EuiSkeletonLoading** to handle a single parent-level `isLoading` state. **EuiSkeleton** -children passed to the `loadingContent` should not have their own `isLoading` props or children. - - - -## Customizing screen reader announcements - -**EuiSkeleton** components assume that the page starts as loading and transitions to loaded, and the default -screen reader experience is set up accordingly (`announceLoadedStatus={true}`). - -In scenarios where that is not the case (i.e., transitioning to loading), you can customize what statuses -are announced to screen readers by setting `announceLoadingStatus` to true, or `announceLoadedStatus` to false. -Submitting the below example announces a loading status, but not a loaded status. - -As an optional escape hatch, `ariaLiveProps` is also available and accepts -any [**EuiScreenReaderLive**](#/utilities/accessibility#screen-reader-live-region) props. - - diff --git a/packages/website/docs/02_components/display/stat/_category_.yml b/packages/website/docs/02_components/display/stat/_category_.yml deleted file mode 100644 index a719059d7c3..00000000000 --- a/packages/website/docs/02_components/display/stat/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_stat_overview diff --git a/packages/website/docs/02_components/display/stat/overview.mdx b/packages/website/docs/02_components/display/stat/overview.mdx deleted file mode 100644 index 8ceb3c35836..00000000000 --- a/packages/website/docs/02_components/display/stat/overview.mdx +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: component_stat_overview -title: Stat -export_name: EuiStat -slug: /components/stat ---- - -**EuiStat** can be used to display prominent text or number values. -It consists of `title` and `description` elements with several visual styling properties (examples below). - - - -## Color variants - -`title` can be altered using the color property. By default, it will appear in `full` color. -For proper color contrast, only a limited set of EUI colors are offered. See the Props tab above -for a list of available colors. - - - -## Text alignment - -**EuiStat** also offers alignment options. By default, text will be left aligned. - - - -## Title size - -`title` uses the **EuiTitle** component and thus uses the same sizing property values -(applied via the `titleSize` property). Although all **EuiTitle** sizes are available, suggested sizes -include `'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs'`. By default, the size is set to large `'l'`. -The `description` label cannot be re-sized via component properties. - - - -## Reverse the order - -You can reverse the order of the `description` and `title` text by setting the `reverse` property to true. -By default, the description (label) is displayed above the title (value). - - - -## Stat loading - -If you apply the `isLoading` prop, the title will indicate the loading status by swapping the provided title -with two flashing dashes. - - - -## Component variants - -In the following example, you can see variants of how the **EuiStat** component can be assembled. -This component is very helpful for constructing single-value visualizations and summaries for different dashboards -and page layouts and for communicating trends over time. - - diff --git a/packages/website/docs/02_components/display/text/_category_.yml b/packages/website/docs/02_components/display/text/_category_.yml deleted file mode 100644 index 046aeb5d5be..00000000000 --- a/packages/website/docs/02_components/display/text/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_text_overview diff --git a/packages/website/docs/02_components/display/text/overview.mdx b/packages/website/docs/02_components/display/text/overview.mdx deleted file mode 100644 index 22a8070284c..00000000000 --- a/packages/website/docs/02_components/display/text/overview.mdx +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: component_text_overview -title: Text -export_name: - - EuiText - - EuiTextColor - - EuiTextAlign -slug: /components/text ---- - -**EuiText** is a generic catchall wrapper that will apply our standard typography styling and spacing to naked HTML. -Because of its forced style it **only accepts raw XHTML**. - -:::note When using **EuiText**, keep in mind: - -* All your **XHTML** elements should be direct descendants of **EuiText**. - You should avoid wrapping them in a `div` or `span`. This will ensure styles are applied correctly. -* Avoid nesting React components which would break their styling. - -::: - -**EuiText** can ensure proper line-length for readability by setting a `max-width` on the entire component. -To add the max-width setting, set `grow=false`. - - - -## Text can come in various sizes - -Using the `size` prop on **EuiText** you can get smaller sizes of text than the default. -This demo compares the scaling for all sizes. The goal is that the every line-height lands on the `4px` baseline grid. - - - -## Coloring text - -There are two ways to color text. Either individually by applying **EuiTextColor** on individual text objects, -or by passing the `color` prop directly on **EuiText** for a blanket approach across the entirety of your text. - - - -## Alignment - -There are two ways to align text. Either individually by applying **EuiTextAlign** on individual text objects, -or by passing the `textAlign` prop directly on **EuiText** for a blanket approach across the entirety of your text. - - diff --git a/packages/website/docs/02_components/display/text/testing.mdx b/packages/website/docs/02_components/display/text/testing.mdx deleted file mode 100644 index 814e0eaccb2..00000000000 --- a/packages/website/docs/02_components/display/text/testing.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Testing EuiText -sidebar_label: Testing ---- - -:::warning -In most cases, testing for the usage of `` brings very little value and **should be omitted**. -Instead of testing the implementation details, focus on testing if the contents rendered inside are correct. -::: - -## Available selectors - -| Selector | Description | -|:-----------|:-------------| -| `.euiText` | Root element | diff --git a/packages/website/docs/02_components/display/timeline/_category_.yml b/packages/website/docs/02_components/display/timeline/_category_.yml deleted file mode 100644 index a299b34defc..00000000000 --- a/packages/website/docs/02_components/display/timeline/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_timeline_overview diff --git a/packages/website/docs/02_components/display/timeline/overview.mdx b/packages/website/docs/02_components/display/timeline/overview.mdx deleted file mode 100644 index 8e752992990..00000000000 --- a/packages/website/docs/02_components/display/timeline/overview.mdx +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: component_timeline_overview -title: Timeline -export_name: - - EuiTimeline - - EuiTimelineItem -slug: /components/timeline ---- - -The **EuiTimeline** component standardizes the way a timeline thread is displayed. -Pass an array of **EuiTimelineItem** objects and **EuiTimeline** will generate a timeline thread. - -This component allows you to create any type of timeline, but for more specific use cases you should consider: - -* [**EuiSteps**](#/navigation/steps): a timeline that allows you to present instructional content that must - be conducted in a particular order and might contain progress indications. -* [**EuiCommentList**](#/display/comment-list): a timeline that allows you to display comments or logging - actions that either a user or a system has performed. - -:::warning - -For accessibility, it is required to wrap your **EuiTimelineItem**'s with a **EuiTimeline**. -It is highly recommended to provide a descriptive `aria-label`, or a text node ID of an external label -to the `aria-labelledby` prop of the **EuiTimeline**. - -::: - - - -## Timeline item - -Each **EuiTimelineItem** has two parts: an icon on the left side and an event on the right side. -To create an item you need the following props: - -* `icon`: main icon that appears on the left side. Can be passed as any `IconType` string or custom node - (e.g. [**EuiAvatar**](#/display/avatar)). It is recommended not to use an element larger than 40x40. -* `children`: any node as the event content. - - - -## A timeline thread with multiple items - -You can create a timeline thread by rendering multiple **EuiTimelineItem** components in a **EuiTimeline**. -Following this structure ensures that timeline styles are applied correctly and appropriate semantic elements -are used to assist with screen readers. - -When passing an `icon` and `children` prop to each item, there are some design considerations to take into account: - -* `icon`: use icons of the same size to create a better visual consistency. -* `children`: when your content is just one line of text, the recommendation is to use a [**EuiText**](#/display/text) - as a wrapper. For multi-line content consider using a [**EuiPanel**](#/layout/panel) - or a [**EuiSplitPanel**](#/layout/panel#split-panels) instead. For other types of components like editors, - the recommendation is to pass the children without any wrapper. - -The following example shows how to display multiple **EuiTimelineItem**s and how you can use a **EuiSplitPanel** -as the content wrapper. - - diff --git a/packages/website/docs/02_components/display/title/_category_.yml b/packages/website/docs/02_components/display/title/_category_.yml deleted file mode 100644 index e6fcbaa4bfd..00000000000 --- a/packages/website/docs/02_components/display/title/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_title_overview diff --git a/packages/website/docs/02_components/display/title/overview.mdx b/packages/website/docs/02_components/display/title/overview.mdx deleted file mode 100644 index 6c38a460599..00000000000 --- a/packages/website/docs/02_components/display/title/overview.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -id: component_title_overview -title: Title -export_name: EuiTitle -slug: /components/title ---- - -**EuiTitle** styles the page, section, and content headings we use in Kibana. They can contain any markup, -but usually contain a heading tag of some sort. Unlike **EuiText** they are margin neutral and more suitable -for general layout design. - - diff --git a/packages/website/docs/02_components/display/title/testing.mdx b/packages/website/docs/02_components/display/title/testing.mdx deleted file mode 100644 index 99a4c413646..00000000000 --- a/packages/website/docs/02_components/display/title/testing.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Testing EuiTitle -sidebar_label: Testing ---- - -:::warning -In most cases, testing for the usage of `` brings very little value and **should be omitted**. -Instead of testing the implementation details, focus on testing if the contents rendered inside are correct. -::: - -## Available selectors - -| Selector | Description | -|:------------|:-------------| -| `.euiTitle` | Root element | diff --git a/packages/website/docs/02_components/display/toast/_category_.yml b/packages/website/docs/02_components/display/toast/_category_.yml deleted file mode 100644 index 596f9bc5008..00000000000 --- a/packages/website/docs/02_components/display/toast/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_toast_overview diff --git a/packages/website/docs/02_components/display/toast/overview.mdx b/packages/website/docs/02_components/display/toast/overview.mdx deleted file mode 100644 index 7520c48d3f8..00000000000 --- a/packages/website/docs/02_components/display/toast/overview.mdx +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: component_toast_overview -title: Toast -export_name: EuiToast -slug: /components/toast ---- - -Be sure to read the full [toast usage guidelines](#/guidelines/toast). - -## Toast list - - - -## Default - -**EuiToast** allows for small notes that appear in the bottom right of the screen. -They should be used for ephemeral, live actions (think **save complete** or **something -just finished right now**). - -They should not be used for historical actions (**your report built 30 minutes ago**). -This means that a user should never be greeted with toasts when starting a session. -Toasts should be brief and avoid long paragraphs of text or titling. - - - -## Info - -For informative messages use `type="info"`. - - - -## Success - -For success messages use `color="success"`. - - - -## Warning - -Use this callout to warn the user against decisions they might regret. Show a warning message when the program -detects that **something is not behaving right, but it didn't cause any termination.** For warning messages -use `color="warning"`. - - - -## Danger - -Use this callout to let the user know that something went wrong. For example if you want to communicate an error. -You should show an error message when the issue is **terminal, this doesn't always mean that the operation stops -completely, but the task is not complete**. For errors messages use `color="danger"`. - - diff --git a/packages/website/docs/02_components/display/tooltip/_category_.yml b/packages/website/docs/02_components/display/tooltip/_category_.yml deleted file mode 100644 index f8b4bf300fe..00000000000 --- a/packages/website/docs/02_components/display/tooltip/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_tooltip_overview diff --git a/packages/website/docs/02_components/display/tooltip/overview.mdx b/packages/website/docs/02_components/display/tooltip/overview.mdx deleted file mode 100644 index f73e7e4cfa4..00000000000 --- a/packages/website/docs/02_components/display/tooltip/overview.mdx +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: component_tooltip_overview -title: Tooltip -export_name: - - EuiToolTip - - EuiIconTip -slug: /components/tooltip ---- - -Generally, tooltips should provide short, **non-essential**, contextual information, usually naming or describing -with more detail. If you need interactive content or anything other than text, -we recommend using [**EuiPopover**](#/layout/popover) instead. - -:::warning - -Putting anything other than plain text in a tooltip is lost on screen readers. - -::: - -Wrap **EuiToolTip** around any item that you need a tooltip for and provide the `content` and optionally -the `title`. The `position` prop will take a suggested position, but will change it if the tooltip gets -too close to the edge of the screen. - -:::warning - -Anchoring a tooltip to a non-interactive element makes it difficult for keyboard-only and screen reader users to read. - -::: - - - -## Wrapping components - -**EuiToolTip** wraps its children in a `` element that is `display: inline-block`. -If you are wrapping a block-level child (e.g. a `
`), you may need to change this by passing -`display="block"` but the resulting DOM may be in violation of the HTML5 spec. - -It also applies `onFocus` and `onBlur` props the the cloned `children`. If you pass in a custom component, -then you’ll need to make sure these props are applied to the root element rendered by your component. -The best way to do that is to follow -[EUI’s guidelines on pass-through props](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/developing/props.md#pass-through-props). - - - -## Tooltip on a fixed element - -Tooltips even work on `position: fixed;` elements. Add the `repositionOnScroll` boolean prop to ensure the tooltip -realigns to the fixed anchor on scroll. - - - -## IconTip - -You can use **EuiIconTip** to explain options, other controls, or entire parts of the user interface. -When possible, surface explanations inline within the UI, and only hide them behind a **EuiIconTip** as a last resort. - -It accepts all the same props as **EuiToolTip**. For convenience, you can also specify optional -icon `size`, `type`, and `color` props. - - diff --git a/packages/website/docs/02_components/display/tour/_category_.yml b/packages/website/docs/02_components/display/tour/_category_.yml deleted file mode 100644 index 32c67cd159e..00000000000 --- a/packages/website/docs/02_components/display/tour/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_tour_overview diff --git a/packages/website/docs/02_components/display/tour/overview.mdx b/packages/website/docs/02_components/display/tour/overview.mdx deleted file mode 100644 index d4b5e5d21a4..00000000000 --- a/packages/website/docs/02_components/display/tour/overview.mdx +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: component_tour_overview -title: Tour -export_name: - - EuiTour - - EuiTourStep -slug: /components/tour ---- - -The tour components provided by EUI allow for a flexible and customizable way to showcase items on a page -in an ordered manner by augmenting existing elements on the page without altering functionality. - -:::note - -The examples on this page use `localStorage` to persist state to demonstrate starting a tour at different stages. - -::: - -## Step options - -The **EuiTourStep** component is the base for building a feature tour or an individual popover for onboarding. - -All content and actions including titles, headings, and buttons are customizable via props. - - - -### Using DOM selector as anchor location - -Instead of wrapping the target element, use the `anchor` prop to specify a DOM node. Accepted values include -an HTML element, a function returning an HTML element, or a DOM query selector. - - - -## Standalone steps - -Each **EuiTourStep** can be configured independently via props. In this case, each component is stateless -and needs to be paired with some form of state management for navigation. The later examples showcase other ways -to handle state management via **useEuiTour** and **EuiTour**. - - - -## Managed state with the useEuiTour custom hook - -Use the **useEuiTour** hook for minimal state management using a predefined React reducer. Pass an array of steps -consisting of accepted props, and an object of global configuration. The result is a full configuration object -for each step, a set of reducer actions to perform state changes, and an up-to-date state object derived from -the internal reducer. - - - -## Managed state via EuiTour render prop component - -Use the **EuiTour** render prop component for minimal state management. -This is an alternative to the **useEuiTour** hook for React class components, -or use cases where a single wrapping component can be used. - - - -## Passive tour - -Use the **EuiTour** to provide sequential help without the user performing any actions -(e.g. filling out a form or copying a text). In this scenario, consider using two buttons, **Close tour** and **Next**. - - - -## Fullscreen demo - -Unlike the other examples on this page, this example does not use `localStorage` to persist state. - - diff --git a/packages/website/docs/02_components/forms/auto_refresh/_category_.yml b/packages/website/docs/02_components/forms/auto_refresh/_category_.yml deleted file mode 100644 index 0c1fe763e4d..00000000000 --- a/packages/website/docs/02_components/forms/auto_refresh/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_auto_refresh_overview diff --git a/packages/website/docs/02_components/forms/auto_refresh/overview.mdx b/packages/website/docs/02_components/forms/auto_refresh/overview.mdx deleted file mode 100644 index eeb67eb2663..00000000000 --- a/packages/website/docs/02_components/forms/auto_refresh/overview.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: component_auto_refresh_overview -title: Auto refresh -slug: /components/auto-refresh ---- - -This is a component that is used by the [**EuiSuperDatePicker**](#/templates/super-date-picker) component -to create an automatic refresh configuration. It merely provides a common UI pattern but the actual refresh -counter is maintained by you. It `isPaused` by default and the `refreshInterval` is set in milliseconds. - - - -## Auto refresh button - -If you're looking for a more compact version, you can use **EuiAutoRefreshButton**, -which is the same button that is appended to **EuiSuperDatePicker**. -For even more compactness, add `shortHand={true}` to reduce the active unit to a single letter. - - - -## Refresh interval - -For even more customizablity, you can use the **EuiRefreshInterval** component which simply provides the form inputs. - - diff --git a/packages/website/docs/02_components/forms/color_selection/_category_.yml b/packages/website/docs/02_components/forms/color_selection/_category_.yml deleted file mode 100644 index 773045ba6d3..00000000000 --- a/packages/website/docs/02_components/forms/color_selection/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_color_selection_overview diff --git a/packages/website/docs/02_components/forms/color_selection/overview.mdx b/packages/website/docs/02_components/forms/color_selection/overview.mdx deleted file mode 100644 index f0f9855c45b..00000000000 --- a/packages/website/docs/02_components/forms/color_selection/overview.mdx +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: component_color_selection_overview -title: Color selection -export_name: - - EuiColorPicker - - EuiColorPalettePicker -slug: /components/color-selection ---- - -Two components exist to aid color selection: **EuiColorPicker** and **EuiColorPalettePicker**. - -## Color picker - -Color input component allowing for multiple methods of entry and selection. - -Direct text entry will match hexadecimal (hex) and RGB(a) colors, and output will return both hex and RGBa values. -Spatial selection involves HSV manipulation, which is converted to hex. - -Swatches allow consumers to predefine preferred or suggested choices. -The swatches must also be entered in hex or RGBa format. - - - -## Color palette picker - -Use **EuiColorPalettePicker** to select palettes to apply colors to data visualization like maps and charts. - -Use the `palettes` prop to pass your palettes as an array `strings` or an array of `ColorStops` in the form -of `{ stop: number, color: string }`. For each object, you should pass a palette (array of hex values) -and specify the `type`. Use `fixed` palettes for categorical data and `gradient` palettes for continuous data. - - - -## Color palette display - -Use **EuiColorPaletteDisplay** to show the palette in use for a data visualization. - -Use the palette prop to pass your palette as an array of color `strings` or an array of `ColorStops` -in the form of `{ stop: number, color: string }`. Use `fixed` palettes for categorical data -and `gradient` palettes for continuous data. - -In cases you need to apply a palette, it's recommended to use -the [**EuiColorPalettePicker**](#/forms/color-selection#color-palette-picker). - - - -## Format selection - -Format selection does _not_ limit the format of text input the picker will allow, but instead attempts -to keep consistency during HSV selection. By default, the color picker will automatically -use the last input value format. Notice in following the examples how hue and saturation selection behave differently. - -Swatches will always show the "as-authored" color value, as will the value provided via the `color` prop. - - - -## Alpha channel (opacity) selection - -To allow color opacity via alpha channel, set `showAlpha=true`. -This will also display a range slider allowing manual opacity updates. - - - -## Custom color swatches - -By default, the colors provided are the ten color-blind safe visualization colors. -You can however pass in your own color set with the `swatches` prop. - - - -## Limited selection modes - -By default, both swatch selection and the gradient color map will be rendered. -Use the `mode` prop to pass `swatch` for swatch-only selection, or pass `picker` for gradient map and hue slider -selection without swatches. - - - -## Custom button - -Available only in **EuiColorPicker**. You can optionally use a custom button as the trigger for selection -using the `button` prop. Please remember to add accessibility to this component, -using proper button markup and aria labeling. - -Additionally, use the `secondaryInputDisplay` prop to show a secondary or alternative color value input. -Options include `top` and `bottom` placement. - - - -## Empty state - -For instances where an "empty" color picker has meaning other than transparent color value, -use the `placeholder` prop to provide context. Removing color selection and returning to the default state -can be made easier by setting `isClearable=true`. - - - -## Inline - -Available only in **EuiColorPicker**. Set the `display` prop to `inline` to display the color picker -without an input or popover. Note that the `button` prop will be ignored in this case. - - - -## Containers - -Demonstrating that both color selection components can exist in portal containers and that their popover -positioning works in nested contexts. - - - -## Option toggling - - diff --git a/packages/website/docs/02_components/forms/combo_box/_category_.yml b/packages/website/docs/02_components/forms/combo_box/_category_.yml deleted file mode 100644 index d60b8cd6c8a..00000000000 --- a/packages/website/docs/02_components/forms/combo_box/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_combo_box_overview diff --git a/packages/website/docs/02_components/forms/combo_box/overview.mdx b/packages/website/docs/02_components/forms/combo_box/overview.mdx deleted file mode 100644 index 86af671f610..00000000000 --- a/packages/website/docs/02_components/forms/combo_box/overview.mdx +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: component_combo_box_overview -title: Combo box -slug: /components/combo-box -export_name: EuiComboBox ---- - -Use a **EuiComboBox** when the input has so many options that the user needs to be able to search them, -the user needs to be able to select multiple options, and/or the user should have the ability to specify a custom value -in addition to selecting from a predetermined list. If you're unsure of which selection component to use, -see [EUI's in-depth guide to selection components](https://github.com/elastic/eui/discussions/7049) -for more information. - -:::note - -You must add an accessible label to each instance of **EuiComboBox** - -Labels can be created by wrapping the combo box in an **EuiFormRow** with a `label`, adding an `aria-label` prop, -or passing a text node ID to the `aria-labelledby` prop. - -::: - -## Disabled - -Set the prop `isDisabled` to make the combo box disabled. - -## Case-sensitive matching - -Set the prop `isCaseSensitive` to make the combo box option matching case sensitive. - -## Virtualized - -**EuiComboBoxList** uses [react-window](https://github.com/bvaughn/react-window) to only render visible options -to be super fast no matter how many options there are. - -## Containers - -This example demonstrates how the combo box works within containers. Because this component uses portals, -it’s important that it works within other portal-using components. - -## Pill colors - -Useful for visualization or tagging systems. You can also pass a color in your option list. The color can be -a hex value (like `#000`) or any other named color value accepted by the [**EuiBadge**](#/display/badge) component. - -## Option rendering - -There are two object properties you can add to enhance the content of your options, `option.prepend` -and `option.append`. These will add nodes before and after the option label respectively, to both the dropdown option -and selected pill. They will not be included in the searchable content as this only matches against the label property. - -### Custom dropdown content - -While it is best to stick to the `option.label`, `option.append`, and `option.prepend` props, you can pass -a custom `renderOption` function which will pass back the single option `option` and the `searchValue` -to use for highlighting. - -You can use the `value` prop of the `option` object to store metadata about the option for use in this callback. - -**Note:** virtualization (above) requires that each option have the same height. Ensure that you render the options -so that wrapping text is truncated instead of causing the height of the option to change. - -## Truncation - -By default, **EuiComboBox** truncates long option text at the end of the string. -You can use `truncationProps` and almost any prop that [**EuiTextTruncate**](#/utilities/text-truncation) accepts -to configure this behavior. This can be configured at the **EuiComboBox** level, as well as by each individual option. - -## Groups - -You can group options together. The groups _won’t_ match against the search value. - -## Single selection - -To only allow the user to select a single option, provide the `singleSelection` prop. -You may want to render the selected option as plain text instead of pill form. -To do this, pass `singleSelection={{ asPlainText: true }}` - -## Single selection with prepended label - -`append` and `prepend` props only work if `singleSelection` prop is not set to `false` to avoid multi-lines -that makes combobox height greater than that of `append` and `prepend`. - -## Single selection with custom options - -You can allow the user to select a single option and also allow the creation of custom options. -To do that, use the `singleSelection` in conjunction with the `onCreateOption` prop. - -**Note:** Creating custom options might not be obvious to the user, so provide help text explaining -that this option is available. You can also customize the custom option text by passing -a text to `customOptionText` prop. - -## Disallowing custom options - -Leave out the `onCreateOption` prop to disallow the creation of custom options. - -## Custom options only, with validation - -Alternatively, provide the `noSuggestions` prop to hide the suggestions list and _only_ -allow the creation of custom options. - -## Async - -Use the `onSearchChange` code to handle searches asynchronously. -Use the`isLoading` prop to let the user know that something async is happening. - -## With delimiter - -Pass a unique character to the `delimiter` prop to aid in option creation. -This is best used when knowing that content may be pasted from elsewhere such as a comma separated list. - -## Sorting matches - -By default, the matched options will keep their original sort order. -If you would like to prioritize those options that **start with** the searched string, -pass `sortMatchesBy="startsWith"`to display those options at the top of the list. - -## Duplicate labels - -In general, it is not recommended to use duplicate labels on the options because the user has no way to distinguish -between them. If you need duplicate labels, you will need to add a unique `key` for each option. - -## Accessible label with aria-labelledby - -Sometimes it’s preferable to label a combobox with a heading or paragraph. -You can easily create a unique ID for a text element using the [HTML ID generator](/#/utilities/html-id-generator), -then pass your unique ID to the `aria-labelledby` prop. diff --git a/packages/website/docs/02_components/forms/compressed_forms/_category_.yml b/packages/website/docs/02_components/forms/compressed_forms/_category_.yml deleted file mode 100644 index 8176b440416..00000000000 --- a/packages/website/docs/02_components/forms/compressed_forms/_category_.yml +++ /dev/null @@ -1,4 +0,0 @@ -link: - type: doc - id: component_compressed_forms_overview -position: 4 diff --git a/packages/website/docs/02_components/forms/compressed_forms/overview.mdx b/packages/website/docs/02_components/forms/compressed_forms/overview.mdx deleted file mode 100644 index 2216213d27a..00000000000 --- a/packages/website/docs/02_components/forms/compressed_forms/overview.mdx +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: component_compressed_forms_overview -title: Compressed forms -slug: /components/compressed-forms ---- - -Also known as **Editor-Style Controls**, compressed forms and controls were specifically created for use when space -is at a premium. They are not intended for use when the form is the main objective of the page. -They work best in editor-style applications where form controls are being used to create or edit content on the page. - -:::danger - -Do not use compressed and non-compressed form controls in the same form. - -::: - -To use compressed forms, pass `display="rowCompressed"` to the EuiFormRows and `compressed=true` -to the form controls themselves. - - - -## Column layout - -Editor-style controls can be displayed in a two column layout for even better use of limited space, -just pass `display="columnCompressed"` to align the labels and inputs side by side. - -**EuiSwitches** are a special case in which so you must pass `"columnCompressedSwitch"` -to the EuiFormRow as the display property. - - - -## Contextual help - -When using compressed, horizontal form styles, it is best not to overload the UI with expansive help text. -If it's short and part of the validation, use `helpText`. However, if it's an explanation of the control, -consider wraping the label with an [**EuiToolTip**](#/display/tooltip) and appending the `questionInCircle` icon to it. - - - -## In a popover - -Always use the compressed version of forms and elements when they exist inside a [popover](#/layout/popover). - - - -## Complex example - -This is an example of how to combine compressed form controls with from rows, labels, -prepend and appends in a column layout. - -:::warning - -Pay close attention to the patterns of using `htmlFor` and `aria-label`. -For best results, each form control that is not wrapped in an EuiFormRow should be supplied an `id`. - -::: - - diff --git a/packages/website/docs/02_components/forms/date_picker/_category_.yml b/packages/website/docs/02_components/forms/date_picker/_category_.yml deleted file mode 100644 index eecb55824f0..00000000000 --- a/packages/website/docs/02_components/forms/date_picker/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_date_picker_overview diff --git a/packages/website/docs/02_components/forms/date_picker/overview.mdx b/packages/website/docs/02_components/forms/date_picker/overview.mdx deleted file mode 100644 index 7a5d8b9b19e..00000000000 --- a/packages/website/docs/02_components/forms/date_picker/overview.mdx +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: component_date_picker_overview -title: Date picker -export_name: EuiDatePicker -slug: /components/date-picker ---- - -At its most bare the **EuiDatePicker** only requires props for `selected` and `onChange`. -It depends on [moment](https://momentjs.com/docs/) for all of its formatting. - - - -## Date picker states - -Examples of how the input can appear within a form. This should match our other form styles. - - - -## Time selection - -Two props control time selection. `showTimeSelect` will make time selection appear next to the calendar -and `showTimeSelectOnly` will exclude the calendar and make the time selection the only thing you see. -Make sure to adjust your `dateFormat` and `timeFormat` values to match. - - - -## Locale - -Locale formatting is achieved by using the `locale`, `timeFormat`, and `dateFormat` props. -The latter will take any `moment()` notation. -Check [Date format by country](https://en.wikipedia.org/wiki/Date_format_by_country) for formatting examples. - -:::warning - -Moment will try to load the locale on demand when it is used. Bundlers that do not support dynamic require statements -will need to explicitly import the locale, e.g. `import 'moment/locale/zh-cn'`. See the below demo JS for examples. - -::: - - - -## Date picker range - -To create a single date range control, use **EuiDatePickerRange** and pass individual **EuiDatePicker** components -into the `startDateControl` and `endDateControl` props. You can control the state of both inputs as direct props -on **EuiDatePickerRange** as well as control each individually. Date specific props need to applied -to the individual components. - - - -### Dynamic `minDate` and `maxDate` - -By using `minDate` and `maxDate`, and updating the values based on `startDate` and `endDate`, -users get immediate feedback on what range values are allowed. - - - -## Only allow specific dates and times - -Use the `minDate`, `maxDate`, `minTime`, and `maxTime` props to specify specific ranges the `selected` code -must fall into. You can also use the `excludeDates` and`excludeTimes` property to disallow a specific -array of items from selection. - - - -## Open to a specific date - -Use `openToDate` to default selection to a specific date. - - - -## Custom input - -Use `customInput` to pass a custom input to trigger your calendar. - - - -## UTC offsets - -Use `utcOffset` to apply an offset to the datetime. - - - -## Date picker inline - -Use the `inline` prop to display the date picker directly in the page instead of inside a popover. -This prop works for both **EuiDatePicker** as well as **EuiDatePickerRange**. -If you do not need the default inline shadow effect, apply the `shadow={false}` prop. - - - -## Custom classes - -Custom classes can be passed to various bits of the calendar and input. - -* `className` will pass onto the input. -* `calendarClassName` will pass onto the calendar itself. -* `dayClassName` will pass onto specified days. -* `popperClassName` will pass onto the popover. - - diff --git a/packages/website/docs/02_components/forms/expression/_category_.yml b/packages/website/docs/02_components/forms/expression/_category_.yml deleted file mode 100644 index 59bf4d7ac82..00000000000 --- a/packages/website/docs/02_components/forms/expression/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_expression_overview diff --git a/packages/website/docs/02_components/forms/expression/overview.mdx b/packages/website/docs/02_components/forms/expression/overview.mdx deleted file mode 100644 index 19f4c426007..00000000000 --- a/packages/website/docs/02_components/forms/expression/overview.mdx +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: component_expression_overview -title: Expression -export_name: EuiExpression -slug: /components/expression ---- - -Use the **EuiExpression** component to surface expressions. It requires both a `description` (left side) -and `value` (right side). Optionally, you can pass it an `onClick` function that will convert it to a button -and add some additional styling to indicate that it is clickable. - - - -## Colors - -You can pass a `color` prop but it will only color the `description`. - - - -## Stringing a bunch together - -If the expression is more than one description and value, you can string multiple expressions together, -and they should inline together and wrap at logical points. - - - -## Column display - -There might be cases where displaying multiple **EuiExpression**s in a paragraph is not ideal. -For example, when both the `description` and the `value` are variable or when their text is quite long. -To use a column display instead, pass `display="columns"`. - -In column display, each expression is its own line and the `description` column is aligned to the right. -The default width for the `description` is 20%, but you can customize this with the`descriptionWidth` prop. -When displaying a group of **EuiExpression**s, make sure to set the same width for all descriptions. - - - -## Invalid state - -Set `isInvalid` to true to display **EuiExpression**'s error state. -This state will override the `color` prop with danger. - - - -## Truncate text - -To truncate **EuiExpression**'s content, pass `textWrap="truncate"`. -Text truncation only works properly if the prop types of `description` and `value` are strings. -If you're using nodes, use the `.eui-textTruncate` utility class on all their sub-children. - - diff --git a/packages/website/docs/02_components/forms/filter_group/_category_.yml b/packages/website/docs/02_components/forms/filter_group/_category_.yml deleted file mode 100644 index 89e8a0341cb..00000000000 --- a/packages/website/docs/02_components/forms/filter_group/_category_.yml +++ /dev/null @@ -1,3 +0,0 @@ -link: - type: doc - id: component_filter_group_overview diff --git a/packages/website/docs/02_components/forms/filter_group/overview.mdx b/packages/website/docs/02_components/forms/filter_group/overview.mdx deleted file mode 100644 index 824c8bb2878..00000000000 --- a/packages/website/docs/02_components/forms/filter_group/overview.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: component_filter_group_overview -title: Filter group -export_name: - - EuiFilterGroup - - EuiFilterButtons -slug: /components/filter-group ---- - -## Filter buttons - -Use **EuiFilterGroup** to wrap **EuiFilterButtons** into a container that looks nice against form fields (like search). -These buttons are used in two different patterns. The most simplest use is that of an on/off pattern to show whether -a filter is on. Add the prop `withNext` to remove the border between it and the next EuiFilterButton -to visually group similar or opposite style filters. - -Add the prop `withNext` to remove the border between it and the next EuiFilterButton to visually group similar -or opposite style filters. - -Set `hasActiveFilters` to true when the filter is active. - - - -## Multi-select - -To provide a long list of grouped filters, we recommend wrapping the filter button within -an [**EuiPopover**](#/layout/popover) and passing the items to a searchable [**EuiSelectable**](#/forms/selectable). - -### Indicating number of filters - -By passing a number to `numFilters` you can express the number of filters available. -When the user has applied these filter add the prop `hasActiveFilters` as before and this will change -the coloring of the indicator. You can also supply a number to `numActiveFilters` which will change -the number displayed. - - - -## Layout - -By default, the bar is auto-widthed based on its contents. To expand the bar to fill its parent's width -add `fullWidth`. This will also set each button to grow. If you do not want the button to grow, set `grow=false`. - - diff --git a/packages/website/docs/02_components/forms/form_controls/_category_.yml b/packages/website/docs/02_components/forms/form_controls/_category_.yml deleted file mode 100644 index 9902d5d74f1..00000000000 --- a/packages/website/docs/02_components/forms/form_controls/_category_.yml +++ /dev/null @@ -1,4 +0,0 @@ -link: - type: doc - id: component_form_controls_overview -position: 1 diff --git a/packages/website/docs/02_components/forms/form_controls/overview.mdx b/packages/website/docs/02_components/forms/form_controls/overview.mdx deleted file mode 100644 index 091f1072cc7..00000000000 --- a/packages/website/docs/02_components/forms/form_controls/overview.mdx +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: component_form_controls_overview -title: Form controls -export_name: - - EuiFieldText - - EuiFieldSearch - - EuiFieldNumber - - EuiFieldPassword - - EuiSelect - - EuiTextArea - - EuiFilePicker -slug: /components/form-controls ---- - -EUI provides different types of basic form controls: [**EuiFieldText**](#/forms/form-controls#text-field), -[**EuiFieldSearch**](#/forms/form-controls#search-field), [**EuiFieldNumber**](#/forms/form-controls#number-field), -[**EuiFieldPassword**](#/forms/form-controls#password-field), [**EuiSelect**](#/forms/form-controls#select), -[**EuiTextArea**](#/forms/form-controls#textarea), and [**EuiFilePicker**](#/forms/form-controls#file-picker). - -:::warning - -Wrap each of your from controls in a **EuiFormRow** - -Use the [**EuiFormRow**](#/forms/form-layouts#form-and-form-rows) component to easily associate form components with -labels, help text, and error text. For accessibility, you must provide a `label`, `aria-label` , -or a text node ID of an external label to the `aria-labelledby` prop. - -::: - -## Text field - -This component renders a basic HTML `` element. -Use a **EuiFieldText** to allow users to enter or edit text. - - - -## Search field - -This component renders a basic HTML `` element. -Use a **EuiFieldSearch** to allow users to enter search queries. - - - -## Number field - -This component renders a basic HTML `` element. -Use a **EuiFieldNumber** to allow users to enter numbers. - - - -## Password field - -Use a **EuiFieldPassword** to allow users to enter a password. -By default, it renders a basic HTML `` where the content is obfuscated. -When users type in the field the characters are presented as asterisks. - -You can change this default behavior by passing `type="dual"` so that users can toggle between showing -and obfuscating the content. This option makes the experience more user-friendly and accessible. - - - -## Select - -This component renders a basic HTML `