diff --git a/packages/eui-theme-common/src/global_styling/variables/typography.ts b/packages/eui-theme-common/src/global_styling/variables/typography.ts index 721db617a59..78b0bd02f80 100644 --- a/packages/eui-theme-common/src/global_styling/variables/typography.ts +++ b/packages/eui-theme-common/src/global_styling/variables/typography.ts @@ -97,11 +97,11 @@ export type _EuiThemeFontWeights = { light: CSSProperties['fontWeight']; /** - Default value: 400 */ regular: CSSProperties['fontWeight']; - /** - Default value: 500 */ + /** - Default value: 450 */ medium: CSSProperties['fontWeight']; - /** - Default value: 600 */ + /** - Default value: 500 */ semiBold: CSSProperties['fontWeight']; - /** - Default value: 700 */ + /** - Default value: 600 */ bold: CSSProperties['fontWeight']; }; diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png index fe7f76fbeb0..ce1d2343c5b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png differ 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 index 95ef2ccf226..42f3f11b5a6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png 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 index 8f92dc8daee..54f7e4cbf1b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png 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 1f6b58260a6..8418d830c79 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_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png index 010397dd176..c51ff081ee5 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_Editors_Syntax_EuiCodeBlock_Virtualized_Code_Block_Scrolling.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Virtualized_Code_Block_Scrolling.png index 82bd8e647dc..0b96255f49d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Virtualized_Code_Block_Scrolling.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Virtualized_Code_Block_Scrolling.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Custom_Toolbar_Content.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Custom_Toolbar_Content.png index ba88f02855d..c22150a979c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Custom_Toolbar_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Custom_Toolbar_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png index 51293c04e14..79fb24ccfaf 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png index f890168dc08..ea88a65cb51 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png index 7ef4b058bf4..78df15950f1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png index 265d503b07d..ed3bb14d166 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png differ 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 65cd042b926..23c7846ef80 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_EuiFilterButton_Full_Width_And_Grow.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png index a4d5c344cb8..50fa42f9698 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png index 9c8628ad45e..56914b85ff1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png index 69cc52448a5..8f3b5b717b4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png index 43aa327d00c..b5ca661819b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png index 98a825a123c..50f5d5c85be 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png index 60f15504abe..1b1b4aac848 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png index ad0787e02d5..e5bf09e07eb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast.png index 4270f85a7c9..84466badca1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png index 47d01577acf..c9ee848d473 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_Kitchensink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_Kitchensink.png index 019f97246c7..f5919883c8f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_Kitchensink.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_Kitchensink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_Kitchensink_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_Kitchensink_Dark_Mode.png index 6980c52beb9..a5f3e4e9422 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_Kitchensink_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlButton_Kitchensink_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png index 3cae57f1078..03d2635e3e1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png index f22fb42e0b3..4880b636020 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png index 093d71f3506..f0ff97f39a7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png index 472ada7a0d3..8f13125589b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Form_Control_Button.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Form_Control_Button.png index 5055dbdf6b0..5be28e67c16 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Form_Control_Button.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Form_Control_Button.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png index b4a65da2315..5623b169cd0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png index bb6c399d2d8..fb1e5447080 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormAppend_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormAppend_Playground.png new file mode 100644 index 00000000000..6c8c24c1efd Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormAppend_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormPrepend_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormPrepend_Playground.png new file mode 100644 index 00000000000..c75673cb213 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormPrepend_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png index c2ef7fb289d..16bb70c40d5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png index 1dfe69d91c6..07f7b6923db 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Collapsed_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Collapsed_Quick_Select_Only.png index 786888f9b59..f48ca9ca90d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Collapsed_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Collapsed_Quick_Select_Only.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 52174712615..74a3a37bfcb 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_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png index 0444bbdc629..e6178e22908 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png index 6478bc66e35..ae52b3e3741 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png index 149ba36759b..b919048e123 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png index 52701f4a54c..ad5d714bdf0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png index 149ba36759b..b919048e123 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png index 037bbad4c51..d081d81a7f6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons_Compressed.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons_Compressed.png index 33518b0ae08..1118848852a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons_Compressed.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons_Compressed.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png index c0293ec4b89..4574e06cb18 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png index 8998fd8957d..368069574b0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Child_Background_Styles.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Child_Background_Styles.png index c629caeafa7..247fa26a064 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Child_Background_Styles.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Child_Background_Styles.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png index 94788a0e5c6..b8b69e539e9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutMenu_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutMenu_Playground.png index e046313a84e..cde26fa515e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutMenu_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutMenu_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png index 4250bc834aa..1a2c3c56842 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png index 2bb1b98926e..051487efff5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png index fc20e4156cf..ea9fc75cc83 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png index 409e4c6cdfe..5c5b723d86b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png index 0557bf30cac..616ab7e2ab0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png index 281c2223aeb..416ca272bcb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png index 431b0bff95c..02ccf778714 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png index 648684c3cfa..b5d752211ce 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png index 09bed458cdb..c617d354f09 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png index a0ef4784464..74936935335 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png index 4a15b2b2286..d403ebd7c5a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png index d7687f71485..f6f68515609 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png index 1951de38fde..42f5295e9d6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png index fdf60dd7432..4b7ed931df2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png index d44cc2ef222..44eb5f77c6b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png index 01b94af6954..e7e9cbdba02 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png index 01b94af6954..e7e9cbdba02 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png index 9360ac47936..79f4a576fae 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png index 2447b92acbe..0244003cb90 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png index 663256d7cc3..438992e0968 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_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 7c380e39c22..d24230cea5c 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 fae1a406d0c..38ea5f2db89 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 c14001e85ca..d36a92c81dd 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 15535260081..0e4f14ef030 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 857da10991f..65aaa8d55ac 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 b849e651b68..9175ba909f6 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_EuiButtonEmpty_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png index a773db1429e..77496aea04d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png index 3ad4450c33f..ca9474cba37 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png index c16eaa045c4..776019f47dc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png index 0b42f405ae1..1adf9852555 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Dark_Mode.png index 829be0a3bf9..e42a5906d61 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png index 50eaeb5d2e8..4a5103c6a3b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_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 f74873289a8..812cf4a8756 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 575f2f592d4..6e9b40f2997 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_Navigation_EuiFacetButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetButton_Playground.png index 6cf69a436b0..783143e8cf3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png index 3f5de174b12..f6d795ba3eb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png index e29b0c6d926..43d676ac991 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png index ef06c874797..4ca1b60ffcf 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Dark_Mode.png index 64df1901fb9..68ea3509425 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_High_Contrast_Mode.png index 04d51b31509..a9e67121b66 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_High_Contrast_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_High_Contrast_Mode_Dark.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_High_Contrast_Mode_Dark.png index 2e683ff7280..ca7ce5beaa0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_High_Contrast_Mode_Dark.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_High_Contrast_Mode_Dark.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Kitchen_Sink.png index aa1d1352f02..865ff1da93c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSplitButton_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Empty_Table.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Empty_Table.png index b99004709f4..023a1f1e969 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Empty_Table.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Empty_Table.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Marked_Row.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Marked_Row.png index 4885cc21c1f..8d5284e0939 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Marked_Row.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Marked_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png index 42350baa392..1f87347f964 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png index b7f4e574793..4ceff566ded 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.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 e6449ff5545..94a11e9f9b1 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 2b11f35919f..86d40a9e381 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_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png index 3a10022a2f2..27b85e72634 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png index 3409deb1e3f..bd693dd75e3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png index 9a6dda44afb..ff564257276 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png index 67e7da8b7a4..dde62b5a9ca 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png index 68598ebecca..9c429df93eb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png index 808a621b42d..3ec3ad53f39 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Visible_Columns.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Visible_Columns.png index 74cdadb8fe1..61d80534a36 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Visible_Columns.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Visible_Columns.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png index 972dfdaad58..0c536cece52 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png index 07a86a2aafd..86b18d6d744 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png index 6ea08c24388..b849d4aab38 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png index 6d814fa5d8a..6521c73b937 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png index 390be1a51c8..1ceb6dccac4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Row_Classes.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Row_Classes.png index 9e0c138eafd..59551c77a4b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Row_Classes.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Row_Classes.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png index 08424d749b6..c71c8fa893e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png index a63fa620263..dc750ea7fa0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png index f67da8659e7..c91454049a3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png index b6d4e2cca65..51b26ac37aa 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png index b04ba70e284..044056e331b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png index 322dd610645..c9bdde25350 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png index c216b0fed56..181f5644ac9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png index b7325f06797..d6e7675382f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png index f534fe5bafe..b6b71211121 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.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 4977cc463f5..8723ff0bd87 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 b20f6c3bb77..2654615e939 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 26507a6f11b..61ec2fd9db5 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_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png index 2360d1cb3b1..880d0b5268d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.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 c3ceb8bbce7..db6dd32076a 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_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png index 54a5daf9768..082aa2cb1e8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png index 6ff41e13304..c5933b0df40 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png index d1c5a471e49..d3691deb775 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png index 72c08f23a5f..05ae57c1bda 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png index 677a06580b4..2f7762c3bcc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png index 42586cb5eeb..7bbe5d64e75 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png index 8af45ffc223..2227d706624 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png index 5e61312dccc..512ce3a7f3f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png index 38b7ae4594e..1a796524018 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png index 18cc0d26a2f..b43a3b0d029 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiPortal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiPortal_Playground.png index 8429e3dd595..a00828e1121 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiPortal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiPortal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png index 7674f5de8f7..a81b9e80db5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png index e11fbf34809..83cea78a67e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png index 6f8393b7795..692b8b11cb9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_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 index e37e4db95da..dc14cab2690 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png 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 index c273be96f14..a3f58858342 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png 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 5289fee44d3..660f0ad0cdd 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_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png index 5a7436db41c..ca239fbd1c5 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_Editors_Syntax_EuiCodeBlock_Virtualized_Code_Block_Scrolling.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Virtualized_Code_Block_Scrolling.png index cde7dc97114..4cb98bc443f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Virtualized_Code_Block_Scrolling.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Virtualized_Code_Block_Scrolling.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Custom_Toolbar_Content.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Custom_Toolbar_Content.png index 70e0adb6534..7dcaec09001 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Custom_Toolbar_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Custom_Toolbar_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png index 018cb724e28..2aee38c6f3b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png index 8dcefb6ce76..46e592fb09e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png index 754bd5429d7..a2f1c59bcee 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png index 680fc0c750f..df8c947be5b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.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 233bf8380c5..80efb8dbc19 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_EuiFilterButton_Full_Width_And_Grow.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png index db339c60c53..0447a63c12f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png index 5bf5ca6690a..29216dd342e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png index d989be7b306..618767c3669 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png index 543bd196f17..f0c297d24b6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png index 51e3b38155d..3330963c90a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png index dcfd7397246..e6b3aa104ef 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png index 1e71a002354..6bd8b19d2de 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_High_Contrast.png index 19f020a66f1..82d204bcd2b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png index fb949297304..c38327c0cb6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_Kitchensink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_Kitchensink.png index 7053491d123..e8116b4e972 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_Kitchensink.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_Kitchensink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_Kitchensink_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_Kitchensink_Dark_Mode.png index 7ecc5f1e483..cb8477fa9f5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_Kitchensink_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlButton_Kitchensink_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png index a25fb6c9ec3..6013128c917 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png index 685bec1656d..ef98e8dd4de 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png index e0b145b1969..cdf501e87b6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png index 446c0033d3e..2016395e05b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Form_Control_Button.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Form_Control_Button.png index 1891458e7d7..737738dbb48 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Form_Control_Button.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Form_Control_Button.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png index e380ff4096a..20757616b06 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png index b5bc6ebe12b..5bd985130b4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormAppend_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormAppend_Playground.png new file mode 100644 index 00000000000..c57d23eb560 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormAppend_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormPrepend_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormPrepend_Playground.png new file mode 100644 index 00000000000..7df807b02dd Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Subcomponents_EuiFormPrepend_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png index de5f98bbbcc..1c3056c2c0b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png index 99683eabbc0..c8a3fdadf43 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Collapsed_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Collapsed_Quick_Select_Only.png index 4888f4afa51..98b3da2a6ce 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Collapsed_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Collapsed_Quick_Select_Only.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 65c56e9924c..14fdad1d9cf 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_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png index 5554d4ba86c..4fd0770a524 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Time_Zone_Display.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png index 47b18ace3c0..4e373243bf1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png index bd94d8ce982..fe34be8de62 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png index 00f47f2d34e..c17f448f2be 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png index bd94d8ce982..fe34be8de62 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png index ff2f3222bcf..391886fd90d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons_Compressed.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons_Compressed.png index 258acbb366a..7688d48aa1d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons_Compressed.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Time_Window_Buttons_Compressed.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Child_Background_Styles.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Child_Background_Styles.png index 629f4637c90..17d2a603931 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Child_Background_Styles.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Child_Background_Styles.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png index 9287631a11f..1bdad5a38de 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutMenu_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutMenu_Playground.png index 2cc58ff48e2..ed2a7f7446b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutMenu_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutMenu_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png index 4e7c711f027..30e27613123 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png index cc20192d655..431fc1269f5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png index 71bd331fc60..8cd20453ef0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png index 538ee38d93a..da3724b632c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png index 7396496557d..d1996da9abb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png index 5f06d18987b..b6f16f03298 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.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 cb9c3bd11f8..d7c7515fb4e 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_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png index a6328b9a5ff..f20f898db21 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png index c6f7f59f173..83ebc7f321f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png index c70b17dbdbd..96230449f9c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_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 da7aaad6010..65d278d35a8 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_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png index 781f4648d10..2ed323ac3cc 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png index d3d21423421..41c40342028 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png index ebc38b300c8..713b00eff47 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png index 0757c4f98b8..cbad5e3d668 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png index 992e0337537..a1f83f257c8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png index 7aa488ff0bc..6b61c0e1ff3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png index 1ecd7b65300..bfa8cf2856f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png index e5ce2b98e8a..c0e3adbd11a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png index 79b0071f4ea..e32859f57a5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png index b8049796e9c..d35c54892ed 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png index ee47a8a7dac..61cee7a0144 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_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 f38fec46c8f..bead4cc3a18 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 fe2343690e6..346c6593fa8 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 67868f9187e..4cc6643dd33 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 7085d0b3159..b43023c8da0 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 ede46fee921..46332c18ef4 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 39b9339b019..444120b8a5e 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_EuiButtonEmpty_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png index 6a9acdfeaf3..8f5b23c24ca 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png index d4bfcc2496a..f5077896bc0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png index d3c3cd3d7db..6a7cadbce94 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png index 9891f40b81c..db62d6de1fe 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.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 e141a985ba3..db437104c5f 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 56ec934fdd9..796f2cda7cb 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_Navigation_EuiFacetButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetButton_Playground.png index 365178a3781..be34539acc2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png index 75871dc8d6f..2bb626299ad 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png index a3008a27441..86059d8e318 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png index afddbbba945..3c9312d9c2d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png index f2e40509031..8ffd18d2af2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Dark_Mode.png index 85981365122..b06b6738f92 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_High_Contrast_Mode.png index 9f60a122afa..30b584664ce 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_High_Contrast_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_High_Contrast_Mode_Dark.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_High_Contrast_Mode_Dark.png index 0edbb7464ea..1d9b695dba1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_High_Contrast_Mode_Dark.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_High_Contrast_Mode_Dark.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Kitchen_Sink.png index d775545b901..4f40aa7102d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSplitButton_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Empty_Table.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Empty_Table.png index 84e48f0ad86..c24b8be1966 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Empty_Table.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Empty_Table.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png index 3566752c649..765ca9071cc 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png index 459a1646186..49dc47e3636 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png index 549942feac6..d66bcf35fa4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.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 f8e5bb63080..a3e9f926f8e 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 e6b697277fa..7d0503bb817 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_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png index cff0f37fd3e..7a9504e6aa4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png index ce5ca61e000..755c45bb739 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png index 02814581622..43ff3e63b43 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png index b1eae6b89e1..889873c5e6e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png index 8b29a8dd650..c84a3c81ae0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png index 31c69140078..654697ebf3c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Visible_Columns.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Visible_Columns.png index 30a9077872d..4152a77b614 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Visible_Columns.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Visible_Columns.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png index f5b3db3f338..edb01a36d60 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png index 7ba4fba7448..77d64cafb8b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png index eab3f87af63..83aa34c7ab4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png index 016f5fe47aa..1b278e0c2f5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png index 3e7c97c33dd..947870e8356 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Row_Classes.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Row_Classes.png index cb4561a814d..ee9fc68e036 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Row_Classes.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Row_Classes.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png index 06e829ae262..fe53fdf58d2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png index 97527f2a2e8..162cc902a80 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png index 2926698b24f..f986e37d652 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png index fb32eeac4e5..902e3966de4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png index af1d5cf8506..3d77b2e38b2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png index 67267c8f654..3cf4c51b018 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png index 7d1bad96923..c0fdedc1fcc 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png index a213a8556ea..10ee49bc393 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.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 8911ec6d85a..02dcdc57052 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 ee5b210a217..4801fa26ff9 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 b9e2fafaa5f..ecbeca98905 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_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png index 14ede2c4e3d..69ac2694507 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png index f3629863e6d..b8bd2aef098 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png index 2f158db3bb1..46e35535672 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png index 99d6fe436a1..693c2eb76d2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png index ebdf59b0810..c261d04f353 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png index 243ee410c42..e5b8459ff3c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png index 390618d1ea8..6c367469701 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png index f1c7ccf7af5..b173e66f89d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png index 931fd2ff136..b9cf6b05bb0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png index 4e663922eed..2faa4878627 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiPortal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiPortal_Playground.png index f08788d5c67..8aaf319c2bf 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiPortal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiPortal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png index f3afd69f2bb..622925b3ef3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png differ diff --git a/packages/eui/changelogs/upcoming/8948.md b/packages/eui/changelogs/upcoming/8948.md new file mode 100644 index 00000000000..0a2f710e5e1 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8948.md @@ -0,0 +1,3 @@ +- Updated paddings for `EuiButton`, `EuiButtonEmpty`, `EuiFilterButton` +- Updated paddings for `append`/`prepend` on `EuiFormControlLayout` + diff --git a/packages/eui/changelogs/upcoming/9014.md b/packages/eui/changelogs/upcoming/9014.md new file mode 100644 index 00000000000..a123cc959ee --- /dev/null +++ b/packages/eui/changelogs/upcoming/9014.md @@ -0,0 +1,13 @@ +- Added `EuiFormAppend` and `EuiFormPrepend` components +- Added support for `type="span"` on `EuiFormLabel` to support using visual-only form labels +- Updated `EuiFormLabel` to render a `span` if no `htmlFor` is passed +- Updated `EuiFormControlLayout` to use `EuiFormAppend` and `EuiFormPrepend` +- Updated `EuiAutoRefresh` and `EuiColorPicker` to use `EuiFormPrepend` + +**Breaking changes** + +- Updated `EuiQuickSelectPopover` in `EuiSuperDatePicker` to use `EuiFormPrepend`. This results in more restricted `buttonProps` as they reflect `EuiFormPrepend` instead of generic `EuiButtonEmpty` props. + +**Bug fixes** + +- Updated `EuiColorPicker` to ensure `id` is correctly passed onto the internal `EuiFormControlLayout` diff --git a/packages/eui/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap b/packages/eui/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap index 866b85be69e..0113132db77 100644 --- a/packages/eui/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap +++ b/packages/eui/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap @@ -12,7 +12,7 @@ exports[`EuiSkipLink is rendered 1`] = ` class="emotion-euiButtonDisplayContent" > Skip diff --git a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index ec389b73052..4895f40babd 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -502,7 +502,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Edit @@ -521,7 +521,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Delete @@ -650,7 +650,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Edit @@ -669,7 +669,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Delete @@ -798,7 +798,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Edit @@ -817,7 +817,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Delete @@ -929,7 +929,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Rows per page : @@ -991,7 +991,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > 1 @@ -1013,7 +1013,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > 2 diff --git a/packages/eui/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap index 0797061761e..8ce2ce5286a 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap +++ b/packages/eui/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap @@ -13,7 +13,7 @@ exports[`DefaultItemAction renders an EuiButtonEmpty when \`type="button" 1`] = class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > action1 diff --git a/packages/eui/src/components/basic_table/__snapshots__/expanded_item_actions.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/expanded_item_actions.test.tsx.snap index a9bb6966f16..9a402bf4fc1 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/expanded_item_actions.test.tsx.snap +++ b/packages/eui/src/components/basic_table/__snapshots__/expanded_item_actions.test.tsx.snap @@ -14,7 +14,7 @@ exports[`ExpandedItemActions renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > default1 @@ -37,7 +37,7 @@ exports[`ExpandedItemActions renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > showOnHover diff --git a/packages/eui/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap index 8140da33544..b3090e4377f 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap +++ b/packages/eui/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap @@ -44,7 +44,7 @@ exports[`EuiInMemoryTable behavior mobile header 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Sorting @@ -106,7 +106,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > 1 @@ -129,7 +129,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > 2 diff --git a/packages/eui/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap index 5701654bb93..3da44f7aa4b 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap +++ b/packages/eui/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap @@ -23,7 +23,7 @@ exports[`PaginationBar renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Rows per page : diff --git a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap index 6c607ef32d7..b8a87118c8a 100644 --- a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap +++ b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap @@ -11,7 +11,7 @@ exports[`EuiButton is rendered 1`] = ` class="emotion-euiButtonDisplayContent" > Content @@ -107,7 +107,7 @@ exports[`EuiButton props contentProps is rendered 1`] = ` data-test-subj="test subject string" > Content @@ -163,7 +163,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = ` data-euiicon-type="user" /> Content @@ -180,7 +180,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = ` class="emotion-euiButtonDisplayContent" > Content @@ -205,7 +205,7 @@ exports[`EuiButton props iconSize m is rendered 1`] = ` data-euiicon-type="user" /> Content @@ -226,7 +226,7 @@ exports[`EuiButton props iconSize s is rendered 1`] = ` data-euiicon-type="user" /> Content @@ -373,7 +373,7 @@ exports[`EuiButton props textProps is rendered 1`] = ` > Content diff --git a/packages/eui/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap b/packages/eui/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap index c3b6a3bf4dc..015995a632b 100644 --- a/packages/eui/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap +++ b/packages/eui/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap @@ -11,7 +11,7 @@ exports[`EuiButtonDisplay renders 1`] = ` class="emotion-euiButtonDisplayContent" > Content diff --git a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap index b7ce4d23f0e..03f5815c146 100644 --- a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap +++ b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap @@ -11,7 +11,7 @@ exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loa style="border-color: #0b64dd currentcolor currentcolor currentcolor;" /> Loading @@ -28,7 +28,7 @@ exports[`EuiButtonDisplayContent button icon loading icon replaces existing icon role="progressbar" /> Loading @@ -70,7 +70,7 @@ exports[`EuiButtonDisplayContent renders 1`] = ` data-test-subj="test subject string" > Content diff --git a/packages/eui/src/components/button/button_display/_button_display.styles.ts b/packages/eui/src/components/button/button_display/_button_display.styles.ts index 320c37ef4f7..5e1a00b7b5e 100644 --- a/packages/eui/src/components/button/button_display/_button_display.styles.ts +++ b/packages/eui/src/components/button/button_display/_button_display.styles.ts @@ -10,7 +10,6 @@ import { UseEuiTheme } from '../../../services'; import { euiFontSize, logicalCSS, - logicalShorthandCSS, logicalTextAlignCSS, } from '../../../global_styling'; import { euiButtonSizeMap } from '../../../global_styling/mixins'; @@ -37,8 +36,10 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => { const _buttonSize = (sizeKey: EuiButtonDisplaySizes) => { const size = sizes[sizeKey]; + return css` ${logicalCSS('height', size.height)} + ${logicalCSS('padding-horizontal', size.padding)} line-height: ${size.height}; /* Prevents descenders from getting cut off */ ${euiFontSize(euiThemeContext, size.fontScale)} border-radius: ${size.radius}; @@ -50,7 +51,6 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => { euiButtonDisplay: css` ${euiButtonBaseCSS()} font-weight: ${euiTheme.font.weight.medium}; - ${logicalShorthandCSS('padding', `0 ${euiTheme.size.m}`)} `, // States isDisabled: css` diff --git a/packages/eui/src/components/button/button_display/_button_display.tsx b/packages/eui/src/components/button/button_display/_button_display.tsx index bd4edb5129b..6f359ae14ab 100644 --- a/packages/eui/src/components/button/button_display/_button_display.tsx +++ b/packages/eui/src/components/button/button_display/_button_display.tsx @@ -170,6 +170,7 @@ export const EuiButtonDisplay = forwardRef( const innerNode = ( { justify-content: center; align-items: center; vertical-align: middle; - gap: ${euiTheme.size.s}; + gap: ${euiTheme.size.xs}; `, + content: { + xs: css` + ${logicalCSS('padding-horizontal', euiTheme.size.xxs)} + `, + s: css` + ${logicalCSS('padding-horizontal', euiTheme.size.xs)} + `, + m: css` + ${logicalCSS('padding-horizontal', euiTheme.size.xs)} + `, + }, }; }; diff --git a/packages/eui/src/components/button/button_display/_button_display_content.tsx b/packages/eui/src/components/button/button_display/_button_display_content.tsx index 6e6282f3abf..87196f0cb78 100644 --- a/packages/eui/src/components/button/button_display/_button_display_content.tsx +++ b/packages/eui/src/components/button/button_display/_button_display_content.tsx @@ -15,6 +15,7 @@ import { EuiLoadingSpinner } from '../../loading'; import { EuiIcon, IconType } from '../../icon'; import { euiButtonDisplayContentStyles } from './_button_display_content.styles'; +import { EuiButtonDisplaySizes } from './_button_display'; export const ICON_SIZES = ['s', 'm'] as const; export type ButtonContentIconSize = (typeof ICON_SIZES)[number]; @@ -29,6 +30,7 @@ export type EuiButtonDisplayContentType = HTMLAttributes; * This component is simply a helper component for reuse within other button components. */ export interface EuiButtonDisplayContentProps extends CommonProps { + size?: EuiButtonDisplaySizes; /** * Any `type` accepted by EuiIcon */ @@ -58,6 +60,7 @@ export const EuiButtonDisplayContent: FunctionComponent< EuiButtonDisplayContentType & EuiButtonDisplayContentProps > = ({ children, + size = 'm', textProps, isLoading = false, isDisabled = false, @@ -97,12 +100,15 @@ export const EuiButtonDisplayContent: FunctionComponent< const doNotRenderTextWrapper = textProps === false; const renderTextWrapper = (isText || textProps) && !doNotRenderTextWrapper; + const textWrapperCss = [styles.content[size], textProps && textProps.css]; + return ( {iconSide === 'left' && icon} {renderTextWrapper ? ( {children} diff --git a/packages/eui/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/packages/eui/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap index 0eaccf1676c..8538f4d2c15 100644 --- a/packages/eui/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap +++ b/packages/eui/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap @@ -11,7 +11,7 @@ exports[`EuiButtonEmpty is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Content @@ -28,7 +28,7 @@ exports[`EuiButtonEmpty props color accent is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -43,7 +43,7 @@ exports[`EuiButtonEmpty props color accentSecondary is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -58,7 +58,7 @@ exports[`EuiButtonEmpty props color danger is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -73,7 +73,7 @@ exports[`EuiButtonEmpty props color primary is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -88,7 +88,7 @@ exports[`EuiButtonEmpty props color success is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -103,7 +103,7 @@ exports[`EuiButtonEmpty props color text is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -118,7 +118,7 @@ exports[`EuiButtonEmpty props color warning is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -135,7 +135,7 @@ exports[`EuiButtonEmpty props contentProps is rendered 1`] = ` data-test-subj="test subject string" > Content @@ -152,7 +152,7 @@ exports[`EuiButtonEmpty props flush both is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -167,7 +167,7 @@ exports[`EuiButtonEmpty props flush left is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -182,7 +182,7 @@ exports[`EuiButtonEmpty props flush right is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -199,7 +199,7 @@ exports[`EuiButtonEmpty props href secures the rel attribute when the target is class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -218,7 +218,7 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = ` data-euiicon-type="user" /> Content @@ -235,7 +235,7 @@ exports[`EuiButtonEmpty props iconSide right is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Content @@ -260,7 +260,7 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = ` data-euiicon-type="user" /> @@ -277,7 +277,7 @@ exports[`EuiButtonEmpty props isDisabled is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -293,7 +293,7 @@ exports[`EuiButtonEmpty props isDisabled renders a button even when href is defi class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -309,7 +309,7 @@ exports[`EuiButtonEmpty props isDisabled renders if passed simply as disabled 1` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -331,7 +331,7 @@ exports[`EuiButtonEmpty props isLoading is rendered 1`] = ` style="border-color: #0b64dd currentcolor currentcolor currentcolor;" /> @@ -347,7 +347,7 @@ exports[`EuiButtonEmpty props isSelected is rendered as false 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -363,7 +363,7 @@ exports[`EuiButtonEmpty props isSelected is rendered as true 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -378,7 +378,7 @@ exports[`EuiButtonEmpty props size m is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -393,7 +393,7 @@ exports[`EuiButtonEmpty props size s is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -408,7 +408,7 @@ exports[`EuiButtonEmpty props size xs is rendered 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > @@ -424,7 +424,7 @@ exports[`EuiButtonEmpty props textProps is rendered 1`] = ` > Content diff --git a/packages/eui/src/components/button/button_empty/button_empty.styles.ts b/packages/eui/src/components/button/button_empty/button_empty.styles.ts index 8445abf7319..91cf1999b2c 100644 --- a/packages/eui/src/components/button/button_empty/button_empty.styles.ts +++ b/packages/eui/src/components/button/button_empty/button_empty.styles.ts @@ -75,6 +75,15 @@ export const euiButtonEmptyStyles = (euiThemeContext: UseEuiTheme) => { `, })} } + + .euiButtonEmpty__content { + gap: ${euiTheme.size.s}; + } + + .euiButtonEmpty__text { + /* unset default EuiButtonDisplayContent text padding */ + padding: 0; + } `, left: css` ${logicalCSS('margin-right', euiTheme.size.s)} diff --git a/packages/eui/src/components/button/button_empty/button_empty.tsx b/packages/eui/src/components/button/button_empty/button_empty.tsx index 7f4c3d61aaa..5ec354bfbfd 100644 --- a/packages/eui/src/components/button/button_empty/button_empty.tsx +++ b/packages/eui/src/components/button/button_empty/button_empty.tsx @@ -163,6 +163,7 @@ export const EuiButtonEmpty: FunctionComponent = ({ const innerNode = ( Option one @@ -48,7 +48,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi data-euiicon-type="bolt" /> Option two @@ -66,7 +66,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Option three @@ -105,7 +105,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl data-euiicon-type="bolt" /> Option one @@ -127,7 +127,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl data-euiicon-type="bolt" /> Option two @@ -146,7 +146,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Option three @@ -184,7 +184,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -205,7 +205,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -223,7 +223,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -262,7 +262,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option one @@ -284,7 +284,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option two @@ -303,7 +303,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -341,7 +341,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -362,7 +362,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -380,7 +380,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -419,7 +419,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option one @@ -441,7 +441,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option two @@ -460,7 +460,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -498,7 +498,7 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -519,7 +519,7 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -537,7 +537,7 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -576,7 +576,7 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option one @@ -598,7 +598,7 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option two @@ -617,7 +617,7 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -655,7 +655,7 @@ exports[`EuiButtonGroup button props color accentSecondary is rendered for multi data-euiicon-type="bolt" /> Option one @@ -676,7 +676,7 @@ exports[`EuiButtonGroup button props color accentSecondary is rendered for multi data-euiicon-type="bolt" /> Option two @@ -694,7 +694,7 @@ exports[`EuiButtonGroup button props color accentSecondary is rendered for multi class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -733,7 +733,7 @@ exports[`EuiButtonGroup button props color accentSecondary is rendered for singl data-euiicon-type="bolt" /> Option one @@ -755,7 +755,7 @@ exports[`EuiButtonGroup button props color accentSecondary is rendered for singl data-euiicon-type="bolt" /> Option two @@ -774,7 +774,7 @@ exports[`EuiButtonGroup button props color accentSecondary is rendered for singl class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -812,7 +812,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -833,7 +833,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -851,7 +851,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -890,7 +890,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option one @@ -912,7 +912,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option two @@ -931,7 +931,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -969,7 +969,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -990,7 +990,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -1008,7 +1008,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1047,7 +1047,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] = data-euiicon-type="bolt" /> Option one @@ -1069,7 +1069,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] = data-euiicon-type="bolt" /> Option two @@ -1088,7 +1088,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] = class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1126,7 +1126,7 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -1147,7 +1147,7 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -1165,7 +1165,7 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1204,7 +1204,7 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] = data-euiicon-type="bolt" /> Option one @@ -1226,7 +1226,7 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] = data-euiicon-type="bolt" /> Option two @@ -1245,7 +1245,7 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] = class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1283,7 +1283,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -1304,7 +1304,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -1322,7 +1322,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1361,7 +1361,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option one @@ -1383,7 +1383,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option two @@ -1402,7 +1402,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1440,7 +1440,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -1461,7 +1461,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -1479,7 +1479,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1518,7 +1518,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] = data-euiicon-type="bolt" /> Option one @@ -1540,7 +1540,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] = data-euiicon-type="bolt" /> Option two @@ -1559,7 +1559,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] = class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1599,7 +1599,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -1621,7 +1621,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -1639,7 +1639,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1680,7 +1680,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option one @@ -1703,7 +1703,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option two @@ -1722,7 +1722,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1760,7 +1760,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -1781,7 +1781,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -1799,7 +1799,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1838,7 +1838,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option one @@ -1860,7 +1860,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option two @@ -1879,7 +1879,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1917,7 +1917,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option one @@ -1938,7 +1938,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = ` data-euiicon-type="bolt" /> Option two @@ -1956,7 +1956,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -1995,7 +1995,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option one @@ -2017,7 +2017,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = ` data-euiicon-type="bolt" /> Option two @@ -2036,7 +2036,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -2075,7 +2075,7 @@ exports[`EuiButtonGroup type="multi" idToSelectedMap 1`] = ` data-euiicon-type="bolt" /> Option one @@ -2097,7 +2097,7 @@ exports[`EuiButtonGroup type="multi" idToSelectedMap 1`] = ` data-euiicon-type="bolt" /> Option two @@ -2115,7 +2115,7 @@ exports[`EuiButtonGroup type="multi" idToSelectedMap 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -2155,7 +2155,7 @@ exports[`EuiButtonGroup type="multi" renders 1`] = ` data-euiicon-type="bolt" /> Option one @@ -2176,7 +2176,7 @@ exports[`EuiButtonGroup type="multi" renders 1`] = ` data-euiicon-type="bolt" /> Option two @@ -2194,7 +2194,7 @@ exports[`EuiButtonGroup type="multi" renders 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -2233,7 +2233,7 @@ exports[`EuiButtonGroup type="single" idSelected 1`] = ` data-euiicon-type="bolt" /> Option one @@ -2255,7 +2255,7 @@ exports[`EuiButtonGroup type="single" idSelected 1`] = ` data-euiicon-type="bolt" /> Option two @@ -2274,7 +2274,7 @@ exports[`EuiButtonGroup type="single" idSelected 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three @@ -2315,7 +2315,7 @@ exports[`EuiButtonGroup type="single" renders 1`] = ` data-euiicon-type="bolt" /> Option one @@ -2337,7 +2337,7 @@ exports[`EuiButtonGroup type="single" renders 1`] = ` data-euiicon-type="bolt" /> Option two @@ -2356,7 +2356,7 @@ exports[`EuiButtonGroup type="single" renders 1`] = ` class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content" > Option three diff --git a/packages/eui/src/components/button/button_group/button_group.tsx b/packages/eui/src/components/button/button_group/button_group.tsx index 375f5efce5e..6320f7f4832 100644 --- a/packages/eui/src/components/button/button_group/button_group.tsx +++ b/packages/eui/src/components/button/button_group/button_group.tsx @@ -29,7 +29,7 @@ import { } from './button_group.styles'; export interface EuiButtonGroupOptionProps - extends EuiButtonDisplayContentProps, + extends Omit, CommonProps, EuiDisabledProps { /** diff --git a/packages/eui/src/components/button/split_button/__snapshots__/split_button.test.tsx.snap b/packages/eui/src/components/button/split_button/__snapshots__/split_button.test.tsx.snap index cf85bd2e987..16ee9264922 100644 --- a/packages/eui/src/components/button/split_button/__snapshots__/split_button.test.tsx.snap +++ b/packages/eui/src/components/button/split_button/__snapshots__/split_button.test.tsx.snap @@ -14,7 +14,7 @@ exports[`EuiSplitButton renders 1`] = ` class="emotion-euiButtonDisplayContent" > Primary Action diff --git a/packages/eui/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap b/packages/eui/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap index 4b51b2bc611..053a7651a9e 100644 --- a/packages/eui/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap +++ b/packages/eui/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap @@ -43,7 +43,7 @@ exports[`EuiCardSelect props can override text 1`] = ` class="emotion-euiButtonDisplayContent" > Custom text diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap index c4101d93c6b..9a276485928 100644 --- a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap +++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap @@ -628,11 +628,15 @@ exports[`EuiColorPicker prepend and append 1`] = `
- + + prepend + +
- + + append + +
diff --git a/packages/eui/src/components/color_picker/color_picker.styles.ts b/packages/eui/src/components/color_picker/color_picker.styles.ts index 25d86472346..b8881cfdeff 100644 --- a/packages/eui/src/components/color_picker/color_picker.styles.ts +++ b/packages/eui/src/components/color_picker/color_picker.styles.ts @@ -46,7 +46,7 @@ export const euiColorPickerStyles = (euiThemeContext: UseEuiTheme) => { padding-inline: ${euiTheme.size.xs}; } - .euiFormControlLayout__append { + .euiFormAppend { padding-inline: ${euiTheme.size.xxs} !important; } diff --git a/packages/eui/src/components/color_picker/color_picker.tsx b/packages/eui/src/components/color_picker/color_picker.tsx index 2521673beb7..e5babd1c12d 100644 --- a/packages/eui/src/components/color_picker/color_picker.tsx +++ b/packages/eui/src/components/color_picker/color_picker.tsx @@ -602,6 +602,7 @@ export const EuiColorPicker: FunctionComponent = ({ isInvalid={isInvalid} isDisabled={disabled} isDropdown + inputId={id} > Rows per page: 6 @@ -80,7 +80,7 @@ exports[`EuiDataGrid pagination renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > 1 @@ -103,7 +103,7 @@ exports[`EuiDataGrid pagination renders 1`] = ` class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > 2 diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx index 8b226a248b1..af1612770ed 100644 --- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx +++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx @@ -147,7 +147,7 @@ describe('EuiDataGridCellPopoverActions', () => { data-euiicon-type="starEmpty" /> 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 bc3d63f1d94..f40965fa990 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 @@ -258,7 +258,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Show all @@ -277,7 +277,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Hide all diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 3dcc7ab0245..b0844ffa87b 100644 --- a/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -162,7 +162,7 @@ exports[`DataGridSortingControl renders a toolbar button/popover allowing users class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Low-High @@ -180,7 +180,7 @@ exports[`DataGridSortingControl renders a toolbar button/popover allowing users class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > High-Low @@ -233,7 +233,7 @@ exports[`DataGridSortingControl renders a toolbar button/popover allowing users class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Pick fields to sort by @@ -257,7 +257,7 @@ exports[`DataGridSortingControl renders a toolbar button/popover allowing users class="euiButtonEmpty__content emotion-euiButtonDisplayContent" > Clear sorting diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap index 71c9f75e4ad..7e0e2279695 100644 --- a/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap +++ b/packages/eui/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap @@ -93,7 +93,7 @@ exports[`EuiDataGridColumnSortingDraggable [React 17] renders an EuiDraggable co class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Low-High @@ -111,7 +111,7 @@ exports[`EuiDataGridColumnSortingDraggable [React 17] renders an EuiDraggable co class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > High-Low @@ -233,7 +233,7 @@ exports[`EuiDataGridColumnSortingDraggable [React 18] renders an EuiDraggable co class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Low-High @@ -251,7 +251,7 @@ exports[`EuiDataGridColumnSortingDraggable [React 18] renders an EuiDraggable co class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > High-Low diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap index f3fa3d1fa19..5ef9dbf3988 100644 --- a/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap +++ b/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap @@ -49,7 +49,7 @@ exports[`useDataGridDisplaySelector displaySelector allows consumers to customiz class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Compact @@ -67,7 +67,7 @@ exports[`useDataGridDisplaySelector displaySelector allows consumers to customiz class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Normal @@ -85,7 +85,7 @@ exports[`useDataGridDisplaySelector displaySelector allows consumers to customiz class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Expanded @@ -144,7 +144,7 @@ exports[`useDataGridDisplaySelector displaySelector allows consumers to customiz class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Auto @@ -162,7 +162,7 @@ exports[`useDataGridDisplaySelector displaySelector allows consumers to customiz class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Static @@ -293,7 +293,7 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Compact @@ -311,7 +311,7 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Normal @@ -329,7 +329,7 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Expanded @@ -385,7 +385,7 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Auto @@ -403,7 +403,7 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed" > Static diff --git a/packages/eui/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap b/packages/eui/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap index b110004a4cb..9f804988a26 100644 --- a/packages/eui/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap +++ b/packages/eui/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap @@ -11,25 +11,17 @@ exports[`EuiAutoRefresh is rendered 1`] = ` class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend" > @@ -60,25 +52,17 @@ exports[`EuiAutoRefresh isPaused is false 1`] = ` class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend" > @@ -108,25 +92,17 @@ exports[`EuiAutoRefresh refreshInterval is rendered 1`] = ` class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend" > @@ -164,7 +140,7 @@ exports[`EuiAutoRefreshButton is rendered 1`] = ` data-euiicon-type="timeRefresh" /> Off @@ -190,7 +166,7 @@ exports[`EuiAutoRefreshButton isPaused is false 1`] = ` data-euiicon-type="timeRefresh" /> 1 second @@ -216,7 +192,7 @@ exports[`EuiAutoRefreshButton refreshInterval is rendered 1`] = ` data-euiicon-type="timeRefresh" /> 2 seconds diff --git a/packages/eui/src/components/date_picker/auto_refresh/auto_refresh.tsx b/packages/eui/src/components/date_picker/auto_refresh/auto_refresh.tsx index d8b08dd5366..227900d8d88 100644 --- a/packages/eui/src/components/date_picker/auto_refresh/auto_refresh.tsx +++ b/packages/eui/src/components/date_picker/auto_refresh/auto_refresh.tsx @@ -8,7 +8,7 @@ import React, { FunctionComponent, useState } from 'react'; import classNames from 'classnames'; -import { EuiFieldText, EuiFieldTextProps } from '../../form'; +import { EuiFieldText, EuiFieldTextProps, EuiFormPrepend } from '../../form'; import { EuiButtonEmpty, CommonEuiButtonEmptyProps, @@ -61,18 +61,14 @@ export const EuiAutoRefresh: FunctionComponent = ({ aria-label={autoRefeshLabel} onClick={() => setIsPopoverOpen((isOpen) => !isOpen)} prepend={ - setIsPopoverOpen((isOpen) => !isOpen)} - size="s" - color="text" - iconType="timeRefresh" + element="button" + label={{autoRefeshLabel}} + iconLeft="timeRefresh" isDisabled={isDisabled} - > - - {autoRefeshLabel} - - + onClick={() => setIsPopoverOpen((isOpen) => !isOpen)} + /> } readOnly={readOnly} disabled={isDisabled} diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap index 69a3753ef38..ad03158d798 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap +++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap @@ -16,26 +16,16 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo > @@ -103,26 +93,16 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = ` > @@ -189,25 +169,17 @@ exports[`EuiSuperDatePicker props isAutoRefreshOnly is rendered 1`] = ` class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend" > @@ -242,26 +214,18 @@ exports[`EuiSuperDatePicker props isAutoRefreshOnly passes required props 1`] = class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend" > @@ -316,27 +280,17 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = ` > @@ -406,26 +360,16 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = ` > @@ -472,26 +416,16 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = ` > @@ -538,26 +472,16 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = ` > @@ -603,7 +527,7 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = ` data-euiicon-type="refresh" /> Refresh @@ -628,26 +552,16 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = ` > @@ -715,26 +629,16 @@ exports[`EuiSuperDatePicker props width can be full 1`] = ` > @@ -803,26 +707,16 @@ exports[`EuiSuperDatePicker renders 1`] = ` > @@ -894,26 +788,16 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = ` > diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/time_window_buttons.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/time_window_buttons.test.tsx.snap index 43259d24c53..5b137c7ff21 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/time_window_buttons.test.tsx.snap +++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/time_window_buttons.test.tsx.snap @@ -24,7 +24,7 @@ exports[`EuiTimeWindowButtons renders 1`] = ` data-euiicon-type="arrowLeft" /> Previous @@ -51,7 +51,7 @@ exports[`EuiTimeWindowButtons renders 1`] = ` data-euiicon-type="magnifyWithMinus" /> Zoom out @@ -78,7 +78,7 @@ exports[`EuiTimeWindowButtons renders 1`] = ` data-euiicon-type="arrowRight" /> Next diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap index 7e9cbeca184..5dee6906419 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap +++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap @@ -313,11 +313,11 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel class="euiSwitch__label emotion-euiSwitch__label-compressed" id="generated-id" > - + @@ -418,26 +418,16 @@ exports[`EuiQuickSelectPopover is rendered 1`] = ` > `; diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index e1469d7d5af..7848881ac46 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -18,11 +18,8 @@ import React, { import { useEuiMemoizedStyles } from '../../../../services'; import { useEuiI18n } from '../../../i18n'; -import { EuiButtonEmpty } from '../../../button'; -import { EuiButtonEmptyPropsForButton } from '../../../button/button_empty/button_empty'; -import { EuiIcon } from '../../../icon'; import { EuiPopover } from '../../../popover'; - +import { EuiFormAppendPrependButtonProps, EuiFormPrepend } from '../../../form'; import { euiQuickSelectPopoverStyles } from './quick_select_popover.styles'; import { EuiQuickSelectPanel } from './quick_select_panel'; import { EuiQuickSelect } from './quick_select'; @@ -41,7 +38,7 @@ import { } from '../../types'; export type EuiQuickSelectButtonProps = Partial< - Omit + Omit >; export type CustomQuickSelectRenderOptions = { @@ -76,11 +73,7 @@ export interface EuiQuickSelectPopoverProps { export const EuiQuickSelectPopover: FunctionComponent< EuiQuickSelectPopoverProps > = ({ applyTime: _applyTime, buttonProps = {}, ...props }) => { - const { - contentProps: buttonContentProps, - onClick: buttonOnClick, - ...quickSelectButtonProps - } = buttonProps; + const { onClick: buttonOnClick, ...quickSelectButtonProps } = buttonProps; const [prevQuickSelect, setQuickSelect] = useState(); const [isOpen, setIsOpen] = useState(false); @@ -105,8 +98,6 @@ export const EuiQuickSelectPopover: FunctionComponent< 'Date quick select' ); - const styles = useEuiMemoizedStyles(euiQuickSelectPopoverStyles); - const quickSelectButtonOnClick = ( e: MouseEvent & MouseEvent ) => { @@ -115,24 +106,17 @@ export const EuiQuickSelectPopover: FunctionComponent< }; const quickSelectButton = ( - - - + /> ); return ( diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx index a272bc261a5..c21603d6193 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx @@ -158,7 +158,7 @@ describe('EuiSuperDatePicker', () => { const quickSelectButtonProps: EuiSuperDatePickerProps['quickSelectButtonProps'] = { onMouseDown, - color: 'danger', + 'aria-label': 'Quick Select', }; const { getByTestSubject } = render( @@ -170,7 +170,10 @@ describe('EuiSuperDatePicker', () => { const quickSelectButton = getByTestSubject( 'superDatePickerToggleQuickMenuButton' )!; - expect(quickSelectButton.className).toContain('danger'); + expect(quickSelectButton).toHaveAttribute( + 'aria-label', + quickSelectButtonProps['aria-label'] + ); fireEvent.mouseDown(quickSelectButton); expect(onMouseDown).toHaveBeenCalledTimes(1); diff --git a/packages/eui/src/components/filter_group/filter_button.styles.ts b/packages/eui/src/components/filter_group/filter_button.styles.ts index 664986ddf0b..130003c61cb 100644 --- a/packages/eui/src/components/filter_group/filter_button.styles.ts +++ b/packages/eui/src/components/filter_group/filter_button.styles.ts @@ -190,6 +190,7 @@ export const euiFilterButtonChildStyles = (euiThemeContext: UseEuiTheme) => { euiFilterButton__text: css` ${euiTextShift('bold', 'data-text', euiTheme)} ${euiTextTruncate()} + ${logicalCSS('padding-horizontal', euiTheme.size.xs)} `, hasNotification: css` ${logicalCSS( diff --git a/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap index 260aeb8580b..7e4d4d2a393 100644 --- a/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap +++ b/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap @@ -101,11 +101,11 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
- + Span @@ -298,11 +298,15 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
- + + String + +
- + + String + +
`; diff --git a/packages/eui/src/components/form/field_password/field_password.stories.tsx b/packages/eui/src/components/form/field_password/field_password.stories.tsx index e0ffabd8293..a63950576e9 100644 --- a/packages/eui/src/components/form/field_password/field_password.stories.tsx +++ b/packages/eui/src/components/form/field_password/field_password.stories.tsx @@ -13,8 +13,8 @@ import { disableStorybookControls, enableFunctionToggleControls, } from '../../../../.storybook/utils'; -import { EuiIcon } from '../../icon'; import { EuiFieldPassword, EuiFieldPasswordProps } from './field_password'; +import { EuiFormAppend, EuiFormPrepend } from '../form_control_layout'; const meta: Meta = { title: 'Forms/EuiFieldPassword', @@ -24,7 +24,7 @@ const meta: Meta = { control: 'radio', options: [undefined, 'icon', 'text'], mapping: { - icon: , + icon: , text: 'Appended', undefined: undefined, }, @@ -33,7 +33,7 @@ const meta: Meta = { control: 'radio', options: [undefined, 'icon', 'text'], mapping: { - icon: , + icon: , text: 'Prepended', undefined: undefined, }, diff --git a/packages/eui/src/components/form/field_search/field_search.stories.tsx b/packages/eui/src/components/form/field_search/field_search.stories.tsx index 40f95f854ba..d07e782e551 100644 --- a/packages/eui/src/components/form/field_search/field_search.stories.tsx +++ b/packages/eui/src/components/form/field_search/field_search.stories.tsx @@ -13,8 +13,8 @@ import { disableStorybookControls, enableFunctionToggleControls, } from '../../../../.storybook/utils'; -import { EuiIcon } from '../../icon'; import { EuiFieldSearch, EuiFieldSearchProps } from './field_search'; +import { EuiFormAppend, EuiFormPrepend } from '../form_control_layout'; const meta: Meta = { title: 'Forms/EuiFieldSearch', @@ -24,7 +24,7 @@ const meta: Meta = { control: 'radio', options: [undefined, 'icon', 'text'], mapping: { - icon: , + icon: , text: 'Appended', undefined: undefined, }, @@ -33,7 +33,7 @@ const meta: Meta = { control: 'radio', options: [undefined, 'icon', 'text'], mapping: { - icon: , + icon: , text: 'Prepended', undefined: undefined, }, diff --git a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap index 2440cca85fa..26bb7faaa93 100644 --- a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap +++ b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap @@ -368,11 +368,15 @@ exports[`EuiFormControlLayout props one append string is rendered 1`] = `
- + + 1 + +
`; @@ -420,11 +424,15 @@ exports[`EuiFormControlLayout props one prepend string is rendered 1`] = `
- + + 1 + +
+ + Label + +
+`; + +exports[`EuiFormAppendPrepend is rendered 1`] = ` +
+ + Label + +
+`; + +exports[`EuiFormPrepend is rendered 1`] = ` +
+ + Label + +
+`; diff --git a/packages/eui/src/components/form/form_control_layout/append_prepend/form_append.stories.tsx b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append.stories.tsx new file mode 100644 index 00000000000..5c170d3c180 --- /dev/null +++ b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append.stories.tsx @@ -0,0 +1,76 @@ +/* + * 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 type { Meta, StoryObj } from '@storybook/react'; + +import { + hideStorybookControls, + enableFunctionToggleControls, +} from '../../../../../.storybook/utils'; + +import { EuiFieldText } from '../../field_text'; +import { EuiNotificationBadge } from '../../../badge'; +import { EuiFormAppend, type EuiFormAppendProps } from './form_append_prepend'; + +const meta: Meta = { + title: 'Forms/EuiForm/EuiFormControlLayout/Subcomponents/EuiFormAppend', + component: EuiFormAppend, + argTypes: { + label: { control: 'text' }, + iconLeft: { control: 'text' }, + iconRight: { control: 'text' }, + children: { + control: 'radio', + options: [undefined, 'badge', 'text'], + mapping: { + badge: 1, + text: 'Content', + undefined: undefined, + }, + }, + isDisabled: { control: 'boolean' }, + }, + args: { + inputId: '', + element: 'div', + compressed: false, + label: '', + iconLeft: '', + iconRight: '', + children: undefined, + // @ts-expect-error - ignore exclusive union + isDisabled: false, + }, +}; +hideStorybookControls(meta, ['aria-label']); +enableFunctionToggleControls(meta, ['onClick']); + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + label: 'Append', + // @ts-expect-error - onClick is optional but the toggle is enabled + onClick: false, + }, + render: ({ compressed, inputId, ...args }: EuiFormAppendProps) => { + const textFieldProps = { + compressed, + id: inputId, + }; + + return ( + } + /> + ); + }, +}; diff --git a/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles.ts b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles.ts new file mode 100644 index 00000000000..380710945e3 --- /dev/null +++ b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles.ts @@ -0,0 +1,100 @@ +/* + * 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 { css } from '@emotion/react'; +import { UseEuiTheme } from '@elastic/eui-theme-common'; + +import { logicalCSS } from '../../../../global_styling'; +import { buttonSelectors } from '../form_control_layout.styles'; +import { euiFormVariables } from '../../form.styles'; + +export const euiFormAppendPrependStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + const form = euiFormVariables(euiThemeContext); + + const buttons = buttonSelectors; + + return { + side: css` + position: relative; + display: flex; + align-items: center; + gap: ${euiTheme.size.xs}; + block-size: 100%; + max-inline-size: 100%; + `, + uncompressed: css` + &:not(:has(> ${buttons}:first-child, > *:first-child ${buttons})) { + ${logicalCSS('padding-left', euiTheme.size.m)} + } + + &:not(:has(> ${buttons}:last-child, > *:last-child ${buttons})) { + ${logicalCSS('padding-right', euiTheme.size.m)} + } + `, + compressed: css` + &:not(:has(> ${buttons}:first-child, > *:first-child ${buttons})) { + ${logicalCSS('padding-left', euiTheme.size.s)} + } + + &:not(:has(> ${buttons}:last-child, > *:last-child ${buttons})) { + ${logicalCSS('padding-right', euiTheme.size.s)} + } + `, + append: css` + border-radius: 0; + border-start-end-radius: ${euiTheme.border.radius.small}; + border-end-end-radius: ${euiTheme.border.radius.small}; + `, + prepend: css` + border-radius: 0; + border-start-start-radius: ${euiTheme.border.radius.small}; + border-end-start-radius: ${euiTheme.border.radius.small}; + `, + isInteractive: css` + color: ${euiTheme.colors.textPrimary}; + + &:hover { + background-color: ${euiTheme.colors.backgroundBaseInteractiveHover}; + } + + &:focus-visible { + outline: none; + + /* apply a focus style that matches input focus more closely */ + &::after { + content: ''; + position: absolute; + inset: 0; + border: ${euiTheme.border.width.thick} solid + ${euiTheme.components.forms.borderFocused}; + /* ensure it stays on top of hovered borders */ + z-index: 2; + pointer-events: none; + border-radius: inherit; + } + } + + .euiFormLabel { + color: currentColor; + cursor: pointer; + } + + * { + cursor: pointer; + } + `, + disabled: css` + color: ${form.textColorDisabled}; + + .euiFormLabel { + color: ${form.textColorDisabled}; + } + `, + }; +}; diff --git a/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.test.tsx b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.test.tsx new file mode 100644 index 00000000000..448a3a692b7 --- /dev/null +++ b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.test.tsx @@ -0,0 +1,277 @@ +/* + * 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 { fireEvent } from '@testing-library/react'; + +import { shouldRenderCustomStyles } from '../../../../test/internal'; +import { + EuiFormAppend, + EuiFormAppendPrepend, + EuiFormAppendPrependProps, + EuiFormPrepend, +} from './form_append_prepend'; +import { requiredProps } from '../../../../test'; +import { render } from '../../../../test/rtl'; +import { EuiFieldText } from '../../field_text'; + +const sharedProps = { + label: 'Label', + 'data-test-subj': 'euiFormAppendPrepend', +}; + +const defaultProps = { + ...sharedProps, + side: 'append' as EuiFormAppendPrependProps['side'], +}; + +describe('EuiFormAppend', () => { + shouldRenderCustomStyles(); + + it('is rendered', () => { + const { container, getByTestSubject } = render( + + ); + + const classes = Object.values( + getByTestSubject(requiredProps['data-test-subj']).classList + ); + + expect(container.firstChild).toMatchSnapshot(); + expect(classes).toContain('euiFormAppend'); + }); +}); + +describe('EuiFormPrepend', () => { + shouldRenderCustomStyles(); + + it('is rendered', () => { + const { container, getByTestSubject } = render( + + ); + + const classes = Object.values( + getByTestSubject(requiredProps['data-test-subj']).classList + ); + + expect(container.firstChild).toMatchSnapshot(); + expect(classes).toContain('euiFormPrepend'); + }); +}); + +describe('EuiFormAppendPrepend', () => { + shouldRenderCustomStyles(); + + it('is rendered', () => { + const { container } = render( + + ); + + expect(container.firstChild).toMatchSnapshot(); + }); + + describe('props', () => { + describe('element', () => { + it('renders a div', () => { + const { getByTestSubject } = render( + + ); + + const element = getByTestSubject(defaultProps['data-test-subj']); + + expect(element).toBeInTheDocument(); + expect(element.tagName).toBe('DIV'); + }); + + it('renders a button', () => { + const { getByTestSubject } = render( + + ); + + const element = getByTestSubject(defaultProps['data-test-subj']); + + expect(element).toBeInTheDocument(); + expect(element.tagName).toBe('BUTTON'); + }); + }); + + describe('label', () => { + it('renders a label element when an `id` is provided', () => { + const { getByText } = render( + + ); + + const element = getByText(defaultProps.label); + + expect(element).toBeInTheDocument(); + expect(element.tagName).toBe('LABEL'); + }); + + it('renders a span element when no `id` is provided', () => { + const { getByText } = render( + + ); + + const element = getByText(defaultProps.label); + + expect(element).toBeInTheDocument(); + expect(element.tagName).toBe('SPAN'); + }); + + it('renders a span element for buttons', () => { + const { getByText } = render( + + ); + + const element = getByText(defaultProps.label); + + expect(element).toBeInTheDocument(); + expect(element.tagName).toBe('SPAN'); + }); + }); + + describe('iconLeft', () => { + it('renders an icon on the left side', () => { + const { getByTestSubject } = render( + + ); + + expect( + getByTestSubject(defaultProps['data-test-subj']).firstChild + ).toHaveAttribute('data-euiicon-type', 'faceHappy'); + }); + }); + + describe('iconRight', () => { + it('renders an icon on the left side', () => { + const { getByTestSubject } = render( + + ); + + expect( + getByTestSubject(defaultProps['data-test-subj']).lastChild + ).toHaveAttribute('data-euiicon-type', 'faceHappy'); + }); + }); + + describe('children', () => { + it('renders', () => { + const { side, 'data-test-subj': dataTestSubj } = defaultProps; + + const { getByTestSubject } = render( + + Content + + ); + + const element = getByTestSubject(dataTestSubj); + + expect(element.children.length).toBe(1); + expect(element.firstChild).toHaveTextContent('Content'); + }); + + it('renders `children` as last child', () => { + const { getByTestSubject } = render( + + Content + + ); + + const element = getByTestSubject(defaultProps['data-test-subj']); + + expect(element.firstChild).toHaveTextContent(defaultProps.label); + expect(element.lastChild).toHaveTextContent('Content'); + }); + }); + + describe('inputId', () => { + it('renders `for` attribute when `inputId` is passed', () => { + const { getByText } = render( + + ); + + expect(getByText(defaultProps.label)).toHaveAttribute('for', 'testId'); + }); + + it('does not render `for` attribute for buttons when `inputId` is passed', () => { + const { getByText } = render( + + ); + + expect(getByText(defaultProps.label)).not.toHaveAttribute('for'); + }); + + it('renders `for` attribute when `id` is set on the parent form element', () => { + const { getByText } = render( + } + /> + ); + + expect(getByText(defaultProps.label)).toHaveAttribute('for', 'testId'); + }); + }); + + describe('compressed', () => { + it('renders compressed styles', () => { + const { getByTestSubject } = render( + + ); + + const classes = Object.values( + getByTestSubject(defaultProps['data-test-subj']).classList + ); + + expect(classes.some((clx) => clx.includes('compressed'))).toBe(true); + }); + + it('renders compressed styles when the parent form element is compressed', () => { + const { getByTestSubject } = render( + } + /> + ); + + const classes = Object.values( + getByTestSubject(defaultProps['data-test-subj']).classList + ); + + expect(classes.some((clx) => clx.includes('compressed'))).toBe(true); + }); + }); + + describe('onClick', () => { + it('renders a button with click handler', () => { + const onClick = jest.fn(); + + const { getByTestSubject } = render( + + ); + + const element = getByTestSubject(defaultProps['data-test-subj']); + + expect(element).toBeInTheDocument(); + expect(element.tagName).toBe('BUTTON'); + + fireEvent.click(element); + + expect(onClick).toHaveBeenCalledTimes(1); + }); + }); + }); +}); diff --git a/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.tsx b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.tsx new file mode 100644 index 00000000000..dec9b1198ee --- /dev/null +++ b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.tsx @@ -0,0 +1,183 @@ +/* + * 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, { + ButtonHTMLAttributes, + FunctionComponent, + HTMLAttributes, + ReactNode, + useContext, +} from 'react'; +import classNames from 'classnames'; + +import { useEuiMemoizedStyles } from '../../../../services'; +import { CommonProps, ExclusiveUnion } from '../../../common'; +import { EuiIcon, IconType } from '../../../icon'; +import { EuiFormLabel } from '../../form_label'; +import { + _EuiFormLabelProps, + _EuiFormLabelSpanProps, +} from '../../form_label/form_label'; +import { euiFormAppendPrependStyles } from './form_append_prepend.styles'; +import { EuiFormControlLayoutContext } from '../form_control_layout_context'; + +export type EuiFormAppendProps = EuiFormAppendPrependBaseProps; + +export const EuiFormAppend = ({ className, ...rest }: EuiFormAppendProps) => { + const classes = classNames('euiFormAppend', className); + + return ; +}; + +export type EuiFormPrependProps = EuiFormAppendPrependBaseProps; + +export const EuiFormPrepend = ({ className, ...rest }: EuiFormPrependProps) => { + const classes = classNames('euiFormPrepend', className); + + return ; +}; + +export type EuiFormAppendPrependCommonProps = CommonProps & { + /** + * Main content label + */ + label?: ReactNode; + /** + * Left side icon + */ + iconLeft?: IconType; + /** + * Right side icon + */ + iconRight?: IconType; + /** + * Optional content that will be appended to `label` and icons + */ + children?: ReactNode; + /** + * id of the input element that the form label is linked to via `htmlFor` attribute + */ + inputId?: string; + /** + * Renders the element with smaller height and padding + */ + compressed?: boolean; +}; + +export type EuiFormAppendPrependButtonProps = + EuiFormAppendPrependCommonProps & { + /** + * Defines the rendered HTML element + */ + element?: 'button'; + isDisabled?: boolean; + } & ButtonHTMLAttributes; + +export type EuiFormAppendPrependDivProps = EuiFormAppendPrependCommonProps & { + /** + * Defines the rendered HTML element + */ + element?: 'div'; +} & HTMLAttributes; + +export type EuiFormAppendPrependBaseProps = ExclusiveUnion< + EuiFormAppendPrependButtonProps, + EuiFormAppendPrependDivProps +>; + +export type EuiFormAppendPrependProps = { + side: 'append' | 'prepend'; +} & EuiFormAppendPrependBaseProps; + +/* Internal component */ + +export const EuiFormAppendPrepend: FunctionComponent< + EuiFormAppendPrependProps +> = ({ + element = 'div', + id, + side, + children, + className, + inputId: _inputId, + compressed: _compressed, + iconLeft: _iconLeft, + iconRight: _iconRight, + label: _label, + isDisabled: _isDisabled, + disabled, + ...rest +}) => { + const styles = useEuiMemoizedStyles(euiFormAppendPrependStyles); + + const { compressed: formLayoutCompressed, inputId: formLayoutInputId } = + useContext(EuiFormControlLayoutContext); + const compressed = _compressed ?? formLayoutCompressed; + const inputId = _inputId ?? formLayoutInputId; + + // Adding automatic check on onClick for DevX convinience, this doesn't replace defining `element` + const isButton = element === 'button' || typeof rest.onClick === 'function'; + const isDisabled = _isDisabled || disabled; + + const iconLeft = _iconLeft && ; + const iconRight = _iconRight && ; + + const cssStyles = [ + styles.side, + compressed ? styles.compressed : styles.uncompressed, + isButton && !isDisabled && styles.isInteractive, + isDisabled && styles.disabled, + isButton && styles[side], + ]; + + const labelProps = isButton + ? ({ + type: 'span', + id, + className: 'eui-textTruncate', + } as _EuiFormLabelSpanProps) + : ({ + type: 'label', + id, + htmlFor: inputId || undefined, + } as _EuiFormLabelProps); + + const label = _label && {_label}; + + const content = ( + <> + {iconLeft} + {label} + {iconRight} + {children} + + ); + + if (isButton) { + return ( + + ); + } + + return ( +
)} + > + {content} +
+ ); +}; diff --git a/packages/eui/src/components/form/form_control_layout/append_prepend/form_prepend.stories.tsx b/packages/eui/src/components/form/form_control_layout/append_prepend/form_prepend.stories.tsx new file mode 100644 index 00000000000..b0df65c5860 --- /dev/null +++ b/packages/eui/src/components/form/form_control_layout/append_prepend/form_prepend.stories.tsx @@ -0,0 +1,78 @@ +/* + * 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 type { Meta, StoryObj } from '@storybook/react'; + +import { + hideStorybookControls, + enableFunctionToggleControls, +} from '../../../../../.storybook/utils'; + +import { EuiFieldText } from '../../field_text'; +import { EuiNotificationBadge } from '../../../badge'; +import { + EuiFormPrepend, + type EuiFormPrependProps, +} from './form_append_prepend'; + +const meta: Meta = { + title: 'Forms/EuiForm/EuiFormControlLayout/Subcomponents/EuiFormPrepend', + component: EuiFormPrepend, + argTypes: { + label: { control: 'text' }, + iconLeft: { control: 'text' }, + iconRight: { control: 'text' }, + children: { + control: 'radio', + options: [undefined, 'badge', 'text'], + mapping: { + badge: 1, + text: 'Content', + undefined: undefined, + }, + }, + }, + args: { + inputId: '', + element: 'div', + compressed: false, + label: '', + iconLeft: '', + iconRight: '', + children: undefined, + // @ts-expect-error - ignore exclusive union + isDisabled: false, + }, +}; +hideStorybookControls(meta, ['aria-label']); +enableFunctionToggleControls(meta, ['onClick']); + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + label: 'Prepend', + // @ts-expect-error - onClick is optional but the toggle is enabled + onClick: false, + }, + render: ({ compressed, inputId, ...args }: EuiFormPrependProps) => { + const textFieldProps = { + compressed, + id: inputId, + }; + + return ( + } + /> + ); + }, +}; diff --git a/packages/eui/src/components/form/form_control_layout/append_prepend/index.ts b/packages/eui/src/components/form/form_control_layout/append_prepend/index.ts new file mode 100644 index 00000000000..0d43a856e6a --- /dev/null +++ b/packages/eui/src/components/form/form_control_layout/append_prepend/index.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ + +export { + EuiFormAppend, + EuiFormPrepend, + type EuiFormAppendProps, + type EuiFormPrependProps, + type EuiFormAppendPrependButtonProps, + type EuiFormAppendPrependDivProps, +} from './form_append_prepend'; diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx index 71afc2763d1..f106a7511c5 100644 --- a/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx +++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx @@ -7,6 +7,7 @@ */ import React, { ChangeEvent, useState } from 'react'; +import { css } from '@emotion/react'; import type { Meta, StoryObj } from '@storybook/react'; import { action } from '@storybook/addon-actions'; @@ -22,6 +23,15 @@ import { EuiText } from '../../text'; import { EuiFormRow } from '../form_row'; import { EuiSelectable, EuiSelectableOption } from '../../selectable'; import { EuiNotificationBadge } from '../../badge'; +import { EuiCopy } from '../../copy'; +import { EuiFlexGroup } from '../../flex'; +import { + EuiDragDropContext, + EuiDraggable, + EuiDroppable, +} from '../../drag_and_drop'; +import { EuiFormLabel } from '../form_label'; +import { EuiFilterButton } from '../../filter_group'; import { EuiFieldSearch } from '../field_search'; import { @@ -32,6 +42,8 @@ import { EuiFormControlLayout, EuiFormControlLayoutProps, } from './form_control_layout'; +import { EuiFormAppend, EuiFormPrepend } from './append_prepend'; +import { UseEuiTheme } from '@elastic/eui-theme-common'; const meta: Meta = { title: 'Forms/EuiForm/EuiFormControlLayout', @@ -81,7 +93,7 @@ export const Playground: Story = { const { readOnly, isDisabled, fullWidth, compressed } = args; const childProps = { readOnly, - isDisabled, + disabled: isDisabled, fullWidth, compressed, isInvalid: args.isInvalid, @@ -167,8 +179,11 @@ export const FormControlButton: Story = { }, }; -export const AppendPrepend: Story = { - tags: ['vrt-only'], +/* TODO: remove testing story */ +export const AppendPrepend_REVIEW_EXAMPLE: Story = { + parameters: { + loki: { skip: true }, + }, render: function Render() { const isDesktop = useIsWithinMinBreakpoint('xl'); return ( @@ -329,6 +344,785 @@ export const AppendPrepend: Story = { }, }; +export const AppendPrepend: Story = { + tags: ['vrt-only'], + render: function Render(args) { + const isDesktop = useIsWithinMinBreakpoint('xl'); + + const renderContent = (compressed: boolean = false) => { + const idBase = `input-${compressed ? 'compressed' : ''}`; + + return ( + + } + autoFocus + /> + + } + append={ + + } + /> + + + } + append={ + + } + /> + + + 1 + + } + append={ + + 1 + + } + /> + + + + + } + append={ + + + + } + /> + + + } + append={ + + } + /> + } + /> + + } + append={ + + } + /> + + + } + /> + + } + append="String" + /> + + ); + }; + + return ( + + {renderContent(false)} + {renderContent(true)} + + ); + }, +}; + +/* TODO: remove testing story */ +export const Kitchensink: Story = { + parameters: { + codeSnippet: { + skip: true, + }, + loki: { skip: true }, + }, + render: function Render(args) { + const { readOnly, isDisabled, fullWidth, compressed } = args; + const isDesktop = useIsWithinMinBreakpoint('xl'); + + const [isPopoverOpenA, setPopoverOpenA] = useState(false); + const [isPopoverOpenB, setPopoverOpenB] = useState(false); + + const formStyles = ({ euiTheme }: UseEuiTheme) => css` + display: flex; + flex-direction: column; + gap: ${euiTheme.size.m}; + `; + + const childProps = { + readOnly, + disabled: isDisabled, + fullWidth, + compressed, + isInvalid: args.isInvalid, + }; + + return ( + + + +

Styled wrapper API

+ + + + + + 1 + + } + /> + + } + append={ + + + + } + /> + + + 1 + + } + /> + + + {(copy) => ( + + )} + + } + /> + + setPopoverOpenA(false)} + button={ + setPopoverOpenA(!isPopoverOpenA)} + /> + } + > + Popover content + + } + append={ + + + + } + /> + + + + 1 + + + } + closePopover={() => setPopoverOpenA(false)} + > + Popover content + + } + /> + + + } + /> + + + } + append={ + + } + /> + + {/* Drag examples */} + + +

Drag examples

+ + + {}}> + + + {(provided) => ( + + } + /> + )} + + + + + +

With custom styles (reduce spacing and hover styles)

+ + + {}}> + + + {(provided) => ( +
css` + .euiFormControlLayout__prepend { + &:is(:hover, :active) { + &::before { + content: ''; + position: absolute; + inset: 0; + background-color: ${euiTheme.colors + .backgroundBaseInteractiveHover}; + } + + .euiFormAppendPrepend__dragHandle { + color: ${euiTheme.colors.textParagraph}; + } + } + } + `} + > + + + + + + + + } + /> +
+ )} + + + + + + {/* split here */} + + + +

Custom content API

+ + + + + , + 'Prepended', + , + 1, + ]} + /> + + } + append={ + + Tooltip + + } + /> + + + + Appended + + 1 + + + } + /> + + + {(copy) => ( + + Copy + + )} + + } + /> + + setPopoverOpenB(!isPopoverOpenB)} + > + + + } + closePopover={() => setPopoverOpenB(false)} + > + Popover content + + } + append={ + + Tooltip + + } + /> + + setPopoverOpenB(!isPopoverOpenB)} + > + + + } + closePopover={() => setPopoverOpenB(false)} + > + Popover content + + } + /> + + } + /> + + + + , + ]} + append={[ + + } + closePopover={() => {}} + > + Popover content + , + 'String', + ]} + /> + + {/* Drag examples */} + + +

Drag examples

+ + + {}}> + + + {(provided) => ( + + + + String + + + } + /> + )} + + + + + +

With custom styles (reduce spacing and hover styles)

+ + + {}}> + + + {(provided) => ( +
css` + .euiFormControlLayout__prepend { + &:is(:hover, :active) { + &::before { + content: ''; + position: absolute; + inset: 0; + background-color: ${euiTheme.colors + .backgroundBaseInteractiveHover}; + } + + .euiFormAppendPrepend__dragHandle { + color: ${euiTheme.colors.textParagraph}; + } + } + } + `} + > + + + + + String + + + + } + /> +
+ )} + + + + + + ); + }, +}; + export const HighContrast: Story = { ...AppendPrepend, tags: ['vrt-only'], diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts index 852272d3603..3d41ca9093e 100644 --- a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts +++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts @@ -9,11 +9,19 @@ import { css } from '@emotion/react'; import { UseEuiTheme } from '../../../services'; -import { euiTextTruncate, logicalCSS } from '../../../global_styling'; +import { + euiButtonSizeMap, + euiTextTruncate, + logicalCSS, +} from '../../../global_styling'; import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast'; +import { type EuiButtonDisplaySizes } from '../../button/button_display/_button_display'; import { euiFormVariables } from '../form.styles'; +export const buttonSelectors = + '*:is(.euiButton, .euiButtonEmpty, .euiButtonIcon, .euiFormAppend, .euiFormPrepend)'; + export const euiFormControlLayoutStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; const form = euiFormVariables(euiThemeContext); @@ -144,13 +152,30 @@ export const euiFormControlLayoutSideNodeStyles = ( const { euiTheme } = euiThemeContext; const form = euiFormVariables(euiThemeContext); + const buttonSizes = euiButtonSizeMap(euiThemeContext); const uncompressedHeight = form.controlHeight; const compressedHeight = form.controlCompressedHeight; - const buttons = '*:is(.euiButton, .euiButtonEmpty, .euiButtonIcon)'; + const appendPrepend = '*:is(.euiFormAppend, .euiFormPrepend)'; + const buttons = buttonSelectors; const text = '*:is(.euiFormLabel, .euiText)'; + const _buttonPadding = (size: EuiButtonDisplaySizes) => + logicalCSS('padding-horizontal', buttonSizes[size].padding); + + const buttonIconStyles = ` + &:first-child { + ${logicalCSS('border-top-right-radius', '0')} + ${logicalCSS('border-bottom-right-radius', '0')} + } + + &:last-child { + ${logicalCSS('border-top-left-radius', '0')} + ${logicalCSS('border-bottom-left-radius', '0')} + } + `; + return { euiFormControlLayout__side: css` ${logicalCSS('height', '100%')} @@ -163,7 +188,13 @@ export const euiFormControlLayoutSideNodeStyles = ( /* Overrides */ + :has(${appendPrepend}) > *, + ${appendPrepend} > ${buttons} { + block-size: 100%; + } + ${buttons} { + block-size: 100%; /* Override button hover/active transform */ transform: none !important; /* stylelint-disable-line declaration-no-important */ @@ -179,17 +210,6 @@ export const euiFormControlLayoutSideNodeStyles = ( overflow: hidden; text-overflow: ellipsis; } - - /* Account for button padding when spacing children */ - /* Second > * selector accounts for buttons inside popover & tooltip wrappers */ - - &:not(:has(> ${buttons}:first-child, > *:first-child > ${buttons})) { - ${logicalCSS('padding-left', euiTheme.size.s)} - } - - &:not(:has(> ${buttons}:last-child, > *:last-child > ${buttons})) { - ${logicalCSS('padding-right', euiTheme.size.s)} - } `, append: css( highContrastModeStyles(euiThemeContext, { @@ -229,6 +249,14 @@ export const euiFormControlLayoutSideNodeStyles = ( }) ), uncompressed: ` + &:not(:has(> ${buttons}:first-child, > *:first-child ${buttons})) { + ${logicalCSS('padding-left', euiTheme.size.m)} + } + + &:not(:has(> ${buttons}:last-child, > *:last-child ${buttons})) { + ${logicalCSS('padding-right', euiTheme.size.m)} + } + ${text} { ${logicalCSS('padding-horizontal', euiTheme.size.xs)} line-height: ${uncompressedHeight}; @@ -236,14 +264,30 @@ export const euiFormControlLayoutSideNodeStyles = ( ${buttons} { ${logicalCSS('height', uncompressedHeight)} + ${_buttonPadding('m')} } .euiButtonIcon { flex-shrink: 0; - ${logicalCSS('width', euiTheme.size.xl)} + ${logicalCSS('width', uncompressedHeight)} + + ${buttonIconStyles} } `, compressed: css` + /* Legacy padding styles to handle content without */ + &:not(:has(${appendPrepend})):not( + :has(> ${buttons}:first-child, > *:first-child ${buttons}) + ) { + ${logicalCSS('padding-left', euiTheme.size.s)} + } + + &:not(:has(${appendPrepend})):not( + :has(> ${buttons}:last-child, > *:last-child ${buttons}) + ) { + ${logicalCSS('padding-right', euiTheme.size.s)} + } + ${text} { ${logicalCSS('padding-horizontal', euiTheme.size.xxs)} line-height: ${compressedHeight}; @@ -251,11 +295,14 @@ export const euiFormControlLayoutSideNodeStyles = ( ${buttons} { ${logicalCSS('height', compressedHeight)} + ${_buttonPadding('s')} } .euiButtonIcon { flex-shrink: 0; - ${logicalCSS('width', euiTheme.size.xl)} + ${logicalCSS('width', compressedHeight)} + + ${buttonIconStyles} } `, }; diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx index 1c7438f648e..c175995cc9e 100644 --- a/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx +++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx @@ -29,6 +29,8 @@ import { euiFormControlLayoutStyles, euiFormControlLayoutSideNodeStyles, } from './form_control_layout.styles'; +import { EuiFormAppend, EuiFormPrepend } from './append_prepend'; +import { EuiFormControlLayoutContextProvider } from './form_control_layout_context'; type StringOrReactElement = string | ReactElement; type PrependAppendType = StringOrReactElement | StringOrReactElement[]; @@ -162,53 +164,57 @@ export const EuiFormControlLayout: FunctionComponent< return (
- -
- {hasLeftIcon && ( - - )} - - {children} - - {hasRightIcons && ( - - )} -
- + +
+ {hasLeftIcon && ( + + )} + + {children} + + {hasRightIcons && ( + + )} +
+ +
); }; @@ -221,7 +227,8 @@ const EuiFormControlLayoutSideNodes: FunctionComponent<{ nodes?: PrependAppendType; // For some bizarre reason if you make this the `children` prop instead, React doesn't properly override cloned keys :| inputId?: string; compressed?: boolean; -}> = ({ side, nodes, inputId, compressed }) => { +}> = (props) => { + const { side, nodes, inputId, compressed } = props; const className = `euiFormControlLayout__${side}`; const styles = useEuiMemoizedStyles(euiFormControlLayoutSideNodeStyles); const cssStyles = [ @@ -232,15 +239,33 @@ const EuiFormControlLayoutSideNodes: FunctionComponent<{ if (!nodes) return null; + let content; + + const AppendOrPrepend = side === 'append' ? EuiFormAppend : EuiFormPrepend; + + if (Array.isArray(nodes)) { + content = React.Children.map(nodes, (node) => + typeof node === 'string' ? ( + {node} + ) : ( + node + ) + ); + } else if (typeof nodes === 'string') { + content = ( + + ); + } else { + content = nodes; + } + return (
- {React.Children.map(nodes, (node) => - typeof node === 'string' ? ( - {node} - ) : ( - node - ) - )} + {content}
); }; diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_context.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_context.tsx new file mode 100644 index 00000000000..25d831e47d6 --- /dev/null +++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_context.tsx @@ -0,0 +1,27 @@ +/* + * 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 { createContext } from 'react'; +import { EuiFormControlLayoutProps } from './form_control_layout'; + +type FormControlLayoutContext = Pick< + EuiFormControlLayoutProps, + 'compressed' | 'inputId' +>; + +/** + * Context to share props between `EuiFormControlLayout` and passed children like e.g. EuiFormAppend/Prepend + */ +export const EuiFormControlLayoutContext = + createContext({ + compressed: false, + inputId: '', + }); + +export const EuiFormControlLayoutContextProvider = + EuiFormControlLayoutContext.Provider; diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx index c7d392cefe5..244c0d41708 100644 --- a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx +++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx @@ -23,6 +23,7 @@ import { EuiFormControlLayoutDelimitedProps, } from './form_control_layout_delimited'; import { EuiFormControlLayoutProps } from './form_control_layout'; +import { EuiFormAppend, EuiFormPrepend } from './append_prepend'; // re-declaring the component with props as the Partial // of EuiFormControlLayoutDelimitedProps is otherwise not resolved @@ -46,7 +47,7 @@ const meta: Meta = { control: 'radio', options: [undefined, 'icon', 'text'], mapping: { - icon: , + icon: , text: 'Appended', undefined: undefined, }, @@ -55,7 +56,7 @@ const meta: Meta = { control: 'radio', options: [undefined, 'icon', 'text'], mapping: { - icon: , + icon: , text: 'Prepended', undefined: undefined, }, @@ -106,6 +107,7 @@ export const Playground: Story = { controlOnly placeholder="0" aria-label="EuiFormControlLayoutDelimited demo - start control" + id="foo" /> ), endControl: ( diff --git a/packages/eui/src/components/form/form_control_layout/index.ts b/packages/eui/src/components/form/form_control_layout/index.ts index 243fa6fb296..d25bb63fcbf 100644 --- a/packages/eui/src/components/form/form_control_layout/index.ts +++ b/packages/eui/src/components/form/form_control_layout/index.ts @@ -14,3 +14,4 @@ export { EuiFormControlLayoutIcons, type EuiFormControlLayoutIconsProps, } from './form_control_layout_icons'; +export * from './append_prepend'; diff --git a/packages/eui/src/components/form/form_label/__snapshots__/form_label.test.tsx.snap b/packages/eui/src/components/form/form_label/__snapshots__/form_label.test.tsx.snap index de31e2b67d4..e2080d2d523 100644 --- a/packages/eui/src/components/form/form_label/__snapshots__/form_label.test.tsx.snap +++ b/packages/eui/src/components/form/form_label/__snapshots__/form_label.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiFormLabel is rendered 1`] = ` -