From b86ee8cc6cfef6919e2c89a5e97c97c209204f3f Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Wed, 20 Jul 2022 16:50:08 -0400 Subject: [PATCH] [EuiPopover and parts] Converted to Emotion (#5977) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Move Amsterdam Sass overrides to src/ * [EuiPopoverFooter] Converted except for… Inherited panel padding/margin * [EuiPopoverTitle] Converted except for… Inherited panel padding/margin * Removed Sass mixin `euiPopoverTitle` * Added [EuiPopoverArrow] and simplified styles * [EuiPopover] BREAKING Changed `display` type to accept real CSS `display` values * Fix grid tests * WIP: Converted base EuiPaopover and panel styles * New EuiPopoverPanel for internal use * Skip test & fix props * Fixed EuiTour’s styles * Undo HOC by moving panel styles to it’s own folder * Created a EuiPopoverPanelContext for passing through `paddingSize` * [EuiInputPopover] Converted by applying max-width directly in component * Converted to logical properties * Convert some docs files to TS * Increase opacity of shadows in DARK mode * Cleanup * cl * Mostly fix class name output * Fix TS and rename internal files with `_` * Attempting to fix props table * EuiPopoverPanel extends _EuiPanelDivlike and better prop table * snapshot updates Co-authored-by: Constance Chen Co-authored-by: Greg Thompson --- .../{initial_focus.js => initial_focus.tsx} | 6 +- .../{input_popover.js => input_popover.tsx} | 10 +- .../views/popover/{popover.js => popover.tsx} | 2 +- ...osition.js => popover_anchor_position.tsx} | 2 +- .../{popover_block.js => popover_block.tsx} | 2 +- src-docs/src/views/popover/popover_example.js | 4 +- .../{popover_fixed.js => popover_fixed.tsx} | 2 +- ...s_name.js => popover_panel_class_name.tsx} | 2 +- ...r_with_title.js => popover_with_title.tsx} | 2 +- ...ding.js => popover_with_title_padding.tsx} | 2 +- src-docs/src/views/popover/props.tsx | 7 + .../popover/{trap_focus.js => trap_focus.tsx} | 2 +- .../src/views/theme/sizing/_sizing_js.tsx | 53 +++++ .../collapsed_item_actions.test.tsx.snap | 6 +- .../in_memory_table.test.tsx.snap | 8 +- .../__snapshots__/breadcrumbs.test.tsx.snap | 28 +-- .../__snapshots__/color_picker.test.tsx.snap | 48 ++--- .../color_palette_picker.test.tsx.snap | 28 +-- src/components/color_picker/color_picker.tsx | 2 +- .../color_stop_thumb.test.tsx.snap | 20 +- .../__snapshots__/color_stops.test.tsx.snap | 72 +++---- .../__snapshots__/combo_box.test.tsx.snap | 4 +- .../_combo_box_options_list.scss | 4 - .../combo_box_options_list.tsx | 20 +- .../context_menu/_context_menu_panel.scss | 4 +- .../__snapshots__/data_grid.test.tsx.snap | 68 +++---- .../data_grid_body.test.tsx.snap | 8 +- .../data_grid_cell.test.tsx.snap | 2 +- .../data_grid_header_cell.test.tsx.snap | 2 +- .../column_selector.test.tsx.snap | 13 +- .../column_sorting.test.tsx.snap | 15 +- .../display_selector.test.tsx.snap | 2 +- src/components/datagrid/data_grid.test.tsx | 23 +-- .../__snapshots__/date_picker.test.tsx.snap | 177 +++++++++++++++-- .../date_picker_range.test.tsx.snap | 40 ++-- .../__snapshots__/auto_refresh.test.tsx.snap | 24 +-- .../quick_select_popover.test.tsx.snap | 2 +- src/components/form/form.styles.ts | 12 ++ .../__snapshots__/dual_range.test.tsx.snap | 8 +- .../range/__snapshots__/range.test.tsx.snap | 8 +- .../__snapshots__/super_select.test.tsx.snap | 60 +++--- .../__snapshots__/header_links.test.tsx.snap | 4 +- src/components/index.scss | 1 - .../markdown_editor.test.tsx.snap | 4 +- .../__snapshots__/popover.test.tsx.snap | 162 +++++++++------- .../popover_footer.test.tsx.snap | 22 ++- .../__snapshots__/popover_title.test.tsx.snap | 22 ++- src/components/popover/_index.scss | 5 - src/components/popover/_input_popover.scss | 7 - src/components/popover/_popover.scss | 182 ------------------ src/components/popover/_popover_footer.scss | 27 --- src/components/popover/_popover_title.scss | 27 --- src/components/popover/_variables.scss | 2 - src/components/popover/input_popover.tsx | 23 ++- src/components/popover/popover.styles.ts | 21 ++ src/components/popover/popover.tsx | 107 ++++------ .../_popover_arrow.test.tsx.snap | 37 ++++ .../popover_arrow/_popover_arrow.styles.ts | 79 ++++++++ .../popover_arrow/_popover_arrow.test.tsx | 30 +++ .../popover/popover_arrow/_popover_arrow.tsx | 36 ++++ src/components/popover/popover_arrow/index.ts | 13 ++ .../popover/popover_footer.styles.ts | 36 ++++ .../popover/popover_footer.test.tsx | 6 +- src/components/popover/popover_footer.tsx | 40 ++-- .../_popover_panel.test.tsx.snap | 54 ++++++ .../popover_panel/_popover_panel.styles.ts | 94 +++++++++ .../popover_panel/_popover_panel.test.tsx | 49 +++++ .../popover/popover_panel/_popover_panel.tsx | 75 ++++++++ src/components/popover/popover_panel/index.ts | 9 + .../popover/popover_title.styles.ts | 36 ++++ src/components/popover/popover_title.test.tsx | 6 +- src/components/popover/popover_title.tsx | 40 ++-- ...selectable_template_sitewide.test.tsx.snap | 28 +-- .../selectable_template_sitewide.tsx | 4 +- .../__snapshots__/suggest.test.tsx.snap | 60 +++--- src/components/suggest/suggest.tsx | 5 - .../table_sort_mobile.test.tsx.snap | 4 +- .../table_pagination.test.tsx.snap | 8 +- .../__snapshots__/tour_step.test.tsx.snap | 74 ++++--- src/components/tour/_tour.scss | 22 ++- src/global_styling/functions/logicals.ts | 26 +++ src/global_styling/mixins/_index.scss | 1 - src/global_styling/mixins/_popover.scss | 19 -- src/global_styling/variables/shadow.ts | 1 + .../global_styling/functions/shadows.ts | 2 +- .../global_styling/mixins/_index.scss | 2 - .../global_styling/mixins/_popover.scss | 5 - .../amsterdam/global_styling/mixins/shadow.ts | 22 ++- src/themes/amsterdam/overrides/_index.scss | 1 - src/themes/amsterdam/overrides/_popover.scss | 104 ---------- upcoming_changelogs/5977.md | 13 ++ wiki/writing-styles-with-emotion.md | 33 ++-- 92 files changed, 1484 insertions(+), 1010 deletions(-) rename src-docs/src/views/popover/{initial_focus.js => initial_focus.tsx} (89%) rename src-docs/src/views/popover/{input_popover.js => input_popover.tsx} (89%) rename src-docs/src/views/popover/{popover.js => popover.tsx} (89%) rename src-docs/src/views/popover/{popover_anchor_position.js => popover_anchor_position.tsx} (99%) rename src-docs/src/views/popover/{popover_block.js => popover_block.tsx} (89%) rename src-docs/src/views/popover/{popover_fixed.js => popover_fixed.tsx} (94%) rename src-docs/src/views/popover/{popover_panel_class_name.js => popover_panel_class_name.tsx} (90%) rename src-docs/src/views/popover/{popover_with_title.js => popover_with_title.tsx} (98%) rename src-docs/src/views/popover/{popover_with_title_padding.js => popover_with_title_padding.tsx} (99%) create mode 100644 src-docs/src/views/popover/props.tsx rename src-docs/src/views/popover/{trap_focus.js => trap_focus.tsx} (95%) create mode 100644 src/components/form/form.styles.ts delete mode 100644 src/components/popover/_index.scss delete mode 100644 src/components/popover/_input_popover.scss delete mode 100644 src/components/popover/_popover.scss delete mode 100644 src/components/popover/_popover_footer.scss delete mode 100644 src/components/popover/_popover_title.scss delete mode 100644 src/components/popover/_variables.scss create mode 100644 src/components/popover/popover.styles.ts create mode 100644 src/components/popover/popover_arrow/__snapshots__/_popover_arrow.test.tsx.snap create mode 100644 src/components/popover/popover_arrow/_popover_arrow.styles.ts create mode 100644 src/components/popover/popover_arrow/_popover_arrow.test.tsx create mode 100644 src/components/popover/popover_arrow/_popover_arrow.tsx create mode 100644 src/components/popover/popover_arrow/index.ts create mode 100644 src/components/popover/popover_footer.styles.ts create mode 100644 src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap create mode 100644 src/components/popover/popover_panel/_popover_panel.styles.ts create mode 100644 src/components/popover/popover_panel/_popover_panel.test.tsx create mode 100644 src/components/popover/popover_panel/_popover_panel.tsx create mode 100644 src/components/popover/popover_panel/index.ts create mode 100644 src/components/popover/popover_title.styles.ts delete mode 100644 src/global_styling/mixins/_popover.scss delete mode 100644 src/themes/amsterdam/global_styling/mixins/_popover.scss delete mode 100644 src/themes/amsterdam/overrides/_popover.scss create mode 100644 upcoming_changelogs/5977.md diff --git a/src-docs/src/views/popover/initial_focus.js b/src-docs/src/views/popover/initial_focus.tsx similarity index 89% rename from src-docs/src/views/popover/initial_focus.js rename to src-docs/src/views/popover/initial_focus.tsx index 7ccac2c5365..9446a2e3bf1 100644 --- a/src-docs/src/views/popover/initial_focus.js +++ b/src-docs/src/views/popover/initial_focus.tsx @@ -6,7 +6,7 @@ import { EuiPopover, EuiSpacer, EuiFieldText, -} from '../../../../src/components'; +} from '../../../../src'; export default () => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); @@ -34,7 +34,9 @@ export default () => { - Submit + + Submit + ); }; diff --git a/src-docs/src/views/popover/input_popover.js b/src-docs/src/views/popover/input_popover.tsx similarity index 89% rename from src-docs/src/views/popover/input_popover.js rename to src-docs/src/views/popover/input_popover.tsx index da86fa8d0ca..4536c765698 100644 --- a/src-docs/src/views/popover/input_popover.js +++ b/src-docs/src/views/popover/input_popover.tsx @@ -1,10 +1,6 @@ import React, { useState } from 'react'; -import { - EuiInputPopover, - EuiFieldText, - EuiSpacer, -} from '../../../../src/components'; +import { EuiInputPopover, EuiFieldText, EuiSpacer } from '../../../../src'; export default () => { const [inputWidth, setInputWidth] = useState(200); @@ -27,10 +23,9 @@ export default () => { const inputTwo = ( { - setInputWidth(400); + setInputWidth(300); toggleIsPopoverOpenTwo(); }} - style={{ width: inputWidth }} aria-label="Popover attached to an adjustable sized input element" /> ); @@ -52,6 +47,7 @@ export default () => { { toggleIsPopoverOpenTwo(false); setInputWidth(200); diff --git a/src-docs/src/views/popover/popover.js b/src-docs/src/views/popover/popover.tsx similarity index 89% rename from src-docs/src/views/popover/popover.js rename to src-docs/src/views/popover/popover.tsx index 74f7e567e64..8e3877cf1d4 100644 --- a/src-docs/src/views/popover/popover.js +++ b/src-docs/src/views/popover/popover.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { EuiPopover, EuiButton, EuiText } from '../../../../src/components'; +import { EuiPopover, EuiButton, EuiText } from '../../../../src'; export default () => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); diff --git a/src-docs/src/views/popover/popover_anchor_position.js b/src-docs/src/views/popover/popover_anchor_position.tsx similarity index 99% rename from src-docs/src/views/popover/popover_anchor_position.js rename to src-docs/src/views/popover/popover_anchor_position.tsx index 021b17666c9..59677624179 100644 --- a/src-docs/src/views/popover/popover_anchor_position.js +++ b/src-docs/src/views/popover/popover_anchor_position.tsx @@ -7,7 +7,7 @@ import { EuiFlexItem, EuiSpacer, EuiText, -} from '../../../../src/components'; +} from '../../../../src'; export default () => { const [isPopoverOpen1, setIsPopoverOpen1] = useState(false); diff --git a/src-docs/src/views/popover/popover_block.js b/src-docs/src/views/popover/popover_block.tsx similarity index 89% rename from src-docs/src/views/popover/popover_block.js rename to src-docs/src/views/popover/popover_block.tsx index 09ffb86407f..c5139bd9d1d 100644 --- a/src-docs/src/views/popover/popover_block.js +++ b/src-docs/src/views/popover/popover_block.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { EuiButton, EuiPopover } from '../../../../src/components'; +import { EuiButton, EuiPopover } from '../../../../src'; export default () => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js index f86611fb483..e3f76b9f60a 100644 --- a/src-docs/src/views/popover/popover_example.js +++ b/src-docs/src/views/popover/popover_example.js @@ -12,6 +12,8 @@ import { EuiCallOut, } from '../../../../src/components'; +import { EuiPopoverPanelProps } from './props'; + import Popover from './popover'; const popoverSource = require('!!raw-loader!./popover'); @@ -171,7 +173,7 @@ export const PopoverExample = {

), - props: { EuiPopover }, + props: { EuiPopover, EuiPopoverPanelProps }, snippet: popOverSnippet, demo: , }, diff --git a/src-docs/src/views/popover/popover_fixed.js b/src-docs/src/views/popover/popover_fixed.tsx similarity index 94% rename from src-docs/src/views/popover/popover_fixed.js rename to src-docs/src/views/popover/popover_fixed.tsx index 3ce1980ea57..514610d317d 100644 --- a/src-docs/src/views/popover/popover_fixed.js +++ b/src-docs/src/views/popover/popover_fixed.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { EuiButton, EuiPopover } from '../../../../src/components'; +import { EuiButton, EuiPopover } from '../../../../src'; export default () => { const [isExampleShown, setIsExampleShown] = useState(false); diff --git a/src-docs/src/views/popover/popover_panel_class_name.js b/src-docs/src/views/popover/popover_panel_class_name.tsx similarity index 90% rename from src-docs/src/views/popover/popover_panel_class_name.js rename to src-docs/src/views/popover/popover_panel_class_name.tsx index 46420548ec2..ba725b9615d 100644 --- a/src-docs/src/views/popover/popover_panel_class_name.js +++ b/src-docs/src/views/popover/popover_panel_class_name.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { EuiPopover, EuiButton, EuiText } from '../../../../src/components'; +import { EuiPopover, EuiButton, EuiText } from '../../../../src'; export default () => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); diff --git a/src-docs/src/views/popover/popover_with_title.js b/src-docs/src/views/popover/popover_with_title.tsx similarity index 98% rename from src-docs/src/views/popover/popover_with_title.js rename to src-docs/src/views/popover/popover_with_title.tsx index 7cac63191e0..dd83f709c81 100644 --- a/src-docs/src/views/popover/popover_with_title.js +++ b/src-docs/src/views/popover/popover_with_title.tsx @@ -9,7 +9,7 @@ import { EuiFlexItem, EuiText, EuiTextColor, -} from '../../../../src/components'; +} from '../../../../src'; export default () => { const [isPopoverOpen1, setIsPopoverOpen1] = useState(false); diff --git a/src-docs/src/views/popover/popover_with_title_padding.js b/src-docs/src/views/popover/popover_with_title_padding.tsx similarity index 99% rename from src-docs/src/views/popover/popover_with_title_padding.js rename to src-docs/src/views/popover/popover_with_title_padding.tsx index bf1ba670b57..ce38fbf706f 100644 --- a/src-docs/src/views/popover/popover_with_title_padding.js +++ b/src-docs/src/views/popover/popover_with_title_padding.tsx @@ -9,7 +9,7 @@ import { EuiFlexItem, EuiText, EuiCode, -} from '../../../../src/components'; +} from '../../../../src'; export default () => { const [isPopoverOpen1, setIsPopoverOpen1] = useState(false); diff --git a/src-docs/src/views/popover/props.tsx b/src-docs/src/views/popover/props.tsx new file mode 100644 index 00000000000..0beada7ecfc --- /dev/null +++ b/src-docs/src/views/popover/props.tsx @@ -0,0 +1,7 @@ +import React, { FunctionComponent } from 'react'; + +import { EuiPopoverPanelProps as _EuiPopoverPanelProps } from '../../../../src/components/popover/popover_panel/_popover_panel'; + +export const EuiPopoverPanelProps: FunctionComponent<_EuiPopoverPanelProps> = () => ( +
+); diff --git a/src-docs/src/views/popover/trap_focus.js b/src-docs/src/views/popover/trap_focus.tsx similarity index 95% rename from src-docs/src/views/popover/trap_focus.js rename to src-docs/src/views/popover/trap_focus.tsx index 4404c49058b..42c3c6a3748 100644 --- a/src-docs/src/views/popover/trap_focus.js +++ b/src-docs/src/views/popover/trap_focus.tsx @@ -27,7 +27,7 @@ export default () => { const focusId = useGeneratedHtmlId(); useEffect(() => { if (isPopoverOpen) { - document.getElementById(focusId).focus({ preventScroll: true }); + document.getElementById(focusId)!.focus({ preventScroll: true }); } }, [isPopoverOpen, focusId]); diff --git a/src-docs/src/views/theme/sizing/_sizing_js.tsx b/src-docs/src/views/theme/sizing/_sizing_js.tsx index d42fbd8cbdb..1277fb2deee 100644 --- a/src-docs/src/views/theme/sizing/_sizing_js.tsx +++ b/src-docs/src/views/theme/sizing/_sizing_js.tsx @@ -18,6 +18,9 @@ import { PADDING_SIZES, LOGICAL_SIDES, EuiPanel, + EuiSpacer, + logicalSizeCSS, + logicalSizeStyle, } from '../../../../../src'; import { ThemeExample } from '../_components/_theme_example'; @@ -258,6 +261,56 @@ export const UtilsJS = () => { + + + + {'logicalSizeCSS(width, height)'}} + type="function" + description={ +

+ Returns the string version of the logical CSS size + properties given width and{' '} + height. Best used when providing + styles via Emotion's {'css``'} method. +

+ } + example={ +

+ {logicalSizeCSS('200px', '100px')} +

+ } + snippetLanguage="emotion" + snippet={"${logicalSizeCSS('200px', '100px')};"} + /> + + {'logicalStyle(property, value)'}} + type="function" + description={ +

+ Returns the object version of the logical CSS size + properties given width and{' '} + height. Best used when providing + styles via React's style property. +

+ } + example={ +

+ {JSON.stringify(logicalSizeStyle('200px', '100px'))} +

+ } + snippetLanguage="tsx" + snippet={"

"} + /> ); }; diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap index a4c9a32ea4d..a3a0367eb51 100644 --- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap @@ -2,11 +2,11 @@ exports[`CollapsedItemActions render 1`] = `

} closePopover={[Function]} - display="inlineBlock" + display="inline-block" hasArrow={true} id="id-actions" isOpen={true} diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap index f5203d52f04..f2edc30182f 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap @@ -114,10 +114,10 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss index 58b194a8fe1..19146ba7f51 100644 --- a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss +++ b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss @@ -7,10 +7,6 @@ transform: none !important; // sass-lint:disable-line no-important top: 0; - &.euiPopover__panel-isAttached.euiComboBoxOptionsList--top { /* 1 */ - @include euiBottomShadowFlat; - } - .euiFilterSelectItem__content { // sass-lint:disable no-important margin-block: 0 !important; diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx index 63a401a862d..50e4c6f960d 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx @@ -21,7 +21,6 @@ import { import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { EuiHighlight } from '../../highlight'; -import { EuiPanel } from '../../panel'; import { EuiText } from '../../text'; import { EuiLoadingSpinner } from '../../loading'; import { EuiComboBoxTitle } from './combo_box_title'; @@ -41,11 +40,12 @@ import { } from '../types'; import { CommonProps } from '../../common'; import { EuiBadge } from '../../badge/'; +import { EuiPopoverPanel } from '../../popover/popover_panel'; const OPTION_CONTENT_CLASSNAME = 'euiComboBoxOption__content'; export type EuiComboBoxOptionsListProps = CommonProps & - ComponentProps & { + ComponentProps & { 'data-test-subj': string; activeOptionIndex?: number; areAllOptionsSelected?: boolean; @@ -465,29 +465,25 @@ export class EuiComboBoxOptionsList extends Component< * Reusing the EuiPopover__panel classes to help with consistency/maintenance. * But this should really be converted to user the popover component. */ - const classes = classNames( - 'euiComboBoxOptionsList', - 'euiPopover__panel', - 'euiPopover__panel-isAttached', - 'euiPopover__panel-noArrow', - 'euiPopover__panel-isOpen', - `euiPopover__panel--${position}` - ); + const classes = classNames('euiComboBoxOptionsList'); return ( -
{emptyState || optionsList}
- + ); } } diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss index 3dd1310d3b2..cefb1938b48 100644 --- a/src/components/context_menu/_context_menu_panel.scss +++ b/src/components/context_menu/_context_menu_panel.scss @@ -39,11 +39,12 @@ } .euiContextMenuPanelTitle { - @include euiPopoverTitle; + @include euiTitle('xxs'); padding: $euiSizeM; width: 100%; text-align: left; outline-offset: -$euiFocusRingSize; + border-bottom: $euiBorderThin; &:enabled:hover, &:enabled:focus { @@ -51,7 +52,6 @@ } &--small { - @include euiPopoverTitle('s'); padding: ($euiSizeS * .75) $euiSizeS; } } diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 9bf8ea5bbd1..2ab584b946c 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -8,10 +8,10 @@ exports[`EuiDataGrid pagination renders 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
,
@@ -15,12 +15,12 @@ exports[`EuiPopover children is rendered 1`] = ` exports[`EuiPopover is rendered 1`] = `
@@ -29,11 +29,11 @@ exports[`EuiPopover is rendered 1`] = ` exports[`EuiPopover props anchorClassName is rendered 1`] = `
@@ -42,11 +42,11 @@ exports[`EuiPopover props anchorClassName is rendered 1`] = ` exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = `
@@ -55,11 +55,11 @@ exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = ` exports[`EuiPopover props anchorPosition downRight is rendered 1`] = `
@@ -68,11 +68,11 @@ exports[`EuiPopover props anchorPosition downRight is rendered 1`] = ` exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = `
@@ -82,11 +82,11 @@ exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = ` exports[`EuiPopover props arrowChildren is rendered 1`] = `
@@ -107,15 +107,17 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = ` aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen emotion-euiPanel-grow-m-m-plain" + class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom" data-autofocus="true" + data-popover-open="true" data-popover-panel="true" role="dialog" style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" tabindex="0" >
@@ -141,11 +143,11 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = ` exports[`EuiPopover props buffer 1`] = `
@@ -166,15 +168,17 @@ exports[`EuiPopover props buffer 1`] = ` aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen emotion-euiPanel-grow-m-m-plain" + class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom" data-autofocus="true" + data-popover-open="true" data-popover-panel="true" role="dialog" style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" tabindex="0" >

@@ -223,15 +227,17 @@ exports[`EuiPopover props buffer for all sides 1`] = ` aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen emotion-euiPanel-grow-m-m-plain" + class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom" data-autofocus="true" + data-popover-open="true" data-popover-panel="true" role="dialog" style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" tabindex="0" >

@@ -268,11 +274,11 @@ exports[`EuiPopover props display block is rendered 1`] = ` exports[`EuiPopover props focusTrapProps is rendered 1`] = `
@@ -293,15 +299,17 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = ` aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen emotion-euiPanel-grow-m-m-plain" + class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom" data-autofocus="true" + data-popover-open="true" data-popover-panel="true" role="dialog" style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" tabindex="0" >

@@ -338,11 +346,11 @@ exports[`EuiPopover props isOpen defaults to false 1`] = ` exports[`EuiPopover props isOpen renders true 1`] = `
@@ -363,15 +371,17 @@ exports[`EuiPopover props isOpen renders true 1`] = ` aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen emotion-euiPanel-grow-m-m-plain" + class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom" data-autofocus="true" + data-popover-open="true" data-popover-panel="true" role="dialog" style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" tabindex="0" >

@@ -420,15 +430,17 @@ exports[`EuiPopover props offset with arrow 1`] = ` aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen emotion-euiPanel-grow-m-m-plain" + class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom" data-autofocus="true" + data-popover-open="true" data-popover-panel="true" role="dialog" style="top: 26px; left: -22px; will-change: transform, opacity; z-index: 2000;" tabindex="0" >

@@ -477,16 +489,14 @@ exports[`EuiPopover props offset without arrow 1`] = ` aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen euiPopover__panel-noArrow emotion-euiPanel-grow-m-m-plain" + class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom" data-autofocus="true" + data-popover-open="true" data-popover-panel="true" role="dialog" style="top: 18px; left: -22px; will-change: transform, opacity; z-index: 2000;" tabindex="0" > -

@@ -533,15 +543,17 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = ` aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen emotion-euiPanel-grow-m-m-plain" + class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom" data-autofocus="true" + data-popover-open="true" data-popover-panel="true" role="dialog" style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" tabindex="0" >

@@ -589,13 +601,15 @@ exports[`EuiPopover props ownFocus renders false 1`] = `