diff --git a/src/components/accessibility/_index.scss b/src/components/accessibility/_index.scss deleted file mode 100644 index 0e3753cf935..00000000000 --- a/src/components/accessibility/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'screen_reader_only/screen_reader_only'; 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..f69ffba8254 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..b96c8872fdc 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/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 59668a92479..11fd550445b 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 @@ -6,6 +6,8 @@ * Side Public License, v 1. */ +import { css } from '@emotion/react'; + /* * Mixin that hides elements offscreen to only be read by screen reader * See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info @@ -28,3 +30,17 @@ export const euiScreenReaderOnly = () => ` // Chrome requires the negative margin to not cause overflows of parent containers margin: -1px; `; + +/* + * Styles + */ +export const euiScreenReaderOnlyStyles = (showOnFocus?: boolean) => ({ + euiScreenReaderOnly: showOnFocus + ? css` + // The :active selector is necessary for Safari which removes :focus when a button is pressed + &:not(:focus):not(:active) { + ${euiScreenReaderOnly()} + } + ` + : 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..2893915e6d3 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,39 @@ * 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, }) => { - const classes = classNames( - { - euiScreenReaderOnly: !showOnFocus, - 'euiScreenReaderOnly--showOnFocus': showOnFocus, - }, - children.props.className - ); + const classes = classNames(className, children.props.className); + + const styles = euiScreenReaderOnlyStyles(showOnFocus); + const cssStyles = [styles.euiScreenReaderOnly]; const props = { - ...children.props, - className: classes, + className: classes.length ? classes : undefined, + css: cssStyles, }; - return cloneElement(children, props); + return cloneElementWithCss(children, props); }; 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 54a9ea2440a..a6951307e41 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 81dff0efe63..f5203d52f04 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 57a96b7500e..bb6baeba7da 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..4544cf7a5cb 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..111239c80f3 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..3f8302aeb0d 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..b1ffd255ede 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..401ed98ecc8 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 c05dbff3287..1b7552dd1aa 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 57cd4dc2c48..6ee92c0d201 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 @@ -1158,7 +1158,7 @@ Array [ 0, A

    Row: 1; Column: 1

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

    Row: 1; Column: 2

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

    Row: 2; Column: 1

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

    Row: 2; Column: 2

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

    Row: 3; Column: 1

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

    Row: 3; Column: 2

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

    Row: 1; Column: 1

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

    Row: 1; Column: 2

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

    Row: 1; Column: 3

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

    Row: 1; Column: 4

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

    Row: 2; Column: 1

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

    Row: 2; Column: 2

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

    Row: 2; Column: 3

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

    Row: 2; Column: 4

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

    Row: 3; Column: 1

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

    Row: 3; Column: 2

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

    Row: 3; Column: 3

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

    Row: 3; Column: 4

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

    Row: 1; Column: 1

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

    Row: 1; Column: 2

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

    Row: 2; Column: 1

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

    Row: 2; Column: 2

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

    Row: 3; Column: 1

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

    Row: 3; Column: 2

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

    Row: 1; Column: 1

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

    Row: 1; Column: 2

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

    Row: 2; Column: 1

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

    Row: 2; Column: 2

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

    Row: 3; Column: 1

    @@ -2907,7 +2907,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 a080a115d1c..216a98d3640 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 @@ -126,7 +126,7 @@ exports[`EuiDataGridBody renders 1`] = `

    Row: 1; Column: 1

    @@ -159,7 +159,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 da349c1dc3f..2dd1c510819 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,169 +37,46 @@ 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 f2a76b0a2d9..5bc42cc1cca 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -49,7 +49,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov style="left: 10px; top: 0px;" />

    You are in a dialog. To close this dialog, hit escape. diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 1e88f1a3b1c..79bbd78887f 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -49,7 +49,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover style="left: 10px; top: 0px;" />

    You are in a dialog. To close this dialog, hit escape. @@ -82,7 +82,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover class="euiDataGridColumnSorting__item false euiDraggable__item" >

    Column A is sorting this data grid

    @@ -136,7 +136,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text euiButtonGroup--fullWidth euiDataGridColumnSorting__order" > Select sorting method for Column A diff --git a/src/components/datagrid/utils/ref.spec.tsx b/src/components/datagrid/utils/ref.spec.tsx index a9e6fc22123..af33ad4a9d0 100644 --- a/src/components/datagrid/utils/ref.spec.tsx +++ b/src/components/datagrid/utils/ref.spec.tsx @@ -99,7 +99,7 @@ describe('useImperativeGridRef', () => { it('should paginate to cells that are not on the current page', () => { ref.current.setFocusedCell({ rowIndex: 50, colIndex: 0 }); - cy.get('.euiPagination .euiScreenReaderOnly').should( + cy.get('.euiPagination [class*="euiScreenReaderOnly"]').should( 'have.text', 'Page 3 of 4' ); @@ -148,7 +148,7 @@ describe('useImperativeGridRef', () => { it('should paginate to cells that are not on the current page', () => { ref.current.openCellPopover({ rowIndex: 99, colIndex: 5 }); - cy.get('.euiPagination .euiScreenReaderOnly').should( + cy.get('.euiPagination [class*="euiScreenReaderOnly"]').should( 'have.text', 'Page 4 of 4' ); diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap index dfd1c41262d..20a54a7fd88 100644 --- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap @@ -189,7 +189,7 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = ` tabindex="0" >
    ,

    State: unchanged. @@ -120,666 +120,117 @@ Array [ `; exports[`EuiSuggest props isVirtualized 1`] = ` - -

    - - - [Function] - - - } - isOpen={false} - panelPaddingSize="none" - panelProps={ - Object { - "aria-live": undefined, - "aria-modal": false, - "role": undefined, - } - } - panelRef={[Function]} +
    - - [Function] - - } - buttonRef={[Function]} - className="euiInputPopover euiInputPopover--fullWidth euiInputPopover euiInputPopover--fullWidth" - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={false} - panelPaddingSize="none" - panelProps={ - Object { - "aria-live": undefined, - "aria-modal": false, - "role": undefined, - } - } - panelRef={[Function]} - > - +
    +
    - -
    - - - - -
    -
    - - - - -
    - - - - - -
    -     -
    -
    -     -     -     -     -
    -     +
    - - - +
    +
    +
    - - -

    - State: unchanged. -

    -     - + , +

    + State: unchanged. +

    , +] `; exports[`EuiSuggest props maxHeight 1`] = ` - -
    - - - [Function] - - - } - isOpen={false} - panelPaddingSize="none" - panelProps={ - Object { - "aria-live": undefined, - "aria-modal": false, - "role": undefined, - } - } - panelRef={[Function]} +
    - - [Function] - - } - buttonRef={[Function]} - className="euiInputPopover euiInputPopover--fullWidth euiInputPopover euiInputPopover--fullWidth" - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={false} - panelPaddingSize="none" - panelProps={ - Object { - "aria-live": undefined, - "aria-modal": false, - "role": undefined, - } - } - panelRef={[Function]} - > - +
    +
    - -
    - - - - -
    -
    - - - - -
    - - - - - -
    -     -
    -
    -     -     -     -     -
    -     +
    - - - +
    +
    +
    -     - -

    - State: unchanged. -

    -     -     + , +

    + State: unchanged. +

    , +] `; exports[`EuiSuggest props options common 1`] = ` @@ -831,7 +282,7 @@ Array [ ,

    State: unchanged. @@ -888,7 +339,7 @@ Array [ ,

    State: unchanged. @@ -967,7 +418,7 @@ Array [ ,

    State: unchanged. @@ -1033,7 +484,7 @@ Array [ ,

    State: loading. @@ -1099,7 +550,7 @@ Array [ ,

    State: saved. @@ -1156,7 +607,7 @@ Array [ ,

    State: unchanged. @@ -1222,7 +673,7 @@ Array [ ,

    State: unsaved. @@ -1288,7 +739,7 @@ Array [ ,

    State: loading. @@ -1354,7 +805,7 @@ Array [ ,

    State: saved. @@ -1411,7 +862,7 @@ Array [ ,

    State: unchanged. @@ -1477,7 +928,7 @@ Array [ ,

    State: unsaved. diff --git a/src/components/suggest/suggest.test.tsx b/src/components/suggest/suggest.test.tsx index 79185c42195..f9f0e81a1e9 100644 --- a/src/components/suggest/suggest.test.tsx +++ b/src/components/suggest/suggest.test.tsx @@ -7,7 +7,7 @@ */ import React from 'react'; -import { render, mount, shallow } from 'enzyme'; +import { render, shallow } from 'enzyme'; import { requiredProps } from '../../test/required_props'; import { EuiSelectable } from '../selectable'; @@ -83,7 +83,7 @@ describe('EuiSuggest', () => { }); test('isVirtualized', () => { - const component = mount( + const component = render( { }); test('maxHeight', () => { - const component = mount( + const component = render( Page 2 of 5 @@ -210,7 +210,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = ` Page 2 of 5 diff --git a/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap b/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap index f27abec9846..82e6dba2261 100644 --- a/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap +++ b/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap @@ -22,7 +22,7 @@ exports[`EuiGlobalToastList props side can be changed to left 1`] = ` id="a" >

    A new notification appears

    @@ -65,7 +65,7 @@ exports[`EuiGlobalToastList props side can be changed to left 1`] = ` id="b" >

    A new notification appears

    @@ -117,7 +117,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = ` id="a" >

    A new notification appears

    @@ -160,7 +160,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = ` id="b" >

    A new notification appears

    diff --git a/src/components/toast/__snapshots__/toast.test.tsx.snap b/src/components/toast/__snapshots__/toast.test.tsx.snap index 72bc6d3ef51..931659f079d 100644 --- a/src/components/toast/__snapshots__/toast.test.tsx.snap +++ b/src/components/toast/__snapshots__/toast.test.tsx.snap @@ -1,255 +1,146 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiToast Props color danger is rendered 1`] = ` - +

    + A new notification appears +

    - -

    - - A new notification appears - -

    -     - -
    - - test title - -
    -     + test title +
    -     + `; exports[`EuiToast Props color primary is rendered 1`] = ` - +

    + A new notification appears +

    - -

    - - A new notification appears - -

    -     - -
    - - test title - -
    -     + test title +
    -     + `; exports[`EuiToast Props color success is rendered 1`] = ` - +

    + A new notification appears +

    - -

    - - A new notification appears - -

    -     - -
    - - test title - -
    -     + test title +
    -     + `; exports[`EuiToast Props color warning is rendered 1`] = ` - +

    + A new notification appears +

    - -

    - - A new notification appears - -

    -     - -
    - - test title - -
    -     + test title +
    -     + `; exports[`EuiToast Props iconType is rendered 1`] = ` - +

    + A new notification appears +

    - -

    - - A new notification appears - -

    -     - + test title +
    -     + `; exports[`EuiToast Props title is rendered 1`] = ` - +

    + A new notification appears +

    - -

    - - A new notification appears - -

    -     - -
    - - toast title - -
    -     + toast title +
    -     + `; exports[`EuiToast is rendered 1`] = ` @@ -259,7 +150,7 @@ exports[`EuiToast is rendered 1`] = ` data-test-subj="test subject string" >

    A new notification appears

    diff --git a/src/components/toast/toast.test.tsx b/src/components/toast/toast.test.tsx index cff53fb9a1d..5ded1fabb68 100644 --- a/src/components/toast/toast.test.tsx +++ b/src/components/toast/toast.test.tsx @@ -27,7 +27,7 @@ describe('EuiToast', () => { describe('title', () => { test('is rendered', () => { const component = ; - expect(mount(component)).toMatchSnapshot(); + expect(render(component)).toMatchSnapshot(); }); }); @@ -35,7 +35,7 @@ describe('EuiToast', () => { COLORS.forEach((color) => { test(`${color} is rendered`, () => { const component = ; - expect(mount(component)).toMatchSnapshot(); + expect(render(component)).toMatchSnapshot(); }); }); }); @@ -43,7 +43,7 @@ describe('EuiToast', () => { describe('iconType', () => { test('is rendered', () => { const component = ; - expect(mount(component)).toMatchSnapshot(); + expect(render(component)).toMatchSnapshot(); }); }); diff --git a/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap b/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap index edc4af4fe73..28bff5d50df 100644 --- a/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap +++ b/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap @@ -5,7 +5,7 @@ exports[`EuiTreeView is rendered 1`] = ` class="euiText euiTreeView__wrapper emotion-euiText-m" >

    You can quickly navigate this list using arrow keys. diff --git a/src/global_styling/utility/utility.tsx b/src/global_styling/utility/utility.tsx index 9c590485f66..72d7bf31a7d 100644 --- a/src/global_styling/utility/utility.tsx +++ b/src/global_styling/utility/utility.tsx @@ -9,4 +9,11 @@ import React from 'react'; import { Global, css } from '@emotion/react'; -export const EuiUtilityClasses = () => ; +import { euiScreenReaderOnly } from '../../components/accessibility/screen_reader_only/screen_reader_only.styles'; + +const globalStyles = css` + .euiScreenReaderOnly { + ${euiScreenReaderOnly()} + } +`; +export const EuiUtilityClasses = () => ; diff --git a/upcoming_changelogs/5846.md b/upcoming_changelogs/5846.md new file mode 100644 index 00000000000..ba17dcf9a0c --- /dev/null +++ b/upcoming_changelogs/5846.md @@ -0,0 +1,3 @@ +**CSS-in-JS conversions** + +- Converted `EuiScreenReaderOnly` to Emotion \ No newline at end of file