diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index 758b51cbac6..22a2a33aea2 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -402,6 +402,13 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => { {humanizedName} (required) ); + } else if (state[name].description?.includes('@deprecated')) { + humanizedName = ( + <> + {humanizedName}{' '} + (deprecated) + + ); } /** diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index 073e4bfe9b2..5fd31c9d627 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -171,30 +171,26 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiTableSortMobile" >
-
- -
+ + +
@@ -773,33 +769,29 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiFlexItem emotion-euiFlexItem-growZero" >
-
- -
+ + +
-
- - - -
+
`; diff --git a/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap b/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap index 5afd7642a41..5701654bb93 100644 --- a/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap @@ -12,33 +12,29 @@ exports[`PaginationBar renders 1`] = ` class="euiFlexItem emotion-euiFlexItem-growZero" >
-
- -
+ + +
-
- -
+ - Clicking this button will toggle a popover dialog. + +
-
- -
+ … + + + + - Clicking this button will toggle a popover dialog. + +
  • -
    - -
    + - Clicking this button will toggle a popover dialog. + +
  • -
    - -
    + - Clicking this button will toggle a popover dialog. + +
  • -
    - -
    + … + + + + - Clicking this button will toggle a popover dialog. + +
  • -
    - -
    + - Clicking this button will toggle a popover dialog. + +
  • -
    - -
    + - Clicking this button will toggle a popover dialog. + +
  • -
    - -
    + +
    -
    - -
    + +
    -
    - - - -
    +
    `; diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap index d930c29eb00..995c41af0b3 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap +++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap @@ -2,30 +2,26 @@ exports[`EuiCollapsedNavItem renders a popover if items exist 1`] = `
    -
    - - - -
    +
    `; diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap index adbd5df22ba..406b8b75d33 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap +++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap @@ -4,30 +4,26 @@ exports[`EuiCollapsedNavPopover renders the title and sub-items within the popov
    -
    - - - -
    +
    -
    - -
    - - + +
    + - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -56,62 +52,58 @@ exports[`renders EuiColorPicker 1`] = ` exports[`renders EuiColorPicker with a clearable input 1`] = `
    -
    - -
    - - + +
    + - -
    + class="euiFormControlLayoutClearButton__icon" + data-euiicon-type="cross" + /> + + +
    @@ -120,52 +112,48 @@ exports[`renders EuiColorPicker with a clearable input 1`] = ` exports[`renders EuiColorPicker with a color swatch when color is defined 1`] = `
    -
    - -
    - - + +
    + - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -174,53 +162,49 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] = exports[`renders EuiColorPicker with a custom placeholder 1`] = `
    -
    - -
    - - + +
    + - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -229,53 +213,49 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = ` exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
    -
    - -
    - - + +
    + - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -284,53 +264,49 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = ` exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
    -
    - -
    - - + +
    + - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -339,116 +315,108 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = ` exports[`renders a EuiColorPicker with a prepend and append 1`] = `
    +
    -
    -
    - -
    - - + +
    + - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    -
    +
    `; exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
    -
    - -
    - - + +
    + - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -457,52 +425,48 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = ` exports[`renders compressed EuiColorPicker 1`] = `
    -
    - -
    - - + +
    + - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -511,41 +475,37 @@ exports[`renders compressed EuiColorPicker 1`] = ` exports[`renders disabled EuiColorPicker 1`] = `
    -
    - -
    - + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + color="rgb(255,238,221)" + data-euiicon-type="swatchInput" + /> +
    +
    @@ -553,52 +513,48 @@ exports[`renders disabled EuiColorPicker 1`] = ` exports[`renders fullWidth EuiColorPicker 1`] = `
    -
    - -
    - - + +
    + - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -779,41 +735,37 @@ exports[`renders inline EuiColorPicker 1`] = ` exports[`renders readOnly EuiColorPicker 1`] = `
    -
    - -
    - + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + color="rgb(255,238,221)" + data-euiicon-type="swatchInput" + /> +
    +
    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 d07cfa458eb..2b60ef54598 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 @@ -2,41 +2,37 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
    +
    -
    +
    @@ -45,43 +41,39 @@ exports[`EuiColorPalettePicker is rendered 1`] = ` exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
    +
    -
    +
    - -
    - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -90,71 +82,67 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = ` exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
    +
    -
    -
    - -
    + + +
    + +
    @@ -163,51 +151,47 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = ` exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`] = `
    +
    -
    +
    - -
    - - -
    +
    @@ -216,51 +200,47 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`] exports[`EuiColorPalettePicker is rendered with a selected gradient palette with stops 1`] = `
    +
    -
    +
    - -
    - - -
    +
    @@ -269,43 +249,39 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as title 1`] = `
    +
    -
    +
    - -
    - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -314,70 +290,66 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
    +
    -
    -
    - -
    + + +
    + +
    diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap index fa570cd0649..1c51c90c320 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap @@ -6,53 +6,49 @@ exports[`EuiComboBox renders 1`] = ` data-test-subj="test subject string" >
    - +
    +
    -
    - -
    +
    @@ -68,52 +64,48 @@ exports[`EuiComboBox renders the options list dropdown 1`] = ` data-test-subj="alsoGetsAppliedToOptionsList" >
    -
    +
    +
    +
    -
    - -
    +
    diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 1955c97a301..b6dc51f0c29 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -8,31 +8,27 @@ exports[`EuiDataGrid pagination renders 1`] = ` class="euiFlexItem emotion-euiFlexItem-growZero" >
    -
    - -
    + + +
    -
    - -
    + +
    - -
    +
    -
    - - - -
    +
    -
    - -
    + A +
    + +
    -
    - -
    + B +
    + +
    -
    - -
    + +
    - -
    +
    -
    - - - -
    +
    -
    - -
    + A +
    + +
    -
    - -
    + B +
    + +
    -
    - -
    + +
    -
    - - - -
    +
    -
    - - - -
    +
    -
    - -
    + Column A +
    + +
    -
    - -
    +
    + +
    -
    - -
    + +
    -
    - - - -
    +
    -
    - - - -
    +
    -
    - -
    + A +
    + +
    -
    - -
    + B +
    + +
    -
    - -
    + columnA +
    + +
    -
    - -
    + columnB +
    + +
    -
    - -
    + columnA +
    + +
    -
    - -
    + columnB +
    + +
    -
    - -
    + someColumn +
    + +
    - -
    + +
    `; @@ -297,32 +293,28 @@ exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar b exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
    -
    - -
    + +
    `; @@ -592,32 +584,28 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar button/popover allowing users to set column visibility and order 1`] = `
    -
    - -
    + +
    `; 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 bca6d1dc934..1db65212337 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -2,32 +2,28 @@ exports[`useDataGridColumnSorting columnSorting [React 16] renders a toolbar button/popover allowing users to set column sorting 1`] = `
    -
    - -
    + +
    `; @@ -237,32 +233,28 @@ exports[`useDataGridColumnSorting columnSorting [React 16] renders a toolbar but class="euiFlexItem emotion-euiFlexItem-growZero" >
    -
    - -
    + + +
    -
    - -
    + +
    `; @@ -527,32 +515,28 @@ exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar but class="euiFlexItem emotion-euiFlexItem-growZero" >
    -
    - -
    + + +
    • -
    - -
    + +
    `; @@ -817,32 +797,28 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but class="euiFlexItem emotion-euiFlexItem-growZero" >
    -
    - -
    + + +
    -
    - - - -
    +
    @@ -260,30 +256,26 @@ exports[`useDataGridKeyboardShortcuts [React 17] returns a popover containing a data-test-subj="hookRoot" >
    -
    - - - -
    +
    @@ -514,30 +506,26 @@ exports[`useDataGridKeyboardShortcuts [React 18] returns a popover containing a data-test-subj="hookRoot" >
    -
    - - - -
    +
    diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index c6c48e0fa77..9b60bccf9c4 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -111,12 +111,11 @@ function openColumnSorterSelection(datagrid: ReactWrapper) { 'EuiPopover[data-test-subj="dataGridColumnSortingPopoverColumnSelection"]' ); expect(columnSelectionPopover).not.euiPopoverToBeOpen(); - const popoverButton = columnSelectionPopover - .find('div[className~="euiPopover__anchor"]') - .find('[onClick]') - .first(); - // @ts-ignore onClick is known to exist, and does not require an argument in this usage - act(() => popoverButton.props().onClick()); + act(() => { + columnSelectionPopover + .find('button[data-test-subj="dataGridColumnSortingSelectionButton"]') + .simulate('click'); + }); datagrid.update(); @@ -136,12 +135,11 @@ function closeColumnSorterSelection(datagrid: ReactWrapper) { if (columnSelectionPopover.length > 0) { expect(columnSelectionPopover).euiPopoverToBeOpen(); - const popoverButton = columnSelectionPopover - .find('div[className~="euiPopover__anchor"]') - .find('[onClick]') - .first(); - // @ts-ignore onClick is known to exist, and does not require an argument in this usage - act(() => popoverButton.props().onClick()); + act(() => { + columnSelectionPopover + .find('button[data-test-subj="dataGridColumnSortingSelectionButton"]') + .simulate('click'); + }); datagrid.update(); @@ -206,12 +204,11 @@ function openColumnSorter(datagrid: ReactWrapper) { ); expect(popover).not.euiPopoverToBeOpen(); - const popoverButton = popover - .find('div[className~="euiPopover__anchor"]') - .find('[onClick]') - .first(); - // @ts-ignore onClick is known to exist, and does not require an argument in this usage - act(() => popoverButton.props().onClick()); + act(() => { + popover + .find('button[data-test-subj="dataGridColumnSortingButton"]') + .simulate('click'); + }); datagrid.update(); @@ -229,12 +226,11 @@ function closeColumnSorter(datagrid: ReactWrapper) { ); expect(popover).euiPopoverToBeOpen(); - const popoverButton = popover - .find('div[className~="euiPopover__anchor"]') - .find('[onClick]') - .first(); - // @ts-ignore onClick is known to exist, and does not require an argument in this usage - act(() => popoverButton.props().onClick()); + act(() => { + popover + .find('button[data-test-subj="dataGridColumnSortingButton"]') + .simulate('click'); + }); datagrid.update(); @@ -334,12 +330,11 @@ function openColumnSelector(datagrid: ReactWrapper) { ); expect(popover).not.euiPopoverToBeOpen(); - const popoverButton = popover - .find('div[className~="euiPopover__anchor"]') - .find('[onClick]') - .first(); - // @ts-ignore onClick is known to exist, and does not require an argument in this usage - act(() => popoverButton.props().onClick()); + act(() => { + popover + .find('button[data-test-subj="dataGridColumnSelectorButton"]') + .simulate('click'); + }); datagrid.update(); @@ -357,12 +352,11 @@ function closeColumnSelector(datagrid: ReactWrapper) { ); expect(popover).euiPopoverToBeOpen(); - const popoverButton = popover - .find('div[className~="euiPopover__anchor"]') - .find('[onClick]') - .first(); - // @ts-ignore onClick is known to exist, and does not require an argument in this usage - act(() => popoverButton.props().onClick()); + act(() => { + popover + .find('button[data-test-subj="dataGridColumnSelectorButton"]') + .simulate('click'); + }); datagrid.update(); @@ -403,12 +397,11 @@ function moveColumnToIndex( ); expect(popover).not.euiPopoverToBeOpen(); - let popoverButton = popover - .find('div[className~="euiPopover__anchor"]') - .find('[onClick]') - .first(); - // @ts-ignore onClick is known to exist, and does not require an argument in this usage - act(() => popoverButton.props().onClick()); + act(() => { + popover + .find('button[data-test-subj="dataGridColumnSelectorButton"]') + .simulate('click'); + }); datagrid.update(); @@ -438,12 +431,11 @@ function moveColumnToIndex( ); expect(popover).euiPopoverToBeOpen(); - popoverButton = popover - .find('div[className~="euiPopover__anchor"]') - .find('[onClick]') - .first(); - // @ts-ignore onClick is known to exist, and does not require an argument in this usage - act(() => popoverButton.props().onClick()); + act(() => { + popover + .find('button[data-test-subj="dataGridColumnSelectorButton"]') + .simulate('click'); + }); datagrid.update(); 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 e6b9a6ecbbe..e75a831f061 100644 --- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap @@ -830,21 +830,17 @@ exports[`EuiDatePicker renders 1`] = `
    -
    - -
    +
    diff --git a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap index bf4a44442ee..68e649270f8 100644 --- a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap @@ -26,21 +26,17 @@ exports[`EuiDatePickerRange is rendered 1`] = `
    -
    - -
    +
    -
    - -
    +
    @@ -99,21 +91,17 @@ exports[`EuiDatePickerRange props compressed 1`] = `
    -
    - -
    +
    -
    - -
    +
    @@ -172,22 +156,18 @@ exports[`EuiDatePickerRange props disabled 1`] = `
    -
    - -
    +
    -
    - -
    +
    @@ -247,21 +223,17 @@ exports[`EuiDatePickerRange props fullWidth 1`] = `
    -
    - -
    +
    -
    - -
    +
    @@ -1226,22 +1194,18 @@ exports[`EuiDatePickerRange props isInvalid 1`] = `
    -
    - -
    +
    -
    - -
    +
    -
    - -
    +
    -
    - -
    +
    -
    - -
    +
    -
    - -
    +
    @@ -1468,21 +1412,17 @@ exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = `
    -
    - -
    +
    -
    - -
    +
    diff --git a/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap b/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap index d8ff3642f68..5fc2252abd1 100644 --- a/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap +++ b/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap @@ -2,161 +2,58 @@ exports[`EuiAutoRefresh is rendered 1`] = `
    -
    - -
    - -
    -
    -
    -
    -`; - -exports[`EuiAutoRefresh isPaused is false 1`] = ` -
    -
    -
    - -
    - -
    -
    -
    -
    -`; - -exports[`EuiAutoRefresh refreshInterval is rendered 1`] = ` -
    -
    + +
    - -
    - -
    +
    `; -exports[`EuiAutoRefreshButton is rendered 1`] = ` +exports[`EuiAutoRefresh isPaused is false 1`] = `
    +
    + +
    `; -exports[`EuiAutoRefreshButton isPaused is false 1`] = ` +exports[`EuiAutoRefresh refreshInterval is rendered 1`] = `
    +
    + +
    `; +exports[`EuiAutoRefreshButton is rendered 1`] = ` +
    + +
    +`; + +exports[`EuiAutoRefreshButton isPaused is false 1`] = ` +
    + +
    +`; + exports[`EuiAutoRefreshButton refreshInterval is rendered 1`] = `
    -
    - -
    + +
    `; diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap index b3841a15267..a40073d0d57 100644 --- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap +++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap @@ -9,35 +9,31 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo class="euiFormControlLayout euiFormControlLayout--group" >
    -
    - -
    + + +
    -
    - -
    + + +
    -
    - -
    - -
    + + +
    +
    @@ -203,49 +191,45 @@ exports[`EuiSuperDatePicker props isAutoRefreshOnly passes required props 1`] = data-test-subj="autoRefreshOnly" >
    -
    - -
    - -
    + + +
    +
    @@ -275,36 +259,32 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = ` disabled="" >
    -
    - -
    + + +
    -
    - -
    + + +
    -
    - -
    + + +
    -
    - -
    + + +
    -
    - -
    + + +
    -
    - -
    + + +
    -
    - -
    + + +
    -
    - -
    + + +
    -
    - -
    + ~ 15 minutes ago +
    -
    - -
    + now +
    diff --git a/src/components/date_picker/super_date_picker/date_popover/__snapshots__/date_popover_button.test.tsx.snap b/src/components/date_picker/super_date_picker/date_popover/__snapshots__/date_popover_button.test.tsx.snap index 2a37b7b6e7a..ac597bcbf18 100644 --- a/src/components/date_picker/super_date_picker/date_popover/__snapshots__/date_popover_button.test.tsx.snap +++ b/src/components/date_picker/super_date_picker/date_popover/__snapshots__/date_popover_button.test.tsx.snap @@ -3,18 +3,14 @@ exports[`EuiSuperUpdateButton renders 1`] = `
    -
    -
    +
    `; diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap index df75cb87606..c1be9589f98 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap +++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap @@ -426,34 +426,30 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel exports[`EuiQuickSelectPopover is rendered 1`] = `
    -
    - -
    + + +
    `; diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss index 3454f08296f..e103f641d38 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss +++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss @@ -29,10 +29,6 @@ gap: $euiSizeXS; } -.euiQuickSelectPopover__anchor { - height: 100%; -} - .euiQuickSelectPopover__sectionItem { font-size: $euiFontSizeS; line-height: $euiFontSizeS; diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index 8da9a4518fd..b6cd055e3bd 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -110,7 +110,6 @@ export const EuiQuickSelectPopover: FunctionComponent< isOpen={isOpen} closePopover={closePopover} anchorPosition="downLeft" - anchorClassName="euiQuickSelectPopover__anchor" > { ${euiFilterButtonDisplay(euiThemeContext)} } /* Force popover anchors to expand */ - .euiPopover__anchor { - display: block; - - .euiFilterButton { - ${logicalCSS('width', '100%')} - } + .euiPopover > .euiFilterButton { + ${logicalCSS('width', '100%')} } ${euiBreakpoint(euiThemeContext, ['xs', 's'])} { diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss index dcd8d2b0ca1..b0b41443cf1 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -49,7 +49,6 @@ // Force the stretch of any children so they expand the full height of the control > *, - .euiPopover__anchor, .euiButtonEmpty, .euiText, .euiFormLabel, diff --git a/src/components/form/range/__snapshots__/range.test.tsx.snap b/src/components/form/range/__snapshots__/range.test.tsx.snap index 565b5165668..b096d5f964f 100644 --- a/src/components/form/range/__snapshots__/range.test.tsx.snap +++ b/src/components/form/range/__snapshots__/range.test.tsx.snap @@ -341,38 +341,34 @@ exports[`EuiRange props levels should render 1`] = ` exports[`EuiRange props loading should display when showInput="inputWithPopover" 1`] = `
    +
    - -
    - -
    @@ -414,30 +410,26 @@ exports[`EuiRange props slider should display in popover 1`] = `
    -
    - -
    +
    diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap index 33d7f3423b6..df8c091c2b0 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap @@ -2,41 +2,37 @@ exports[`EuiSuperSelect is rendered 1`] = `
    +
    -
    +
    @@ -45,41 +41,37 @@ exports[`EuiSuperSelect is rendered 1`] = ` exports[`EuiSuperSelect props compressed is rendered 1`] = `
    +
    -
    +
    @@ -88,40 +80,36 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = ` exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
    +
    -
    +
    @@ -219,41 +207,37 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = ` exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
    +
    -
    +
    @@ -262,95 +246,87 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = ` exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
    +
    - +
    - +
    -
    +
    `; exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
    +
    -
    +
    - -
    - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -451,40 +427,36 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = ` exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
    +
    -
    +
    @@ -582,42 +554,38 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = ` exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover 1`] = `
    +
    -
    +
    - -
    - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    @@ -716,39 +684,35 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover exports[`EuiSuperSelect props select component is rendered 1`] = `
    +
    -
    +
    @@ -757,41 +721,37 @@ exports[`EuiSuperSelect props select component is rendered 1`] = ` exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
    +
    -
    +
    - -
    - -
    + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="arrowDown" + /> +
    diff --git a/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap b/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap index 2b22af0a5a6..3551a61bd08 100644 --- a/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap +++ b/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap @@ -73,33 +73,30 @@ exports[`EuiHeaderLinks popover props is rendered 1`] = ` class="euiHeaderLinks emotion-euiHeaderLinks" >
    -
    - -
    + +
    `; diff --git a/src/components/header/header_links/header_links.test.tsx b/src/components/header/header_links/header_links.test.tsx index 8bed0c85c29..43171f4ba9e 100644 --- a/src/components/header/header_links/header_links.test.tsx +++ b/src/components/header/header_links/header_links.test.tsx @@ -45,7 +45,7 @@ describe('EuiHeaderLinks', () => { iconType: 'bolt', className: 'customButtonClass', }} - popoverProps={{ anchorClassName: 'customAnchorClass' }} + popoverProps={{ 'data-test-subj': 'hello-world' }} /> ); diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap index 08847cabaf5..50a063e762d 100644 --- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap +++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap @@ -197,25 +197,21 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1 class="euiMarkdownEditorFooter__actions" />
    -
    - -
    +
    -
    -
    +
    @@ -21,14 +17,10 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = `
    -
    -
    +
    -
    -
    +
    `; exports[`EuiPopover is rendered 1`] = `
    -
    -
    +
    `; exports[`EuiPopover props anchorClassName is rendered 1`] = `
    -
    -
    +
    `; exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = `
    -
    -
    +
    `; exports[`EuiPopover props anchorPosition downRight is rendered 1`] = `
    -
    -
    +
    `; exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = `
    -
    -
    +
    `; exports[`EuiPopover props arrowChildren is rendered 1`] = `
    -
    -
    +
    +
    +
    +
    `; exports[`EuiPopover props focusTrapProps is rendered 1`] = `
    -
    -
    +
    +
    `; exports[`EuiPopover props isOpen renders true 1`] = `
    -
    -
    +
    +
    +
    +
    +
    +
    +
    -
    - -
    + + +
    diff --git a/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap b/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap index b7a21ad6566..525907f10f2 100644 --- a/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap +++ b/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap @@ -32,36 +32,32 @@ exports[`EuiSearchBarFilters render - with filters 1`] = `
    -
    - -
    + + +
    `; diff --git a/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap b/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap index 6e2641c82bf..fe816f28dfd 100644 --- a/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap +++ b/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap @@ -6,51 +6,47 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = ` data-test-subj="test subject string" >
    -
    - -
    - + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
    +
    -

    - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

    +

    + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

    `; @@ -60,51 +56,47 @@ exports[`EuiSelectableTemplateSitewide props popoverButton is not rendered with class="euiSelectable euiSelectableTemplateSitewide" >
    -
    - -
    - + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
    +
    -

    - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

    +

    + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

    `; @@ -114,15 +106,11 @@ exports[`EuiSelectableTemplateSitewide props popoverButton is rendered 1`] = ` class="euiSelectable euiSelectableTemplateSitewide" >
    -
    - -
    +
    `; @@ -132,15 +120,11 @@ exports[`EuiSelectableTemplateSitewide props popoverButton is rendered with popo class="euiSelectable euiSelectableTemplateSitewide" >
    -
    - -
    +
    `; @@ -150,51 +134,47 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = ` class="euiSelectable euiSelectableTemplateSitewide" >
    -
    - -
    - + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
    +
    -

    - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

    +

    + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

    `; @@ -204,51 +184,47 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = ` class="euiSelectable euiSelectableTemplateSitewide" >
    -
    - -
    - + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
    +
    -

    - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

    +

    + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

    `; @@ -258,51 +234,47 @@ exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = ` class="euiSelectable euiSelectableTemplateSitewide" >
    -
    - -
    - + aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="search" + /> +
    +
    -

    - - Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. -

    +

    + + Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options. +

    `; diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap index 1463b17975f..889161c4fd5 100644 --- a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap +++ b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap @@ -5,31 +5,27 @@ exports[`EuiTableSortMobile is rendered 1`] = ` class="euiTableSortMobile testClass1 testClass2 emotion-euiTestCss" >
    -
    - -
    + + +
    `; diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap index 5f468124f99..5cf804dd3ed 100644 --- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap +++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap @@ -10,33 +10,29 @@ exports[`EuiTablePagination renders 1`] = ` class="euiFlexItem emotion-euiFlexItem-growZero" >
    -
    - -
    + + +
    -
    - - Test - -
    + + Test +
    -
    - - Test - -
    + + Test +
    `; exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
    -
    - - Test - -
    + + Test +
    -
    - - Test - -
    + + Test +
    -
    - - Test - -
    + + Test +
    -
    - - Test - -
    + + Test +
    -
    - - Test - -
    + + Test +
    { + const mockNode = document.createElement('div'); + + it('passes the node to each ref', () => { + const mockRefFn = jest.fn(); + const mockRefObj = createRef(); + + setMultipleRefs([mockRefFn, mockRefObj], mockNode); + + expect(mockRefFn).toHaveBeenCalledWith(mockNode); + expect(mockRefObj.current).toEqual(mockNode); + }); + + it('ignores undefined/falsy refs', () => { + expect(() => + setMultipleRefs([undefined, undefined], mockNode) + ).not.toThrow(); + }); +}); + +describe('useCombinedRefs', () => { + it('creates a memoized callback of setMultipleRefs that can be passed to any `ref` prop', () => { + const mockRefFn = jest.fn(); + const MockComponent = ({ consumerRef }: any) => { + const internalRef = useRef(null); + const refs = useCombinedRefs([internalRef, consumerRef]); + return
    ; + }; + render(); + + expect(mockRefFn).toHaveBeenCalledWith(expect.any(HTMLDivElement)); + }); +}); diff --git a/src/services/hooks/useCombinedRefs.ts b/src/services/hooks/useCombinedRefs.ts index 22790a76d2e..3e025a9de46 100644 --- a/src/services/hooks/useCombinedRefs.ts +++ b/src/services/hooks/useCombinedRefs.ts @@ -8,6 +8,8 @@ import { MutableRefObject, Ref, useCallback } from 'react'; +type Refs = Array | MutableRefObject | undefined>; + /* * For use when a component needs to set `ref` objects from multiple sources. * For instance, if a component accepts a `ref` prop but also needs its own @@ -15,20 +17,21 @@ import { MutableRefObject, Ref, useCallback } from 'react'; * This hook handles setting multiple `ref`s of any available `ref` type * in a single callback function. */ -export const useCombinedRefs = ( - refs: Array | MutableRefObject | undefined> -) => { - return useCallback( - (node: T) => - refs.forEach((ref) => { - if (!ref) return; +export const useCombinedRefs = (refs: Refs) => + useCallback((node: T) => setMultipleRefs(refs, node), [refs]); + +/** + * Non-hook util for setting multiple refs/ref types. + * Useful for non-functional components + */ +export const setMultipleRefs = (refs: Refs, node: T) => { + refs.forEach((ref) => { + if (!ref) return; - if (typeof ref === 'function') { - ref(node); - } else { - (ref as MutableRefObject).current = node; - } - }), - [refs] - ); + if (typeof ref === 'function') { + ref(node); + } else { + (ref as MutableRefObject).current = node; + } + }); }; diff --git a/upcoming_changelogs/7311.md b/upcoming_changelogs/7311.md new file mode 100644 index 00000000000..8f121ad07ed --- /dev/null +++ b/upcoming_changelogs/7311.md @@ -0,0 +1,5 @@ +**Deprecations** + +- `EuiPopover`: deprecated `anchorClassName`. Use `className` instead +- `EuiPopover`: deprecated `buttonRef`. Use `popoverRef` instead +- `EuiPopover`: removed extra `.euiPopover__anchor` div wrapper. Target `.euiPopover` instead if necessary