From 75fee43023fbe7ed32cf437cd711322d4228a7e0 Mon Sep 17 00:00:00 2001 From: Rory Hunter Date: Mon, 13 May 2019 07:39:37 +0100 Subject: [PATCH] Format JavaScript with Prettier through ESLint (#1906) This is a stepping stone towards retiring TSLint and using ESLint for all source files. --- .eslintignore | 1 + .eslintrc.js | 31 + .eslintrc.json | 27 - CHANGELOG.md | 1 + package.json | 6 +- src-docs/postcss.config.js | 4 +- src-docs/src/actions/index.js | 8 +- .../guide_locale_selector.js | 14 +- .../src/components/guide_page/guide_page.js | 33 +- .../guide_page/guide_page_chrome.js | 99 ++- src-docs/src/components/guide_page/index.js | 8 +- .../src/components/guide_rule/guide_rule.js | 25 +- .../guide_rule/guide_rule_description.js | 15 +- .../guide_rule/guide_rule_example.js | 28 +- .../components/guide_rule/guide_rule_title.js | 15 +- src-docs/src/components/guide_rule/index.js | 16 +- .../components/guide_section/guide_section.js | 189 ++--- .../guide_section/guide_section_container.js | 11 +- .../src/components/guide_section/index.js | 4 +- .../guide_theme_selector.js | 26 +- src-docs/src/components/index.js | 10 +- src-docs/src/index.js | 53 +- src-docs/src/routes.js | 583 +++++++--------- src-docs/src/services/index.js | 5 +- .../src/services/string/render_to_html.js | 7 +- src-docs/src/services/theme/theme.js | 4 +- src-docs/src/store/configure_store.js | 16 +- src-docs/src/store/index.js | 2 +- .../accessibility/accessibility_example.js | 106 +-- .../accessibility/keyboard_accessible.js | 26 +- src-docs/src/views/accordion/accordion.js | 15 +- .../src/views/accordion/accordion_example.js | 279 ++++---- .../src/views/accordion/accordion_extra.js | 8 +- .../src/views/accordion/accordion_form.js | 10 +- .../src/views/accordion/accordion_grow.js | 24 +- .../src/views/accordion/accordion_multiple.js | 13 +- .../src/views/accordion/accordion_open.js | 15 +- src-docs/src/views/app_container.js | 14 +- src-docs/src/views/app_view.js | 30 +- src-docs/src/views/avatar/avatar.js | 39 +- src-docs/src/views/avatar/avatar_example.js | 120 ++-- src-docs/src/views/avatar/avatar_initials.js | 29 +- src-docs/src/views/badge/badge.js | 17 +- src-docs/src/views/badge/badge_button.js | 10 +- src-docs/src/views/badge/badge_example.js | 222 +++--- src-docs/src/views/badge/badge_with_icon.js | 8 +- src-docs/src/views/badge/beta_badge.js | 23 +- src-docs/src/views/bottom_bar/bottom_bar.js | 22 +- .../views/bottom_bar/bottom_bar_example.js | 68 +- src-docs/src/views/breadcrumbs/breadcrumbs.js | 54 +- .../views/breadcrumbs/breadcrumbs_example.js | 27 +- src-docs/src/views/breadcrumbs/max.js | 69 +- src-docs/src/views/breadcrumbs/responsive.js | 6 +- src-docs/src/views/breadcrumbs/truncate.js | 24 +- src-docs/src/views/button/button.js | 70 +- src-docs/src/views/button/button_as_link.js | 17 +- src-docs/src/views/button/button_empty.js | 93 +-- .../src/views/button/button_empty_flush.js | 8 +- src-docs/src/views/button/button_example.js | 89 ++- src-docs/src/views/button/button_ghost.js | 31 +- src-docs/src/views/button/button_group.js | 180 ++--- src-docs/src/views/button/button_icon.js | 24 +- src-docs/src/views/button/button_loading.js | 6 +- src-docs/src/views/button/button_toggle.js | 32 +- src-docs/src/views/button/button_with_icon.js | 36 +- .../src/views/call_out/call_out_example.js | 177 ++--- src-docs/src/views/call_out/danger.js | 14 +- src-docs/src/views/call_out/info.js | 18 +- src-docs/src/views/call_out/success.js | 14 +- src-docs/src/views/call_out/warning.js | 19 +- src-docs/src/views/card/card.js | 8 +- src-docs/src/views/card/card_beta.js | 14 +- src-docs/src/views/card/card_example.js | 346 +++++----- src-docs/src/views/card/card_footer.js | 6 +- src-docs/src/views/card/card_selectable.js | 9 +- src-docs/src/views/code/code.js | 14 +- src-docs/src/views/code/code_block.js | 18 +- src-docs/src/views/code/code_example.js | 94 +-- src-docs/src/views/code_editor/code_editor.js | 12 +- .../views/code_editor/code_editor_example.js | 111 +-- src-docs/src/views/code_editor/custom_mode.js | 6 +- src-docs/src/views/code_editor/read_only.js | 6 +- .../src/views/color_palette/color_palette.js | 44 +- .../color_palette/color_palette_custom.js | 81 ++- .../color_palette/color_palette_example.js | 154 +++-- .../color_palette/color_palette_histogram.js | 41 +- .../src/views/color_picker/color_picker.js | 12 +- .../views/color_picker/color_picker_clear.js | 12 +- .../color_picker/color_picker_example.js | 77 ++- .../color_picker_no_color_label.js | 12 +- src-docs/src/views/combo_box/async.js | 80 ++- src-docs/src/views/combo_box/colors.js | 92 +-- src-docs/src/views/combo_box/combo_box.js | 72 +- .../src/views/combo_box/combo_box_example.js | 462 +++++++------ src-docs/src/views/combo_box/containers.js | 96 +-- .../views/combo_box/custom_options_only.js | 16 +- src-docs/src/views/combo_box/disabled.js | 72 +- .../combo_box/disallow_custom_options.js | 83 ++- src-docs/src/views/combo_box/groups.js | 60 +- src-docs/src/views/combo_box/render_option.js | 132 ++-- .../src/views/combo_box/single_selection.js | 62 +- src-docs/src/views/combo_box/virtualized.js | 8 +- src-docs/src/views/context/context.js | 50 +- src-docs/src/views/context/context_example.js | 54 +- .../src/views/context_menu/content_panel.js | 14 +- .../src/views/context_menu/context_menu.js | 179 ++--- .../context_menu/context_menu_example.js | 163 +++-- .../context_menu/context_menu_with_content.js | 76 +- .../src/views/context_menu/single_panel.js | 79 +-- src-docs/src/views/copy/copy.js | 11 +- src-docs/src/views/copy/copy_example.js | 51 +- src-docs/src/views/date_picker/classes.js | 14 +- .../src/views/date_picker/custom_input.js | 22 +- src-docs/src/views/date_picker/date_picker.js | 14 +- .../views/date_picker/date_picker_example.js | 566 ++++++++------- src-docs/src/views/date_picker/inline.js | 13 +- src-docs/src/views/date_picker/locale.js | 10 +- src-docs/src/views/date_picker/min_max.js | 33 +- .../src/views/date_picker/open_to_date.js | 12 +- src-docs/src/views/date_picker/range.js | 14 +- src-docs/src/views/date_picker/states.js | 15 +- .../views/date_picker/super_date_picker.js | 68 +- src-docs/src/views/date_picker/time_select.js | 21 +- src-docs/src/views/date_picker/utc.js | 11 +- src-docs/src/views/delay_hide/delay_hide.js | 6 +- .../views/delay_hide/delay_hide_example.js | 22 +- .../description_list/description_list.js | 11 +- .../description_list_classes.js | 7 +- .../description_list_column.js | 7 +- .../description_list_example.js | 251 ++++--- .../description_list_inline.js | 7 +- .../description_list_reverse.js | 4 +- .../description_list_styling.js | 8 +- .../src/views/drag_and_drop/drag_and_drop.js | 11 +- .../views/drag_and_drop/drag_and_drop_bare.js | 8 +- .../drag_and_drop/drag_and_drop_clone.js | 93 +-- .../drag_and_drop/drag_and_drop_complex.js | 46 +- .../drag_and_drop_custom_handle.js | 26 +- .../drag_and_drop_disable_blocking.js | 21 +- .../drag_and_drop/drag_and_drop_example.js | 255 ++++--- .../drag_and_drop/drag_and_drop_move_lists.js | 50 +- .../drag_and_drop/drag_and_drop_types.js | 56 +- src-docs/src/views/drag_and_drop/helper.js | 13 +- src-docs/src/views/empty_prompt/custom.js | 16 +- .../src/views/empty_prompt/empty_prompt.js | 16 +- .../empty_prompt/empty_prompt_example.js | 123 ++-- src-docs/src/views/empty_prompt/simple.js | 4 +- .../views/error_boundary/error_boundary.js | 8 +- .../error_boundary/error_boundary_example.js | 47 +- src-docs/src/views/expression/expression.js | 49 +- .../views/expression/expression_example.js | 129 ++-- src-docs/src/views/facet/facet.js | 22 +- src-docs/src/views/facet/facet_example.js | 28 +- src-docs/src/views/facet/facet_layout.js | 3 +- .../src/views/filter_group/filter_group.js | 49 +- .../filter_group/filter_group_example.js | 195 +++--- .../views/filter_group/filter_group_multi.js | 17 +- .../views/filter_group/filter_group_simple.js | 39 +- src-docs/src/views/flex/flex_example.js | 650 +++++++++++------- src-docs/src/views/flex/flex_item_panel.js | 8 +- src-docs/src/views/flyout/flyout.js | 27 +- .../src/views/flyout/flyout_complicated.js | 114 ++- src-docs/src/views/flyout/flyout_example.js | 54 +- src-docs/src/views/flyout/flyout_large.js | 22 +- src-docs/src/views/flyout/flyout_max_width.js | 44 +- src-docs/src/views/flyout/flyout_small.js | 21 +- src-docs/src/views/focus_trap/focus_trap.js | 16 +- .../views/focus_trap/focus_trap_example.js | 72 +- src-docs/src/views/form_controls/checkbox.js | 10 +- .../src/views/form_controls/checkbox_group.js | 46 +- .../src/views/form_controls/field_number.js | 17 +- .../src/views/form_controls/field_password.js | 10 +- .../src/views/form_controls/field_search.js | 10 +- .../src/views/form_controls/field_text.js | 10 +- .../src/views/form_controls/file_picker.js | 27 +- .../form_controls/form_control_layout.js | 78 +-- .../form_controls/form_controls_example.js | 460 +++++++------ src-docs/src/views/form_controls/radio.js | 12 +- .../src/views/form_controls/radio_group.js | 45 +- src-docs/src/views/form_controls/select.js | 10 +- src-docs/src/views/form_controls/switch.js | 10 +- src-docs/src/views/form_controls/text_area.js | 10 +- .../form_layouts/described_form_group.js | 128 ++-- .../src/views/form_layouts/form_compressed.js | 109 ++- .../form_layouts/form_layouts_example.js | 318 +++++---- src-docs/src/views/form_layouts/form_rows.js | 101 ++- src-docs/src/views/form_layouts/full_width.js | 15 +- .../src/views/form_layouts/inline_popover.js | 53 +- .../src/views/form_layouts/inline_sizing.js | 2 +- .../form_validation_example.js | 57 +- .../src/views/form_validation/validation.js | 46 +- src-docs/src/views/guidelines/button.js | 337 ++++----- src-docs/src/views/guidelines/colors.js | 133 ++-- src-docs/src/views/guidelines/modals.js | 234 ++----- src-docs/src/views/guidelines/sass.js | 457 +++++++----- src-docs/src/views/guidelines/toasts.js | 218 ++---- src-docs/src/views/guidelines/writing.js | 565 +++++++-------- .../src/views/header/global_filter_add.js | 16 +- .../src/views/header/global_filter_bar.js | 62 +- .../src/views/header/global_filter_form.js | 78 ++- .../src/views/header/global_filter_item.js | 24 +- .../src/views/header/global_filter_options.js | 11 +- src-docs/src/views/header/global_query.js | 53 +- src-docs/src/views/header/header.js | 12 +- src-docs/src/views/header/header_app_menu.js | 45 +- src-docs/src/views/header/header_example.js | 153 +++-- src-docs/src/views/header/header_links.js | 14 +- .../src/views/header/header_spaces_menu.js | 25 +- src-docs/src/views/header/header_user_menu.js | 19 +- src-docs/src/views/health/health.js | 21 +- src-docs/src/views/health/health_example.js | 53 +- src-docs/src/views/highlight/highlight.js | 9 +- .../src/views/highlight/highlight_example.js | 50 +- src-docs/src/views/home/home_view.js | 44 +- .../horizontal_rule_example.js | 84 +-- src-docs/src/views/i18n/i18n_basic.js | 4 +- src-docs/src/views/i18n/i18n_example.js | 171 +++-- src-docs/src/views/i18n/i18n_multi.js | 14 +- src-docs/src/views/i18n/i18n_number.js | 6 +- src-docs/src/views/i18n/i18n_renderprop.js | 11 +- src-docs/src/views/icon/accessibility.js | 10 +- src-docs/src/views/icon/apps.js | 46 +- src-docs/src/views/icon/icon_colors.js | 78 +-- src-docs/src/views/icon/icon_example.js | 459 +++++++------ src-docs/src/views/icon/icon_sizes.js | 41 +- src-docs/src/views/icon/icon_types.js | 36 +- src-docs/src/views/icon/icons.js | 46 +- src-docs/src/views/icon/logos.js | 46 +- src-docs/src/views/icon/logos_third.js | 47 +- src-docs/src/views/icon/ml.js | 47 +- src-docs/src/views/icon/tokens.js | 96 +-- src-docs/src/views/image/image.js | 4 +- src-docs/src/views/image/image_example.js | 101 +-- src-docs/src/views/image/image_size.js | 5 +- .../src/views/is_color_dark/is_color_dark.js | 45 +- .../is_color_dark/is_color_dark_example.js | 45 +- .../src/views/key_pad_menu/key_pad_beta.js | 11 +- .../src/views/key_pad_menu/key_pad_menu.js | 20 +- .../key_pad_menu/key_pad_menu_example.js | 126 ++-- .../key_pad_menu/key_pad_menu_item_button.js | 8 +- src-docs/src/views/link/link.js | 37 +- src-docs/src/views/link/link_example.js | 54 +- src-docs/src/views/list_group/list_group.js | 35 +- .../views/list_group/list_group_example.js | 135 ++-- .../list_group/list_group_link_actions.js | 24 +- .../src/views/list_group/list_group_links.js | 24 +- src-docs/src/views/loading/loading_example.js | 164 +++-- src-docs/src/views/modal/confirm_modal.js | 35 +- src-docs/src/views/modal/modal.js | 56 +- src-docs/src/views/modal/modal_example.js | 116 ++-- src-docs/src/views/modal/overflow_test.js | 113 ++- .../mutation_observer/mutation_observer.js | 45 +- .../mutation_observer_example.js | 71 +- src-docs/src/views/nav_drawer/nav_drawer.js | 55 +- .../views/nav_drawer/nav_drawer_example.js | 82 +-- .../src/views/not_found/not_found_view.js | 21 +- .../outside_click_detector.js | 16 +- .../outside_click_detector_example.js | 60 +- src-docs/src/views/package/i18n_tokens.js | 81 ++- src-docs/src/views/page/page.js | 12 +- .../src/views/page/page_content_center.js | 7 +- .../page/page_content_center_with_side_bar.js | 15 +- src-docs/src/views/page/page_content_only.js | 6 +- src-docs/src/views/page/page_example.js | 28 +- src-docs/src/views/page/page_simple.js | 5 +- .../views/pagination/centered_pagination.js | 6 +- src-docs/src/views/pagination/compressed.js | 12 +- .../pagination/customizable_pagination.js | 89 +-- src-docs/src/views/pagination/few_pages.js | 12 +- src-docs/src/views/pagination/many_pages.js | 12 +- .../views/pagination/pagination_example.js | 184 ++--- src-docs/src/views/panel/panel.js | 14 +- src-docs/src/views/panel/panel_badge.js | 18 +- src-docs/src/views/panel/panel_example.js | 124 ++-- src-docs/src/views/panel/panel_hover.js | 4 +- src-docs/src/views/popover/popover.js | 19 +- .../views/popover/popover_anchor_position.js | 172 +++-- .../src/views/popover/popover_container.js | 24 +- src-docs/src/views/popover/popover_example.js | 399 ++++++----- src-docs/src/views/popover/popover_fixed.js | 30 +- .../popover/popover_htmlelement_anchor.js | 28 +- .../views/popover/popover_panel_class_name.js | 21 +- .../src/views/popover/popover_with_title.js | 57 +- .../popover/popover_with_title_padding.js | 70 +- src-docs/src/views/popover/trap_focus.js | 30 +- src-docs/src/views/portal/portal.js | 23 +- src-docs/src/views/portal/portal_example.js | 112 +-- src-docs/src/views/portal/portal_insert.js | 20 +- src-docs/src/views/progress/progress.js | 4 +- .../src/views/progress/progress_example.js | 203 +++--- src-docs/src/views/progress/progress_fixed.js | 40 +- .../src/views/progress/progress_size_color.js | 6 +- src-docs/src/views/progress/progress_value.js | 9 +- src-docs/src/views/range/dual_range.js | 12 +- src-docs/src/views/range/input.js | 15 +- src-docs/src/views/range/levels.js | 23 +- src-docs/src/views/range/range.js | 12 +- src-docs/src/views/range/range_example.js | 228 +++--- src-docs/src/views/range/states.js | 23 +- src-docs/src/views/range/ticks.js | 17 +- .../views/resize_observer/resize_observer.js | 50 +- .../resize_observer_example.js | 81 ++- src-docs/src/views/responsive/responsive.js | 22 +- .../views/responsive/responsive_example.js | 79 +-- .../views/search_bar/controlled_search_bar.js | 146 ++-- src-docs/src/views/search_bar/props_info.js | 327 +++++---- src-docs/src/views/search_bar/search_bar.js | 137 ++-- .../views/search_bar/search_bar_example.js | 232 ++++--- .../views/search_bar/search_bar_filters.js | 114 ++- .../selectable/selectable_custom_render.js | 31 +- .../views/selectable/selectable_example.js | 13 +- .../views/selectable/selectable_messages.js | 24 +- .../views/selectable/selectable_popover.js | 45 +- src-docs/src/views/series_chart/complex.js | 66 +- .../src/views/series_chart/crosshair_sync.js | 22 +- src-docs/src/views/series_chart/empty.js | 4 +- src-docs/src/views/series_chart/horizontal.js | 15 +- src-docs/src/views/series_chart/multi_axis.js | 47 +- .../views/series_chart/responsive_chart.js | 25 +- .../series_chart/series_chart_example.js | 41 +- src-docs/src/views/series_chart_area/area.js | 8 +- .../views/series_chart_area/area_example.js | 37 +- .../views/series_chart_area/curved_area.js | 40 +- .../src/views/series_chart_area/range_area.js | 16 +- .../views/series_chart_area/stacked_area.js | 16 +- .../series_chart_axis/series_axis_example.js | 27 +- .../views/series_chart_axis/simple_axis.js | 7 +- .../src/views/series_chart_bar/bar_example.js | 108 +-- .../series_chart_bar/horizontal_bar_series.js | 9 +- .../stacked_horizontal_bar_series.js | 8 +- .../stacked_vertical_bar_series.js | 29 +- .../src/views/series_chart_bar/time_series.js | 12 +- .../series_chart_bar/vertical_bar_series.js | 6 +- .../format_crosshair_times.js | 11 +- .../histogram_example.js | 91 +-- .../horizontal_rect_series.js | 11 +- .../stacked_horizontal_rect_series.js | 9 +- .../stacked_vertical_rect_series.js | 5 +- .../time_histogram_series.js | 16 +- .../vertical_rect_series.js | 5 +- .../views/series_chart_line/curved_line.js | 20 +- .../series_chart_line/custom_domain_line.js | 14 +- .../series_chart_line/custom_style_line.js | 13 +- src-docs/src/views/series_chart_line/line.js | 5 +- .../views/series_chart_line/line_example.js | 35 +- .../src/views/series_chart_line/multi_line.js | 16 +- src-docs/src/views/side_nav/side_nav.js | 65 +- .../src/views/side_nav/side_nav_complex.js | 17 +- .../src/views/side_nav/side_nav_example.js | 128 ++-- .../src/views/side_nav/side_nav_force_open.js | 24 +- src-docs/src/views/spacer/spacer_example.js | 69 +- src-docs/src/views/stat/stat.js | 11 +- src-docs/src/views/stat/stat_align.js | 12 +- src-docs/src/views/stat/stat_colors.js | 23 +- src-docs/src/views/stat/stat_combos.js | 20 +- src-docs/src/views/stat/stat_example.js | 288 ++++---- src-docs/src/views/stat/stat_loading.js | 16 +- src-docs/src/views/stat/stat_order.js | 12 +- src-docs/src/views/stat/stat_size.js | 24 +- .../src/views/steps/heading_element_steps.js | 23 +- src-docs/src/views/steps/status.js | 39 +- src-docs/src/views/steps/steps.js | 19 +- src-docs/src/views/steps/steps_complex.js | 38 +- src-docs/src/views/steps/steps_example.js | 208 +++--- src-docs/src/views/steps/steps_horizontal.js | 16 +- .../src/views/super_select/super_select.js | 15 +- .../views/super_select/super_select_basic.js | 11 +- .../super_select/super_select_complex.js | 25 +- .../super_select/super_select_example.js | 157 +++-- src-docs/src/views/tables/actions/actions.js | 300 ++++---- .../views/tables/actions/actions_section.js | 32 +- src-docs/src/views/tables/basic/basic.js | 112 +-- .../src/views/tables/basic/basic_section.js | 77 ++- src-docs/src/views/tables/basic/props_info.js | 261 +++---- src-docs/src/views/tables/custom/custom.js | 638 +++++++++-------- .../src/views/tables/custom/custom_section.js | 49 +- .../src/views/tables/custom/props_info.js | 74 +- src-docs/src/views/tables/data_store.js | 67 +- .../tables/expanding_rows/expanding_rows.js | 159 +++-- .../expanding_rows/expanding_rows_section.js | 21 +- src-docs/src/views/tables/footer/footer.js | 193 +++--- .../src/views/tables/footer/footer_section.js | 26 +- .../src/views/tables/in_memory/in_memory.js | 89 +-- .../in_memory/in_memory_custom_sorting.js | 29 +- .../in_memory_custom_sorting_section.js | 21 +- .../tables/in_memory/in_memory_search.js | 178 ++--- .../in_memory/in_memory_search_callback.js | 27 +- .../in_memory_search_callback_section.js | 16 +- .../in_memory/in_memory_search_section.js | 14 +- .../tables/in_memory/in_memory_section.js | 21 +- .../tables/in_memory/in_memory_selection.js | 158 +++-- .../in_memory/in_memory_selection_section.js | 16 +- .../src/views/tables/in_memory/props_info.js | 74 +- src-docs/src/views/tables/mobile/mobile.js | 186 ++--- .../src/views/tables/mobile/mobile_section.js | 35 +- .../src/views/tables/mobile/props_info.js | 25 +- .../src/views/tables/paginated/paginated.js | 167 ++--- .../tables/paginated/paginated_section.js | 15 +- .../src/views/tables/selection/selection.js | 181 +++-- .../tables/selection/selection_section.js | 15 +- src-docs/src/views/tables/sorting/sorting.js | 222 +++--- .../views/tables/sorting/sorting_section.js | 18 +- src-docs/src/views/tables/tables_example.js | 24 +- src-docs/src/views/tabs/controlled.js | 137 ++-- src-docs/src/views/tabs/tabbed_content.js | 133 ++-- src-docs/src/views/tabs/tabs.js | 3 +- src-docs/src/views/tabs/tabs_condensed.js | 3 +- src-docs/src/views/text/text.js | 58 +- src-docs/src/views/text/text_align.js | 5 +- src-docs/src/views/text/text_color.js | 31 +- src-docs/src/views/text/text_example.js | 178 ++--- src-docs/src/views/text/text_small.js | 88 +-- src-docs/src/views/text/text_width.js | 15 +- .../src/views/text_scaling/text_scaling.js | 56 +- .../text_scaling/text_scaling_sandbox.js | 39 +- src-docs/src/views/title/text.js | 45 +- src-docs/src/views/title/title.js | 5 +- src-docs/src/views/title/title_example.js | 52 +- src-docs/src/views/toast/danger.js | 14 +- src-docs/src/views/toast/default.js | 11 +- src-docs/src/views/toast/info.js | 11 +- src-docs/src/views/toast/success.js | 17 +- src-docs/src/views/toast/toast_example.js | 280 ++++---- src-docs/src/views/toast/toast_list.js | 113 ++- src-docs/src/views/toast/warning.js | 4 +- src-docs/src/views/toggle/toggle.js | 12 +- src-docs/src/views/toggle/toggle_example.js | 87 +-- src-docs/src/views/tool_tip/icon_tip.js | 8 +- src-docs/src/views/tool_tip/tool_tip.js | 43 +- .../src/views/tool_tip/tool_tip_example.js | 122 ++-- .../views/utility_classes/utility_classes.js | 117 ++-- .../utility_classes_example.js | 41 +- .../views/window_event/basic_window_event.js | 15 +- .../window_event/modal_example_container.js | 12 +- .../src/views/window_event/mouse_position.js | 31 +- .../window_event/window_event_conflict.js | 26 +- .../window_event/window_event_example.js | 108 +-- src-docs/webpack.config.js | 68 +- src/components/accordion/accordion.js | 86 +-- src/components/accordion/accordion.test.js | 49 +- src/components/accordion/index.js | 4 +- src/components/badge/badge.js | 31 +- src/components/badge/badge.test.js | 34 +- src/components/badge/beta_badge/beta_badge.js | 22 +- .../badge/beta_badge/beta_badge.test.js | 7 +- src/components/badge/beta_badge/index.js | 4 +- src/components/badge/index.js | 12 +- .../basic_table/basic_table.behavior.test.js | 53 +- src/components/basic_table/basic_table.js | 342 +++++---- .../basic_table/basic_table.test.js | 364 +++++----- .../basic_table/collapsed_item_actions.js | 39 +- .../collapsed_item_actions.test.js | 18 +- .../basic_table/custom_item_action.js | 6 +- .../basic_table/custom_item_action.test.js | 12 +- .../basic_table/default_item_action.js | 20 +- .../basic_table/default_item_action.test.js | 22 +- .../basic_table/expanded_item_actions.js | 4 +- .../basic_table/expanded_item_actions.test.js | 18 +- src/components/basic_table/in_memory_table.js | 237 ++++--- .../basic_table/in_memory_table.test.js | 435 +++++------- src/components/basic_table/index.js | 8 +- .../basic_table/loading_table_body.js | 16 +- .../basic_table/loading_table_body.test.js | 5 +- src/components/basic_table/pagination_bar.js | 18 +- .../basic_table/pagination_bar.test.js | 38 +- src/components/bottom_bar/bottom_bar.js | 12 +- src/components/bottom_bar/bottom_bar.test.js | 15 +- src/components/bottom_bar/index.js | 4 +- src/components/breadcrumbs/breadcrumbs.js | 23 +- .../breadcrumbs/breadcrumbs.test.js | 90 ++- src/components/breadcrumbs/index.js | 4 +- src/components/button/button.js | 33 +- src/components/button/button.test.js | 92 +-- .../button/button_empty/button_empty.js | 37 +- .../button/button_empty/button_empty.test.js | 67 +- src/components/button/button_empty/index.js | 6 +- .../button/button_group/button_group.js | 9 +- .../button/button_group/button_group.test.js | 3 +- src/components/button/button_group/index.js | 4 +- .../button/button_icon/button_icon.js | 15 +- .../button/button_icon/button_icon.test.js | 22 +- src/components/button/button_icon/index.js | 4 +- .../button/button_toggle/button_toggle.js | 10 +- .../button_toggle/button_toggle.test.js | 3 +- src/components/button/button_toggle/index.js | 4 +- src/components/button/index.js | 21 +- src/components/call_out/call_out.js | 32 +- src/components/call_out/call_out.test.js | 28 +- src/components/card/card.js | 60 +- src/components/card/card.test.js | 56 +- src/components/card/card_select.js | 18 +- src/components/card/card_select.test.js | 45 +- src/components/card/index.js | 8 +- src/components/code/_code_block.js | 70 +- src/components/code/code.js | 13 +- src/components/code/code.test.js | 6 +- src/components/code/code_block.js | 13 +- src/components/code/code_block.test.js | 4 +- src/components/code/index.js | 12 +- src/components/code_editor/code_editor.js | 96 ++- .../code_editor/code_editor.test.js | 24 +- src/components/color_picker/color_picker.js | 59 +- .../color_picker/color_picker.test.js | 40 +- src/components/combo_box/combo_box.js | 195 ++++-- src/components/combo_box/combo_box.test.js | 117 ++-- .../combo_box_input/combo_box_input.js | 39 +- .../combo_box_input/combo_box_pill.js | 9 +- .../combo_box/combo_box_input/index.js | 4 +- .../combo_box_option.js | 27 +- .../combo_box_options_list.js | 78 ++- .../combo_box/combo_box_options_list/index.js | 4 +- src/components/combo_box/index.js | 4 +- src/components/context_menu/context_menu.js | 82 ++- .../context_menu/context_menu.test.js | 82 +-- .../context_menu/context_menu_item.js | 43 +- .../context_menu/context_menu_item.test.js | 19 +- .../context_menu/context_menu_panel.js | 90 +-- .../context_menu/context_menu_panel.test.js | 190 ++--- src/components/context_menu/index.js | 12 +- src/components/copy/copy.js | 12 +- src/components/copy/index.js | 4 +- src/components/date_picker/date_picker.js | 36 +- .../date_picker/date_picker.test.js | 7 +- .../date_picker/date_picker_range.js | 36 +- .../date_picker/date_picker_range.test.js | 3 +- src/components/date_picker/index.js | 13 +- .../super_date_picker/date_modes.js | 7 +- .../date_popover/absolute_tab.js | 21 +- .../date_popover/date_popover_button.js | 10 +- .../date_popover/date_popover_content.js | 23 +- .../date_popover/relative_tab.js | 62 +- .../date_picker/super_date_picker/index.js | 8 +- .../super_date_picker/pretty_duration.js | 28 +- .../super_date_picker/pretty_duration.test.js | 35 +- .../commonly_used_time_ranges.js | 11 +- .../quick_select_popover/quick_select.js | 57 +- .../quick_select_popover/quick_select.test.js | 16 +- .../quick_select_popover.js | 45 +- .../quick_select_popover.test.js | 31 +- .../quick_select_popover/recently_used.js | 14 +- .../quick_select_popover/refresh_interval.js | 49 +- .../super_date_picker/relative_utils.js | 4 +- .../super_date_picker/relative_utils.test.js | 53 +- .../super_date_picker/super_date_picker.js | 169 ++--- .../super_date_picker.test.js | 13 +- .../super_date_picker/super_update_button.js | 20 +- .../super_update_button.test.js | 37 +- .../super_date_picker/time_units.js | 5 +- src/components/empty_prompt/empty_prompt.js | 22 +- .../empty_prompt/empty_prompt.test.js | 4 +- src/components/empty_prompt/index.js | 4 +- .../error_boundary/error_boundary.js | 21 +- .../error_boundary/error_boundary.test.js | 24 +- src/components/error_boundary/index.js | 4 +- src/components/facet/facet_button.js | 33 +- src/components/facet/facet_button.test.js | 22 +- src/components/facet/facet_group.js | 10 +- src/components/facet/facet_group.test.js | 14 +- src/components/facet/index.js | 8 +- src/components/filter_group/filter_button.js | 54 +- .../filter_group/filter_button.test.js | 55 +- .../filter_group/filter_select_item.js | 10 +- .../filter_group/filter_select_item.test.js | 7 +- src/components/filter_group/index.js | 12 +- src/components/flyout/flyout.js | 14 +- src/components/flyout/flyout.test.js | 69 +- src/components/flyout/index.js | 17 +- src/components/focus_trap/focus_trap.js | 72 +- src/components/focus_trap/focus_trap.test.js | 58 +- src/components/focus_trap/index.js | 4 +- src/components/form/checkbox/checkbox.js | 15 +- src/components/form/checkbox/checkbox.test.js | 56 +- .../checkbox/checkbox_group.behavior.test.js | 4 +- .../form/checkbox/checkbox_group.js | 4 +- .../form/checkbox/checkbox_group.test.js | 27 +- .../described_form_group.js | 30 +- .../described_form_group.test.js | 48 +- .../form/field_number/field_number.js | 23 +- .../form/field_number/field_number.test.js | 52 +- .../form/field_password/field_password.js | 11 +- .../field_password/field_password.test.js | 44 +- .../form/field_search/field_search.js | 26 +- .../form/field_search/field_search.test.js | 44 +- src/components/form/field_text/field_text.js | 15 +- .../form/field_text/field_text.test.js | 35 +- .../form/file_picker/file_picker.js | 43 +- .../form/file_picker/file_picker.test.js | 7 +- src/components/form/file_picker/index.js | 4 +- src/components/form/form.js | 25 +- src/components/form/form.test.js | 7 +- .../form_control_layout.js | 19 +- .../form_control_layout.test.js | 69 +- .../form_control_layout_clear_button.js | 7 +- .../form_control_layout_custom_icon.js | 19 +- .../form_control_layout_icons.js | 30 +- .../form/form_control_layout/index.js | 5 +- src/components/form/form_row/form_row.js | 47 +- src/components/form/form_row/form_row.test.js | 114 ++- src/components/form/index.js | 15 +- src/components/form/radio/index.js | 8 +- src/components/form/radio/radio.js | 10 +- src/components/form/radio/radio.test.js | 23 +- src/components/form/radio/radio_group.js | 7 +- src/components/form/radio/radio_group.test.js | 27 +- src/components/form/range/dual_range.js | 124 ++-- src/components/form/range/dual_range.test.js | 81 +-- src/components/form/range/range.js | 41 +- src/components/form/range/range.test.js | 87 +-- src/components/form/range/range_highlight.js | 17 +- src/components/form/range/range_input.js | 7 +- src/components/form/range/range_label.js | 12 +- src/components/form/range/range_levels.js | 22 +- .../form/range/range_levels.test.js | 63 +- src/components/form/range/range_slider.js | 95 +-- src/components/form/range/range_thumb.js | 21 +- src/components/form/range/range_ticks.js | 8 +- src/components/form/range/range_tooltip.js | 25 +- src/components/form/range/range_track.js | 61 +- src/components/form/range/range_track.test.js | 93 +-- src/components/form/range/range_wrapper.js | 17 +- src/components/form/select/select.js | 38 +- src/components/form/select/select.test.js | 53 +- src/components/form/super_select/index.js | 8 +- .../form/super_select/super_select.js | 43 +- .../form/super_select/super_select.test.js | 57 +- .../form/super_select/super_select_control.js | 22 +- .../super_select/super_select_control.test.js | 50 +- src/components/form/switch/switch.js | 21 +- src/components/form/switch/switch.test.js | 14 +- src/components/form/text_area/text_area.js | 7 +- .../form/text_area/text_area.test.js | 7 +- src/components/header/header.js | 5 +- src/components/header/header.test.js | 10 +- .../header/header_alert/header_alert.js | 22 +- .../header/header_alert/header_alert.test.js | 42 +- src/components/header/header_alert/index.js | 4 +- .../header_breadcrumbs/header_breadcrumbs.js | 8 +- .../header_breadcrumbs.test.js | 41 +- .../header/header_breadcrumbs/index.js | 4 +- .../header/header_links/header_link.js | 5 +- .../header/header_links/header_link.test.js | 7 +- .../header/header_links/header_links.js | 34 +- .../header/header_links/header_links.test.js | 7 +- src/components/header/header_links/index.js | 8 +- .../header/header_section/header_section.js | 8 +- .../header_section/header_section.test.js | 42 +- .../header_section/header_section_item.js | 18 +- .../header_section_item.test.js | 24 +- .../header_section_item_button.js | 7 +- .../header_section_item_button.test.js | 14 +- src/components/header/header_section/index.js | 12 +- src/components/header/index.js | 21 +- src/components/health/health.js | 31 +- src/components/health/health.test.js | 7 +- src/components/health/index.js | 4 +- src/components/highlight/highlight.js | 19 +- src/components/highlight/highlight.test.js | 8 +- src/components/highlight/index.js | 4 +- src/components/icon/assets/alert.js | 18 +- src/components/icon/assets/apm_trace.js | 21 +- src/components/icon/assets/app_add_data.js | 19 +- .../icon/assets/app_advanced_settings.js | 29 +- src/components/icon/assets/app_apm.js | 17 +- src/components/icon/assets/app_auditbeat.js | 16 +- src/components/icon/assets/app_canvas.js | 19 +- src/components/icon/assets/app_code.js | 19 +- src/components/icon/assets/app_console.js | 20 +- .../assets/app_cross_cluster_replication.js | 19 +- src/components/icon/assets/app_dashboard.js | 24 +- src/components/icon/assets/app_devtools.js | 16 +- src/components/icon/assets/app_discover.js | 19 +- src/components/icon/assets/app_ems.js | 16 +- src/components/icon/assets/app_filebeat.js | 19 +- src/components/icon/assets/app_gis.js | 19 +- src/components/icon/assets/app_graph.js | 19 +- src/components/icon/assets/app_grok.js | 19 +- src/components/icon/assets/app_heartbeat.js | 19 +- .../icon/assets/app_index_management.js | 20 +- .../icon/assets/app_index_pattern.js | 19 +- .../icon/assets/app_index_rollup.js | 21 +- src/components/icon/assets/app_infra.js | 20 +- src/components/icon/assets/app_logging.js | 19 +- src/components/icon/assets/app_management.js | 19 +- src/components/icon/assets/app_metricbeat.js | 20 +- src/components/icon/assets/app_ml.js | 19 +- src/components/icon/assets/app_monitoring.js | 19 +- src/components/icon/assets/app_notebook.js | 17 +- src/components/icon/assets/app_packetbeat.js | 19 +- src/components/icon/assets/app_pipeline.js | 16 +- src/components/icon/assets/app_reporting.js | 20 +- .../icon/assets/app_saved_objects.js | 19 +- .../icon/assets/app_search_profiler.js | 19 +- src/components/icon/assets/app_security.js | 19 +- .../icon/assets/app_security_analytics.js | 19 +- src/components/icon/assets/app_spaces.js | 20 +- src/components/icon/assets/app_sql.js | 19 +- src/components/icon/assets/app_timelion.js | 16 +- .../icon/assets/app_upgrade_assistant.js | 19 +- src/components/icon/assets/app_uptime.js | 19 +- src/components/icon/assets/app_users_roles.js | 19 +- src/components/icon/assets/app_visualize.js | 20 +- src/components/icon/assets/app_watches.js | 21 +- src/components/icon/assets/apps.js | 21 +- src/components/icon/assets/arrow_down.js | 21 +- src/components/icon/assets/arrow_left.js | 25 +- src/components/icon/assets/arrow_right.js | 25 +- src/components/icon/assets/arrow_up.js | 25 +- src/components/icon/assets/asterisk.js | 15 +- src/components/icon/assets/beaker.js | 15 +- src/components/icon/assets/bell.js | 18 +- src/components/icon/assets/bolt.js | 15 +- .../icon/assets/boxes_horizontal.js | 21 +- src/components/icon/assets/boxes_vertical.js | 21 +- src/components/icon/assets/branch.js | 15 +- src/components/icon/assets/broom.js | 15 +- src/components/icon/assets/brush.js | 21 +- src/components/icon/assets/bug.js | 15 +- src/components/icon/assets/bullseye.js | 15 +- src/components/icon/assets/calendar.js | 18 +- src/components/icon/assets/check.js | 18 +- .../icon/assets/checkInCircleFilled.js | 18 +- src/components/icon/assets/clock.js | 18 +- src/components/icon/assets/compute.js | 16 +- src/components/icon/assets/console.js | 21 +- .../icon/assets/controls_horizontal.js | 18 +- .../icon/assets/controls_vertical.js | 18 +- src/components/icon/assets/copy.js | 22 +- src/components/icon/assets/copy_clipboard.js | 16 +- src/components/icon/assets/cross.js | 15 +- .../icon/assets/crossInACircleFilled.js | 15 +- src/components/icon/assets/crosshairs.js | 15 +- src/components/icon/assets/cut.js | 18 +- src/components/icon/assets/database.js | 15 +- src/components/icon/assets/document.js | 21 +- src/components/icon/assets/dot.js | 18 +- .../icon/assets/editor_align_center.js | 21 +- .../icon/assets/editor_align_left.js | 21 +- .../icon/assets/editor_align_right.js | 21 +- src/components/icon/assets/editor_bold.js | 21 +- .../icon/assets/editor_code_block.js | 15 +- src/components/icon/assets/editor_comment.js | 21 +- src/components/icon/assets/editor_heading.js | 21 +- src/components/icon/assets/editor_italic.js | 21 +- src/components/icon/assets/editor_link.js | 21 +- .../icon/assets/editor_ordered_list.js | 21 +- src/components/icon/assets/editor_redo.js | 15 +- src/components/icon/assets/editor_strike.js | 21 +- src/components/icon/assets/editor_table.js | 21 +- .../icon/assets/editor_underline.js | 15 +- src/components/icon/assets/editor_undo.js | 15 +- .../icon/assets/editor_unordered_list.js | 21 +- src/components/icon/assets/email.js | 21 +- src/components/icon/assets/empty.js | 14 +- src/components/icon/assets/exit.js | 18 +- src/components/icon/assets/expand.js | 18 +- src/components/icon/assets/export.js | 15 +- src/components/icon/assets/eye.js | 15 +- src/components/icon/assets/eye_closed.js | 15 +- src/components/icon/assets/faceNeutral.js | 18 +- src/components/icon/assets/face_happy.js | 15 +- src/components/icon/assets/face_neutral.js | 23 +- src/components/icon/assets/face_sad.js | 15 +- src/components/icon/assets/filter.js | 18 +- src/components/icon/assets/flag.js | 15 +- src/components/icon/assets/folder_closed.js | 15 +- src/components/icon/assets/folder_open.js | 15 +- src/components/icon/assets/full_screen.js | 21 +- src/components/icon/assets/gear.js | 21 +- src/components/icon/assets/glasses.js | 15 +- src/components/icon/assets/globe.js | 15 +- src/components/icon/assets/grab.js | 18 +- src/components/icon/assets/grab_horizontal.js | 18 +- src/components/icon/assets/grid.js | 21 +- src/components/icon/assets/heart.js | 15 +- src/components/icon/assets/heatmap.js | 15 +- src/components/icon/assets/help.js | 21 +- src/components/icon/assets/iInCircle.js | 18 +- src/components/icon/assets/import.js | 15 +- src/components/icon/assets/index_close.js | 15 +- src/components/icon/assets/index_edit.js | 15 +- src/components/icon/assets/index_flush.js | 18 +- src/components/icon/assets/index_mapping.js | 15 +- src/components/icon/assets/index_open.js | 15 +- src/components/icon/assets/index_settings.js | 17 +- src/components/icon/assets/inputOutput.js | 17 +- src/components/icon/assets/inspect.js | 15 +- src/components/icon/assets/invert.js | 16 +- src/components/icon/assets/kql_field.js | 15 +- src/components/icon/assets/kql_function.js | 15 +- src/components/icon/assets/kql_operand.js | 15 +- src/components/icon/assets/kql_selector.js | 15 +- src/components/icon/assets/kql_value.js | 15 +- src/components/icon/assets/link.js | 15 +- src/components/icon/assets/list.js | 15 +- src/components/icon/assets/list_add.js | 15 +- src/components/icon/assets/lock.js | 15 +- src/components/icon/assets/lockOpen.js | 15 +- src/components/icon/assets/logo_aerospike.js | 21 +- src/components/icon/assets/logo_apache.js | 129 +++- src/components/icon/assets/logo_apm.js | 20 +- src/components/icon/assets/logo_app_search.js | 26 +- src/components/icon/assets/logo_aws.js | 25 +- src/components/icon/assets/logo_aws_mono.js | 22 +- src/components/icon/assets/logo_azure.js | 18 +- src/components/icon/assets/logo_azure_mono.js | 15 +- src/components/icon/assets/logo_beats.js | 26 +- .../icon/assets/logo_business_analytics.js | 28 +- src/components/icon/assets/logo_ceph.js | 21 +- src/components/icon/assets/logo_cloud.js | 28 +- src/components/icon/assets/logo_cloud_ece.js | 32 +- .../icon/assets/logo_codesandbox.js | 15 +- src/components/icon/assets/logo_couchbase.js | 18 +- src/components/icon/assets/logo_docker.js | 14 +- src/components/icon/assets/logo_dropwizard.js | 22 +- src/components/icon/assets/logo_elastic.js | 40 +- .../icon/assets/logo_elastic_stack.js | 23 +- .../icon/assets/logo_elasticsearch.js | 28 +- .../icon/assets/logo_enterprise_search.js | 28 +- src/components/icon/assets/logo_etcd.js | 18 +- src/components/icon/assets/logo_gcp.js | 54 +- src/components/icon/assets/logo_gcp_mono.js | 16 +- src/components/icon/assets/logo_github.js | 15 +- src/components/icon/assets/logo_gmail.js | 44 +- src/components/icon/assets/logo_golang.js | 22 +- src/components/icon/assets/logo_haproxy.js | 21 +- src/components/icon/assets/logo_ibm.js | 97 ++- src/components/icon/assets/logo_ibm_mono.js | 18 +- src/components/icon/assets/logo_kafka.js | 15 +- src/components/icon/assets/logo_kibana.js | 25 +- src/components/icon/assets/logo_kubernetes.js | 13 +- src/components/icon/assets/logo_logstash.js | 20 +- src/components/icon/assets/logo_memcached.js | 77 ++- src/components/icon/assets/logo_metrics.js | 28 +- src/components/icon/assets/logo_mongodb.js | 40 +- src/components/icon/assets/logo_mysql.js | 18 +- src/components/icon/assets/logo_nginx.js | 22 +- src/components/icon/assets/logo_osquery.js | 36 +- src/components/icon/assets/logo_php.js | 84 ++- src/components/icon/assets/logo_postgres.js | 32 +- src/components/icon/assets/logo_prometheus.js | 18 +- src/components/icon/assets/logo_rabbitmq.js | 18 +- src/components/icon/assets/logo_redis.js | 42 +- .../icon/assets/logo_site_search.js | 28 +- src/components/icon/assets/logo_sketch.js | 31 +- src/components/icon/assets/logo_slack.js | 17 +- src/components/icon/assets/logo_webhook.js | 28 +- src/components/icon/assets/logo_windows.js | 18 +- src/components/icon/assets/logo_xpack.js | 40 +- src/components/icon/assets/logstash_filter.js | 15 +- src/components/icon/assets/logstash_if.js | 15 +- src/components/icon/assets/logstash_input.js | 15 +- src/components/icon/assets/logstash_output.js | 15 +- src/components/icon/assets/logstash_queue.js | 15 +- src/components/icon/assets/map_marker.js | 21 +- src/components/icon/assets/memory.js | 16 +- src/components/icon/assets/menuLeft.js | 18 +- src/components/icon/assets/menuRight.js | 15 +- src/components/icon/assets/merge.js | 15 +- src/components/icon/assets/minus_in_circle.js | 18 +- .../icon/assets/minus_in_circle_filled.js | 18 +- .../icon/assets/ml_create_advanced_job.js | 19 +- .../icon/assets/ml_create_multi_metric_job.js | 19 +- .../icon/assets/ml_create_population_job.js | 19 +- .../assets/ml_create_single_metric_job.js | 19 +- .../icon/assets/ml_data_visualizer.js | 19 +- src/components/icon/assets/moon.js | 15 +- src/components/icon/assets/node.js | 15 +- src/components/icon/assets/number.js | 18 +- src/components/icon/assets/offline.js | 15 +- src/components/icon/assets/online.js | 15 +- src/components/icon/assets/paint.js | 21 +- src/components/icon/assets/pause.js | 18 +- src/components/icon/assets/pencil.js | 21 +- src/components/icon/assets/pin.js | 18 +- src/components/icon/assets/pin_filled.js | 15 +- src/components/icon/assets/play.js | 15 +- src/components/icon/assets/plus_in_circle.js | 18 +- .../icon/assets/plus_in_circle_filled.js | 15 +- src/components/icon/assets/popout.js | 18 +- .../icon/assets/question_in_circle.js | 15 +- src/components/icon/assets/refresh.js | 15 +- src/components/icon/assets/save.js | 15 +- src/components/icon/assets/scale.js | 18 +- src/components/icon/assets/search.js | 21 +- src/components/icon/assets/shard.js | 15 +- src/components/icon/assets/share.js | 15 +- src/components/icon/assets/snowflake.js | 18 +- src/components/icon/assets/sortLeft.js | 18 +- src/components/icon/assets/sortRight.js | 15 +- src/components/icon/assets/sort_down.js | 15 +- src/components/icon/assets/sort_up.js | 15 +- src/components/icon/assets/sortable.js | 15 +- src/components/icon/assets/starPlusEmpty.js | 18 +- src/components/icon/assets/starPlusFilled.js | 18 +- src/components/icon/assets/star_empty.js | 18 +- .../icon/assets/star_empty_space.js | 18 +- src/components/icon/assets/star_filled.js | 18 +- .../icon/assets/star_filled_space.js | 18 +- .../icon/assets/star_minus_empty.js | 18 +- .../icon/assets/star_minus_filled.js | 18 +- src/components/icon/assets/stats.js | 18 +- src/components/icon/assets/stop.js | 18 +- src/components/icon/assets/stop_filled.js | 15 +- src/components/icon/assets/storage.js | 23 +- src/components/icon/assets/string.js | 18 +- src/components/icon/assets/submodule.js | 19 +- src/components/icon/assets/symlink.js | 19 +- src/components/icon/assets/tableOfContents.js | 15 +- src/components/icon/assets/tag.js | 15 +- src/components/icon/assets/tear.js | 21 +- src/components/icon/assets/temperature.js | 16 +- .../icon/assets/tokens/tokenAnnotation.js | 18 +- .../icon/assets/tokens/tokenArray.js | 18 +- .../icon/assets/tokens/tokenBoolean.js | 15 +- .../icon/assets/tokens/tokenClass.js | 18 +- .../icon/assets/tokens/tokenConstant.js | 18 +- .../icon/assets/tokens/tokenElement.js | 18 +- .../icon/assets/tokens/tokenEnum.js | 18 +- .../icon/assets/tokens/tokenEnumMember.js | 18 +- .../icon/assets/tokens/tokenEvent.js | 18 +- .../icon/assets/tokens/tokenException.js | 15 +- .../icon/assets/tokens/tokenField.js | 18 +- .../icon/assets/tokens/tokenFile.js | 15 +- .../icon/assets/tokens/tokenFunction.js | 18 +- .../icon/assets/tokens/tokenInterface.js | 18 +- src/components/icon/assets/tokens/tokenKey.js | 18 +- .../icon/assets/tokens/tokenMethod.js | 18 +- .../icon/assets/tokens/tokenModule.js | 16 +- .../icon/assets/tokens/tokenNamespace.js | 15 +- .../icon/assets/tokens/tokenNull.js | 15 +- .../icon/assets/tokens/tokenNumber.js | 15 +- .../icon/assets/tokens/tokenObject.js | 18 +- .../icon/assets/tokens/tokenOperator.js | 18 +- .../icon/assets/tokens/tokenPackage.js | 18 +- .../icon/assets/tokens/tokenParameter.js | 18 +- .../icon/assets/tokens/tokenProperty.js | 18 +- .../icon/assets/tokens/tokenRepo.js | 18 +- .../icon/assets/tokens/tokenString.js | 15 +- .../icon/assets/tokens/tokenStruct.js | 18 +- .../icon/assets/tokens/tokenSymbol.js | 15 +- .../icon/assets/tokens/tokenVariable.js | 18 +- src/components/icon/assets/trash.js | 21 +- src/components/icon/assets/user.js | 18 +- src/components/icon/assets/vector.js | 15 +- src/components/icon/assets/vis_area.js | 15 +- .../icon/assets/vis_bar_horizontal.js | 15 +- .../icon/assets/vis_bar_vertical.js | 15 +- src/components/icon/assets/vis_controls.js | 21 +- src/components/icon/assets/vis_gauge.js | 15 +- src/components/icon/assets/vis_goal.js | 15 +- src/components/icon/assets/vis_heatmap.js | 15 +- src/components/icon/assets/vis_line.js | 15 +- .../icon/assets/vis_map_coordinate.js | 15 +- src/components/icon/assets/vis_map_region.js | 15 +- src/components/icon/assets/vis_metric.js | 15 +- src/components/icon/assets/vis_pie.js | 15 +- src/components/icon/assets/vis_table.js | 15 +- src/components/icon/assets/vis_tag_cloud.js | 15 +- src/components/icon/assets/vis_text.js | 15 +- src/components/icon/assets/vis_timelion.js | 15 +- src/components/icon/assets/vis_vega.js | 15 +- .../icon/assets/vis_visual_builder.js | 15 +- src/components/icon/assets/wrench.js | 15 +- src/components/image/image.js | 38 +- src/components/image/image.test.js | 3 +- src/components/image/index.js | 4 +- src/components/index.js | 234 ++----- src/components/key_pad_menu/index.js | 4 +- src/components/key_pad_menu/key_pad_menu.js | 6 +- .../key_pad_menu/key_pad_menu.test.js | 7 +- .../key_pad_menu/key_pad_menu_item.js | 96 ++- .../key_pad_menu/key_pad_menu_item.test.js | 9 +- src/components/link/index.js | 4 +- src/components/link/link.js | 26 +- src/components/link/link.test.js | 67 +- src/components/list_group/index.js | 8 +- src/components/list_group/list_group.js | 37 +- src/components/list_group/list_group.test.js | 7 +- src/components/list_group/list_group_item.js | 52 +- .../list_group/list_group_item.test.js | 49 +- src/components/modal/confirm_modal.js | 39 +- src/components/modal/confirm_modal.test.js | 21 +- src/components/modal/modal.js | 19 +- src/components/modal/modal.test.js | 9 +- src/components/nav_drawer/index.js | 12 +- src/components/nav_drawer/nav_drawer.js | 62 +- .../nav_drawer/nav_drawer_flyout.js | 25 +- src/components/nav_drawer/nav_drawer_group.js | 82 ++- .../mutation_observer/mutation_observer.js | 5 +- .../mutation_observer.test.js | 12 +- src/components/observer/observer.js | 6 +- .../resize_observer/resize_observer.js | 17 +- .../resize_observer/resize_observer.test.js | 23 +- .../outside_click_detector/index.js | 4 +- .../outside_click_detector.js | 39 +- .../outside_click_detector.test.js | 10 +- src/components/page/index.js | 17 +- src/components/page/page.js | 23 +- src/components/page/page.test.js | 12 +- src/components/page/page_body/page_body.js | 18 +- .../page/page_body/page_body.test.js | 12 +- .../page/page_content/page_content.js | 14 +- .../page/page_content/page_content.test.js | 7 +- .../page/page_content/page_content_body.js | 5 +- .../page_content/page_content_body.test.js | 7 +- .../page/page_content/page_content_header.js | 14 +- .../page_content/page_content_header.test.js | 7 +- .../page_content_header_section.js | 11 +- .../page_content_header_section.test.js | 3 +- .../page/page_header/page_header.js | 7 +- .../page/page_header/page_header.test.js | 7 +- .../page/page_header/page_header_section.js | 5 +- .../page_header/page_header_section.test.js | 7 +- .../page/page_side_bar/page_side_bar.js | 5 +- .../page/page_side_bar/page_side_bar.test.js | 7 +- src/components/pagination/index.js | 8 +- src/components/pagination/pagination.js | 51 +- src/components/pagination/pagination.test.js | 8 +- .../pagination/pagination_button.js | 7 +- .../pagination/pagination_button.test.js | 7 +- src/components/panel/index.js | 5 +- src/components/panel/panel.js | 4 +- src/components/panel/panel.test.js | 7 +- src/components/popover/popover.js | 183 ++--- src/components/popover/popover.test.js | 60 +- src/components/popover/wrapping_popover.js | 22 +- src/components/responsive/hide_from.js | 21 +- src/components/responsive/hide_from.test.js | 3 +- src/components/responsive/index.js | 8 +- src/components/responsive/show_for.js | 21 +- src/components/responsive/show_for.test.js | 3 +- .../filters/field_value_selection_filter.js | 222 +++--- .../field_value_selection_filter.test.js | 140 ++-- .../filters/field_value_toggle_filter.js | 27 +- .../filters/field_value_toggle_filter.test.js | 38 +- .../field_value_toggle_group_filter.js | 25 +- .../field_value_toggle_group_filter.test.js | 62 +- src/components/search_bar/filters/filters.js | 13 +- src/components/search_bar/filters/index.js | 5 +- .../search_bar/filters/is_filter.js | 21 +- .../search_bar/filters/is_filter.test.js | 12 +- src/components/search_bar/query/ast.js | 248 +++++-- .../search_bar/query/ast_to_es_query_dsl.js | 219 +++--- .../query/ast_to_es_query_dsl.test.js | 162 +++-- .../query/ast_to_es_query_string.js | 44 +- .../query/ast_to_es_query_string.test.js | 164 +++-- .../search_bar/query/date_format.js | 226 +++--- .../search_bar/query/date_format.test.js | 31 +- src/components/search_bar/query/date_value.js | 26 +- .../search_bar/query/date_value.test.js | 3 - .../search_bar/query/default_syntax.js | 115 +++- .../search_bar/query/default_syntax.test.js | 129 ++-- .../search_bar/query/execute_ast.js | 38 +- .../search_bar/query/execute_ast.test.js | 332 +++++---- src/components/search_bar/query/index.js | 4 +- src/components/search_bar/query/operators.js | 48 +- .../search_bar/query/operators.test.js | 7 +- src/components/search_bar/query/query.js | 2 - src/components/search_bar/search_bar.js | 45 +- src/components/search_bar/search_bar.test.js | 35 +- src/components/search_bar/search_box.js | 20 +- src/components/search_bar/search_box.test.js | 16 +- src/components/search_bar/search_filters.js | 11 +- .../search_bar/search_filters.test.js | 23 +- .../series_chart/axis/default_axis.js | 19 +- .../series_chart/axis/default_axis.test.js | 21 +- .../series_chart/axis/horizontal_grid.js | 6 +- .../series_chart/axis/horizontal_grid.test.js | 10 +- .../series_chart/axis/vertical_grid.js | 6 +- .../series_chart/axis/vertical_grid.test.js | 10 +- src/components/series_chart/axis/x_axis.js | 6 +- .../series_chart/axis/x_axis.test.js | 5 +- src/components/series_chart/axis/y_axis.js | 6 +- .../series_chart/axis/y_axis.test.js | 5 +- .../series_chart/crosshairs/crosshair_x.js | 54 +- .../crosshairs/crosshair_x.test.js | 73 +- .../series_chart/crosshairs/crosshair_y.js | 99 +-- .../crosshairs/crosshair_y.test.js | 75 +- src/components/series_chart/legend.js | 69 +- src/components/series_chart/legend_item.js | 26 +- .../series_chart/line_annotation.js | 57 +- .../series_chart/selection_brush.js | 43 +- .../series_chart/selection_brush.test.js | 396 ++++++++--- .../series_chart/series/area_series.js | 19 +- .../series_chart/series/area_series.test.js | 40 +- .../series_chart/series/bar_series.js | 46 +- .../series_chart/series/histogram_series.js | 47 +- .../series/horizontal_bar_series.js | 23 +- .../series/horizontal_bar_series.test.js | 17 +- .../series/horizontal_rect_series.js | 22 +- .../series/horizontal_rect_series.test.js | 17 +- .../series_chart/series/line_series.js | 16 +- .../series_chart/series/line_series.test.js | 41 +- .../series/vertical_bar_series.js | 21 +- .../series/vertical_bar_series.test.js | 41 +- .../series/vertical_rect_series.js | 22 +- .../series/vertical_rect_series.test.js | 41 +- src/components/series_chart/series_chart.js | 29 +- .../series_chart/series_chart.test.js | 76 +- src/components/series_chart/status-text.js | 15 +- src/components/series_chart/tooltip.js | 2 +- .../series_chart/utils/chart_utils.js | 5 +- src/components/series_chart/utils/flexible.js | 10 +- .../series_chart/utils/series_utils.js | 5 +- .../series_chart/utils/text_utils.js | 2 +- .../utils/visualization_color_type.js | 9 +- src/components/side_nav/side_nav.js | 50 +- src/components/side_nav/side_nav.test.js | 278 ++++---- src/components/side_nav/side_nav_item.js | 42 +- src/components/side_nav/side_nav_item.test.js | 12 +- src/components/steps/index.js | 16 +- src/components/steps/step.js | 47 +- src/components/steps/step.test.js | 3 +- src/components/steps/step_horizontal.js | 36 +- src/components/steps/step_horizontal.test.js | 11 +- src/components/steps/step_number.js | 39 +- src/components/steps/step_number.test.js | 23 +- src/components/steps/steps.js | 22 +- src/components/steps/steps.test.js | 17 +- src/components/steps/steps_horizontal.js | 28 +- src/components/steps/steps_horizontal.test.js | 3 +- src/components/steps/sub_steps.js | 11 +- src/components/steps/sub_steps.test.js | 7 +- src/components/table/mobile/index.js | 12 +- .../table/mobile/table_sort_mobile.js | 59 +- .../table/mobile/table_sort_mobile.test.js | 7 +- .../table/mobile/table_sort_mobile_item.js | 9 +- .../mobile/table_sort_mobile_item.test.js | 7 +- src/components/table/table.js | 7 +- src/components/table/table.test.js | 8 +- src/components/table/table_body.js | 2 +- src/components/table/table_footer.test.js | 4 +- src/components/table/table_footer_cell.js | 14 +- .../table/table_footer_cell.test.js | 21 +- src/components/table/table_header.js | 2 +- src/components/table/table_header.test.js | 4 +- src/components/table/table_header_button.js | 11 +- .../table/table_header_button.test.js | 7 +- src/components/table/table_header_cell.js | 31 +- .../table/table_header_cell.test.js | 25 +- .../table/table_header_cell_checkbox.js | 6 +- .../table/table_header_cell_checkbox.test.js | 7 +- .../table_pagination/table_pagination.js | 39 +- .../table_pagination/table_pagination.test.js | 14 +- src/components/table/table_row.js | 6 +- src/components/table/table_row.test.js | 8 +- src/components/table/table_row_cell.js | 67 +- src/components/table/table_row_cell.test.js | 43 +- .../table/table_row_cell_checkbox.js | 12 +- .../table/table_row_cell_checkbox.test.js | 7 +- src/components/tabs/tab.js | 7 +- src/components/tabs/tab.test.js | 20 +- src/components/tabs/tabbed_content/index.js | 4 +- .../tabs/tabbed_content/tabbed_content.js | 3 +- src/components/toast/global_toast_list.js | 106 +-- .../toast/global_toast_list.test.js | 76 +- src/components/toast/index.js | 12 +- src/components/toast/toast.js | 48 +- src/components/toast/toast.test.js | 17 +- src/components/token/index.js | 2 +- src/components/token/token.js | 20 +- src/components/token/token.test.js | 38 +- src/components/tool_tip/icon_tip.js | 18 +- src/components/tool_tip/icon_tip.test.js | 12 +- src/components/tool_tip/index.js | 8 +- src/components/tool_tip/tool_tip.js | 65 +- src/components/tool_tip/tool_tip.test.js | 3 +- src/utils/prop_types/is.js | 7 +- src/utils/prop_types/with_required_prop.js | 9 +- .../prop_types/with_required_prop.test.js | 22 +- src/webpack.config.js | 52 +- yarn.lock | 46 +- 1172 files changed, 26742 insertions(+), 22309 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.js delete mode 100644 .eslintrc.json diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000000..8357fcaaed4 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +es diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000000..8773f073887 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,31 @@ +module.exports = { + settings: { + "import/resolver": { + node: { + extensions: [".js"] + }, + webpack: { + config: "./src-docs/webpack.config.js" + } + } + }, + extends: [ + "@elastic/eslint-config-kibana", + // Prettier options need to come last, in order to override other style + // rules. + "prettier/react", + "prettier/standard", + "plugin:prettier/recommended" + ], + plugins: [ + "prettier", + "local" + ], + rules: { + "prefer-template": "error", + "local/i18n": "error" + }, + env: { + jest: true + } +}; diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 8ad8598db09..00000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "settings": { - "import/resolver": { - "node": { - "extensions": [".js"] - }, - "webpack": { - "config": "./src-docs/webpack.config.js" - } - } - }, - "extends": [ - "prettier", - "@elastic/eslint-config-kibana" - ], - "plugins": [ - "prettier", - "local" - ], - "rules": { - "prefer-template": "error", - "local/i18n": "error" - }, - "env": { - "jest": true - } -} diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f13ba87a24..781d10c2f57 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Converted `pretty_interval` to TS ([#1920](https://github.com/elastic/eui/pull/1920)) - Converted `relative_options` to TS ([#1921](https://github.com/elastic/eui/pull/1921)) - Added width to `EuiFlexItem` when gutter in `EuiFlexGrid` is set to none. ([#1941](https://github.com/elastic/eui/pull/1941)) +- Format all JavaScript files with Prettier through ESLint ([#1906](https://github.com/elastic/eui/pull/1906)) **Bug fixes** diff --git a/package.json b/package.json index 12cd84a4618..f05de33fad3 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,7 @@ "enzyme-adapter-react-16": "^1.9.1", "enzyme-to-json": "^3.3.0", "eslint": "^4.9.0", - "eslint-config-prettier": "^2.9.0", + "eslint-config-prettier": "^4.2.0", "eslint-import-resolver-webpack": "^0.8.3", "eslint-plugin-babel": "^4.1.2", "eslint-plugin-import": "^2.8.0", @@ -124,7 +124,7 @@ "eslint-plugin-local": "^1.0.0", "eslint-plugin-mocha": "^4.11.0", "eslint-plugin-prefer-object-spread": "^1.2.1", - "eslint-plugin-prettier": "^2.6.0", + "eslint-plugin-prettier": "^3.0.1", "eslint-plugin-react": "^7.4.0", "file-loader": "^1.1.11", "findup": "^0.1.5", @@ -146,7 +146,7 @@ "postcss-inline-svg": "^3.0.0", "postcss-loader": "^2.0.8", "pre-commit": "^1.2.2", - "prettier": "^1.16.4", + "prettier": "^1.17.0", "prompt": "^1.0.0", "prop-types": "^15.6.0", "raw-loader": "^0.5.1", diff --git a/src-docs/postcss.config.js b/src-docs/postcss.config.js index 886ac4f0240..e59bb59afaf 100644 --- a/src-docs/postcss.config.js +++ b/src-docs/postcss.config.js @@ -1,6 +1,6 @@ module.exports = { plugins: [ require('autoprefixer')({ browsers: ['last 2 versions'] }), - require('postcss-inline-svg')({ relative: true, path: __dirname }) - ] + require('postcss-inline-svg')({ relative: true, path: __dirname }), + ], }; diff --git a/src-docs/src/actions/index.js b/src-docs/src/actions/index.js index f953685a5c2..72db3fe41ef 100644 --- a/src-docs/src/actions/index.js +++ b/src-docs/src/actions/index.js @@ -1,7 +1,3 @@ -export { - toggleTheme, -} from './theme_actions'; +export { toggleTheme } from './theme_actions'; -export { - toggleLocale, -} from './locale_actions'; +export { toggleLocale } from './locale_actions'; diff --git a/src-docs/src/components/guide_locale_selector/guide_locale_selector.js b/src-docs/src/components/guide_locale_selector/guide_locale_selector.js index f58eeca07cf..e6f8c1065b6 100644 --- a/src-docs/src/components/guide_locale_selector/guide_locale_selector.js +++ b/src-docs/src/components/guide_locale_selector/guide_locale_selector.js @@ -1,21 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { - EuiSwitch, - EuiFormRow, -} from '../../../../src/components'; +import { EuiSwitch, EuiFormRow } from '../../../../src/components'; export const GuideLocaleSelector = ({ selectedLocale, onToggleLocale }) => { - return ( - + onToggleLocale(selectedLocale === 'en' ? 'en-xa' : 'en')} + onChange={() => + onToggleLocale(selectedLocale === 'en' ? 'en-xa' : 'en') + } compressed={true} /> diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js index a196c20538d..8d309f6b13d 100644 --- a/src-docs/src/components/guide_page/guide_page.js +++ b/src-docs/src/components/guide_page/guide_page.js @@ -1,9 +1,7 @@ import PropTypes from 'prop-types'; import React, { Fragment } from 'react'; -import { - Link, -} from 'react-router'; +import { Link } from 'react-router'; import { EuiTitle, @@ -14,12 +12,21 @@ import { EuiBetaBadge, } from '../../../../src/components'; -export const GuidePage = ({ children, title, intro, componentLinkTo, isBeta }) => { - const betaBadge = isBeta ? - ( { + const betaBadge = isBeta ? ( + ) : undefined; + /> + ) : ( + undefined + ); return ( @@ -27,18 +34,18 @@ export const GuidePage = ({ children, title, intro, componentLinkTo, isBeta }) = -

{title} {betaBadge}

+

+ {title} {betaBadge} +

- { componentLinkTo && + {componentLinkTo && ( - - View component code - + View component code - } + )}
{intro} 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 2c7bfc88192..5ee8078f1da 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -2,9 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import $ from 'jquery'; -import { - Link, -} from 'react-router'; +import { Link } from 'react-router'; import { EuiFieldSearch, @@ -19,12 +17,8 @@ import { EuiPopoverTitle, } from '../../../../src/components'; -import { - GuideLocaleSelector, -} from '../guide_locale_selector'; -import { - GuideThemeSelector, -} from '../guide_theme_selector'; +import { GuideLocaleSelector } from '../guide_locale_selector'; +import { GuideThemeSelector } from '../guide_theme_selector'; export class GuidePageChrome extends Component { constructor(props) { @@ -51,9 +45,12 @@ export class GuidePageChrome extends Component { }; scrollTo = position => { - $('html, body').animate({ - scrollTop: position, - }, 250); + $('html, body').animate( + { + scrollTop: position, + }, + 250 + ); }; onClickLink = id => { @@ -86,7 +83,6 @@ export class GuidePageChrome extends Component { } renderIdentity() { - const button = ( ); return ( - + - + - + - - - Elastic UI - + + Elastic UI - - + closePopover={this.closePopover.bind(this)}> Docs options
- { - location.host === 'localhost:8030' // eslint-disable-line no-restricted-globals - ? ( - - - - ) - : null - } + {location.host === 'localhost:8030' ? ( // eslint-disable-line no-restricted-globals + + + + ) : null}
@@ -157,8 +145,7 @@ export class GuidePageChrome extends Component { } renderSubSections = (subSections = []) => { - - const subSectionsWithTitles = subSections.filter(item => (item.title)); + const subSectionsWithTitles = subSections.filter(item => item.title); if (subSectionsWithTitles.length <= 1) { return; @@ -169,23 +156,21 @@ export class GuidePageChrome extends Component { name: title, onClick: this.onClickLink.bind(this, id), })); - } + }; renderSideNav = sideNav => { // TODO: Add contents pages const sideNavSections = []; sideNav.forEach(section => { - const matchingItems = section.items.filter(item => ( - item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 && item.hidden !== true - )); + const matchingItems = section.items.filter( + item => + item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== + -1 && item.hidden !== true + ); const items = matchingItems.map(item => { - const { - name, - path, - sections, - } = item; + const { name, path, sections } = item; return { id: `${section.type}-${path}`, @@ -249,9 +234,7 @@ export class GuidePageChrome extends Component { -
- {sideNavContent} -
+
{sideNavContent}
); } diff --git a/src-docs/src/components/guide_page/index.js b/src-docs/src/components/guide_page/index.js index 1e3e44ff325..b401f0fe0e1 100644 --- a/src-docs/src/components/guide_page/index.js +++ b/src-docs/src/components/guide_page/index.js @@ -1,7 +1,3 @@ -export { - GuidePage, -} from './guide_page'; +export { GuidePage } from './guide_page'; -export { - GuidePageChrome, -} from './guide_page_chrome'; +export { GuidePageChrome } from './guide_page_chrome'; diff --git a/src-docs/src/components/guide_rule/guide_rule.js b/src-docs/src/components/guide_rule/guide_rule.js index 55bbe473e0c..bf90ec20189 100644 --- a/src-docs/src/components/guide_rule/guide_rule.js +++ b/src-docs/src/components/guide_rule/guide_rule.js @@ -1,52 +1,41 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { - EuiFlexGroup, -} from '../../../../src/components'; +import { EuiFlexGroup } from '../../../../src/components'; -import { - GuideRuleDescription, -} from './guide_rule_description'; +import { GuideRuleDescription } from './guide_rule_description'; export const GuideRule = ({ children, className, heading, description, - ...rest, + ...rest }) => { const classes = classNames( 'guideRule', { 'guideRule--hasHeading': heading, - 'guideRule--hasDescription': description + 'guideRule--hasDescription': description, }, - className, + className ); let descriptionNode; if (description) { descriptionNode = ( - + ); } return ( -
+
{descriptionNode} {children} -
); }; diff --git a/src-docs/src/components/guide_rule/guide_rule_description.js b/src-docs/src/components/guide_rule/guide_rule_description.js index ac451cc4d0b..d5a4ee1ab0c 100644 --- a/src-docs/src/components/guide_rule/guide_rule_description.js +++ b/src-docs/src/components/guide_rule/guide_rule_description.js @@ -1,32 +1,25 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { - EuiText, -} from '../../../../src/components'; +import { EuiText } from '../../../../src/components'; export const GuideRuleDescription = ({ children, className, heading, description, - ...rest, + ...rest }) => { const classes = classNames('guideRule__description', className); let headingNode; if (heading) { - headingNode = ( -

{heading}

- ); + headingNode =

{heading}

; } return ( -
+
{headingNode}

{description}

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 2d35d5a30b0..d4a490e4fff 100644 --- a/src-docs/src/components/guide_rule/guide_rule_example.js +++ b/src-docs/src/components/guide_rule/guide_rule_example.js @@ -1,19 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { - EuiFlexItem, - EuiPanel, -} from '../../../../src/components'; +import { EuiFlexItem, EuiPanel } from '../../../../src/components'; const typeToClassNameMap = { - 'do': 'guideRule__example--do', - 'dont': 'guideRule__example--dont', + do: 'guideRule__example--do', + dont: 'guideRule__example--dont', }; const typeToSubtitleTextMap = { - 'do': 'Do', - 'dont': 'Don\'t', + do: 'Do', + dont: "Don't", }; export const GuideRuleExample = ({ @@ -23,9 +20,8 @@ export const GuideRuleExample = ({ text, panel, frame, - ...rest, + ...rest }) => { - const classes = classNames( 'guideRule__example', typeToClassNameMap[type], @@ -38,17 +34,13 @@ export const GuideRuleExample = ({ const ChildrenComponent = panel ? EuiPanel : 'div'; return ( - - + {children} -
{text || typeToSubtitleTextMap[type]}
- +
+ {text || typeToSubtitleTextMap[type]} +
); }; diff --git a/src-docs/src/components/guide_rule/guide_rule_title.js b/src-docs/src/components/guide_rule/guide_rule_title.js index 1795b91c111..96810227590 100644 --- a/src-docs/src/components/guide_rule/guide_rule_title.js +++ b/src-docs/src/components/guide_rule/guide_rule_title.js @@ -1,22 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { - EuiTitle, -} from '../../../../src/components'; +import { EuiTitle } from '../../../../src/components'; -export const GuideRuleTitle = ({ - children, - className, - ...rest, -}) => { +export const GuideRuleTitle = ({ children, className, ...rest }) => { const classes = classNames('guideRule__title', className); return ( - +

{children}

); diff --git a/src-docs/src/components/guide_rule/index.js b/src-docs/src/components/guide_rule/index.js index 5ff9629e0f5..064b09306c6 100644 --- a/src-docs/src/components/guide_rule/index.js +++ b/src-docs/src/components/guide_rule/index.js @@ -1,15 +1,7 @@ -export { - GuideRule, -} from './guide_rule'; +export { GuideRule } from './guide_rule'; -export { - GuideRuleExample, -} from './guide_rule_example'; +export { GuideRuleExample } from './guide_rule_example'; -export { - GuideRuleTitle, -} from './guide_rule_title'; +export { GuideRuleTitle } from './guide_rule_title'; -export { - GuideRuleDescription, -} from './guide_rule_description'; +export { GuideRuleDescription } from './guide_rule_description'; diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js index 53037c6e388..bad9b6a4e19 100644 --- a/src-docs/src/components/guide_section/guide_section.js +++ b/src-docs/src/components/guide_section/guide_section.js @@ -17,7 +17,7 @@ import { EuiText, EuiTextColor, EuiTitle, - EuiLink + EuiLink, } from '../../../../src/components'; function markup(text) { @@ -31,14 +31,17 @@ function markup(text) { const onClick = () => { document.getElementById(id).scrollIntoView(); }; - return {id}; + return ( + + {id} + + ); } if (token.startsWith('`')) { const code = token.substring(1, token.length - 1); return {code}; } return token; - }); } @@ -61,7 +64,9 @@ const humanizeType = type => { case 'union': if (Array.isArray(type.value)) { const unionValues = type.value.map(({ name }) => name); - unionValues[unionValues.length - 1] = `or ${unionValues[unionValues.length - 1]}`; + unionValues[unionValues.length - 1] = `or ${ + unionValues[unionValues.length - 1] + }`; if (unionValues.length > 2) { humanizedType = unionValues.join(', '); @@ -80,7 +85,6 @@ const humanizeType = type => { return humanizedType; }; - export class GuideSection extends Component { constructor(props) { super(props); @@ -88,18 +92,22 @@ export class GuideSection extends Component { this.componentNames = Object.keys(props.props); const hasSnippet = 'snippet' in props; - this.tabs = [{ - name: 'demo', - displayName: 'Demo', - }, { - name: 'javascript', - displayName: 'Demo JS', - isCode: true, - }, { - name: 'html', - displayName: 'Demo HTML', - isCode: true, - }]; + this.tabs = [ + { + name: 'demo', + displayName: 'Demo', + }, + { + name: 'javascript', + displayName: 'Demo JS', + isCode: true, + }, + { + name: 'html', + displayName: 'Demo HTML', + isCode: true, + }, + ]; if (hasSnippet) { this.tabs.push({ @@ -125,15 +133,14 @@ export class GuideSection extends Component { this.setState({ selectedTab, }); - } + }; renderTabs() { return this.tabs.map(tab => ( this.onSelectedTabChanged(tab)} isSelected={tab === this.state.selectedTab} - key={tab.name} - > + key={tab.name}> {tab.displayName} )); @@ -146,9 +153,7 @@ export class GuideSection extends Component { return; } - return [ - {text}, - ]; + return [{text}]; } renderSnippet() { @@ -187,7 +192,9 @@ export class GuideSection extends Component { return; } - const docgenInfo = Array.isArray(component.__docgenInfo) ? component.__docgenInfo[0] : component.__docgenInfo; + const docgenInfo = Array.isArray(component.__docgenInfo) + ? component.__docgenInfo[0] + : component.__docgenInfo; const { _euiObjectType, description, props } = docgenInfo; if (!props && !description) { @@ -211,56 +218,60 @@ export class GuideSection extends Component { if (required) { humanizedName = ( - {humanizedName} (required) + {humanizedName}{' '} + (required) ); } const humanizedType = humanizeType(type); - const typeMarkup = ({markup(humanizedType)}); + const typeMarkup = ( + {markup(humanizedType)} + ); const descriptionMarkup = markup(propDescription); let defaultValueMarkup = ''; if (defaultValue) { - defaultValueMarkup = [( + defaultValueMarkup = [ {defaultValue.value} - - )]; + , + ]; if (defaultValue.comment) { defaultValueMarkup.push(`(${defaultValue.comment})`); } } const cells = [ - ( - - {humanizedName} - - ), ( - - {typeMarkup} - - ), ( - - {defaultValueMarkup} - - ), ( - - {descriptionMarkup} - - ) + + {humanizedName} + , + + {typeMarkup} + , + + {defaultValueMarkup} + , + + {descriptionMarkup} + , ]; - return ( - - {cells} - - ); + return {cells}; }); - const title = _euiObjectType === 'type' ? - {componentName} : - {componentName}; + const title = + _euiObjectType === 'type' ? ( + {componentName} + ) : ( + {componentName} + ); let descriptionElement; @@ -279,45 +290,42 @@ export class GuideSection extends Component { if (rows.length) { table = ( - + - - Prop - + Prop - - Type - + Type - - Default - + Default - - Note - + Note - - {rows} - + {rows} ); } return [ , -

{title}

, + +

{title}

+
, , descriptionElement, table, ]; - } + }; renderProps() { const { props } = this.props; return this.componentNames - .map(componentName => this.renderPropsForComponent(componentName, props[componentName])) + .map(componentName => + this.renderPropsForComponent(componentName, props[componentName]) + ) .reduce((a, b) => a.concat(b), []); // Flatten the resulting array } @@ -343,9 +351,7 @@ export class GuideSection extends Component { - - {this.renderTabs()} - + {this.renderTabs()}
); } @@ -357,19 +363,24 @@ export class GuideSection extends Component { }; const codeClass = nameToCodeClassMap[name]; - const { code } = this.props.source.find(sourceObject => sourceObject.type === name); + const { code } = this.props.source.find( + sourceObject => sourceObject.type === name + ); const npmImports = code .replace(/(from )'(..\/)+src\/components(\/?';)/, `from '@elastic/eui';`) - .replace(/(from )'(..\/)+src\/services(\/?';)/, `from '@elastic/eui/lib/services';`) - .replace(/(from )'(..\/)+src\/experimental(\/?';)/, `from '@elastic/eui/lib/experimental';`) + .replace( + /(from )'(..\/)+src\/services(\/?';)/, + `from '@elastic/eui/lib/services';` + ) + .replace( + /(from )'(..\/)+src\/experimental(\/?';)/, + `from '@elastic/eui/lib/experimental';` + ) .replace(/(from )'(..\/)+src\/components\/.*?';/, `from '@elastic/eui';`); return (
- + {npmImports}
@@ -378,11 +389,7 @@ export class GuideSection extends Component { renderContent() { if (this.state.selectedTab.name === 'snippet') { - return ( - - {this.renderSnippet()} - - ); + return {this.renderSnippet()}; } if (this.state.selectedTab.isCode) { @@ -394,11 +401,7 @@ export class GuideSection extends Component { } if (this.state.selectedTab.name === 'props') { - return ( - - {this.renderProps()} - - ); + return {this.renderProps()}; } return ( diff --git a/src-docs/src/components/guide_section/guide_section_container.js b/src-docs/src/components/guide_section/guide_section_container.js index 75d322fd63d..cf0815daefe 100644 --- a/src-docs/src/components/guide_section/guide_section_container.js +++ b/src-docs/src/components/guide_section/guide_section_container.js @@ -2,14 +2,9 @@ import { connect } from 'react-redux'; import { GuideSection } from './guide_section'; -import { - getTheme, - getRoutes, -} from '../../store'; +import { getTheme, getRoutes } from '../../store'; -import { - toggleTheme, -} from '../../actions'; +import { toggleTheme } from '../../actions'; function mapStateToProps(state) { return { @@ -22,5 +17,5 @@ export const GuideSectionContainer = connect( mapStateToProps, { toggleTheme, - }, + } )(GuideSection); diff --git a/src-docs/src/components/guide_section/index.js b/src-docs/src/components/guide_section/index.js index 2a0950d92ae..70616ba4987 100644 --- a/src-docs/src/components/guide_section/index.js +++ b/src-docs/src/components/guide_section/index.js @@ -2,6 +2,4 @@ export { GuideSectionContainer as GuideSection, } from './guide_section_container'; -export { - GuideSectionTypes, -} from './guide_section_types'; +export { GuideSectionTypes } from './guide_section_types'; diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js index 7dd48215e42..edf5b2752c8 100644 --- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js +++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js @@ -1,10 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { - EuiSelect, - EuiFormRow -} from '../../../../src/components'; +import { EuiSelect, EuiFormRow } from '../../../../src/components'; export class GuideThemeSelector extends Component { constructor(props) { @@ -14,16 +11,19 @@ export class GuideThemeSelector extends Component { { text: 'Light', value: 'light', - }, { + }, + { text: 'Dark', value: 'dark', - }, { + }, + { text: 'K6', value: 'k6', - }, { + }, + { text: 'K6 dark', value: 'k6_dark', - } + }, ]; this.state = { @@ -39,18 +39,16 @@ export class GuideThemeSelector extends Component { render() { return ( - - + {this.props.onToggleTheme(e.target.value); }} + onChange={e => { + this.props.onToggleTheme(e.target.value); + }} aria-label="Switch the theme" /> - ); } } diff --git a/src-docs/src/components/index.js b/src-docs/src/components/index.js index 460237c5c56..5363dc9a459 100644 --- a/src-docs/src/components/index.js +++ b/src-docs/src/components/index.js @@ -5,12 +5,6 @@ export { GuideRuleDescription, } from './guide_rule'; -export { - GuidePage, - GuidePageChrome, -} from './guide_page'; +export { GuidePage, GuidePageChrome } from './guide_page'; -export { - GuideSection, - GuideSectionTypes, -} from './guide_section'; +export { GuideSection, GuideSectionTypes } from './guide_section'; diff --git a/src-docs/src/index.js b/src-docs/src/index.js index aecbf7d42a0..b2d80f52943 100644 --- a/src-docs/src/index.js +++ b/src-docs/src/index.js @@ -1,9 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; -import { - Router, -} from 'react-router'; +import { Router } from 'react-router'; import { syncHistoryWithStore } from 'react-router-redux'; import configureStore from './store/configure_store'; @@ -12,9 +10,7 @@ import { AppContainer } from './views/app_container'; import { HomeView } from './views/home/home_view'; import { NotFoundView } from './views/not_found/not_found_view'; -import { - registerTheme, -} from './services'; +import { registerTheme } from './services'; import Routes from './routes'; import themeLight from './theme_light.scss'; @@ -22,21 +18,13 @@ import themeDark from './theme_dark.scss'; import themeK6Light from './theme_k6_light.scss'; import themeK6Dark from './theme_k6_dark.scss'; -registerTheme('light', [ - themeLight -]); +registerTheme('light', [themeLight]); -registerTheme('dark', [ - themeDark -]); +registerTheme('dark', [themeDark]); -registerTheme('k6', [ - themeK6Light -]); +registerTheme('k6', [themeK6Light]); -registerTheme('k6_dark', [ - themeK6Dark -]); +registerTheme('k6_dark', [themeK6Dark]); // Set up app @@ -50,22 +38,24 @@ childRoutes.push({ name: 'Page Not Found', }); -const routes = [{ - path: '/', - component: AppContainer, - indexRoute: { - component: HomeView, - source: 'views/home/HomeView', +const routes = [ + { + path: '/', + component: AppContainer, + indexRoute: { + component: HomeView, + source: 'views/home/HomeView', + }, + childRoutes, }, - childRoutes, -}]; +]; // Update document title with route name. const onRouteEnter = route => { const leafRoute = route.routes[route.routes.length - 1]; - document.title = leafRoute.name ? - `Elastic UI Framework - ${leafRoute.name}` : - 'Elastic UI Framework'; + document.title = leafRoute.name + ? `Elastic UI Framework - ${leafRoute.name}` + : 'Elastic UI Framework'; }; const syncTitleWithRoutes = routesList => { @@ -85,10 +75,7 @@ syncTitleWithRoutes(routes); ReactDOM.render( - + , document.getElementById('guide') ); diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 66d1b11a379..cbb6b8abdc2 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -1,289 +1,193 @@ -import React, { - createElement, -} from 'react'; +import React, { createElement } from 'react'; import { useRouterHistory } from 'react-router'; import createHashHistory from 'history/lib/createHashHistory'; -import { - GuidePage, - GuideSection, -} from './components'; +import { GuidePage, GuideSection } from './components'; -import { - EuiErrorBoundary, -} from '../../src/components'; +import { EuiErrorBoundary } from '../../src/components'; // Guidelines -import ButtonGuidelines - from './views/guidelines/button'; +import ButtonGuidelines from './views/guidelines/button'; -import ColorGuidelines - from './views/guidelines/colors'; +import ColorGuidelines from './views/guidelines/colors'; -import ModalGuidelines - from './views/guidelines/modals'; +import ModalGuidelines from './views/guidelines/modals'; -import { SassGuidelines } - from './views/guidelines/sass'; +import { SassGuidelines } from './views/guidelines/sass'; -import TextScales - from './views/text_scaling/text_scaling_sandbox'; +import TextScales from './views/text_scaling/text_scaling_sandbox'; -import { ToastGuidelines } - from './views/guidelines/toasts'; +import { ToastGuidelines } from './views/guidelines/toasts'; -import WritingGuidelines - from './views/guidelines/writing'; +import WritingGuidelines from './views/guidelines/writing'; // Services -import { ColorPaletteExample } - from './views/color_palette/color_palette_example'; +import { ColorPaletteExample } from './views/color_palette/color_palette_example'; -import { IsColorDarkExample } - from './views/is_color_dark/is_color_dark_example'; +import { IsColorDarkExample } from './views/is_color_dark/is_color_dark_example'; - -import { UtilityClassesExample } - from './views/utility_classes/utility_classes_example'; +import { UtilityClassesExample } from './views/utility_classes/utility_classes_example'; // Component examples -import { AccessibilityExample } - from './views/accessibility/accessibility_example'; +import { AccessibilityExample } from './views/accessibility/accessibility_example'; -import { AccordionExample } - from './views/accordion/accordion_example'; +import { AccordionExample } from './views/accordion/accordion_example'; -import { AvatarExample } - from './views/avatar/avatar_example'; +import { AvatarExample } from './views/avatar/avatar_example'; -import { BadgeExample } - from './views/badge/badge_example'; +import { BadgeExample } from './views/badge/badge_example'; -import { BottomBarExample } - from './views/bottom_bar/bottom_bar_example'; +import { BottomBarExample } from './views/bottom_bar/bottom_bar_example'; -import { BreadcrumbsExample } - from './views/breadcrumbs/breadcrumbs_example'; +import { BreadcrumbsExample } from './views/breadcrumbs/breadcrumbs_example'; -import { ButtonExample } - from './views/button/button_example'; +import { ButtonExample } from './views/button/button_example'; -import { CardExample } - from './views/card/card_example'; +import { CardExample } from './views/card/card_example'; -import { CallOutExample } - from './views/call_out/call_out_example'; +import { CallOutExample } from './views/call_out/call_out_example'; -import { CodeEditorExample } - from './views/code_editor/code_editor_example'; +import { CodeEditorExample } from './views/code_editor/code_editor_example'; -import { CodeExample } - from './views/code/code_example'; +import { CodeExample } from './views/code/code_example'; -import { ColorPickerExample } - from './views/color_picker/color_picker_example'; +import { ColorPickerExample } from './views/color_picker/color_picker_example'; -import { ComboBoxExample } - from './views/combo_box/combo_box_example'; +import { ComboBoxExample } from './views/combo_box/combo_box_example'; -import { ContextExample } - from './views/context/context_example'; +import { ContextExample } from './views/context/context_example'; -import { ContextMenuExample } - from './views/context_menu/context_menu_example'; +import { ContextMenuExample } from './views/context_menu/context_menu_example'; -import { CopyExample } - from './views/copy/copy_example'; +import { CopyExample } from './views/copy/copy_example'; -import { DatePickerExample } - from './views/date_picker/date_picker_example'; +import { DatePickerExample } from './views/date_picker/date_picker_example'; -import { DelayHideExample } - from './views/delay_hide/delay_hide_example'; +import { DelayHideExample } from './views/delay_hide/delay_hide_example'; -import { DescriptionListExample } - from './views/description_list/description_list_example'; +import { DescriptionListExample } from './views/description_list/description_list_example'; -import { DragAndDropExample } - from './views/drag_and_drop/drag_and_drop_example'; +import { DragAndDropExample } from './views/drag_and_drop/drag_and_drop_example'; -import { EmptyPromptExample } - from './views/empty_prompt/empty_prompt_example'; +import { EmptyPromptExample } from './views/empty_prompt/empty_prompt_example'; -import { ErrorBoundaryExample } - from './views/error_boundary/error_boundary_example'; +import { ErrorBoundaryExample } from './views/error_boundary/error_boundary_example'; -import { ExpressionExample } - from './views/expression/expression_example'; +import { ExpressionExample } from './views/expression/expression_example'; -import { FacetExample } - from './views/facet/facet_example'; +import { FacetExample } from './views/facet/facet_example'; -import { FilterGroupExample } - from './views/filter_group/filter_group_example'; +import { FilterGroupExample } from './views/filter_group/filter_group_example'; -import { FlexExample } - from './views/flex/flex_example'; +import { FlexExample } from './views/flex/flex_example'; -import { FlyoutExample } - from './views/flyout/flyout_example'; +import { FlyoutExample } from './views/flyout/flyout_example'; -import { FocusTrapExample } - from './views/focus_trap/focus_trap_example'; +import { FocusTrapExample } from './views/focus_trap/focus_trap_example'; -import { FormControlsExample } - from './views/form_controls/form_controls_example'; +import { FormControlsExample } from './views/form_controls/form_controls_example'; -import { FormLayoutsExample } - from './views/form_layouts/form_layouts_example'; +import { FormLayoutsExample } from './views/form_layouts/form_layouts_example'; -import { FormValidationExample } - from './views/form_validation/form_validation_example'; +import { FormValidationExample } from './views/form_validation/form_validation_example'; -import { HeaderExample } - from './views/header/header_example'; +import { HeaderExample } from './views/header/header_example'; -import { HealthExample } - from './views/health/health_example'; +import { HealthExample } from './views/health/health_example'; -import { HighlightExample } - from './views/highlight/highlight_example'; +import { HighlightExample } from './views/highlight/highlight_example'; -import { HorizontalRuleExample } - from './views/horizontal_rule/horizontal_rule_example'; +import { HorizontalRuleExample } from './views/horizontal_rule/horizontal_rule_example'; -import { I18nExample } - from './views/i18n/i18n_example'; +import { I18nExample } from './views/i18n/i18n_example'; -import { IconExample } - from './views/icon/icon_example'; +import { IconExample } from './views/icon/icon_example'; -import { ImageExample } - from './views/image/image_example'; +import { ImageExample } from './views/image/image_example'; -import { KeyPadMenuExample } - from './views/key_pad_menu/key_pad_menu_example'; +import { KeyPadMenuExample } from './views/key_pad_menu/key_pad_menu_example'; -import { LinkExample } - from './views/link/link_example'; +import { LinkExample } from './views/link/link_example'; -import { ListGroupExample } - from './views/list_group/list_group_example'; +import { ListGroupExample } from './views/list_group/list_group_example'; -import { LoadingExample } - from './views/loading/loading_example'; +import { LoadingExample } from './views/loading/loading_example'; -import { ModalExample } - from './views/modal/modal_example'; +import { ModalExample } from './views/modal/modal_example'; -import { MutationObserverExample } - from './views/mutation_observer/mutation_observer_example'; +import { MutationObserverExample } from './views/mutation_observer/mutation_observer_example'; -import { NavDrawerExample } - from './views/nav_drawer/nav_drawer_example'; +import { NavDrawerExample } from './views/nav_drawer/nav_drawer_example'; -import { OutsideClickDetectorExample } - from './views/outside_click_detector/outside_click_detector_example'; +import { OutsideClickDetectorExample } from './views/outside_click_detector/outside_click_detector_example'; -import { PageExample } - from './views/page/page_example'; +import { PageExample } from './views/page/page_example'; -import { PaginationExample } - from './views/pagination/pagination_example'; +import { PaginationExample } from './views/pagination/pagination_example'; -import { PanelExample } - from './views/panel/panel_example'; +import { PanelExample } from './views/panel/panel_example'; -import { PopoverExample } - from './views/popover/popover_example'; +import { PopoverExample } from './views/popover/popover_example'; -import { PortalExample } - from './views/portal/portal_example'; +import { PortalExample } from './views/portal/portal_example'; -import { ProgressExample } - from './views/progress/progress_example'; +import { ProgressExample } from './views/progress/progress_example'; -import { RangeControlExample } - from './views/range/range_example'; +import { RangeControlExample } from './views/range/range_example'; -import { ResizeObserverExample } - from './views/resize_observer/resize_observer_example'; +import { ResizeObserverExample } from './views/resize_observer/resize_observer_example'; -import { ResponsiveExample } - from './views/responsive/responsive_example'; +import { ResponsiveExample } from './views/responsive/responsive_example'; -import { SearchBarExample } - from './views/search_bar/search_bar_example'; +import { SearchBarExample } from './views/search_bar/search_bar_example'; -import { SelectableExample } - from './views/selectable/selectable_example'; +import { SelectableExample } from './views/selectable/selectable_example'; -import { SideNavExample } - from './views/side_nav/side_nav_example'; +import { SideNavExample } from './views/side_nav/side_nav_example'; -import { SpacerExample } - from './views/spacer/spacer_example'; +import { SpacerExample } from './views/spacer/spacer_example'; -import { StatExample } - from './views/stat/stat_example'; +import { StatExample } from './views/stat/stat_example'; -import { StepsExample } - from './views/steps/steps_example'; +import { StepsExample } from './views/steps/steps_example'; -import { TableExample } - from './views/tables/tables_example'; +import { TableExample } from './views/tables/tables_example'; -import { TabsExample } - from './views/tabs/tabs_example'; +import { TabsExample } from './views/tabs/tabs_example'; -import { TextExample } - from './views/text/text_example'; +import { TextExample } from './views/text/text_example'; -import { TitleExample } - from './views/title/title_example'; +import { TitleExample } from './views/title/title_example'; -import { ToastExample } - from './views/toast/toast_example'; +import { ToastExample } from './views/toast/toast_example'; -import { ToolTipExample } - from './views/tool_tip/tool_tip_example'; +import { ToolTipExample } from './views/tool_tip/tool_tip_example'; -import { ToggleExample } - from './views/toggle/toggle_example'; +import { ToggleExample } from './views/toggle/toggle_example'; -import { WindowEventExample } - from './views/window_event/window_event_example'; +import { WindowEventExample } from './views/window_event/window_event_example'; -import { XYChartExample } - from './views/series_chart/series_chart_example'; +import { XYChartExample } from './views/series_chart/series_chart_example'; -import { XYChartAxisExample } - from './views/series_chart_axis/series_axis_example'; +import { XYChartAxisExample } from './views/series_chart_axis/series_axis_example'; -import { XYChartBarExample } - from './views/series_chart_bar/bar_example'; +import { XYChartBarExample } from './views/series_chart_bar/bar_example'; -import { XYChartHistogramExample } - from './views/series_chart_histogram/histogram_example'; +import { XYChartHistogramExample } from './views/series_chart_histogram/histogram_example'; -import { XYChartAreaExample } - from './views/series_chart_area/area_example'; +import { XYChartAreaExample } from './views/series_chart_area/area_example'; -import { XYChartLineExample } - from './views/series_chart_line/line_example'; +import { XYChartLineExample } from './views/series_chart_line/line_example'; -import { Changelog } - from './views/package/changelog'; +import { Changelog } from './views/package/changelog'; -import { I18nTokens } - from './views/package/i18n_tokens'; +import { I18nTokens } from './views/package/i18n_tokens'; -import { SuperSelectExample } - from './views/super_select/super_select_example'; +import { SuperSelectExample } from './views/super_select/super_select_example'; /** * Lowercases input and replaces spaces with hyphens: @@ -294,13 +198,16 @@ const slugify = str => { .toLowerCase() .replace(/[-]+/g, ' ') .replace(/[^\w^\s]+/g, '') - .replace(/ +/g, ' ').split(' '); + .replace(/ +/g, ' ') + .split(' '); return parts.join('-'); }; -const createExample = (example) => { +const createExample = example => { if (!example) { - throw new Error(`One of your example pages is undefined. This usually happens when you export or import it with the wrong name.`); + throw new Error( + `One of your example pages is undefined. This usually happens when you export or import it with the wrong name.` + ); } const { title, intro, sections, beta } = example; @@ -308,10 +215,12 @@ const createExample = (example) => { section.id = slugify(section.title || title); }); - const renderedSections = sections.map(section => createElement(GuideSection, { - key: section.title || title, - ...section - })); + const renderedSections = sections.map(section => + createElement(GuideSection, { + key: section.title || title, + ...section, + }) + ); const component = () => ( @@ -328,142 +237,154 @@ const createExample = (example) => { }; }; -const navigation = [{ - name: 'Guidelines', - items: [{ - name: 'Buttons', - component: ButtonGuidelines, - }, { - name: 'Colors', - component: ColorGuidelines, - }, { - name: 'Modals', - component: ModalGuidelines, - }, { - name: 'Sass', - component: SassGuidelines, - }, { - name: 'Text scales', - component: TextScales, - }, { - name: 'Toasts', - component: ToastGuidelines, - }, { - name: 'Writing', - component: WritingGuidelines, - }], -}, { - name: 'Layout', - items: [ - AccordionExample, - BottomBarExample, - FlexExample, - FlyoutExample, - HeaderExample, - HorizontalRuleExample, - ModalExample, - NavDrawerExample, - PageExample, - PanelExample, - PopoverExample, - SpacerExample, - ].map(example => createExample(example)), -}, { - name: 'Navigation', - items: [ - BreadcrumbsExample, - ButtonExample, - ContextMenuExample, - FacetExample, - KeyPadMenuExample, - LinkExample, - PaginationExample, - SideNavExample, - StepsExample, - TabsExample, - ].map(example => createExample(example)), -}, { - name: 'Display', - items: [ - AvatarExample, - BadgeExample, - CallOutExample, - CardExample, - CodeExample, - DescriptionListExample, - DragAndDropExample, - EmptyPromptExample, - HealthExample, - IconExample, - ImageExample, - ListGroupExample, - LoadingExample, - ProgressExample, - StatExample, - TableExample, - TextExample, - TitleExample, - ToastExample, - ToolTipExample, - ].map(example => createExample(example)), -}, { - name: 'Forms', - items: [ - FormLayoutsExample, - FormControlsExample, - FormValidationExample, - SuperSelectExample, - ComboBoxExample, - ColorPickerExample, - CodeEditorExample, - DatePickerExample, - ExpressionExample, - FilterGroupExample, - RangeControlExample, - SearchBarExample, - SelectableExample, - ].map(example => createExample(example)), -}, -{ - name: 'Charts (deprecated)', - items: [ - XYChartExample, - XYChartAxisExample, - XYChartLineExample, - XYChartAreaExample, - XYChartBarExample, - XYChartHistogramExample, - ].map(example => createExample(example)), -}, -{ - name: 'Utilities', - items: [ - AccessibilityExample, - ColorPaletteExample, - ContextExample, - CopyExample, - UtilityClassesExample, - DelayHideExample, - ErrorBoundaryExample, - FocusTrapExample, - HighlightExample, - I18nExample, - IsColorDarkExample, - MutationObserverExample, - OutsideClickDetectorExample, - PortalExample, - ResizeObserverExample, - ResponsiveExample, - ToggleExample, - WindowEventExample, - ].map(example => createExample(example)), -}, { - name: 'Package', - items: [ - Changelog, - I18nTokens, - ] -}].map(({ name, items, ...rest }) => ({ +const navigation = [ + { + name: 'Guidelines', + items: [ + { + name: 'Buttons', + component: ButtonGuidelines, + }, + { + name: 'Colors', + component: ColorGuidelines, + }, + { + name: 'Modals', + component: ModalGuidelines, + }, + { + name: 'Sass', + component: SassGuidelines, + }, + { + name: 'Text scales', + component: TextScales, + }, + { + name: 'Toasts', + component: ToastGuidelines, + }, + { + name: 'Writing', + component: WritingGuidelines, + }, + ], + }, + { + name: 'Layout', + items: [ + AccordionExample, + BottomBarExample, + FlexExample, + FlyoutExample, + HeaderExample, + HorizontalRuleExample, + ModalExample, + NavDrawerExample, + PageExample, + PanelExample, + PopoverExample, + SpacerExample, + ].map(example => createExample(example)), + }, + { + name: 'Navigation', + items: [ + BreadcrumbsExample, + ButtonExample, + ContextMenuExample, + FacetExample, + KeyPadMenuExample, + LinkExample, + PaginationExample, + SideNavExample, + StepsExample, + TabsExample, + ].map(example => createExample(example)), + }, + { + name: 'Display', + items: [ + AvatarExample, + BadgeExample, + CallOutExample, + CardExample, + CodeExample, + DescriptionListExample, + DragAndDropExample, + EmptyPromptExample, + HealthExample, + IconExample, + ImageExample, + ListGroupExample, + LoadingExample, + ProgressExample, + StatExample, + TableExample, + TextExample, + TitleExample, + ToastExample, + ToolTipExample, + ].map(example => createExample(example)), + }, + { + name: 'Forms', + items: [ + FormLayoutsExample, + FormControlsExample, + FormValidationExample, + SuperSelectExample, + ComboBoxExample, + ColorPickerExample, + CodeEditorExample, + DatePickerExample, + ExpressionExample, + FilterGroupExample, + RangeControlExample, + SearchBarExample, + SelectableExample, + ].map(example => createExample(example)), + }, + { + name: 'Charts (deprecated)', + items: [ + XYChartExample, + XYChartAxisExample, + XYChartLineExample, + XYChartAreaExample, + XYChartBarExample, + XYChartHistogramExample, + ].map(example => createExample(example)), + }, + { + name: 'Utilities', + items: [ + AccessibilityExample, + ColorPaletteExample, + ContextExample, + CopyExample, + UtilityClassesExample, + DelayHideExample, + ErrorBoundaryExample, + FocusTrapExample, + HighlightExample, + I18nExample, + IsColorDarkExample, + MutationObserverExample, + OutsideClickDetectorExample, + PortalExample, + ResizeObserverExample, + ResponsiveExample, + ToggleExample, + WindowEventExample, + ].map(example => createExample(example)), + }, + { + name: 'Package', + items: [Changelog, I18nTokens], + }, +].map(({ name, items, ...rest }) => ({ name, type: slugify(name), items: items.map(({ name: itemName, ...rest }) => ({ @@ -471,7 +392,7 @@ const navigation = [{ path: `${slugify(name)}/${slugify(itemName)}`, ...rest, })), - ...rest + ...rest, })); const allRoutes = navigation.reduce((accummulatedRoutes, section) => { diff --git a/src-docs/src/services/index.js b/src-docs/src/services/index.js index 92b15f18701..ee886458233 100644 --- a/src-docs/src/services/index.js +++ b/src-docs/src/services/index.js @@ -2,7 +2,4 @@ export { renderToHtml } from './string/render_to_html'; export { translateUsingPseudoLocale } from './string/pseudo_locale_translator'; -export { - registerTheme, - applyTheme, -} from './theme/theme'; +export { registerTheme, applyTheme } from './theme/theme'; diff --git a/src-docs/src/services/string/render_to_html.js b/src-docs/src/services/string/render_to_html.js index 1cd47b401c0..904899c53c1 100644 --- a/src-docs/src/services/string/render_to_html.js +++ b/src-docs/src/services/string/render_to_html.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - render, - configure -} from 'enzyme'; +import { render, configure } from 'enzyme'; import EnzymeAdapter from 'enzyme-adapter-react-16'; @@ -22,7 +19,7 @@ export function renderToHtml(componentReference, props = {}) { indent_size: 2, unformatted: [], // Expand all tags, including spans }); - } catch(e) { + } catch (e) { return ''; } } diff --git a/src-docs/src/services/theme/theme.js b/src-docs/src/services/theme/theme.js index cb9b687de97..6dcdc1e623f 100644 --- a/src-docs/src/services/theme/theme.js +++ b/src-docs/src/services/theme/theme.js @@ -5,6 +5,8 @@ export function registerTheme(theme, cssFiles) { } export function applyTheme(newTheme) { - Object.keys(themes).forEach(theme => themes[theme].forEach(cssFile => cssFile.unuse())); + Object.keys(themes).forEach(theme => + themes[theme].forEach(cssFile => cssFile.unuse()) + ); themes[newTheme].forEach(cssFile => cssFile.use()); } diff --git a/src-docs/src/store/configure_store.js b/src-docs/src/store/configure_store.js index 6dc78577140..cc7a223df45 100644 --- a/src-docs/src/store/configure_store.js +++ b/src-docs/src/store/configure_store.js @@ -1,14 +1,7 @@ -import { - applyMiddleware, - createStore, - compose, -} from 'redux'; +import { applyMiddleware, createStore, compose } from 'redux'; import thunk from 'redux-thunk'; import { browserHistory } from 'react-router'; -import { - routerMiddleware, - routerReducer, -} from 'react-router-redux'; +import { routerMiddleware, routerReducer } from 'react-router-redux'; import Routes from '../routes'; @@ -30,10 +23,7 @@ export default function configureStore(initialState) { } const finalStore = compose( - applyMiddleware( - thunk, - routerMiddleware(browserHistory) - ) + applyMiddleware(thunk, routerMiddleware(browserHistory)) )(createStore)(rootReducer, initialState); return finalStore; diff --git a/src-docs/src/store/index.js b/src-docs/src/store/index.js index 3b387c4b2c4..04ef96b83ea 100644 --- a/src-docs/src/store/index.js +++ b/src-docs/src/store/index.js @@ -8,4 +8,4 @@ export function getRoutes(state) { export function getLocale(state) { return state.locale.locale; -} \ No newline at end of file +} diff --git a/src-docs/src/views/accessibility/accessibility_example.js b/src-docs/src/views/accessibility/accessibility_example.js index c99a839b7a5..140c87e7237 100644 --- a/src-docs/src/views/accessibility/accessibility_example.js +++ b/src-docs/src/views/accessibility/accessibility_example.js @@ -2,9 +2,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiCode, @@ -24,51 +22,63 @@ const screenReaderOnlySource = require('!!raw-loader!./screen_reader'); export const AccessibilityExample = { title: 'Accessibility', - sections: [{ - title: 'KeyboardAccessible', - source: [{ - type: GuideSectionTypes.JS, - code: keyboardAccessibleSource, - }, { - type: GuideSectionTypes.HTML, - code: keyboardAccessibleHtml, - }], - text: ( -

- You can make interactive elements keyboard-accessible with this component. This is necessary - for non-button elements and a tags without - href attributes. -

- ), - props: { EuiKeyboardAccessible }, - demo: , - }, { - title: 'ScreenReaderOnly', - source: [{ - type: GuideSectionTypes.JS, - code: screenReaderOnlySource, - }, { - type: GuideSectionTypes.HTML, - code: screenReaderOnlyHtml, - }], - text: ( -
-

- This class can be useful to add accessibility to older designs that are - still in use, but it shouldn’t be a permanent solution. See {( - - http://webaim.org/techniques/css/invisiblecontent/ - - )} for more information. -

+ sections: [ + { + title: 'KeyboardAccessible', + source: [ + { + type: GuideSectionTypes.JS, + code: keyboardAccessibleSource, + }, + { + type: GuideSectionTypes.HTML, + code: keyboardAccessibleHtml, + }, + ], + text: (

- Use a screenreader to verify that there is a second paragraph in this example: + You can make interactive elements keyboard-accessible with this + component. This is necessary for non-button elements and{' '} + a tags without + href attributes.

-
- ), - props: { EuiScreenReaderOnly }, - demo: , - }], + ), + props: { EuiKeyboardAccessible }, + demo: , + }, + { + title: 'ScreenReaderOnly', + source: [ + { + type: GuideSectionTypes.JS, + code: screenReaderOnlySource, + }, + { + type: GuideSectionTypes.HTML, + code: screenReaderOnlyHtml, + }, + ], + text: ( +
+

+ This class can be useful to add accessibility to older designs that + are still in use, but it shouldn’t be a permanent solution. + See{' '} + { + + http://webaim.org/techniques/css/invisiblecontent/ + + }{' '} + for more information. +

+

+ Use a screenreader to verify that there is a second paragraph in + this example: +

+
+ ), + props: { EuiScreenReaderOnly }, + demo: , + }, + ], }; diff --git a/src-docs/src/views/accessibility/keyboard_accessible.js b/src-docs/src/views/accessibility/keyboard_accessible.js index 2200373788b..3f68055265e 100644 --- a/src-docs/src/views/accessibility/keyboard_accessible.js +++ b/src-docs/src/views/accessibility/keyboard_accessible.js @@ -1,33 +1,21 @@ import React from 'react'; -import { - EuiKeyboardAccessible, -} from '../../../../src/components'; +import { EuiKeyboardAccessible } from '../../../../src/components'; // For custom components, we just need to make sure they delegate props to their rendered root // element, e.g. onClick, tabIndex, and role. -const CustomComponent = ({ - children, - ...rest -}) => ( -
- {children} -
+const CustomComponent = ({ children, ...rest }) => ( +
{children}
); export default () => (
-
window.alert('Div clicked')}> - Click this div -
+
window.alert('Div clicked')}>Click this div
- window.alert('Anchor tag clicked')} - > + window.alert('Anchor tag clicked')}> Click this anchor tag @@ -41,12 +29,10 @@ export default () => (
window.alert('Outer EuiKeyboardAccessible clicked')}> This EuiKeyboardAccessible contains another EuiKeyboardAccessible  - window.alert('Inner EuiKeyboardAccessible clicked')} - > + onClick={() => window.alert('Inner EuiKeyboardAccessible clicked')}> Clicking this inner one should call both onClick handlers diff --git a/src-docs/src/views/accordion/accordion.js b/src-docs/src/views/accordion/accordion.js index 0f9b8b1eaed..6130ce44064 100644 --- a/src-docs/src/views/accordion/accordion.js +++ b/src-docs/src/views/accordion/accordion.js @@ -1,20 +1,17 @@ import React from 'react'; -import { - EuiAccordion, - EuiText, - EuiCode, -} from '../../../../src/components'; - +import { EuiAccordion, EuiText, EuiCode } from '../../../../src/components'; export default () => (
+ buttonContent="Click me to toggle open / close"> -

Any content inside of EuiAccordion will appear here.

+

+ Any content inside of EuiAccordion will appear + here. +

diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js index c2f4c9803e2..047954390d4 100644 --- a/src-docs/src/views/accordion/accordion_example.js +++ b/src-docs/src/views/accordion/accordion_example.js @@ -2,9 +2,7 @@ import React, { Fragment } from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiAccordion, @@ -81,146 +79,171 @@ export const AccordionExample = { title: 'Accordion', intro: ( - +

EuiFlexGroup's negative margins can sometimes create scrollbars within EuiAccordion because of - the overflow tricks used to hide content. If you run into this issue make - sure your paddingSize prop is large enough to account for - the gutterSize of any nested flex groups. + the overflow tricks used to hide content. If you run into this issue + make sure your paddingSize prop is large enough to + account for the gutterSize of any nested flex + groups.

), - sections: [{ - title: 'Unstyled', - source: [{ - type: GuideSectionTypes.JS, - code: accordionSource, - }, { - type: GuideSectionTypes.HTML, - code: accordionHtml, - }], - text: ( -
-

- EuiAccordion has been purposely designed with - minimal styles, allowing you to visually enhance it as needed (see the - accordion form example). The only styling enforced by EUI is the - caret icon, which indicates to users that the item can be opened. -

+ sections: [ + { + title: 'Unstyled', + source: [ + { + type: GuideSectionTypes.JS, + code: accordionSource, + }, + { + type: GuideSectionTypes.HTML, + code: accordionHtml, + }, + ], + text: ( +
+

+ EuiAccordion has been purposely designed with + minimal styles, allowing you to visually enhance it as needed (see + the accordion form example). The only styling enforced by EUI is the + caret icon, which indicates to users that the item can be opened. +

+

+ A buttonContent prop defines the content of the + clickable area. On click it will expose the children and animate + based on the height of those children. +

+

+ For styling needs, classes can be individually applied with{' '} + className (for the entire accordion), and{' '} + buttonClassName (for the clickable area). +

+
+ ), + props: { EuiAccordion }, + snippet: accordionSnippet, + demo: , + }, + { + title: 'Multiple accordions', + source: [ + { + type: GuideSectionTypes.JS, + code: accordionMultipleSource, + }, + { + type: GuideSectionTypes.HTML, + code: accordionMultipleHtml, + }, + ], + text: ( +
+

+ Use any number of EuiAccordion elements to + visually display them as a group. +

+

+ Due to the previously mentioned bare styles, it is recommended to + place an EuiSpacer between accordion items. + Padding within each accordion item can be applied via the{' '} + paddingSize prop. +

+
+ ), + snippet: accordionMultipleSnippet, + demo: , + }, + { + title: 'Accordion can have extra actions', + source: [ + { + type: GuideSectionTypes.JS, + code: accordionExtraSource, + }, + { + type: GuideSectionTypes.HTML, + code: accordionExtraHtml, + }, + ], + text: (

- A buttonContent prop defines the content of the - clickable area. On click it will expose the children and animate - based on the height of those children. + Use the extraAction prop to pass an extra action + displayed on the right of any accordion. Usually this is a delete or + button, but can be anything. Note that this action is separate from + the click state that expands the accordion. This is needed to make it + accessible.

+ ), + snippet: accordionExtraSnippet, + demo: , + }, + { + title: 'Accordion can be opened on initial render', + source: [ + { + type: GuideSectionTypes.JS, + code: accordionOpenSource, + }, + { + type: GuideSectionTypes.HTML, + code: accordionOpenHtml, + }, + ], + text: (

- For styling needs, classes can be individually applied - with className (for the entire accordion), - and buttonClassName (for the clickable area). + Use the initialIsOpen prop to open the accordion + when first rendered.

-
- ), - props: { EuiAccordion }, - snippet: accordionSnippet, - demo: , - }, { - title: 'Multiple accordions', - source: [{ - type: GuideSectionTypes.JS, - code: accordionMultipleSource, - }, { - type: GuideSectionTypes.HTML, - code: accordionMultipleHtml, - }], - text: ( -
+ ), + snippet: accordionOpenSnippet, + demo: , + }, + { + title: 'Accordion content can dynamically change height', + source: [ + { + type: GuideSectionTypes.JS, + code: accordionGrowSource, + }, + { + type: GuideSectionTypes.HTML, + code: accordionGrowHtml, + }, + ], + text: (

- Use any number of EuiAccordion elements to visually - display them as a group. + If an accordion’s content changes height while the accordion is + open, it will resize dynamically.

+ ), + demo: , + }, + { + title: 'Accordion for forms', + source: [ + { + type: GuideSectionTypes.JS, + code: accordionFormSource, + }, + { + type: GuideSectionTypes.HTML, + code: accordionFormHtml, + }, + ], + text: (

- Due to the previously mentioned bare styles, it is recommended to place - an EuiSpacer between accordion items. Padding - within each accordion item can be applied via - the paddingSize prop. + Putting it all together. Using the classNames + and extraAction as explained above, we can style + the accordion in a way common for form use.

-
- ), - snippet: accordionMultipleSnippet, - demo: , - }, { - title: 'Accordion can have extra actions', - source: [{ - type: GuideSectionTypes.JS, - code: accordionExtraSource, - }, { - type: GuideSectionTypes.HTML, - code: accordionExtraHtml, - }], - text: ( -

- Use the extraAction prop to pass an extra action - displayed on the right of any accordion. Usually this is a delete or - button, but can be anything. Note that this action is separate from - the click state that expands the accordion. This is needed to make - it accessible. -

- ), - snippet: accordionExtraSnippet, - demo: , - }, { - title: 'Accordion can be opened on initial render', - source: [{ - type: GuideSectionTypes.JS, - code: accordionOpenSource, - }, { - type: GuideSectionTypes.HTML, - code: accordionOpenHtml, - }], - text: ( -

- Use the initialIsOpen prop to open the accordion when first rendered. -

- ), - snippet: accordionOpenSnippet, - demo: , - }, { - title: 'Accordion content can dynamically change height', - source: [{ - type: GuideSectionTypes.JS, - code: accordionGrowSource, - }, { - type: GuideSectionTypes.HTML, - code: accordionGrowHtml, - }], - text: ( -

- If an accordion’s content changes height while the accordion is open, - it will resize dynamically. -

- ), - demo: , - }, { - title: 'Accordion for forms', - source: [{ - type: GuideSectionTypes.JS, - code: accordionFormSource, - }, { - type: GuideSectionTypes.HTML, - code: accordionFormHtml, - }], - text: ( -

- Putting it all together. Using the classNames - and extraAction as explained above, we can - style the accordion in a way common for form use. -

- ), - demo: , - }], + ), + demo: , + }, + ], }; diff --git a/src-docs/src/views/accordion/accordion_extra.js b/src-docs/src/views/accordion/accordion_extra.js index b2a5f93f56c..c225624e3fa 100644 --- a/src-docs/src/views/accordion/accordion_extra.js +++ b/src-docs/src/views/accordion/accordion_extra.js @@ -1,17 +1,13 @@ import React from 'react'; -import { - EuiAccordion, - EuiButton, -} from '../../../../src/components'; +import { EuiAccordion, EuiButton } from '../../../../src/components'; export default () => ( Extra action!} - paddingSize="l" - > + paddingSize="l">
Opened content.
); diff --git a/src-docs/src/views/accordion/accordion_form.js b/src-docs/src/views/accordion/accordion_form.js index 5646bb8b0ad..b3a41a12e86 100644 --- a/src-docs/src/views/accordion/accordion_form.js +++ b/src-docs/src/views/accordion/accordion_form.js @@ -27,7 +27,9 @@ const repeatableForm = ( - + @@ -88,8 +90,7 @@ export default () => ( buttonClassName="euiAccordionForm__button" buttonContent={buttonContent} extraAction={extraAction} - paddingSize="l" - > + paddingSize="l"> {repeatableForm} @@ -99,8 +100,7 @@ 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 a8933dd8bc2..76b577060a8 100644 --- a/src-docs/src/views/accordion/accordion_grow.js +++ b/src-docs/src/views/accordion/accordion_grow.js @@ -12,18 +12,18 @@ import { class Rows extends Component { state = { - counter: 1 - } + counter: 1, + }; onIncrease() { this.setState(prevState => ({ - counter: prevState.counter + 1 + counter: prevState.counter + 1, })); } onDecrease() { this.setState(prevState => ({ - counter: Math.max(0, prevState.counter - 1) + counter: Math.max(0, prevState.counter - 1), })); } @@ -36,11 +36,14 @@ class Rows extends Component {

- this.onIncrease()}>Increase height - {' '} - this.onDecrease()}>Decrease height + this.onIncrease()}> + Increase height + {' '} + this.onDecrease()}> + Decrease height +

- { rows } + {rows}
); } @@ -53,9 +56,8 @@ class AccordionGrow extends Component { id="accordion1" buttonContent="Click me to toggle close / open" initialIsOpen={true} - paddingSize="l" - > - + paddingSize="l"> + ); } diff --git a/src-docs/src/views/accordion/accordion_multiple.js b/src-docs/src/views/accordion/accordion_multiple.js index ca5d0c9b584..b43246cda47 100644 --- a/src-docs/src/views/accordion/accordion_multiple.js +++ b/src-docs/src/views/accordion/accordion_multiple.js @@ -1,19 +1,13 @@ import React from 'react'; -import { - EuiAccordion, - EuiText, - EuiSpacer, -} from '../../../../src/components'; - +import { EuiAccordion, EuiText, EuiSpacer } from '../../../../src/components'; export default () => (
+ paddingSize="l">

The content inside can be of any height.

The content inside can be of any height.

@@ -26,8 +20,7 @@ export default () => ( + paddingSize="l">

The content inside can be of any height.

The content inside can be of any height.

diff --git a/src-docs/src/views/accordion/accordion_open.js b/src-docs/src/views/accordion/accordion_open.js index c2dc07e4ffb..d5080eb3b9a 100644 --- a/src-docs/src/views/accordion/accordion_open.js +++ b/src-docs/src/views/accordion/accordion_open.js @@ -1,11 +1,6 @@ import React from 'react'; -import { - EuiAccordion, - EuiText, - EuiCode, -} from '../../../../src/components'; - +import { EuiAccordion, EuiText, EuiCode } from '../../../../src/components'; export default () => (
@@ -13,10 +8,12 @@ export default () => ( id="accordion1" buttonContent="I am opened by default. Click me to toggle close / open" initialIsOpen={true} - paddingSize="l" - > + paddingSize="l"> -

Any content inside of EuiAccordion will appear here.

+

+ Any content inside of EuiAccordion will appear + here. +

diff --git a/src-docs/src/views/app_container.js b/src-docs/src/views/app_container.js index 36db4253313..88b32990eb5 100644 --- a/src-docs/src/views/app_container.js +++ b/src-docs/src/views/app_container.js @@ -2,16 +2,9 @@ import { connect } from 'react-redux'; import { AppView } from './app_view'; -import { - getTheme, - getRoutes, - getLocale, -} from '../store'; +import { getTheme, getRoutes, getLocale } from '../store'; -import { - toggleTheme, - toggleLocale, -} from '../actions'; +import { toggleTheme, toggleLocale } from '../actions'; function mapStateToProps(state, ownProps) { return { @@ -28,6 +21,5 @@ export const AppContainer = connect( { toggleTheme, toggleLocale, - }, + } )(AppView); - diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js index 094f21d07c5..98cdc7bc596 100644 --- a/src-docs/src/views/app_view.js +++ b/src-docs/src/views/app_view.js @@ -1,20 +1,15 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import { - applyTheme, - translateUsingPseudoLocale -} from '../services'; +import { applyTheme, translateUsingPseudoLocale } from '../services'; -import { - GuidePageChrome, -} from '../components'; +import { GuidePageChrome } from '../components'; import { EuiErrorBoundary, EuiPage, EuiPageBody, - EuiContext + EuiContext, } from '../../../src/components'; import { keyCodes } from '../../../src/services'; @@ -22,7 +17,7 @@ import { keyCodes } from '../../../src/services'; export class AppView extends Component { updateTheme = () => { applyTheme(this.props.theme); - } + }; componentDidUpdate(prevProps) { this.updateTheme(); @@ -56,12 +51,12 @@ export class AppView extends Component { const { navigation } = routes; const mappingFuncs = { - 'en-xa': translateUsingPseudoLocale + 'en-xa': translateUsingPseudoLocale, }; const i18n = { mappingFunc: mappingFuncs[locale], - formatNumber: (value) => new Intl.NumberFormat(locale).format(value), + formatNumber: value => new Intl.NumberFormat(locale).format(value), }; return ( @@ -89,11 +84,7 @@ export class AppView extends Component { } render() { - return ( -
- {this.renderContent()} -
- ); + return
{this.renderContent()}
; } onKeydown = e => { @@ -105,10 +96,7 @@ export class AppView extends Component { return; } - const { - routes, - currentRoute, - } = this.props; + const { routes, currentRoute } = this.props; if (e.keyCode === keyCodes.LEFT) { pushRoute(routes.getPreviousRoute); @@ -126,7 +114,7 @@ export class AppView extends Component { routes.history.push(route.path); } } - } + }; } AppView.propTypes = { diff --git a/src-docs/src/views/avatar/avatar.js b/src-docs/src/views/avatar/avatar.js index 5f60b50577c..32e38f13e5f 100644 --- a/src-docs/src/views/avatar/avatar.js +++ b/src-docs/src/views/avatar/avatar.js @@ -1,32 +1,43 @@ import React from 'react'; -import { - EuiAvatar, - EuiSpacer, - EuiTitle, -} from '../../../../src/components'; +import { EuiAvatar, EuiSpacer, EuiTitle } from '../../../../src/components'; export default () => (
- + - -

With image

+ +

With image

+
- - +   - +   - +   - - +
); diff --git a/src-docs/src/views/avatar/avatar_example.js b/src-docs/src/views/avatar/avatar_example.js index 72e430e7ad8..17880cc545c 100644 --- a/src-docs/src/views/avatar/avatar_example.js +++ b/src-docs/src/views/avatar/avatar_example.js @@ -2,14 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiAvatar, - EuiCode, -} from '../../../../src/components'; +import { EuiAvatar, EuiCode } from '../../../../src/components'; import Avatar from './avatar'; const avatarSource = require('!!raw-loader!./avatar'); @@ -21,53 +16,66 @@ const avatarInitialsHtml = renderToHtml(AvatarInitials); export const AvatarExample = { title: 'Avatar', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: avatarSource, - }, { - type: GuideSectionTypes.HTML, - code: avatarHtml, - }], - text: ( -
-

- The Avatar component creates a user icon. It will - accept name (required) and image props - and will configure the display and accessibility as needed. By default, the background colors - come from the set of colors used for visualizations. Otherwise you can pass a - hex value to the color prop. -

-
- ), - props: { EuiAvatar }, - demo: , - }, { - title: 'Initials', - source: [{ - type: GuideSectionTypes.JS, - code: avatarInitialsSource, - }, { - type: GuideSectionTypes.HTML, - code: avatarInitialsHtml, - }], - text: ( -
-

- The initials displayed in the avatar try to be smart based on the name prop. - If the name contains spaces, it will display the first character of each - word, always maxing out at 2 characters. You can customize this by - passing a combination of initialsLength and/or initials props. - However, the avatar will still always max out at 2 characters. -

-

Types

-

- The avatar type, which primarily defines the shape, - is keyworded and can be "user" (default) - or "space" (for workspaces). -

-
- ), - demo: , - }] + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: avatarSource, + }, + { + type: GuideSectionTypes.HTML, + code: avatarHtml, + }, + ], + text: ( +
+

+ The Avatar component creates a user icon. It will + accept name (required) and{' '} + image props and will configure the display and + accessibility as needed. By default, the background colors come from + the set of colors used for visualizations. Otherwise you can pass a + hex value to the color prop. +

+
+ ), + props: { EuiAvatar }, + demo: , + }, + { + title: 'Initials', + source: [ + { + type: GuideSectionTypes.JS, + code: avatarInitialsSource, + }, + { + type: GuideSectionTypes.HTML, + code: avatarInitialsHtml, + }, + ], + text: ( +
+

+ The initials displayed in the avatar try to be smart based on the + name prop. If the name contains spaces, it will display the first + character of each word,{' '} + always maxing out at 2 characters. You can + customize this by passing a combination of{' '} + initialsLength and/or initials{' '} + props. However, the avatar will still always max out at 2 + characters. +

+

Types

+

+ The avatar type, which primarily defines the + shape, is keyworded and can be "user"{' '} + (default) or "space" (for workspaces). +

+
+ ), + demo: , + }, + ], }; diff --git a/src-docs/src/views/avatar/avatar_initials.js b/src-docs/src/views/avatar/avatar_initials.js index a1dc2a46c6f..ebf11560512 100644 --- a/src-docs/src/views/avatar/avatar_initials.js +++ b/src-docs/src/views/avatar/avatar_initials.js @@ -1,36 +1,37 @@ import React from 'react'; -import { - EuiAvatar, - EuiTitle, - EuiSpacer, -} from '../../../../src/components'; +import { EuiAvatar, EuiTitle, EuiSpacer } from '../../../../src/components'; export default () => (
- -

Single vs multi-word

+ +

Single vs multi-word

+
-   - - + -

Custom & Spaces type

+ +

Custom & Spaces type

+
-   - - +
); diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js index 0bc8fea00ab..ee0e567a710 100644 --- a/src-docs/src/views/badge/badge.js +++ b/src-docs/src/views/badge/badge.js @@ -15,20 +15,15 @@ const badges = [ 'warning', 'danger', '#fea27f', - '#000' + '#000', ]; export default () => ( - { - badges.map(badge => ( - - - {badge} - - - )) - } + {badges.map(badge => ( + + {badge} + + ))} - ); diff --git a/src-docs/src/views/badge/badge_button.js b/src-docs/src/views/badge/badge_button.js index 0afe69c6674..073678772f8 100644 --- a/src-docs/src/views/badge/badge_button.js +++ b/src-docs/src/views/badge/badge_button.js @@ -1,16 +1,13 @@ import React from 'react'; -import { - EuiBadge, -} from '../../../../src/components'; +import { EuiBadge } from '../../../../src/components'; export default () => (
window.alert('Badge clicked')} - onClickAriaLabel="Example of onclick event for the button" - > + onClickAriaLabel="Example of onclick event for the button"> onClick on badge itself @@ -19,8 +16,7 @@ export default () => ( iconSide="right" color="#333" iconOnClick={() => window.alert('Icon inside badge clicked')} - iconOnClickAriaLabel="Example of onclick event for icon within the button" - > + iconOnClickAriaLabel="Example of onclick event for icon within the button"> onClick on icon within badge
diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index 64a3ae1a1ce..efcf46b801f 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -1,14 +1,10 @@ import React from 'react'; -import { - Link, -} from 'react-router'; +import { Link } from 'react-router'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiBadge, @@ -39,105 +35,129 @@ const notificationBadgeHtml = renderToHtml(NotificationBadge); export const BadgeExample = { title: 'Badge', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: badgeSource, - }, { - type: GuideSectionTypes.HTML, - code: badgeHtml, - }], - text: ( -

- Badges are used to focus on important bits of information. Although they - will automatically space themselves if you use them in a repetitive fashion - it is good form to wrap them using a FlexGroup so - that they will wrap when width is constrained (as is done artificially in - the example below). -

- ), - props: { EuiBadge }, - demo: , - }, { - title: 'Badge with Icon', - source: [{ - type: GuideSectionTypes.JS, - code: badgeWithIconSource, - }, { - type: GuideSectionTypes.HTML, - code: badgeWithIconHtml, - }], - text: ( -

- Badges can use icons on the left and right (default) sides. -

- ), - demo: , - }, { - title: 'Badge with onClick events', - source: [{ - type: GuideSectionTypes.JS, - code: badgeButtonSource, - }, { - type: GuideSectionTypes.HTML, - code: badgeButtonHtml, - }], - text: ( -

- Badges can have onClick events applied to the badge itself or the icon within the badge. - The later option is useful for when you might use badges in other components (like a tag - system with autocomplete where you need close events). -

- ), - demo: , - }, { - title: 'Beta badge type', - source: [{ - type: GuideSectionTypes.JS, - code: betaBadgeSource, - }, { - type: GuideSectionTypes.HTML, - code: betaBadgeHtml, - }], - text: ( -
+ sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: badgeSource, + }, + { + type: GuideSectionTypes.HTML, + code: badgeHtml, + }, + ], + text: (

- The EuiBetaBadge was created specifically to call out - modules that are not in GA. Generally the labels used are "Beta" or "Lab". - They require an extra tooltipContent to describe the purpose of the badge. - You can pass an optional title prop to populate the tooltip title or html title - attribute but by default it will use the label. + Badges are used to focus on important bits of information. Although + they will automatically space themselves if you use them in a + repetitive fashion it is good form to wrap them using a{' '} + FlexGroup so that they will wrap when width is + constrained (as is done artificially in the example below).

+ ), + props: { EuiBadge }, + demo: , + }, + { + title: 'Badge with Icon', + source: [ + { + type: GuideSectionTypes.JS, + code: badgeWithIconSource, + }, + { + type: GuideSectionTypes.HTML, + code: badgeWithIconHtml, + }, + ], + text:

Badges can use icons on the left and right (default) sides.

, + demo: , + }, + { + title: 'Badge with onClick events', + source: [ + { + type: GuideSectionTypes.JS, + code: badgeButtonSource, + }, + { + type: GuideSectionTypes.HTML, + code: badgeButtonHtml, + }, + ], + text: (

- If you pass in an iconType, only the icon will be used in the badge itself and - the label will be applied as the title. Only use an icon when attaching the beta badge to small - components like the EuiKeyPadMenuItem. + Badges can have onClick events applied to the badge itself or the icon + within the badge. The later option is useful for when you might use + badges in other components (like a tag system with autocomplete where + you need close events).

+ ), + demo: , + }, + { + title: 'Beta badge type', + source: [ + { + type: GuideSectionTypes.JS, + code: betaBadgeSource, + }, + { + type: GuideSectionTypes.HTML, + code: betaBadgeHtml, + }, + ], + text: ( +
+

+ The EuiBetaBadge was created specifically to call + out modules that are not in GA. Generally the labels used are + "Beta" or "Lab". They require an extra{' '} + tooltipContent to describe the purpose of the + badge. You can pass an optional title prop to + populate the tooltip title or html title attribute but by default it + will use the label. +

+

+ If you pass in an iconType, only the icon will be + used in the badge itself and the label will be applied as the title. + Only use an icon when attaching the beta badge to small components + like the EuiKeyPadMenuItem. +

+

+ They can also be used in conjunction with{' '} + EuiCards +  and{' '} + EuiKeyPadMenuItems. +

+
+ ), + props: { EuiBetaBadge }, + demo: , + }, + { + title: 'Notification badge type', + source: [ + { + type: GuideSectionTypes.JS, + code: notificationBadgeSource, + }, + { + type: GuideSectionTypes.HTML, + code: notificationBadgeHtml, + }, + ], + text: (

- They can also be used in conjunction with EuiCards -  and EuiKeyPadMenuItems. + Used to showcase the number of notifications, alerts or hidden + selections. Typically used in{' '} + EuiHeader or (eventually){' '} + EuiFilterButtons.

-
- ), - props: { EuiBetaBadge }, - demo: , - }, { - title: 'Notification badge type', - source: [{ - type: GuideSectionTypes.JS, - code: notificationBadgeSource, - }, { - type: GuideSectionTypes.HTML, - code: notificationBadgeHtml, - }], - text: ( -

- Used to showcase the number of notifications, alerts or hidden selections. - Typically used in EuiHeader or - (eventually) EuiFilterButtons. -

- ), - props: { EuiNotificationBadge }, - demo: , - }], + ), + props: { EuiNotificationBadge }, + demo: , + }, + ], }; diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js index c836b55dfd5..7ae47352f8d 100644 --- a/src-docs/src/views/badge/badge_with_icon.js +++ b/src-docs/src/views/badge/badge_with_icon.js @@ -1,14 +1,10 @@ import React from 'react'; -import { - EuiBadge, -} from '../../../../src/components'; +import { EuiBadge } from '../../../../src/components'; export default () => (
- - Default - + Default Primary diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js index 7b16f38c465..f0c7dd0f5e8 100644 --- a/src-docs/src/views/badge/beta_badge.js +++ b/src-docs/src/views/badge/beta_badge.js @@ -1,24 +1,29 @@ import React from 'react'; -import { - EuiBetaBadge, - EuiSpacer, - EuiTitle, -} from '../../../../src/components'; +import { EuiBetaBadge, EuiSpacer, EuiTitle } from '../../../../src/components'; export default () => (
- +   - + -

Beta badges will also line up nicely with titles   - +

diff --git a/src-docs/src/views/bottom_bar/bottom_bar.js b/src-docs/src/views/bottom_bar/bottom_bar.js index 7ff71335f9f..bfbe840d693 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar.js +++ b/src-docs/src/views/bottom_bar/bottom_bar.js @@ -1,7 +1,4 @@ - -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiBottomBar, @@ -41,26 +38,33 @@ export default class extends Component { - Help + + Help + - Add user + + Add user + - Discard + + Discard + - Save + + Save + - ); } diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js index 28d4ca4afb0..f3525fc6ce1 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar_example.js +++ b/src-docs/src/views/bottom_bar/bottom_bar_example.js @@ -2,14 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiBottomBar, - EuiCode, -} from '../../../../src/components'; +import { EuiBottomBar, EuiCode } from '../../../../src/components'; import BottomBar from './bottom_bar'; const bottomBarSource = require('!!raw-loader!./bottom_bar'); @@ -17,30 +12,37 @@ const bottomBarHtml = renderToHtml(BottomBar); export const BottomBarExample = { title: 'Bottom Bar', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: bottomBarSource, - }, { - type: GuideSectionTypes.HTML, - code: bottomBarHtml, - }], - text: ( -
-

- BottomBar is a simple wrapper component that does - nothing but fix a bottom bar (usually filled with buttons) to the bottom - of the page. Use it when you have really long pages or complicated, multi-page - forms. In the case of forms, only invoke it if a form is in a savable - state. -

-

- Like many of our other wrapper components, BottomBar accepts - a paddingSize prop, which can be set to s / m / l / none. -

-
- ), - props: { EuiBottomBar }, - demo: , - }], + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: bottomBarSource, + }, + { + type: GuideSectionTypes.HTML, + code: bottomBarHtml, + }, + ], + text: ( +
+

+ BottomBar is a simple wrapper component that does + nothing but fix a bottom bar (usually filled with buttons) to the + bottom of the page. Use it when you have really long pages or + complicated, multi-page forms. In the case of forms, only invoke it + if a form is in a savable state. +

+

+ Like many of our other wrapper components,{' '} + BottomBar accepts a{' '} + paddingSize prop, which can be set to{' '} + s / m / l / none. +

+
+ ), + props: { EuiBottomBar }, + demo: , + }, + ], }; diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs.js b/src-docs/src/views/breadcrumbs/breadcrumbs.js index 789ed26a1fe..d67bd2ba823 100644 --- a/src-docs/src/views/breadcrumbs/breadcrumbs.js +++ b/src-docs/src/views/breadcrumbs/breadcrumbs.js @@ -10,27 +10,45 @@ import { } from '../../../../src/components'; export default () => { - const breadcrumbs = [{ - text: 'Animals', - href: '#', - onClick: (e) => { e.preventDefault(); console.log('You clicked Animals'); }, - 'data-test-subj': 'breadcrumbsAnimals', - className: 'customClass', - }, { - text: 'Reptiles', - href: '#', - onClick: (e) => { e.preventDefault(); console.log('You clicked Reptiles'); }, - }, { - text: 'Boa constrictor', - href: '#', - onClick: (e) => { e.preventDefault(); console.log('You clicked Boa constrictor'); }, - }, { - text: 'Edit', - }]; + const breadcrumbs = [ + { + text: 'Animals', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked Animals'); + }, + 'data-test-subj': 'breadcrumbsAnimals', + className: 'customClass', + }, + { + text: 'Reptiles', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked Reptiles'); + }, + }, + { + text: 'Boa constrictor', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked Boa constrictor'); + }, + }, + { + text: 'Edit', + }, + ]; return ( - + diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js index d999fdd8f0c..5ef8518ac24 100644 --- a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js +++ b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js @@ -38,12 +38,15 @@ export const BreadcrumbsExample = { ], text: (

- EuiBreadcrumbs let the user track their progress within and back out of - a UX flow. You can provide an href prop on any breadcrumb item that you - wish to make clickable, including the last item, though we recommend the last item represent - the current page and therefore the link is unnecessary. They work well within - EuiPageContentHeader but be careful not to be use them within an app that - also uses EuiHeaderBreadcrumbs. + EuiBreadcrumbs let the user track their progress + within and back out of a UX flow. You can provide an{' '} + href prop on any breadcrumb item that you wish to + make clickable, including the last item, though we recommend the last + item represent the current page and therefore the link is unnecessary. + They work well within + EuiPageContentHeader but be careful not to be use + them within an app that also uses{' '} + EuiHeaderBreadcrumbs.

), props: { EuiBreadcrumbs }, @@ -63,7 +66,8 @@ export const BreadcrumbsExample = { ], text: (

- The responsive prop will hide breadcrumbs on narrower screens. + The responsive prop will hide breadcrumbs on + narrower screens.

), props: { EuiBreadcrumbs }, @@ -89,8 +93,9 @@ export const BreadcrumbsExample = {
  1. on the individual breadrcrumb item,
  2. - on the full EuiBreadcrumbs set which will force the full set to a - single line, while setting a max width on all items except for the last. + on the full EuiBreadcrumbs set which will force + the full set to a single line, while setting a max width on all + items except for the last.
@@ -112,8 +117,8 @@ export const BreadcrumbsExample = { ], text: (

- Use the max prop to cull breadcrumbs beyond a certain number. By - default, this number is 5. + Use the max prop to cull breadcrumbs beyond a + certain number. By default, this number is 5.

), props: { EuiBreadcrumbs }, diff --git a/src-docs/src/views/breadcrumbs/max.js b/src-docs/src/views/breadcrumbs/max.js index 24527a4d3f7..367f8d28597 100644 --- a/src-docs/src/views/breadcrumbs/max.js +++ b/src-docs/src/views/breadcrumbs/max.js @@ -1,34 +1,47 @@ import React from 'react'; -import { - EuiBreadcrumbs, -} from '../../../../src/components'; +import { EuiBreadcrumbs } from '../../../../src/components'; export default () => { - const breadcrumbs = [{ - text: 'Animals', - href: '#', - }, { - text: 'Metazoans', - href: '#', - }, { - text: 'Chordates', - href: '#', - }, { - text: 'Vertebrates', - href: '#', - }, { - text: 'Tetrapods', - href: '#', - }, { - text: 'Reptiles', - href: '#', - }, { - text: 'Boa constrictor', - href: '#', - }, { - text: 'Nebulosa subspecies', - }]; + const breadcrumbs = [ + { + text: 'Animals', + href: '#', + }, + { + text: 'Metazoans', + href: '#', + }, + { + text: 'Chordates', + href: '#', + }, + { + text: 'Vertebrates', + href: '#', + }, + { + text: 'Tetrapods', + href: '#', + }, + { + text: 'Reptiles', + href: '#', + }, + { + text: 'Boa constrictor', + href: '#', + }, + { + text: 'Nebulosa subspecies', + }, + ]; - return ; + return ( + + ); }; diff --git a/src-docs/src/views/breadcrumbs/responsive.js b/src-docs/src/views/breadcrumbs/responsive.js index 2c37e6b319a..f9fb2425b31 100644 --- a/src-docs/src/views/breadcrumbs/responsive.js +++ b/src-docs/src/views/breadcrumbs/responsive.js @@ -1,6 +1,10 @@ import React, { Fragment } from 'react'; -import { EuiBreadcrumbs, EuiShowFor, EuiText } from '../../../../src/components'; +import { + EuiBreadcrumbs, + EuiShowFor, + EuiText, +} from '../../../../src/components'; export default () => { const breadcrumbs = [ diff --git a/src-docs/src/views/breadcrumbs/truncate.js b/src-docs/src/views/breadcrumbs/truncate.js index 726b8b24dc6..53b650118f9 100644 --- a/src-docs/src/views/breadcrumbs/truncate.js +++ b/src-docs/src/views/breadcrumbs/truncate.js @@ -1,6 +1,10 @@ import React from 'react'; -import { EuiBreadcrumbs, EuiSpacer, EuiTitle } from '../../../../src/components'; +import { + EuiBreadcrumbs, + EuiSpacer, + EuiTitle, +} from '../../../../src/components'; export default () => { const breadcrumbs = [ @@ -9,7 +13,8 @@ export default () => { href: '#', }, { - text: 'Metazoans is a real mouthful, especially for creatures without mouths', + text: + 'Metazoans is a real mouthful, especially for creatures without mouths', href: '#', truncate: true, }, @@ -34,7 +39,8 @@ export default () => { href: '#', }, { - text: 'Nebulosa subspecies is also a real mouthful, especially for creatures without mouths', + text: + 'Nebulosa subspecies is also a real mouthful, especially for creatures without mouths', }, ]; @@ -44,13 +50,21 @@ export default () => { Truncation on a single item - + Truncation on the entire set - +
); }; diff --git a/src-docs/src/views/button/button.js b/src-docs/src/views/button/button.js index 2ad12a4d0c7..36e6f65a020 100644 --- a/src-docs/src/views/button/button.js +++ b/src-docs/src/views/button/button.js @@ -10,37 +10,25 @@ export default () => (
- window.alert('Button clicked')} - > + window.alert('Button clicked')}> Primary - window.alert('Button clicked')} - > + window.alert('Button clicked')}> Filled - window.alert('Button clicked')} - > + window.alert('Button clicked')}> small - window.alert('Button clicked')} - > + window.alert('Button clicked')}> small and filled @@ -50,8 +38,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Secondary @@ -60,8 +47,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Filled @@ -70,8 +56,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small @@ -81,8 +66,7 @@ export default () => ( color="secondary" size="s" fill - onClick={() => window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small and filled @@ -92,8 +76,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Warning @@ -102,8 +85,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Filled @@ -112,8 +94,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small @@ -123,8 +104,7 @@ export default () => ( color="warning" size="s" fill - onClick={() => window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small and filled @@ -134,8 +114,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Danger @@ -144,8 +123,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Filled @@ -154,8 +132,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small @@ -165,8 +142,7 @@ export default () => ( color="danger" size="s" fill - onClick={() => window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small and filled @@ -174,10 +150,7 @@ export default () => ( - window.alert('Button clicked')} - > + window.alert('Button clicked')}> Disabled @@ -186,8 +159,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Filled @@ -196,8 +168,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small @@ -207,8 +178,7 @@ export default () => ( isDisabled size="s" fill - onClick={() => window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small and filled diff --git a/src-docs/src/views/button/button_as_link.js b/src-docs/src/views/button/button_as_link.js index fce37cf063f..cf9f3a3aa8f 100644 --- a/src-docs/src/views/button/button_as_link.js +++ b/src-docs/src/views/button/button_as_link.js @@ -12,9 +12,7 @@ export default () => ( - - Link to elastic.co - + Link to elastic.co @@ -24,7 +22,11 @@ export default () => ( - + @@ -42,7 +44,12 @@ export default () => ( - + diff --git a/src-docs/src/views/button/button_empty.js b/src-docs/src/views/button/button_empty.js index f1bc6818cea..d5a25f3f283 100644 --- a/src-docs/src/views/button/button_empty.js +++ b/src-docs/src/views/button/button_empty.js @@ -10,18 +10,13 @@ export default () => (
- window.alert('Button clicked')} - > + window.alert('Button clicked')}> Primary - window.alert('Button clicked')} - > + window.alert('Button clicked')}> small @@ -29,8 +24,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> extra small @@ -40,8 +34,7 @@ export default () => ( window.alert('Button clicked')} - iconType="arrowDown" - > + iconType="arrowDown"> Primary @@ -50,8 +43,7 @@ export default () => ( window.alert('Button clicked')} - iconType="arrowDown" - > + iconType="arrowDown"> small @@ -60,8 +52,7 @@ export default () => ( window.alert('Button clicked')} iconType="arrowDown" - iconSide="right" - > + iconSide="right"> Primary @@ -71,8 +62,7 @@ export default () => ( size="s" onClick={() => window.alert('Button clicked')} iconType="arrowDown" - iconSide="right" - > + iconSide="right"> small @@ -82,8 +72,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Danger @@ -92,8 +81,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small @@ -102,8 +90,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> extra small @@ -114,8 +101,7 @@ export default () => ( window.alert('Button clicked')} - iconType="arrowDown" - > + iconType="arrowDown"> Danger @@ -125,8 +111,7 @@ export default () => ( color="danger" size="s" onClick={() => window.alert('Button clicked')} - iconType="arrowDown" - > + iconType="arrowDown"> small @@ -136,8 +121,7 @@ export default () => ( color="danger" onClick={() => window.alert('Button clicked')} iconType="arrowDown" - iconSide="right" - > + iconSide="right"> Danger @@ -148,8 +132,7 @@ export default () => ( size="s" onClick={() => window.alert('Button clicked')} iconType="arrowDown" - iconSide="right" - > + iconSide="right"> small @@ -159,8 +142,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Text @@ -169,8 +151,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small @@ -179,8 +160,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> extra small @@ -191,8 +171,7 @@ export default () => ( window.alert('Button clicked')} - iconType="arrowDown" - > + iconType="arrowDown"> Text @@ -202,8 +181,7 @@ export default () => ( color="text" size="s" onClick={() => window.alert('Button clicked')} - iconType="arrowDown" - > + iconType="arrowDown"> small @@ -213,8 +191,7 @@ export default () => ( color="text" onClick={() => window.alert('Button clicked')} iconType="arrowDown" - iconSide="right" - > + iconSide="right"> Text @@ -225,8 +202,7 @@ export default () => ( size="s" onClick={() => window.alert('Button clicked')} iconType="arrowDown" - iconSide="right" - > + iconSide="right"> small @@ -237,8 +213,7 @@ export default () => ( window.alert('Button clicked')} - isDisabled - > + isDisabled> Disabled @@ -248,8 +223,7 @@ export default () => ( color="danger" size="s" onClick={() => window.alert('Button clicked')} - isDisabled - > + isDisabled> small @@ -259,8 +233,7 @@ export default () => ( color="danger" size="xs" onClick={() => window.alert('Button clicked')} - isDisabled - > + isDisabled> extra small @@ -270,8 +243,7 @@ export default () => ( window.alert('Button clicked')} - isLoading - > + isLoading> Loading @@ -280,8 +252,7 @@ export default () => ( window.alert('Button clicked')} isLoading - iconSide="right" - > + iconSide="right"> Loading @@ -293,8 +264,7 @@ export default () => ( color="danger" onClick={() => window.alert('Button clicked')} iconType="arrowDown" - isDisabled - > + isDisabled> Disabled @@ -305,8 +275,7 @@ export default () => ( size="s" onClick={() => window.alert('Button clicked')} iconType="arrowDown" - isDisabled - > + isDisabled> small @@ -317,8 +286,7 @@ export default () => ( onClick={() => window.alert('Button clicked')} iconType="arrowDown" iconSide="right" - isDisabled - > + isDisabled> Disabled @@ -330,8 +298,7 @@ export default () => ( onClick={() => window.alert('Button clicked')} iconType="arrowDown" iconSide="right" - isDisabled - > + isDisabled> small diff --git a/src-docs/src/views/button/button_empty_flush.js b/src-docs/src/views/button/button_empty_flush.js index 47f8bf2c10f..593a0593330 100644 --- a/src-docs/src/views/button/button_empty_flush.js +++ b/src-docs/src/views/button/button_empty_flush.js @@ -9,15 +9,11 @@ import { export default () => ( - - Flush left - + Flush left - - Flush right - + Flush right ); diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index 266aa081c23..b691453b5a3 100644 --- a/src-docs/src/views/button/button_example.js +++ b/src-docs/src/views/button/button_example.js @@ -1,8 +1,6 @@ import React from 'react'; -import { - Link, -} from 'react-router'; +import { Link } from 'react-router'; import { renderToHtml } from '../../services'; @@ -89,8 +87,8 @@ export const ButtonExample = { ], text: (

- Buttons will use an {''} tag if there is a href{' '} - prop present. + Buttons will use an {''} tag if there is a{' '} + href prop present.

), demo: , @@ -109,9 +107,13 @@ export const ButtonExample = { ], text: (

- The passed icon needs to come from our list of svg icons. Can be flipped { + The passed icon needs to come from our list of svg icons. Can be + flipped{' '} + { // eslint-disable-next-line react/no-unescaped-entities - } to the other side by passing iconSide="right". + }{' '} + to the other side by passing{' '} + iconSide="right".

), demo: , @@ -130,9 +132,10 @@ export const ButtonExample = { ], text: (

- Setting the isLoading prop to true will add the loading spinner or swap - the existing icon for the loading spinner and set the button to disabled. It is good - practice to also rename the button to "Loading…". + Setting the isLoading prop to true will add the + loading spinner or swap the existing icon for the loading spinner and + set the button to disabled. It is good practice to also rename the + button to "Loading…".

), demo: , @@ -151,8 +154,9 @@ export const ButtonExample = { ], text: (

- EuiButtonEmpty is used when you want to make a button look like a - regular link, but still want to align it to the rest of the buttons. + EuiButtonEmpty is used when you want to make a + button look like a regular link, but still want to align it to the + rest of the buttons.

), props: { EuiButtonEmpty }, @@ -172,9 +176,10 @@ export const ButtonExample = { ], text: (

- When aligning EuiButtonEmpty components to the left or the right, you - should make sure they’re flush with the edge of their container, so that - they’re horizontally aligned with the other content in the container. + When aligning EuiButtonEmpty components to the left + or the right, you should make sure they’re flush with the edge + of their container, so that they’re horizontally aligned with + the other content in the container.

), demo: , @@ -191,7 +196,9 @@ export const ButtonExample = { code: buttonIconHtml, }, ], - text:

Button icons are buttons that only contain an icon (no text).

, + text: ( +

Button icons are buttons that only contain an icon (no text).

+ ), props: { EuiButtonIcon }, demo: , }, @@ -210,15 +217,18 @@ export const ButtonExample = { text: (

- This is a specialized component that combines EuiButton and{' '} - EuiToggle to create a button with an on/off state. You can pass all - the same parameters to it as you can to EuiButton. The main - difference is that, it does not accept any children, but a label prop - instead. This is for the handling of accessibility with the EuiToggle. + This is a specialized component that combines{' '} + EuiButton and EuiToggle to + create a button with an on/off state. You can pass all the same + parameters to it as you can to EuiButton. The + main difference is that, it does not accept any children, but a{' '} + label prop instead. This is for the handling of + accessibility with the EuiToggle.

- The EuiButtonToggle does not have any inherit visual state - differences. These you must apply in your implementation. + The EuiButtonToggle does not have any inherit + visual state differences. These you must apply in your + implementation.

), @@ -240,22 +250,26 @@ export const ButtonExample = { text: (

- Button groups are handled similarly to the way checkbox and radio groups are handled but - made to look like buttons. They group multiple EuiButtonToggles and - utilize the type="single" or{' '} - "multi" prop to determine whether multiple or only single - selections are allowed per group. + Button groups are handled similarly to the way checkbox and radio + groups are handled but made to look like buttons. They group + multiple EuiButtonToggles and utilize the{' '} + type="single" or{' '} + "multi" prop to determine whether + multiple or only single selections are allowed per group.

- Stylistically, all button groups are the size of small buttons, do not stretch to fill - the container, and typically should only be color="text"{' '} - (default) or "primary". If you're just displaying a group of - icons, add the prop isIconOnly. + Stylistically, all button groups are the size of small buttons, do + not stretch to fill the container, and typically should only be{' '} + color="text" (default) or{' '} + "primary". If you're just + displaying a group of icons, add the prop{' '} + isIconOnly.

- In order for groups to be properly read as groups with a title, add the legend prop. - This is only for accessibility, however, so it will be visibly hidden. + In order for groups to be properly read as groups with a title, + add the legend prop. This is only for + accessibility, however, so it will be visibly hidden.

@@ -278,9 +292,10 @@ export const ButtonExample = { text: (

For buttons on dark color backgrounds, you can pass{' '} - color='ghost' to any of the button styles on this page. These - should be used extremely rarely, and are only for placing buttons on top of dark or - image-based backgrounds. A good example of their use is in the{' '} + color='ghost' to any of the button styles + on this page. These should be used extremely rarely, and are only for + placing buttons on top of dark or image-based backgrounds. A good + example of their use is in the{' '} EuiBottomBar component.

), diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js index ff7e04fd48a..e60e3d94cb8 100644 --- a/src-docs/src/views/button/button_ghost.js +++ b/src-docs/src/views/button/button_ghost.js @@ -18,18 +18,21 @@ export default class extends Component { }; } - onToggle0Change = (e) => { + onToggle0Change = e => { this.setState({ toggle0On: e.target.checked }); - } + }; render() { return ( - + window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Primary @@ -40,8 +43,7 @@ export default class extends Component { color="ghost" size="s" iconType="check" - onClick={() => window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Filled @@ -50,8 +52,7 @@ export default class extends Component { window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small @@ -67,21 +68,13 @@ export default class extends Component { - + Loading… - + Loading… diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js index 1138751fb77..4170b493de3 100644 --- a/src-docs/src/views/button/button_group.js +++ b/src-docs/src/views/button/button_group.js @@ -1,7 +1,4 @@ -import React, { - Component, - Fragment, -} from 'react'; +import React, { Component, Fragment } from 'react'; import { EuiButtonGroup, @@ -19,63 +16,80 @@ export default class extends Component { const idPrefix2 = makeId(); const idPrefix3 = makeId(); - this.toggleButtons = [{ - id: `${idPrefix}0`, - label: 'Option one', - }, { - id: `${idPrefix}1`, - label: 'Option two is selected by default', - }, { - id: `${idPrefix}2`, - label: 'Option three', - }]; - - this.toggleButtonsMulti = [{ - id: `${idPrefix2}0`, - label: 'Option 1', - }, { - id: `${idPrefix2}1`, - label: 'Option 2 is selected by default', - }, { - id: `${idPrefix2}2`, - label: 'Option 3', - }]; - - this.toggleButtonsIcons = [{ - id: `${idPrefix3}0`, - label: 'Align left', - iconType: 'editorAlignLeft', - }, { - id: `${idPrefix3}1`, - label: 'Align center', - iconType: 'editorAlignCenter', - }, { - id: `${idPrefix3}2`, - label: 'Align right', - iconType: 'editorAlignRight', - }]; - - this.toggleButtonsIconsMulti = [{ - id: `${idPrefix3}3`, - label: 'Bold', - name: 'bold', - iconType: 'editorBold', - }, { - id: `${idPrefix3}4`, - label: 'Italic', - name: 'italic', - iconType: 'editorItalic', - }, { - id: `${idPrefix3}5`, - label: 'Underline', - name: 'underline', - iconType: 'editorUnderline', - }, { - id: `${idPrefix3}6`, - label: 'Strikethrough', - name: 'strikethrough', - iconType: 'editorStrike', - }]; + this.toggleButtons = [ + { + id: `${idPrefix}0`, + label: 'Option one', + }, + { + id: `${idPrefix}1`, + label: 'Option two is selected by default', + }, + { + id: `${idPrefix}2`, + label: 'Option three', + }, + ]; + + this.toggleButtonsMulti = [ + { + id: `${idPrefix2}0`, + label: 'Option 1', + }, + { + id: `${idPrefix2}1`, + label: 'Option 2 is selected by default', + }, + { + id: `${idPrefix2}2`, + label: 'Option 3', + }, + ]; + + this.toggleButtonsIcons = [ + { + id: `${idPrefix3}0`, + label: 'Align left', + iconType: 'editorAlignLeft', + }, + { + id: `${idPrefix3}1`, + label: 'Align center', + iconType: 'editorAlignCenter', + }, + { + id: `${idPrefix3}2`, + label: 'Align right', + iconType: 'editorAlignRight', + }, + ]; + + this.toggleButtonsIconsMulti = [ + { + id: `${idPrefix3}3`, + label: 'Bold', + name: 'bold', + iconType: 'editorBold', + }, + { + id: `${idPrefix3}4`, + label: 'Italic', + name: 'italic', + iconType: 'editorItalic', + }, + { + id: `${idPrefix3}5`, + label: 'Underline', + name: 'underline', + iconType: 'editorUnderline', + }, + { + id: `${idPrefix3}6`, + label: 'Strikethrough', + name: 'strikethrough', + iconType: 'editorStrike', + }, + ]; this.state = { toggleIdSelected: `${idPrefix}1`, @@ -94,9 +108,12 @@ export default class extends Component { }; onChangeMulti = optionId => { - const newToggleIdToSelectedMap = ({ ...this.state.toggleIdToSelectedMap, ...{ - [optionId]: !this.state.toggleIdToSelectedMap[optionId], - } }); + const newToggleIdToSelectedMap = { + ...this.state.toggleIdToSelectedMap, + ...{ + [optionId]: !this.state.toggleIdToSelectedMap[optionId], + }, + }; this.setState({ toggleIdToSelectedMap: newToggleIdToSelectedMap, @@ -110,9 +127,12 @@ export default class extends Component { }; onChangeIconsMulti = optionId => { - const newToggleIconIdToSelectedMap = ({ ...this.state.toggleIconIdToSelectedMap, ...{ - [optionId]: !this.state.toggleIconIdToSelectedMap[optionId], - } }); + const newToggleIconIdToSelectedMap = { + ...this.state.toggleIconIdToSelectedMap, + ...{ + [optionId]: !this.state.toggleIconIdToSelectedMap[optionId], + }, + }; this.setState({ toggleIconIdToSelectedMap: newToggleIconIdToSelectedMap, @@ -128,13 +148,11 @@ export default class extends Component { idSelected={this.state.toggleIdSelected} onChange={this.onChange} /> - - -

Primary & multi select

- + +

Primary & multi select

+
- - - -

Disabled & full width

- + +

Disabled & full width

+
- - - -

Icons only

- + +

Icons only

+
- -    - ( - { - colors.map((color) => ( - - window.alert('Button clicked')} - iconType="arrowRight" - aria-label="Next" - disabled={color === 'disabled' ? true : false} - /> - - )) - } + {colors.map(color => ( + + window.alert('Button clicked')} + iconType="arrowRight" + aria-label="Next" + disabled={color === 'disabled' ? true : false} + /> + + ))} ); diff --git a/src-docs/src/views/button/button_loading.js b/src-docs/src/views/button/button_loading.js index 83de570f791..b4776602db1 100644 --- a/src-docs/src/views/button/button_loading.js +++ b/src-docs/src/views/button/button_loading.js @@ -3,15 +3,13 @@ import React from 'react'; import { EuiButton, EuiFlexGroup, - EuiFlexItem + EuiFlexItem, } from '../../../../src/components'; export default () => ( - - Loading… - + Loading… diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js index ac22cdb7275..cc90d7460e9 100644 --- a/src-docs/src/views/button/button_toggle.js +++ b/src-docs/src/views/button/button_toggle.js @@ -19,17 +19,17 @@ export default class extends Component { }; } - onToggle0Change = (e) => { + onToggle0Change = e => { this.setState({ toggle0On: e.target.checked }); - } + }; - onToggle1Change = (e) => { + onToggle1Change = e => { this.setState({ toggle1On: e.target.checked }); - } + }; - onToggle4Change = (e) => { + onToggle4Change = e => { this.setState({ toggle4On: e.target.checked }); - } + }; render() { return ( @@ -40,18 +40,18 @@ export default class extends Component { onChange={this.onToggle0Change} isSelected={this.state.toggle0On} /> -   - -   - - - -

Disabled

- + +

Disabled

+
- -   - ( window.alert('Button clicked')} - iconType="arrowUp" - > + iconType="arrowUp"> Primary @@ -22,8 +21,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Filled
@@ -32,8 +30,7 @@ export default () => ( window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small @@ -43,8 +40,7 @@ export default () => ( iconType="arrowRight" size="s" fill - onClick={() => window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small and filled @@ -55,8 +51,7 @@ export default () => ( window.alert('Button clicked')} - iconType="arrowUp" - > + iconType="arrowUp"> Primary @@ -66,8 +61,7 @@ export default () => ( iconSide="right" fill iconType="arrowDown" - onClick={() => window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> Filled @@ -77,8 +71,7 @@ export default () => ( iconSide="right" iconType="arrowLeft" size="s" - onClick={() => window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small @@ -89,8 +82,7 @@ export default () => ( iconType="arrowRight" size="s" fill - onClick={() => window.alert('Button clicked')} - > + onClick={() => window.alert('Button clicked')}> small and filled @@ -102,8 +94,7 @@ export default () => ( iconSide="right" onClick={() => window.alert('Button clicked')} iconType="arrowUp" - isDisabled - > + isDisabled> Disabled @@ -114,8 +105,7 @@ export default () => ( fill iconType="arrowDown" onClick={() => window.alert('Button clicked')} - isDisabled - > + isDisabled> Filled @@ -126,8 +116,7 @@ export default () => ( iconType="arrowLeft" size="s" onClick={() => window.alert('Button clicked')} - isDisabled - > + isDisabled> small @@ -139,8 +128,7 @@ export default () => ( size="s" fill onClick={() => window.alert('Button clicked')} - isDisabled - > + isDisabled> small and filled diff --git a/src-docs/src/views/call_out/call_out_example.js b/src-docs/src/views/call_out/call_out_example.js index 216fdbb8e95..378f5f93400 100644 --- a/src-docs/src/views/call_out/call_out_example.js +++ b/src-docs/src/views/call_out/call_out_example.js @@ -1,12 +1,8 @@ -import React, { - Fragment, -} from 'react'; +import React, { Fragment } from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiCallOut, @@ -37,101 +33,116 @@ export const CallOutExample = {

- EuiCallOut contains a message directly - related to content on the page. - This includes general information, success, warning, and error messages. + EuiCallOut contains a message directly related to + content on the page. This includes general information, success, + warning, and error messages.

Keep these guidelines in mind:

    +
  • Minimize the number of callouts per page.
  • - Minimize the number of callouts per page. -
  • -
  • - Stack callouts in the order in which - they require users' attention: - error, warning, info, and then success. + Stack callouts in the order in which they require users' + attention: error, warning, info, and then success.
  • - Offer only one action per callout and ensure it's an action users can perform quickly. + Offer only one action per callout and ensure it's an action + users can perform quickly.
  • - If the callout has a permanent spot in the UI, but needs to be less obstructive, - set the size property to s (small). + If the callout has a permanent spot in the UI, but needs to be less + obstructive, set the size property to{' '} + s (small).
  • Use an icon prop if it adds context.
- +
), - sections: [{ - title: 'Info', - source: [{ - type: GuideSectionTypes.JS, - code: infoSource, - }, { - type: GuideSectionTypes.HTML, - code: infoHtml, - }], - text: ( -
+ sections: [ + { + title: 'Info', + source: [ + { + type: GuideSectionTypes.JS, + code: infoSource, + }, + { + type: GuideSectionTypes.HTML, + code: infoHtml, + }, + ], + text: ( +
+

+ Use EuiCallOut to communicate general information + to the user. +

+
+ ), + props: { EuiCallOut }, + demo: , + }, + { + title: 'Success', + source: [ + { + type: GuideSectionTypes.JS, + code: successSource, + }, + { + type: GuideSectionTypes.HTML, + code: successHtml, + }, + ], + text: ( +

+ Use this callout to notify the user of an action that succesfully + completed. Use success callouts sparingly—callouts are typically + used for things that are broken rather than things that succeed. +

+ ), + demo: , + }, + { + title: 'Warning', + source: [ + { + type: GuideSectionTypes.JS, + code: warningSource, + }, + { + type: GuideSectionTypes.HTML, + code: warningHtml, + }, + ], + text: (

- Use EuiCallOut to communicate general information to the user. + Use this callout to warn the user against decisions they might regret.

-
- ), - props: { EuiCallOut }, - demo: , - }, { - title: 'Success', - source: [{ - type: GuideSectionTypes.JS, - code: successSource, - }, { - type: GuideSectionTypes.HTML, - code: successHtml, - }], - text: ( -

- Use this callout to notify the user of an action that succesfully completed. - Use success callouts sparingly—callouts are typically used for things that - are broken rather than things that succeed. -

- ), - demo: , - }, { - title: 'Warning', - source: [{ - type: GuideSectionTypes.JS, - code: warningSource, - }, { - type: GuideSectionTypes.HTML, - code: warningHtml, - }], - text: ( -

- Use this callout to warn the user against decisions they might regret. -

- ), - demo: , - }, { - title: 'Danger', - source: [{ - type: GuideSectionTypes.JS, - code: dangerSource, - }, { - type: GuideSectionTypes.HTML, - code: dangerHtml, - }], - text: ( -

- Use this callout to let the user know that something went wrong. -

- ), - demo: , - }], + ), + demo: , + }, + { + title: 'Danger', + source: [ + { + type: GuideSectionTypes.JS, + code: dangerSource, + }, + { + type: GuideSectionTypes.HTML, + code: dangerHtml, + }, + ], + text: ( +

Use this callout to let the user know that something went wrong.

+ ), + demo: , + }, + ], }; diff --git a/src-docs/src/views/call_out/danger.js b/src-docs/src/views/call_out/danger.js index ab4403e3485..87e690c0149 100644 --- a/src-docs/src/views/call_out/danger.js +++ b/src-docs/src/views/call_out/danger.js @@ -1,18 +1,12 @@ import React from 'react'; -import { - EuiCallOut, - EuiLink, -} from '../../../../src/components'; +import { EuiCallOut, EuiLink } from '../../../../src/components'; export default () => ( - +

- Now you have to fix it, but maybe this link can help. + Now you have to fix it, but maybe{' '} + this link can help.

); diff --git a/src-docs/src/views/call_out/info.js b/src-docs/src/views/call_out/info.js index 3235a63799a..c16d671d272 100644 --- a/src-docs/src/views/call_out/info.js +++ b/src-docs/src/views/call_out/info.js @@ -1,23 +1,20 @@ import React from 'react'; -import { - EuiCallOut, - EuiLink, - EuiSpacer, -} from '../../../../src/components'; +import { EuiCallOut, EuiLink, EuiSpacer } from '../../../../src/components'; 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 narrow, it will wrap, too. + 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 + narrow, it will wrap, too.

- And some other stuff on another line, just for kicks. And here’s a link. + And some other stuff on another line, just for kicks. And{' '} + here’s a link.

@@ -35,6 +32,5 @@ export default () => ( title="This is a small callout for more unintrusive but constant messages." iconType="pin" /> -
); diff --git a/src-docs/src/views/call_out/success.js b/src-docs/src/views/call_out/success.js index a5d3eb47673..3cd8f917c7d 100644 --- a/src-docs/src/views/call_out/success.js +++ b/src-docs/src/views/call_out/success.js @@ -1,18 +1,12 @@ import React from 'react'; -import { - EuiCallOut, - EuiLink, -} from '../../../../src/components'; +import { EuiCallOut, EuiLink } from '../../../../src/components'; export default () => ( - +

- I have no news. Which is good! And here’s a link. + I have no news. Which is good! And{' '} + here’s a link.

); diff --git a/src-docs/src/views/call_out/warning.js b/src-docs/src/views/call_out/warning.js index 943f0e7f577..ef2cf9d8b44 100644 --- a/src-docs/src/views/call_out/warning.js +++ b/src-docs/src/views/call_out/warning.js @@ -1,20 +1,15 @@ import React from 'react'; -import { - EuiCallOut, - EuiLink, - EuiButton, -} from '../../../../src/components'; +import { EuiCallOut, EuiLink, EuiButton } from '../../../../src/components'; export default () => ( - +

- Here be dragons. Don’t wanna mess with no dragons. And here’s a link. + Here be dragons. Don’t wanna mess with no dragons. And{' '} + here’s a link.

- Link button + + Link button +
); diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.js index eadc9f474df..61b63648da8 100644 --- a/src-docs/src/views/card/card.js +++ b/src-docs/src/views/card/card.js @@ -9,7 +9,7 @@ import { const icons = ['Beats', 'Cloud', 'Xpack', 'Kibana']; -const cardNodes = icons.map(function (item, index) { +const cardNodes = icons.map(function(item, index) { return ( ( - - {cardNodes} - -); +export default () => {cardNodes}; diff --git a/src-docs/src/views/card/card_beta.js b/src-docs/src/views/card/card_beta.js index 8dcf97c399b..209e1966a90 100644 --- a/src-docs/src/views/card/card_beta.js +++ b/src-docs/src/views/card/card_beta.js @@ -10,7 +10,7 @@ import { const icons = ['dashboard', 'monitoring', 'watches']; const badges = [null, 'Beta', 'Lab']; -const cardNodes = icons.map(function (item, index) { +const cardNodes = icons.map(function(item, index) { return ( window.alert('Card clicked')} /> ); }); -export default () => ( - - {cardNodes} - -); +export default () => {cardNodes}; diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index f658f1d6807..69699747df0 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -2,19 +2,11 @@ import React, { Fragment } from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiCard, - EuiCallOut, -} from '../../../../src/components'; +import { EuiCode, EuiCard, EuiCallOut } from '../../../../src/components'; -import { - EuiCardSelect -} from '../../../../src/components/card/card_select'; +import { EuiCardSelect } from '../../../../src/components/card/card_select'; import Card from './card'; const cardSource = require('!!raw-loader!./card'); @@ -42,157 +34,191 @@ const cardSelectableHtml = renderToHtml(CardSelectable); export const CardExample = { title: 'Card', - sections: [{ - title: 'Basic Card', - source: [{ - type: GuideSectionTypes.JS, - code: cardSource, - }, { - type: GuideSectionTypes.HTML, - code: cardHtml, - }], - text: ( -
+ sections: [ + { + title: 'Basic Card', + source: [ + { + type: GuideSectionTypes.JS, + code: cardSource, + }, + { + type: GuideSectionTypes.HTML, + code: cardHtml, + }, + ], + text: ( +
+

+ At its core an EuiCard should contain a{' '} + title,description, and an{' '} + icon. You can make the whole card clickable by + giving it an onClick handler. +

+

+ By default a card's title element is a span. + This can be changed via the titleElement prop. + However, if an onClick function is also passed, + the title element will be forced back to a span. +

+

+ By default a card's content is center aligned. To change the + alignment set textAlign to{' '} + left or right. +

+
+ ), + props: { EuiCard }, + demo: , + }, + { + title: 'Layout', + source: [ + { + type: GuideSectionTypes.JS, + code: cardLayoutSource, + }, + { + type: GuideSectionTypes.HTML, + code: cardLayoutHtml, + }, + ], + text: ( +
+

+ Most of the time, cards should read from top to bottom (vertical). + However, in some cases, you may want the icon to be to the left of + the content. In this case, add the prop{' '} + layout="horizontal". +

+ + Horizontal layouts do not work with images, + footers, or textAlign. Therefore, these + properties will be ignored. + + } + /> +
+ ), + props: { EuiCard }, + demo: , + }, + { + title: 'Images', + source: [ + { + type: GuideSectionTypes.JS, + code: cardImageSource, + }, + { + type: GuideSectionTypes.HTML, + code: cardImageHtml, + }, + ], + text: ( +
+

+ Images can be added in place of, or in conjuction with, icons. Just + pass a url into the image prop and it will expand + to the edges of the card. +

+ + Make sure that all images are the{' '} + same proportions when used in a singular row. + + } + /> +
+ ), + props: { EuiCard }, + demo: , + }, + { + title: 'Footer', + source: [ + { + type: GuideSectionTypes.JS, + code: cardFooterSource, + }, + { + type: GuideSectionTypes.HTML, + code: cardFooterHtml, + }, + ], + text: (

- At its core an EuiCard should contain a title, - description, and an icon. You can make the whole card - clickable by giving it an onClick handler. + Footers can contain any number of elements and will always align to + the bottom of the card. However, if you supply a footer containing a{' '} + EuiButton you must not also give + it an onClick.

+ ), + components: { EuiCard }, + demo: , + }, + { + title: 'Beta badge', + source: [ + { + type: GuideSectionTypes.JS, + code: cardBetaSource, + }, + { + type: GuideSectionTypes.HTML, + code: cardBetaHtml, + }, + ], + text: (

- By default a card's title element is a span. This can be changed via - the titleElement prop. However, if an onClick function is - also passed, the title element will be forced back to a span. + If the card links to or references a module that is not GA (beta, lab, + etc), you can add a betaBadgeLabel and{' '} + betaBadgeTooltipContent to the card and it will + properly create and position an EuiBetaBadge. If + you want to change the title of the tooltip, supply a{' '} + betaBadgeTitle prop.

-

- By default a card's content is center aligned. To change the alignment - set textAlign to left or right. -

-
- ), - props: { EuiCard }, - demo: , - }, - { - title: 'Layout', - source: [{ - type: GuideSectionTypes.JS, - code: cardLayoutSource, - }, { - type: GuideSectionTypes.HTML, - code: cardLayoutHtml, - }], - text: ( -
-

- Most of the time, cards should read from top to bottom (vertical). However, in some cases, you may - want the icon to be to the left of the content. In this case, add - the prop layout="horizontal". -

- Horizontal layouts do not work with images, - footers, or textAlign. Therefore, these properties will be ignored. - - } - /> -
- ), - props: { EuiCard }, - demo: , - }, - { - title: 'Images', - source: [{ - type: GuideSectionTypes.JS, - code: cardImageSource, - }, { - type: GuideSectionTypes.HTML, - code: cardImageHtml, - }], - text: ( -
-

- Images can be added in place of, or in conjuction with, icons. - Just pass a url into the image prop and it will expand to the edges of the card. -

- Make sure that all images are the same proportions when - used in a singular row. - - } - /> -
- ), - props: { EuiCard }, - demo: , - }, - { - title: 'Footer', - source: [{ - type: GuideSectionTypes.JS, - code: cardFooterSource, - }, { - type: GuideSectionTypes.HTML, - code: cardFooterHtml, - }], - text: ( -

- Footers can contain any number of elements and will always align to the bottom of the card. - However, if you supply a footer containing a EuiButton you must not also - give it an onClick. -

- ), - components: { EuiCard }, - demo: , - }, - { - title: 'Beta badge', - source: [{ - type: GuideSectionTypes.JS, - code: cardBetaSource, - }, { - type: GuideSectionTypes.HTML, - code: cardBetaHtml, - }], - text: ( -

- If the card links to or references a module that is not GA (beta, lab, etc), - you can add a betaBadgeLabel and betaBadgeTooltipContent to - the card and it will properly create and position an EuiBetaBadge. If you want to - change the title of the tooltip, supply a betaBadgeTitle prop. -

- ), - props: { EuiCard }, - demo: , - }, - { - title: 'Selectable', - source: [{ - type: GuideSectionTypes.JS, - code: cardSelectableSource, - }, { - type: GuideSectionTypes.HTML, - code: cardSelectableHtml, - }], - text: ( - -

- When you have a list of cards that can be selected but do not navigate anywhere, you - can add the selectable prop. The prop is an object that requires an onClick. - It will apply the button as seen below, and passing selectable.isSelected = true will alter the - styles of the card and button to look selected. -

-

- The select button is essentially an EuiButtonEmpty and so the selectable object can - also accept any props that EuiButtonEmpty can. -

-
- ), - props: { EuiCardSelect }, - demo: , - snippet: `, + }, + { + title: 'Selectable', + source: [ + { + type: GuideSectionTypes.JS, + code: cardSelectableSource, + }, + { + type: GuideSectionTypes.HTML, + code: cardSelectableHtml, + }, + ], + text: ( + +

+ When you have a list of cards that can be selected but{' '} + do not navigate anywhere, you can add the{' '} + selectable prop. The prop is an object that + requires an onClick. It will apply the button as + seen below, and passing{' '} + selectable.isSelected = true will alter the + styles of the card and button to look selected. +

+

+ The select button is essentially an EuiButtonEmpty and so the{' '} + selectable object can also accept any props that + EuiButtonEmpty can. +

+
+ ), + props: { EuiCardSelect }, + demo: , + snippet: `} title="Title" description="Example of a short card description." @@ -202,7 +228,7 @@ export const CardExample = { isSelected: this.state.cardIsSelected, isDisabled: this.state.cardIsDisabled, }} -/>` - }, +/>`, + }, ], }; diff --git a/src-docs/src/views/card/card_footer.js b/src-docs/src/views/card/card_footer.js index 61876756252..9e3cd713293 100644 --- a/src-docs/src/views/card/card_footer.js +++ b/src-docs/src/views/card/card_footer.js @@ -14,9 +14,11 @@ import { const cardFooterContent = (
Go for it - + -

Or try this

+

+ Or try this +

); diff --git a/src-docs/src/views/card/card_selectable.js b/src-docs/src/views/card/card_selectable.js index 1d8d86890bc..cda3c4d013a 100644 --- a/src-docs/src/views/card/card_selectable.js +++ b/src-docs/src/views/card/card_selectable.js @@ -22,20 +22,17 @@ export default class extends Component { this.setState({ card1Selected: !this.state.card1Selected, }); - } + }; card2Clicked = () => { this.setState({ card2Selected: !this.state.card2Selected, }); - } + }; render() { const cardFooterContent = ( - + More details ); diff --git a/src-docs/src/views/code/code.js b/src-docs/src/views/code/code.js index 9d33eafab4a..ad22746ee97 100644 --- a/src-docs/src/views/code/code.js +++ b/src-docs/src/views/code/code.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - EuiCode, - EuiText, -} from '../../../../src/components'; +import { EuiCode, EuiText } from '../../../../src/components'; const htmlCode = `
@@ -17,10 +14,15 @@ export default () => ( Sometimes you need to emphasize code like this.

- You can also pass a language in like {htmlCode.trim()}. + You can also pass a language in like{' '} + {htmlCode.trim()}.

- Make the background transparent like this {htmlCode.trim()}. + Make the background transparent like this{' '} + + {htmlCode.trim()} + + .

); diff --git a/src-docs/src/views/code/code_block.js b/src-docs/src/views/code/code_block.js index e9cc7f69b86..7462d5972a8 100644 --- a/src-docs/src/views/code/code_block.js +++ b/src-docs/src/views/code/code_block.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - EuiCodeBlock, - EuiSpacer, -} from '../../../../src/components'; +import { EuiCodeBlock, EuiSpacer } from '../../../../src/components'; const htmlCode = `
@@ -15,17 +12,20 @@ const jsCode = require('!!raw-loader!./code_block'); export default () => (
- - {htmlCode} - + {htmlCode} - + {jsCode} -
); diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index dcc04787401..8784af51d16 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -2,14 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiCodeBlockImpl, -} from '../../../../src/components'; +import { EuiCode, EuiCodeBlockImpl } from '../../../../src/components'; import Code from './code'; const codeSource = require('!!raw-loader!./code'); @@ -26,42 +21,51 @@ const codeBlockSnippet = ` - Code is for making inline code snippets that can work - within or next to bodies of text. -

- ), - snippet: codeSnippet, - demo: , - }, { - title: 'CodeBlock', - source: [{ - type: GuideSectionTypes.JS, - code: codeBlockSource, - }, { - type: GuideSectionTypes.HTML, - code: codeBlockHtml, - }], - text: ( -

- EuiCodeBlock can be used to create multi-line code - blocks. Copy and fullscreen buttons can be enabled via the - isCopyable and overflowHeight - props, respectively. -

- ), - snippet: codeBlockSnippet, - props: { EuiCodeBlockImpl }, - demo: , - }], + sections: [ + { + title: 'Inline', + source: [ + { + type: GuideSectionTypes.JS, + code: codeSource, + }, + { + type: GuideSectionTypes.HTML, + code: codeHtml, + }, + ], + text: ( +

+ Code is for making inline code snippets that can + work within or next to bodies of text. +

+ ), + snippet: codeSnippet, + demo: , + }, + { + title: 'CodeBlock', + source: [ + { + type: GuideSectionTypes.JS, + code: codeBlockSource, + }, + { + type: GuideSectionTypes.HTML, + code: codeBlockHtml, + }, + ], + text: ( +

+ EuiCodeBlock can be used to create multi-line code + blocks. Copy and fullscreen buttons can be enabled via the + isCopyable and overflowHeight + props, respectively. +

+ ), + snippet: codeBlockSnippet, + props: { EuiCodeBlockImpl }, + demo: , + }, + ], }; diff --git a/src-docs/src/views/code_editor/code_editor.js b/src-docs/src/views/code_editor/code_editor.js index 40f520526c5..d635686cffd 100644 --- a/src-docs/src/views/code_editor/code_editor.js +++ b/src-docs/src/views/code_editor/code_editor.js @@ -5,16 +5,14 @@ import 'brace/mode/javascript'; import 'brace/snippets/javascript'; import 'brace/ext/language_tools'; -import { - EuiCodeEditor, -} from '../../../../src/components'; +import { EuiCodeEditor } from '../../../../src/components'; export default class extends Component { state = { - value: '' + value: '', }; - onChange = (value) => { + onChange = value => { this.setState({ value }); }; @@ -32,7 +30,9 @@ export default class extends Component { enableSnippets: true, enableLiveAutocompletion: true, }} - onBlur={() => { console.log('blur'); }} // eslint-disable-line no-console + onBlur={() => { + console.log('blur'); + }} // eslint-disable-line no-console aria-label="Code Editor" /> ); diff --git a/src-docs/src/views/code_editor/code_editor_example.js b/src-docs/src/views/code_editor/code_editor_example.js index 338f6a9f862..c82da746725 100644 --- a/src-docs/src/views/code_editor/code_editor_example.js +++ b/src-docs/src/views/code_editor/code_editor_example.js @@ -2,14 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiCodeEditor, -} from '../../../../src/components'; +import { EuiCode, EuiCodeEditor } from '../../../../src/components'; import CodeEditor from './code_editor'; const codeEditorSource = require('!!raw-loader!./code_editor'); @@ -25,48 +20,62 @@ const customModeHtml = renderToHtml(CustomMode); export const CodeEditorExample = { title: 'Code Editor', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: codeEditorSource, - }, { - type: GuideSectionTypes.HTML, - code: codeEditorHtml, - }], - text: ( -
-

- The EuiCodeEditor component is a wrapper around react-ace (which - itself wraps the ACE code editor), that adds an accessible keyboard mode - to it. You should always use this component instead of AceEditor. -

-

- All parameters, that you specify are passed down to the - underlying AceEditor component. -

-
- ), - props: { EuiCodeEditor }, - demo: , - }, { - title: 'Read-only', - source: [{ - type: GuideSectionTypes.JS, - code: readOnlySource, - }, { - type: GuideSectionTypes.HTML, - code: readOnlyrHtml, - }], - demo: , - }, { - title: 'Custom mode', - source: [{ - type: GuideSectionTypes.JS, - code: customModeSource, - }, { - type: GuideSectionTypes.HTML, - code: customModeHtml, - }], - demo: , - }], + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: codeEditorSource, + }, + { + type: GuideSectionTypes.HTML, + code: codeEditorHtml, + }, + ], + text: ( +
+

+ The EuiCodeEditor component is a wrapper around{' '} + react-ace (which itself wraps the ACE code + editor), that adds an accessible keyboard mode to it. You should + always use this component instead of AceEditor. +

+

+ All parameters, that you specify are passed down to the underlying{' '} + AceEditor component. +

+
+ ), + props: { EuiCodeEditor }, + demo: , + }, + { + title: 'Read-only', + source: [ + { + type: GuideSectionTypes.JS, + code: readOnlySource, + }, + { + type: GuideSectionTypes.HTML, + code: readOnlyrHtml, + }, + ], + demo: , + }, + { + title: 'Custom mode', + source: [ + { + type: GuideSectionTypes.JS, + code: customModeSource, + }, + { + type: GuideSectionTypes.HTML, + code: customModeHtml, + }, + ], + demo: , + }, + ], }; diff --git a/src-docs/src/views/code_editor/custom_mode.js b/src-docs/src/views/code_editor/custom_mode.js index 7e3bbd66050..8bbffadd22c 100644 --- a/src-docs/src/views/code_editor/custom_mode.js +++ b/src-docs/src/views/code_editor/custom_mode.js @@ -1,9 +1,7 @@ import React, { Component } from 'react'; import 'brace/mode/text'; -import { - EuiCodeEditor, -} from '../../../../src/components'; +import { EuiCodeEditor } from '../../../../src/components'; const TextMode = window.ace.acequire('ace/mode/text').Mode; class MyCustomAceMode extends TextMode { @@ -13,7 +11,7 @@ class MyCustomAceMode extends TextMode { export default class extends Component { state = { - value: '' + value: '', }; render() { diff --git a/src-docs/src/views/code_editor/read_only.js b/src-docs/src/views/code_editor/read_only.js index c8f6a668c63..2f7cddab6e5 100644 --- a/src-docs/src/views/code_editor/read_only.js +++ b/src-docs/src/views/code_editor/read_only.js @@ -3,13 +3,11 @@ import React, { Component } from 'react'; import 'brace/mode/less'; import 'brace/theme/github'; -import { - EuiCodeEditor, -} from '../../../../src/components'; +import { EuiCodeEditor } from '../../../../src/components'; export default class extends Component { state = { - value: '

This code is read only

' + value: '

This code is read only

', }; render() { diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index e4c3b88536c..34b67d010fc 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/src-docs/src/views/color_palette/color_palette.js @@ -7,32 +7,34 @@ import { EuiSpacer, } from '../../../../src/components'; -import { - palettes, -} from '../../../../src/services'; +import { palettes } from '../../../../src/services'; const paletteData = palettes; const paletteNames = Object.keys(paletteData); export default () => ( - { - paletteNames.map((paletteName, i) => ( -
-

{paletteName}

- - - { - paletteData[paletteName].colors.map((hexCode, j) => ( - - - - )) - } - - -
- )) - } + {paletteNames.map((paletteName, i) => ( +
+ +

{paletteName}

+
+ + + {paletteData[paletteName].colors.map((hexCode, j) => ( + + + + ))} + + +
+ ))}
); diff --git a/src-docs/src/views/color_palette/color_palette_custom.js b/src-docs/src/views/color_palette/color_palette_custom.js index 1e13af6364f..ef4682e1b61 100644 --- a/src-docs/src/views/color_palette/color_palette_custom.js +++ b/src-docs/src/views/color_palette/color_palette_custom.js @@ -7,56 +7,63 @@ import { EuiSpacer, } from '../../../../src/components'; -import { - colorPalette, - palettes, -} from '../../../../src/services'; +import { colorPalette, palettes } from '../../../../src/services'; const euiColors = palettes.euiPaletteForLightBackground.colors; export default () => ( -

For mapping density, low to high

+ +

For mapping density, low to high

+
- { - euiColors.map((color, j) => ( -
- - { - colorPalette('FFFFFF', color, 20).map((hexCode, k) => ( - - - - )) - } - - -
- )) - } + {euiColors.map((color, j) => ( +
+ + {colorPalette('FFFFFF', color, 20).map((hexCode, k) => ( + + + + ))} + + +
+ ))} -

For communicating state, trending negative

+ +

For communicating state, trending negative

+
- { - colorPalette('#FBEFD3', '#BD4C48').map((hexCode, l) => ( - - - - )) - } + {colorPalette('#FBEFD3', '#BD4C48').map((hexCode, l) => ( + + + + ))} -

For communicating state, trending positive

+ +

For communicating state, trending positive

+
- { - colorPalette('#FFFFE0', '#017F75').map((hexCode, l) => ( - - - - )) - } + {colorPalette('#FFFFE0', '#017F75').map((hexCode, l) => ( + + + + ))}
); diff --git a/src-docs/src/views/color_palette/color_palette_example.js b/src-docs/src/views/color_palette/color_palette_example.js index 6b1c97ffc2a..cfa0bc72494 100644 --- a/src-docs/src/views/color_palette/color_palette_example.js +++ b/src-docs/src/views/color_palette/color_palette_example.js @@ -2,13 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, -} from '../../../../src/components'; +import { EuiCode } from '../../../../src/components'; import ColorPalette from './color_palette'; const colorPaletteSource = require('!!raw-loader!./color_palette'); @@ -24,69 +20,89 @@ const colorPaletteHistogramHtml = renderToHtml(ColorPaletteHistogram); export const ColorPaletteExample = { title: 'Color Palettes', - sections: [{ - title: 'Preset qualitative palettes', - source: [{ - type: GuideSectionTypes.JS, - code: colorPaletteSource, - }, { - type: GuideSectionTypes.HTML, - code: colorPaletteHtml, - }], - text: ( -
+ sections: [ + { + title: 'Preset qualitative palettes', + source: [ + { + type: GuideSectionTypes.JS, + code: colorPaletteSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorPaletteHtml, + }, + ], + text: ( +
+

+ The eui_palettes.js file provides a base set of + color palettes in an array format. The hexadecimal color codes in + these sets consist of both color safe and EUI themed colors. Import + the file, then use JavaScript to read and apply the color array + values to other EUI components, such as charts. +

+

+ Quantitative palettes are best suited for communicating and + comparing discrete data series. +

+
+ ), + demo: , + }, + { + title: 'Recommended quantitative palettes', + source: [ + { + type: GuideSectionTypes.JS, + code: colorPaletteCustomSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorPaletteCustomHtml, + }, + ], + text: ( +
+

+ Use the colorPalette service to generate a + custom, gradiated palette array of any length from two hexadecimal + color codes. For example, obtain an array of yellow-to-green health + status colors using + + colorPalette('#FFFF6D', '#1EA593', 20) + + . +

+

+ Custom palettes are best suited for displaying data on a continuum, + as in the case of health statuses and large geographic or + demographic-based data sets. +

+
+ ), + demo: , + }, + { + title: 'Usage examples', + source: [ + { + type: GuideSectionTypes.JS, + code: colorPaletteHistogramSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorPaletteHistogramHtml, + }, + ], + text: (

- The eui_palettes.js file provides a base set of color palettes in - an array format. The hexadecimal color codes in these sets consist of both color safe - and EUI themed colors. Import the file, then use JavaScript to read and apply the color - array values to other EUI components, such as charts. + Apply the colors from eui_palettes.js or the{' '} + colorPalette + service to the color prop of EUI chart components.

-

- Quantitative palettes are best suited for communicating and comparing discrete - data series. -

-
- ), - demo: , - }, { - title: 'Recommended quantitative palettes', - source: [{ - type: GuideSectionTypes.JS, - code: colorPaletteCustomSource, - }, { - type: GuideSectionTypes.HTML, - code: colorPaletteCustomHtml, - }], - text: ( -
-

- Use the colorPalette service to generate a custom, gradiated palette - array of any length from two hexadecimal color codes. For example, obtain an array of - yellow-to-green health status colors using - colorPalette('#FFFF6D', '#1EA593', 20). -

-

- Custom palettes are best suited for displaying data on a continuum, as in the case of - health statuses and large geographic or demographic-based data sets. -

-
- ), - demo: , - }, { - title: 'Usage examples', - source: [{ - type: GuideSectionTypes.JS, - code: colorPaletteHistogramSource, - }, { - type: GuideSectionTypes.HTML, - code: colorPaletteHistogramHtml, - }], - text: ( -

- Apply the colors from eui_palettes.js or the colorPalette - service to the color prop of EUI chart components. -

- ), - demo: , - }], + ), + demo: , + }, + ], }; diff --git a/src-docs/src/views/color_palette/color_palette_histogram.js b/src-docs/src/views/color_palette/color_palette_histogram.js index a95ca495636..c525ffefdb3 100644 --- a/src-docs/src/views/color_palette/color_palette_histogram.js +++ b/src-docs/src/views/color_palette/color_palette_histogram.js @@ -1,17 +1,12 @@ import React, { Component, Fragment } from 'react'; -import { - EuiSpacer, -} from '../../../../src/components'; +import { EuiSpacer } from '../../../../src/components'; import { EuiSeriesChart, EuiHistogramSeries, EuiSeriesChartUtils, } from '../../../../src/experimental'; -import { - colorPalette, - palettes, -} from '../../../../src/services/color'; +import { colorPalette, palettes } from '../../../../src/services/color'; const { SCALE } = EuiSeriesChartUtils; const timestamp = Date.now(); @@ -52,12 +47,36 @@ export default class Example extends Component { const { data } = this.state; return ( - - {data.map((d, i) => )} + + {data.map((d, i) => ( + + ))} - - {data.map((d, i) => )} + + {data.map((d, i) => ( + + ))} ); diff --git a/src-docs/src/views/color_picker/color_picker.js b/src-docs/src/views/color_picker/color_picker.js index cc2410ce8fb..4bf9802bbce 100644 --- a/src-docs/src/views/color_picker/color_picker.js +++ b/src-docs/src/views/color_picker/color_picker.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiColorPicker } from '../../../../src/components'; @@ -8,15 +6,17 @@ export class ColorPicker extends Component { constructor(props) { super(props); this.state = { - color: '#ffffff' + color: '#ffffff', }; } - handleChange = (value) => { + handleChange = value => { this.setState({ color: value }); }; render() { - return ; + return ( + + ); } } diff --git a/src-docs/src/views/color_picker/color_picker_clear.js b/src-docs/src/views/color_picker/color_picker_clear.js index bed79313a3b..abbb5012dc0 100644 --- a/src-docs/src/views/color_picker/color_picker_clear.js +++ b/src-docs/src/views/color_picker/color_picker_clear.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiColorPicker, @@ -13,11 +11,11 @@ export class ColorPickerLabelAndClear extends Component { constructor(props) { super(props); this.state = { - color: null + color: null, }; } - handleChange = (value) => { + handleChange = value => { this.setState({ color: value }); }; @@ -29,9 +27,7 @@ export class ColorPickerLabelAndClear extends Component { return ( - + diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 9a3c4c9e483..bf37c176ef2 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -2,9 +2,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { ColorPicker } from './color_picker'; const colorPickerSource = require('!!raw-loader!./color_picker'); @@ -20,34 +18,47 @@ const colorPickerNoColorLabelHtml = renderToHtml(ColorPickerNoColorLabel); export const ColorPickerExample = { title: 'Color Picker', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: colorPickerSource, - }, { - type: GuideSectionTypes.HTML, - code: colorPickerHtml, - }], - demo: , - }, { - title: 'With label and reset link', - source: [{ - type: GuideSectionTypes.JS, - code: colorPickerClearSource, - }, { - type: GuideSectionTypes.HTML, - code: colorPickerClearHtml, - }], - demo: , - }, { - title: 'Without a color label', - source: [{ - type: GuideSectionTypes.JS, - code: colorPickerNoColorLabelSource, - }, { - type: GuideSectionTypes.HTML, - code: colorPickerNoColorLabelHtml, - }], - demo: , - }], + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: colorPickerSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorPickerHtml, + }, + ], + demo: , + }, + { + title: 'With label and reset link', + source: [ + { + type: GuideSectionTypes.JS, + code: colorPickerClearSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorPickerClearHtml, + }, + ], + demo: , + }, + { + title: 'Without a color label', + source: [ + { + type: GuideSectionTypes.JS, + code: colorPickerNoColorLabelSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorPickerNoColorLabelHtml, + }, + ], + demo: , + }, + ], }; diff --git a/src-docs/src/views/color_picker/color_picker_no_color_label.js b/src-docs/src/views/color_picker/color_picker_no_color_label.js index d73e7ff0682..a60c5233b7a 100644 --- a/src-docs/src/views/color_picker/color_picker_no_color_label.js +++ b/src-docs/src/views/color_picker/color_picker_no_color_label.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiColorPicker, @@ -12,11 +10,11 @@ export class ColorPickerNoColorLabel extends Component { constructor(props) { super(props); this.state = { - color: '#00FFFF' + color: '#00FFFF', }; } - handleChange = (value) => { + handleChange = value => { this.setState({ color: value }); }; @@ -24,9 +22,7 @@ export class ColorPickerNoColorLabel extends Component { return ( - + diff --git a/src-docs/src/views/combo_box/async.js b/src-docs/src/views/combo_box/async.js index 050cc376f0e..9bda1f014e4 100644 --- a/src-docs/src/views/combo_box/async.js +++ b/src-docs/src/views/combo_box/async.js @@ -1,31 +1,41 @@ import React, { Component } from 'react'; -import { - EuiComboBox, -} from '../../../../src/components'; - -const allOptions = [{ - label: 'Titan', - 'data-test-subj': 'titanOption', -}, { - label: 'Enceladus', -}, { - label: 'Mimas', -}, { - label: 'Dione', -}, { - label: 'Iapetus', -}, { - label: 'Phoebe', -}, { - label: 'Rhea', -}, { - label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', -}, { - label: 'Tethys', -}, { - label: 'Hyperion', -}]; +import { EuiComboBox } from '../../../../src/components'; + +const allOptions = [ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus', + }, + { + label: 'Mimas', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, +]; export default class extends Component { constructor(props) { @@ -39,13 +49,13 @@ export default class extends Component { }; } - onChange = (selectedOptions) => { + onChange = selectedOptions => { this.setState({ selectedOptions, }); }; - onSearchChange = (searchValue) => { + onSearchChange = searchValue => { this.setState({ isLoading: true, options: [], @@ -57,10 +67,12 @@ export default class extends Component { // Simulate a remotely-executed search. this.setState({ isLoading: false, - options: allOptions.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase())), + options: allOptions.filter(option => + option.label.toLowerCase().includes(searchValue.toLowerCase()) + ), }); }, 1200); - } + }; onCreateOption = (searchValue, flattenedOptions) => { const normalizedSearchValue = searchValue.trim().toLowerCase(); @@ -74,9 +86,11 @@ export default class extends Component { }; // Create the option if it doesn't exist. - if (flattenedOptions.findIndex(option => - option.value.trim().toLowerCase() === normalizedSearchValue - ) === -1) { + if ( + flattenedOptions.findIndex( + option => option.value.trim().toLowerCase() === normalizedSearchValue + ) === -1 + ) { // Simulate creating this option on the server. allOptions.push(newOption); this.setState(prevState => ({ diff --git a/src-docs/src/views/combo_box/colors.js b/src-docs/src/views/combo_box/colors.js index ad338374583..c71eb6f3f76 100644 --- a/src-docs/src/views/combo_box/colors.js +++ b/src-docs/src/views/combo_box/colors.js @@ -1,53 +1,63 @@ import React, { Component } from 'react'; -import { - EuiComboBox, -} from '../../../../src/components'; +import { EuiComboBox } from '../../../../src/components'; export default class extends Component { constructor(props) { super(props); - this.options = [{ - label: 'Titan', - 'data-test-subj': 'titanOption', - color: 'primary', - }, { - label: 'Enceladus', - color: 'secondary', - }, { - label: 'Mimas', - color: '#DB1374', - }, { - label: 'Dione', - color: 'accent', - }, { - label: 'Iapetus', - color: 'primary', - color: 'warning', - }, { - label: 'Phoebe', - color: 'danger', - }, { - label: 'Rhea', - color: 'default', - }, { - label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', - color: '#F98510', - }, { - label: 'Tethys', - color: '#FEB6DB', - }, { - label: 'Hyperion', - color: '#BFA180', - }]; + this.options = [ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + color: 'primary', + }, + { + label: 'Enceladus', + color: 'secondary', + }, + { + label: 'Mimas', + color: '#DB1374', + }, + { + label: 'Dione', + color: 'accent', + }, + { + label: 'Iapetus', + color: 'primary', + color: 'warning', + }, + { + label: 'Phoebe', + color: 'danger', + }, + { + label: 'Rhea', + color: 'default', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + color: '#F98510', + }, + { + label: 'Tethys', + color: '#FEB6DB', + }, + { + label: 'Hyperion', + color: '#BFA180', + }, + ]; this.state = { selectedOptions: [this.options[2], this.options[4]], }; } - onChange = (selectedOptions) => { + onChange = selectedOptions => { this.setState({ selectedOptions, }); @@ -69,9 +79,11 @@ export default class extends Component { }; // Create the option if it doesn't exist. - if (flattenedOptions.findIndex(option => - option.label.trim().toLowerCase() === normalizedSearchValue - ) === -1) { + if ( + flattenedOptions.findIndex( + option => option.label.trim().toLowerCase() === normalizedSearchValue + ) === -1 + ) { this.options.push(newOption); } diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js index fb974705a3f..015177c6f42 100644 --- a/src-docs/src/views/combo_box/combo_box.js +++ b/src-docs/src/views/combo_box/combo_box.js @@ -1,43 +1,53 @@ import React, { Component } from 'react'; -import { - EuiComboBox, -} from '../../../../src/components'; +import { EuiComboBox } from '../../../../src/components'; export default class extends Component { constructor(props) { super(props); - this.options = [{ - label: 'Titan', - 'data-test-subj': 'titanOption', - }, { - label: 'Enceladus is disabled', - disabled: true, - }, { - label: 'Mimas', - }, { - label: 'Dione', - }, { - label: 'Iapetus', - }, { - label: 'Phoebe', - }, { - label: 'Rhea', - }, { - label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', - }, { - label: 'Tethys', - }, { - label: 'Hyperion', - }]; + this.options = [ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus is disabled', + disabled: true, + }, + { + label: 'Mimas', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, + ]; this.state = { selectedOptions: [this.options[2], this.options[4]], }; } - onChange = (selectedOptions) => { + onChange = selectedOptions => { this.setState({ selectedOptions, }); @@ -55,9 +65,11 @@ export default class extends Component { }; // Create the option if it doesn't exist. - if (flattenedOptions.findIndex(option => - option.label.trim().toLowerCase() === normalizedSearchValue - ) === -1) { + if ( + flattenedOptions.findIndex( + option => option.label.trim().toLowerCase() === normalizedSearchValue + ) === -1 + ) { this.options.push(newOption); } diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index 0a94b03ec21..4b0283fbcdd 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -1,14 +1,10 @@ import React, { Fragment } from 'react'; -import { - Link, -} from 'react-router'; +import { Link } from 'react-router'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiLink, @@ -69,219 +65,277 @@ export const ComboBoxExample = {

- Use a EuiComboBox when the input has so many options that the user - needs to be able to search them, the user needs to be able to select multiple options, - and/or the user should have the ability to specify - a custom value in addition to selecting from a predetermined list. + Use a EuiComboBox when the input has so many + options that the user needs to be able to search them, the user needs + to be able to select multiple options, and/or the user should have the + ability to specify a custom value in addition to selecting from a + predetermined list.

- +

- The combo box will have errors if any of the options you pass to it share the same label - property. It’s OK if options have duplicate values, though. This is because the label - is the only thing the combo box is concerned about, since this is what the user sees - and what is matched against when the user searches. + The combo box will have errors if any of the options you pass to it + share the same label property. It’s OK if options have duplicate + values, though. This is because the label is the only thing the combo + box is concerned about, since this is what the user sees and what is + matched against when the user searches.

), - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: comboBoxSource, - }, { - type: GuideSectionTypes.HTML, - code: comboBoxHtml, - }], - props: { EuiComboBox }, - demo: , - }, { - title: 'Disabled', - source: [{ - type: GuideSectionTypes.JS, - code: disabledSource, - }, { - type: GuideSectionTypes.HTML, - code: disabledHtml, - }], - text: ( -

- Set the prop isDisabled to make the combo box disabled. -

- ), - props: { EuiComboBox }, - demo: , - }, { - title: 'Virtualized', - source: [{ - type: GuideSectionTypes.JS, - code: virtualizedSource, - }, { - type: GuideSectionTypes.HTML, - code: virtualizedHtml, - }], - text: ( -

- EuiComboBoxList uses react-virtualized{' '} - to only render visible options to be super fast no matter how many options there are. -

- ), - props: { EuiComboBox }, - demo: , - }, { - title: 'Containers', - source: [{ - type: GuideSectionTypes.JS, - code: containersSource, - }, { - type: GuideSectionTypes.HTML, - code: containersHtml, - }], - text: ( -

- This example demonstrates how the combo box works within containers. Because this component - uses portals, it’s important that it works within other portal-using components. -

- ), - props: { EuiComboBox }, - demo: , - }, { - title: 'Pill colors', - source: [{ - type: GuideSectionTypes.JS, - code: colorsSource, - }, { - type: GuideSectionTypes.HTML, - code: colorsHtml, - }], - text: ( -

- Useful for visualization or tagging systems. You can also pass a color in - your option list. The color can be a hex value - (like #000) or any other named color value accepted by - the Badge component. -

- ), - props: { EuiComboBox }, - demo: , - }, { - title: 'Option rendering', - source: [{ - type: GuideSectionTypes.JS, - code: renderOptionSource, - }, { - type: GuideSectionTypes.HTML, - code: renderOptionHtml, - }], - text: ( - + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: comboBoxSource, + }, + { + type: GuideSectionTypes.HTML, + code: comboBoxHtml, + }, + ], + props: { EuiComboBox }, + demo: , + }, + { + title: 'Disabled', + source: [ + { + type: GuideSectionTypes.JS, + code: disabledSource, + }, + { + type: GuideSectionTypes.HTML, + code: disabledHtml, + }, + ], + text: ( +

+ Set the prop isDisabled to make the combo box + disabled. +

+ ), + props: { EuiComboBox }, + demo: , + }, + { + title: 'Virtualized', + source: [ + { + type: GuideSectionTypes.JS, + code: virtualizedSource, + }, + { + type: GuideSectionTypes.HTML, + code: virtualizedHtml, + }, + ], + text: ( +

+ EuiComboBoxList uses{' '} + + react-virtualized + {' '} + to only render visible options to be super fast no matter how many + options there are. +

+ ), + props: { EuiComboBox }, + demo: , + }, + { + title: 'Containers', + source: [ + { + type: GuideSectionTypes.JS, + code: containersSource, + }, + { + type: GuideSectionTypes.HTML, + code: containersHtml, + }, + ], + text: ( +

+ This example demonstrates how the combo box works within containers. + Because this component uses portals, it’s important that it + works within other portal-using components. +

+ ), + props: { EuiComboBox }, + demo: , + }, + { + title: 'Pill colors', + source: [ + { + type: GuideSectionTypes.JS, + code: colorsSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorsHtml, + }, + ], + text: (

- You can provide a renderOption prop which will accept option{' '} - and searchValue arguments. Use the value prop of the{' '} - option object to store metadata about the option for use in this callback. + Useful for visualization or tagging systems. You can also pass a color + in your option list. The color can be a hex value (like{' '} + #000) or any other named color value accepted by + the Badge component.

+ ), + props: { EuiComboBox }, + demo: , + }, + { + title: 'Option rendering', + source: [ + { + type: GuideSectionTypes.JS, + code: renderOptionSource, + }, + { + type: GuideSectionTypes.HTML, + code: renderOptionHtml, + }, + ], + text: ( + +

+ You can provide a renderOption prop which will + accept option and searchValue{' '} + arguments. Use the value prop of the{' '} + option object to store metadata about the option + for use in this callback. +

+

+ Note: virtualization (above) requires that each + option have the same height. Ensure that you render the options so + that wrapping text is truncated instead of causing the height of the + option to change. +

+
+ ), + props: { EuiComboBox }, + demo: , + }, + { + title: 'Groups', + source: [ + { + type: GuideSectionTypes.JS, + code: groupsSource, + }, + { + type: GuideSectionTypes.HTML, + code: groupsHtml, + }, + ], + text: ( +

+ You can group options together. The groups won’t match + against the search value. +

+ ), + props: { EuiComboBox }, + demo: , + }, + { + title: 'Single selection', + source: [ + { + type: GuideSectionTypes.JS, + code: singleSelectionSource, + }, + { + type: GuideSectionTypes.HTML, + code: singleSelectionHtml, + }, + ], + text: ( +

+ To only allow the user to select a single option, provide the{' '} + singleSelection prop. You may want to render the + selected option as plain text instead of pill form. To do this, pass{' '} + {'singleSelection={{ asPlainText: true }}'} +

+ ), + props: { EuiComboBox }, + demo: , + }, + { + title: 'Disallowing custom options', + source: [ + { + type: GuideSectionTypes.JS, + code: disallowCustomOptionsSource, + }, + { + type: GuideSectionTypes.HTML, + code: disallowCustomOptionsHtml, + }, + ], + text: ( +

+ Leave out the onCreateOption prop to disallow the + creation of custom options. +

+ ), + props: { EuiComboBox }, + demo: , + }, + { + title: 'Custom options only, with validation', + source: [ + { + type: GuideSectionTypes.JS, + code: customOptionsOnlySource, + }, + { + type: GuideSectionTypes.HTML, + code: customOptionsOnlyHtml, + }, + ], + text: ( +

+ Alternatively, provide the noSuggestions prop to + hide the suggestions list and only allow the creation of + custom options. +

+ ), + props: { EuiComboBox }, + demo: , + }, + { + title: 'Async', + source: [ + { + type: GuideSectionTypes.JS, + code: asyncSource, + }, + { + type: GuideSectionTypes.HTML, + code: asyncHtml, + }, + ], + text: (

- Note: virtualization (above) requires that each option have the same height. - Ensure that you render the options so that wrapping text is truncated instead of causing - the height of the option to change. + Use the onSearchChange code to handle searches + asynchronously. Use the + isLoading prop to let the user know that something + async is happening.

-
- ), - props: { EuiComboBox }, - demo: , - }, { - title: 'Groups', - source: [{ - type: GuideSectionTypes.JS, - code: groupsSource, - }, { - type: GuideSectionTypes.HTML, - code: groupsHtml, - }], - text: ( -

- You can group options together. The groups won’t match against the search value. -

- ), - props: { EuiComboBox }, - demo: , - }, { - title: 'Single selection', - source: [{ - type: GuideSectionTypes.JS, - code: singleSelectionSource, - }, { - type: GuideSectionTypes.HTML, - code: singleSelectionHtml, - }], - text: ( -

- To only allow the user to select a single option, provide the{' '} - singleSelection prop. You may want to render the selected option as - plain text instead of pill form. To do this, pass{' '} - {'singleSelection={{ asPlainText: true }}'} -

- ), - props: { EuiComboBox }, - demo: , - }, { - title: 'Disallowing custom options', - source: [{ - type: GuideSectionTypes.JS, - code: disallowCustomOptionsSource, - }, { - type: GuideSectionTypes.HTML, - code: disallowCustomOptionsHtml, - }], - text: ( -

- Leave out the onCreateOption prop to disallow the creation of custom options. -

- ), - props: { EuiComboBox }, - demo: , - }, { - title: 'Custom options only, with validation', - source: [{ - type: GuideSectionTypes.JS, - code: customOptionsOnlySource, - }, { - type: GuideSectionTypes.HTML, - code: customOptionsOnlyHtml, - }], - text: ( -

- Alternatively, provide the noSuggestions prop to hide the suggestions list - and only allow the creation of custom options. -

- ), - props: { EuiComboBox }, - demo: , - }, { - title: 'Async', - source: [{ - type: GuideSectionTypes.JS, - code: asyncSource, - }, { - type: GuideSectionTypes.HTML, - code: asyncHtml, - }], - text: ( -

- Use the onSearchChange code to handle searches asynchronously. Use the - isLoading prop to let the user know that something async is happening. -

- ), - props: { EuiComboBox }, - demo: , - }], + ), + props: { EuiComboBox }, + demo: , + }, + ], }; diff --git a/src-docs/src/views/combo_box/containers.js b/src-docs/src/views/combo_box/containers.js index c8573ec9be8..c1c2797aedd 100644 --- a/src-docs/src/views/combo_box/containers.js +++ b/src-docs/src/views/combo_box/containers.js @@ -17,28 +17,40 @@ export default class extends Component { constructor(props) { super(props); - this.options = [{ - label: 'Titan', - 'data-test-subj': 'titanOption', - }, { - label: 'Enceladus', - }, { - label: 'Mimas', - }, { - label: 'Dione', - }, { - label: 'Iapetus', - }, { - label: 'Phoebe', - }, { - label: 'Rhea', - }, { - label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', - }, { - label: 'Tethys', - }, { - label: 'Hyperion', - }]; + this.options = [ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus', + }, + { + label: 'Mimas', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, + ]; this.state = { selectedOptions: [this.options[2], this.options[4]], @@ -49,11 +61,11 @@ export default class extends Component { closeModal = () => { this.setState({ isModalVisible: false }); - } + }; showModal = () => { this.setState({ isModalVisible: true }); - } + }; togglePopover = () => { this.setState(prevState => ({ @@ -67,7 +79,7 @@ export default class extends Component { }); }; - onChange = (selectedOptions) => { + onChange = selectedOptions => { this.setState({ selectedOptions, }); @@ -89,9 +101,11 @@ export default class extends Component { }; // Create the option if it doesn't exist. - if (flattenedOptions.findIndex(option => - option.label.trim().toLowerCase() === normalizedSearchValue - ) === -1) { + if ( + flattenedOptions.findIndex( + option => option.label.trim().toLowerCase() === normalizedSearchValue + ) === -1 + ) { this.options.push(newOption); } @@ -118,8 +132,7 @@ export default class extends Component { + onClick={this.togglePopover}> Open popover ); @@ -129,19 +142,12 @@ export default class extends Component { if (isModalVisible) { modal = ( - + - - Combo box in a modal - + Combo box in a modal - - {comboBox} - + {comboBox} ); @@ -151,8 +157,7 @@ export default class extends Component { + helpText="This combo box is inside of a form row"> {comboBox} @@ -161,16 +166,13 @@ export default class extends Component { ownFocus button={button} isOpen={isPopoverOpen} - closePopover={this.closePopover} - > + closePopover={this.closePopover}>
{comboBox}
- - Show modal - + Show modal {modal}
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 dd150bb6086..fe6420d509a 100644 --- a/src-docs/src/views/combo_box/custom_options_only.js +++ b/src-docs/src/views/combo_box/custom_options_only.js @@ -1,11 +1,8 @@ import React, { Component } from 'react'; -import { - EuiComboBox, - EuiFormRow, -} from '../../../../src/components'; +import { EuiComboBox, EuiFormRow } from '../../../../src/components'; -const isValid = (value) => { +const isValid = value => { // Only allow letters. No spaces, numbers, or special characters. return value.match(/^[a-zA-Z]+$/) !== null; }; @@ -20,7 +17,7 @@ export default class extends Component { }; } - onCreateOption = (searchValue) => { + onCreateOption = searchValue => { if (!isValid(searchValue)) { // Return false to explicitly reject the user's input. return false; @@ -36,7 +33,7 @@ export default class extends Component { })); }; - onSearchChange = (searchValue) => { + onSearchChange = searchValue => { if (!searchValue) { this.setState({ isInvalid: false, @@ -50,7 +47,7 @@ export default class extends Component { }); }; - onChange = (selectedOptions) => { + onChange = selectedOptions => { this.setState({ selectedOptions, isInvalid: false, @@ -63,8 +60,7 @@ export default class extends Component { + error={isInvalid ? 'Only letters are allowed' : undefined}> { + onChange = selectedOptions => { this.setState({ selectedOptions, }); @@ -55,9 +65,11 @@ export default class extends Component { }; // Create the option if it doesn't exist. - if (flattenedOptions.findIndex(option => - option.label.trim().toLowerCase() === normalizedSearchValue - ) === -1) { + if ( + flattenedOptions.findIndex( + option => option.label.trim().toLowerCase() === normalizedSearchValue + ) === -1 + ) { this.options.push(newOption); } diff --git a/src-docs/src/views/combo_box/disallow_custom_options.js b/src-docs/src/views/combo_box/disallow_custom_options.js index da625e06213..50340552fc9 100644 --- a/src-docs/src/views/combo_box/disallow_custom_options.js +++ b/src-docs/src/views/combo_box/disallow_custom_options.js @@ -1,36 +1,45 @@ import React, { Component } from 'react'; -import { - EuiComboBox, - EuiFormRow, -} from '../../../../src/components'; +import { EuiComboBox, EuiFormRow } from '../../../../src/components'; export default class extends Component { constructor(props) { super(props); - this.options = [{ - label: 'Titan', - 'data-test-subj': 'titanOption', - }, { - label: 'Enceladus', - }, { - label: 'Mimas', - }, { - label: 'Dione', - }, { - label: 'Iapetus', - }, { - label: 'Phoebe', - }, { - label: 'Rhea', - }, { - label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', - }, { - label: 'Tethys', - }, { - label: 'Hyperion', - }]; + this.options = [ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus', + }, + { + label: 'Mimas', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, + ]; this.state = { error: undefined, @@ -38,31 +47,37 @@ export default class extends Component { }; } - onChange = (selectedOptions) => { + onChange = selectedOptions => { this.setState({ error: undefined, selectedOptions, }); - } + }; onSearchChange = (value, hasMatchingOptions) => { this.setState({ - error: value.length === 0 || hasMatchingOptions ? undefined : `"${value}" is not a valid option`, + error: + value.length === 0 || hasMatchingOptions + ? undefined + : `"${value}" is not a valid option`, }); - } + }; onBlur = () => { const { value } = this.inputRef; this.setState({ - error: value.length === 0 ? undefined : `"${value}" is not a valid option`, + error: + value.length === 0 ? undefined : `"${value}" is not a valid option`, }); - } + }; - setInputRef = ref => this.inputRef = ref; + setInputRef = ref => (this.inputRef = ref); render() { return ( - + { + onChange = selectedOptions => { this.setState({ selectedOptions, }); @@ -63,9 +71,11 @@ export default class extends Component { }; // Create the option if it doesn't exist. - if (flattenedOptions.findIndex(option => - option.label.trim().toLowerCase() === normalizedSearchValue - ) === -1) { + if ( + flattenedOptions.findIndex( + option => option.label.trim().toLowerCase() === normalizedSearchValue + ) === -1 + ) { if (this.options[this.options.length - 1].label !== 'Custom') { this.options.push({ label: 'Custom', diff --git a/src-docs/src/views/combo_box/render_option.js b/src-docs/src/views/combo_box/render_option.js index 8feb0aa0164..7674f601af3 100644 --- a/src-docs/src/views/combo_box/render_option.js +++ b/src-docs/src/views/combo_box/render_option.js @@ -10,76 +10,88 @@ export default class extends Component { constructor(props) { super(props); - this.options = [{ - value: { - size: 5, + this.options = [ + { + value: { + size: 5, + }, + label: 'Titan', + 'data-test-subj': 'titanOption', + color: 'primary', }, - label: 'Titan', - 'data-test-subj': 'titanOption', - color: 'primary', - }, { - value: { - size: 2, + { + value: { + size: 2, + }, + label: 'Enceladus', + color: 'secondary', }, - label: 'Enceladus', - color: 'secondary', - }, { - value: { - size: 15, + { + value: { + size: 15, + }, + label: 'Mimas', + color: '#DB1374', }, - label: 'Mimas', - color: '#DB1374', - }, { - value: { - size: 1, + { + value: { + size: 1, + }, + label: 'Dione', + color: 'accent', }, - label: 'Dione', - color: 'accent', - }, { - value: { - size: 8, + { + value: { + size: 8, + }, + label: 'Iapetus', + color: 'primary', + color: 'warning', }, - label: 'Iapetus', - color: 'primary', - color: 'warning', - }, { - value: { - size: 2, + { + value: { + size: 2, + }, + label: 'Phoebe', + color: 'danger', }, - label: 'Phoebe', - color: 'danger', - }, { - value: { - size: 33, + { + value: { + size: 33, + }, + label: 'Rhea', + color: 'default', }, - label: 'Rhea', - color: 'default', - }, { - value: { - size: 18, + { + value: { + size: 18, + }, + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + color: '#F98510', }, - label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', - color: '#F98510', - }, { - value: { - size: 9, + { + value: { + size: 9, + }, + label: 'Tethys', + color: '#FEB6DB', }, - label: 'Tethys', - color: '#FEB6DB', - }, { - value: { - size: 4, + { + value: { + size: 4, + }, + label: 'Hyperion', + color: '#BFA180', }, - label: 'Hyperion', - color: '#BFA180', - }]; + ]; this.state = { selectedOptions: [this.options[2], this.options[4]], }; } - onChange = (selectedOptions) => { + onChange = selectedOptions => { this.setState({ selectedOptions, }); @@ -102,9 +114,11 @@ export default class extends Component { }; // Create the option if it doesn't exist. - if (flattenedOptions.findIndex(option => - option.label.trim().toLowerCase() === normalizedSearchValue - ) === -1) { + if ( + flattenedOptions.findIndex( + option => option.label.trim().toLowerCase() === normalizedSearchValue + ) === -1 + ) { this.options.push(newOption); } @@ -119,9 +133,7 @@ export default class extends Component { return ( - - {label} - + {label}   ({value.size}) diff --git a/src-docs/src/views/combo_box/single_selection.js b/src-docs/src/views/combo_box/single_selection.js index 43535d036c8..91d5bd68f89 100644 --- a/src-docs/src/views/combo_box/single_selection.js +++ b/src-docs/src/views/combo_box/single_selection.js @@ -1,42 +1,52 @@ import React, { Component } from 'react'; -import { - EuiComboBox, -} from '../../../../src/components'; +import { EuiComboBox } from '../../../../src/components'; export default class extends Component { constructor(props) { super(props); - this.options = [{ - label: 'Titan', - 'data-test-subj': 'titanOption', - }, { - label: 'Enceladus', - }, { - label: 'Mimas', - }, { - label: 'Dione', - }, { - label: 'Iapetus', - }, { - label: 'Phoebe', - }, { - label: 'Rhea', - }, { - label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', - }, { - label: 'Tethys', - }, { - label: 'Hyperion', - }]; + this.options = [ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus', + }, + { + label: 'Mimas', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, + ]; this.state = { selectedOptions: [this.options[2]], }; } - onChange = (selectedOptions) => { + onChange = selectedOptions => { // We should only get back either 0 or 1 options. this.setState({ selectedOptions: selectedOptions, diff --git a/src-docs/src/views/combo_box/virtualized.js b/src-docs/src/views/combo_box/virtualized.js index ff09426cb64..945b131f569 100644 --- a/src-docs/src/views/combo_box/virtualized.js +++ b/src-docs/src/views/combo_box/virtualized.js @@ -1,8 +1,6 @@ import React, { Component } from 'react'; -import { - EuiComboBox, -} from '../../../../src/components'; +import { EuiComboBox } from '../../../../src/components'; export default class extends Component { constructor(props) { @@ -15,7 +13,7 @@ export default class extends Component { if (i % 25 === 0) { this.options.push({ label: `Options ${i - (groupOptions.length - 1)} to ${i}`, - options: groupOptions + options: groupOptions, }); groupOptions = []; } @@ -26,7 +24,7 @@ export default class extends Component { }; } - onChange = (selectedOptions) => { + onChange = selectedOptions => { this.setState({ selectedOptions, }); diff --git a/src-docs/src/views/context/context.js b/src-docs/src/views/context/context.js index dc7ef1ce825..12afdce0458 100644 --- a/src-docs/src/views/context/context.js +++ b/src-docs/src/views/context/context.js @@ -27,14 +27,15 @@ const mappings = { export default class extends Component { state = { language: 'en', - } + }; - setLanguage = (language) => this.setState({ language }) + setLanguage = language => this.setState({ language }); render() { const i18n = { mapping: mappings[this.state.language], - formatNumber: (value) => new Intl.NumberFormat(this.state.language).format(value), + formatNumber: value => + new Intl.NumberFormat(this.state.language).format(value), }; return ( @@ -42,43 +43,46 @@ export default class extends Component {
- this.setLanguage('en')}> - + this.setLanguage('en')}> + - this.setLanguage('fr')}> - + this.setLanguage('fr')}> + - + - + + + - + -

+

+ + +

- + - + {([question, action]) => ( - - + - {placeholder => ( - - )} + {placeholder => } - {action} diff --git a/src-docs/src/views/context/context_example.js b/src-docs/src/views/context/context_example.js index 2308cb6fe51..85bba669ea6 100644 --- a/src-docs/src/views/context/context_example.js +++ b/src-docs/src/views/context/context_example.js @@ -2,15 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiContext, - EuiI18n, -} from '../../../../src/components'; +import { EuiCode, EuiContext, EuiI18n } from '../../../../src/components'; import Context from './context'; const contextSource = require('!!raw-loader!./context'); @@ -18,23 +12,29 @@ const contextHtml = renderToHtml(Context); export const ContextExample = { title: 'Context', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: contextSource, - }, { - type: GuideSectionTypes.HTML, - code: contextHtml, - }], - text: ( -

- EuiContext allows setting global internationalization copy for - EUI components. Any components used within this context will lookup their display values - from this mapping. -

- ), - components: { EuiContext }, - demo: , - props: { EuiContext, EuiI18n }, - }], + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: contextSource, + }, + { + type: GuideSectionTypes.HTML, + code: contextHtml, + }, + ], + text: ( +

+ EuiContext allows setting global + internationalization copy for EUI components. Any components used + within this context will lookup their display values from this + mapping. +

+ ), + components: { EuiContext }, + demo: , + props: { EuiContext, EuiI18n }, + }, + ], }; diff --git a/src-docs/src/views/context_menu/content_panel.js b/src-docs/src/views/context_menu/content_panel.js index 421b72e9338..673edc03d4f 100644 --- a/src-docs/src/views/context_menu/content_panel.js +++ b/src-docs/src/views/context_menu/content_panel.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiButton, @@ -21,7 +19,7 @@ export default class extends Component { onButtonClick = () => { this.setState(prevState => ({ - isPopoverOpen: !prevState.isPopoverOpen + isPopoverOpen: !prevState.isPopoverOpen, })); }; @@ -37,8 +35,7 @@ export default class extends Component { size="s" iconType="arrowDown" iconSide="right" - onClick={this.onButtonClick} - > + onClick={this.onButtonClick}> Click to show some content ); @@ -50,10 +47,9 @@ export default class extends Component { isOpen={this.state.isPopoverOpen} closePopover={this.closePopover} panelPaddingSize="s" - anchorPosition="downLeft" - > + anchorPosition="downLeft"> - This context menu doesn't render items, it passes a child instead. + 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 a7e486d343c..6b7aa521605 100644 --- a/src-docs/src/views/context_menu/context_menu.js +++ b/src-docs/src/views/context_menu/context_menu.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiButton, @@ -37,81 +35,97 @@ export default class extends Component { const panelTree = { id: 0, title: 'This is a context menu', - items: [{ - name: 'Handle an onClick', - icon: ( - - ), - onClick: () => { this.closePopover(); window.alert('Show fullscreen'); }, - }, { - name: 'Go to a link', - icon: 'user', - href: 'http://elastic.co', - target: '_blank', - }, { - name: 'Nest panels', - icon: 'user', - panel: { - id: 1, - title: 'Nest panels', - items: [{ - name: 'PDF reports', - icon: 'user', - onClick: () => { this.closePopover(); window.alert('PDF reports'); }, - }, { - name: 'Embed code', - icon: 'user', - panel: { - id: 2, - title: 'Embed code', - content: ( -
- - - - - - - Copy iFrame code -
- ), - }, - }, { - name: 'Permalinks', - icon: 'user', - onClick: () => { this.closePopover(); window.alert('Permalinks'); }, - }], + items: [ + { + name: 'Handle an onClick', + icon: , + onClick: () => { + this.closePopover(); + window.alert('Show fullscreen'); + }, }, - }, { - name: 'You can add a tooltip', - icon: 'user', - toolTipTitle: 'Optional tooltip', - toolTipContent: 'Optional content for a tooltip', - toolTipPosition: 'right', - onClick: () => { this.closePopover(); window.alert('Display options'); }, - }, { - name: 'Disabled option', - icon: 'user', - toolTipContent: 'For reasons, this item is disabled', - toolTipPosition: 'right', - disabled: true, - onClick: () => { this.closePopover(); window.alert('Disabled option'); }, - }], + { + name: 'Go to a link', + icon: 'user', + href: 'http://elastic.co', + target: '_blank', + }, + { + name: 'Nest panels', + icon: 'user', + panel: { + id: 1, + title: 'Nest panels', + items: [ + { + name: 'PDF reports', + icon: 'user', + onClick: () => { + this.closePopover(); + window.alert('PDF reports'); + }, + }, + { + name: 'Embed code', + icon: 'user', + panel: { + id: 2, + title: 'Embed code', + content: ( +
+ + + + + + + Copy iFrame code +
+ ), + }, + }, + { + name: 'Permalinks', + icon: 'user', + onClick: () => { + this.closePopover(); + window.alert('Permalinks'); + }, + }, + ], + }, + }, + { + name: 'You can add a tooltip', + icon: 'user', + toolTipTitle: 'Optional tooltip', + toolTipContent: 'Optional content for a tooltip', + toolTipPosition: 'right', + onClick: () => { + this.closePopover(); + window.alert('Display options'); + }, + }, + { + name: 'Disabled option', + icon: 'user', + toolTipContent: 'For reasons, this item is disabled', + toolTipPosition: 'right', + disabled: true, + onClick: () => { + this.closePopover(); + window.alert('Disabled option'); + }, + }, + ], }; this.panels = flattenPanelTree(panelTree); @@ -134,8 +148,7 @@ export default class extends Component { + onClick={this.onButtonClick}> Click me to load a context menu ); @@ -148,12 +161,8 @@ export default class extends Component { closePopover={this.closePopover} panelPaddingSize="none" withTitle - anchorPosition="downLeft" - > - + anchorPosition="downLeft"> + ); } diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js index 8924170fe4a..edf5a2a9aeb 100644 --- a/src-docs/src/views/context_menu/context_menu_example.js +++ b/src-docs/src/views/context_menu/context_menu_example.js @@ -2,9 +2,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiCode, @@ -31,77 +29,98 @@ const contextMenuWithContentHtml = renderToHtml(ContextMenuWithContent); export const ContextMenuExample = { title: 'Context Menu', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: contextMenuSource, - }, { - type: GuideSectionTypes.HTML, - code: contextMenuHtml, - }], - text: ( -

- EuiContextMenu is a nested menu system useful - for navigating complicated trees. It lives within a EuiPopover - which itself can be wrapped around any component (like a button in this example). -

- ), - props: { EuiContextMenu, EuiContextMenuPanel, EuiContextMenuItem }, - demo: , - }, { - title: `With single panel`, - source: [{ - type: GuideSectionTypes.JS, - code: singlePanelSource, - }, { - type: GuideSectionTypes.HTML, - code: singlePanelHtml, - }], - text: ( -

- Context menus can be used for simple, non-nested menus as well. The below - pagination example has no nesting and no title. -

- ), - demo: , - }, { - title: `Displaying custom elements`, - source: [{ - type: GuideSectionTypes.JS, - code: contentPanelSource, - }, { - type: GuideSectionTypes.HTML, - code: contentPanelHtml, - }], - text: ( -

- If you have custom content to show instead of a list of options, - you can pass a React element as a child to EuiContextMenuPanel. -

- ), - demo: , - }, { - title: `Using panels with mixed items & content`, - source: [{ - type: GuideSectionTypes.JS, - code: contextMenuWithContentSource, - }, { - type: GuideSectionTypes.HTML, - code: contextMenuWithContentHtml, - }], - text: ( -
+ sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: contextMenuSource, + }, + { + type: GuideSectionTypes.HTML, + code: contextMenuHtml, + }, + ], + text: ( +

+ EuiContextMenu is a nested menu system useful for + navigating complicated trees. It lives within a{' '} + EuiPopover + which itself can be wrapped around any component (like a button in + this example). +

+ ), + props: { EuiContextMenu, EuiContextMenuPanel, EuiContextMenuItem }, + demo: , + }, + { + title: `With single panel`, + source: [ + { + type: GuideSectionTypes.JS, + code: singlePanelSource, + }, + { + type: GuideSectionTypes.HTML, + code: singlePanelHtml, + }, + ], + text: (

- Context menu panels can be passed React elements through the - content prop instead of items. The panel - will display your custom content without modification. + Context menus can be used for simple, non-nested menus as well. The + below pagination example has no nesting and no title.

+ ), + demo: , + }, + { + title: `Displaying custom elements`, + source: [ + { + type: GuideSectionTypes.JS, + code: contentPanelSource, + }, + { + type: GuideSectionTypes.HTML, + code: contentPanelHtml, + }, + ], + text: (

- If your panel contents have different widths or you need to ensure that a specific - context menu panel has a certain width, add width: [number of pixels] to the panel tree. + If you have custom content to show instead of a list of options, you + can pass a React element as a child to{' '} + EuiContextMenuPanel.

-
- ), - demo: , - }], + ), + demo: , + }, + { + title: `Using panels with mixed items & content`, + source: [ + { + type: GuideSectionTypes.JS, + code: contextMenuWithContentSource, + }, + { + type: GuideSectionTypes.HTML, + code: contextMenuWithContentHtml, + }, + ], + text: ( +
+

+ Context menu panels can be passed React elements through the + content prop instead of items. + The panel will display your custom content without modification. +

+

+ If your panel contents have different widths or you need to ensure + that a specific context menu panel has a certain width, add{' '} + width: [number of pixels] to the panel tree. +

+
+ ), + demo: , + }, + ], }; 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 a414e6cbd40..feda2fbbf79 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 @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiButton, @@ -8,7 +6,7 @@ import { EuiIcon, EuiPopover, EuiSpacer, - EuiText + EuiText, } from '../../../../src/components'; import EuiTabsExample from '../tabs/tabbed_content'; @@ -36,40 +34,44 @@ export default class extends Component { isPopoverOpen: false, }; - this.createPanelTree = (Content) => { + this.createPanelTree = Content => { return flattenPanelTree({ id: 0, title: 'View options', - items: [{ - name: 'Show fullscreen', - icon: ( - - ), - onClick: () => { this.closePopover(); window.alert('Show fullscreen'); }, - }, { - name: 'See more', - icon: 'plusInCircle', - panel: { - id: 1, - width: 400, - title: 'See more', - content: + items: [ + { + name: 'Show fullscreen', + icon: , + onClick: () => { + this.closePopover(); + window.alert('Show fullscreen'); + }, }, - }], + { + name: 'See more', + icon: 'plusInCircle', + panel: { + id: 1, + width: 400, + title: 'See more', + content: , + }, + }, + ], }); }; this.panels = this.createPanelTree(() => ( -

+

+ +

Context panels can contain anything

- You can stuff just about anything into these panels. Be mindful of size though. - This panel is set to 400px and the height will grow as space allows. + You can stuff just about anything into these panels. Be mindful of + size though. This panel is set to 400px and the height will grow as + space allows.

)); @@ -106,8 +108,7 @@ export default class extends Component { + onClick={this.onButtonClick}> Click me to load mixed content menu ); @@ -116,8 +117,7 @@ export default class extends Component { + onClick={this.onDynamicButtonClick}> Click me to load dynamic mixed content menu ); @@ -131,12 +131,8 @@ export default class extends Component { closePopover={this.closePopover} panelPaddingSize="none" withTitle - anchorPosition="upLeft" - > - + anchorPosition="upLeft"> + @@ -148,12 +144,8 @@ export default class extends Component { closePopover={this.closeDynamicPopover} panelPaddingSize="none" withTitle - 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 b1a1428771e..c85e98cfd5c 100644 --- a/src-docs/src/views/context_menu/single_panel.js +++ b/src-docs/src/views/context_menu/single_panel.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiButtonEmpty, @@ -37,46 +35,48 @@ export default class extends Component { type="text" iconType="arrowDown" iconSide="right" - onClick={this.onButtonClick} - > + onClick={this.onButtonClick}> Rows per page: 50 ); const items = [ - ( - { this.closePopover(); window.alert('10 rows'); }} - > - 10 rows - - ), ( - { this.closePopover(); window.alert('20 rows'); }} - > - 20 rows - - ), ( - { this.closePopover(); window.alert('50 rows'); }} - > + { + this.closePopover(); + window.alert('10 rows'); + }}> + 10 rows + , + { + this.closePopover(); + window.alert('20 rows'); + }}> + 20 rows + , + { + this.closePopover(); + window.alert('50 rows'); + }}> 50 rows - - ), ( - { this.closePopover(); window.alert('100 rows'); }} - > + , + { + this.closePopover(); + window.alert('100 rows'); + }}> 100 rows - - ) + , ]; return ( @@ -86,11 +86,8 @@ export default class extends Component { isOpen={this.state.isPopoverOpen} closePopover={this.closePopover} panelPaddingSize="none" - anchorPosition="downLeft" - > - + anchorPosition="downLeft"> + ); } diff --git a/src-docs/src/views/copy/copy.js b/src-docs/src/views/copy/copy.js index ee61773db9f..be4e12894a6 100644 --- a/src-docs/src/views/copy/copy.js +++ b/src-docs/src/views/copy/copy.js @@ -8,10 +8,9 @@ import { } from '../../../../src/components/'; export default class extends Component { - state = { - copyText: 'I am the text that will be copied' - } + copyText: 'I am the text that will be copied', + }; onChange = e => { this.setState({ @@ -31,10 +30,8 @@ export default class extends Component { - {(copy) => ( - - Click to copy input text - + {copy => ( + Click to copy input text )}
diff --git a/src-docs/src/views/copy/copy_example.js b/src-docs/src/views/copy/copy_example.js index e6954463f82..c89966ffc43 100644 --- a/src-docs/src/views/copy/copy_example.js +++ b/src-docs/src/views/copy/copy_example.js @@ -2,14 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiCopy, -} from '../../../../src/components'; +import { EuiCode, EuiCopy } from '../../../../src/components'; import Copy from './copy'; const copySource = require('!!raw-loader!./copy'); @@ -17,22 +12,28 @@ const copyHtml = renderToHtml(Copy); export const CopyExample = { title: 'Copy', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: copySource, - }, { - type: GuideSectionTypes.HTML, - code: copyHtml, - }], - text: ( -

- The EuiCopy component is a utility for copying text to clipboard. - Wrap a function that returns a Component. The first argument will be a `copy` function. -

- ), - components: { EuiCopy }, - demo: , - props: { EuiCopy }, - }], + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: copySource, + }, + { + type: GuideSectionTypes.HTML, + code: copyHtml, + }, + ], + text: ( +

+ The EuiCopy component is a utility for copying text + to clipboard. Wrap a function that returns a Component. The first + argument will be a `copy` function. +

+ ), + components: { EuiCopy }, + demo: , + props: { EuiCopy }, + }, + ], }; diff --git a/src-docs/src/views/date_picker/classes.js b/src-docs/src/views/date_picker/classes.js index 835acc86d90..e943ad4d7bc 100644 --- a/src-docs/src/views/date_picker/classes.js +++ b/src-docs/src/views/date_picker/classes.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import moment from 'moment'; @@ -11,12 +9,11 @@ import { } from '../../../../src/components'; export default class extends Component { - constructor(props) { super(props); this.state = { - startDate: moment() + startDate: moment(), }; this.handleChange = this.handleChange.bind(this); @@ -24,7 +21,7 @@ export default class extends Component { handleChange(date) { this.setState({ - startDate: date + startDate: date, }); } @@ -58,7 +55,9 @@ export default class extends Component { selected={this.state.startDate} showTimeSelect onChange={this.handleChange} - dayClassName={date => date.date() < Math.random() * 31 ? 'dpTest__purpleDay' : undefined} + dayClassName={date => + date.date() < Math.random() * 31 ? 'dpTest__purpleDay' : undefined + } />
@@ -72,7 +71,6 @@ export default class extends Component { popperClassName="dpTest__purplePopper" />
-
); } diff --git a/src-docs/src/views/date_picker/custom_input.js b/src-docs/src/views/date_picker/custom_input.js index deab042bee2..5a0c6655839 100644 --- a/src-docs/src/views/date_picker/custom_input.js +++ b/src-docs/src/views/date_picker/custom_input.js @@ -1,26 +1,17 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import moment from 'moment'; -import { - EuiDatePicker, - EuiButton, -} from '../../../../src/components'; +import { EuiDatePicker, EuiButton } from '../../../../src/components'; // Should be a component because the date picker does some ref stuff behind the scenes // eslint-disable-next-line react/prefer-stateless-function class ExampleCustomInput extends React.Component { - render() { return ( - + {this.props.value} ); @@ -29,17 +20,16 @@ class ExampleCustomInput extends React.Component { ExampleCustomInput.propTypes = { onClick: PropTypes.func, - value: PropTypes.string + value: PropTypes.string, }; // eslint-disable-next-line react/no-multi-comp export default class extends Component { - constructor(props) { super(props); this.state = { - startDate: moment() + startDate: moment(), }; this.handleChange = this.handleChange.bind(this); @@ -47,7 +37,7 @@ export default class extends Component { handleChange(date) { this.setState({ - startDate: date + startDate: date, }); } diff --git a/src-docs/src/views/date_picker/date_picker.js b/src-docs/src/views/date_picker/date_picker.js index 460116ecd8b..39f4543dd8a 100644 --- a/src-docs/src/views/date_picker/date_picker.js +++ b/src-docs/src/views/date_picker/date_picker.js @@ -1,21 +1,15 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import moment from 'moment'; -import { - EuiDatePicker, - EuiFormRow, -} from '../../../../src/components'; +import { EuiDatePicker, EuiFormRow } from '../../../../src/components'; export default class extends Component { - constructor(props) { super(props); this.state = { - startDate: moment() + startDate: moment(), }; this.handleChange = this.handleChange.bind(this); @@ -23,7 +17,7 @@ export default class extends Component { handleChange(date) { this.setState({ - startDate: date + startDate: date, }); } diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js index 947048ed29b..719dfc7855d 100644 --- a/src-docs/src/views/date_picker/date_picker_example.js +++ b/src-docs/src/views/date_picker/date_picker_example.js @@ -2,9 +2,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiCode, @@ -66,227 +64,292 @@ const superDatePickerHtml = renderToHtml(SuperDatePicker); export const DatePickerExample = { title: 'Date Picker', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: datePickerSource, - }, { - type: GuideSectionTypes.HTML, - code: datePickerHtml, - }], - text: ( -

- At its most bare the EuiDatePicker only requires - props for selected and onChange. - It depends on moment for - all of its formatting. -

- ), - components: { EuiDatePicker }, - demo: , - props: { EuiDatePicker }, - }, { - title: 'Date picker states', - source: [{ - type: GuideSectionTypes.JS, - code: statesSource, - }, { - type: GuideSectionTypes.HTML, - code: statesHtml, - }], - text: ( -

- Examples of how the input can appear within a form. This should match our - other form styles. -

- ), - demo: , - }, { - title: 'Time selection', - source: [{ - type: GuideSectionTypes.JS, - code: timeSource, - }, { - type: GuideSectionTypes.HTML, - code: timeHtml, - }], - text: ( -

- Two props control time selection. showTimeSelect will make - time selection appear next to the calendar - and showTimeSelectOnly will exclude the calendar and - make the time selection the only thing you see. Make sure to adjust - your dateFormat and timeFormat values - to match. -

- ), - demo:
- ), - demo: , - }, { - title: 'Date picker range', - source: [{ - type: GuideSectionTypes.JS, - code: rangeSource, - }, { - type: GuideSectionTypes.HTML, - code: rangeHtml, - }], - text: ( -

- By passing startDate and endDate props - you can provide styling the range in between two dates. To further style the - group as a single control, use EuiDatePickerRange and pass - the date picker controls into - the startDateControl and endDateControl props. -

- ), - demo: , - props: { EuiDatePickerRange }, - }, { - title: 'Only allow specific dates and times', - source: [{ - type: GuideSectionTypes.JS, - code: minMaxSource, - }, { - type: GuideSectionTypes.HTML, - code: minMaxHtml, - }], - text: ( -

- Use the minDate, - maxDate, - minTime, - and maxTime - props to specify specific ranges the selected code must - must fall into. You can also use the excludeDates and - excludeTimes property to disallow a specific array - of items from selection. -

- ), - demo: , - }, { - title: 'Open to a specific date', - source: [{ - type: GuideSectionTypes.JS, - code: openToDateSource, - }, { - type: GuideSectionTypes.HTML, - code: openToDateHtml, - }], - text: ( -

- Use openToDate to default selection to a specific date. -

- ), - demo: , - }, { - title: 'Custom input', - source: [{ - type: GuideSectionTypes.JS, - code: customInputSource, - }, { - type: GuideSectionTypes.HTML, - code: customInputHtml, - }], - text: ( -

- Use customInput to pass a custom input to trigger your calendar. -

- ), - demo: , - }, { - title: 'UTC offsets', - source: [{ - type: GuideSectionTypes.JS, - code: utcSource, - }, { - type: GuideSectionTypes.HTML, - code: utcHtml, - }], - text: ( -

- Use utcOffset to apply an offset to the datetime. -

- ), - demo: , - }, { - title: 'Date picker inline', - source: [{ - type: GuideSectionTypes.JS, - code: inlineSource, - }, { - type: GuideSectionTypes.HTML, - code: inlineHtml, - }], - text: ( -

- Use the inline prop to display the date picker directly - in the page. If you do not need the shadows / popover effect to the date picker - then also apply the shadow=false prop as shown in the second - example. -

- ), - demo: , - }, { - title: 'Custom classes', - source: [{ - type: GuideSectionTypes.JS, - code: classesSource, - }, { - type: GuideSectionTypes.HTML, - code: classesHtml, - }], - text: ( -
+ sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: datePickerSource, + }, + { + type: GuideSectionTypes.HTML, + code: datePickerHtml, + }, + ], + text: ( +

+ At its most bare the EuiDatePicker only requires + props for selected and onChange. + It depends on{' '} + moment for all of + its formatting. +

+ ), + components: { EuiDatePicker }, + demo: , + props: { EuiDatePicker }, + }, + { + title: 'Date picker states', + source: [ + { + type: GuideSectionTypes.JS, + code: statesSource, + }, + { + type: GuideSectionTypes.HTML, + code: statesHtml, + }, + ], + text: ( +

+ Examples of how the input can appear within a form. This should match + our other form styles. +

+ ), + demo: , + }, + { + title: 'Time selection', + source: [ + { + type: GuideSectionTypes.JS, + code: timeSource, + }, + { + type: GuideSectionTypes.HTML, + code: timeHtml, + }, + ], + text: ( +

+ Two props control time selection. showTimeSelect{' '} + will make time selection appear next to the calendar and{' '} + showTimeSelectOnly will exclude the calendar and + make the time selection the only thing you see. Make sure to adjust + your dateFormat and timeFormat{' '} + values to match. +

+ ), + demo:
- ), - demo: , - }, { - title: 'Super date picker', - source: [{ - type: GuideSectionTypes.JS, - code: superDatePickerSource, - }, { - type: GuideSectionTypes.HTML, - code: superDatePickerHtml, - }], - text: ( -
+ ), + demo: , + props: { EuiDatePickerRange }, + }, + { + title: 'Only allow specific dates and times', + source: [ + { + type: GuideSectionTypes.JS, + code: minMaxSource, + }, + { + type: GuideSectionTypes.HTML, + code: minMaxHtml, + }, + ], + text: (

- start and end date times are passed as strings - in either datemath format (e.g.: now, now-15m, now-15m/m) - or as absolute date in the format YYYY-MM-DDTHH:mm:ss.sssZ. - Use datemath{' '} - to convert start and end strings into moment objects. + Use the minDate,maxDate, + minTime, and maxTime + props to specify specific ranges the selected code + must must fall into. You can also use the{' '} + excludeDates and + excludeTimes property to disallow a specific array + of items from selection.

- - {` + ), + demo: , + }, + { + title: 'Open to a specific date', + source: [ + { + type: GuideSectionTypes.JS, + code: openToDateSource, + }, + { + type: GuideSectionTypes.HTML, + code: openToDateHtml, + }, + ], + text: ( +

+ Use openToDate to default selection to a specific + date. +

+ ), + demo: , + }, + { + title: 'Custom input', + source: [ + { + type: GuideSectionTypes.JS, + code: customInputSource, + }, + { + type: GuideSectionTypes.HTML, + code: customInputHtml, + }, + ], + text: ( +

+ Use customInput to pass a custom input to trigger + your calendar. +

+ ), + demo: , + }, + { + title: 'UTC offsets', + source: [ + { + type: GuideSectionTypes.JS, + code: utcSource, + }, + { + type: GuideSectionTypes.HTML, + code: utcHtml, + }, + ], + text: ( +

+ Use utcOffset to apply an offset to the datetime. +

+ ), + demo: , + }, + { + title: 'Date picker inline', + source: [ + { + type: GuideSectionTypes.JS, + code: inlineSource, + }, + { + type: GuideSectionTypes.HTML, + code: inlineHtml, + }, + ], + text: ( +

+ Use the inline prop to display the date picker + directly in the page. If you do not need the shadows / popover effect + to the date picker then also apply the shadow=false{' '} + prop as shown in the second example. +

+ ), + demo: , + }, + { + title: 'Custom classes', + source: [ + { + type: GuideSectionTypes.JS, + code: classesSource, + }, + { + type: GuideSectionTypes.HTML, + code: classesHtml, + }, + ], + text: ( +
+

+ Custom classes can be passed to various bits of the calendar and + input. +

+
    +
  • + className will pass onto the input. +
  • +
  • + calendarClassName will pass onto the calendar + itself. +
  • +
  • + dayClassName will pass onto specificed days. +
  • +
+
+ ), + demo: , + }, + { + title: 'Super date picker', + source: [ + { + type: GuideSectionTypes.JS, + code: superDatePickerSource, + }, + { + type: GuideSectionTypes.HTML, + code: superDatePickerHtml, + }, + ], + text: ( +
+

+ start and end date times are + passed as strings in either datemath format (e.g.: now, now-15m, + now-15m/m) or as absolute date in the format{' '} + YYYY-MM-DDTHH:mm:ss.sssZ. Use{' '} + + datemath + {' '} + to convert start and end strings into moment objects. +

+ + {` import dateMath from '@elastic/datemath'; const startMoment = dateMath.parse(start); @@ -302,31 +365,40 @@ if (!endMoment || !endMoment.isValid()) { throw new Error('Unable to parse end string'); } `} - -

- onTimeChange will be immediately invoked when{' '} - start and end change from interactions with{' '} - Quick select, Commonly used, or Recently used date ranges{' '} - since these interactions set both start and end in a single event. -

-

- onTimeChange will not be invoked when - start and end change from interactions with{' '} - Absolute, Relative, and Now tabs.{' '} - onTimeChange will be invoked when the user clicks the Update button. - This gives users the ability to set both start and end{' '} - before triggering onTimeChange. - Set showUpdateButton to false{' '} - to immediately invoke onTimeChange{' '} - for all start and end changes. -

-

- Set isAutoRefreshOnly to true to limit the component to only display auto refresh content. - This is useful in cases where there is no time data but auto-refresh configuration is still desired. -

-
- ), - demo: , - props: { EuiSuperDatePicker, EuiSuperUpdateButton }, - }], +
+

+ onTimeChange will be immediately invoked when{' '} + start and end change from + interactions with Quick select,{' '} + Commonly used, or{' '} + Recently used date ranges since these interactions + set both start and end in a + single event. +

+

+ onTimeChange will not be invoked + when + start and end change from + interactions with Absolute,{' '} + Relative, and Now tabs.{' '} + onTimeChange will be invoked when the user clicks + the Update button. This gives users the ability to + set both start and end before + triggering onTimeChange. Set{' '} + showUpdateButton to false to + immediately invoke onTimeChange for all{' '} + start and end changes. +

+

+ Set isAutoRefreshOnly to true {' '} + to limit the component to only display auto refresh content. This is + useful in cases where there is no time data but auto-refresh + configuration is still desired. +

+
+ ), + demo: , + props: { EuiSuperDatePicker, EuiSuperUpdateButton }, + }, + ], }; diff --git a/src-docs/src/views/date_picker/inline.js b/src-docs/src/views/date_picker/inline.js index 9312bee13d9..6a9ba001693 100644 --- a/src-docs/src/views/date_picker/inline.js +++ b/src-docs/src/views/date_picker/inline.js @@ -1,20 +1,15 @@ - -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import moment from 'moment'; -import { - EuiDatePicker, -} from '../../../../src/components'; +import { EuiDatePicker } from '../../../../src/components'; export default class extends Component { constructor(props) { super(props); this.state = { - startDate: moment() + startDate: moment(), }; this.handleChange = this.handleChange.bind(this); @@ -22,7 +17,7 @@ export default class extends Component { handleChange(date) { this.setState({ - startDate: date + startDate: date, }); } diff --git a/src-docs/src/views/date_picker/locale.js b/src-docs/src/views/date_picker/locale.js index 5b30b1ea737..4c6c171a710 100644 --- a/src-docs/src/views/date_picker/locale.js +++ b/src-docs/src/views/date_picker/locale.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import moment from 'moment'; @@ -11,12 +9,11 @@ import { } from '../../../../src/components'; export default class extends Component { - constructor(props) { super(props); this.state = { - startDate: moment() + startDate: moment(), }; this.handleChange = this.handleChange.bind(this); @@ -24,7 +21,7 @@ export default class extends Component { handleChange(date) { this.setState({ - startDate: date + startDate: date, }); } @@ -76,7 +73,6 @@ export default class extends Component { locale="de-de" /> -

- Locale formatting is achieved by using the locale, - timeFormat, and dateFormat props. - The latter will take any moment() notation. Check{' '} - Date format by country - {' '}for formatting examples. -

); } diff --git a/src-docs/src/views/date_picker/min_max.js b/src-docs/src/views/date_picker/min_max.js index 881d404f763..8e545dc24e7 100644 --- a/src-docs/src/views/date_picker/min_max.js +++ b/src-docs/src/views/date_picker/min_max.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import moment from 'moment'; @@ -11,7 +9,6 @@ import { } from '../../../../src/components'; export default class extends Component { - constructor(props) { super(props); @@ -32,31 +29,31 @@ export default class extends Component { handleChange(date) { this.setState({ - startDate: date + startDate: date, }); } handleChange2(date) { this.setState({ - startDate2: date + startDate2: date, }); } handleChange3(date) { this.setState({ - startDate3: date + startDate3: date, }); } handleChange4(date) { this.setState({ - startDate4: date + startDate4: date, }); } handleChange5(date) { this.setState({ - startDate5: date + startDate5: date, }); } @@ -85,8 +82,12 @@ export default class extends Component { showTimeSelect selected={this.state.startDate2} onChange={this.handleChange2} - minTime={moment().hours(17).minutes(0)} - maxTime={moment().hours(20).minutes(30)} + minTime={moment() + .hours(17) + .minutes(0)} + maxTime={moment() + .hours(20) + .minutes(30)} /> @@ -108,7 +109,14 @@ export default class extends Component { showTimeSelect selected={this.state.startDate4} onChange={this.handleChange4} - excludeTimes={[moment().hours(0).minutes(0), moment().hours(17).minutes(0)]} + excludeTimes={[ + moment() + .hours(0) + .minutes(0), + moment() + .hours(17) + .minutes(0), + ]} /> @@ -122,7 +130,6 @@ export default class extends Component { filterDate={this.isWeekday} /> -
); } diff --git a/src-docs/src/views/date_picker/open_to_date.js b/src-docs/src/views/date_picker/open_to_date.js index 6511fa8e2d5..e039a0512d1 100644 --- a/src-docs/src/views/date_picker/open_to_date.js +++ b/src-docs/src/views/date_picker/open_to_date.js @@ -1,16 +1,10 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import moment from 'moment'; -import { - EuiDatePicker, - EuiFormRow, -} from '../../../../src/components'; +import { EuiDatePicker, EuiFormRow } from '../../../../src/components'; export default class extends Component { - constructor(props) { super(props); @@ -23,7 +17,7 @@ export default class extends Component { handleChange(date) { this.setState({ - startDate: date + startDate: date, }); } diff --git a/src-docs/src/views/date_picker/range.js b/src-docs/src/views/date_picker/range.js index 27e96d224e3..202cb806dbd 100644 --- a/src-docs/src/views/date_picker/range.js +++ b/src-docs/src/views/date_picker/range.js @@ -1,14 +1,8 @@ - -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import moment from 'moment'; -import { - EuiDatePicker, - EuiDatePickerRange, -} from '../../../../src/components'; +import { EuiDatePicker, EuiDatePickerRange } from '../../../../src/components'; export default class extends Component { constructor(props) { @@ -25,13 +19,13 @@ export default class extends Component { handleChangeStart(date) { this.setState({ - startDate: date + startDate: date, }); } handleChangeEnd(date) { this.setState({ - endDate: date + endDate: date, }); } diff --git a/src-docs/src/views/date_picker/states.js b/src-docs/src/views/date_picker/states.js index fd2c69f9fa9..01f36918d30 100644 --- a/src-docs/src/views/date_picker/states.js +++ b/src-docs/src/views/date_picker/states.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiDatePicker, @@ -9,7 +7,6 @@ import { } from '../../../../src/components'; export default class extends Component { - constructor(props) { super(props); @@ -22,13 +19,13 @@ export default class extends Component { handleChange(date) { this.setState({ - startDate: date + startDate: date, }); } render() { const errors = [ - 'Here\'s an example of an error', + "Here's an example of an error", 'You might have more than one error, so pass an array.', ]; @@ -74,11 +71,7 @@ export default class extends Component { - + - entire dataset timerange - + entire dataset timerange ); } export default class extends Component { - state = { recentlyUsedRanges: [], isLoading: false, @@ -33,31 +28,37 @@ export default class extends Component { showCustomQuickSelectPanel: false, start: 'now-30m', end: 'now', - } + }; onTimeChange = ({ start, end }) => { - this.setState((prevState) => { - const recentlyUsedRanges = prevState.recentlyUsedRanges.filter(recentlyUsedRange => { - const isDuplicate = recentlyUsedRange.start === start && recentlyUsedRange.end === end; - return !isDuplicate; - }); + this.setState(prevState => { + const recentlyUsedRanges = prevState.recentlyUsedRanges.filter( + recentlyUsedRange => { + const isDuplicate = + recentlyUsedRange.start === start && recentlyUsedRange.end === end; + return !isDuplicate; + } + ); recentlyUsedRanges.unshift({ start, end }); return { start, end, - recentlyUsedRanges: recentlyUsedRanges.length > 10 ? recentlyUsedRanges.slice(0, 9) : recentlyUsedRanges, + recentlyUsedRanges: + recentlyUsedRanges.length > 10 + ? recentlyUsedRanges.slice(0, 9) + : recentlyUsedRanges, isLoading: true, }; }, this.startLoading); - } + }; onRefresh = ({ start, end, refreshInterval }) => { - return new Promise((resolve) => { + return new Promise(resolve => { setTimeout(resolve, 100); }).then(() => { console.log(start, end, refreshInterval); }); - } + }; onStartInputChange = e => { this.setState({ @@ -72,39 +73,37 @@ export default class extends Component { }; startLoading = () => { - setTimeout( - this.stopLoading, - 1000); - } + setTimeout(this.stopLoading, 1000); + }; stopLoading = () => { this.setState({ isLoading: false }); - } + }; onRefreshChange = ({ isPaused, refreshInterval }) => { this.setState({ isPaused, refreshInterval, }); - } + }; toggleShowApplyButton = () => { this.setState(prevState => ({ showUpdateButton: !prevState.showUpdateButton, })); - } + }; toggleShowRefreshOnly = () => { this.setState(prevState => ({ isAutoRefreshOnly: !prevState.isAutoRefreshOnly, })); - } + }; toggleShowCustomQuickSelectPanel = () => { this.setState(prevState => ({ showCustomQuickSelectPanel: !prevState.showCustomQuickSelectPanel, })); - } + }; renderTimeRange = () => { if (this.state.isAutoRefreshOnly) { @@ -115,8 +114,7 @@ export default class extends Component { + helpText="EuiSuperDatePicker should be resilient to invalid start values. Try to break it with unexpected values"> + helpText="EuiSuperDatePicker should be resilient to invalid end values. Try to break it with unexpected values"> ); - } + }; render() { let customQuickSelectPanels; @@ -141,8 +138,8 @@ export default class extends Component { customQuickSelectPanels = [ { title: 'My custom panel', - content: (), - } + content: , + }, ]; } return ( @@ -153,24 +150,19 @@ export default class extends Component { checked={!this.state.isAutoRefreshOnly && this.state.showUpdateButton} disabled={this.state.isAutoRefreshOnly} /> -   - -   - - - - {this.renderTimeRange()} ); diff --git a/src-docs/src/views/date_picker/time_select.js b/src-docs/src/views/date_picker/time_select.js index ae070bdeefc..0f2968857c8 100644 --- a/src-docs/src/views/date_picker/time_select.js +++ b/src-docs/src/views/date_picker/time_select.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import moment from 'moment'; @@ -11,12 +9,11 @@ import { } from '../../../../src/components'; export default class extends Component { - constructor(props) { super(props); this.state = { - startDate: moment() + startDate: moment(), }; this.handleChange = this.handleChange.bind(this); @@ -24,7 +21,7 @@ export default class extends Component { handleChange(date) { this.setState({ - startDate: date + startDate: date, }); } @@ -73,9 +70,15 @@ export default class extends Component { onChange={this.handleChange} dateFormat="hh:mm a" injectTimes={[ - moment().hours(0).minutes(1), - moment().hours(0).minutes(5), - moment().hours(23).minutes(59) + moment() + .hours(0) + .minutes(1), + moment() + .hours(0) + .minutes(5), + moment() + .hours(23) + .minutes(59), ]} /> diff --git a/src-docs/src/views/date_picker/utc.js b/src-docs/src/views/date_picker/utc.js index c3d02e453c1..d21856ed81a 100644 --- a/src-docs/src/views/date_picker/utc.js +++ b/src-docs/src/views/date_picker/utc.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import moment from 'moment'; @@ -11,7 +9,6 @@ import { } from '../../../../src/components'; export default class extends Component { - constructor(props) { super(props); @@ -32,15 +29,15 @@ export default class extends Component { onSelectChange = e => { this.setState({ - utcOffset: parseInt(e.target.value, 10) + utcOffset: parseInt(e.target.value, 10), }); }; handleChange = date => { this.setState({ - startDate: date + startDate: date, }); - } + }; render() { const selected = diff --git a/src-docs/src/views/delay_hide/delay_hide.js b/src-docs/src/views/delay_hide/delay_hide.js index dc42d1e7e99..2d6d48fa793 100644 --- a/src-docs/src/views/delay_hide/delay_hide.js +++ b/src-docs/src/views/delay_hide/delay_hide.js @@ -5,13 +5,13 @@ import { EuiCheckbox, EuiFormRow, EuiFieldNumber, - EuiLoadingSpinner + EuiLoadingSpinner, } from '../../../../src/components'; export default class extends Component { state = { minimumDuration: 3000, - hide: false + hide: false, }; onChangeMinimumDuration = event => { @@ -45,7 +45,7 @@ export default class extends Component { } + render={() => } /> diff --git a/src-docs/src/views/delay_hide/delay_hide_example.js b/src-docs/src/views/delay_hide/delay_hide_example.js index 6a12a9e930b..05c960cbe24 100644 --- a/src-docs/src/views/delay_hide/delay_hide_example.js +++ b/src-docs/src/views/delay_hide/delay_hide_example.js @@ -14,24 +14,24 @@ export const DelayHideExample = { source: [ { type: GuideSectionTypes.JS, - code: delayHideSource + code: delayHideSource, }, { type: GuideSectionTypes.HTML, - code: delayHideHtml - } + code: delayHideHtml, + }, ], text: (

- EuiDelayHide is a component for conditionally toggling - the visibility of a child component. It will ensure that the child is - visible for at least 1000ms (default). This avoids UI glitches that - are common with loading spinners and other elements that are rendered - conditionally and potentially for a short amount of time. + EuiDelayHide is a component for conditionally + toggling the visibility of a child component. It will ensure that the + child is visible for at least 1000ms (default). This avoids UI + glitches that are common with loading spinners and other elements that + are rendered conditionally and potentially for a short amount of time.

), props: { EuiDelayHide }, - demo: - } - ] + demo: , + }, + ], }; diff --git a/src-docs/src/views/description_list/description_list.js b/src-docs/src/views/description_list/description_list.js index a61b49127ac..57ce3b180f8 100644 --- a/src-docs/src/views/description_list/description_list.js +++ b/src-docs/src/views/description_list/description_list.js @@ -15,7 +15,8 @@ const favoriteVideoGames = [ }, { title: 'TIE Fighter', - description: 'The sequel to XWING, join the dark side and fly for the Emporer.', + description: + 'The sequel to XWING, join the dark side and fly for the Emporer.', }, { title: 'Quake 2', @@ -29,15 +30,11 @@ export default () => ( - - Dota 2 - + Dota 2 A videogame that I have spent way too much time on over the years. - - Kings Quest VI - + Kings Quest VI The game that forced me to learn DOS. diff --git a/src-docs/src/views/description_list/description_list_classes.js b/src-docs/src/views/description_list/description_list_classes.js index 4d828f5a70e..8684c6c5ad9 100644 --- a/src-docs/src/views/description_list/description_list_classes.js +++ b/src-docs/src/views/description_list/description_list_classes.js @@ -1,8 +1,6 @@ import React from 'react'; -import { - EuiDescriptionList, -} from '../../../../src/components'; +import { EuiDescriptionList } from '../../../../src/components'; const favoriteVideoGames = [ { @@ -11,7 +9,8 @@ const favoriteVideoGames = [ }, { title: 'TIE Fighter', - description: 'The sequel to XWING, join the dark side and fly for the Emporer.', + description: + 'The sequel to XWING, join the dark side and fly for the Emporer.', }, { title: 'Quake 2', diff --git a/src-docs/src/views/description_list/description_list_column.js b/src-docs/src/views/description_list/description_list_column.js index dfb9887d56b..a6b7577c696 100644 --- a/src-docs/src/views/description_list/description_list_column.js +++ b/src-docs/src/views/description_list/description_list_column.js @@ -1,8 +1,6 @@ import React from 'react'; -import { - EuiDescriptionList, -} from '../../../../src/components'; +import { EuiDescriptionList } from '../../../../src/components'; const favoriteVideoGames = [ { @@ -11,7 +9,8 @@ const favoriteVideoGames = [ }, { title: 'TIE Fighter', - description: 'The sequel to XWING, join the dark side and fly for the Emporer.', + description: + 'The sequel to XWING, join the dark side and fly for the Emporer.', }, { title: 'Quake 2', diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js index 60ac27e06b6..b7f0d00f4cf 100644 --- a/src-docs/src/views/description_list/description_list_example.js +++ b/src-docs/src/views/description_list/description_list_example.js @@ -2,9 +2,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiCode, @@ -39,114 +37,149 @@ const descriptionListClassesHtml = renderToHtml(DescriptionListClasses); export const DescriptionListExample = { title: 'Description List', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: descriptionListSource, - }, { - type: GuideSectionTypes.HTML, - code: descriptionListHtml, - }], - text: ( -

- DescriptionList is a component for listing pairs of - information together. You can use the component on its own, passing - in an object for the list, or use - the EuiDescriptionListTitle and EuiDescriptionListDescription - components separately to build a list manually. -

- ), - props: { EuiDescriptionList, EuiDescriptionListTitle, EuiDescriptionListDescription }, - demo: , - }, { - title: 'Reverse style', - source: [{ - type: GuideSectionTypes.JS, - code: descriptionListReverseSource, - }, { - type: GuideSectionTypes.HTML, - code: descriptionListReverseHtml, - }], - text: ( -
+ sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: descriptionListSource, + }, + { + type: GuideSectionTypes.HTML, + code: descriptionListHtml, + }, + ], + text: ( +

+ DescriptionList is a component for listing pairs of + information together. You can use the component on its own, passing in + an object for the list, or use the{' '} + EuiDescriptionListTitle and{' '} + EuiDescriptionListDescription + components separately to build a list manually. +

+ ), + props: { + EuiDescriptionList, + EuiDescriptionListTitle, + EuiDescriptionListDescription, + }, + demo: , + }, + { + title: 'Reverse style', + source: [ + { + type: GuideSectionTypes.JS, + code: descriptionListReverseSource, + }, + { + type: GuideSectionTypes.HTML, + code: descriptionListReverseHtml, + }, + ], + text: ( +
+

+ Setting the textStyle prop to{' '} + reverse will reverse the text styles of the{' '} + title and description elements + so that the description is more prominent. This works best for + key/value type content. +

+

+ Adding this property to the inline type will not + change anything. +

+
+ ), + demo: , + }, + { + title: 'As columns', + source: [ + { + type: GuideSectionTypes.JS, + code: descriptionListColumnSource, + }, + { + type: GuideSectionTypes.HTML, + code: descriptionListColumnHtml, + }, + ], + text: ( +

+ Using a prop type set to column{' '} + description lists can be presented in an inline, column format. +

+ ), + demo: , + }, + { + title: 'Inline', + source: [ + { + type: GuideSectionTypes.JS, + code: descriptionListInlineSource, + }, + { + type: GuideSectionTypes.HTML, + code: descriptionListInlineHtml, + }, + ], + text: ( +

+ Using a prop type set to inline{' '} + description lists can be presented in an inline, blob format. This is + useful for JSON code blocks. Inline description lists are sized + smaller than normal lists due to their compact nature. +

+ ), + demo: , + }, + { + title: 'Centered and compressed', + source: [ + { + type: GuideSectionTypes.JS, + code: descriptionListStylingSource, + }, + { + type: GuideSectionTypes.HTML, + code: descriptionListStylingHtml, + }, + ], + text: (

- Setting the textStyle prop to reverse will reverse - the text styles of the title and description elements - so that the description is more prominent. This works best for key/value type content. + Using the align and compressed{' '} + props you can further tailor the look of a description list. This + works with column and inline types.

+ ), + demo: , + }, + { + title: 'Passing className', + source: [ + { + type: GuideSectionTypes.JS, + code: descriptionListClassesSource, + }, + { + type: GuideSectionTypes.HTML, + code: descriptionListClassesHtml, + }, + ], + text: (

- Adding this property to the inline type will not change anything. + When using the listItems prop to pass an object of + items and you need to also add classNames (or other + available props) to the individual pieces, you can use the{' '} + titleProps and descriptionProps{' '} + to do so.

-
- ), - demo: , - }, { - title: 'As columns', - source: [{ - type: GuideSectionTypes.JS, - code: descriptionListColumnSource, - }, { - type: GuideSectionTypes.HTML, - code: descriptionListColumnHtml, - }], - text: ( -

- Using a prop type set to column description lists - can be presented in an inline, column format. -

- ), - demo: , - }, { - title: 'Inline', - source: [{ - type: GuideSectionTypes.JS, - code: descriptionListInlineSource, - }, { - type: GuideSectionTypes.HTML, - code: descriptionListInlineHtml, - }], - text: ( -

- Using a prop type set to inline description lists - can be presented in an inline, blob format. This is useful for JSON code blocks. Inline - description lists are sized smaller than normal lists due to their compact nature. -

- ), - demo: , - }, { - title: 'Centered and compressed', - source: [{ - type: GuideSectionTypes.JS, - code: descriptionListStylingSource, - }, { - type: GuideSectionTypes.HTML, - code: descriptionListStylingHtml, - }], - text: ( -

- Using the align and compressed props you - can further tailor the look of a description list. This works with column - and inline types. -

- ), - demo: , - }, { - title: 'Passing className', - source: [{ - type: GuideSectionTypes.JS, - code: descriptionListClassesSource, - }, { - type: GuideSectionTypes.HTML, - code: descriptionListClassesHtml, - }], - text: ( -

- When using the listItems prop to pass an object of items and you - need to also add classNames (or other available props) to the individual - pieces, you can use the titleProps and descriptionProps to - do so. -

- ), - demo: , - }], + ), + demo: , + }, + ], }; diff --git a/src-docs/src/views/description_list/description_list_inline.js b/src-docs/src/views/description_list/description_list_inline.js index 6cb9e60033a..86863eba673 100644 --- a/src-docs/src/views/description_list/description_list_inline.js +++ b/src-docs/src/views/description_list/description_list_inline.js @@ -1,8 +1,6 @@ import React from 'react'; -import { - EuiDescriptionList, -} from '../../../../src/components'; +import { EuiDescriptionList } from '../../../../src/components'; const favoriteVideoGames = [ { @@ -11,7 +9,8 @@ const favoriteVideoGames = [ }, { title: 'TIE Fighter', - description: 'The sequel to XWING, join the dark side and fly for the Emporer.', + description: + 'The sequel to XWING, join the dark side and fly for the Emporer.', }, { title: 'Quake 2', diff --git a/src-docs/src/views/description_list/description_list_reverse.js b/src-docs/src/views/description_list/description_list_reverse.js index e4326eec950..05eef7ad13e 100644 --- a/src-docs/src/views/description_list/description_list_reverse.js +++ b/src-docs/src/views/description_list/description_list_reverse.js @@ -1,8 +1,6 @@ import React from 'react'; -import { - EuiDescriptionList, -} from '../../../../src/components'; +import { EuiDescriptionList } from '../../../../src/components'; const favoriteVideoGame = [ { diff --git a/src-docs/src/views/description_list/description_list_styling.js b/src-docs/src/views/description_list/description_list_styling.js index 2fb26f42dfc..199a681536e 100644 --- a/src-docs/src/views/description_list/description_list_styling.js +++ b/src-docs/src/views/description_list/description_list_styling.js @@ -1,9 +1,6 @@ import React from 'react'; -import { - EuiDescriptionList, - EuiSpacer, -} from '../../../../src/components'; +import { EuiDescriptionList, EuiSpacer } from '../../../../src/components'; const favoriteVideoGames = [ { @@ -12,7 +9,8 @@ const favoriteVideoGames = [ }, { title: 'TIE Fighter', - description: 'The sequel to XWING, join the dark side and fly for the Emporer.', + description: + 'The sequel to XWING, join the dark side and fly for the Emporer.', }, { title: 'Quake 2', diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop.js b/src-docs/src/views/drag_and_drop/drag_and_drop.js index 172175cb9ee..d9ea6f4fe9e 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop.js @@ -3,7 +3,7 @@ import { EuiDragDropContext, EuiDraggable, EuiDroppable, - EuiPanel + EuiPanel, } from '../../../../src/components'; import { reorder } from '../../../../src/components/drag_and_drop'; @@ -14,11 +14,7 @@ export default () => { const [list, setList] = useState(makeList(3)); const onDragEnd = ({ source, destination }) => { if (source && destination) { - const items = reorder( - list, - source.index, - destination.index - ); + const items = reorder(list, source.index, destination.index); setList(items); } @@ -30,7 +26,8 @@ export default () => { {(provided, state) => ( - {content}{state.isDragging && ' ✨'} + {content} + {state.isDragging && ' ✨'} )} diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_bare.js b/src-docs/src/views/drag_and_drop/drag_and_drop_bare.js index 858cf3ac3c2..32baf53ae4a 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_bare.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_bare.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { EuiDragDropContext, EuiDraggable, - EuiDroppable + EuiDroppable, } from '../../../../src/components'; import { makeList } from './helper'; @@ -17,11 +17,7 @@ export default () => { {list.map(({ content, id }, idx) => ( - {() => ( -
- {content} -
- )} + {() =>
{content}
}
))}
diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js b/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js index 771b85c5c04..6faa86544db 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js @@ -7,13 +7,10 @@ import { EuiDraggable, EuiDroppable, EuiIcon, - EuiPanel + EuiPanel, } from '../../../../src/components'; -import { - copy, - reorder -} from '../../../../src/components/drag_and_drop'; +import { copy, reorder } from '../../../../src/components/drag_and_drop'; import { makeId, makeList } from './helper'; @@ -22,7 +19,10 @@ export default () => { const [list1, setList1] = useState(makeList(3)); const [list2, setList2] = useState([]); const lists = { DROPPABLE_AREA_COPY_1: list1, DROPPABLE_AREA_COPY_2: list2 }; - const actions = { DROPPABLE_AREA_COPY_1: setList1, DROPPABLE_AREA_COPY_2: setList2 }; + const actions = { + DROPPABLE_AREA_COPY_1: setList1, + DROPPABLE_AREA_COPY_2: setList2, + }; const remove = (droppableId, index) => { const list = Array.from(lists[droppableId]); list.splice(index, 1); @@ -30,7 +30,8 @@ export default () => { actions[droppableId](list); }; const onDragUpdate = ({ source, destination }) => { - const shouldRemove = !destination && source.droppableId === 'DROPPABLE_AREA_COPY_2'; + const shouldRemove = + !destination && source.droppableId === 'DROPPABLE_AREA_COPY_2'; setIsItemRemovable(shouldRemove); }; const onDragEnd = ({ source, destination }) => { @@ -53,7 +54,7 @@ export default () => { destination, { property: 'id', - modifier: makeId + modifier: makeId, } ); @@ -68,50 +69,56 @@ export default () => { - - + {list1.map(({ content, id }, idx) => ( - - {content} - + {content} ))} - - - {list2.length ? - ( - list2.map(({ content, id }, idx) => ( - - - - {content} - - {isItemRemovable ? ( - - ) : ( - remove('DROPPABLE_AREA_COPY_2', idx)} - /> - )} - - - - - )) - ) : ( - - Drop Items Here - - )} + {list2.length ? ( + list2.map(({ content, id }, idx) => ( + + + + {content} + + {isItemRemovable ? ( + + ) : ( + remove('DROPPABLE_AREA_COPY_2', idx)} + /> + )} + + + + + )) + ) : ( + + Drop Items Here + + )} - diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js index 5d1a409bf75..57b7f3214f5 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js @@ -4,7 +4,7 @@ import { EuiDraggable, EuiDroppable, EuiButtonIcon, - EuiPanel + EuiPanel, } from '../../../../src/components'; import { move, reorder } from '../../../../src/components/drag_and_drop'; @@ -15,8 +15,16 @@ export default () => { const [list, setList] = useState([1, 2]); const [list1, setList1] = useState(makeList(3)); const [list2, setList2] = useState(makeList(3, 4)); - const lists = { COMPLEX_DROPPABLE_PARENT: list, COMPLEX_DROPPABLE_AREA_1: list1, COMPLEX_DROPPABLE_AREA_2: list2 }; - const actions = { COMPLEX_DROPPABLE_PARENT: setList, COMPLEX_DROPPABLE_AREA_1: setList1, COMPLEX_DROPPABLE_AREA_2: setList2 }; + const lists = { + COMPLEX_DROPPABLE_PARENT: list, + COMPLEX_DROPPABLE_AREA_1: list1, + COMPLEX_DROPPABLE_AREA_2: list2, + }; + const actions = { + COMPLEX_DROPPABLE_PARENT: setList, + COMPLEX_DROPPABLE_AREA_1: setList1, + COMPLEX_DROPPABLE_AREA_2: setList2, + }; const onDragEnd = ({ source, destination }) => { if (source && destination) { if (source.droppableId === destination.droppableId) { @@ -40,20 +48,17 @@ export default () => { actions[sourceId](result[sourceId]); actions[destinationId](result[destinationId]); } - } }; return ( - + style={{ display: 'flex' }}> {list.map((did, didx) => ( { style={{ flex: '1 0 50%' }} disableInteractiveElementBlocking // Allows button to be drag handle > - {(provided) => ( + {provided => ( - - {lists[`COMPLEX_DROPPABLE_AREA_${did}`].map(({ content, id }, idx) => ( - - - {content} - - - ))} + + {lists[`COMPLEX_DROPPABLE_AREA_${did}`].map( + ({ content, id }, idx) => ( + + {content} + + ) + )} )} ))} - ); }; diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js b/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js index d0086cf55ad..6ec532719fb 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js @@ -6,7 +6,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, - EuiPanel + EuiPanel, } from '../../../../src/components'; import { reorder } from '../../../../src/components/drag_and_drop'; @@ -17,21 +17,25 @@ export default () => { const [list, setList] = useState(makeList(3)); const onDragEnd = ({ source, destination }) => { if (source && destination) { - const items = reorder( - list, - source.index, - destination.index - ); + const items = reorder(list, source.index, destination.index); setList(items); } }; return ( - + {list.map(({ content, id }, idx) => ( - - {(provided) => ( + + {provided => ( @@ -39,9 +43,7 @@ export default () => {
- - {content} - + {content} )} diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js index 0fd54c5ed7e..ed652dd8e8a 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js @@ -3,7 +3,7 @@ import { EuiButton, EuiDragDropContext, EuiDraggable, - EuiDroppable + EuiDroppable, } from '../../../../src/components'; import { reorder } from '../../../../src/components/drag_and_drop'; @@ -14,20 +14,25 @@ export default () => { const [list, setList] = useState(makeList(3)); const onDragEnd = ({ source, destination }) => { if (source && destination) { - const items = reorder( - list, - source.index, - destination.index - ); + const items = reorder(list, source.index, destination.index); setList(items); } }; return ( - + {list.map(({ content, id }, idx) => ( - + alert(`${content} clicked!`)}> {content} diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js index bef1d0ddb6e..7fabe8aaee8 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js @@ -8,7 +8,7 @@ import { EuiDroppable, EuiLink, EuiSpacer, - EuiText + EuiText, } from '../../../../src/components'; import { renderToHtml } from '../../services'; @@ -51,17 +51,21 @@ export const DragAndDropExample = {

- An extension of react-beautiful-dnd with a compatible API and built-in style opinions. - Functionality results from 3 components working together: + An extension of{' '} + + react-beautiful-dnd + {' '} + with a compatible API and built-in style opinions. Functionality + results from 3 components working together:

  • - {``}: - Section of your application containing the draggable elements and the drop targets. + {``}: Section of your + application containing the draggable elements and the drop targets.
  • - {``}: Area into which items can be dropped. - Contains {``}s. + {``}: Area into which items can + be dropped. Contains {``}s.
  • {``}: Items that can be dragged. @@ -72,15 +76,15 @@ export const DragAndDropExample = { - +

    - Drag and drop interfaces are not well-adapted to many cases, and may be less suitable than other form types for data operations. - For instance, drag and drop interaction relies heavily on spatial orientation that may not be entirelty valid to all - users (e.g., screen readers as the sole source of information). Similarly, users navigating by keyboard may not be afforded - nuanced, dual-axis drag item manipulation. + Drag and drop interfaces are not well-adapted to many cases, and may + be less suitable than other form types for data operations. For + instance, drag and drop interaction relies heavily on spatial + orientation that may not be entirelty valid to all users (e.g., screen + readers as the sole source of information). Similarly, users + navigating by keyboard may not be afforded nuanced, dual-axis drag + item manipulation.

    {`EUI (largely due to the great work already in react-beautiful-dnd) has and will continue to ensure accessibility where possible. @@ -97,236 +101,287 @@ export const DragAndDropExample = { source: [ { type: GuideSectionTypes.JS, - code: dragAndDropBareSource + code: dragAndDropBareSource, }, { type: GuideSectionTypes.HTML, - code: dragAndDropBareHtml - } + code: dragAndDropBareHtml, + }, ], text: (

    - EuiDraggable makes very few assumptions about what content it contains. - To give affordance to draggable elements and to ensure a consistent experience, child elements - must be able to accept a border and drop shadow (automatically applied via CSS). No other style opinions are applied, however. + EuiDraggable makes very few assumptions about + what content it contains. To give affordance to draggable elements + and to ensure a consistent experience, child elements must be able + to accept a border and drop shadow (automatically applied via CSS). + No other style opinions are applied, however.

    - Similarly, EuiDroppable must accept a background color overlay (automatically applied via CSS), - but has no other restrictions. + Similarly, EuiDroppable must accept a background + color overlay (automatically applied via CSS), but has no other + restrictions.

    - All EuiDragDropContext elements are discrete and isolated; EuiDroppables and - EuiDraggables cannot be shared/transferred between instances. Also, EuiDragDropContexts - cannot be nested. It is recommended that a single, high-level EuiDragDropContext is used and - EuiDroppables account for categorical and functional separation (see later examples). + All EuiDragDropContext elements are discrete and + isolated; EuiDroppables and + EuiDraggables cannot be shared/transferred + between instances. Also, EuiDragDropContexts + cannot be nested. It is recommended that a single, high-level{' '} + EuiDragDropContext is used and + EuiDroppables account for categorical and + functional separation (see later examples).

    - EuiDragDropContext handles all eventing but makes no assumptions about the result of a drop event. - As such, the following event handlers are available: + EuiDragDropContext handles all eventing but makes + no assumptions about the result of a drop event. As such, the + following event handlers are available:

      -
    • onBeforeDragStart
    • -
    • onDragStart
    • -
    • onDragUpdate
    • -
    • onDragEnd (required)
    • +
    • + onBeforeDragStart +
    • +
    • + onDragStart +
    • +
    • + onDragUpdate +
    • +
    • + onDragEnd (required) +

    - EUI also provides methods for helping to deal to common action types: + EUI also provides methods for helping to deal to common action + types:

      -
    • reorder: {`change an item's location in a droppable area`}
    • -
    • copy: create a duplicate of an item in a different droppable area
    • -
    • move: move an item to a differnt droppable area
    • +
    • + reorder:{' '} + {`change an item's location in a droppable area`} +
    • +
    • + copy: create a duplicate of an item in a + different droppable area +
    • +
    • + move: move an item to a differnt droppable area +
    ), props: { EuiDragDropContext, EuiDraggable, EuiDroppable }, - demo: + demo: , }, { title: 'Simple item reorder', source: [ { type: GuideSectionTypes.JS, - code: dragAndDropSource + code: dragAndDropSource, }, { type: GuideSectionTypes.HTML, - code: dragAndDropHtml - } + code: dragAndDropHtml, + }, ], text: (

    - The simplest case, demonstrating a single EuiDroppable with reorder behavior. + The simplest case, demonstrating a single{' '} + EuiDroppable with reorder{' '} + behavior.

    - Notice the ability to change rendered content based on dragging state. - EuiDraggable children is a render prop that mush return a ReactElement. - The snapshot parameter on that function has state data that can be used to alter appearance or behavior - (e.g., isDragging). + Notice the ability to change rendered content based on dragging + state. + EuiDraggable children is a + render prop that mush return a ReactElement. The{' '} + snapshot parameter on that function has state + data that can be used to alter appearance or behavior (e.g.,{' '} + isDragging).

    ), props: { EuiDragDropContext, EuiDraggable, EuiDroppable }, - demo: + demo: , }, { title: 'Custom drag handle', source: [ { type: GuideSectionTypes.JS, - code: dragAndDropCustomHandleSource + code: dragAndDropCustomHandleSource, }, { type: GuideSectionTypes.HTML, - code: dragAndDropCustomHandleHtml - } + code: dragAndDropCustomHandleHtml, + }, ], text: (

    - By default the entire element surface can initiate a drag. - To specify a certain element within as the handle, set - customDragHandle=true on the EuiDraggable. + By default the entire element surface can initiate a drag. To + specify a certain element within as the handle, set + customDragHandle=true on the{' '} + EuiDraggable.

    - The provided parameter on the EuiDraggable children render prop has all - data required for functionality. Along with the customDragHandle flag, - provided.dragHandleProps needs to be added to the intended handle element. + The provided parameter on the{' '} + EuiDraggable children render + prop has all data required for functionality. Along with the{' '} + customDragHandle flag, + provided.dragHandleProps needs to be added to the + intended handle element.

    ), - demo: + demo: , }, { title: 'Interactive elements', source: [ { type: GuideSectionTypes.JS, - code: dragAndDropDisableBlockingSource + code: dragAndDropDisableBlockingSource, }, { type: GuideSectionTypes.HTML, - code: dragAndDropDisableBlockingHtml - } + code: dragAndDropDisableBlockingHtml, + }, ], text: (

    - EuiDraggable elements can contain interactive elements such as buttons and form fields by adding the - disableInteractiveElementBlocking prop. This will keep drag functionality while also enabling click, etc., - events on the interactive child elements. + EuiDraggable elements can contain interactive + elements such as buttons and form fields by adding the + disableInteractiveElementBlocking prop. This will + keep drag functionality while also enabling click, etc., events on + the interactive child elements.

    ), - demo: + demo: , }, { title: 'Move between lists', source: [ { type: GuideSectionTypes.JS, - code: dragAndDropMoveListsSource + code: dragAndDropMoveListsSource, }, { type: GuideSectionTypes.HTML, - code: dragAndDropMoveListsHtml - } + code: dragAndDropMoveListsHtml, + }, ], text: (

    - By default, all EuiDroppable elements are of the same type and will - accept EuiDraggable elements from others in the same EuiDragDropContext. + By default, all EuiDroppable elements are of the + same type and will accept EuiDraggable elements + from others in the same EuiDragDropContext.

    - The EUI move method is demonstrated in this example. + The EUI move method is demonstrated in this + example.

    ), - demo: + demo: , }, { title: 'Distinguish droppable areas by type', source: [ { type: GuideSectionTypes.JS, - code: dragAndDropTypesSource + code: dragAndDropTypesSource, }, { type: GuideSectionTypes.HTML, - code: dragAndDropTypesHtml - } + code: dragAndDropTypesHtml, + }, ], text: (

    - Setting the type prop on an EuiDroppable element will ensure that it will only accept - EuiDraggable elements from the same type of EuiDroppable. + Setting the type prop on an{' '} + EuiDroppable element will ensure that it will + only accept + EuiDraggable elements from the same type of{' '} + EuiDroppable.

    - Notice that the enabled, compatible EuiDroppable elements have a visual change that indicates they can accept - the actively moving/focused EuiDraggable element. + Notice that the enabled, compatible EuiDroppable{' '} + elements have a visual change that indicates they can accept the + actively moving/focused EuiDraggable element.

    ), - demo: + demo: , }, { title: 'Copyable items', source: [ { type: GuideSectionTypes.JS, - code: dragAndDropCloneSource + code: dragAndDropCloneSource, }, { type: GuideSectionTypes.HTML, - code: dragAndDropCloneHtml - } + code: dragAndDropCloneHtml, + }, ], text: (

    - For cases where collections of EuiDraggable elements are static or can be used in multiple places - set cloneDraggables=true on the parent EuiDroppable. The EuiDroppable - becomes disabled (does not accept new EuiDraggable elements) - in this scenario to avoid mixed content intentions. + For cases where collections of EuiDraggable{' '} + elements are static or can be used in multiple places set{' '} + cloneDraggables=true on the parent{' '} + EuiDroppable. The EuiDroppable + becomes disabled (does not accept new{' '} + EuiDraggable elements) in this scenario to avoid + mixed content intentions.

    - The EUI copy method is available and demonstrated in the example below. Note that the data point used as - draggableId in EuiDraggable must change to allow for real duplication. + The EUI copy method is available and demonstrated + in the example below. Note that the data point used as + draggableId in EuiDraggable{' '} + must change to allow for real duplication.

    - isRemovable is used in the example for cloned items. This API is likely to change, but currently provides - the visual changes with drop-to-remove interactions. + isRemovable is used in the example for cloned + items. This API is likely to change, but currently provides the + visual changes with drop-to-remove interactions.

    ), - demo: - }, { + demo: , + }, + { title: 'We have fun', source: [ { type: GuideSectionTypes.JS, - code: dragAndDropComplexSource + code: dragAndDropComplexSource, }, { type: GuideSectionTypes.HTML, - code: dragAndDropComplexHtml - } + code: dragAndDropComplexHtml, + }, ], text: (

    - EuiDraggables in EuiDroppables, EuiDroppables in - EuiDraggables, custom drag handles, horizontal movement, vertical movement, flexbox, + EuiDraggables in EuiDroppables + , EuiDroppables in + EuiDraggables, custom drag handles, horizontal + movement, vertical movement, flexbox, EuiPanel Inception, you name it.

    ), - demo: - } - ] + demo: , + }, + ], }; diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_move_lists.js b/src-docs/src/views/drag_and_drop/drag_and_drop_move_lists.js index 65f427501d3..db5e1e4a5b2 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_move_lists.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_move_lists.js @@ -6,13 +6,10 @@ import { EuiDraggable, EuiDroppable, EuiIcon, - EuiPanel + EuiPanel, } from '../../../../src/components'; -import { - move, - reorder -} from '../../../../src/components/drag_and_drop'; +import { move, reorder } from '../../../../src/components/drag_and_drop'; import { makeList } from './helper'; @@ -44,53 +41,70 @@ export default () => { actions[sourceId](result[sourceId]); actions[destinationId](result[destinationId]); } - } }; return ( - - + {list1.length > 0 ? ( list1.map(({ content, id }, idx) => ( {(provided, state) => ( - {content}{state.isDragging && ' ✨'} + {content} + {state.isDragging && ' ✨'} )} )) ) : ( - - + + + + )} - - - + {list2.length > 0 ? ( list2.map(({ content, id }, idx) => ( {(provided, state) => ( - {content}{state.isDragging && ' ✨'} + {content} + {state.isDragging && ' ✨'} )} )) ) : ( - - + + + + )} - diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_types.js b/src-docs/src/views/drag_and_drop/drag_and_drop_types.js index ddbfedcd0e6..5f8c65800ca 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_types.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_types.js @@ -5,13 +5,10 @@ import { EuiFlexItem, EuiDraggable, EuiDroppable, - EuiPanel + EuiPanel, } from '../../../../src/components'; -import { - move, - reorder -} from '../../../../src/components/drag_and_drop'; +import { move, reorder } from '../../../../src/components/drag_and_drop'; import { makeList } from './helper'; @@ -20,8 +17,16 @@ export default () => { const [list2, setList2] = useState(makeList(3, 4)); const [list3, setList3] = useState(makeList(3, 7)); const onDragEnd = ({ source, destination }) => { - const lists = { DROPPABLE_AREA_TYPE_1: list1, DROPPABLE_AREA_TYPE_2: list2, DROPPABLE_AREA_TYPE_3: list3 }; - const actions = { DROPPABLE_AREA_TYPE_1: setList1, DROPPABLE_AREA_TYPE_2: setList2, DROPPABLE_AREA_TYPE_3: setList3 }; + const lists = { + DROPPABLE_AREA_TYPE_1: list1, + DROPPABLE_AREA_TYPE_2: list2, + DROPPABLE_AREA_TYPE_3: list3, + }; + const actions = { + DROPPABLE_AREA_TYPE_1: setList1, + DROPPABLE_AREA_TYPE_2: setList2, + DROPPABLE_AREA_TYPE_3: setList3, + }; if (source && destination) { if (source.droppableId === destination.droppableId) { const items = reorder( @@ -44,56 +49,67 @@ export default () => { actions[sourceId](result[sourceId]); actions[destinationId](result[destinationId]); } - } }; return ( - - + {list1.map(({ content, id }, idx) => ( {(provided, state) => ( - {content}{state.isDragging && ' ✨'} + {content} + {state.isDragging && ' ✨'} )} ))} - - - + {list2.map(({ content, id }, idx) => ( {(provided, state) => ( - {content}{state.isDragging && ' ✨'} + {content} + {state.isDragging && ' ✨'} )} ))} - - - + {list3.map(({ content, id }, idx) => ( {(provided, state) => ( - {content}{state.isDragging && ' ✨'} + {content} + {state.isDragging && ' ✨'} )} ))} - diff --git a/src-docs/src/views/drag_and_drop/helper.js b/src-docs/src/views/drag_and_drop/helper.js index 2915968e3c8..9e3668abef1 100644 --- a/src-docs/src/views/drag_and_drop/helper.js +++ b/src-docs/src/views/drag_and_drop/helper.js @@ -2,9 +2,10 @@ import { htmlIdGenerator } from '../../../../src/services'; export const makeId = htmlIdGenerator(); -export const makeList = (number, start = 1) => Array.from({ length: number }, (v, k) => k + start).map(el => { - return { - content: `Item ${el}`, - id: makeId() - }; -}); +export const makeList = (number, start = 1) => + Array.from({ length: number }, (v, k) => k + start).map(el => { + return { + content: `Item ${el}`, + id: makeId(), + }; + }); diff --git a/src-docs/src/views/empty_prompt/custom.js b/src-docs/src/views/empty_prompt/custom.js index 196feb0f698..12e49479089 100644 --- a/src-docs/src/views/empty_prompt/custom.js +++ b/src-docs/src/views/empty_prompt/custom.js @@ -1,9 +1,6 @@ import React, { Fragment } from 'react'; -import { - EuiEmptyPrompt, - EuiButton, -} from '../../../../src/components'; +import { EuiEmptyPrompt, EuiButton } from '../../../../src/components'; export default () => ( ( body={

    - Navigators use massive amounts of spice to gain a limited form of prescience. - This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy. + Navigators use massive amounts of spice to gain a limited form of + prescience. This allows them to safely navigate interstellar space, + enabling trade and travel throughout the galaxy.

    You’ll need spice to rule Arrakis, young Atreides.

    } - actions={Harvest spice} + actions={ + + Harvest spice + + } /> ); diff --git a/src-docs/src/views/empty_prompt/empty_prompt.js b/src-docs/src/views/empty_prompt/empty_prompt.js index a27b5df9dda..01ca6c7e193 100644 --- a/src-docs/src/views/empty_prompt/empty_prompt.js +++ b/src-docs/src/views/empty_prompt/empty_prompt.js @@ -1,9 +1,6 @@ import React, { Fragment } from 'react'; -import { - EuiEmptyPrompt, - EuiButton, -} from '../../../../src/components'; +import { EuiEmptyPrompt, EuiButton } from '../../../../src/components'; export default () => ( ( body={

    - Navigators use massive amounts of spice to gain a limited form of prescience. - This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy. + Navigators use massive amounts of spice to gain a limited form of + prescience. This allows them to safely navigate interstellar space, + enabling trade and travel throughout the galaxy.

    You’ll need spice to rule Arrakis, young Atreides.

    } - actions={Harvest spice} + actions={ + + Harvest spice + + } /> ); diff --git a/src-docs/src/views/empty_prompt/empty_prompt_example.js b/src-docs/src/views/empty_prompt/empty_prompt_example.js index 610d94cdd57..f3290af56df 100644 --- a/src-docs/src/views/empty_prompt/empty_prompt_example.js +++ b/src-docs/src/views/empty_prompt/empty_prompt_example.js @@ -2,14 +2,9 @@ import React, { Fragment } from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiEmptyPrompt, -} from '../../../../src/components'; +import { EuiCode, EuiEmptyPrompt } from '../../../../src/components'; import EmptyPrompt from './empty_prompt'; const emptyPromptSource = require('!!raw-loader!./empty_prompt'); @@ -25,59 +20,71 @@ const simpleHtml = renderToHtml(Simple); export const EmptyPromptExample = { title: 'EmptyPrompt', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: emptyPromptSource, - }, { - type: GuideSectionTypes.HTML, - code: emptyPromptHtml, - }], - text: ( -

    - Use the EuiEmptyPrompt as a placeholder for an empty table or list of content. -

    - ), - props: { EuiEmptyPrompt }, - demo: , - }, { - title: 'Custom sizes and colors', - source: [{ - type: GuideSectionTypes.JS, - code: customSource, - }, { - type: GuideSectionTypes.HTML, - code: customHtml, - }], - text: ( -

    - You can control sizes and colors with the iconColor,{' '} - and titleSize props. -

    - ), - props: { EuiEmptyPrompt }, - demo: , - }, { - title: 'Less content, more actions', - source: [{ - type: GuideSectionTypes.JS, - code: simpleSource, - }, { - type: GuideSectionTypes.HTML, - code: simpleHtml, - }], - text: ( - + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: emptyPromptSource, + }, + { + type: GuideSectionTypes.HTML, + code: emptyPromptHtml, + }, + ], + text: (

    - You can remove parts of the prompt to simplify it, if you wish. + Use the EuiEmptyPrompt as a placeholder for an + empty table or list of content.

    + ), + props: { EuiEmptyPrompt }, + demo: , + }, + { + title: 'Custom sizes and colors', + source: [ + { + type: GuideSectionTypes.JS, + code: customSource, + }, + { + type: GuideSectionTypes.HTML, + code: customHtml, + }, + ], + text: (

    - You can also provide an array of multiple actions. Be sure to list primary actions first - and secondary actions last. + You can control sizes and colors with the iconColor + , and titleSize props.

    -
    - ), - props: { EuiEmptyPrompt }, - demo: , - }], + ), + props: { EuiEmptyPrompt }, + demo: , + }, + { + title: 'Less content, more actions', + source: [ + { + type: GuideSectionTypes.JS, + code: simpleSource, + }, + { + type: GuideSectionTypes.HTML, + code: simpleHtml, + }, + ], + text: ( + +

    You can remove parts of the prompt to simplify it, if you wish.

    +

    + You can also provide an array of multiple actions. Be sure to list + primary actions first and secondary actions last. +

    +
    + ), + props: { EuiEmptyPrompt }, + demo: , + }, + ], }; diff --git a/src-docs/src/views/empty_prompt/simple.js b/src-docs/src/views/empty_prompt/simple.js index b8d0a864ee1..60e0f904dd4 100644 --- a/src-docs/src/views/empty_prompt/simple.js +++ b/src-docs/src/views/empty_prompt/simple.js @@ -10,7 +10,9 @@ export default () => ( You have no spice} actions={[ - Harvest spice, + + Harvest spice + , Sabotage all spice fields, ]} /> diff --git a/src-docs/src/views/error_boundary/error_boundary.js b/src-docs/src/views/error_boundary/error_boundary.js index 8e43a9012ff..4916c5ecc53 100644 --- a/src-docs/src/views/error_boundary/error_boundary.js +++ b/src-docs/src/views/error_boundary/error_boundary.js @@ -1,11 +1,11 @@ import React from 'react'; -import { - EuiErrorBoundary, -} from '../../../../src/components'; +import { EuiErrorBoundary } from '../../../../src/components'; const BadComponent = () => { - throw new Error('I\'m here to kick butt and chew bubblegum. And I\'m all out of gum.'); + throw new Error( + "I'm here to kick butt and chew bubblegum. And I'm all out of gum." + ); }; export default () => ( diff --git a/src-docs/src/views/error_boundary/error_boundary_example.js b/src-docs/src/views/error_boundary/error_boundary_example.js index 733f65a1512..d8b5048d176 100644 --- a/src-docs/src/views/error_boundary/error_boundary_example.js +++ b/src-docs/src/views/error_boundary/error_boundary_example.js @@ -2,14 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiErrorBoundary, -} from '../../../../src/components'; +import { EuiCode, EuiErrorBoundary } from '../../../../src/components'; import ErrorBoundary from './error_boundary'; const errorBoundarySource = require('!!raw-loader!./error_boundary'); @@ -17,20 +12,26 @@ const errorBoundaryHtml = renderToHtml(ErrorBoundary); export const ErrorBoundaryExample = { title: 'Error Boundary', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: errorBoundarySource, - }, { - type: GuideSectionTypes.HTML, - code: errorBoundaryHtml, - }], - text: ( -

    - Use EuiErrorBoundary to prevent errors from taking down the entire app. -

    - ), - props: { EuiErrorBoundary }, - demo: , - }], + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: errorBoundarySource, + }, + { + type: GuideSectionTypes.HTML, + code: errorBoundaryHtml, + }, + ], + text: ( +

    + Use EuiErrorBoundary to prevent errors from taking + down the entire app. +

    + ), + props: { EuiErrorBoundary }, + demo: , + }, + ], }; diff --git a/src-docs/src/views/expression/expression.js b/src-docs/src/views/expression/expression.js index 3512c178007..04b0aa4f6ed 100644 --- a/src-docs/src/views/expression/expression.js +++ b/src-docs/src/views/expression/expression.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiPopoverTitle, @@ -11,9 +9,7 @@ import { EuiFieldNumber, } from '../../../../src/components'; -import { - EuiExpression, -} from '../../../../src/components/expression'; +import { EuiExpression } from '../../../../src/components/expression'; // Rise the popovers above GuidePageSideNav const POPOVER_STYLE = { zIndex: '200' }; @@ -25,11 +21,11 @@ export default class extends Component { this.state = { example1: { isOpen: false, - value: 'count()' + value: 'count()', }, example2: { value: 100, - description: 'Is above' + description: 'Is above', }, }; } @@ -78,24 +74,27 @@ export default class extends Component { }); }; - changeExample1 = (event) => { - this.setState({ example1: { ...this.state.example1, value: event.target.value } }); - } + changeExample1 = event => { + this.setState({ + example1: { ...this.state.example1, value: event.target.value }, + }); + }; - changeExample2Value = (e) => { + changeExample2Value = e => { const sanitizedValue = parseInt(e.target.value, 10); this.setState({ example2: { ...this.state.example2, value: isNaN(sanitizedValue) ? '' : sanitizedValue, - } + }, }); + }; - } - - changeExample2Description = (event) => { - this.setState({ example2: { ...this.state.example2, description: event.target.value } }); - } + changeExample2Description = event => { + this.setState({ + example2: { ...this.state.example2, description: event.target.value }, + }); + }; renderPopover1() { return ( @@ -150,20 +149,19 @@ export default class extends Component { - )} + } isOpen={this.state.example1.isOpen} closePopover={this.closeExample1} ownFocus withTitle - anchorPosition="downLeft" - > + anchorPosition="downLeft"> {this.renderPopover1()} @@ -171,19 +169,18 @@ export default class extends Component { - )} + } isOpen={this.state.example2.isOpen} closePopover={this.closeExample2} ownFocus - anchorPosition="downLeft" - > + anchorPosition="downLeft"> {this.renderPopover2()} diff --git a/src-docs/src/views/expression/expression_example.js b/src-docs/src/views/expression/expression_example.js index 6477516afff..80e3fdf6f6e 100644 --- a/src-docs/src/views/expression/expression_example.js +++ b/src-docs/src/views/expression/expression_example.js @@ -2,17 +2,11 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, -} from '../../../../src/components'; +import { EuiCode } from '../../../../src/components'; -import { - EuiExpression, -} from '../../../../src/components/expression'; +import { EuiExpression } from '../../../../src/components/expression'; import Expression from './expression'; const expressionSource = require('!!raw-loader!./expression'); @@ -28,54 +22,71 @@ const stringingHtml = renderToHtml(Stringing); export const ExpressionExample = { title: 'Expression', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: expressionSource, - }, { - type: GuideSectionTypes.HTML, - code: expressionHtml, - }], - text: ( -

    - Use the EuiExpression component to surface expressions. The requires both - a description (left side) and value (right side). Optionally, - you can pass it an onClick function that will convert it to a button and add some - additional styling to indicate that it is clickable. -

    - ), - props: { EuiExpression }, - demo: , - }, { - title: 'Colors', - source: [{ - type: GuideSectionTypes.JS, - code: colorSource, - }, { - type: GuideSectionTypes.HTML, - code: colorHtml, - }], - text: ( -

    - You can pass a color prop but it will only color the description. -

    - ), - demo: , - }, { - title: 'Stringing a bunch together', - source: [{ - type: GuideSectionTypes.JS, - code: stringingSource, - }, { - type: GuideSectionTypes.HTML, - code: stringingHtml, - }], - text: ( -

    - If the expression is more than one description and value, you can string multiple expressions together - and they should inline together and wrap at logical points. -

    - ), - demo: , - }], + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: expressionSource, + }, + { + type: GuideSectionTypes.HTML, + code: expressionHtml, + }, + ], + text: ( +

    + Use the EuiExpression component to surface + expressions. The requires both a description (left + side) and value (right side). Optionally, you can + pass it an onClick function that will convert it to + a button and add some additional styling to indicate that it is + clickable. +

    + ), + props: { EuiExpression }, + demo: , + }, + { + title: 'Colors', + source: [ + { + type: GuideSectionTypes.JS, + code: colorSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorHtml, + }, + ], + text: ( +

    + You can pass a color prop but it will only color + the description. +

    + ), + demo: , + }, + { + title: 'Stringing a bunch together', + source: [ + { + type: GuideSectionTypes.JS, + code: stringingSource, + }, + { + type: GuideSectionTypes.HTML, + code: stringingHtml, + }, + ], + text: ( +

    + If the expression is more than one description and value, you can + string multiple expressions together and they should inline together + and wrap at logical points. +

    + ), + demo: , + }, + ], }; diff --git a/src-docs/src/views/facet/facet.js b/src-docs/src/views/facet/facet.js index c4ca9dd3326..cc773b98a43 100644 --- a/src-docs/src/views/facet/facet.js +++ b/src-docs/src/views/facet/facet.js @@ -5,23 +5,29 @@ import { EuiFacetButton, EuiIcon, EuiAvatar } from '../../../../src/components'; export default () => (
    Simple, no icon -
    +
    Simple, selected -
    - }> +
    + }> Label or color indicator -
    +
    Disabled -
    - }> +
    + }> Avatar as icon -
    - Loading +
    + + Loading +
    ); diff --git a/src-docs/src/views/facet/facet_example.js b/src-docs/src/views/facet/facet_example.js index 06b63afc631..3578fcb666d 100644 --- a/src-docs/src/views/facet/facet_example.js +++ b/src-docs/src/views/facet/facet_example.js @@ -30,11 +30,13 @@ export const FacetExample = { ], text: (

    - EuiFacetButtons are to be used when allowing lists with multiple search params to be - filtered down by these particular params. They allow for an icon node and/or{' '} - quantity to be passed. You can also indicate the current selection with{' '} - isSelected. Other props include isDisabled and{' '} - isLoading (which will swap the quantity indicator with a loading icon). + EuiFacetButtons are to be used when allowing lists with + multiple search params to be filtered down by these particular params. + They allow for an icon node and/or quantity{' '} + to be passed. You can also indicate the current selection with{' '} + isSelected. Other props include isDisabled{' '} + and isLoading (which will swap the quantity indicator + with a loading icon).

    ), props: { EuiFacetButton }, @@ -55,15 +57,17 @@ export const FacetExample = { text: (

    - Typically, each facet grouping should display similarly. For example, they should all - have icons or be similar icon nodes (like avatars). It is up to you whether each - group should be single or multi-selection. + Typically, each facet grouping should display similarly. For + example, they should all have icons or be similar icon nodes (like + avatars). It is up to you whether each group should be single or + multi-selection.

    - Utilize the EuiFacetGroup wrapper to correctly layout multiple facets. You - can supply a layout of either horizontal or{' '} - vertical with the default being vertical. Be sure to contain - vertical layouts in a skinny component or give it a max-width. + Utilize the EuiFacetGroup wrapper to correctly layout + multiple facets. You can supply a layout of either{' '} + horizontal or vertical with the default + being vertical. Be sure to contain vertical layouts in + a skinny component or give it a max-width.

    ), diff --git a/src-docs/src/views/facet/facet_layout.js b/src-docs/src/views/facet/facet_layout.js index e91efb71d15..dadaf3f89a9 100644 --- a/src-docs/src/views/facet/facet_layout.js +++ b/src-docs/src/views/facet/facet_layout.js @@ -150,8 +150,7 @@ export default class extends Component { isSelected={selectedOptionId === facet.id} isDisabled={disabled && facet.id !== 'facet2'} isLoading={loading} - onClick={facet.onClick ? () => facet.onClick(facet.id) : undefined} - > + onClick={facet.onClick ? () => facet.onClick(facet.id) : undefined}> {facet.label} ); diff --git a/src-docs/src/views/filter_group/filter_group.js b/src-docs/src/views/filter_group/filter_group.js index 506d4b801bc..681dce6d819 100644 --- a/src-docs/src/views/filter_group/filter_group.js +++ b/src-docs/src/views/filter_group/filter_group.js @@ -1,7 +1,4 @@ - -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiPopover, @@ -27,21 +24,27 @@ export default class extends Component { this.setState(prevState => ({ isFilterOn: !prevState.isFilterOn, })); - } + }; toggleOnFilter = () => { this.setState(prevState => ({ isOnFilterOn: !prevState.isOnFilterOn, - isOffFilterOn: prevState.isOffFilterOn && !prevState.isOnFilterOn ? false : prevState.isOffFilterOn, + isOffFilterOn: + prevState.isOffFilterOn && !prevState.isOnFilterOn + ? false + : prevState.isOffFilterOn, })); - } + }; toggleOffFilter = () => { this.setState(prevState => ({ isOffFilterOn: !prevState.isOffFilterOn, - isOnFilterOn: prevState.isOnFilterOn && !prevState.isOffFilterOn ? false : prevState.isOnFilterOn, + isOnFilterOn: + prevState.isOnFilterOn && !prevState.isOffFilterOn + ? false + : prevState.isOnFilterOn, })); - } + }; onButtonClick() { this.setState({ @@ -56,7 +59,6 @@ export default class extends Component { } render() { - const button = ( + numActiveFilters={2}> Composers ); return ( - + Filter - + On - + Off + withTitle>
    @@ -98,7 +108,10 @@ export default class extends Component {
    - + Filter with a very long name
    diff --git a/src-docs/src/views/filter_group/filter_group_example.js b/src-docs/src/views/filter_group/filter_group_example.js index 6bf03f061c7..a784a1f8f2f 100644 --- a/src-docs/src/views/filter_group/filter_group_example.js +++ b/src-docs/src/views/filter_group/filter_group_example.js @@ -1,13 +1,10 @@ import React, { Fragment } from 'react'; -import { -} from 'react-router'; +import {} from 'react-router'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiCode, @@ -30,72 +27,88 @@ const filterGroupMultiHtml = renderToHtml(FilterGroup); export const FilterGroupExample = { title: 'Filter Group', - sections: [{ - title: 'Filter buttons', - source: [{ - type: GuideSectionTypes.JS, - code: filterGroupSimpleSource, - }, { - type: GuideSectionTypes.HTML, - code: filterGroupSimpleHtml, - }], - text: ( - -

    - Use EuiFilterGroup to wrap EuiFilterButtons - into a container that looks nice against form fields (like search). These buttons - are used in two different patterns. The most simplest use is that of an on/off pattern to show - whether a filter is on. Add the prop withNext to remove the border between it - and the next EuiFilterButton to visually group similar or opposite style filters. -

    -

    - Add the prop withNext to remove the border between it - and the next EuiFilterButton to visually group similar or opposite style filters. -

    -

    - Set hasActiveFilters to true when the filter is active. -

    -
    - ), - props: { EuiFilterGroup, EuiFilterButton }, - demo: , - snippet: ` + sections: [ + { + title: 'Filter buttons', + source: [ + { + type: GuideSectionTypes.JS, + code: filterGroupSimpleSource, + }, + { + type: GuideSectionTypes.HTML, + code: filterGroupSimpleHtml, + }, + ], + text: ( + +

    + Use EuiFilterGroup to wrap{' '} + EuiFilterButtons into a container that looks nice + against form fields (like search). These buttons are used in two + different patterns. The most simplest use is that of an on/off + pattern to show whether a filter is on. Add the prop{' '} + withNext to remove the border between it and the + next EuiFilterButton to visually group similar or opposite style + filters. +

    +

    + Add the prop withNext to remove the border + between it and the next EuiFilterButton to visually group similar or + opposite style filters. +

    +

    + Set hasActiveFilters to true when the filter is + active. +

    +
    + ), + props: { EuiFilterGroup, EuiFilterButton }, + demo: , + snippet: ` Single filter -` - }, - { - title: 'Multi-select', - source: [{ - type: GuideSectionTypes.JS, - code: filterGroupMultiSource, - }, { - type: GuideSectionTypes.HTML, - code: filterGroupMultiHtml, - }], - text: ( - -

    - To provide a long list of grouped filter, use a popover for filtering an - array of passed items. This mostly uses standard popover mechanics, but the - component EuiFilterSelectItem is used for the items themselves. -

    -

    Indicating number of filters

    -

    - By passing a number to numFilters you can express the number of filters available. - When the user has applied these filter add the prop hasActiveFilters as before - and this will change the coloring of the indicator. You can also supply a number to numActiveFilters - which will change the number displayed. -

    -
    - ), - props: { EuiFilterButton, EuiFilterSelectItem }, - demo: , - snippet: ` +`, + }, + { + title: 'Multi-select', + source: [ + { + type: GuideSectionTypes.JS, + code: filterGroupMultiSource, + }, + { + type: GuideSectionTypes.HTML, + code: filterGroupMultiHtml, + }, + ], + text: ( + +

    + To provide a long list of grouped filter, use a popover for + filtering an array of passed items. This mostly uses standard + popover mechanics, but the component{' '} + EuiFilterSelectItem is used for the items + themselves. +

    +

    Indicating number of filters

    +

    + By passing a number to numFilters you can express + the number of filters available. When the user has applied these + filter add the prop hasActiveFilters as before + and this will change the coloring of the indicator. You can also + supply a number to numActiveFilters + which will change the number displayed. +

    +
    + ), + props: { EuiFilterButton, EuiFilterSelectItem }, + demo: , + snippet: ` ... -` - }, - { - title: 'Layout', - source: [{ - type: GuideSectionTypes.JS, - code: filterGroupSource, - }, { - type: GuideSectionTypes.HTML, - code: filterGroupHtml, - }], - text: ( -

    - By default, the bar is auto-widthed based on its contents. To expand the bar to - fill its parent's width add fullWidth. This will also set - each button to grow. If you do not want the button to grow, set grow = false. -

    - ), - components: { EuiFilterGroup }, - props: { EuiFilterGroup, EuiFilterButton, EuiFilterSelectItem }, - demo: , - snippet: ` +`, + }, + { + title: 'Layout', + source: [ + { + type: GuideSectionTypes.JS, + code: filterGroupSource, + }, + { + type: GuideSectionTypes.HTML, + code: filterGroupHtml, + }, + ], + text: ( +

    + By default, the bar is auto-widthed based on its contents. To expand + the bar to fill its parent's width add{' '} + fullWidth. This will also set each button to grow. + If you do not want the button to grow, set{' '} + grow = false. +

    + ), + components: { EuiFilterGroup }, + props: { EuiFilterGroup, EuiFilterButton, EuiFilterSelectItem }, + demo: , + snippet: ` Single filter @@ -146,5 +164,6 @@ export const FilterGroupExample = { Off `, - }], + }, + ], }; diff --git a/src-docs/src/views/filter_group/filter_group_multi.js b/src-docs/src/views/filter_group/filter_group_multi.js index 9b8f5fbf033..8deec934036 100644 --- a/src-docs/src/views/filter_group/filter_group_multi.js +++ b/src-docs/src/views/filter_group/filter_group_multi.js @@ -1,7 +1,4 @@ - -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiPopover, @@ -37,7 +34,6 @@ export default class extends Component { } render() { - const items = [ { name: 'Johann Sebastian Bach', checked: 'on' }, { name: 'Wolfgang Amadeus Mozart', checked: 'on' }, @@ -67,8 +63,7 @@ export default class extends Component { isSelected={this.state.isPopoverOpen} numFilters={items.length} hasActiveFilters={true} - numActiveFilters={2} - > + numActiveFilters={2}> Composers ); @@ -82,17 +77,13 @@ export default class extends Component { isOpen={this.state.isPopoverOpen} closePopover={this.closePopover.bind(this)} panelPaddingSize="none" - withTitle - > + withTitle>
    {items.map((item, index) => ( - + {item.name} ))} diff --git a/src-docs/src/views/filter_group/filter_group_simple.js b/src-docs/src/views/filter_group/filter_group_simple.js index 4c9b1ade25a..2c7bf5615f8 100644 --- a/src-docs/src/views/filter_group/filter_group_simple.js +++ b/src-docs/src/views/filter_group/filter_group_simple.js @@ -1,12 +1,6 @@ +import React, { Component } from 'react'; -import React, { - Component, -} from 'react'; - -import { - EuiFilterGroup, - EuiFilterButton, -} from '../../../../src/components'; +import { EuiFilterGroup, EuiFilterButton } from '../../../../src/components'; export default class extends Component { constructor(props) { @@ -23,32 +17,45 @@ export default class extends Component { this.setState(prevState => ({ isFilterOn: !prevState.isFilterOn, })); - } + }; toggleOnFilter = () => { this.setState(prevState => ({ isOnFilterOn: !prevState.isOnFilterOn, - isOffFilterOn: prevState.isOffFilterOn && !prevState.isOnFilterOn ? false : prevState.isOffFilterOn, + isOffFilterOn: + prevState.isOffFilterOn && !prevState.isOnFilterOn + ? false + : prevState.isOffFilterOn, })); - } + }; toggleOffFilter = () => { this.setState(prevState => ({ isOffFilterOn: !prevState.isOffFilterOn, - isOnFilterOn: prevState.isOnFilterOn && !prevState.isOffFilterOn ? false : prevState.isOnFilterOn, + isOnFilterOn: + prevState.isOnFilterOn && !prevState.isOffFilterOn + ? false + : prevState.isOnFilterOn, })); - } + }; render() { return ( - + Single filter - + On - + Off diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js index e6aa7f667c9..75acb874ace 100644 --- a/src-docs/src/views/flex/flex_example.js +++ b/src-docs/src/views/flex/flex_example.js @@ -4,9 +4,7 @@ import { renderToHtml } from '../../services'; import { Link } from 'react-router'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiCallOut, @@ -80,285 +78,407 @@ export const FlexExample = { + color="warning">

    - Padding and background-color are added to all the FlexItem components on this - documentation page for illustrative purposes only. You will need to add padding through additional - components or classes if you need it. + Padding and background-color are added to all the{' '} + FlexItem components on this documentation page for + illustrative purposes only. You will need to add padding through + additional components or classes if you need it.

    ), - sections: [{ - title: 'FlexGroup is for a single row layout', - source: [{ - type: GuideSectionTypes.JS, - code: flexGroupSource, - }, { - type: GuideSectionTypes.HTML, - code: flexGroupHtml, - }], - text: ( -
    + sections: [ + { + title: 'FlexGroup is for a single row layout', + source: [ + { + type: GuideSectionTypes.JS, + code: flexGroupSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexGroupHtml, + }, + ], + text: ( +
    +

    + FlexGroup is useful for setting up layouts for a{' '} + single row of content. By default any{' '} + FlexItem within FlexGroup will + stretch and grow to match their siblings. +

    +
    + ), + props: { EuiFlexGroup, EuiFlexItem, EuiFlexGrid }, + demo: ( +
    + +
    + ), + }, + { + title: 'FlexGroup can wrap its items', + source: [ + { + type: GuideSectionTypes.JS, + code: flexGroupWrapSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexGroupWrapHtml, + }, + ], + text: ( + +

    + You can set wrap on FlexGroup{' '} + if it contains FlexItems with minimum widths, + which you want to wrap as the container becomes narrower. +

    + +

    + IE11 does not properly wrap flex items if the{' '} + group is also within a flex item. To fix this + rendering issue, you need to add a class of{' '} + .euiIEFlexWrapFix to the flex-item that{' '} + contains the wrapping group. +

    +
    +
    + ), + demo: ( +
    + +
    + ), + }, + { + title: 'FlexGroup accepts infinite items', + source: [ + { + type: GuideSectionTypes.JS, + code: flexItemsSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexItemsHtml, + }, + ], + text: (

    - FlexGroup is useful for setting up layouts for a single row of - content. By default any FlexItem within FlexGroup will - stretch and grow to match their siblings. + Same code as above. Notice that FlexItem creates + equal width items no matter the number of siblings.{' '} + FlexGroup never wraps.

    -
    - ), - props: { EuiFlexGroup, EuiFlexItem, EuiFlexGrid }, - demo:
    , - }, { - title: 'FlexGroup can wrap its items', - source: [{ - type: GuideSectionTypes.JS, - code: flexGroupWrapSource, - }, { - type: GuideSectionTypes.HTML, - code: flexGroupWrapHtml, - }], - text: ( - + ), + demo: ( +
    + +
    + ), + }, + { + title: 'You can specify spans instead of divs', + source: [ + { + type: GuideSectionTypes.JS, + code: componentSpanSource, + }, + { + type: GuideSectionTypes.HTML, + code: componentSpanHtml, + }, + ], + text: (

    - You can set wrap on FlexGroup if it - contains FlexItems with minimum widths, which you want to wrap as - the container becomes narrower. + component=“span” can be set on{' '} + FlexGroup and/or FlexItem.

    - -

    - IE11 does not properly wrap flex items if the group is also within a flex item. - To fix this rendering issue, you need to add a class of .euiIEFlexWrapFix to the flex-item - that contains the wrapping group. -

    -
    -
    - - ), - demo:
    , - }, { - title: 'FlexGroup accepts infinite items', - source: [{ - type: GuideSectionTypes.JS, - code: flexItemsSource, - }, { - type: GuideSectionTypes.HTML, - code: flexItemsHtml, - }], - text: ( -

    - Same code as above. Notice that FlexItem creates equal width items - no matter the number of siblings. FlexGroup never wraps. -

    - ), - demo:
    , - }, { - title: 'You can specify spans instead of divs', - source: [{ - type: GuideSectionTypes.JS, - code: componentSpanSource, - }, { - type: GuideSectionTypes.HTML, - code: componentSpanHtml, - }], - text: ( -

    - component=“span” can be set - on FlexGroup and/or FlexItem. -

    - ), - demo:
    , - }, { - title: 'FlexPanels grow to fill FlexItems', - source: [{ - type: GuideSectionTypes.JS, - code: flexItemPanelSource, - }, { - type: GuideSectionTypes.HTML, - code: flexItemPanelHtml, - }], - text: ( -

    - The Panel component will naturally grow to fill the - FlexItem which contains it. -

    - ), - demo: , - }, { - title: 'FlexItem can individually turn off stretching', - source: [{ - type: GuideSectionTypes.JS, - code: flexGrowZeroSource, - }, { - type: GuideSectionTypes.HTML, - code: flexGrowZeroHtml, - }], - text: ( -

    - Sometimes you do not want a FlexItem to grow. It - can be turned off on each item individually. -

    - ), - demo:
    , - }, { - title: 'FlexItem can specify a proportional width', - source: [{ - type: GuideSectionTypes.JS, - code: flexGrowNumericSource, - }, { - type: GuideSectionTypes.HTML, - code: flexGrowNumericHtml, - }], - text: ( -

    - You can specify a number between 1 and 10 for a FlexItem to - try to take up a proportional part of the flex box it is in. -

    - ), - demo:
    , - }, { - title: 'FlexGroup can justify and align', - source: [{ - type: GuideSectionTypes.JS, - code: flexJustifySource, - }, { - type: GuideSectionTypes.HTML, - code: flexJustifyHtml, - }], - text: ( -

    - FlexGroups can also - use justifyContent and alignItems props - that accept normal flex-box parameters. Below are some common scenarios, - where you need to separate two items, center justify a single one, or - center an item vertically. Note the usage - of FlexItems with grow=false so that they do not stretch. -

    - ), - demo:
    , - }, { - title: 'FlexGroup can change direction', - source: [{ - type: GuideSectionTypes.JS, - code: directionSource, - }, { - type: GuideSectionTypes.HTML, - code: directionHtml, - }], - text: ( -
    + ), + demo: ( +
    + +
    + ), + }, + { + title: 'FlexPanels grow to fill FlexItems', + source: [ + { + type: GuideSectionTypes.JS, + code: flexItemPanelSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexItemPanelHtml, + }, + ], + text: ( +

    + The Panel component will naturally + grow to fill the + FlexItem which contains it. +

    + ), + demo: , + }, + { + title: 'FlexItem can individually turn off stretching', + source: [ + { + type: GuideSectionTypes.JS, + code: flexGrowZeroSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexGrowZeroHtml, + }, + ], + text: (

    - You can change direction using the direction prop. + Sometimes you do not want a FlexItem to grow. It + can be turned off on each item individually.

    - + ), + demo: ( +
    + +
    + ), + }, + { + title: 'FlexItem can specify a proportional width', + source: [ + { + type: GuideSectionTypes.JS, + code: flexGrowNumericSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexGrowNumericHtml, + }, + ], + text: ( +

    + You can specify a number between 1 and 10 for a{' '} + FlexItem to try to take up a proportional part of + the flex box it is in. +

    + ), + demo: ( +
    + +
    + ), + }, + { + title: 'FlexGroup can justify and align', + source: [ + { + type: GuideSectionTypes.JS, + code: flexJustifySource, + }, + { + type: GuideSectionTypes.HTML, + code: flexJustifyHtml, + }, + ], + text: ( +

    + FlexGroups can also use{' '} + justifyContent and alignItems{' '} + props that accept normal flex-box parameters. Below are some common + scenarios, where you need to separate two items, center justify a + single one, or center an item vertically. Note the usage of{' '} + FlexItems with grow=false so + that they do not stretch. +

    + ), + demo: ( +
    + +
    + ), + }, + { + title: 'FlexGroup can change direction', + source: [ + { + type: GuideSectionTypes.JS, + code: directionSource, + }, + { + type: GuideSectionTypes.HTML, + code: directionHtml, + }, + ], + text: ( +

    - Depending on the nested structure of your flex groups, it is possible that - flex-items inside a column directed flex group will not show. To counter this, - add the grow prop and set to either false or a number. - Setting grow to true will not suffice. You may also need - to adjust the flex-basis value. + You can change direction using the direction{' '} + prop.

    - -
    - ), - demo:
    , - }, { - title: 'FlexGrids are for repeatable grids', - source: [{ - type: GuideSectionTypes.JS, - code: flexGridSource, - }, { - type: GuideSectionTypes.HTML, - code: flexGridHtml, - }], - text: ( -

    - FlexGrid is a more rigid component that sets multiple, wrapping - rows of same width items. -

    - ), - props: { EuiFlexGrid }, - demo:
    , - }, { - title: 'FlexGrids can have set column widths', - source: [{ - type: GuideSectionTypes.JS, - code: flexGridColumnsSource, - }, { - type: GuideSectionTypes.HTML, - code: flexGridColumnsHtml, - }], - text: ( -

    - You can set a columns prop to specify - anywhere between 1-4 columns. Any more would likely break on laptop screens. -

    - ), - demo:
    , - }, { - title: 'FlexGrids and FlexGroups can nest', - source: [{ - type: GuideSectionTypes.JS, - code: flexNestSource, - }, { - type: GuideSectionTypes.HTML, - code: flexNestHtml, - }], - text: ( - + +

    + Depending on the nested structure of your flex groups, it is + possible that flex-items inside a column directed flex group will + not show. To counter this, add the grow prop and set + to either false or a number. Setting{' '} + grow to true will not suffice. You may + also need to adjust the flex-basis value. +

    +
    +
    + ), + demo: ( +
    + +
    + ), + }, + { + title: 'FlexGrids are for repeatable grids', + source: [ + { + type: GuideSectionTypes.JS, + code: flexGridSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexGridHtml, + }, + ], + text: ( +

    + FlexGrid is a more rigid component that sets + multiple, wrapping rows of same width items. +

    + ), + props: { EuiFlexGrid }, + demo: ( +
    + +
    + ), + }, + { + title: 'FlexGrids can have set column widths', + source: [ + { + type: GuideSectionTypes.JS, + code: flexGridColumnsSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexGridColumnsHtml, + }, + ], + text: (

    - FlexGroup and FlexGrid can nest - within themselves indefinitely. For example, here we turn off the growth on a - FlexGroup, then nest a grid inside of it. + You can set a columns prop to specify anywhere + between 1-4 columns. Any more would likely break on laptop screens.

    - + ), + demo: ( +
    + +
    + ), + }, + { + title: 'FlexGrids and FlexGroups can nest', + source: [ + { + type: GuideSectionTypes.JS, + code: flexNestSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexNestHtml, + }, + ], + text: ( +

    - Nesting can cause some nasty bugs in IE11. There is no generalized way to fix IE - without knowing the exact intention of the layout. Please refer - to Flexbugs if - you see rendering issues in IE. + FlexGroup and FlexGrid can + nest within themselves indefinitely. For example, here we turn off + the growth on aFlexGroup, then nest a grid inside + of it.

    -
    - - ), - demo:
    , - }, { - title: 'Gutter sizing can be used on either FlexGroups or FlexGrids', - source: [{ - type: GuideSectionTypes.JS, - code: flexGutterSource, - }, { - type: GuideSectionTypes.HTML, - code: flexGutterHtml, - }], - text: ( -

    - The gutterSize prop can be applied to either a - FlexGroup or a FlexGrid to adjust the - spacing between FlexItems. -

    - ), - demo:
    , - }, { - title: 'FlexGroups can turn off responsive layouts', - source: [{ - type: GuideSectionTypes.JS, - code: flexGroupResponsiveSource, - }, { - type: GuideSectionTypes.HTML, - code: flexGroupResonsiveHtml, - }], - text: ( -

    - By default EuiFlexGroup is responsive. However, often - you only want to use groups for alignment and margins, rather than layouts. - Simply apply the responsive={`{false}`} prop - to retain a single row layout for the group. -

    - ), - demo:
    , - }], + +

    + Nesting can cause some nasty bugs in IE11. There is no generalized + way to fix IE without knowing the exact intention of the layout. + Please refer to{' '} + + Flexbugs + {' '} + if you see rendering issues in IE. +

    +
    + + ), + demo: ( +
    + +
    + ), + }, + { + title: 'Gutter sizing can be used on either FlexGroups or FlexGrids', + source: [ + { + type: GuideSectionTypes.JS, + code: flexGutterSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexGutterHtml, + }, + ], + text: ( +

    + The gutterSize prop can be applied to either a + FlexGroup or a FlexGrid to + adjust the spacing between FlexItems. +

    + ), + demo: ( +
    + +
    + ), + }, + { + title: 'FlexGroups can turn off responsive layouts', + source: [ + { + type: GuideSectionTypes.JS, + code: flexGroupResponsiveSource, + }, + { + type: GuideSectionTypes.HTML, + code: flexGroupResonsiveHtml, + }, + ], + text: ( +

    + By default EuiFlexGroup is responsive. However, + often you only want to use groups for alignment and margins, rather + than layouts. Simply apply the{' '} + responsive={`{false}`} prop to retain a single row + layout for the group. +

    + ), + demo: ( +
    + +
    + ), + }, + ], }; diff --git a/src-docs/src/views/flex/flex_item_panel.js b/src-docs/src/views/flex/flex_item_panel.js index 09bfc6646c8..c2bd8f7ca77 100644 --- a/src-docs/src/views/flex/flex_item_panel.js +++ b/src-docs/src/views/flex/flex_item_panel.js @@ -12,7 +12,9 @@ export default () => ( -

    FlexItem

    +

    + FlexItem +

    A side nav might be in this one.

    And you would want the panel on the right to expand with it.

    @@ -26,8 +28,8 @@ export default () => ( - Another EuiPanel, - with grow={false}. + Another EuiPanel, with{' '} + grow={false}.
    diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js index f5b26a87b7c..67ee12d2dac 100644 --- a/src-docs/src/views/flyout/flyout.js +++ b/src-docs/src/views/flyout/flyout.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiFlyout, @@ -29,7 +27,7 @@ export class Flyout extends Component { this.setState({ isSwitchChecked: !this.state.isSwitchChecked, }); - } + }; closeFlyout() { this.setState({ isFlyoutVisible: false }); @@ -56,27 +54,20 @@ export class Flyout extends Component { if (this.state.isFlyoutVisible) { flyout = ( - + -

    - A typical flyout -

    +

    A typical flyout

    - For consistency across the many flyouts, please utilize the following code for - implementing the flyout with a header. + For consistency across the many flyouts, please utilize the + following code for implementing the flyout with a header.

    - - {htmlCode} - + {htmlCode}
    ); @@ -84,9 +75,7 @@ export class Flyout extends Component { return (
    - - Show flyout - + Show flyout {flyout}
    diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js index 62a8c4e3281..6901f5e3014 100644 --- a/src-docs/src/views/flyout/flyout_complicated.js +++ b/src-docs/src/views/flyout/flyout_complicated.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiButton, @@ -35,13 +33,16 @@ export class FlyoutComplicated extends Component { isPopoverOpen: false, }; - this.tabs = [{ - id: '1', - name: 'Tab 1', - }, { - id: '2', - name: 'Tab 2', - }]; + this.tabs = [ + { + id: '1', + name: 'Tab 1', + }, + { + id: '2', + name: 'Tab 2', + }, + ]; this.closeFlyout = this.closeFlyout.bind(this); this.showFlyout = this.showFlyout.bind(this); @@ -51,7 +52,7 @@ export class FlyoutComplicated extends Component { this.setState({ isSwitchChecked: !this.state.isSwitchChecked, }); - } + }; closeFlyout() { this.setState({ isFlyoutVisible: false }); @@ -63,25 +64,24 @@ export class FlyoutComplicated extends Component { closePopover = () => { this.setState({ isPopoverOpen: false }); - } + }; togglePopover = () => { this.setState(({ isPopoverOpen }) => ({ isPopoverOpen: !isPopoverOpen })); - } + }; onSelectedTabChanged = id => { this.setState({ selectedTabId: id, }); - } + }; renderTabs() { return this.tabs.map((tab, index) => ( this.onSelectedTabChanged(tab.id)} isSelected={tab.id === this.state.selectedTabId} - key={index} - > + key={index}> {tab.name} )); @@ -91,16 +91,15 @@ export class FlyoutComplicated extends Component { const flyoutContent = (

    - Far out in the uncharted backwaters of the unfashionable end of - the western spiral arm of the Galaxy lies a small unregarded - yellow sun. + Far out in the uncharted backwaters of the unfashionable end of the + western spiral arm of the Galaxy lies a small unregarded yellow sun.

    - Orbiting this at a distance of roughly ninety-two million miles - is an utterly insignificant little blue green planet whose ape- - descended life forms are so amazingly primitive that they still - think digital watches are a pretty neat idea. + Orbiting this at a distance of roughly ninety-two million miles is an + utterly insignificant little blue green planet whose ape- descended + life forms are so amazingly primitive that they still think digital + watches are a pretty neat idea.

      @@ -110,12 +109,12 @@ export class FlyoutComplicated extends Component {

    - This planet has - or rather had - a problem, which was this: most - of the people living on it were unhappy for pretty much of the time. - Many solutions were suggested for this problem, but most of these - were largely concerned with the movements of small green pieces - of paper, which is odd because on the whole it was not the small - green pieces of paper that were unhappy. + This planet has - or rather had - a problem, which was this: most of + the people living on it were unhappy for pretty much of the time. Many + solutions were suggested for this problem, but most of these were + largely concerned with the movements of small green pieces of paper, + which is odd because on the whole it was not the small green pieces of + paper that were unhappy.

    This is Heading Two

    @@ -127,21 +126,22 @@ export class FlyoutComplicated extends Component {

    - But the dog wasn’t lazy, it was just - practicing mindfulness, so it had a greater sense of - life-satisfaction than that fox with all its silly jumping. + But the dog wasn’t lazy, it was just practicing mindfulness, so + it had a greater sense of life-satisfaction than that fox with all its + silly jumping.

    - And from the fox’s perspective, life was full of hoops to jump through, low-hanging - fruit to jump for, and dead car batteries to jump-start. + And from the fox’s perspective, life was full of hoops to jump{' '} + through, low-hanging fruit to jump for, and dead car + batteries to jump-start.

    This is Heading Three

    - So it thought the dog was making a poor life choice by focusing so much on mindfulness. - What if its car broke down? + So it thought the dog was making a poor life choice by focusing so + much on mindfulness. What if its car broke down?

    ); @@ -159,17 +159,17 @@ export class FlyoutComplicated extends Component { + aria-labelledby="flyoutComplicatedTitle"> -

    - Flyout header -

    +

    Flyout header

    -

    Put navigation items in the header, and cross tab actions in a footer.

    +

    + Put navigation items in the header, and cross tab actions in a + footer. +

    {this.renderTabs()} @@ -178,10 +178,16 @@ export class FlyoutComplicated extends Component { Even popovers can be included} - isOpen={this.state.isPopoverOpen} - > -

    This is the popover content, notice how it can overflow the flyout!

    + button={ + + Even popovers can be included + + } + isOpen={this.state.isPopoverOpen}> +

    + This is the popover content, notice how it can overflow the + flyout! +

    @@ -190,9 +196,7 @@ export class FlyoutComplicated extends Component { {flyoutContent} - - {htmlCode} - + {htmlCode}
    @@ -200,16 +204,12 @@ export class FlyoutComplicated extends Component { + flush="left"> Close - + Save @@ -221,9 +221,7 @@ export class FlyoutComplicated extends Component { return (
    - - Show flyout - + Show flyout {flyout}
    diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js index 5dfedac951c..74b9842d0d7 100644 --- a/src-docs/src/views/flyout/flyout_example.js +++ b/src-docs/src/views/flyout/flyout_example.js @@ -4,7 +4,12 @@ import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiFlyout, EuiFlyoutHeader, EuiFlyoutFooter } from '../../../../src/components'; +import { + EuiCode, + EuiFlyout, + EuiFlyoutHeader, + EuiFlyoutFooter, +} from '../../../../src/components'; import { Flyout } from './flyout'; const flyoutSource = require('!!raw-loader!./flyout'); @@ -43,30 +48,32 @@ export const FlyoutExample = { text: (

    - EuiFlyout is a fixed position panel that pops in from the right side - of the screen. It should be used any time you need to perform quick, individual actions - to a larger page or list. + EuiFlyout is a fixed position panel that pops in + from the right side of the screen. It should be used any time you + need to perform quick, individual actions to a larger page or list.

    • - size accepts s / m / l and defines the width of - the panel. + size accepts s / m / l and + defines the width of the panel.
    • - ownFocus is a boolean that when true will lock - the mouse / keyboard focus to within the flyout. It is off by default. + ownFocus is a boolean that when{' '} + true will lock the mouse / keyboard focus to + within the flyout. It is off by default.
    • - maxWidth accepts a boolean or number. When set to{' '} - true, it adds a predefined maxWidth, or you can pass an integer to set - the max width to a custom pixel value or pass a string to set it to a custom measurement. + maxWidth accepts a boolean or number. When set + to true, it adds a predefined maxWidth, or you + can pass an integer to set the max width to a custom pixel value + or pass a string to set it to a custom measurement.

    - Notice how these examples use aria-labelledby to announce the flyout - to screen readers when the user opens it. + Notice how these examples use aria-labelledby to + announce the flyout to screen readers when the user opens it.

    ), @@ -88,9 +95,9 @@ export const FlyoutExample = { text: (

    In this example we use EuiFlyoutHeader and - EuiFlyoutFooter to allow for fixed position navigation and actions - within a flyout. Note that any content within EuiContentBody will - automatically overflow. + EuiFlyoutFooter to allow for fixed position + navigation and actions within a flyout. Note that any content within{' '} + EuiContentBody will automatically overflow.

    ), props: { EuiFlyoutFooter }, @@ -110,9 +117,10 @@ export const FlyoutExample = { ], text: (

    - In this example, we set size to s and apply the{' '} - ownFocus prop. The latter not only traps the focus of our flyout, but - also adds background overlay to reinforce your boundaries. + In this example, we set size to{' '} + s and apply the ownFocus prop. + The latter not only traps the focus of our flyout, but also adds + background overlay to reinforce your boundaries.

    ), demo: , @@ -131,7 +139,8 @@ export const FlyoutExample = { ], text: (

    - In this example, we set size to l. + In this example, we set size to{' '} + l.

    ), demo: , @@ -150,8 +159,9 @@ export const FlyoutExample = { ], text: (

    - In this example, we set maxWidth to 448px, to - set the width of the flyout at the ideal width for a form. + In this example, we set maxWidth to{' '} + 448px, to set the width of the flyout at the ideal + width for a form.

    ), demo: , diff --git a/src-docs/src/views/flyout/flyout_large.js b/src-docs/src/views/flyout/flyout_large.js index 77ab4cdbe19..5cbec3be741 100644 --- a/src-docs/src/views/flyout/flyout_large.js +++ b/src-docs/src/views/flyout/flyout_large.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiFlyout, @@ -28,7 +26,7 @@ export class FlyoutLarge extends Component { this.setState({ isSwitchChecked: !this.state.isSwitchChecked, }); - } + }; closeFlyout() { this.setState({ isFlyoutVisible: false }); @@ -39,27 +37,21 @@ export class FlyoutLarge extends Component { } render() { - let flyout; if (this.state.isFlyoutVisible) { flyout = ( + aria-labelledby="flyoutLargeTitle"> -

    - A large flyout -

    +

    A large flyout

    -

    - The large flyout is very wide. -

    +

    The large flyout is very wide.

    @@ -67,9 +59,7 @@ export class FlyoutLarge extends Component { } return (
    - - Show large flyout - + Show large flyout {flyout}
    diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js index fa2d15357fe..aab2260b11f 100644 --- a/src-docs/src/views/flyout/flyout_max_width.js +++ b/src-docs/src/views/flyout/flyout_max_width.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiFlyout, @@ -35,7 +33,7 @@ export class FlyoutMaxWidth extends Component { this.setState({ isSwitchChecked: !this.state.isSwitchChecked, }); - } + }; closeFlyout() { this.setState({ isFlyoutVisible: false }); @@ -53,20 +51,18 @@ export class FlyoutMaxWidth extends Component { + maxWidth={448}> -

    - 448px wide flyout -

    +

    448px wide flyout

    - In many cases, you’ll want to set a custom width that’s tailored to your content. - In this case, the flyout is an ideal width for form elements. + In many cases, you’ll want to set a custom width + that’s tailored to your content. In this case, the flyout + is an ideal width for form elements.

    @@ -75,14 +71,11 @@ export class FlyoutMaxWidth extends Component { + helpText="I am some friendly help text."> - + - + - - + +
    @@ -117,9 +101,7 @@ export class FlyoutMaxWidth extends Component { return (
    - - Show max-width flyout - + Show max-width flyout {flyout}
    diff --git a/src-docs/src/views/flyout/flyout_small.js b/src-docs/src/views/flyout/flyout_small.js index 5cd16394f1d..9bec19297f4 100644 --- a/src-docs/src/views/flyout/flyout_small.js +++ b/src-docs/src/views/flyout/flyout_small.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiFlyout, @@ -28,7 +26,7 @@ export class FlyoutSmall extends Component { this.setState({ isSwitchChecked: !this.state.isSwitchChecked, }); - } + }; closeFlyout() { this.setState({ isFlyoutVisible: false }); @@ -39,7 +37,6 @@ export class FlyoutSmall extends Component { } render() { - let flyout; if (this.state.isFlyoutVisible) { flyout = ( @@ -47,19 +44,17 @@ export class FlyoutSmall extends Component { ownFocus onClose={this.closeFlyout} size="s" - aria-labelledby="flyoutSmallTitle" - > + aria-labelledby="flyoutSmallTitle"> -

    - A small flyout -

    +

    A small flyout

    - In small flyouts, it is ok to reduce the header size to s. + In small flyouts, it is ok to reduce the header size to{' '} + s.

    @@ -68,9 +63,7 @@ export class FlyoutSmall extends Component { } return (
    - - Show small flyout - + Show small flyout {flyout}
    diff --git a/src-docs/src/views/focus_trap/focus_trap.js b/src-docs/src/views/focus_trap/focus_trap.js index 37b55a5af7a..9cb3fa0e2a5 100644 --- a/src-docs/src/views/focus_trap/focus_trap.js +++ b/src-docs/src/views/focus_trap/focus_trap.js @@ -1,6 +1,4 @@ -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import { EuiBadge, @@ -8,7 +6,7 @@ import { EuiFocusTrap, EuiPanel, EuiSpacer, - EuiText + EuiText, } from '../../../../src/components'; import FormExample from '../form_layouts/form_compressed'; @@ -26,7 +24,7 @@ export default class extends Component { this.setState(prevState => ({ isDisabled: !prevState.isDisabled, })); - } + }; render() { const { isDisabled } = this.state; @@ -35,9 +33,7 @@ export default class extends Component {
    Trap is {isDisabled ? 'disabled' : 'enabled'} - + @@ -47,13 +43,13 @@ export default class extends Component { {`${!isDisabled ? 'Disable' : 'Enable'} Focus Trap`} - - The button below is not focusable by keyboard as long as the focus trap is enabled. + The button below is not focusable by keyboard as long as the focus + trap is enabled. alert('External event triggered')}> diff --git a/src-docs/src/views/focus_trap/focus_trap_example.js b/src-docs/src/views/focus_trap/focus_trap_example.js index dc6d48943b1..3e91833e5a1 100644 --- a/src-docs/src/views/focus_trap/focus_trap_example.js +++ b/src-docs/src/views/focus_trap/focus_trap_example.js @@ -2,14 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiFocusTrap, -} from '../../../../src/components'; +import { EuiCode, EuiFocusTrap } from '../../../../src/components'; import FocusTrap from './focus_trap'; const focusTrapSource = require('!!raw-loader!./focus_trap'); @@ -17,31 +12,40 @@ const focusTrapHtml = renderToHtml(FocusTrap); export const FocusTrapExample = { title: 'Focus Trap', - sections: [{ - source: [{ - type: GuideSectionTypes.JS, - code: focusTrapSource, - }, { - type: GuideSectionTypes.HTML, - code: focusTrapHtml, - }], - text: ( - -

    - Use EuiFocusTrap to prevent keyboard-initiated focus from leaving a defined area. - Temporary flows and UX escapes that occur in components such as - EuiModal and EuiFlyout are prime examples. -

    -

    - For components that project content in a React portal, - EuiFocusTrap will maintain the tab order expected by users. -

    -

    - Use clickOutsideDisables to disable the focus trap when the user clicks outside the trap. -

    -
    - ), - props: { EuiFocusTrap }, - demo: , - }], + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: focusTrapSource, + }, + { + type: GuideSectionTypes.HTML, + code: focusTrapHtml, + }, + ], + text: ( + +

    + Use EuiFocusTrap to prevent keyboard-initiated + focus from leaving a defined area. Temporary flows and UX escapes + that occur in components such as + EuiModal and EuiFlyout are + prime examples. +

    +

    + For components that project content in a React portal, + EuiFocusTrap will maintain the tab order expected + by users. +

    +

    + Use clickOutsideDisables to disable the focus + trap when the user clicks outside the trap. +

    +
    + ), + props: { EuiFocusTrap }, + demo: , + }, + ], }; diff --git a/src-docs/src/views/form_controls/checkbox.js b/src-docs/src/views/form_controls/checkbox.js index f3c18a3eb6b..59cc37a5b9b 100644 --- a/src-docs/src/views/form_controls/checkbox.js +++ b/src-docs/src/views/form_controls/checkbox.js @@ -1,12 +1,6 @@ -import React, { - Component, - Fragment, -} from 'react'; +import React, { Component, Fragment } from 'react'; -import { - EuiCheckbox, - EuiSpacer, -} from '../../../../src/components'; +import { EuiCheckbox, EuiSpacer } from '../../../../src/components'; import makeId from '../../../../src/components/form/form_row/make_id'; diff --git a/src-docs/src/views/form_controls/checkbox_group.js b/src-docs/src/views/form_controls/checkbox_group.js index 6f91c718240..20679cdd113 100644 --- a/src-docs/src/views/form_controls/checkbox_group.js +++ b/src-docs/src/views/form_controls/checkbox_group.js @@ -1,7 +1,4 @@ -import React, { - Component, - Fragment, -} from 'react'; +import React, { Component, Fragment } from 'react'; import { EuiCheckboxGroup, @@ -17,16 +14,20 @@ export default class extends Component { const idPrefix = makeId(); - this.checkboxes = [{ - id: `${idPrefix}0`, - label: 'Option one', - }, { - id: `${idPrefix}1`, - label: 'Option two is checked by default', - }, { - id: `${idPrefix}2`, - label: 'Option three', - }]; + this.checkboxes = [ + { + id: `${idPrefix}0`, + label: 'Option one', + }, + { + id: `${idPrefix}1`, + label: 'Option two is checked by default', + }, + { + id: `${idPrefix}2`, + label: 'Option three', + }, + ]; this.state = { checkboxIdToSelectedMap: { @@ -36,9 +37,12 @@ export default class extends Component { } onChange = optionId => { - const newCheckboxIdToSelectedMap = ({ ...this.state.checkboxIdToSelectedMap, ...{ - [optionId]: !this.state.checkboxIdToSelectedMap[optionId], - } }); + const newCheckboxIdToSelectedMap = { + ...this.state.checkboxIdToSelectedMap, + ...{ + [optionId]: !this.state.checkboxIdToSelectedMap[optionId], + }, + }; this.setState({ checkboxIdToSelectedMap: newCheckboxIdToSelectedMap, @@ -56,7 +60,9 @@ export default class extends Component { -

    Disabled

    + +

    Disabled

    +
    @@ -69,7 +75,9 @@ export default class extends Component { -

    Compressed

    + +

    Compressed

    +
    diff --git a/src-docs/src/views/form_controls/field_number.js b/src-docs/src/views/form_controls/field_number.js index 307cfc119a8..ebfc39dfd18 100644 --- a/src-docs/src/views/form_controls/field_number.js +++ b/src-docs/src/views/form_controls/field_number.js @@ -1,13 +1,6 @@ -import React, { - Component, - Fragment, -} from 'react'; +import React, { Component, Fragment } from 'react'; -import { - EuiFieldNumber, - EuiSpacer, - EuiText, -} from '../../../../src/components'; +import { EuiFieldNumber, EuiSpacer, EuiText } from '../../../../src/components'; export default class extends Component { constructor(props) { @@ -89,7 +82,11 @@ export default class extends Component { %} + append={ + + % + + } placeholder="0 - 100" value={this.state.value} onChange={this.onChange} diff --git a/src-docs/src/views/form_controls/field_password.js b/src-docs/src/views/form_controls/field_password.js index b5b76292171..89ef106d4ba 100644 --- a/src-docs/src/views/form_controls/field_password.js +++ b/src-docs/src/views/form_controls/field_password.js @@ -1,12 +1,6 @@ -import React, { - Component, - Fragment, -} from 'react'; +import React, { Component, Fragment } from 'react'; -import { - EuiFieldPassword, - EuiSpacer, -} from '../../../../src/components'; +import { EuiFieldPassword, EuiSpacer } from '../../../../src/components'; export default class extends Component { constructor(props) { diff --git a/src-docs/src/views/form_controls/field_search.js b/src-docs/src/views/form_controls/field_search.js index 95f06300a97..2224b22e9a1 100644 --- a/src-docs/src/views/form_controls/field_search.js +++ b/src-docs/src/views/form_controls/field_search.js @@ -1,12 +1,6 @@ -import React, { - Component, - Fragment, -} from 'react'; +import React, { Component, Fragment } from 'react'; -import { - EuiFieldSearch, - EuiSpacer, -} from '../../../../src/components'; +import { EuiFieldSearch, EuiSpacer } from '../../../../src/components'; export default class extends Component { constructor(props) { diff --git a/src-docs/src/views/form_controls/field_text.js b/src-docs/src/views/form_controls/field_text.js index df10f308c98..125dc557928 100644 --- a/src-docs/src/views/form_controls/field_text.js +++ b/src-docs/src/views/form_controls/field_text.js @@ -1,12 +1,6 @@ -import React, { - Component, - Fragment, -} from 'react'; +import React, { Component, Fragment } from 'react'; -import { - EuiFieldText, - EuiSpacer, -} from '../../../../src/components'; +import { EuiFieldText, EuiSpacer } from '../../../../src/components'; export default class extends Component { constructor(props) { diff --git a/src-docs/src/views/form_controls/file_picker.js b/src-docs/src/views/form_controls/file_picker.js index bd68e23d134..fb6f637dcbb 100644 --- a/src-docs/src/views/form_controls/file_picker.js +++ b/src-docs/src/views/form_controls/file_picker.js @@ -9,7 +9,6 @@ import { } from '../../../../src/components'; export class FilePicker extends Component { - constructor(props) { super(props); this.state = { @@ -17,7 +16,7 @@ export class FilePicker extends Component { }; } - onChange = (files) => { + onChange = files => { this.setState({ files: files, }); @@ -29,13 +28,16 @@ export class FilePicker extends Component {
      {Object.keys(this.state.files).map((item, i) => (
    • - {this.state.files[item].name} ({this.state.files[item].size} bytes) -
    • ) - )} + {this.state.files[item].name} ( + {this.state.files[item].size} bytes) + + ))}
    ); } else { - return

    Add some files to see a demo of retrieving from the FileList

    ; + return ( +

    Add some files to see a demo of retrieving from the FileList

    + ); } } @@ -48,7 +50,9 @@ export class FilePicker extends Component { id="asdf2" multiple initialPromptText="Select or drag and drop multiple files" - onChange={files => { this.onChange(files); }} + onChange={files => { + this.onChange(files); + }} /> @@ -61,10 +65,7 @@ export class FilePicker extends Component { - + @@ -73,7 +74,9 @@ export class FilePicker extends Component { multiple compressed initialPromptText="Select some files" - onChange={files => { this.onChange(files); }} + onChange={files => { + this.onChange(files); + }} /> ); diff --git a/src-docs/src/views/form_controls/form_control_layout.js b/src-docs/src/views/form_controls/form_control_layout.js index cc0022853f8..16a4a584c04 100644 --- a/src-docs/src/views/form_controls/form_control_layout.js +++ b/src-docs/src/views/form_controls/form_control_layout.js @@ -1,6 +1,4 @@ -import React, { - Fragment, -} from 'react'; +import React, { Fragment } from 'react'; import { EuiFormControlLayout, @@ -12,62 +10,43 @@ import { export default () => ( - - + - + - {} }} - > + {} }}> - {} }} - > + {} }}> - + - + - {} }} - icon="search" - > + {} }} icon="search"> @@ -75,18 +54,13 @@ export default () => ( {} }} - icon={{ type: 'arrowDown', side: 'right' }} - > + icon={{ type: 'arrowDown', side: 'right' }}> - {} }} - icon="search" - > + {} }} icon="search"> @@ -95,34 +69,35 @@ export default () => ( {} }} - icon={{ type: 'arrowDown', side: 'right' }} - > + icon={{ type: 'arrowDown', side: 'right' }}> - {} }} - icon="search" - > + {} }} icon="search"> Label} - > - + prepend={Label}> + %} - > + append={ + + % + + }> @@ -131,8 +106,11 @@ export default () => ( {} }} - prepend={Button} - > + prepend={ + + Button + + }> diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js index 317d3253ddb..7fcdb3d04f0 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -1,14 +1,10 @@ import React, { Fragment } from 'react'; -import { - Link, -} from 'react-router'; +import { Link } from 'react-router'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; import { EuiBadge, @@ -84,216 +80,276 @@ const formControlLayoutHtml = renderToHtml(FormControlLayout); export const FormControlsExample = { title: 'Form controls', - sections: [{ - title: 'Search field', - source: [{ - type: GuideSectionTypes.JS, - code: fieldSearchSource, - }, { - type: GuideSectionTypes.HTML, - code: fieldSearchHtml, - }], - props: { - EuiFieldSearch, + sections: [ + { + title: 'Search field', + source: [ + { + type: GuideSectionTypes.JS, + code: fieldSearchSource, + }, + { + type: GuideSectionTypes.HTML, + code: fieldSearchHtml, + }, + ], + props: { + EuiFieldSearch, + }, + demo: , }, - demo: , - }, { - title: 'Text field', - source: [{ - type: GuideSectionTypes.JS, - code: fieldTextSource, - }, { - type: GuideSectionTypes.HTML, - code: fieldTextHtml, - }], - props: { - EuiFieldText, + { + title: 'Text field', + source: [ + { + type: GuideSectionTypes.JS, + code: fieldTextSource, + }, + { + type: GuideSectionTypes.HTML, + code: fieldTextHtml, + }, + ], + props: { + EuiFieldText, + }, + demo: , }, - demo: , - }, { - title: 'Number field', - source: [{ - type: GuideSectionTypes.JS, - code: fieldNumberSource, - }, { - type: GuideSectionTypes.HTML, - code: fieldNumberHtml, - }], - props: { - EuiFieldNumber, + { + title: 'Number field', + source: [ + { + type: GuideSectionTypes.JS, + code: fieldNumberSource, + }, + { + type: GuideSectionTypes.HTML, + code: fieldNumberHtml, + }, + ], + props: { + EuiFieldNumber, + }, + demo: , }, - demo: , - }, { - title: 'Password field', - source: [{ - type: GuideSectionTypes.JS, - code: fieldPasswordSource, - }, { - type: GuideSectionTypes.HTML, - code: fieldPasswordHtml, - }], - props: { - EuiFieldPassword, + { + title: 'Password field', + source: [ + { + type: GuideSectionTypes.JS, + code: fieldPasswordSource, + }, + { + type: GuideSectionTypes.HTML, + code: fieldPasswordHtml, + }, + ], + props: { + EuiFieldPassword, + }, + demo: , }, - demo: , - }, { - title: 'Textarea', - source: [{ - type: GuideSectionTypes.JS, - code: textAreaSource, - }, { - type: GuideSectionTypes.HTML, - code: textAreaHtml, - }], - props: { - EuiTextArea, + { + title: 'Textarea', + source: [ + { + type: GuideSectionTypes.JS, + code: textAreaSource, + }, + { + type: GuideSectionTypes.HTML, + code: textAreaHtml, + }, + ], + props: { + EuiTextArea, + }, + demo: diff --git a/src/components/form/text_area/text_area.test.js b/src/components/form/text_area/text_area.test.js index dfec0835a9c..eeab977c817 100644 --- a/src/components/form/text_area/text_area.test.js +++ b/src/components/form/text_area/text_area.test.js @@ -6,11 +6,8 @@ import { EuiTextArea } from './text_area'; describe('EuiTextArea', () => { test('is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/header/header.js b/src/components/header/header.js index a5bd634fce7..5d1e706f363 100644 --- a/src/components/header/header.js +++ b/src/components/header/header.js @@ -5,10 +5,7 @@ export const EuiHeader = ({ children, className, ...rest }) => { const classes = classNames('euiHeader', className); return ( -
    +
    {children}
    ); diff --git a/src/components/header/header.test.js b/src/components/header/header.test.js index 5c988e1ff7d..5a36ac03da4 100644 --- a/src/components/header/header.test.js +++ b/src/components/header/header.test.js @@ -6,12 +6,9 @@ import { EuiHeader } from './header'; describe('EuiHeader', () => { test('is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); test('renders children', () => { @@ -21,7 +18,6 @@ describe('EuiHeader', () => { ); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/header/header_alert/header_alert.js b/src/components/header/header_alert/header_alert.js index 4d9b5e92f4f..9b66425e0e2 100644 --- a/src/components/header/header_alert/header_alert.js +++ b/src/components/header/header_alert/header_alert.js @@ -2,18 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { - EuiButtonIcon, -} from '../../button'; +import { EuiButtonIcon } from '../../button'; -import { - EuiFlexGroup, - EuiFlexItem, -} from '../../flex'; +import { EuiFlexGroup, EuiFlexItem } from '../../flex'; -import { - EuiI18n, -} from '../../i18n'; +import { EuiI18n } from '../../i18n'; export const EuiHeaderAlert = ({ action, @@ -28,10 +21,7 @@ export const EuiHeaderAlert = ({ return ( {dismiss => ( -
    +
    -
    - {date} -
    +
    {date}
    diff --git a/src/components/header/header_alert/header_alert.test.js b/src/components/header/header_alert/header_alert.test.js index d0e7a541525..3fbdc23646d 100644 --- a/src/components/header/header_alert/header_alert.test.js +++ b/src/components/header/header_alert/header_alert.test.js @@ -7,21 +7,14 @@ import { EuiHeaderAlert } from './header_alert'; describe('EuiHeaderAlert', () => { test('is rendered', () => { const component = render( - + ); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); test('renders action', () => { - const action = ( - - ); + const action = ; const component = render( { /> ); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); test('renders title as an element', () => { - const title = ( -

    Circumambulate the city

    - ); + const title =

    Circumambulate the city

    ; const component = render( - + ); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); test('renders date as an element', () => { - const date = ( -

    October 18, 1851

    - ); + const date =

    October 18, 1851

    ; const component = render( - + ); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/header/header_alert/index.js b/src/components/header/header_alert/index.js index c67c5388ad4..08e909e6bbc 100644 --- a/src/components/header/header_alert/index.js +++ b/src/components/header/header_alert/index.js @@ -1,3 +1 @@ -export { - EuiHeaderAlert, -} from './header_alert'; +export { EuiHeaderAlert } from './header_alert'; diff --git a/src/components/header/header_breadcrumbs/header_breadcrumbs.js b/src/components/header/header_breadcrumbs/header_breadcrumbs.js index 63d85d7e2fa..703df92a1f9 100644 --- a/src/components/header/header_breadcrumbs/header_breadcrumbs.js +++ b/src/components/header/header_breadcrumbs/header_breadcrumbs.js @@ -7,6 +7,12 @@ export const EuiHeaderBreadcrumbs = ({ className, breadcrumbs, ...rest }) => { const classes = classNames('euiHeaderBreadcrumbs', className); return ( - + ); }; diff --git a/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js b/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js index 2b70eaacb37..474d431f286 100644 --- a/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js +++ b/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js @@ -6,21 +6,32 @@ import { EuiHeaderBreadcrumbs } from './header_breadcrumbs'; describe('EuiHeaderBreadcrumbs', () => { test('is rendered', () => { - const breadcrumbs = [{ - text: Animals, - href: '#', - onClick: (e) => { e.preventDefault(); console.log('You clicked Animals'); }, - 'data-test-subj': 'breadcrumbsAnimals', - className: 'customClass', - }, { - text: 'Reptiles', - onClick: (e) => { e.preventDefault(); console.log('You clicked Reptiles'); }, - }, { - text: 'Boa constrictor', - href: '#', - }, { - text: 'Edit', - }]; + const breadcrumbs = [ + { + text: Animals, + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked Animals'); + }, + 'data-test-subj': 'breadcrumbsAnimals', + className: 'customClass', + }, + { + text: 'Reptiles', + onClick: e => { + e.preventDefault(); + console.log('You clicked Reptiles'); + }, + }, + { + text: 'Boa constrictor', + href: '#', + }, + { + text: 'Edit', + }, + ]; const component = render( diff --git a/src/components/header/header_breadcrumbs/index.js b/src/components/header/header_breadcrumbs/index.js index 2f508075c94..feed3dee163 100644 --- a/src/components/header/header_breadcrumbs/index.js +++ b/src/components/header/header_breadcrumbs/index.js @@ -1,3 +1 @@ -export { - EuiHeaderBreadcrumbs, -} from './header_breadcrumbs'; +export { EuiHeaderBreadcrumbs } from './header_breadcrumbs'; diff --git a/src/components/header/header_links/header_link.js b/src/components/header/header_links/header_link.js index 7f6fcb348a9..a9bd5043ec2 100644 --- a/src/components/header/header_links/header_link.js +++ b/src/components/header/header_links/header_link.js @@ -10,7 +10,7 @@ export const EuiHeaderLink = ({ isActive, children, className, - ...rest, + ...rest }) => { const classes = classNames('euiHeaderLink', className); @@ -21,8 +21,7 @@ export const EuiHeaderLink = ({ onClick={onClick} iconType={iconType} color={isActive ? 'primary' : 'text'} - {...rest} - > + {...rest}> {children} ); diff --git a/src/components/header/header_links/header_link.test.js b/src/components/header/header_links/header_link.test.js index 0276ad197ea..18564eccc6e 100644 --- a/src/components/header/header_links/header_link.test.js +++ b/src/components/header/header_links/header_link.test.js @@ -6,11 +6,8 @@ import { EuiHeaderLink } from './header_link'; describe('EuiHeaderLink', () => { test('is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/header/header_links/header_links.js b/src/components/header/header_links/header_links.js index 57e9e1deb38..4078803354a 100644 --- a/src/components/header/header_links/header_links.js +++ b/src/components/header/header_links/header_links.js @@ -1,7 +1,4 @@ - -import React, { - Component, -} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -9,7 +6,10 @@ import classNames from 'classnames'; import { EuiIcon } from '../../icon'; import { EuiPopover } from '../../popover'; import { EuiI18n } from '../../i18n'; -import { EuiHeaderSectionItemButton, EuiHeaderSectionItem } from '../header_section'; +import { + EuiHeaderSectionItemButton, + EuiHeaderSectionItem, +} from '../header_section'; export class EuiHeaderLinks extends Component { constructor(props) { @@ -33,22 +33,19 @@ export class EuiHeaderLinks extends Component { }; render() { - const { - children, - className, - ...rest - } = this.props; + const { children, className, ...rest } = this.props; const classes = classNames('euiHeaderLinks', className); const button = ( - + {openNavigationMenu => ( + onClick={this.onMenuButtonClick}> )} @@ -59,12 +56,7 @@ export class EuiHeaderLinks extends Component { return ( {appNavigation => ( -