diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png index 0d70b990e44..09d83378cff 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png index 6b9e9b52822..8993825b30e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckbox_Playground.png index d49d36d2309..ed522a8a334 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png index 0ce6eb8a10d..e79e57f6576 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png index 641a82d3e7d..ccd569c8344 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png new file mode 100644 index 00000000000..6ed97185b5f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png index 65099ae8f70..8e3238b3b63 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.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 new file mode 100644 index 00000000000..55b1fd76bef Binary files /dev/null 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_EuiFormControlLayoutDelimited_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png index cc3441b51da..06f8ecb0be7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.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 7005743689c..8dc5fa3c872 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_EuiFormFieldset_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png index 93a14af8ba4..5168aa02f8d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png index e97606cc7b8..f4e61afca63 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png new file mode 100644 index 00000000000..a0cbb25741b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png new file mode 100644 index 00000000000..dedd36eba49 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png index a68eab52a69..44723ec070b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png index 35654f6e8fa..d5d3c96d2b2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png index 665684f717c..4fdf4e693dc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png index 0cc95f3f6cb..3dde234364f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png index 6beb887b5ec..8fc344b6542 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadio_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadio_Playground.png index dc6d6148072..62c4d8e920d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadio_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadio_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png new file mode 100644 index 00000000000..5d07ea70a4b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Playground.png index df76bf3bfa6..c7048826c82 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_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 c984704c3ce..061bde84782 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 fd315956807..6653d562191 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_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png index c81fbf045dc..fcc5adc6a60 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png index 2d684c11940..5321036ba3c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckbox_Playground.png index 7f0285f8dcf..5bf1e090823 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png index f0258667e15..cb8b4eb2974 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png index 6931b769978..2883ad41688 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png new file mode 100644 index 00000000000..f9217e4a21f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png index 1a813143312..25ad801e4f0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.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 new file mode 100644 index 00000000000..338bbf80b3d Binary files /dev/null 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_EuiFormControlLayoutDelimited_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png index a3fadce810f..c7a124343a9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.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 c5ad244f78e..23ef9c369cf 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_EuiFormFieldset_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png index 5a404b0f36f..ba3c8be4126 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png index 86c8bb31ffe..76050a9ffb6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png new file mode 100644 index 00000000000..8eaa518dee4 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png new file mode 100644 index 00000000000..aae8c03aecd Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png index 0da0ec76166..523ec069dbb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png index 61343ce82ab..a0235bb6357 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png index 83db9abe8e8..9fd1bdee25b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png index 315efab86af..f0efe4bc1fa 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png index 5eb3f20d0ec..86ac51459b6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadio_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadio_Playground.png index 6a1906478c0..02cf0e6a0c4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadio_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadio_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png new file mode 100644 index 00000000000..66275ef3c65 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png index a72980a7909..6941fed5635 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.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 2d0a573afa8..04dd3ca34e8 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 2cd588a3021..7e8da064785 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/changelogs/CHANGELOG_2024.md b/packages/eui/changelogs/CHANGELOG_2024.md index 24278144106..2de35bd377b 100644 --- a/packages/eui/changelogs/CHANGELOG_2024.md +++ b/packages/eui/changelogs/CHANGELOG_2024.md @@ -1,3 +1,56 @@ +## [`v95.8.0`](https://github.com/elastic/eui/releases/v95.8.0) + +- Updated `EuiHeaderLinks`'s mobile menu to set a slight popover padding by default ([#7961](https://github.com/elastic/eui/pull/7961)) + - This can be overridden via `popoverProps.panelPaddingSize` if needed. +- Updated `EuiHeaderLink` to default to a size of `s` (down from `m`) ([#7961](https://github.com/elastic/eui/pull/7961)) + +**Bug fixes** + +- Fixed a visual bug with `` form controls ([#7957](https://github.com/elastic/eui/pull/7957)) + +**Deprecations** + +- Deprecated `EuiFormRow`'s `columnCompressedSwitch` display prop. Use `columnCompressed` instead, which will automatically account for child `EuiSwitch`es ([#7968](https://github.com/elastic/eui/pull/7968)) +- Deprecated `EuiFormRow`'s `rowCompressed` display prop. Use `row` instead for vertical forms, or `centerCompressed` for inline forms ([#7968](https://github.com/elastic/eui/pull/7968)) +- (Styling) Updated `EuiFormRow`'s `hasEmptySpaceLabel` prop to no longer attempt to automatically align its content to a vertical center. Use the `display="center"` prop for that instead ([#7968](https://github.com/elastic/eui/pull/7968)) + +**CSS-in-JS conversions** + +- Converted `EuiFormControlLayout` to Emotion ([#7954](https://github.com/elastic/eui/pull/7954)) + - Removed `.euiFormControlLayout--*icons` classNames and `--eui-form-control-layout-icons-padding` CSS var. Use `--euiFormControlRightIconsCount` or `--euiFormControlLeftIconsCount` instead +- Converted `EuiFormLayoutDelimited` to Emotion ([#7957](https://github.com/elastic/eui/pull/7957)) +- Fixed `cloneElementWithCss` throwing an error when used multiple times without a `key` prop ([#7957](https://github.com/elastic/eui/pull/7957)) +- Updated `cloneElementWithCss` utility to support a third argument that allows prepending vs. appending the cloned Emotion css className ([#7957](https://github.com/elastic/eui/pull/7957)) +- Removed `@euiFormControlLayoutClearIcon` Sass mixin ([#7959](https://github.com/elastic/eui/pull/7959)) +- Converted `EuiDescribedFormGroup` to Emotion ([#7964](https://github.com/elastic/eui/pull/7964)) +- Converted `EuiForm`, `EuiFormHelpText`, and `EuiFormErrorText` to Emotion ([#7966](https://github.com/elastic/eui/pull/7966)) +- Converted `EuiFormLabel` and `EuiFormLegend` to Emotion; Removed `@euiFormLabel` mixin ([#7967](https://github.com/elastic/eui/pull/7967)) +- Converted `EuiFormRow` to Emotion ([#7968](https://github.com/elastic/eui/pull/7968)) +- Converted `EuiCheckbox` to Emotion ([#7969](https://github.com/elastic/eui/pull/7969)) +- Converted `EuiRadio` to Emotion ([#7969](https://github.com/elastic/eui/pull/7969)) +- Converted `EuiSwitch` to Emotion ([#7969](https://github.com/elastic/eui/pull/7969)) +- Removed the following Sass variables: ([#7969](https://github.com/elastic/eui/pull/7969)) + - `$euiFormCustomControlDisabledIconColor` + - `$euiFormCustomControlBorderColor` + - `$euiRadioSize` + - `$euiCheckBoxSize` + - `$euiCheckboxBorderRadius` + - `$euiSwitchHeight` (and compressed/mini variants) + - `$euiSwitchWidth` (and compressed/mini variants) + - `$euiSwitchThumbSize` (and compressed/mini variants) + - `$euiSwitchIconHeight` + - `$euiSwitchOffColor` +- Removed the following Sass mixins: ([#7969](https://github.com/elastic/eui/pull/7969)) + - `euiIconBackground` + - `euiCustomControl` + - `euiCustomControlSelected` + - `euiCustomControlDisabled` + - `euiCustomControlFocused` + +**Accessibility** + +- Updated the `aria-label` attribute for the `EuiFieldSearch` clear button ([#7970](https://github.com/elastic/eui/pull/7970)) + ## [`v95.7.0`](https://github.com/elastic/eui/releases/v95.7.0) **CSS-in-JS conversions** diff --git a/packages/eui/changelogs/upcoming/7954.md b/packages/eui/changelogs/upcoming/7954.md deleted file mode 100644 index 9d27209a613..00000000000 --- a/packages/eui/changelogs/upcoming/7954.md +++ /dev/null @@ -1,4 +0,0 @@ -**CSS-in-JS conversions** - -- Converted `EuiFormControlLayout` to Emotion - - Removed `.euiFormControlLayout--*icons` classNames and `--eui-form-control-layout-icons-padding` CSS var. Use `--euiFormControlRightIconsCount` or `--euiFormControlLeftIconsCount` instead diff --git a/packages/eui/i18ntokens.json b/packages/eui/i18ntokens.json index 3c32996b3ff..5d335f83ae0 100644 --- a/packages/eui/i18ntokens.json +++ b/packages/eui/i18ntokens.json @@ -1391,14 +1391,14 @@ "highlighting": "string", "loc": { "start": { - "line": 281, + "line": 280, "column": 18, - "index": 10032 + "index": 9968 }, "end": { - "line": 284, + "line": 283, "column": 20, - "index": 10156 + "index": 10092 } }, "filepath": "src/components/datagrid/controls/column_selector.tsx" @@ -1409,14 +1409,14 @@ "highlighting": "string", "loc": { "start": { - "line": 294, + "line": 293, "column": 18, - "index": 10516 + "index": 10452 }, "end": { - "line": 297, + "line": 296, "column": 20, - "index": 10638 + "index": 10574 } }, "filepath": "src/components/datagrid/controls/column_selector.tsx" @@ -4793,14 +4793,14 @@ "highlighting": "string", "loc": { "start": { - "line": 104, + "line": 105, "column": 49, - "index": 2946 + "index": 2960 }, "end": { - "line": 110, + "line": 111, "column": 3, - "index": 3167 + "index": 3181 } }, "filepath": "src/components/form/field_password/field_password.tsx" @@ -4811,18 +4811,36 @@ "highlighting": "string", "loc": { "start": { - "line": 104, + "line": 105, "column": 49, - "index": 2946 + "index": 2960 }, "end": { - "line": 110, + "line": 111, "column": 3, - "index": 3167 + "index": 3181 } }, "filepath": "src/components/form/field_password/field_password.tsx" }, + { + "token": "euiFieldSearch.clearSearchButtonLabel", + "defString": "Clear search input", + "highlighting": "string", + "loc": { + "start": { + "line": 260, + "column": 6, + "index": 7437 + }, + "end": { + "line": 263, + "column": 7, + "index": 7544 + } + }, + "filepath": "src/components/form/field_search/field_search.tsx" + }, { "token": "euiFilePicker.promptText", "defString": "Select or drag and drop a file", @@ -4901,14 +4919,14 @@ "highlighting": "string", "loc": { "start": { - "line": 38, - "column": 4, - "index": 1180 + "line": 34, + "column": 20, + "index": 1321 }, "end": { - "line": 41, - "column": 5, - "index": 1274 + "line": 37, + "column": 3, + "index": 1399 } }, "filepath": "src/components/form/form_control_layout/form_control_layout_clear_button.tsx" @@ -4919,14 +4937,14 @@ "highlighting": "string", "loc": { "start": { - "line": 82, + "line": 121, "column": 27, - "index": 2237 + "index": 3395 }, "end": { - "line": 85, + "line": 124, "column": 3, - "index": 2313 + "index": 3471 } }, "filepath": "src/components/form/form_control_layout/form_control_layout_delimited.tsx" @@ -4937,14 +4955,14 @@ "highlighting": "string", "loc": { "start": { - "line": 94, + "line": 97, "column": 8, - "index": 2536 + "index": 2581 }, "end": { - "line": 97, + "line": 100, "column": 9, - "index": 2657 + "index": 2702 } }, "filepath": "src/components/form/form.tsx" diff --git a/packages/eui/i18ntokens_changelog.json b/packages/eui/i18ntokens_changelog.json index 4a15ad1d9a3..1f95ff63c77 100644 --- a/packages/eui/i18ntokens_changelog.json +++ b/packages/eui/i18ntokens_changelog.json @@ -1,4 +1,14 @@ [ + { + "version": "95.8.0", + "changes": [ + { + "token": "euiFieldSearch.clearSearchButtonLabel", + "changeType": "added", + "value": "Clear search input" + } + ] + }, { "version": "95.5.0", "changes": [ diff --git a/packages/eui/package.json b/packages/eui/package.json index 754390e9ef0..87642938237 100644 --- a/packages/eui/package.json +++ b/packages/eui/package.json @@ -1,7 +1,7 @@ { "name": "@elastic/eui", "description": "Elastic UI Component Library", - "version": "95.7.0", + "version": "95.8.0", "license": "SEE LICENSE IN LICENSE.txt", "main": "lib", "module": "es", diff --git a/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx b/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx index 3d2429afe91..f68018f3927 100644 --- a/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx +++ b/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx @@ -1,15 +1,13 @@ -import React, { useState, useMemo } from 'react'; +import React, { useMemo } from 'react'; import { EuiBadge, - EuiButtonEmpty, - EuiFlexGroup, - EuiFlexItem, EuiHeader, + EuiHeaderLink, + EuiHeaderLinks, EuiHeaderLogo, EuiHeaderSectionItemButton, EuiIcon, - EuiPopover, EuiToolTip, } from '../../../../src/components'; import { useIsWithinBreakpoints } from '../../../../src/services'; @@ -69,14 +67,9 @@ export const GuidePageHeader: React.FunctionComponent = ({ const github = useMemo(() => { const label = 'EUI GitHub repo'; return isMobileSize ? ( - + {label} - + ) : ( @@ -90,9 +83,9 @@ export const GuidePageHeader: React.FunctionComponent = ({ const label = 'Codesandbox'; return isMobileSize ? ( - + {label} - + ) : ( @@ -105,39 +98,18 @@ export const GuidePageHeader: React.FunctionComponent = ({ ); }, [isMobileSize]); - const [mobilePopoverIsOpen, setMobilePopoverIsOpen] = useState(false); - const mobileMenu = useMemo(() => { - const button = ( - setMobilePopoverIsOpen((isOpen) => !isOpen)} - > - - ); - return ( - setMobilePopoverIsOpen(false)} + - - {github} - - - - {codesandbox} - - + {github} + + {codesandbox} + ); - }, [mobilePopoverIsOpen, codesandbox, github]); + }, [codesandbox, github]); const rightSideItems = isMobileSize ? [ diff --git a/packages/eui/src-docs/src/components/guide_page/versions.json b/packages/eui/src-docs/src/components/guide_page/versions.json index 13b782b0fdb..13e8da4847c 100644 --- a/packages/eui/src-docs/src/components/guide_page/versions.json +++ b/packages/eui/src-docs/src/components/guide_page/versions.json @@ -1,5 +1,6 @@ { "euiVersions": [ + "95.8.0", "95.7.0", "95.6.0", "95.5.0", diff --git a/packages/eui/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx b/packages/eui/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx index 05f6d9db11b..93def2d3955 100644 --- a/packages/eui/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx +++ b/packages/eui/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx @@ -1,15 +1,17 @@ /* eslint-disable no-restricted-globals */ import React from 'react'; -import { EuiButtonEmpty } from '../../../../src/components/button'; import { useIsWithinBreakpoints } from '../../../../src/services'; - -import { ThemeContext } from '../with_theme'; -import { EuiHeaderSectionItemButton } from '../../../../src/components/header'; +import { + EuiHeaderLink, + EuiHeaderSectionItemButton, +} from '../../../../src/components/header'; import { EuiToolTip } from '../../../../src/components/tool_tip'; import { EuiIcon } from '../../../../src/components/icon'; import logoFigma from '../../images/logo-figma.svg'; +import { ThemeContext } from '../with_theme'; + type GuideFigmaLinkProps = { context?: any; }; @@ -34,9 +36,9 @@ const GuideFigmaLinkComponent: React.FunctionComponent< const label = 'EUI Figma Design Library'; return isMobileSize ? ( - + {label} - + ) : ( { Display fixed } - display="columnCompressedSwitch" + display="columnCompressed" > { : undefined } > - + { }; return ( - + - + { /> - + - + { /> - + { /> - + To use compressed forms, pass{' '} - display="rowCompressed" to - the EuiFormRows and compressed=true{' '} - to the form controls themselves. + {'compressed={true}'} to all form + controls.

), props: { @@ -69,10 +68,7 @@ export const FormCompressedExample = { }, demo: , snippet: [ - ` + ` `, ], @@ -86,21 +82,12 @@ export const FormCompressedExample = { }, ], text: ( - -

- Editor-style controls can be displayed in a two column layout for - even better use of limited space, just pass{' '} - - display="columnCompressed" - {' '} - to align the labels and inputs side by side. -

-

- EuiSwitches are a special case in which so you must - pass {'"columnCompressedSwitch"'}{' '} - to the EuiFormRow as the display property. -

- +

+ Editor-style controls can be displayed in a two column layout for even + better use of limited space, just pass{' '} + display="columnCompressed"{' '} + to align the labels and inputs side by side. +

), props: { EuiFormRow, diff --git a/packages/eui/src-docs/src/views/form_compressed/form_horizontal.js b/packages/eui/src-docs/src/views/form_compressed/form_horizontal.js index 36bf9687f52..f9197336bb8 100644 --- a/packages/eui/src-docs/src/views/form_compressed/form_horizontal.js +++ b/packages/eui/src-docs/src/views/form_compressed/form_horizontal.js @@ -82,7 +82,7 @@ export default () => { /> - + ( fullWidth startControl={ } endControl={ } @@ -36,15 +36,15 @@ export default () => ( } endControl={ } @@ -54,15 +54,15 @@ export default () => ( append={px} startControl={ } endControl={ } @@ -73,14 +73,14 @@ export default () => ( startControl={ } endControl={ } @@ -91,15 +91,15 @@ export default () => ( isLoading startControl={ } endControl={ } @@ -109,15 +109,15 @@ export default () => ( isLoading startControl={ } endControl={ } @@ -127,15 +127,15 @@ export default () => ( compressed startControl={ } endControl={ } @@ -145,16 +145,16 @@ export default () => ( prepend={Add} startControl={ } delimiter="+" endControl={ } @@ -164,16 +164,16 @@ export default () => ( prepend={Merge} startControl={ } delimiter={} endControl={ } @@ -184,16 +184,16 @@ export default () => ( prepend={Read only} startControl={ } endControl={ @@ -205,16 +205,16 @@ export default () => ( prepend={Disabled} startControl={ } endControl={ diff --git a/packages/eui/src-docs/src/views/selection_controls/checkbox.js b/packages/eui/src-docs/src/views/selection_controls/checkbox.js index 715cfe54c0e..cc045ecb747 100644 --- a/packages/eui/src-docs/src/views/selection_controls/checkbox.js +++ b/packages/eui/src-docs/src/views/selection_controls/checkbox.js @@ -1,4 +1,4 @@ -import React, { useState, Fragment } from 'react'; +import React, { useState } from 'react'; import { EuiCheckbox, EuiSpacer } from '../../../../src/components'; @@ -26,7 +26,7 @@ export default () => { }; return ( - + <> { id={compressedCheckboxId} label="I am a readonly checkbox" checked={checked} - onChange={(e) => onChange(e)} + onChange={() => {}} readOnly /> - + ); }; diff --git a/packages/eui/src-docs/src/views/selection_controls/switch_label.tsx b/packages/eui/src-docs/src/views/selection_controls/switch_label.tsx index a232a7679f1..f067ac3a9b4 100644 --- a/packages/eui/src-docs/src/views/selection_controls/switch_label.tsx +++ b/packages/eui/src-docs/src/views/selection_controls/switch_label.tsx @@ -22,7 +22,7 @@ export default () => { return ( - + { /> Show something} >
-
+ class="euiCheckbox__square emotion-euiCheckbox__square-unselected" + > + + +
@@ -269,19 +274,24 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiTableCellContent" >
-
+ class="euiCheckbox__square emotion-euiCheckbox__square-unselected" + > + + +
@@ -375,19 +385,24 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiTableCellContent" >
-
+ class="euiCheckbox__square emotion-euiCheckbox__square-unselected" + > + + +
@@ -481,19 +496,24 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiTableCellContent" >
-
+ class="euiCheckbox__square emotion-euiCheckbox__square-unselected" + > + + +
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 dd93726382c..91bc4241c1d 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 @@ -7,19 +7,24 @@ exports[`EuiInMemoryTable behavior mobile header 1`] = `
-
+ class="euiCheckbox__square emotion-euiCheckbox__square-unselected" + > + + +
-
+ class="euiCheckbox__square emotion-euiCheckbox__square-unselected" + > + + +
-
+ class="euiRadio__circle emotion-euiRadio__circle-unselected" + > + + +
-
+ class="euiRadio__circle emotion-euiRadio__circle-disabled-unselected" + > + + +
-
+ class="euiRadio__circle emotion-euiRadio__circle-unselected" + > + + +