From e8407ff52232e70b029f37e36e0b2cc25b82d493 Mon Sep 17 00:00:00 2001 From: Constance Date: Fri, 20 Aug 2021 20:15:10 -0700 Subject: [PATCH] [Tech debt] Remove Prettier `jsxBracketSameLine` rule (#5049) * Update prettier rules - Remove jsxBracketSameLine: true (defaults to false) to be more consistent with Kibana - Remove jsxSingleQuote: false rule (which is already the default) - Remove trailing comma in JSON file, prettier was yelling about this * Run prettier --write on src/ components * Run prettier --write on src-docs/ --- .prettierrc | 4 +- src-docs/src/components/codesandbox/link.js | 3 +- .../guide_markdown_format.tsx | 3 +- .../src/components/guide_page/guide_page.js | 6 +- .../guide_page/guide_page_chrome.js | 12 +- .../guide_page/guide_page_header.tsx | 12 +- .../guide_rule/guide_rule_example.js | 6 +- .../guide_section/guide_section.tsx | 3 +- .../guide_section_code.tsx | 3 +- .../guide_section_example.tsx | 3 +- .../guide_section_tabs.tsx | 6 +- .../guide_theme_selector/guide_figma_link.tsx | 6 +- .../guide_sketch_link.tsx | 6 +- .../guide_theme_selector.tsx | 9 +- .../components/with_theme/theme_context.tsx | 3 +- src-docs/src/index.js | 6 +- src-docs/src/routes.js | 3 +- src-docs/src/services/playground/knobs.js | 27 ++- .../src/services/playground/playground.js | 6 +- .../accessibility/accessibility_example.js | 6 +- src-docs/src/views/accessibility/skip_link.js | 3 +- .../src/views/accordion/accordion_arrow.js | 3 +- .../views/accordion/accordion_arrow_right.js | 3 +- .../src/views/accordion/accordion_extra.js | 3 +- .../views/accordion/accordion_forceState.js | 3 +- .../src/views/accordion/accordion_form.js | 9 +- .../src/views/accordion/accordion_grow.js | 9 +- .../views/accordion/accordion_isLoading.js | 3 +- .../src/views/accordion/accordion_multiple.js | 9 +- .../src/views/accordion/accordion_open.js | 3 +- src-docs/src/views/badge/badge.js | 3 +- src-docs/src/views/badge/badge_button.js | 12 +- src-docs/src/views/badge/badge_href.js | 3 +- src-docs/src/views/badge/badge_truncate.js | 6 +- .../bottom_bar/bottom_bar_displacement.js | 6 +- src-docs/src/views/button/button.js | 18 +- src-docs/src/views/button/button_empty.js | 12 +- src-docs/src/views/button/button_ghost.js | 6 +- src-docs/src/views/button/button_toggle.js | 3 +- .../src/views/button/button_toggle_aria.js | 3 +- src-docs/src/views/button/button_with_icon.js | 30 ++- src-docs/src/views/button/guidelines.js | 72 ++++-- src-docs/src/views/button/split_button.js | 3 +- src-docs/src/views/call_out/info.js | 3 +- src-docs/src/views/card/card_checkable.js | 6 +- src-docs/src/views/card/card_children.js | 9 +- src-docs/src/views/card/card_example.js | 3 +- src-docs/src/views/card/card_selectable.js | 9 +- src-docs/src/views/code/code_block.js | 6 +- src-docs/src/views/code/code_block_pre.js | 3 +- src-docs/src/views/code/virtualized_flyout.js | 6 +- .../views/collapsible_nav/collapsible_nav.tsx | 6 +- .../collapsible_nav/collapsible_nav_all.tsx | 15 +- .../collapsible_nav/collapsible_nav_group.tsx | 9 +- .../collapsible_nav/collapsible_nav_list.tsx | 9 +- .../src/views/color_palette/color_palette.js | 3 +- .../color_palette/color_palette_custom.js | 3 +- .../color_palette_quantitative.js | 3 +- src-docs/src/views/color_palette/shared.js | 6 +- src-docs/src/views/color_picker/alpha.js | 6 +- .../color_picker/color_palette_display.js | 9 +- .../src/views/color_picker/color_stops.js | 6 +- src-docs/src/views/color_picker/containers.js | 9 +- .../src/views/color_picker/custom_button.js | 3 +- .../src/views/color_picker/kitchen_sink.js | 3 +- src-docs/src/views/combo_box/containers.js | 6 +- .../views/combo_box/custom_options_only.js | 3 +- .../src/views/combo_box/single_selection.js | 3 +- .../single_selection_custom_options.js | 3 +- src-docs/src/views/comment/comment.tsx | 3 +- .../src/views/comment/comment_actions.tsx | 15 +- .../views/comment/comment_timelineIcons.tsx | 9 +- src-docs/src/views/comment/comment_types.tsx | 3 +- .../src/views/context_menu/content_panel.js | 6 +- .../src/views/context_menu/context_menu.js | 6 +- .../context_menu/context_menu_with_content.js | 9 +- .../src/views/context_menu/single_panel.js | 18 +- src-docs/src/views/context_menu/small.js | 3 +- src-docs/src/views/control_bar/tabs.js | 3 +- .../src/views/datagrid/additional_controls.js | 6 +- .../src/views/datagrid/column_cell_actions.js | 12 +- .../src/views/datagrid/control_columns.js | 21 +- src-docs/src/views/datagrid/datagrid.js | 24 +- .../src/views/datagrid/datagrid_example.js | 3 +- .../views/datagrid/datagrid_focus_example.js | 3 +- .../datagrid_height_options_example.js | 3 +- .../datagrid_virtualization_example.js | 3 +- src-docs/src/views/datagrid/styling.js | 33 ++- .../drag_and_drop/drag_and_drop_clone.js | 9 +- .../drag_and_drop/drag_and_drop_complex.js | 9 +- .../drag_and_drop_custom_handle.js | 6 +- .../drag_and_drop_disable_blocking.js | 6 +- .../drag_and_drop/drag_and_drop_move_lists.js | 12 +- .../drag_and_drop/drag_and_drop_types.js | 9 +- .../elastic_charts/accessibility_bullet.js | 3 +- .../elastic_charts/accessibility_example.js | 9 +- .../views/elastic_charts/category_chart.js | 9 +- src-docs/src/views/elastic_charts/pie_alts.js | 12 +- .../src/views/elastic_charts/pie_example.js | 9 +- .../src/views/elastic_charts/pie_slices.js | 15 +- src-docs/src/views/elastic_charts/shared.js | 9 +- src-docs/src/views/elastic_charts/sizes.js | 15 +- .../src/views/elastic_charts/sparklines.js | 9 +- .../elastic_charts/theming_categorical.js | 18 +- .../views/elastic_charts/theming_example.js | 6 +- .../src/views/elastic_charts/time_chart.js | 6 +- .../views/empty_prompt/empty_prompt_states.js | 3 +- src-docs/src/views/expression/columns.js | 6 +- src-docs/src/views/expression/expression.js | 6 +- src-docs/src/views/facet/facet.js | 3 +- src-docs/src/views/facet/facet_layout.js | 3 +- .../src/views/filter_group/filter_group.js | 18 +- .../views/filter_group/filter_group_multi.js | 9 +- .../views/filter_group/filter_group_simple.js | 6 +- src-docs/src/views/flex/flex_example.js | 3 +- src-docs/src/views/flyout/flyout.js | 3 +- src-docs/src/views/flyout/flyout_banner.js | 3 +- .../src/views/flyout/flyout_complicated.js | 15 +- src-docs/src/views/flyout/flyout_large.js | 3 +- src-docs/src/views/flyout/flyout_max_width.js | 6 +- .../src/views/flyout/flyout_padding_medium.js | 9 +- src-docs/src/views/flyout/flyout_push.js | 3 +- src-docs/src/views/flyout/flyout_small.js | 3 +- .../views/form_compressed/complex_example.js | 6 +- .../views/form_compressed/form_compressed.js | 3 +- .../form_compressed_popover.js | 3 +- .../views/form_compressed/form_horizontal.js | 3 +- .../form_compressed/form_horizontal_help.js | 6 +- .../src/views/form_controls/checkbox_group.js | 3 +- .../views/form_controls/display_toggles.js | 9 +- .../src/views/form_controls/field_password.js | 3 +- .../src/views/form_controls/field_search.js | 3 +- .../src/views/form_controls/file_picker.js | 3 +- .../views/form_controls/file_picker_remove.js | 3 +- .../form_controls/form_control_layout.js | 18 +- .../form_controls/form_controls_example.js | 6 +- .../src/views/form_controls/prepend_append.js | 3 +- .../src/views/form_controls/radio_group.js | 3 +- .../views/form_layouts/accessible_labels.js | 6 +- .../form_layouts/described_form_group.js | 15 +- .../difficult_accessibility_labels.js | 6 +- .../form_layouts/form_layouts_example.js | 3 +- src-docs/src/views/form_layouts/form_rows.js | 6 +- src-docs/src/views/form_layouts/full_width.js | 3 +- src-docs/src/views/form_layouts/guidelines.js | 36 ++- .../src/views/form_layouts/implicit_titles.js | 9 +- .../src/views/form_layouts/inline_popover.js | 12 +- .../src/views/form_validation/validation.js | 3 +- .../src/views/guidelines/accessibility.js | 36 ++- src-docs/src/views/guidelines/colors.js | 39 ++- .../src/views/guidelines/colors/_utilities.js | 6 +- .../guidelines/colors/contrast_slider.js | 21 +- .../views/guidelines/colors/core_palette.js | 6 +- src-docs/src/views/guidelines/sass.js | 66 +++-- src-docs/src/views/guidelines/writing.js | 228 ++++++++++++------ src-docs/src/views/header/header.js | 27 ++- src-docs/src/views/header/header_alert.js | 36 ++- src-docs/src/views/header/header_animate.js | 9 +- src-docs/src/views/header/header_dark.tsx | 6 +- .../views/header/header_elastic_pattern.js | 36 ++- src-docs/src/views/header/header_sections.js | 3 +- src-docs/src/views/header/header_stacked.js | 3 +- .../views/home/home_footer_elastic_logo.tsx | 3 +- src-docs/src/views/home/home_view.js | 12 +- .../html_id_generator/bothPrefixSuffix.js | 3 +- .../html_id_generator/html_id_generator.js | 3 +- .../html_id_generator_prefix.js | 3 +- .../html_id_generator_suffix.js | 3 +- src-docs/src/views/i18n/context.js | 3 +- src-docs/src/views/i18n/i18n_attribute.js | 6 +- src-docs/src/views/i18n/i18n_multi.js | 3 +- src-docs/src/views/icon/apps.js | 6 +- src-docs/src/views/icon/custom_tokens.js | 24 +- src-docs/src/views/icon/editor.js | 6 +- src-docs/src/views/icon/icon_colors.js | 3 +- src-docs/src/views/icon/icon_colors_apps.js | 3 +- src-docs/src/views/icon/icon_example.js | 6 +- src-docs/src/views/icon/icon_sizes.js | 6 +- src-docs/src/views/icon/icon_types.js | 15 +- src-docs/src/views/icon/icons.js | 6 +- src-docs/src/views/icon/logos.js | 6 +- src-docs/src/views/icon/logos_third.js | 3 +- src-docs/src/views/icon/ml.js | 6 +- src-docs/src/views/icon/tokens.js | 6 +- .../src/views/is_color_dark/is_color_dark.js | 6 +- .../src/views/key_pad_menu/key_pad_beta.js | 6 +- .../key_pad_menu/key_pad_menu_checkable.js | 9 +- .../key_pad_menu_checkable_multi.js | 9 +- .../key_pad_menu/key_pad_menu_item_button.js | 15 +- src-docs/src/views/link/link.js | 3 +- src-docs/src/views/link/link_color.js | 3 +- src-docs/src/views/link/link_example.js | 3 +- .../views/markdown_editor/markdown_editor.js | 3 +- .../markdown_editor/markdown_editor_errors.js | 6 +- .../markdown_editor_with_plugins.js | 9 +- .../markdown_editor/markdown_format_sink.js | 9 +- .../markdown_plugin_example.js | 15 +- src-docs/src/views/modal/confirm_modal.js | 6 +- .../src/views/modal/confirm_modal_loading.js | 3 +- src-docs/src/views/modal/guidelines.js | 78 ++++-- .../mutation_observer/mutation_observer.js | 6 +- .../notification_event/notification_event.js | 3 +- .../notification_event_example.js | 3 +- .../notification_event_flexible.js | 6 +- .../notification_event_props_methods.js | 3 +- .../notification_event/notifications_feed.js | 9 +- .../outside_click_detector.js | 3 +- .../src/views/overlay_mask/overlay_mask.js | 9 +- src-docs/src/views/package/i18n_tokens.js | 9 +- src-docs/src/views/page/page_bottom_bar.js | 3 +- .../views/page/page_bottom_bar_template.js | 3 +- src-docs/src/views/page/page_centered_body.js | 3 +- .../views/page/page_centered_body_template.js | 3 +- .../src/views/page/page_centered_content.js | 3 +- .../page/page_centered_content_template.js | 3 +- .../page/page_custom_content_template.js | 3 +- src-docs/src/views/page/page_example.js | 3 +- src-docs/src/views/page/page_full_height.js | 12 +- .../views/page/page_full_height_template.js | 3 +- src-docs/src/views/page/page_new.js | 3 +- .../src/views/page/page_restricting_width.js | 3 +- .../page/page_restricting_width_template.js | 3 +- .../views/page/page_simple_content_body.js | 3 +- .../page/page_simple_content_body_template.js | 3 +- .../views/page/page_simple_empty_content.js | 6 +- .../page_simple_empty_content_template.js | 3 +- .../src/views/page/page_simple_template.js | 3 +- src-docs/src/views/page/page_template.js | 3 +- src-docs/src/views/page_header/page_header.js | 3 +- .../src/views/page_header/page_header_tabs.js | 3 +- .../pagination/customizable_pagination.js | 18 +- src-docs/src/views/panel/guidelines.js | 78 ++++-- src-docs/src/views/panel/panel_example.js | 3 +- src-docs/src/views/popover/input_popover.js | 6 +- src-docs/src/views/popover/popover.js | 3 +- .../views/popover/popover_anchor_position.js | 72 ++++-- src-docs/src/views/popover/popover_block.js | 3 +- .../src/views/popover/popover_container.js | 6 +- src-docs/src/views/popover/popover_fixed.js | 6 +- .../popover/popover_htmlelement_anchor.js | 3 +- .../views/popover/popover_panel_class_name.js | 6 +- .../src/views/popover/popover_with_title.js | 18 +- .../popover/popover_with_title_padding.js | 36 ++- src-docs/src/views/popover/trap_focus.js | 6 +- .../pretty_duration_example.js | 3 +- .../src/views/progress/progress_example.js | 6 +- src-docs/src/views/progress/progress_fixed.js | 3 +- .../resizable_container_example.js | 4 +- .../resizable_container_reset_values.js | 12 +- .../resizable_panel_collapsible.js | 12 +- .../resizable_panel_collapsible_external.js | 9 +- .../resizable_panel_collapsible_options.js | 6 +- .../resizable_panel_collapsible_responsive.js | 6 +- .../resizable_container/resizable_panels.js | 3 +- .../views/resize_observer/resize_observer.js | 3 +- .../views/search_bar/controlled_search_bar.js | 6 +- .../views/search_bar/search_bar_example.js | 3 +- src-docs/src/views/selectable/search.tsx | 3 +- src-docs/src/views/selectable/selectable.tsx | 3 +- .../selectable/selectable_custom_render.js | 3 +- .../views/selectable/selectable_example.js | 6 +- .../views/selectable/selectable_exclusion.tsx | 3 +- .../views/selectable/selectable_messages.tsx | 3 +- .../views/selectable/selectable_popover.js | 12 +- .../views/selectable/selectable_search.tsx | 3 +- .../views/selectable/selectable_single.tsx | 3 +- .../src/views/side_nav/side_nav_example.js | 3 +- src-docs/src/views/stat/stat_combos.js | 12 +- .../src/views/suggest/global_filter_add.js | 3 +- .../src/views/suggest/global_filter_form.js | 6 +- .../src/views/suggest/global_filter_item.js | 6 +- .../views/suggest/global_filter_options.js | 3 +- src-docs/src/views/suggest/hashtag_popover.js | 9 +- src-docs/src/views/suggest/saved_queries.js | 6 +- src-docs/src/views/tables/custom/custom.js | 33 ++- .../in_memory/in_memory_search_external.js | 3 +- .../tables/in_memory/in_memory_section.js | 3 +- .../tables/in_memory/in_memory_selection.js | 9 +- src-docs/src/views/tabs/tabs.js | 3 +- src-docs/src/views/tabs/tabs_condensed.js | 3 +- .../src/views/text_scaling/text_scaling.js | 6 +- src-docs/src/views/toast/danger.js | 3 +- src-docs/src/views/toast/guidelines.js | 78 ++++-- src-docs/src/views/toast/success.js | 3 +- src-docs/src/views/tool_tip/tool_tip.js | 9 +- src-docs/src/views/tour/fullscreen.js | 15 +- src-docs/src/views/tour/step.js | 3 +- src-docs/src/views/tour/tour.js | 6 +- .../views/utility_classes/utility_classes.js | 3 +- .../utility_classes_example.js | 3 +- .../utility_classes_overflow.js | 9 +- .../utility_classes_responsive.js | 3 +- .../utility_classes_section.tsx | 3 +- .../window_event/window_event_example.js | 3 +- src/components/accessibility/skip_link.tsx | 3 +- src/components/accordion/accordion.tsx | 18 +- .../aspect_ratio/aspect_ratio.test.tsx | 3 +- src/components/aspect_ratio/aspect_ratio.tsx | 3 +- src/components/avatar/avatar.tsx | 3 +- src/components/badge/badge.test.tsx | 15 +- src/components/badge/badge.tsx | 15 +- .../badge/beta_badge/beta_badge.tsx | 9 +- src/components/basic_table/basic_table.tsx | 39 ++- .../basic_table/collapsed_item_actions.tsx | 9 +- .../basic_table/default_item_action.tsx | 3 +- src/components/bottom_bar/bottom_bar.tsx | 6 +- src/components/breadcrumbs/breadcrumbs.tsx | 9 +- src/components/button/button.tsx | 3 +- .../button/button_empty/button_empty.tsx | 9 +- .../button_group/button_group_button.tsx | 3 +- .../button/button_icon/button_icon.tsx | 6 +- src/components/card/card.tsx | 12 +- src/components/card/card_select.tsx | 3 +- .../card/checkable_card/checkable_card.tsx | 9 +- src/components/code/_code_block.test.tsx | 3 +- src/components/code/_code_block.tsx | 12 +- src/components/code/code_block.test.tsx | 3 +- src/components/code_editor/code_editor.tsx | 6 +- .../collapsible_nav/collapsible_nav.tsx | 3 +- .../collapsible_nav_group.tsx | 3 +- src/components/color_picker/color_picker.tsx | 15 +- .../color_stops/color_stop_thumb.tsx | 15 +- .../color_picker/color_stops/color_stops.tsx | 9 +- src/components/color_picker/saturation.tsx | 3 +- src/components/combo_box/combo_box.tsx | 3 +- .../combo_box_input/combo_box_input.tsx | 6 +- .../combo_box_input/combo_box_pill.tsx | 9 +- .../combo_box_option.tsx | 3 +- .../combo_box_options_list.tsx | 12 +- src/components/comment_list/comment.tsx | 3 +- src/components/context_menu/context_menu.tsx | 9 +- .../context_menu/context_menu_item.tsx | 9 +- .../context_menu/context_menu_panel.tsx | 6 +- src/components/control_bar/control_bar.tsx | 18 +- src/components/copy/copy.tsx | 3 +- .../datagrid/body/data_grid_body.tsx | 18 +- .../datagrid/body/data_grid_cell.tsx | 12 +- .../datagrid/body/data_grid_cell_buttons.tsx | 3 +- .../datagrid/body/data_grid_cell_popover.tsx | 3 +- .../datagrid/body/data_grid_footer_row.tsx | 3 +- .../header/data_grid_control_header_cell.tsx | 3 +- .../body/header/data_grid_header_cell.tsx | 9 +- .../body/header/data_grid_header_row.tsx | 3 +- src/components/datagrid/column_selector.tsx | 30 ++- src/components/datagrid/column_sorting.tsx | 36 ++- .../datagrid/column_sorting_draggable.tsx | 15 +- src/components/datagrid/data_grid.test.tsx | 6 +- src/components/datagrid/data_grid.tsx | 12 +- .../datagrid/data_grid_inmemory_renderer.tsx | 6 +- src/components/datagrid/data_grid_toolbar.tsx | 6 +- src/components/datagrid/style_selector.tsx | 9 +- src/components/date_picker/date_picker.tsx | 3 +- .../date_picker/date_picker_range.tsx | 3 +- .../date_popover/absolute_tab.tsx | 3 +- .../date_popover/date_popover_button.tsx | 6 +- .../date_popover/date_popover_content.tsx | 6 +- .../date_popover/relative_tab.tsx | 12 +- .../commonly_used_time_ranges.tsx | 6 +- .../quick_select_popover/quick_select.tsx | 18 +- .../quick_select_popover.tsx | 9 +- .../quick_select_popover/recently_used.tsx | 3 +- .../quick_select_popover/refresh_interval.tsx | 3 +- .../super_date_picker/super_date_picker.tsx | 15 +- .../super_date_picker/super_update_button.tsx | 6 +- .../description_list/description_list.tsx | 3 +- .../drag_and_drop/drag_drop_context.tsx | 6 +- src/components/drag_and_drop/draggable.tsx | 6 +- src/components/drag_and_drop/droppable.tsx | 9 +- src/components/empty_prompt/empty_prompt.tsx | 3 +- src/components/expression/expression.tsx | 3 +- src/components/facet/facet_button.tsx | 9 +- src/components/facet/facet_group.tsx | 3 +- src/components/filter_group/filter_button.tsx | 12 +- .../filter_group/filter_select_item.tsx | 9 +- src/components/flex/flex_group.tsx | 6 +- src/components/flyout/flyout.testenv.tsx | 3 +- src/components/flyout/flyout.tsx | 9 +- src/components/focus_trap/focus_trap.test.tsx | 12 +- .../form/checkbox/checkbox_group.tsx | 3 +- .../described_form_group.test.tsx | 6 +- .../described_form_group.tsx | 3 +- .../form/field_number/field_number.tsx | 3 +- .../form/field_password/field_password.tsx | 3 +- .../form/field_search/field_search.tsx | 3 +- src/components/form/field_text/field_text.tsx | 3 +- .../form/file_picker/file_picker.tsx | 9 +- src/components/form/form.tsx | 6 +- .../form_control_layout.tsx | 3 +- .../form_control_layout_clear_button.tsx | 6 +- .../form_control_layout_custom_icon.tsx | 3 +- .../form_control_layout_delimited.tsx | 3 +- src/components/form/form_label/form_label.tsx | 6 +- src/components/form/form_row/form_row.tsx | 12 +- src/components/form/radio/radio_group.tsx | 3 +- src/components/form/range/dual_range.tsx | 9 +- src/components/form/range/range.tsx | 9 +- src/components/form/range/range_ticks.tsx | 3 +- src/components/form/range/range_tooltip.tsx | 3 +- src/components/form/select/select.tsx | 6 +- .../form/super_select/super_select.tsx | 9 +- .../super_select/super_select_control.tsx | 6 +- src/components/form/switch/switch.tsx | 6 +- src/components/form/text_area/text_area.tsx | 3 +- src/components/header/header.test.tsx | 3 +- .../header/header_links/header_links.tsx | 12 +- src/components/header/header_logo.tsx | 3 +- .../header_section_item_button.tsx | 6 +- src/components/i18n/i18n.test.tsx | 36 ++- src/components/icon/assets/accessibility.js | 3 +- src/components/icon/assets/aggregate.js | 3 +- src/components/icon/assets/alert.js | 3 +- src/components/icon/assets/analyze_event.js | 3 +- src/components/icon/assets/annotation.js | 3 +- src/components/icon/assets/apm_trace.js | 3 +- src/components/icon/assets/app_add_data.js | 3 +- .../icon/assets/app_advanced_settings.js | 3 +- src/components/icon/assets/app_agent.js | 3 +- src/components/icon/assets/app_apm.js | 3 +- src/components/icon/assets/app_app_search.js | 3 +- src/components/icon/assets/app_auditbeat.js | 3 +- src/components/icon/assets/app_canvas.js | 3 +- src/components/icon/assets/app_code.js | 3 +- src/components/icon/assets/app_console.js | 3 +- .../assets/app_cross_cluster_replication.js | 3 +- src/components/icon/assets/app_dashboard.js | 3 +- src/components/icon/assets/app_devtools.js | 3 +- src/components/icon/assets/app_discover.js | 3 +- src/components/icon/assets/app_ems.js | 3 +- src/components/icon/assets/app_filebeat.js | 3 +- src/components/icon/assets/app_fleet.js | 3 +- src/components/icon/assets/app_gis.js | 3 +- src/components/icon/assets/app_graph.js | 3 +- src/components/icon/assets/app_grok.js | 3 +- src/components/icon/assets/app_heartbeat.js | 3 +- .../icon/assets/app_index_management.js | 3 +- .../icon/assets/app_index_pattern.js | 3 +- .../icon/assets/app_index_rollup.js | 3 +- src/components/icon/assets/app_lens.js | 3 +- src/components/icon/assets/app_logs.js | 3 +- src/components/icon/assets/app_management.js | 3 +- src/components/icon/assets/app_metricbeat.js | 3 +- src/components/icon/assets/app_metrics.js | 3 +- src/components/icon/assets/app_ml.js | 3 +- src/components/icon/assets/app_monitoring.js | 3 +- src/components/icon/assets/app_notebook.js | 3 +- src/components/icon/assets/app_packetbeat.js | 3 +- src/components/icon/assets/app_pipeline.js | 3 +- .../icon/assets/app_recently_viewed.js | 3 +- src/components/icon/assets/app_reporting.js | 3 +- .../icon/assets/app_saved_objects.js | 3 +- .../icon/assets/app_search_profiler.js | 3 +- src/components/icon/assets/app_security.js | 3 +- .../icon/assets/app_security_analytics.js | 3 +- src/components/icon/assets/app_spaces.js | 3 +- src/components/icon/assets/app_sql.js | 3 +- src/components/icon/assets/app_timelion.js | 3 +- .../icon/assets/app_upgrade_assistant.js | 3 +- src/components/icon/assets/app_uptime.js | 3 +- src/components/icon/assets/app_users_roles.js | 3 +- src/components/icon/assets/app_visualize.js | 3 +- src/components/icon/assets/app_watches.js | 3 +- .../icon/assets/app_workplace_search.js | 3 +- src/components/icon/assets/apps.js | 3 +- src/components/icon/assets/arrow_down.js | 3 +- src/components/icon/assets/arrow_left.js | 3 +- src/components/icon/assets/arrow_right.js | 3 +- src/components/icon/assets/arrow_up.js | 3 +- src/components/icon/assets/asterisk.js | 3 +- src/components/icon/assets/beaker.js | 3 +- src/components/icon/assets/bell.js | 3 +- src/components/icon/assets/bellSlash.js | 3 +- src/components/icon/assets/bolt.js | 3 +- .../icon/assets/boxes_horizontal.js | 3 +- src/components/icon/assets/boxes_vertical.js | 3 +- src/components/icon/assets/branch.js | 3 +- src/components/icon/assets/broom.js | 3 +- src/components/icon/assets/brush.js | 3 +- src/components/icon/assets/bug.js | 3 +- src/components/icon/assets/bullseye.js | 3 +- src/components/icon/assets/calendar.js | 3 +- src/components/icon/assets/check.js | 3 +- .../icon/assets/checkInCircleFilled.js | 3 +- src/components/icon/assets/cheer.js | 3 +- src/components/icon/assets/clock.js | 3 +- src/components/icon/assets/cloudDrizzle.js | 3 +- src/components/icon/assets/cloudStormy.js | 3 +- src/components/icon/assets/cloudSunny.js | 3 +- src/components/icon/assets/color.js | 3 +- src/components/icon/assets/compute.js | 3 +- src/components/icon/assets/console.js | 3 +- src/components/icon/assets/continuityAbove.js | 3 +- .../icon/assets/continuityAboveBelow.js | 3 +- src/components/icon/assets/continuityBelow.js | 3 +- .../icon/assets/continuityWithin.js | 3 +- .../icon/assets/controls_horizontal.js | 3 +- .../icon/assets/controls_vertical.js | 3 +- src/components/icon/assets/copy.js | 3 +- src/components/icon/assets/copy_clipboard.js | 3 +- src/components/icon/assets/cross.js | 3 +- .../icon/assets/crossInACircleFilled.js | 3 +- src/components/icon/assets/crosshairs.js | 3 +- src/components/icon/assets/currency.js | 3 +- src/components/icon/assets/cut.js | 3 +- src/components/icon/assets/database.js | 3 +- src/components/icon/assets/document.js | 3 +- src/components/icon/assets/documentEdit.js | 3 +- src/components/icon/assets/documentation.js | 3 +- src/components/icon/assets/documents.js | 3 +- src/components/icon/assets/dot.js | 3 +- src/components/icon/assets/download.js | 3 +- .../icon/assets/editorDistributeHorizontal.js | 3 +- .../icon/assets/editorDistributeVertical.js | 3 +- .../icon/assets/editorItemAlignBottom.js | 3 +- .../icon/assets/editorItemAlignCenter.js | 3 +- .../icon/assets/editorItemAlignLeft.js | 3 +- .../icon/assets/editorItemAlignMiddle.js | 3 +- .../icon/assets/editorItemAlignRight.js | 3 +- .../icon/assets/editorItemAlignTop.js | 3 +- .../icon/assets/editorPositionBottomLeft.js | 3 +- .../icon/assets/editorPositionBottomRight.js | 3 +- .../icon/assets/editorPositionTopLeft.js | 3 +- .../icon/assets/editorPositionTopRight.js | 3 +- .../icon/assets/editor_align_center.js | 3 +- .../icon/assets/editor_align_left.js | 3 +- .../icon/assets/editor_align_right.js | 3 +- src/components/icon/assets/editor_bold.js | 3 +- .../icon/assets/editor_code_block.js | 3 +- src/components/icon/assets/editor_comment.js | 3 +- src/components/icon/assets/editor_heading.js | 3 +- src/components/icon/assets/editor_italic.js | 3 +- src/components/icon/assets/editor_link.js | 3 +- .../icon/assets/editor_ordered_list.js | 3 +- src/components/icon/assets/editor_redo.js | 3 +- src/components/icon/assets/editor_strike.js | 3 +- src/components/icon/assets/editor_table.js | 3 +- .../icon/assets/editor_underline.js | 3 +- src/components/icon/assets/editor_undo.js | 3 +- .../icon/assets/editor_unordered_list.js | 3 +- src/components/icon/assets/email.js | 3 +- src/components/icon/assets/eql.js | 3 +- src/components/icon/assets/eraser.js | 3 +- src/components/icon/assets/exit.js | 3 +- src/components/icon/assets/expand.js | 3 +- src/components/icon/assets/expandMini.js | 3 +- src/components/icon/assets/export.js | 3 +- src/components/icon/assets/eye.js | 3 +- src/components/icon/assets/eye_closed.js | 3 +- src/components/icon/assets/faceNeutral.js | 3 +- src/components/icon/assets/face_happy.js | 3 +- src/components/icon/assets/face_neutral.js | 3 +- src/components/icon/assets/face_sad.js | 3 +- src/components/icon/assets/filter.js | 3 +- src/components/icon/assets/flag.js | 3 +- src/components/icon/assets/fold.js | 3 +- src/components/icon/assets/folder_check.js | 3 +- src/components/icon/assets/folder_closed.js | 3 +- .../icon/assets/folder_exclamation.js | 3 +- src/components/icon/assets/folder_open.js | 3 +- src/components/icon/assets/frameNext.js | 3 +- src/components/icon/assets/framePrevious.js | 3 +- src/components/icon/assets/fullScreenExit.js | 3 +- src/components/icon/assets/full_screen.js | 3 +- src/components/icon/assets/function.js | 3 +- src/components/icon/assets/gear.js | 3 +- src/components/icon/assets/glasses.js | 3 +- src/components/icon/assets/globe.js | 3 +- src/components/icon/assets/grab.js | 3 +- src/components/icon/assets/grab_horizontal.js | 3 +- src/components/icon/assets/grid.js | 3 +- src/components/icon/assets/heart.js | 3 +- src/components/icon/assets/heatmap.js | 3 +- src/components/icon/assets/help.js | 3 +- src/components/icon/assets/home.js | 3 +- src/components/icon/assets/iInCircle.js | 3 +- src/components/icon/assets/image.js | 3 +- src/components/icon/assets/import.js | 3 +- src/components/icon/assets/index_close.js | 3 +- src/components/icon/assets/index_edit.js | 3 +- src/components/icon/assets/index_flush.js | 3 +- src/components/icon/assets/index_mapping.js | 3 +- src/components/icon/assets/index_open.js | 3 +- src/components/icon/assets/index_runtime.js | 3 +- src/components/icon/assets/index_settings.js | 3 +- src/components/icon/assets/inputOutput.js | 3 +- src/components/icon/assets/inspect.js | 3 +- src/components/icon/assets/invert.js | 3 +- src/components/icon/assets/ip.js | 3 +- .../icon/assets/keyboard_shortcut.js | 3 +- src/components/icon/assets/kql_field.js | 3 +- src/components/icon/assets/kql_function.js | 3 +- src/components/icon/assets/kql_operand.js | 3 +- src/components/icon/assets/kql_selector.js | 3 +- src/components/icon/assets/kql_value.js | 3 +- src/components/icon/assets/layers.js | 3 +- src/components/icon/assets/link.js | 3 +- src/components/icon/assets/list.js | 3 +- src/components/icon/assets/list_add.js | 3 +- src/components/icon/assets/lock.js | 3 +- src/components/icon/assets/lockOpen.js | 3 +- src/components/icon/assets/logo_aerospike.js | 3 +- src/components/icon/assets/logo_apache.js | 24 +- src/components/icon/assets/logo_app_search.js | 3 +- src/components/icon/assets/logo_aws.js | 3 +- src/components/icon/assets/logo_aws_mono.js | 3 +- src/components/icon/assets/logo_azure.js | 3 +- src/components/icon/assets/logo_azure_mono.js | 3 +- src/components/icon/assets/logo_beats.js | 3 +- .../icon/assets/logo_business_analytics.js | 3 +- src/components/icon/assets/logo_ceph.js | 3 +- src/components/icon/assets/logo_cloud.js | 3 +- src/components/icon/assets/logo_cloud_ece.js | 3 +- src/components/icon/assets/logo_code.js | 3 +- .../icon/assets/logo_codesandbox.js | 3 +- src/components/icon/assets/logo_couchbase.js | 3 +- src/components/icon/assets/logo_docker.js | 3 +- src/components/icon/assets/logo_dropwizard.js | 9 +- src/components/icon/assets/logo_elastic.js | 3 +- .../icon/assets/logo_elastic_stack.js | 3 +- .../icon/assets/logo_elasticsearch.js | 3 +- .../icon/assets/logo_enterprise_search.js | 3 +- src/components/icon/assets/logo_etcd.js | 3 +- src/components/icon/assets/logo_gcp.js | 3 +- src/components/icon/assets/logo_gcp_mono.js | 3 +- src/components/icon/assets/logo_github.js | 3 +- src/components/icon/assets/logo_gmail.js | 3 +- src/components/icon/assets/logo_golang.js | 3 +- src/components/icon/assets/logo_google_g.js | 3 +- src/components/icon/assets/logo_haproxy.js | 3 +- src/components/icon/assets/logo_ibm.js | 18 +- src/components/icon/assets/logo_ibm_mono.js | 3 +- src/components/icon/assets/logo_kafka.js | 3 +- src/components/icon/assets/logo_kibana.js | 3 +- src/components/icon/assets/logo_kubernetes.js | 3 +- src/components/icon/assets/logo_logging.js | 3 +- src/components/icon/assets/logo_logstash.js | 3 +- src/components/icon/assets/logo_maps.js | 3 +- src/components/icon/assets/logo_memcached.js | 12 +- src/components/icon/assets/logo_metrics.js | 3 +- src/components/icon/assets/logo_mongodb.js | 3 +- src/components/icon/assets/logo_mysql.js | 3 +- src/components/icon/assets/logo_nginx.js | 3 +- .../icon/assets/logo_observability.js | 3 +- src/components/icon/assets/logo_osquery.js | 3 +- src/components/icon/assets/logo_php.js | 6 +- src/components/icon/assets/logo_postgres.js | 3 +- src/components/icon/assets/logo_prometheus.js | 3 +- src/components/icon/assets/logo_rabbitmq.js | 3 +- src/components/icon/assets/logo_redis.js | 3 +- src/components/icon/assets/logo_security.js | 3 +- .../icon/assets/logo_site_search.js | 3 +- src/components/icon/assets/logo_sketch.js | 3 +- src/components/icon/assets/logo_slack.js | 3 +- src/components/icon/assets/logo_uptime.js | 3 +- src/components/icon/assets/logo_webhook.js | 3 +- src/components/icon/assets/logo_windows.js | 3 +- .../icon/assets/logo_workplace_search.js | 3 +- src/components/icon/assets/logstash_filter.js | 3 +- src/components/icon/assets/logstash_if.js | 3 +- src/components/icon/assets/logstash_input.js | 3 +- src/components/icon/assets/logstash_output.js | 3 +- src/components/icon/assets/logstash_queue.js | 3 +- src/components/icon/assets/magnet.js | 3 +- .../icon/assets/magnifyWithMinus.js | 3 +- src/components/icon/assets/magnifyWithPlus.js | 3 +- src/components/icon/assets/map_marker.js | 3 +- src/components/icon/assets/memory.js | 3 +- src/components/icon/assets/menu.js | 3 +- src/components/icon/assets/menuDown.js | 3 +- src/components/icon/assets/menuLeft.js | 3 +- src/components/icon/assets/menuRight.js | 3 +- src/components/icon/assets/menuUp.js | 3 +- src/components/icon/assets/merge.js | 3 +- src/components/icon/assets/minimize.js | 3 +- src/components/icon/assets/minus.js | 3 +- src/components/icon/assets/minus_in_circle.js | 3 +- .../icon/assets/minus_in_circle_filled.js | 3 +- .../icon/assets/ml_classification_job.js | 3 +- .../icon/assets/ml_create_advanced_job.js | 3 +- .../icon/assets/ml_create_multi_metric_job.js | 3 +- .../icon/assets/ml_create_population_job.js | 3 +- .../assets/ml_create_single_metric_job.js | 3 +- .../icon/assets/ml_data_visualizer.js | 3 +- .../icon/assets/ml_outlier_detection_job.js | 3 +- .../icon/assets/ml_regression_job.js | 3 +- src/components/icon/assets/mobile.js | 3 +- src/components/icon/assets/moon.js | 3 +- src/components/icon/assets/nested.js | 3 +- src/components/icon/assets/node.js | 3 +- src/components/icon/assets/number.js | 3 +- src/components/icon/assets/offline.js | 3 +- src/components/icon/assets/online.js | 3 +- src/components/icon/assets/package.js | 3 +- src/components/icon/assets/pageSelect.js | 3 +- src/components/icon/assets/pagesSelect.js | 3 +- src/components/icon/assets/paint.js | 3 +- src/components/icon/assets/paper_clip.js | 3 +- src/components/icon/assets/partial.js | 3 +- src/components/icon/assets/pause.js | 3 +- src/components/icon/assets/pencil.js | 3 +- src/components/icon/assets/percent.js | 3 +- src/components/icon/assets/pin.js | 3 +- src/components/icon/assets/pin_filled.js | 3 +- src/components/icon/assets/play.js | 3 +- src/components/icon/assets/playFilled.js | 3 +- src/components/icon/assets/plus.js | 3 +- src/components/icon/assets/plus_in_circle.js | 3 +- .../icon/assets/plus_in_circle_filled.js | 3 +- src/components/icon/assets/popout.js | 3 +- src/components/icon/assets/push.js | 3 +- .../icon/assets/question_in_circle.js | 3 +- src/components/icon/assets/quote.js | 3 +- src/components/icon/assets/refresh.js | 3 +- src/components/icon/assets/reporter.js | 3 +- src/components/icon/assets/return_key.js | 3 +- src/components/icon/assets/save.js | 3 +- src/components/icon/assets/scale.js | 3 +- src/components/icon/assets/search.js | 3 +- src/components/icon/assets/securitySignal.js | 3 +- .../icon/assets/securitySignalDetected.js | 3 +- .../icon/assets/securitySignalResolved.js | 3 +- src/components/icon/assets/shard.js | 3 +- src/components/icon/assets/share.js | 3 +- src/components/icon/assets/snowflake.js | 3 +- src/components/icon/assets/sortLeft.js | 3 +- src/components/icon/assets/sortRight.js | 3 +- src/components/icon/assets/sort_down.js | 3 +- src/components/icon/assets/sort_up.js | 3 +- src/components/icon/assets/sortable.js | 3 +- src/components/icon/assets/starPlusEmpty.js | 3 +- src/components/icon/assets/starPlusFilled.js | 3 +- src/components/icon/assets/star_empty.js | 3 +- .../icon/assets/star_empty_space.js | 3 +- src/components/icon/assets/star_filled.js | 3 +- .../icon/assets/star_filled_space.js | 3 +- .../icon/assets/star_minus_empty.js | 3 +- .../icon/assets/star_minus_filled.js | 3 +- src/components/icon/assets/stats.js | 3 +- src/components/icon/assets/stop.js | 3 +- src/components/icon/assets/stop_filled.js | 3 +- src/components/icon/assets/stop_slash.js | 3 +- src/components/icon/assets/storage.js | 3 +- src/components/icon/assets/string.js | 3 +- src/components/icon/assets/submodule.js | 3 +- src/components/icon/assets/swatch_input.js | 3 +- src/components/icon/assets/symlink.js | 3 +- src/components/icon/assets/tableOfContents.js | 3 +- .../icon/assets/table_density_compact.js | 3 +- .../icon/assets/table_density_expanded.js | 3 +- .../icon/assets/table_density_normal.js | 3 +- src/components/icon/assets/tag.js | 3 +- src/components/icon/assets/tear.js | 3 +- src/components/icon/assets/temperature.js | 3 +- src/components/icon/assets/timeline.js | 3 +- src/components/icon/assets/timeslider.js | 3 +- .../icon/assets/tokens/tokenAlias.js | 3 +- .../icon/assets/tokens/tokenAnnotation.js | 3 +- .../icon/assets/tokens/tokenArray.js | 3 +- .../icon/assets/tokens/tokenBinary.js | 3 +- .../icon/assets/tokens/tokenBoolean.js | 3 +- .../icon/assets/tokens/tokenClass.js | 3 +- .../assets/tokens/tokenCompletionSuggester.js | 3 +- .../icon/assets/tokens/tokenConstant.js | 3 +- .../icon/assets/tokens/tokenDate.js | 3 +- .../icon/assets/tokens/tokenDenseVector.js | 3 +- .../icon/assets/tokens/tokenElement.js | 3 +- .../icon/assets/tokens/tokenEnum.js | 3 +- .../icon/assets/tokens/tokenEnumMember.js | 3 +- .../icon/assets/tokens/tokenEvent.js | 3 +- .../icon/assets/tokens/tokenException.js | 3 +- .../icon/assets/tokens/tokenField.js | 3 +- .../icon/assets/tokens/tokenFile.js | 3 +- .../icon/assets/tokens/tokenFlattened.js | 3 +- .../icon/assets/tokens/tokenFunction.js | 3 +- src/components/icon/assets/tokens/tokenGeo.js | 3 +- .../icon/assets/tokens/tokenHistogram.js | 3 +- src/components/icon/assets/tokens/tokenIP.js | 3 +- .../icon/assets/tokens/tokenInterface.js | 3 +- .../icon/assets/tokens/tokenJoin.js | 3 +- src/components/icon/assets/tokens/tokenKey.js | 3 +- .../icon/assets/tokens/tokenKeyword.js | 3 +- .../icon/assets/tokens/tokenMethod.js | 3 +- .../icon/assets/tokens/tokenModule.js | 3 +- .../icon/assets/tokens/tokenNamespace.js | 3 +- .../icon/assets/tokens/tokenNested.js | 3 +- .../icon/assets/tokens/tokenNull.js | 3 +- .../icon/assets/tokens/tokenNumber.js | 3 +- .../icon/assets/tokens/tokenObject.js | 3 +- .../icon/assets/tokens/tokenOperator.js | 3 +- .../icon/assets/tokens/tokenPackage.js | 3 +- .../icon/assets/tokens/tokenParameter.js | 3 +- .../icon/assets/tokens/tokenPercolator.js | 3 +- .../icon/assets/tokens/tokenProperty.js | 3 +- .../icon/assets/tokens/tokenRange.js | 3 +- .../icon/assets/tokens/tokenRankFeature.js | 3 +- .../icon/assets/tokens/tokenRankFeatures.js | 3 +- .../icon/assets/tokens/tokenRepo.js | 3 +- .../icon/assets/tokens/tokenSearchType.js | 3 +- .../icon/assets/tokens/tokenShape.js | 3 +- .../icon/assets/tokens/tokenString.js | 3 +- .../icon/assets/tokens/tokenStruct.js | 3 +- .../icon/assets/tokens/tokenSymbol.js | 3 +- .../icon/assets/tokens/tokenText.js | 3 +- .../icon/assets/tokens/tokenTokenCount.js | 3 +- .../icon/assets/tokens/tokenVariable.js | 3 +- src/components/icon/assets/training.js | 3 +- src/components/icon/assets/trash.js | 3 +- src/components/icon/assets/unfold.js | 3 +- src/components/icon/assets/unlink.js | 3 +- src/components/icon/assets/user.js | 3 +- src/components/icon/assets/users.js | 3 +- src/components/icon/assets/vector.js | 3 +- src/components/icon/assets/videoPlayer.js | 3 +- src/components/icon/assets/vis_area.js | 3 +- .../icon/assets/vis_area_stacked.js | 3 +- .../icon/assets/vis_bar_horizontal.js | 3 +- .../icon/assets/vis_bar_horizontal_stacked.js | 3 +- .../icon/assets/vis_bar_vertical.js | 3 +- .../icon/assets/vis_bar_vertical_stacked.js | 3 +- src/components/icon/assets/vis_gauge.js | 3 +- src/components/icon/assets/vis_goal.js | 3 +- src/components/icon/assets/vis_line.js | 3 +- .../icon/assets/vis_map_coordinate.js | 3 +- src/components/icon/assets/vis_map_region.js | 3 +- src/components/icon/assets/vis_metric.js | 3 +- src/components/icon/assets/vis_pie.js | 3 +- src/components/icon/assets/vis_table.js | 3 +- src/components/icon/assets/vis_tag_cloud.js | 3 +- src/components/icon/assets/vis_text.js | 3 +- src/components/icon/assets/vis_timelion.js | 3 +- src/components/icon/assets/vis_vega.js | 3 +- .../icon/assets/vis_visual_builder.js | 3 +- src/components/icon/assets/wordWrap.js | 3 +- .../icon/assets/wordWrapDisabled.js | 3 +- src/components/icon/assets/wrench.js | 3 +- src/components/image/image.tsx | 12 +- src/components/key_pad_menu/key_pad_menu.tsx | 3 +- .../key_pad_menu/key_pad_menu_item.test.tsx | 9 +- .../key_pad_menu/key_pad_menu_item.tsx | 3 +- src/components/link/link.tsx | 6 +- src/components/list_group/list_group.tsx | 3 +- src/components/list_group/list_group_item.tsx | 12 +- .../pinnable_list_group.tsx | 3 +- .../icons/markdown_checkmark.js | 3 +- .../markdown_editor/icons/markdown_logo.js | 3 +- .../markdown_editor/markdown_editor.tsx | 12 +- .../markdown_editor_footer.tsx | 12 +- .../markdown_editor_text_area.tsx | 3 +- .../markdown_editor_toolbar.tsx | 6 +- src/components/modal/confirm_modal.test.tsx | 3 +- src/components/modal/confirm_modal.tsx | 6 +- src/components/modal/modal.tsx | 6 +- .../notification/notification_event.tsx | 3 +- .../notification_event_messages.tsx | 3 +- .../notification/notification_event_meta.tsx | 9 +- .../mutation_observer.test.tsx | 3 +- .../outside_click_detector.test.tsx | 3 +- src/components/page/page_body/page_body.tsx | 3 +- .../page/page_content/page_content.tsx | 3 +- .../page/page_header/page_header.test.tsx | 3 +- .../page/page_header/page_header.tsx | 3 +- .../page_header/page_header_content.test.tsx | 3 +- .../page/page_header/page_header_content.tsx | 9 +- src/components/page/page_template.tsx | 99 +++++--- src/components/pagination/pagination.tsx | 21 +- .../pagination/pagination_button.tsx | 9 +- src/components/panel/panel.tsx | 6 +- .../panel/split_panel/split_panel.tsx | 6 +- src/components/popover/input_popover.tsx | 3 +- src/components/popover/popover.tsx | 12 +- src/components/popover/wrapping_popover.tsx | 3 +- src/components/progress/progress.tsx | 6 +- .../resizable_container/resizable_button.tsx | 3 +- .../resizable_container.test.tsx | 3 +- .../resizable_container.tsx | 6 +- .../resizable_container/resizable_panel.tsx | 6 +- .../filters/field_value_selection_filter.tsx | 9 +- .../filters/field_value_toggle_filter.tsx | 3 +- .../field_value_toggle_group_filter.tsx | 3 +- .../search_bar/filters/is_filter.tsx | 3 +- src/components/selectable/selectable.tsx | 6 +- .../selectable_list/selectable_list.tsx | 9 +- .../selectable_list/selectable_list_item.tsx | 6 +- .../selectable_template_sitewide.tsx | 6 +- .../selectable_template_sitewide_option.tsx | 6 +- src/components/side_nav/side_nav.tsx | 15 +- src/components/side_nav/side_nav_item.tsx | 9 +- src/components/steps/step_horizontal.tsx | 3 +- src/components/steps/steps.tsx | 3 +- src/components/suggest/suggest_input.tsx | 6 +- src/components/suggest/suggest_item.tsx | 3 +- .../table/mobile/table_sort_mobile.tsx | 9 +- .../table/mobile/table_sort_mobile_item.tsx | 3 +- src/components/table/table_header_cell.tsx | 15 +- .../table_pagination/table_pagination.tsx | 12 +- src/components/table/table_row.tsx | 3 +- src/components/table/table_row_cell.tsx | 6 +- src/components/tabs/tab.tsx | 6 +- .../tabs/tabbed_content/tabbed_content.tsx | 6 +- src/components/tabs/tabs.tsx | 3 +- src/components/toast/global_toast_list.tsx | 9 +- src/components/toast/toast.tsx | 6 +- src/components/tool_tip/tool_tip.test.tsx | 3 +- src/components/tool_tip/tool_tip.tsx | 6 +- src/components/tour/tour_step.test.tsx | 9 +- src/components/tour/tour_step.tsx | 9 +- src/components/tour/tour_step_indicator.tsx | 3 +- src/components/tree_view/tree_view.tsx | 24 +- 907 files changed, 3664 insertions(+), 1837 deletions(-) diff --git a/.prettierrc b/.prettierrc index 25e85f9835d..b2f0fa8f00e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,9 +1,7 @@ { - "jsxBracketSameLine": true, - "jsxSingleQuote": false, "parser": "typescript", "printWidth": 80, "semi": true, "singleQuote": true, - "trailingComma": "es5", + "trailingComma": "es5" } diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js index eba894c2a89..ecd636c1363 100644 --- a/src-docs/src/components/codesandbox/link.js +++ b/src-docs/src/components/codesandbox/link.js @@ -181,7 +181,8 @@ ${exampleClose} action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank" - className={className}> + className={className} + > {/* 6 */} {childWithSubmit} diff --git a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx index 05355c203e4..90cc45e76d9 100644 --- a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx +++ b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx @@ -24,7 +24,8 @@ export const GuideMarkdownFormat: FunctionComponent = ({ processingPluginList={processingPlugins} className="guideMarkdownFormat" textSize="m" - {...rest}> + {...rest} + > {children} ); diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js index e3e1cb912bf..a2ab4108cdf 100644 --- a/src-docs/src/components/guide_page/guide_page.js +++ b/src-docs/src/components/guide_page/guide_page.js @@ -87,7 +87,8 @@ const GuidePageComponent = ({ {title} {betaBadge} } - tabs={renderTabs()}> + tabs={renderTabs()} + > {intro} @@ -97,7 +98,8 @@ const GuidePageComponent = ({ paddingSize="none" color="transparent" hasBorder={false} - borderRadius="none"> + borderRadius="none" + > {playground && ( diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js index eb2ec97b9fd..976345e4e65 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -110,7 +110,8 @@ export class GuidePageChrome extends Component { name = ( + search={searchTerm} + > {title} ); @@ -170,7 +171,8 @@ export class GuidePageChrome extends Component { visibleName = ( + search={searchTerm} + > {name} ); @@ -231,11 +233,13 @@ export class GuidePageChrome extends Component { style={{ height: '100%' }} direction="column" responsive={false} - gutterSize="none"> + gutterSize="none" + > + className="guideSideNav__search" + > = ({ + color={isLocalDev ? 'accent' : 'default'} + > {isLocalDev ? 'Local' : `v.${pkg.version}`} ); @@ -67,7 +68,8 @@ export const GuidePageHeader: React.FunctionComponent = ({ + href={href} + > @@ -99,7 +101,8 @@ export const GuidePageHeader: React.FunctionComponent = ({ const button = ( setMobilePopoverIsOpen((isOpen) => !isOpen)}> + onClick={() => setMobilePopoverIsOpen((isOpen) => !isOpen)} + > ); @@ -109,7 +112,8 @@ export const GuidePageHeader: React.FunctionComponent = ({ id="guidePageChromeThemePopover" button={button} isOpen={mobilePopoverIsOpen} - closePopover={() => setMobilePopoverIsOpen(false)}> + closePopover={() => setMobilePopoverIsOpen(false)} + > {renderGithub()} diff --git a/src-docs/src/components/guide_rule/guide_rule_example.js b/src-docs/src/components/guide_rule/guide_rule_example.js index ec7652db93a..d47a2e02228 100644 --- a/src-docs/src/components/guide_rule/guide_rule_example.js +++ b/src-docs/src/components/guide_rule/guide_rule_example.js @@ -53,7 +53,8 @@ export const GuideRuleExample = ({ borderRadius="none" color="transparent" hasBorder={false} - {...rest}> + {...rest} + >
+ {...panelProps} + > {children} diff --git a/src-docs/src/components/guide_section/guide_section.tsx b/src-docs/src/components/guide_section/guide_section.tsx index 6a539136dfc..c09ad46b012 100644 --- a/src-docs/src/components/guide_section/guide_section.tsx +++ b/src-docs/src/components/guide_section/guide_section.tsx @@ -187,7 +187,8 @@ export const GuideSection: FunctionComponent = ({ + href={`#${path}/${fullScreen.slug}`} + > Full screen demo ) : ( diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx index db330c7dcba..b4cab317d1e 100644 --- a/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx +++ b/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx @@ -25,7 +25,8 @@ export const GuideSectionExampleCode: FunctionComponent const codeSandboxLink = ( + content={code.default} + > Try out this demo on Code Sandbox diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx index 479423645c9..1a1497e8433 100644 --- a/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx +++ b/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx @@ -28,7 +28,8 @@ export const GuideSectionExample: FunctionComponent = ({ + className={classes} + > {example} {(tabs || tabContent) && ( diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_tabs.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_tabs.tsx index 5d12884ea56..14fac69e5b7 100644 --- a/src-docs/src/components/guide_section/guide_section_parts/guide_section_tabs.tsx +++ b/src-docs/src/components/guide_section/guide_section_parts/guide_section_tabs.tsx @@ -68,7 +68,8 @@ export const GuideSectionExampleTabs: FunctionComponent onSelectedTabChanged(name)} isSelected={name === selectedTabId} - key={index}> + key={index} + > {tab.displayName} ); @@ -121,7 +122,8 @@ export const GuideSectionExampleTabs: FunctionComponent + alignItems="center" + > {renderTabs()} {rightSideControl} diff --git a/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx b/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx index 504fa7ce796..ff372274bf1 100644 --- a/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx +++ b/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx @@ -44,12 +44,14 @@ const GuideFigmaLinkComponent: React.FunctionComponent = ({ ) : ( + content="The Figma Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics." + > + href={href} + > diff --git a/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx b/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx index 503c2dafe83..23e93746d4e 100644 --- a/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx +++ b/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx @@ -44,11 +44,13 @@ const GuideSketchLinkComponent: React.FunctionComponent = title="(Outdated) Download Sketch zip" content="Import these sketch files into a new project as libraries. This will provide symbols that match against their EUI component - counterparts."> + counterparts." + > + href={href} + > diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx index bb6ca5cf1ee..6b28312b90a 100644 --- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx +++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx @@ -63,7 +63,8 @@ const GuideThemeSelectorComponent: React.FunctionComponent { closePopover(); context.changeTheme(theme.value); - }}> + }} + > {theme.text} ); @@ -76,7 +77,8 @@ const GuideThemeSelectorComponent: React.FunctionComponent + onClick={onButtonClick} + > {isMobileSize ? 'Theme' : currentTheme.text} ); @@ -89,7 +91,8 @@ const GuideThemeSelectorComponent: React.FunctionComponent + anchorPosition="downRight" + > {location.host.includes('803') && ( <> diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx index 5bb98a2a482..67a3cd74901 100644 --- a/src-docs/src/components/with_theme/theme_context.tsx +++ b/src-docs/src/components/with_theme/theme_context.tsx @@ -46,7 +46,8 @@ export class ThemeProvider extends React.Component { value={{ theme, changeTheme: this.changeTheme, - }}> + }} + > {children} ); diff --git a/src-docs/src/index.js b/src-docs/src/index.js index 7125b7184eb..02734e25eea 100644 --- a/src-docs/src/index.js +++ b/src-docs/src/index.js @@ -66,7 +66,8 @@ ReactDOM.render( return ( + currentRoute={{ name, path, sections, isNew }} + > {createElement(component, {})} @@ -86,7 +87,8 @@ ReactDOM.render( path={`/${path}/${slug}`} render={() => ( + value={{ parentPath: `/${path}#${id}` }} + > {demo} )} diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index af6680fa843..21e9117914c 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -280,7 +280,8 @@ const createExample = (example, customTitle) => { intro={intro} isBeta={beta} playground={playgroundComponent} - guidelines={guidelines}> + guidelines={guidelines} + > {renderedSections} diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index 73f46159645..301587349b8 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -154,7 +154,8 @@ const Knob = ({ style={{ fontSize: '14px', display: 'block', - }}> + }} + > React Ref documentation {error &&
error {error}
} @@ -167,7 +168,8 @@ const Knob = ({ isInvalid={error && error.length > 0} error={error} helpText={helpText} - fullWidth> + fullWidth + > )} - }> + } + > 0} - error={error}> + error={error} + > 0} helpText={helpText} error={error} - fullWidth> + fullWidth + > { mobileOptions={{ header: false, fullWidth: true, - }}> + }} + >
{humanizedName} @@ -481,14 +487,16 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => { + textOnly={false} + >
{typeMarkup}
 + className={isPlayground ? 'playgroundKnobs__rowCell' : undefined} + > {isPlayground ? ( { color="transparent" paddingSize={isMobile ? 's' : 'none'} hasBorder={false} - hasShadow={false}> + hasShadow={false} + > {columns.map(({ name, width }, id) => { diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js index 545791b1ca0..a1147e1e9bb 100644 --- a/src-docs/src/services/playground/playground.js +++ b/src-docs/src/services/playground/playground.js @@ -71,7 +71,8 @@ export default ({ example={ <>
+ className={classNames('playgroundWrapper', playgroundClassName)} + > + isCopyable + > {getSnippet(params.editorProps.code)} diff --git a/src-docs/src/views/accessibility/accessibility_example.js b/src-docs/src/views/accessibility/accessibility_example.js index 16e489a0282..cf9ae2c06fd 100644 --- a/src-docs/src/views/accessibility/accessibility_example.js +++ b/src-docs/src/views/accessibility/accessibility_example.js @@ -68,7 +68,8 @@ export const AccessibilityExample = { + title="WebAIM recommendation for screen reader-only content" + >

"In most cases, if content (particularly content that provides functionality or interactivity) is important enough to @@ -76,7 +77,8 @@ export const AccessibilityExample = { available to all users."{' '} + external + > Learn more about invisible content

diff --git a/src-docs/src/views/accessibility/skip_link.js b/src-docs/src/views/accessibility/skip_link.js index 51a86f38f66..1499f5a2169 100644 --- a/src-docs/src/views/accessibility/skip_link.js +++ b/src-docs/src/views/accessibility/skip_link.js @@ -41,7 +41,8 @@ export default () => { + data-test-subj="skip-link-demo-subj" + > Skip to {isFixed && 'main '}content {isFixed && ( diff --git a/src-docs/src/views/accordion/accordion_arrow.js b/src-docs/src/views/accordion/accordion_arrow.js index 1308506500e..4a1348ce062 100644 --- a/src-docs/src/views/accordion/accordion_arrow.js +++ b/src-docs/src/views/accordion/accordion_arrow.js @@ -6,7 +6,8 @@ export default () => ( + buttonContent="This one has it removed entirely" + > Any content inside of EuiAccordion will appear here. diff --git a/src-docs/src/views/accordion/accordion_arrow_right.js b/src-docs/src/views/accordion/accordion_arrow_right.js index c063cef8b04..09cab3b0a18 100644 --- a/src-docs/src/views/accordion/accordion_arrow_right.js +++ b/src-docs/src/views/accordion/accordion_arrow_right.js @@ -6,7 +6,8 @@ export default () => ( + buttonContent="This accordion has the arrow on the right" + > Any content inside of EuiAccordion will appear here. diff --git a/src-docs/src/views/accordion/accordion_extra.js b/src-docs/src/views/accordion/accordion_extra.js index 45001259fba..63d22b0c849 100644 --- a/src-docs/src/views/accordion/accordion_extra.js +++ b/src-docs/src/views/accordion/accordion_extra.js @@ -7,7 +7,8 @@ export default () => ( id="accordionExtraWithLeftArrow" buttonContent="Click to open" extraAction={Extra action!} - paddingSize="l"> + paddingSize="l" + > Opened content. ); diff --git a/src-docs/src/views/accordion/accordion_forceState.js b/src-docs/src/views/accordion/accordion_forceState.js index b7eae17e9de..ca470d2fb1d 100644 --- a/src-docs/src/views/accordion/accordion_forceState.js +++ b/src-docs/src/views/accordion/accordion_forceState.js @@ -49,7 +49,8 @@ export default () => { forceState={trigger} onToggle={onToggle} buttonContent="I am a controlled accordion" - padding="l"> + padding="l" + > Any content inside of EuiAccordion will appear here. diff --git a/src-docs/src/views/accordion/accordion_form.js b/src-docs/src/views/accordion/accordion_form.js index 4c8a9469660..d676b39c967 100644 --- a/src-docs/src/views/accordion/accordion_form.js +++ b/src-docs/src/views/accordion/accordion_form.js @@ -29,7 +29,8 @@ const repeatableForm = ( + helpText="Must include one number and one symbol" + > @@ -84,7 +85,8 @@ export default () => ( buttonClassName="euiAccordionForm__button" buttonContent={buttonContent} extraAction={extraAction} - paddingSize="l"> + paddingSize="l" + > {repeatableForm} @@ -94,7 +96,8 @@ export default () => ( buttonClassName="euiAccordionForm__button" buttonContent={buttonContent} extraAction={extraAction} - paddingSize="l"> + paddingSize="l" + > {repeatableForm}
diff --git a/src-docs/src/views/accordion/accordion_grow.js b/src-docs/src/views/accordion/accordion_grow.js index 98a033d3348..473eba0d2a0 100644 --- a/src-docs/src/views/accordion/accordion_grow.js +++ b/src-docs/src/views/accordion/accordion_grow.js @@ -32,7 +32,8 @@ const Rows = () => { iconType="plusInCircleFilled" onClick={() => setCounter(counter + 1)} aria-controls={listId} - aria-describedby={growingAccordianDescriptionId}> + aria-describedby={growingAccordianDescriptionId} + > Increase height to {counter + 1} items {' '} { aria-controls={listId} aria-describedby={growingAccordianDescriptionId} onClick={() => setCounter(Math.max(0, counter - 1))} - isDisabled={counter === 1}> + isDisabled={counter === 1} + > Decrease height to {counter - 1} item{counter > 2 && 's'}

@@ -55,7 +57,8 @@ export default () => ( id={htmlIdGenerator()()} buttonContent="Click me to toggle close / open" initialIsOpen={true} - paddingSize="s"> + paddingSize="s" + > diff --git a/src-docs/src/views/accordion/accordion_isLoading.js b/src-docs/src/views/accordion/accordion_isLoading.js index c5aa0dc8e46..d9e8a76c2bd 100644 --- a/src-docs/src/views/accordion/accordion_isLoading.js +++ b/src-docs/src/views/accordion/accordion_isLoading.js @@ -70,7 +70,8 @@ export default () => { buttonContent="Accordion is loading, click to toggle" extraAction={Extra action!} isLoading - isLoadingMessage={isLoadingMessage}> + isLoadingMessage={isLoadingMessage} + > Opened content. diff --git a/src-docs/src/views/accordion/accordion_multiple.js b/src-docs/src/views/accordion/accordion_multiple.js index 0d801cfec29..0c688c623a2 100644 --- a/src-docs/src/views/accordion/accordion_multiple.js +++ b/src-docs/src/views/accordion/accordion_multiple.js @@ -12,7 +12,8 @@ export default () => ( + paddingSize="l" + >

The content inside can be of any height.

The content inside can be of any height.

@@ -26,7 +27,8 @@ export default () => ( id="accordion4" buttonContent="A second accordion with padding and a very long title that should truncate because of eui-textTruncate" buttonContentClassName="eui-textTruncate" - paddingSize="l"> + paddingSize="l" + >

The content inside can be of any height.

The content inside can be of any height.

@@ -42,7 +44,8 @@ export default () => ( + paddingSize="m" + >

This content area will grow to accommodate when the accordion below diff --git a/src-docs/src/views/accordion/accordion_open.js b/src-docs/src/views/accordion/accordion_open.js index 407b79fddf3..8177e895a61 100644 --- a/src-docs/src/views/accordion/accordion_open.js +++ b/src-docs/src/views/accordion/accordion_open.js @@ -8,7 +8,8 @@ export default () => ( + initialIsOpen={true} + > Any content inside of EuiAccordion will appear here. diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js index 303cee75563..df591886460 100644 --- a/src-docs/src/views/badge/badge.js +++ b/src-docs/src/views/badge/badge.js @@ -57,7 +57,8 @@ export default () => { wrap responsive={false} gutterSize="xs" - style={{ maxWidth: '300px' }}> + style={{ maxWidth: '300px' }} + > {customBadges.map((badge) => ( {badge} diff --git a/src-docs/src/views/badge/badge_button.js b/src-docs/src/views/badge/badge_button.js index 2e3616da8b5..88fdbf6103d 100644 --- a/src-docs/src/views/badge/badge_button.js +++ b/src-docs/src/views/badge/badge_button.js @@ -13,7 +13,8 @@ export default () => ( color="primary" onClick={() => {}} onClickAriaLabel="Example of onClick event for the button" - data-test-sub="testExample1"> + data-test-sub="testExample1" + > onClick on text within badge @@ -24,7 +25,8 @@ export default () => ( iconSide="right" iconOnClick={() => {}} iconOnClickAriaLabel="Example of onClick event for icon within the button" - data-test-sub="testExample2"> + data-test-sub="testExample2" + > onClick on icon within badge @@ -37,7 +39,8 @@ export default () => ( onClickAriaLabel="Example of onClick event for the button" iconOnClick={() => {}} iconOnClickAriaLabel="Example of onClick event for icon within the button" - data-test-sub="testExample3"> + data-test-sub="testExample3" + > onClick on both text and icon within badge @@ -49,7 +52,8 @@ export default () => ( onClickAriaLabel="Example of disabled button badge" iconOnClick={() => {}} iconOnClickAriaLabel="Example of disabled button badge" - data-test-sub="testExample4"> + data-test-sub="testExample4" + > disabled button badge diff --git a/src-docs/src/views/badge/badge_href.js b/src-docs/src/views/badge/badge_href.js index d60959c2b38..89f0edcf59f 100644 --- a/src-docs/src/views/badge/badge_href.js +++ b/src-docs/src/views/badge/badge_href.js @@ -25,7 +25,8 @@ export default () => ( iconType="bolt" iconSide="right" iconOnClick={() => {}} - iconOnClickAriaLabel="Example of onClick event for icon within the anchor"> + iconOnClickAriaLabel="Example of onClick event for icon within the anchor" + > anchor with an icon and iconOnClick diff --git a/src-docs/src/views/badge/badge_truncate.js b/src-docs/src/views/badge/badge_truncate.js index 2759cd0e6c5..fe61227c42d 100644 --- a/src-docs/src/views/badge/badge_truncate.js +++ b/src-docs/src/views/badge/badge_truncate.js @@ -17,7 +17,8 @@ export default () => ( iconType="cross" iconSide="right" iconOnClick={() => {}} - iconOnClickAriaLabel="Click this icon to..."> + iconOnClickAriaLabel="Click this icon to..." + > Badge with iconOnClick being truncated @@ -27,7 +28,8 @@ export default () => ( onClick={() => {}} onClickAriaLabel="Click this badge to..." iconOnClick={() => {}} - iconOnClickAriaLabel="Click this icon to..."> + iconOnClickAriaLabel="Click this icon to..." + > Badge with both onClicks being truncated diff --git a/src-docs/src/views/bottom_bar/bottom_bar_displacement.js b/src-docs/src/views/bottom_bar/bottom_bar_displacement.js index 953aebb78a1..496b532e52c 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar_displacement.js +++ b/src-docs/src/views/bottom_bar/bottom_bar_displacement.js @@ -40,14 +40,16 @@ export default () => { {toggleIdSelected && ( + affordForDisplacement={toggleIdSelected === 'bottomBarStandard'} + > setToggleIdSelected(null)} color="ghost" size="s" - iconType="cross"> + iconType="cross" + > close diff --git a/src-docs/src/views/button/button.js b/src-docs/src/views/button/button.js index a4d06acf7bc..611a561eaf7 100644 --- a/src-docs/src/views/button/button.js +++ b/src-docs/src/views/button/button.js @@ -24,12 +24,14 @@ export default () => ( gutterSize="s" alignItems="center" responsive={false} - wrap> + wrap + > {}}> + onClick={() => {}} + > {value.charAt(0).toUpperCase() + value.slice(1)} @@ -39,7 +41,8 @@ export default () => ( color={value !== 'disabled' ? value : undefined} isDisabled={value === 'disabled' ? true : false} fill - onClick={() => {}}> + onClick={() => {}} + > Filled @@ -49,7 +52,8 @@ export default () => ( color={value !== 'disabled' ? value : undefined} isDisabled={value === 'disabled' ? true : false} size="s" - onClick={() => {}}> + onClick={() => {}} + > Small @@ -60,7 +64,8 @@ export default () => ( isDisabled={value === 'disabled' ? true : false} size="s" fill - onClick={() => {}}> + onClick={() => {}} + > Small and filled @@ -70,7 +75,8 @@ export default () => ( color={value !== 'disabled' ? value : undefined} isDisabled={value === 'disabled' ? true : false} fullWidth - onClick={() => {}}> + onClick={() => {}} + > Full width diff --git a/src-docs/src/views/button/button_empty.js b/src-docs/src/views/button/button_empty.js index 5bc04d62ebb..418003cd155 100644 --- a/src-docs/src/views/button/button_empty.js +++ b/src-docs/src/views/button/button_empty.js @@ -16,12 +16,14 @@ export default () => ( key={value} responsive={false} gutterSize="s" - alignItems="center"> + alignItems="center" + > {}}> + onClick={() => {}} + > {value.charAt(0).toUpperCase() + value.slice(1)} @@ -31,7 +33,8 @@ export default () => ( size="s" isDisabled={value === 'disabled' ? true : false} color={value !== 'disabled' ? value : 'primary'} - onClick={() => {}}> + onClick={() => {}} + > Small @@ -41,7 +44,8 @@ export default () => ( size="xs" isDisabled={value === 'disabled' ? true : false} color={value !== 'disabled' ? value : 'primary'} - onClick={() => {}}> + onClick={() => {}} + > Extra small diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js index d06802f7eaf..1dac3cc8b23 100644 --- a/src-docs/src/views/button/button_ghost.js +++ b/src-docs/src/views/button/button_ghost.js @@ -29,7 +29,8 @@ export default () => { color="ghost" size="s" iconType="check" - onClick={() => {}}> + onClick={() => {}} + > Filled @@ -67,7 +68,8 @@ export default () => { color="ghost" isSelected={toggle0On} fill={toggle0On} - onClick={onToggle0Change}> + onClick={onToggle0Change} + > Toggle me diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js index aec6ce2c8d6..75efabcf1cb 100644 --- a/src-docs/src/views/button/button_toggle.js +++ b/src-docs/src/views/button/button_toggle.js @@ -11,7 +11,8 @@ export default () => { { setToggle0On((isOn) => !isOn); - }}> + }} + > {toggle0On ? 'Hey there good lookin' : 'Toggle me'}   diff --git a/src-docs/src/views/button/button_toggle_aria.js b/src-docs/src/views/button/button_toggle_aria.js index 623b59c858b..8092955f012 100644 --- a/src-docs/src/views/button/button_toggle_aria.js +++ b/src-docs/src/views/button/button_toggle_aria.js @@ -14,7 +14,8 @@ export default () => { iconType={toggle2On ? 'starFilledSpace' : 'starPlusEmpty'} onClick={() => { setToggle2On((isOn) => !isOn); - }}> + }} + > Toggle me   diff --git a/src-docs/src/views/button/button_with_icon.js b/src-docs/src/views/button/button_with_icon.js index a8f7da86565..739f2eaaf3e 100644 --- a/src-docs/src/views/button/button_with_icon.js +++ b/src-docs/src/views/button/button_with_icon.js @@ -73,7 +73,8 @@ export default () => ( iconSide="right" fill iconType="arrowDown" - onClick={() => {}}> + onClick={() => {}} + > Filled @@ -83,7 +84,8 @@ export default () => ( iconSide="right" iconType="arrowDown" size="s" - onClick={() => {}}> + onClick={() => {}} + > Small @@ -94,7 +96,8 @@ export default () => ( iconType="arrowDown" size="s" fill - onClick={() => {}}> + onClick={() => {}} + > Small and filled @@ -104,7 +107,8 @@ export default () => ( fullWidth iconSide="right" iconType="arrowDown" - onClick={() => {}}> + onClick={() => {}} + > Full width @@ -115,7 +119,8 @@ export default () => ( {}} - iconType="arrowDown"> + iconType="arrowDown" + > Icon right @@ -125,7 +130,8 @@ export default () => ( iconSide="right" onClick={() => {}} iconType="arrowDown" - size="s"> + size="s" + > Small empty @@ -135,7 +141,8 @@ export default () => ( iconSide="right" onClick={() => {}} iconType="arrowDown" - size="xs"> + size="xs" + > Extra small empty @@ -166,7 +173,8 @@ export default () => ( size="s" fill onClick={() => {}} - isDisabled> + isDisabled + > Small and filled @@ -184,7 +192,8 @@ export default () => ( isDisabled color="text" onClick={() => {}} - iconType="dashboardApp"> + iconType="dashboardApp" + > Disabled app icon @@ -196,7 +205,8 @@ export default () => ( onClick={() => {}} iconType="arrowDown" iconSide="right" - size="xs"> + size="xs" + > Disabled icon right diff --git a/src-docs/src/views/button/guidelines.js b/src-docs/src/views/button/guidelines.js index 1cd62a9d1cf..b21bd265452 100644 --- a/src-docs/src/views/button/guidelines.js +++ b/src-docs/src/views/button/guidelines.js @@ -138,11 +138,13 @@ export default () => ( heading="Put buttons on the right in containers with a restricted width" description="In contained spaces like modals, popovers, bottom bars, and flyouts, the user path is top to bottom, left to right, in a Z-shaped pattern. - Placing buttons on the bottom right puts them right where users finish scanning."> + Placing buttons on the bottom right puts them right where users finish scanning." + > + secondary action on its left in modals." + >

( + text="Always use buttons positioned to the right in popovers." + >
( heading="Put buttons on the left in unrestricted containers" description=" With large page forms, content is typically concentrated on the top and - left with a lot of open space to the right. The user path is top to bottom, in an F-shaped pattern."> + left with a lot of open space to the right. The user path is top to bottom, in an F-shaped pattern." + > + text="Put the primary action in the leftmost position so the user's eye never has to leave the one side." + > ( + text="Put the actions far away from the content." + > ( + and stay consistent with the app." + > + at the top and ends at the bottom. Think of it as adding to a pile." + > ( type="do" text="Empty states are unique because they focus first on information and then try to sell the user on creation. In these special cases, where the container is constrained - and the content is fairly short, the title and the button should be center aligned."> + and the content is fairly short, the title and the button should be center aligned." + > ( + Use only one filled button per page, modal, form, or other layout." + > + the one you want the user to eventually complete." + > ( + text="Too many primary buttons will confuse the user." + > ( + visual styles next to each other." + > + an empty, but same-colored button." + >
@@ -269,7 +283,8 @@ export default () => ( + text="Readability suffers when multiple colors and sizes are used." + >
@@ -294,11 +309,13 @@ export default () => ( + Limit icon buttons to groups of two, otherwise they lose meaning." + > + text="Use icon buttons for universal actions that are easy to understand." + >
     @@ -308,7 +325,8 @@ export default () => ( + text="Icons alone in a standard button defeats the purpose of saving space." + >
@@ -323,14 +341,16 @@ export default () => ( + Icons work best on labels for binary actions, for example, Create and Delete, and final actions, such as Save." + > + understand that this is the final action.' + >
Continue @@ -346,7 +366,8 @@ export default () => ( type="dont" text="Unnecessary icons often distract from the text. This is especially true when the icon is positioned on the right, - with a hard to interpret icon."> + with a hard to interpret icon." + > Create index pattern @@ -357,18 +378,21 @@ export default () => ( + For more buttons, use a dropdown or context menu." + > + text="Put multiple actions inside a menu triggered by a single rather than showing them separately." + > + text="When there are many buttons, none matter." + >
diff --git a/src-docs/src/views/button/split_button.js b/src-docs/src/views/button/split_button.js index 3fe88a99fc1..d813de7f6d1 100644 --- a/src-docs/src/views/button/split_button.js +++ b/src-docs/src/views/button/split_button.js @@ -56,7 +56,8 @@ export default () => { isOpen={isPopoverOpen} closePopover={closePopover} panelPaddingSize="none" - anchorPosition="downLeft"> + anchorPosition="downLeft" + > diff --git a/src-docs/src/views/call_out/info.js b/src-docs/src/views/call_out/info.js index 4ca71ab210d..24fec6ba976 100644 --- a/src-docs/src/views/call_out/info.js +++ b/src-docs/src/views/call_out/info.js @@ -6,7 +6,8 @@ export default () => (
+ iconType="search" + >

Here’s some stuff that you need to know. We can make this text really long so that, when viewed within a browser that’s fairly diff --git a/src-docs/src/views/card/card_checkable.js b/src-docs/src/views/card/card_checkable.js index b45a908280c..9850d2dc4ed 100644 --- a/src-docs/src/views/card/card_checkable.js +++ b/src-docs/src/views/card/card_checkable.js @@ -39,7 +39,8 @@ export default () => { Checkable card radio group with legend ), - }}> + }} + > { name={radioName} value="radio2" checked={radio === 'radio2'} - onChange={() => setRadio('radio2')}> + onChange={() => setRadio('radio2')} + > { Wrap a lists with EuiText size="s" to match the description text. - }> + } + >

  • Bullet 1
    • @@ -61,7 +62,8 @@ export default () => { - }> + } + > { Just be sure not to add any onClick handler to the card if the children are also interactable. - }> + } + > {'Hello, young Skywalker'} diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index bb85f27919a..6cb0cbd2817 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -165,7 +165,8 @@ export const CardExample = { 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 diff --git a/src-docs/src/views/card/card_selectable.js b/src-docs/src/views/card/card_selectable.js index d2191c07d18..f14f6c8176f 100644 --- a/src-docs/src/views/card/card_selectable.js +++ b/src-docs/src/views/card/card_selectable.js @@ -36,7 +36,8 @@ export default () => { iconType="iInCircle" size="xs" onClick={detailsClicked} - aria-label="See more details about Sketch"> + aria-label="See more details about Sketch" + > More details } @@ -56,7 +57,8 @@ export default () => { iconType="iInCircle" size="xs" onClick={detailsClicked} - aria-label="See more details about Google"> + aria-label="See more details about Google" + > More details } @@ -76,7 +78,8 @@ export default () => { iconType="iInCircle" size="xs" onClick={detailsClicked} - aria-label="See more details about Not Adobe"> + aria-label="See more details about Not Adobe" + > More details } diff --git a/src-docs/src/views/code/code_block.js b/src-docs/src/views/code/code_block.js index 536359ce99f..0250acd18a2 100644 --- a/src-docs/src/views/code/code_block.js +++ b/src-docs/src/views/code/code_block.js @@ -32,7 +32,8 @@ export default () => ( fontSize="m" paddingSize="m" overflowHeight={300} - isCopyable> + isCopyable + > {jsCode} @@ -43,7 +44,8 @@ export default () => ( fontSize="m" paddingSize="m" overflowHeight={300} - isCopyable> + isCopyable + > {sqlCode}

diff --git a/src-docs/src/views/code/code_block_pre.js b/src-docs/src/views/code/code_block_pre.js index 4df2aad65b0..7a06f4b76a4 100644 --- a/src-docs/src/views/code/code_block_pre.js +++ b/src-docs/src/views/code/code_block_pre.js @@ -11,7 +11,8 @@ export default () => ( color="dark" overflowHeight={300} whiteSpace="pre" - isCopyable> + isCopyable + > {`export default () => (
In this example, the whiteSpace property is set to pre. All the whitespaces will be kept as is and the text only wraps when line breaks are in the content.
);`} diff --git a/src-docs/src/views/code/virtualized_flyout.js b/src-docs/src/views/code/virtualized_flyout.js index 8b0ece97bec..4cf6ad45aca 100644 --- a/src-docs/src/views/code/virtualized_flyout.js +++ b/src-docs/src/views/code/virtualized_flyout.js @@ -18,7 +18,8 @@ export default () => { setIsFlyoutVisible(false)} - aria-labelledby="flyoutTitle"> + aria-labelledby="flyoutTitle" + >

A flyout with just code

@@ -29,7 +30,8 @@ export default () => { language="json" overflowHeight={'100%'} isCopyable - isVirtualized> + isVirtualized + > {`{ "id": "1", "rawResponse": { diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx index fa5925e5469..2ff63de5a31 100644 --- a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx +++ b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx @@ -30,7 +30,8 @@ export default () => { Toggle nav } - onClose={() => setNavIsOpen(false)}> + onClose={() => setNavIsOpen(false)} + >

I am some nav

@@ -50,7 +51,8 @@ export default () => { 'euiCollapsibleNavExample--isDocked', JSON.stringify(!navIsDocked) ); - }}> + }} + > Docked: {navIsDocked ? 'on' : 'off'}
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx index 7e5aebe4107..61d9861761e 100644 --- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx +++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx @@ -149,11 +149,13 @@ const CollapsibleNavAll = () => { button={ setNavIsOpen(!navIsOpen)}> + onClick={() => setNavIsOpen(!navIsOpen)} + > } - onClose={() => setNavIsOpen(false)}> + onClose={() => setNavIsOpen(false)} + > {/* Dark deployments section */} {DeploymentsGroup} @@ -164,7 +166,8 @@ const CollapsibleNavAll = () => { + style={{ maxHeight: '40vh' }} + > { iconType="logoKibana" isCollapsible={true} initialIsOpen={openGroups.includes('Kibana')} - onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Kibana')}> + onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Kibana')} + > { iconType="training" isCollapsible={true} initialIsOpen={openGroups.includes('Learn')} - onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Learn')}> + onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Learn')} + > ( + iconType="logoElastic" + >

This is a nice group with a heading supplied via{' '} @@ -28,7 +29,8 @@ export default () => ( title="Nav group" isCollapsible={true} iconType="logoElastic" - initialIsOpen={true}> + initialIsOpen={true} + >

This group is collapsible and set with{' '} @@ -45,7 +47,8 @@ export default () => ( titleSize="s" isCollapsible={true} initialIsOpen={false} - background="dark"> + background="dark" + >

This is a dark collapsible group diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx index c64b3661cf3..6eca7b58387 100644 --- a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx +++ b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx @@ -59,7 +59,8 @@ export const DeploymentsGroup = ( iconSize="xl" isCollapsible={true} initialIsOpen={false} - background="dark"> + background="dark" + >

@@ -84,7 +85,8 @@ export const SecurityGroup = ( title="Hide and never show again" iconType="cross" /> - }> + } + >

Threat prevention, detection, and response with SIEM and endpoint @@ -113,7 +115,8 @@ export default () => ( title="Kibana" iconType="logoKibana" isCollapsible={true} - initialIsOpen={true}> + initialIsOpen={true} + > {}} diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index 7a75569f473..c92ed52416d 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/src-docs/src/views/color_palette/color_palette.js @@ -60,7 +60,8 @@ export default () => ( gutterSize="none" alignItems="flexStart" responsive={false} - wrap> + wrap + > {palette.palette.map((hexCode) => ( { + responsive={false} + > {colorPalette(palette, Number(length), i > 1).map((hexCode) => ( ))} diff --git a/src-docs/src/views/color_palette/color_palette_quantitative.js b/src-docs/src/views/color_palette/color_palette_quantitative.js index 077f5b59d08..b791464fc30 100644 --- a/src-docs/src/views/color_palette/color_palette_quantitative.js +++ b/src-docs/src/views/color_palette/color_palette_quantitative.js @@ -60,7 +60,8 @@ export default () => { + responsive={false} + > {paletteData[paletteName](Number(length)).map((hexCode) => ( ))} diff --git a/src-docs/src/views/color_palette/shared.js b/src-docs/src/views/color_palette/shared.js index 1b459bafbe4..53128f92adf 100644 --- a/src-docs/src/views/color_palette/shared.js +++ b/src-docs/src/views/color_palette/shared.js @@ -14,7 +14,8 @@ export const ColorPaletteFlexItem = ({ hexCode, className, ...rest }) => { key={hexCode} grow={false} className={classNames('guideColorPalette__swatch', className)} - {...rest}> + {...rest} + > ); @@ -25,7 +26,8 @@ export const ColorPaletteCopyCode = ({ textToCopy, code }) => { + textToCopy={textToCopy || code} + > {(copy) => ( {code} diff --git a/src-docs/src/views/color_picker/alpha.js b/src-docs/src/views/color_picker/alpha.js index 1509fdb99a7..e00de812f83 100644 --- a/src-docs/src/views/color_picker/alpha.js +++ b/src-docs/src/views/color_picker/alpha.js @@ -32,7 +32,8 @@ export default () => { + error={errors} + > { + error={errors2} + > { iconType="controlsVertical" aria-label="Open settings" color="text" - size="xs"> + size="xs" + > Customize ); @@ -152,7 +153,8 @@ export default () => { panelStyle={{ minWidth: 380 }} button={button} isOpen={isPopoverOpen} - closePopover={closePopover}> + closePopover={closePopover} + > { Display fixed } - display="columnCompressedSwitch"> + display="columnCompressedSwitch" + > setSelectionType(!selectionType)} diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js index d502073d140..779a5f09bd2 100644 --- a/src-docs/src/views/color_picker/color_stops.js +++ b/src-docs/src/views/color_picker/color_stops.js @@ -59,7 +59,8 @@ export default () => { iconType="controlsVertical" aria-label="Open settings" color="text" - size="xs"> + size="xs" + > Steps ); @@ -133,7 +134,8 @@ export default () => { panelStyle={{ minWidth: 380 }} button={button} isOpen={isPopoverOpen} - closePopover={closePopover}> + closePopover={closePopover} + > { + helpText="This color picker is inside of a form row" + > {colorPicker} @@ -90,7 +91,8 @@ export default () => { + helpText="This color stops component is inside of a form row" + > {stops} @@ -99,7 +101,8 @@ export default () => { id="popover" button={button} isOpen={isPopoverOpen} - closePopover={closePopover}> + closePopover={closePopover} + >

{colorPicker} diff --git a/src-docs/src/views/color_picker/custom_button.js b/src-docs/src/views/color_picker/custom_button.js index d03548a10a4..2d05d6a9cfa 100644 --- a/src-docs/src/views/color_picker/custom_button.js +++ b/src-docs/src/views/color_picker/custom_button.js @@ -42,7 +42,8 @@ export default () => { button={ + onClickAriaLabel="Select a new color" + > Color this badge } diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js index 18a23245198..b895da2b55b 100644 --- a/src-docs/src/views/color_picker/kitchen_sink.js +++ b/src-docs/src/views/color_picker/kitchen_sink.js @@ -27,7 +27,8 @@ export default () => { + canCompressed={false} + > { + helpText="This combo box is inside of a form row" + > {comboBox} @@ -147,7 +148,8 @@ export default () => { id="popover" button={button} isOpen={isPopoverOpen} - closePopover={closePopover}> + closePopover={closePopover} + >
{comboBox}
diff --git a/src-docs/src/views/combo_box/custom_options_only.js b/src-docs/src/views/combo_box/custom_options_only.js index 26314eab4bc..3ab7894dcea 100644 --- a/src-docs/src/views/combo_box/custom_options_only.js +++ b/src-docs/src/views/combo_box/custom_options_only.js @@ -44,7 +44,8 @@ export default () => { + error={isInvalid ? 'Only letters are allowed' : undefined} + > { canLoading={false} canPrepend={false} canIsDisabled - canAppend> + canAppend + > { return ( + helpText="Select an occupation from the list. If your occupation isn’t available, create a custom one." + > ( username="janed" event="added a comment" actions={copyAction} - timestamp="on Jan 1, 2020"> + timestamp="on Jan 1, 2020" + > {body}
diff --git a/src-docs/src/views/comment/comment_actions.tsx b/src-docs/src/views/comment/comment_actions.tsx index 42512c2dfd2..acd8a598b01 100644 --- a/src-docs/src/views/comment/comment_actions.tsx +++ b/src-docs/src/views/comment/comment_actions.tsx @@ -57,7 +57,8 @@ export default class extends Component { isOpen={isPopoverOpen} closePopover={() => this.closePopover()} panelPaddingSize="none" - anchorPosition="leftCenter"> + anchorPosition="leftCenter" + > { icon="pencil" onClick={() => { this.closePopover(); - }}> + }} + > Edit , { icon="share" onClick={() => { this.closePopover(); - }}> + }} + > Share , { icon="copy" onClick={() => { this.closePopover(); - }}> + }} + > Copy , ]} @@ -94,7 +98,8 @@ export default class extends Component { username="janed" event="added a comment" actions={customActions} - timestamp="Jan 1, 2020"> + timestamp="Jan 1, 2020" + > {body}
diff --git a/src-docs/src/views/comment/comment_timelineIcons.tsx b/src-docs/src/views/comment/comment_timelineIcons.tsx index 3a4c44c8842..fdd8d6399d9 100644 --- a/src-docs/src/views/comment/comment_timelineIcons.tsx +++ b/src-docs/src/views/comment/comment_timelineIcons.tsx @@ -35,7 +35,8 @@ export default () => ( + timestamp="Jan 1, 2020" + > {defaultBody} ( username="janed" event="added a comment" timestamp="Jan 1, 2020" - timelineIcon="tag"> + timelineIcon="tag" + > {iconStringBody} ( size="l" name="Juana" /> - }> + } + > {customIconBody} diff --git a/src-docs/src/views/comment/comment_types.tsx b/src-docs/src/views/comment/comment_types.tsx index ef6622f1868..dfa97c20b8e 100644 --- a/src-docs/src/views/comment/comment_types.tsx +++ b/src-docs/src/views/comment/comment_types.tsx @@ -34,7 +34,8 @@ export default () => ( username="milal" type="update" event="edited case" - timestamp="6 hours ago"> + timestamp="6 hours ago" + > {bodyUpdate}
diff --git a/src-docs/src/views/context_menu/content_panel.js b/src-docs/src/views/context_menu/content_panel.js index 268ccc8440e..8c1335874d5 100644 --- a/src-docs/src/views/context_menu/content_panel.js +++ b/src-docs/src/views/context_menu/content_panel.js @@ -22,7 +22,8 @@ export default () => { size="s" iconType="arrowDown" iconSide="right" - onClick={onButtonClick}> + onClick={onButtonClick} + > Click to show some content ); @@ -34,7 +35,8 @@ export default () => { isOpen={isPopoverOpen} closePopover={closePopover} panelPaddingSize="s" - anchorPosition="downLeft"> + anchorPosition="downLeft" + > This context menu doesn't render items, it passes a child instead. diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js index 90ce0f2f9f9..b28828f7a73 100644 --- a/src-docs/src/views/context_menu/context_menu.js +++ b/src-docs/src/views/context_menu/context_menu.js @@ -116,7 +116,8 @@ export default () => { + hasChildLabel={false} + > { isOpen={isPopoverOpen} closePopover={closePopover} panelPaddingSize="none" - anchorPosition="downLeft"> + anchorPosition="downLeft" + > ); diff --git a/src-docs/src/views/context_menu/context_menu_with_content.js b/src-docs/src/views/context_menu/context_menu_with_content.js index 421639ef39c..bcf4b212a98 100644 --- a/src-docs/src/views/context_menu/context_menu_with_content.js +++ b/src-docs/src/views/context_menu/context_menu_with_content.js @@ -103,7 +103,8 @@ export default () => { + onClick={onDynamicButtonClick} + > Click me to load dynamic mixed content menu ); @@ -116,7 +117,8 @@ export default () => { isOpen={isPopoverOpen} closePopover={closePopover} panelPaddingSize="none" - anchorPosition="upLeft"> + anchorPosition="upLeft" + > @@ -128,7 +130,8 @@ export default () => { isOpen={isDynamicPopoverOpen} closePopover={closeDynamicPopover} panelPaddingSize="none" - anchorPosition="upLeft"> + anchorPosition="upLeft" + > diff --git a/src-docs/src/views/context_menu/single_panel.js b/src-docs/src/views/context_menu/single_panel.js index bec8d6b933b..cf1a4e4ccb0 100644 --- a/src-docs/src/views/context_menu/single_panel.js +++ b/src-docs/src/views/context_menu/single_panel.js @@ -28,7 +28,8 @@ export default () => { size="s" iconType="arrowDown" iconSide="right" - onClick={onButtonClick}> + onClick={onButtonClick} + > Rows per page: {rowSize} ); @@ -40,7 +41,8 @@ export default () => { onClick={() => { closePopover(); setRowSize(10); - }}> + }} + > 10 rows , { onClick={() => { closePopover(); setRowSize(20); - }}> + }} + > 20 rows , { onClick={() => { closePopover(); setRowSize(50); - }}> + }} + > 50 rows , { onClick={() => { closePopover(); setRowSize(100); - }}> + }} + > 100 rows , ]; @@ -79,7 +84,8 @@ export default () => { isOpen={isPopoverOpen} closePopover={closePopover} panelPaddingSize="none" - anchorPosition="downLeft"> + anchorPosition="downLeft" + > ); diff --git a/src-docs/src/views/context_menu/small.js b/src-docs/src/views/context_menu/small.js index 782d403afef..82f06865c94 100644 --- a/src-docs/src/views/context_menu/small.js +++ b/src-docs/src/views/context_menu/small.js @@ -43,7 +43,8 @@ export default () => { isOpen={isPopoverOpen} closePopover={closePopover} panelPaddingSize="none" - anchorPosition="downLeft"> + anchorPosition="downLeft" + > ); diff --git a/src-docs/src/views/control_bar/tabs.js b/src-docs/src/views/control_bar/tabs.js index 70d709fe2f2..3337ccebdb3 100644 --- a/src-docs/src/views/control_bar/tabs.js +++ b/src-docs/src/views/control_bar/tabs.js @@ -84,7 +84,8 @@ export default () => { controls={controls} size="m" showContent={contentIsVisible} - showOnMobile> + showOnMobile + > {tabContent !== '' && (
{tabContent} diff --git a/src-docs/src/views/datagrid/additional_controls.js b/src-docs/src/views/datagrid/additional_controls.js index 6135f621d6c..b2a5c20dc7a 100644 --- a/src-docs/src/views/datagrid/additional_controls.js +++ b/src-docs/src/views/datagrid/additional_controls.js @@ -83,7 +83,8 @@ export default () => { iconType="bell" color="primary" className="euiDataGrid__controlBtn" - onClick={() => {}}> + onClick={() => {}} + > New button { iconType="branch" color="danger" className="euiDataGrid__controlBtn" - onClick={() => {}}> + onClick={() => {}} + > Another button diff --git a/src-docs/src/views/datagrid/column_cell_actions.js b/src-docs/src/views/datagrid/column_cell_actions.js index 66a21da1dfa..1d06101f503 100644 --- a/src-docs/src/views/datagrid/column_cell_actions.js +++ b/src-docs/src/views/datagrid/column_cell_actions.js @@ -31,7 +31,8 @@ const columns = [ closePopover(); }} iconType="heart" - aria-label={`Send love to ${row}, column "${columnId}" `}> + aria-label={`Send love to ${row}, column "${columnId}" `} + > Send love ); @@ -52,7 +53,8 @@ const columns = [ alert(message)} iconType="cheer" - aria-label={message}> + aria-label={message} + > Cheer ); @@ -71,7 +73,8 @@ const columns = [ alert(`Love sent from row ${row}, column "${columnId}"`) } iconType="heart" - aria-label={label}> + aria-label={label} + > Love this city ); @@ -85,7 +88,8 @@ const columns = [ alert(`Paint sent from row ${row}, column "${columnId}"`) } iconType="brush" - aria-label={label}> + aria-label={label} + > Paint this city ); diff --git a/src-docs/src/views/datagrid/control_columns.js b/src-docs/src/views/datagrid/control_columns.js index b025b2521aa..bee036d8aca 100644 --- a/src-docs/src/views/datagrid/control_columns.js +++ b/src-docs/src/views/datagrid/control_columns.js @@ -89,12 +89,14 @@ const SelectionButton = () => { iconType="arrowDown" color="primary" className="euiDataGrid__controlBtn" - onClick={() => setIsPopoverOpen(!isPopoverOpen)}> + onClick={() => setIsPopoverOpen(!isPopoverOpen)} + > {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'}{' '} selected } - closePopover={() => setIsPopoverOpen(false)}> + closePopover={() => setIsPopoverOpen(false)} + > {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'} @@ -104,7 +106,8 @@ const SelectionButton = () => { responsive={false} alignItems="center" component="span" - gutterSize="s"> + gutterSize="s" + > { responsive={false} alignItems="center" component="span" - gutterSize="s"> + gutterSize="s" + > setIsPopoverOpen(!isPopoverOpen)} /> } - closePopover={() => setIsPopoverOpen(false)}> + closePopover={() => setIsPopoverOpen(false)} + > Actions
); @@ -268,13 +269,12 @@ export class EuiAccordion extends Component< aria-expanded={isOpen} onClick={this.onToggle} className={buttonClasses} - type="button"> + type="button" + > {icon} + className={classNames('euiIEFlexWrapFix', buttonContentClassName)} + > {buttonContent} @@ -290,14 +290,16 @@ export class EuiAccordion extends Component< tabIndex={-1} role="region" aria-labelledby={buttonId} - id={id}> + id={id} + > {(resizeRef) => (
{ this.setChildContentRef(ref); resizeRef(ref); - }}> + }} + >
{childrenContent}
)} diff --git a/src/components/aspect_ratio/aspect_ratio.test.tsx b/src/components/aspect_ratio/aspect_ratio.test.tsx index 1f6787e8e33..d7160f4861b 100644 --- a/src/components/aspect_ratio/aspect_ratio.test.tsx +++ b/src/components/aspect_ratio/aspect_ratio.test.tsx @@ -39,7 +39,8 @@ describe('EuiAspectRatio', () => { height={16} width={9} maxWidth={500} - {...requiredProps}> + {...requiredProps} + >