diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png new file mode 100644 index 00000000000..4485a2b5ba7 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png new file mode 100644 index 00000000000..3cc49e526b7 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png index 9b5193c7d96..3d9f07e8553 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png index 13215c321ed..adf685c4c48 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png index c2660eb1b38..115f561c333 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png index 7d3fb2048af..28a36993d7a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png index e79e57f6576..1fabca62ddc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png index 1c4dfa789a1..72062106e27 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png index 81c85e8ee02..3f7e8762949 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png index 9a0e81649d4..cfb521f37e4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png new file mode 100644 index 00000000000..eaa486f2c0d Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png index dd549126cb3..7ff07fcac2f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png index bfa99e190a6..4cf2664190a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png index 4864dbf371d..f2cf78b4da5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png index 5ce41497360..8df9aa9780f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png index 37f84eb5448..42ec4f27ce5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png index b9a38da081f..f0b3b903e4f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png new file mode 100644 index 00000000000..937a7ecd9cc Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png index 03be63076af..b1a89f991c7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png index de240518d89..fec995dd7c5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png new file mode 100644 index 00000000000..7d5dfaf063d Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png new file mode 100644 index 00000000000..0d002ca526f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png index 3f3a86e1107..43fc3920cda 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png index b28c58b387c..519a7992dfa 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png index 405298cf883..83886da58cb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png index 8f73613b183..6ff82473eab 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png index cb8b4eb2974..9a9607b0574 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png index b0223dfbd55..76ca99d9074 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png index 57cd818c303..815f24ac8ba 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png index 7cd7f7e4681..e82e830a946 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png new file mode 100644 index 00000000000..6b40ff087ac Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png index 3f850c9d448..e1ff7d8bc41 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png index 5f4115f53d8..c18a999ca4a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png index b6e46f3124b..d54fb313f73 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png index 24837b35c4f..00b83900ad4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png index 193cc213528..c37d94530f3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png index 34fbaedfb4b..a1bf9ddf1b9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png new file mode 100644 index 00000000000..ad67e7ac0af Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png index 038157528e4..b8096b8d775 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png index 5b934428063..d5b1608390e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png differ diff --git a/packages/eui/changelogs/upcoming/8174.md b/packages/eui/changelogs/upcoming/8174.md new file mode 100644 index 00000000000..1ff1c591cad --- /dev/null +++ b/packages/eui/changelogs/upcoming/8174.md @@ -0,0 +1 @@ +- Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. diff --git a/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap index c4bcc9134dc..3fc78452fba 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap +++ b/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap @@ -48,14 +48,18 @@ exports[`CollapsedItemActions custom actions 1`] = ` data-popover-open="true" data-popover-panel="true" role="dialog" - style="top: -22px; left: -16px; z-index: 2000;" + style="top: -18px; left: -16px; z-index: 2000;" tabindex="0" >
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="top: 9px; left: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="top: 9px; left: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="top: 9px; right: 100%;" + > +
+

Nav item diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap index 6fc0081a4bd..8efdac1f7ad 100644 --- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap +++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap @@ -47,14 +47,18 @@ exports[`EuiCollapsedNavPopover renders 1`] = ` data-popover-open="true" data-popover-panel="true" role="dialog" - style="top: -22px; left: 16px; z-index: 2000;" + style="top: -18px; left: 16px; z-index: 2000;" tabindex="0" >
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="top: 9px; right: 100%;" + > +
+
tooltip content diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx index da2ae883a92..5c87de9db26 100644 --- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx +++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx @@ -254,7 +254,7 @@ describe('EuiDataGridCellPopover', () => { openCellPopover('B'); cy.get('[data-test-subj="euiDataGridExpansionPopover"]') .should('have.css', 'width', '400px') - .should('have.css', 'height', '88px'); + .should('have.css', 'height', '90px'); }); it('matches the width of the column if the column width is larger than 400px', () => { @@ -270,7 +270,7 @@ describe('EuiDataGridCellPopover', () => { openCellPopover('B'); cy.get('[data-test-subj="euiDataGridExpansionPopover"]') .should('have.css', 'width', '500px') - .should('have.css', 'height', '64px'); + .should('have.css', 'height', '66px'); }); }); }); diff --git a/packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap b/packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap index 6c37e70bbda..5ed8e1084c2 100644 --- a/packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap +++ b/packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap @@ -42,14 +42,18 @@ exports[`ColumnActions renders 1`] = ` data-popover-open="true" data-popover-panel="true" role="dialog" - style="top: 23px; left: -22px; z-index: 2000;" + style="top: 23px; left: -18px; z-index: 2000;" tabindex="0" >
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+

{ `, outside: css` /* Match dropshadow */ - ${euiShadowXLarge(euiThemeContext)} + ${euiShadowXLarge(euiThemeContext, { borderAllInHighContrastMode: true })} /* Override the hover and focus transitions of buttons */ animation: none !important; /* stylelint-disable-line declaration-no-important */ `, diff --git a/packages/eui/src/components/flyout/flyout.styles.ts b/packages/eui/src/components/flyout/flyout.styles.ts index 58df36deb6c..2d469ed8c10 100644 --- a/packages/eui/src/components/flyout/flyout.styles.ts +++ b/packages/eui/src/components/flyout/flyout.styles.ts @@ -107,7 +107,7 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => { // Type overlay: css` - ${euiShadowXLarge(euiThemeContext)} + ${euiShadowXLarge(euiThemeContext, { borderAllInHighContrastMode: true })} `, push: { push: css` diff --git a/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap b/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap index 6d56644398d..b62d669abd2 100644 --- a/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap +++ b/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap @@ -454,7 +454,7 @@ exports[`EuiRange props slider should display in popover 1`] = ` data-popover-panel="true" data-test-subj="test" role="dialog" - style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;" + style="top: 0px; left: -18px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;" >

= { }, showInput: { control: 'radio', - options: [true, false, 'inputWithPopover'], + options: [false, true, 'inputWithPopover'], }, inputPopoverProps: { if: { arg: 'showInput', eq: 'inputWithPopover' }, @@ -70,7 +71,6 @@ const meta: Meta = { minInputProps: {}, maxInputProps: {}, inputPopoverProps: {}, - ticks: [], }, }; moveStorybookControlsToCategory( @@ -152,31 +152,6 @@ export const Input: Story = { render: (args) => , }; -export const InputWithPopover: Story = { - parameters: { - controls: { - include: [ - 'showInput', - 'append', - 'prepend', - 'inputPopoverProps', - 'isInvalid', - 'isLoading', - 'max', - 'min', - 'value', - 'minInputProps', - 'maxInputProps', - ], - }, - }, - args: { - value: [25, 50], - showInput: 'inputWithPopover', - }, - render: (args) => , -}; - export const Levels: Story = { parameters: { controls: { @@ -207,7 +182,7 @@ const StatefulPlayground = ({ } }, [value]); - const handelOnChange = ( + const handleOnChange = ( values: EuiDualRangeProps['value'], isValid: boolean, e?: _DualRangeChangeEvent @@ -216,5 +191,41 @@ const StatefulPlayground = ({ onChange?.(values, isValid, e); }; - return ; + return ; +}; + +/** + * VRT only + */ + +export const InputWithPopover: Story = { + tags: ['vrt-only'], + parameters: { + loki: { chromeSelector: LOKI_SELECTORS.portal }, + }, + args: { + showInput: 'inputWithPopover', + min: 0, + max: 100, + value: [10, 80], + // Should render ticks, levels, highlights, and tooltips in their correct positions + showLabels: true, + showTicks: true, + ticks: [ + { label: '20kb', value: 20 }, + { label: '100kb', value: 100 }, + ], + levels: [ + { min: 0, max: 20, color: 'danger' }, + { min: 20, max: 100, color: 'success' }, + ], + }, + // Force input popover open via programmatic ref + render: function Render(args) { + const [ref, setRef] = useState(); + useEffect(() => { + ref?.onInputFocus(); + }, [ref]); + return ; + }, }; diff --git a/packages/eui/src/components/form/range/range.spec.tsx b/packages/eui/src/components/form/range/range.spec.tsx deleted file mode 100644 index 46489c8861f..00000000000 --- a/packages/eui/src/components/form/range/range.spec.tsx +++ /dev/null @@ -1,188 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -/// -/// -/// - -import React from 'react'; - -import { EuiRange } from './range'; -import { EuiDualRange } from './dual_range'; - -const sharedProps = { - min: 0, - max: 100, - onChange: () => {}, - showTicks: true, - showLabels: true, - levels: [ - { - min: 0, - max: 20, - color: 'danger', - }, - { - min: 20, - max: 100, - color: 'success', - }, - ], -}; -const firstExpectedLevel = /^0px 256[.0-9]+px$/; -const secondExpectedLevel = /^72[.0-9]+px 0px$/; - -describe('EuiRange', () => { - const props = { - ...sharedProps, - value: 50, - showValue: true, - showRange: true, - tickInterval: 20, - }; - - // TODO: These should likely be visual snapshot regression tests instead - const assertRangePositions = () => { - // Ticks - cy.get('.euiRangeTick') - .first() - .should('have.css', 'inset-inline-start', '8px'); - cy.get('.euiRangeTick') - .eq(3) - .should('have.css', 'inset-inline-start') - .and('match', /^195[.0-9]+px$/); - cy.get('.euiRangeTick') - .last() - .should('have.css', 'inset-inline-start') - .and('match', /^320[.0-9]+px$/); - - // Levels - present in both EuiRangeLevels and EuiHighlight - cy.get('.euiRangeLevel') - .eq(0) - .should('have.css', 'inset-inline') - .and('match', firstExpectedLevel); - cy.get('.euiRangeLevel') - .eq(2) - .should('have.css', 'inset-inline') - .and('match', firstExpectedLevel); - - cy.get('.euiRangeLevel') - .eq(1) - .should('have.css', 'inset-inline') - .and('match', secondExpectedLevel); - cy.get('.euiRangeLevel') - .eq(3) - .should('have.css', 'inset-inline') - .and('match', secondExpectedLevel); - - // Highlight - cy.get('.euiRangeHighlight > div') - .should('have.css', 'margin-inline-start', '0px') - .should('have.css', 'inline-size') - .and('match', /^164[.0-9]+px$/); - - // Tooltip - cy.get('.euiRangeTooltip > output') - .should('have.css', 'inset-inline-start') - .and('match', /^156[.0-9]+px$/); - }; - - it('renders ticks, levels, highlights, and tooltips in their correct positions', () => { - cy.mount(); - assertRangePositions(); - }); - - it('inputWithPopover', () => { - cy.realMount( - - ); - cy.realPress('Tab'); - assertRangePositions(); - }); -}); - -describe('EuiDualRange', () => { - const props = { - ...sharedProps, - value: [10, 80] as [number, number], - ticks: [ - { label: '20kb', value: 20 }, - { label: '100kb', value: 100 }, - ], - }; - - // TODO: These should likely be visual snapshot regression tests instead - const assertRangePositions = () => { - // Ticks - cy.get('.euiRangeTick') - .first() - .should('have.css', 'inset-inline-start') - .and('match', /^69[.0-9]+px$/); - cy.get('.euiRangeTick') - .last() - .should('have.css', 'inset-inline-end', '0px'); - - // Levels - present in both EuiRangeLevels and EuiHighlight - cy.get('.euiRangeLevel') - .eq(0) - .should('have.css', 'inset-inline') - .and('match', firstExpectedLevel); - cy.get('.euiRangeLevel') - .eq(2) - .should('have.css', 'inset-inline') - .and('match', firstExpectedLevel); - - cy.get('.euiRangeLevel') - .eq(1) - .should('have.css', 'inset-inline') - .and('match', secondExpectedLevel); - cy.get('.euiRangeLevel') - .eq(3) - .should('have.css', 'inset-inline') - .and('match', secondExpectedLevel); - - // Highlight - cy.get('.euiRangeHighlight > div') - .should('have.css', 'margin-inline-start') - .and('match', /^32[.0-9]+px$/); - cy.get('.euiRangeHighlight > div') - .should('have.css', 'inline-size') - .and('match', /^229[.0-9]+px$/); - - // Thumbs - cy.get('.euiRangeThumb') - .first() - .should('have.css', 'inset-inline-start') - .and('match', /^31[.0-9]+px$/); - cy.get('.euiRangeThumb') - .last() - .should('have.css', 'inset-inline-start') - .and('match', /^249[.0-9]+px$/); - }; - - it('renders ticks, levels, highlights, and thumbs in their correct positions', () => { - cy.mount(); - assertRangePositions(); - }); - - it('inputWithPopover', () => { - cy.realMount( - - ); - cy.realPress('Tab'); - assertRangePositions(); - }); -}); diff --git a/packages/eui/src/components/form/range/range.stories.tsx b/packages/eui/src/components/form/range/range.stories.tsx index 1885e0afef0..1064ce772c2 100644 --- a/packages/eui/src/components/form/range/range.stories.tsx +++ b/packages/eui/src/components/form/range/range.stories.tsx @@ -9,6 +9,7 @@ import React, { useEffect, useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { LOKI_SELECTORS } from '../../../../.storybook/loki'; import { enableFunctionToggleControls, moveStorybookControlsToCategory, @@ -66,6 +67,13 @@ const meta: Meta = { undefined: undefined, }, }, + showInput: { + control: 'radio', + options: [false, true, 'inputWithPopover'], + }, + inputPopoverProps: { + if: { arg: 'showInput', eq: 'inputWithPopover' }, + }, }, args: { min: 0, @@ -88,7 +96,6 @@ const meta: Meta = { // adding tickInterval value to prevent error about // too many ticks when enabling showTicks tickInterval: 10, - ticks: [], }, }; @@ -200,6 +207,7 @@ export const Levels: Story = { { min: 20, max: 100, color: 'success' }, ], showLabels: true, + showRange: true, }, render: (args) => , }; @@ -213,10 +221,47 @@ const StatefulPlayground = ({ value, onChange, ...rest }: EuiRangeProps) => { } }, [value]); - const handelOnChange = (e: _SingleRangeChangeEvent, isValid: boolean) => { + const handleOnChange = (e: _SingleRangeChangeEvent, isValid: boolean) => { setValue(e.currentTarget.value); onChange?.(e, isValid); }; - return ; + return ; +}; + +/** + * VRT only + */ + +export const InputWithPopover: Story = { + tags: ['vrt-only'], + parameters: { + loki: { chromeSelector: LOKI_SELECTORS.portal }, + }, + args: { + showInput: 'inputWithPopover', + min: 0, + max: 100, + value: 50, + // Should render ticks, levels, highlights, and tooltips in their correct positions + showLabels: true, + showValue: true, + showRange: true, + showTicks: true, + tickInterval: 20, + levels: [ + { min: 0, max: 20, color: 'danger' }, + { min: 20, max: 100, color: 'success' }, + ], + }, + // Force input popover open via programmatic ref + render: function Render(args) { + const [ref, setRef] = useState(); + useEffect(() => { + // For some reason Loki throws a width/render error if not wrapped in a timeout. + // This doesn't happen on production + if (ref) setTimeout(() => ref.onInputFocus(), 1); + }, [ref]); + return ; + }, }; diff --git a/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap index e068fa19900..10fdc402366 100644 --- a/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap +++ b/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap @@ -190,7 +190,7 @@ exports[`EuiSuperSelect renders 1`] = ` class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isAttached-bottom" data-popover-panel="true" role="dialog" - style="top: 0px; left: -22px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;" + style="top: 0px; left: -18px; will-change: transform, opacity; z-index: 2000; inline-size: 0px;" >

{ return { euiModal: css` - ${euiShadowXLarge(euiThemeContext)} + ${euiShadowXLarge(euiThemeContext, { borderAllInHighContrastMode: true })} display: flex; flex-direction: column; max-block-size: 75vh; /* We overflow the modal body based off this */ @@ -69,7 +69,10 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => { min-inline-size: ${euiFormVariables(euiThemeContext).maxWidth}; ${euiMaxBreakpoint(euiThemeContext, 'm')} { - ${euiShadowXLarge(euiThemeContext, { reverse: true })} + ${euiShadowXLarge(euiThemeContext, { + reverse: true, + borderAllInHighContrastMode: true, + })} inset-block-start: auto; } `, diff --git a/packages/eui/src/components/panel/panel.styles.ts b/packages/eui/src/components/panel/panel.styles.ts index 12806b48a73..2beb090d478 100644 --- a/packages/eui/src/components/panel/panel.styles.ts +++ b/packages/eui/src/components/panel/panel.styles.ts @@ -16,7 +16,7 @@ import { } from '../../global_styling'; export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => { - const { euiTheme } = euiThemeContext; + const { euiTheme, highContrastMode } = euiThemeContext; return { // Base @@ -61,7 +61,10 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => { &:hover, &:focus { - ${euiShadow(euiThemeContext, 'l')} + ${highContrastMode + ? // Use drop-shadow instead of box-shadow, as Windows high contrast themes ignores box-shadows + `filter: drop-shadow(0 ${euiTheme.border.width.thick} 0 ${euiTheme.border.color});` + : euiShadow(euiThemeContext, 'l')} transform: translateY(-2px); cursor: pointer; } diff --git a/packages/eui/src/components/panel/panel.tsx b/packages/eui/src/components/panel/panel.tsx index b7eb932f53f..6cc3d35fbb7 100644 --- a/packages/eui/src/components/panel/panel.tsx +++ b/packages/eui/src/components/panel/panel.tsx @@ -13,9 +13,10 @@ import React, { Ref, } from 'react'; import classNames from 'classnames'; -import { useEuiMemoizedStyles } from '../../services'; +import { useEuiMemoizedStyles, useEuiTheme } from '../../services'; import { useEuiBackgroundColorCSS, + useEuiBorderColorCSS, useEuiPaddingCSS, _EuiBackgroundColor, EuiPaddingSize, @@ -107,8 +108,12 @@ export const EuiPanel: FunctionComponent = ({ element, ...rest }) => { + // Add borders to panels in high contrast mode + const { highContrastMode, euiTheme } = useEuiTheme(); + const borderColors = useEuiBorderColorCSS(); + // Shadows are only allowed when there's a white background (plain) - const canHaveShadow = !hasBorder && color === 'plain'; + const canHaveShadow = !hasBorder && color === 'plain' && !highContrastMode; const canHaveBorder = color === 'plain' || color === 'transparent'; const styles = useEuiMemoizedStyles(euiPanelStyles); @@ -120,6 +125,9 @@ export const EuiPanel: FunctionComponent = ({ useEuiBackgroundColorCSS()[color], canHaveShadow && hasShadow === true && styles.hasShadow, canHaveBorder && hasBorder === true && styles.hasBorder, + ...(highContrastMode + ? [{ border: euiTheme.border.thin }, borderColors[color]] + : []), rest.onClick && styles.isClickable, ]; diff --git a/packages/eui/src/components/panel/split_panel/split_panel.styles.ts b/packages/eui/src/components/panel/split_panel/split_panel.styles.ts index 7e6b3bb8948..f89340b8c82 100644 --- a/packages/eui/src/components/panel/split_panel/split_panel.styles.ts +++ b/packages/eui/src/components/panel/split_panel/split_panel.styles.ts @@ -9,6 +9,7 @@ import { css } from '@emotion/react'; import { logicalCSS } from '../../../global_styling'; +import { UseEuiTheme } from '../../../services'; export const euiSplitPanelOuterStyles = { euiSplitPanelOuter: css` @@ -24,7 +25,9 @@ export const euiSplitPanelOuterStyles = { `, }; -export const euiSplitPanelInnerStyles = { +export const euiSplitPanelInnerStyles = ({ + highContrastMode, +}: UseEuiTheme) => ({ euiSplitPanelInner: css` /* Make sure they're evenly split */ flex-basis: 0%; @@ -33,5 +36,8 @@ export const euiSplitPanelInnerStyles = { /* stylelint-disable declaration-no-important */ transform: none !important; box-shadow: none !important; + + /* Don't double up on borders in high contrast mode */ + ${highContrastMode ? 'border: none;' : ''} `, -}; +}); diff --git a/packages/eui/src/components/panel/split_panel/split_panel.tsx b/packages/eui/src/components/panel/split_panel/split_panel.tsx index 0de7ec8c659..e0e2f536263 100644 --- a/packages/eui/src/components/panel/split_panel/split_panel.tsx +++ b/packages/eui/src/components/panel/split_panel/split_panel.tsx @@ -13,6 +13,7 @@ import { EuiBreakpointSize, useIsWithinBreakpoints, } from '../../../services/breakpoint'; +import { useEuiMemoizedStyles } from '../../../services'; import { EuiPanel, _EuiPanelProps } from '../panel'; import { @@ -31,6 +32,7 @@ export const _EuiSplitPanelInner: FunctionComponent< _EuiSplitPanelInnerProps > = ({ children, className, ...rest }) => { const classes = classNames('euiSplitPanel__inner', className); + const styles = useEuiMemoizedStyles(euiSplitPanelInnerStyles); const panelProps: _EuiPanelProps = { hasShadow: false, @@ -43,7 +45,7 @@ export const _EuiSplitPanelInner: FunctionComponent< diff --git a/packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap b/packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap index 760c7ab008a..85de7afacc3 100644 --- a/packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap +++ b/packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap @@ -44,14 +44,18 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = ` data-popover-open="true" data-popover-panel="true" role="dialog" - style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" + style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;" tabindex="0" >
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+

+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
@@ -431,14 +458,18 @@ exports[`EuiPopover props panelClassName is rendered 1`] = ` data-popover-open="true" data-popover-panel="true" role="dialog" - style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" + style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;" tabindex="0" >
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+

, }; + +export const HighContrastMode: Story = { + tags: ['vrt-only'], + globals: { highContrastMode: true }, + args: { + children: ( + <> + Popover title + High contrast mode + {/* Move the initialFocus so the popover border shows up more plainly in the screenshot */} +