diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png index 5a74a7a8bcd..65cd042b926 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png index bed65d315b8..4f3f84c1f0d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png index 3860c7d0ebc..81d99ddf5ce 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png index 3860c7d0ebc..81d99ddf5ce 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png index cac723b65be..018cc60a2d2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png index a14de2cd91b..fc57103ed88 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png index 4460ccc3c4c..09f2a4da8f4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png index 1389b027882..a790c9f9e31 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png index d7b0a8925a7..4079a535572 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png index 9c41883337a..8c5438a5695 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.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 6db96e905a1..08381291a3c 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_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png index 0323e28d552..b0f06f9f646 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png 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_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png index 9d4cd04a978..d64688289c1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png index 9f4c320572b..0461f689102 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png index 7caa83d7481..7ed5492708c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_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 11283d5711d..7c380e39c22 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 2660c4a6590..fae1a406d0c 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 index 4ae15336257..f95e026d275 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png 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 c35b2560eff..00be511f688 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 6fd785b227e..b1e2c97f3cc 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_desktop_Layout_EuiWrappingPopover_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png index 80f73f495c0..b849e651b68 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png index 190d9b2b0e0..f74873289a8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png index 48c8f65b0ed..575f2f592d4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png index 39c84232660..e6449ff5545 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png index 450fd124d08..2b11f35919f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png index 276c625f65e..4977cc463f5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png index c9f6d37bdaf..b20f6c3bb77 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png index 81719fff617..26507a6f11b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index ceb1fe81a27..c3ceb8bbce7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png index 36f822146b9..92d77b2f568 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png index d40bc335bb6..233bf8380c5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png index 3f2aa23646d..88b59c7b484 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png index d8fdfdfc5e4..2832b63322c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png index d8fdfdfc5e4..2832b63322c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png index 2f7718b02a8..92cd96273b3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png index 8f38e3e5b70..941b7a27d20 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png index b0dceb63f27..8d1b81f34bc 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png index dcc5f659e49..16ececd29af 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png index 7e9400f2a95..d7f8f99d74c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png index 10338d493c4..a03085e82f7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.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 1cee07ade38..eac47d7d353 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_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png index bee47764452..b9082e03fa5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png 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_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png index 33321e3daee..a650870af07 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png index 70589e5eddc..cb9c3bd11f8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png index 587551ae6d9..b4f2fbf94a3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png index 2ac94492267..17810e15851 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_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 fd49eac3d1e..f38fec46c8f 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 3e57d38e4f0..fe2343690e6 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 index 24f4342e5ea..67868f9187e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png 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 8e4d9a9c442..d53071085cb 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 f8780832a8c..ede46fee921 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/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png index 0ddfaf5da44..39b9339b019 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png index 97fe29dedee..e141a985ba3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png index 918155ac6ca..56ec934fdd9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png index f395569e805..f8e5bb63080 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png index 0372dc0507b..e6b697277fa 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png index 8bca234909a..8911ec6d85a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png index 03522131c60..ee5b210a217 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png index 74c84fe9867..b9e2fafaa5f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index 01aeb053120..2060444df83 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png index 90870063454..0a6c516450b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png differ diff --git a/packages/eui/changelogs/upcoming/9218.md b/packages/eui/changelogs/upcoming/9218.md new file mode 100644 index 00000000000..ea28dd1e53d --- /dev/null +++ b/packages/eui/changelogs/upcoming/9218.md @@ -0,0 +1,7 @@ +- Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: + - Changed `hasArrow` to `false` + - Changed `position` to `downLeft` + - Changed `offset` to `4` when `hasArrow=false` +- Updated `EuiInputPopover` `offset` default value to `2` +- Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` + 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 3fc78452fba..6c97e6d4946 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,18 +48,9 @@ exports[`CollapsedItemActions custom actions 1`] = ` data-popover-open="true" data-popover-panel="true" role="dialog" - style="top: -18px; left: -16px; z-index: 2000;" + style="top: 0px; left: -12px; z-index: 2000;" tabindex="0" > -
-
-
-
-
-
-
-
-
-
-
-
-

-

-
-
{ openCellPopover('A'); cy.get('[data-test-subj="euiDataGridExpansionPopover"]') .should('have.css', 'left', '1px') - .should('have.css', 'top', '72px') + .should('have.css', 'top', '76px') .should('have.css', 'width', '112px'); }); @@ -229,7 +229,7 @@ describe('EuiDataGridCellPopover', () => { openCellPopover('B'); cy.get('[data-test-subj="euiDataGridExpansionPopover"]') .should('have.css', 'left', '109px') - .should('have.css', 'top', '72px') + .should('have.css', 'top', '76px') .should('have.css', 'width', '375px'); }); diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx index b8ab7d90267..a02ae1dfc91 100644 --- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx +++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx @@ -111,7 +111,7 @@ describe('useCellPopover', () => { data-popover-panel="true" data-test-subj="euiDataGridExpansionPopover" role="dialog" - style="top: 0px; left: 0px; will-change: transform, opacity; max-inline-size: min(75vw, max(0px, 400px)); max-block-size: 50vh; z-index: 1000;" + style="top: 4px; left: 0px; will-change: transform, opacity; max-inline-size: min(75vw, max(0px, 400px)); max-block-size: 50vh; z-index: 1000;" tabindex="0" >

-

-
-

{ cy.get('[data-popover-open]').should('have.focus'); cy.get('[data-test-subj=dataGridHeaderCell-a]').realClick({ - position: 'right', + position: 'left', }); cy.get('[data-test-subj=dataGridHeaderCell-a]').should('have.focus'); cy.get('[data-popover-open]').should('not.exist'); diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index 78f634bef1b..bc3d63f1d94 100644 --- a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -54,18 +54,9 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov data-autofocus="true" data-popover-panel="true" role="dialog" - style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;" + style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;" tabindex="0" > -

-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
@@ -458,18 +394,9 @@ exports[`EuiPopover props panelClassName is rendered 1`] = ` data-popover-open="true" data-popover-panel="true" role="dialog" - style="top: 16px; left: -18px; will-change: transform, opacity; z-index: 2000;" + style="top: 12px; left: 0px; will-change: transform, opacity; z-index: 2000;" tabindex="0" > -
-
-
-
-
-
-
-
-

= { parameters: { loki: { chromeSelector: LOKI_SELECTORS.portal }, }, + argTypes: { + offset: { + control: 'number', + table: { type: { summary: 'number' }, defaultValue: { summary: '2' } }, + }, + }, args: { anchorPosition: 'downLeft', attachToAnchor: true, diff --git a/packages/eui/src/components/popover/input_popover.tsx b/packages/eui/src/components/popover/input_popover.tsx index 7eb6ddf2897..de4fcb071d7 100644 --- a/packages/eui/src/components/popover/input_popover.tsx +++ b/packages/eui/src/components/popover/input_popover.tsx @@ -79,6 +79,7 @@ export const EuiInputPopover: FunctionComponent = ({ onPanelResize, inputRef: _inputRef, panelRef: _panelRef, + offset = 2, ...props }) => { const classes = classnames('euiInputPopover', className); @@ -234,6 +235,7 @@ export const EuiInputPopover: FunctionComponent = ({ closePopover={closePopover} anchorPosition={anchorPosition} attachToAnchor={attachToAnchor} + offset={offset} repositionToCrossAxis={repositionToCrossAxis} panelPaddingSize={panelPaddingSize} ownFocus={ownFocus} diff --git a/packages/eui/src/components/popover/popover.stories.tsx b/packages/eui/src/components/popover/popover.stories.tsx index 83087604d8b..d8dcd84f93f 100644 --- a/packages/eui/src/components/popover/popover.stories.tsx +++ b/packages/eui/src/components/popover/popover.stories.tsx @@ -33,8 +33,8 @@ const meta: Meta = { ownFocus: true, panelPaddingSize: 'm', buffer: 16, - hasArrow: true, - anchorPosition: 'downCenter', + hasArrow: false, + anchorPosition: 'downLeft', display: 'inline-block', repositionToCrossAxis: true, repositionOnScroll: false, @@ -67,6 +67,7 @@ const StatefulPopover = ({ button, closePopover, isOpen: _isOpen, + hasArrow, ...rest }: EuiPopoverProps) => { const [isOpen, setOpen] = useState(_isOpen); @@ -75,6 +76,19 @@ const StatefulPopover = ({ setOpen(_isOpen); }, [_isOpen]); + // ensure hasArrow control updates are applied without manually closing the popover + useEffect(() => { + if (_isOpen) { + setOpen(false); + + setTimeout(() => { + setOpen(_isOpen); + }, 25); + } + // we don't want to trigger this on _isOpen change + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [hasArrow]); + const handleOnClose = () => { setOpen(false); closePopover?.(); @@ -98,6 +112,7 @@ const StatefulPopover = ({ isOpen={isOpen} button={trigger} closePopover={handleOnClose} + hasArrow={hasArrow} {...rest} /> diff --git a/packages/eui/src/components/popover/popover.test.tsx b/packages/eui/src/components/popover/popover.test.tsx index 9d4a45dee2e..e0168849b1c 100644 --- a/packages/eui/src/components/popover/popover.test.tsx +++ b/packages/eui/src/components/popover/popover.test.tsx @@ -336,6 +336,7 @@ describe('EuiPopover', () => { closePopover={() => {}} offset={10} isOpen + hasArrow /> ); diff --git a/packages/eui/src/components/popover/popover.tsx b/packages/eui/src/components/popover/popover.tsx index 3b7d07fbdac..def34af40d6 100644 --- a/packages/eui/src/components/popover/popover.tsx +++ b/packages/eui/src/components/popover/popover.tsx @@ -79,6 +79,7 @@ type AnchorPosition = 'up' | 'right' | 'down' | 'left'; export interface EuiPopoverProps extends PropsWithChildren, CommonProps { /** * Alignment of the popover and arrow relative to the button + * @default downLeft */ anchorPosition?: PopoverAnchorPosition; /** @@ -108,6 +109,7 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps { focusTrapProps?: Partial; /** * Show arrow indicating to originating button + * @default false */ hasArrow?: boolean; /** @@ -188,6 +190,7 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps { zIndex?: number; /** * Distance away from the anchor that the popover will render + * @default 4 (0 when `hasArrow=true`) */ offset?: number; /** @@ -299,9 +302,9 @@ export class EuiPopover extends Component { isOpen: false, ownFocus: true, repositionToCrossAxis: true, - anchorPosition: 'downCenter', + anchorPosition: 'downLeft', panelPaddingSize: 'm', - hasArrow: true, + hasArrow: false, display: 'inline-block', }; @@ -518,7 +521,8 @@ export class EuiPopover extends Component { positionPopover = (allowEnforcePosition: boolean) => { if (this.button == null || this.panel == null) return; - const { anchorPosition, offset = 0 } = this.props as PropsWithDefaults; + const { anchorPosition, offset: _offset } = this.props as PropsWithDefaults; + const offset = _offset != null ? _offset : this.props.hasArrow ? 0 : 4; let position = getPopoverPositionFromAnchorPosition(anchorPosition); let forcePosition = undefined; diff --git a/packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide_popover.tsx b/packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide_popover.tsx index 854c8aca9a4..ef82ea59518 100644 --- a/packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide_popover.tsx +++ b/packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide_popover.tsx @@ -49,6 +49,7 @@ export const EuiSelectableTemplateSitewidePopover: FunctionComponent< return ( -

-
-

= ({ subtitle, title, decoration = 'beacon', + hasArrow, footerAction, panelProps, panelClassName, @@ -205,8 +207,9 @@ export const EuiTourStep: FunctionComponent = ({ ...panelProps, css: [tourStyles.euiTour, css, panelProps?.css], }} - offset={hasBeacon ? 10 : 0} + offset={hasBeacon && hasArrow !== false ? 10 : undefined} aria-labelledby={titleId} + hasArrow={hasArrow ?? hasBeacon} arrowChildren={ hasBeacon && }