From e81606f21b349ede9812c7cb5a2b66c74e2bd2c6 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 26 Apr 2022 14:14:09 -0500 Subject: [PATCH 01/14] convert euiscreenreaderonly to css-in-js styling --- src/components/accessibility/_index.scss | 1 - .../_screen_reader_only.scss | 5 ----- .../screen_reader_only.styles.ts | 14 ++++++++++++-- .../screen_reader_only/screen_reader_only.tsx | 18 ++++++++++++++---- 4 files changed, 26 insertions(+), 12 deletions(-) delete mode 100644 src/components/accessibility/screen_reader_only/_screen_reader_only.scss diff --git a/src/components/accessibility/_index.scss b/src/components/accessibility/_index.scss index 01ca773d2f9..da15749ea6b 100644 --- a/src/components/accessibility/_index.scss +++ b/src/components/accessibility/_index.scss @@ -1,2 +1 @@ -@import 'screen_reader_only/screen_reader_only'; @import 'skip_link/skip_link'; diff --git a/src/components/accessibility/screen_reader_only/_screen_reader_only.scss b/src/components/accessibility/screen_reader_only/_screen_reader_only.scss deleted file mode 100644 index 92fe2a7d8f8..00000000000 --- a/src/components/accessibility/screen_reader_only/_screen_reader_only.scss +++ /dev/null @@ -1,5 +0,0 @@ -// The `:active` selector is necessary for Safari which removes `:focus` when a button is pressed -.euiScreenReaderOnly, -.euiScreenReaderOnly--showOnFocus:not(:focus):not(:active) { - @include euiScreenReaderOnly; -} diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts index e6b07360fdd..5bb9a30e9b7 100644 --- a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts +++ b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts @@ -8,8 +8,7 @@ import { css } from '@emotion/react'; -export const euiScreenReaderOnlyStyles = () => { - return css` +const euiScreenReaderOnly = ` position: absolute; left: -10000px; top: auto; @@ -17,4 +16,15 @@ export const euiScreenReaderOnlyStyles = () => { height: 1px; overflow: hidden; `; + +export const euiScreenReaderOnlyStyles = (showOnFocus?: boolean) => { + if (showOnFocus) { + return css` + // The :active selector is necessary for Safari which removes :focus when a button is pressed + &:not(:focus):not(:active) { + ${euiScreenReaderOnly} + } + `; + } + return css(euiScreenReaderOnly); }; diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx index 9f9df8f62fa..d5e207e0677 100644 --- a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx +++ b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx @@ -6,37 +6,47 @@ * Side Public License, v 1. */ -import { cloneElement, ReactElement, FunctionComponent } from 'react'; +import { ReactElement, FunctionComponent } from 'react'; import classNames from 'classnames'; +import { cloneElementWithCss } from '../../../services/theme/clone_element'; +import { euiScreenReaderOnlyStyles } from './screen_reader_only.styles'; + export interface EuiScreenReaderOnlyProps { /** * ReactElement to render as this component's content */ - children: ReactElement; + children: ReactElement; /** * For keyboard navigation, force content to display visually upon focus. */ showOnFocus?: boolean; + className?: string; } export const EuiScreenReaderOnly: FunctionComponent = ({ children, + className, showOnFocus, + ...rest }) => { const classes = classNames( { euiScreenReaderOnly: !showOnFocus, 'euiScreenReaderOnly--showOnFocus': showOnFocus, }, + className, children.props.className ); + const cssStyles = [euiScreenReaderOnlyStyles(showOnFocus)]; + const props = { - ...children.props, + ...rest, className: classes, + css: cssStyles, }; - return cloneElement(children, props); + return cloneElementWithCss(children, props); }; From 2ce9c13504182be3bebd8678b864a1d2db0bddd9 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 26 Apr 2022 14:14:41 -0500 Subject: [PATCH 02/14] update snapshots --- .../screen_reader_live.test.tsx.snap | 116 +- .../screen_reader_live.test.tsx | 4 +- .../screen_reader_only.test.tsx.snap | 6 +- .../__snapshots__/skip_link.test.tsx.snap | 12 +- .../__snapshots__/basic_table.test.tsx.snap | 744 ++--- .../in_memory_table.test.tsx.snap | 571 +--- .../basic_table/basic_table.test.tsx | 4 +- .../basic_table/in_memory_table.test.tsx | 2 +- .../__snapshots__/bottom_bar.test.tsx.snap | 54 +- .../__snapshots__/button_group.test.tsx.snap | 60 +- .../__snapshots__/color_picker.test.tsx.snap | 4 +- .../__snapshots__/hue.test.tsx.snap | 12 +- .../color_palette_display.test.tsx.snap | 2 +- .../color_palette_picker.test.tsx.snap | 30 +- .../__snapshots__/color_stops.test.tsx.snap | 20 +- .../__snapshots__/control_bar.test.tsx.snap | 2878 ++++------------- .../control_bar/control_bar.test.tsx | 29 +- .../__snapshots__/data_grid.test.tsx.snap | 62 +- .../data_grid_body.test.tsx.snap | 4 +- .../data_grid_cell.test.tsx.snap | 187 +- .../datagrid/body/data_grid_cell.test.tsx | 2 +- .../column_selector.test.tsx.snap | 1205 +------ .../column_sorting.test.tsx.snap | 1481 +-------- .../controls/column_selector.test.tsx | 2 +- .../datagrid/controls/column_sorting.test.tsx | 2 +- .../__snapshots__/date_picker.test.tsx.snap | 4 +- .../__snapshots__/form_legend.test.tsx.snap | 2 +- .../__snapshots__/super_select.test.tsx.snap | 28 +- .../super_select_control.test.tsx.snap | 16 +- .../link/__snapshots__/link.test.tsx.snap | 4 +- .../markdown_editor.test.tsx.snap | 1317 ++------ .../markdown_editor/markdown_editor.test.tsx | 2 +- .../__snapshots__/page_template.test.tsx.snap | 4 +- .../page_header_content.test.tsx.snap | 4 +- .../__snapshots__/pagination.test.tsx.snap | 18 +- .../__snapshots__/popover.test.tsx.snap | 22 +- .../__snapshots__/selectable.test.tsx.snap | 12 +- .../selectable_list.test.tsx.snap | 12 +- .../selectable_list_item.test.tsx.snap | 4 +- .../__snapshots__/side_nav.test.tsx.snap | 2 +- .../stat/__snapshots__/stat.test.tsx.snap | 38 +- .../steps/__snapshots__/step.test.tsx.snap | 16 +- .../step_horizontal.test.tsx.snap | 16 +- .../__snapshots__/step_number.test.tsx.snap | 14 +- .../steps/__snapshots__/steps.test.tsx.snap | 24 +- .../steps_horizontal.test.tsx.snap | 6 +- .../__snapshots__/suggest.test.tsx.snap | 739 +---- src/components/suggest/suggest.test.tsx | 6 +- .../table_pagination.test.tsx.snap | 4 +- .../global_toast_list.test.tsx.snap | 8 +- .../toast/__snapshots__/toast.test.tsx.snap | 301 +- src/components/toast/toast.test.tsx | 6 +- .../__snapshots__/tree_view.test.tsx.snap | 2 +- 53 files changed, 1662 insertions(+), 8462 deletions(-) diff --git a/src/components/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap b/src/components/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap index 41dd2c3fbcd..4f48af80873 100644 --- a/src/components/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap +++ b/src/components/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiScreenReaderLive with a static configuration accepts \`aria-live\` 1`] = `
-
- +
+
+
- Increment - - - -
-
-
-

- Number of active options: - 1 -

-
-
- - +

+ Number of active options: 1 +

+
- +
`; exports[`EuiScreenReaderLive with dynamic properties initially renders screen reader content in the first live region 1`] = ` - -
- +
+
+
- Increment - - - -
-
-

- Number of active options: - 0 -

-
-
-
- - +

+ Number of active options: 0 +

+
- +
`; diff --git a/src/components/accessibility/screen_reader_live/screen_reader_live.test.tsx b/src/components/accessibility/screen_reader_live/screen_reader_live.test.tsx index 944745b1850..4043bfcbba1 100644 --- a/src/components/accessibility/screen_reader_live/screen_reader_live.test.tsx +++ b/src/components/accessibility/screen_reader_live/screen_reader_live.test.tsx @@ -77,7 +77,7 @@ describe('EuiScreenReaderLive', () => { }; it('initially renders screen reader content in the first live region', () => { - const component = mount(); + const component = render(); expect(component).toMatchSnapshot(); }); @@ -87,7 +87,7 @@ describe('EuiScreenReaderLive', () => { findTestSubject(component, 'increment').simulate('click'); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); }); }); diff --git a/src/components/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap b/src/components/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap index 39b7d8e177a..f3c718acad8 100644 --- a/src/components/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap +++ b/src/components/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiScreenReaderOnly adds an accessibility class to a child element and combines other classNames (foo, bar) given as props on the child 1`] = `

This paragraph is not visibile to sighted users but will be read by screenreaders.

@@ -10,7 +10,7 @@ exports[`EuiScreenReaderOnly adds an accessibility class to a child element and exports[`EuiScreenReaderOnly adds an accessibility class to a child element when used with no props 1`] = `

This paragraph is not visibile to sighted users but will be read by screenreaders.

@@ -18,7 +18,7 @@ exports[`EuiScreenReaderOnly adds an accessibility class to a child element when exports[`EuiScreenReaderOnly will show on focus 1`] = ` Link diff --git a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap index 2f03a9a93e3..cacf5e381e3 100644 --- a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap +++ b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiSkipLink is rendered 1`] = ` @@ -38,7 +38,7 @@ exports[`EuiSkipLink props onClick is rendered 1`] = ` exports[`EuiSkipLink props position absolute is rendered 1`] = ` @@ -54,7 +54,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = ` exports[`EuiSkipLink props position fixed is rendered 1`] = ` @@ -87,7 +87,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = ` exports[`EuiSkipLink props tabIndex is rendered 1`] = ` - } - responsive={true} - selection={ - Object { - "initialSelected": Array [ - Object { - "id": "1", - "name": "name1", - }, - ], - "onSelectionChange": [Function], - } - } - tableLayout="fixed" +
-
-
- +
+
+
- +
+
+
+
+
+
+ + + + + + + + + + + + + + + + +
+
+
+
+
- - -
- -
- -
- - -
- - +
+
+
+ + + Name + + + description + + +
+
+
+
- +
- -
- - - - - - - - - - - - - - - - - - +
+ -
- - - - - - - - - + + + + + - - - - - - - - - +
+
+ + + - - - - - - - - - - -
+
+
- - - - -
-
- - -
- -
-
- - -
-
- - - - - - Name - - - - - - description - - - - -
-
- - -
- -
-
- - -
-
-
- Name -
-
- - name1 - -
-
+
+
-
-
- - -
- -
-
- - -
-
-
- Name -
-
- - name2 - -
-
+
+ Name +
+
+ -
-
- - -
- -
-
- - -
-
-
- Name -
-
- - name3 - -
-
- - + name2 + + +
+
+
+ +
+
+
+
+
+ Name +
+
+ + name3 + +
+
- +
`; exports[`EuiBasicTable with multiple record actions with custom availability 1`] = ` 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 2b268c5f3c5..428e5af6e3f 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 @@ -27,7 +27,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` tabindex="-1" > @@ -47,7 +47,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` Name description @@ -152,7 +152,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` Page 2 of 2 @@ -299,7 +299,7 @@ exports[`EuiInMemoryTable with executeQueryOptions 1`] = ` `; exports[`EuiInMemoryTable with initial selection 1`] = ` - + } + onChange={[Function]} responsive={true} selection={ Object { @@ -342,557 +349,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = ` } } tableLayout="fixed" -> - - } - onChange={[Function]} - responsive={true} - selection={ - Object { - "initialSelected": Array [ - Object { - "id": "1", - "name": "name1", - }, - ], - "onSelectionChange": [Function], - } - } - tableLayout="fixed" - > -
-
- -
- -
- -
- - -
- -
- -
- - -
- - -
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - -
- -
-
- - -
-
- - - - - - Name - - - - - - description - - - - -
-
- - -
- -
-
- - -
-
-
- Name -
-
- - name1 - -
-
-
- - -
- -
-
- - -
-
-
- Name -
-
- - name2 - -
-
-
- - -
- -
-
- - -
-
-
- Name -
-
- - name3 - -
-
- -
-
- - +/> `; exports[`EuiInMemoryTable with initial sorting 1`] = ` @@ -1199,7 +656,7 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = ` tabindex="-1" > @@ -1219,7 +676,7 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = ` Name description diff --git a/src/components/basic_table/basic_table.test.tsx b/src/components/basic_table/basic_table.test.tsx index 4c920f1fbb3..3e78dbc59c6 100644 --- a/src/components/basic_table/basic_table.test.tsx +++ b/src/components/basic_table/basic_table.test.tsx @@ -7,7 +7,7 @@ */ import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { shallow, render } from 'enzyme'; import { requiredProps } from '../../test'; import { @@ -479,7 +479,7 @@ describe('EuiBasicTable', () => { initialSelected: [{ id: '1', name: 'name1' }], }, }; - const component = mount(); + const component = render(); expect(component).toMatchSnapshot(); }); diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx index 5c9c7012314..e71cb9e5e72 100644 --- a/src/components/basic_table/in_memory_table.test.tsx +++ b/src/components/basic_table/in_memory_table.test.tsx @@ -510,7 +510,7 @@ describe('EuiInMemoryTable', () => { initialSelected: [{ id: '1', name: 'name1' }], }, }; - const component = mount(); + const component = shallow(); expect(component).toMatchSnapshot(); }); diff --git a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap index 2f3fe4a42ac..4557aeee149 100644 --- a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap +++ b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap @@ -9,7 +9,7 @@ Array [ style="left:0;right:0;bottom:0" >

Page level controls

@@ -17,7 +17,7 @@ Array [ ,

There is a new region landmark with page level controls at the end of the document.

, @@ -32,14 +32,14 @@ Array [ style="left:0;right:0;bottom:0" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, @@ -53,7 +53,7 @@ exports[`EuiBottomBar props bodyClassName is rendered 1`] = ` style="left: 0px; right: 0px; bottom: 0px;" >

Page level controls

@@ -68,14 +68,14 @@ Array [ style="left:0;right:0;bottom:0" >

This should have been label

,

There is a new region landmark called This should have been label with page level controls at the end of the document.

, @@ -90,14 +90,14 @@ Array [ style="left:0;right:0;bottom:0" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, @@ -112,14 +112,14 @@ Array [ style="left:0;right:0;bottom:0" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, @@ -134,14 +134,14 @@ Array [ style="left:0;right:0;bottom:0" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, @@ -156,14 +156,14 @@ Array [ style="left:0;right:0;bottom:0" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, @@ -178,14 +178,14 @@ Array [ style="left:0;right:0;bottom:0" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, @@ -200,14 +200,14 @@ Array [ style="left:30px;right:30px;bottom:30px;top:30px" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, @@ -222,14 +222,14 @@ Array [ style="left:0;right:0;bottom:0" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, @@ -244,14 +244,14 @@ Array [ style="left:0;right:0;bottom:0" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, @@ -266,14 +266,14 @@ Array [ style="left:12px;right:0;bottom:0" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, @@ -288,14 +288,14 @@ Array [ style="left:0;right:0;bottom:0" >

Page level controls

,

There is a new region landmark with page level controls at the end of the document.

, diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap index 1efba751f7e..717bb8a575a 100644 --- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap +++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap @@ -5,7 +5,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text" > test @@ -89,7 +89,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text" > test @@ -182,7 +182,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text" > test @@ -266,7 +266,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text" > test @@ -359,7 +359,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > test @@ -443,7 +443,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > test @@ -536,7 +536,7 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--accent" > test @@ -620,7 +620,7 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--accent" > test @@ -713,7 +713,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger" > test @@ -797,7 +797,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger" > test @@ -890,7 +890,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost" > test @@ -974,7 +974,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost" > test @@ -1067,7 +1067,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary" > test @@ -1151,7 +1151,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] = class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary" > test @@ -1244,7 +1244,7 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--success" > test @@ -1328,7 +1328,7 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] = class="euiButtonGroup euiButtonGroup--small euiButtonGroup--success" > test @@ -1421,7 +1421,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > test @@ -1505,7 +1505,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > test @@ -1598,7 +1598,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning" > test @@ -1682,7 +1682,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] = class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning" > test @@ -1776,7 +1776,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = ` disabled="" > test @@ -1863,7 +1863,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = ` disabled="" > test @@ -1949,7 +1949,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth" > test @@ -2033,7 +2033,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth" > test @@ -2126,7 +2126,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > test @@ -2210,7 +2210,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > test @@ -2303,7 +2303,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > test @@ -2397,7 +2397,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > test @@ -2483,7 +2483,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = ` data-test-subj="test subject string" > test @@ -2569,7 +2569,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = ` data-test-subj="test subject string" > test diff --git a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap index 7ee550b7c40..65a1a59b258 100644 --- a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap +++ b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap @@ -645,14 +645,14 @@ exports[`renders inline EuiColorPicker 1`] = `

#ffeedd

diff --git a/src/components/color_picker/__snapshots__/hue.test.tsx.snap b/src/components/color_picker/__snapshots__/hue.test.tsx.snap index d9dd5448bdf..effedd41be6 100644 --- a/src/components/color_picker/__snapshots__/hue.test.tsx.snap +++ b/src/components/color_picker/__snapshots__/hue.test.tsx.snap @@ -3,14 +3,14 @@ exports[`EuiHue accepts a hex value 1`] = ` Array [ ,

#00FFFF

, @@ -35,14 +35,14 @@ Array [ exports[`EuiHue accepts a hue value 1`] = ` Array [ ,

,

Select the HSV color mode 'hue' value ,

,

title diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap index 8f2644c6708..f31be93f436 100644 --- a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap +++ b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap @@ -19,7 +19,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = ` class="euiFormControlLayout__childrenWrapper" > Select an option: , is selected @@ -70,7 +70,7 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = ` class="euiFormControlLayout__childrenWrapper" > Select an option: Plain text as a custom option, is selected @@ -123,7 +123,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = ` class="euiFormControlLayout__childrenWrapper" > Select an option: @@ -131,7 +131,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = ` class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall" > Palette 1 @@ -169,7 +169,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = ` class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall" > Palette 1 @@ -234,12 +234,12 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`] class="euiFormControlLayout__childrenWrapper" > Select an option: Linear Gradient @@ -258,7 +258,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`] type="button" > Linear Gradient @@ -307,12 +307,12 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with class="euiFormControlLayout__childrenWrapper" > Select an option: Linear Gradient with stops @@ -331,7 +331,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with type="button" > Linear Gradient with stops @@ -380,7 +380,7 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as class="euiFormControlLayout__childrenWrapper" > Select an option: Palette 1, is selected @@ -433,7 +433,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = ` class="euiFormControlLayout__childrenWrapper" > Select an option: @@ -441,7 +441,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = ` class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall" > Palette 1 @@ -478,7 +478,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = ` class="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall" > Palette 1 diff --git a/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap b/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap index 4f39481a4d7..637ba067c7e 100644 --- a/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap +++ b/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap @@ -8,7 +8,7 @@ exports[`renders EuiColorStops 1`] = ` >

Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.

@@ -119,7 +119,7 @@ exports[`renders compressed EuiColorStops 1`] = ` >

Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.

@@ -230,7 +230,7 @@ exports[`renders disabled EuiColorStops 1`] = ` >

Test: Disabled. Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.

@@ -344,7 +344,7 @@ exports[`renders empty EuiColorStops 1`] = ` >

Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.

@@ -380,7 +380,7 @@ exports[`renders fixed stop EuiColorStops 1`] = ` >

Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.

@@ -491,7 +491,7 @@ exports[`renders free-range EuiColorStops 1`] = ` >

Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.

@@ -527,7 +527,7 @@ exports[`renders fullWidth EuiColorStops 1`] = ` >

Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.

@@ -638,7 +638,7 @@ exports[`renders max-only EuiColorStops 1`] = ` >

Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.

@@ -674,7 +674,7 @@ exports[`renders min-only EuiColorStops 1`] = ` >

Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.

@@ -710,7 +710,7 @@ exports[`renders readOnly EuiColorStops 1`] = ` >

Test: Read-only. Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.

diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap index d41b45eb7ed..24c67688ed9 100644 --- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap +++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap @@ -1,14 +1,382 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiControlBar is rendered 1`] = ` +Array [ +
+

+ Page level controls +

+
+ + +
+ Close the Hatch +
+
+ + Sample Icon + +
+ +
+
, +

+ There is a new region landmark with page level controls at the end of the document. +

, +] +`; + +exports[`EuiControlBar props leftOffset is rendered 1`] = ` +Array [ +
+

+ Page level controls +

+
+ + +
+ Close the Hatch +
+
+ + Sample Icon + +
+ +
+
, +

+ There is a new region landmark with page level controls at the end of the document. +

, +] +`; + +exports[`EuiControlBar props maxHeight is rendered 1`] = ` +Array [ +
+

+ Page level controls +

+
+ + +
+ Close the Hatch +
+
+ + Sample Icon + +
+ +
+
, +

+ There is a new region landmark with page level controls at the end of the document. +

, +] +`; + +exports[`EuiControlBar props mobile is rendered 1`] = ` +Array [ +
+

+ Page level controls +

+
+ + +
+ Close the Hatch +
+
+ + Sample Icon + +
+ +
+
, +

+ There is a new region landmark with page level controls at the end of the document. +

, +] +`; + +exports[`EuiControlBar props position is rendered 1`] = `

Page level controls

@@ -27,7 +395,6 @@ exports[`EuiControlBar is rendered 1`] = ` > src @@ -38,7 +405,6 @@ exports[`EuiControlBar is rendered 1`] = ` components @@ -87,2289 +453,283 @@ exports[`EuiControlBar is rendered 1`] = `
`; -exports[`EuiControlBar props leftOffset is rendered 1`] = ` - - - -
-

- Page level controls -

-
- - -
- Close the Hatch -
-
- - Sample Icon - -
- -
-
-

- There is a new region landmark with page level controls at the end of the document. -

-
- } +exports[`EuiControlBar props rightOffset is rendered 1`] = ` +Array [ +
+

- -
- -

- Page level controls -

- -
- - - - - - - - -
- Close the Hatch -
-
- - - Sample Icon - - -
- -
-
- - -

- - There is a new region landmark with page level controls at the end of the document. - -

- - - - -`; - -exports[`EuiControlBar props maxHeight is rendered 1`] = ` - - - -
-

- Page level controls -

-
- - -
- Close the Hatch -
-
- - Sample Icon - -
- -
-
-

- There is a new region landmark with page level controls at the end of the document. -

-

- } + Page level controls + +
- -
- -

- Page level controls -

- -
- - - - - - - - -
- Close the Hatch -
-
- - - Sample Icon - - -
- -
-
- - -

- - There is a new region landmark with page level controls at the end of the document. - -

- - - - -`; - -exports[`EuiControlBar props mobile is rendered 1`] = ` - - - -
+ src + + +
  • -

    - Page level controls -

    -
    - - -
    - Close the Hatch -
    -
    - - Sample Icon - -
    - -
    -
    • -

    - There is a new region landmark with page level controls at the end of the document. -

    -
    - } - > - + components + + + + + - - -
    - Close the Hatch -
    -
    - - - Sample Icon - - -
    - -
    - - - -

    - - There is a new region landmark with page level controls at the end of the document. - -

    -     - - - + Sound the Alarm + + + +
    + Close the Hatch +
    +
    + + Sample Icon + +
    + +
    + , +

    + There is a new region landmark with page level controls at the end of the document. +

    , +] `; -exports[`EuiControlBar props position is rendered 1`] = ` - - -
    - -

    - Page level controls -

    -     -
    +
    + + + + +
    + Close the Hatch
    -
    -     -     -`; - -exports[`EuiControlBar props rightOffset is rendered 1`] = ` - - - -
    -

    - Page level controls -

    -
    - - -
    - Close the Hatch -
    -
    - - Sample Icon - -
    - -
    -
    -

    - There is a new region landmark with page level controls at the end of the document. -

    -
    - } - > - + -
    - -

    - Page level controls -

    -     -
    - - - - - - - - -
    - Close the Hatch -
    -
    - - - Sample Icon - - -
    - -
    -
    -     - -

    - - There is a new region landmark with page level controls at the end of the document. - -

    -     - - - -`; - -exports[`EuiControlBar props showContent is rendered 1`] = ` - - - -
    -

    - Page level controls -

    -
    - - -
    - Close the Hatch -
    -
    - - Sample Icon - -
    - -
    -
    - Content -
    -
    -

    - There is a new region landmark with page level controls at the end of the document. -

    -
    - } - > - +
    + - - -
    - Close the Hatch -
    -
    - - - Sample Icon - - -
    - -
    -
    - Content -
    - - - -

    - - There is a new region landmark with page level controls at the end of the document. - -

    -     - - - + Flight 815 + +
    +
    + Content +
    + , +

    + There is a new region landmark with page level controls at the end of the document. +

    , +] `; exports[`EuiControlBar props size is rendered 1`] = ` - - - -
    -

    - Page level controls -

    -
    - - -
    - Close the Hatch -
    -
    - - Sample Icon - -
    - -
    -
    -

    - There is a new region landmark with page level controls at the end of the document. -

    -
    - } +Array [ +
    +

    + Page level controls +

    +
    - -
    - -

    - Page level controls -

    -     -
    - - - - - - - - -
    - Close the Hatch -
    -
    - - - Sample Icon - - -
    - -
    -
    -     - -

    + src + + +

  • + + components + +
    • + + + +
    + Close the Hatch +
    +
    + + Sample Icon + +
    + +
    +
    , +

    + There is a new region landmark with page level controls at the end of the document. +

    , +] `; diff --git a/src/components/control_bar/control_bar.test.tsx b/src/components/control_bar/control_bar.test.tsx index 59d00c7e0de..c8080ec26d0 100644 --- a/src/components/control_bar/control_bar.test.tsx +++ b/src/components/control_bar/control_bar.test.tsx @@ -6,12 +6,16 @@ * Side Public License, v 1. */ -import React from 'react'; -import { mount } from 'enzyme'; -import { requiredProps, takeMountedSnapshot } from '../../test'; +import React, { ReactNode } from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test'; import { EuiControlBar, Control } from './control_bar'; +jest.mock('../portal', () => ({ + EuiPortal: ({ children }: { children: ReactNode }) => children, +})); + const handleClick = () => { console.log('You clicked'); }; @@ -65,16 +69,15 @@ const controls: Control[] = [ describe('EuiControlBar', () => { test('is rendered', () => { - const component = takeMountedSnapshot( - mount() + const component = render( + ); - expect(component).toMatchSnapshot(); }); describe('props', () => { test('mobile is rendered', () => { - const component = mount( + const component = render( ); @@ -82,7 +85,7 @@ describe('EuiControlBar', () => { }); test('showContent is rendered', () => { - const component = mount( + const component = render( Content @@ -92,7 +95,7 @@ describe('EuiControlBar', () => { }); test('size is rendered', () => { - const component = mount( + const component = render( Content @@ -102,7 +105,7 @@ describe('EuiControlBar', () => { }); test('maxHeight is rendered', () => { - const component = mount( + const component = render( Content @@ -112,7 +115,7 @@ describe('EuiControlBar', () => { }); test('leftOffset is rendered', () => { - const component = mount( + const component = render( Content @@ -122,7 +125,7 @@ describe('EuiControlBar', () => { }); test('rightOffset is rendered', () => { - const component = mount( + const component = render( Content @@ -132,7 +135,7 @@ describe('EuiControlBar', () => { }); test('position is rendered', () => { - const component = mount( + const component = render( Content diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 695129dac57..98f17ae7a06 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -46,7 +46,7 @@ exports[`EuiDataGrid pagination renders 1`] = ` Page 2 of 2 @@ -1159,7 +1159,7 @@ Array [ 0, A

    Row: 1; Column: 1

    @@ -1191,7 +1191,7 @@ Array [ 0, B

    Row: 1; Column: 2

    @@ -1223,7 +1223,7 @@ Array [ 1, A

    Row: 2; Column: 1

    @@ -1255,7 +1255,7 @@ Array [ 1, B

    Row: 2; Column: 2

    @@ -1287,7 +1287,7 @@ Array [ 2, A

    Row: 3; Column: 1

    @@ -1319,7 +1319,7 @@ Array [ 2, B

    Row: 3; Column: 2

    @@ -1636,7 +1636,7 @@ Array [ 0

    Row: 1; Column: 1

    @@ -1674,7 +1674,7 @@ Array [ 0, A

    Row: 1; Column: 2

    @@ -1706,7 +1706,7 @@ Array [ 0, B

    Row: 1; Column: 3

    @@ -1751,7 +1751,7 @@ Array [ 0

    Row: 1; Column: 4

    @@ -1802,7 +1802,7 @@ Array [ 1

    Row: 2; Column: 1

    @@ -1840,7 +1840,7 @@ Array [ 1, A

    Row: 2; Column: 2

    @@ -1872,7 +1872,7 @@ Array [ 1, B

    Row: 2; Column: 3

    @@ -1917,7 +1917,7 @@ Array [ 1

    Row: 2; Column: 4

    @@ -1968,7 +1968,7 @@ Array [ 2

    Row: 3; Column: 1

    @@ -2006,7 +2006,7 @@ Array [ 2, A

    Row: 3; Column: 2

    @@ -2038,7 +2038,7 @@ Array [ 2, B

    Row: 3; Column: 3

    @@ -2083,7 +2083,7 @@ Array [ 2

    Row: 3; Column: 4

    @@ -2354,7 +2354,7 @@ Array [ 0, A

    Row: 1; Column: 1

    @@ -2386,7 +2386,7 @@ Array [ 0, B

    Row: 1; Column: 2

    @@ -2418,7 +2418,7 @@ Array [ 1, A

    Row: 2; Column: 1

    @@ -2450,7 +2450,7 @@ Array [ 1, B

    Row: 2; Column: 2

    @@ -2482,7 +2482,7 @@ Array [ 2, A

    Row: 3; Column: 1

    @@ -2514,7 +2514,7 @@ Array [ 2, B

    Row: 3; Column: 2

    @@ -2777,7 +2777,7 @@ Array [ 0, A

    Row: 1; Column: 1

    @@ -2809,7 +2809,7 @@ Array [ 0, B

    Row: 1; Column: 2

    @@ -2841,7 +2841,7 @@ Array [ 1, A

    Row: 2; Column: 1

    @@ -2873,7 +2873,7 @@ Array [ 1, B

    Row: 2; Column: 2

    @@ -2905,7 +2905,7 @@ Array [ 2, A

    Row: 3; Column: 1

    @@ -2937,7 +2937,7 @@ Array [ 2, B

    Row: 3; Column: 2

    diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap index 4b0c6d49d8f..cb8fd58f1ff 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap @@ -127,7 +127,7 @@ exports[`EuiDataGridBody renders 1`] = `

    Row: 1; Column: 1

    @@ -161,7 +161,7 @@ exports[`EuiDataGridBody renders 1`] = `

    Row: 1; Column: 2

    diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap index e8f2afac7be..793bcaf028b 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap @@ -37,170 +37,47 @@ Array [ `; exports[`EuiDataGridCell renders 1`] = ` -
    - -
    + + - -
    - -
    - -

    - Row: 1; Column: 1 -

    -     - + world + +
    +

    + Row: 1; Column: 1 +

    -     + `; diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx index 2b33f201eea..e17973a670d 100644 --- a/src/components/datagrid/body/data_grid_cell.test.tsx +++ b/src/components/datagrid/body/data_grid_cell.test.tsx @@ -44,7 +44,7 @@ describe('EuiDataGridCell', () => { beforeEach(() => jest.clearAllMocks()); it('renders', () => { - const component = mount(); + const component = render(); expect(component).toMatchSnapshot(); }); diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index beb97537b57..097ce577398 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -1,1190 +1,33 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popover allowing users to set column visibility and order 1`] = ` - - - - - } - closePopover={[Function]} - data-test-subj="dataGridColumnSelectorPopover" - display="inlineBlock" - hasArrow={true} - isOpen={true} - ownFocus={true} - panelClassName="euiDataGrid__controlPopoverWithDragDrop" - panelPaddingSize="s" +
    -
    -
    - - - -
    - - -
    -
    -
    -