[EuiFlyout] Support `returnFocus` prop #8716

mgadewoll · 2025-05-27T12:23:14Z

Summary

This PR updates the types for EuiFlyout's focusTrapProps to support passing returnFocus to flyouts.
This will allow customers more granular usage, e.g. to manually opt out of the default behavior when manual return focus management is needed. The default behavior was not changed and for most cases we don't expect this prop to be used.

QA

newly added cypress tests pass
checkout this PR and verify expected behavior with the added testing example for EuiFlyout > Playground (when closing the flyout the "Another button" should be focused)

General checklist

Browser QA
- ~~Checked in both light and dark modes~~
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- allows handling manual return focus on the prop instead of applying it manually on top, e.g. via onClose

acstll

Thanks for taking care of this so quickly! I ran cypress locally (also for React 16-17, I guess CI already does that, I didn't check haha) and read thru the new tests. Everything working as expected.

Only one minor question regarding Storybook. Apart from that LGTM 🟢

packages/eui/src/components/flyout/flyout.stories.tsx

elasticmachine · 2025-05-28T12:45:10Z

💚 Build Succeeded

History

💚 Build #328 succeeded 43de14e

cc @mgadewoll

acstll

Also checked the new story locally. Thanks again! 🚢

elasticmachine · 2025-05-28T13:00:44Z

💚 Build Succeeded

Buildkite Build
Commit: 439dcf2

History

💚 Build #4044 succeeded 43de14e

cc @mgadewoll

`102.2.0` ⏩ `102.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes >[!IMPORTANT] This release contains the visual refresh updates for buttons ⏹️ 💅 These have already been available for QA ahead of time on [this PR](#220093). 1. **EUI changes**: Adds all Visual Refresh related EUI changes on button components: - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiButtonGroup` - `EuiFilterGroup`/`EuiFilterButton` 2. **EUI button component API updates:** Updates instances of `EuiFilterButton` usages that were missing `isSelected` prop or that should use the new `isToggle` prop to ensure the expected visual and semantic output as toggle button. <details><summary>Examples of new toggle filter buttons</summary> | before | after | |---|---| | ![Screenshot 2025-05-05 at 16 18 13](https://github.com/user-attachments/assets/65dcb4f1-27c2-4e73-8d0e-2702de8c35e3) | ![Screenshot 2025-05-02 at 13 48 28](https://github.com/user-attachments/assets/54ec723b-ff3f-49b7-ad6c-0d804fcd8a82) | | ![Screenshot 2025-05-05 at 16 19 30](https://github.com/user-attachments/assets/65bcef9a-c06b-46e4-91e1-698a76b1dbc2) | ![Screenshot 2025-05-02 at 14 02 46](https://github.com/user-attachments/assets/bf05d9f9-0eba-4733-87f6-d7abdaa53bfa) | | ![Screenshot 2025-05-05 at 16 21 50](https://github.com/user-attachments/assets/8f4a6592-9dc0-4b69-8ba5-aca0a3c26f69) | ![Screenshot 2025-05-02 at 14 08 07](https://github.com/user-attachments/assets/34d78faa-4137-4650-a4a9-f71cbde64054) | </details> 3. **Custom styling updates:** Updates custom styling overrides on EUI button components in selected **high-visibility places** (discover, dashboard, lens) to ensure expected Visual Refresh output. (This is a first iteration step to ensure expected design. In the future we want to replace custom buttons with proper EUI components) <details><summary>Updated custom button styling</summary> | Solution/Area | After | |---|---| | Discover(classic) | ![Screenshot 2025-05-30 at 14 45 01](https://github.com/user-attachments/assets/93a46e2a-4989-4bcb-99f2-5eafa4483629) | | Discover(ES/QL) | ![Screenshot 2025-05-30 at 14 45 11](https://github.com/user-attachments/assets/8fc390d4-fdb0-4377-851c-b3835dc9a14e) | | Dashboard(Create Visualization) | ![Screenshot 2025-05-30 at 14 47 21](https://github.com/user-attachments/assets/a5895309-9b48-494d-b4b4-e91ca41e316b) | | Maps: Aligned map toolbar button hover | ![Screenshot 2025-04-30 at 17 19 11](https://github.com/user-attachments/assets/2d467f6b-ab50-46b1-b393-ed1e6c5d5548) | </details> ## Package updates ### `@elastic/eui` ## [`v102.3.0`](https://github.com/elastic/eui/releases/v102.3.0) - Added support for `focusTrapProps.returnFocus` on `EuiFlyout` ([#8716](elastic/eui#8716)) - Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast ([#8670](elastic/eui#8670)) - Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button ([#8652](elastic/eui#8652)) - Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state ([#8652](elastic/eui#8652)) - Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states ([#8652](elastic/eui#8652)) - Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` ([#8652](elastic/eui#8652)) - Updated `EuiNotificationBadge` border radius to `2px` ([#8652](elastic/eui#8652)) - Updated `EuiBreadcrumbs` text color for `type="application"` ([#8652](elastic/eui#8652)) - Added new `refresh` design variant for button components: ([#8595](elastic/eui#8595)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` ([#8595](elastic/eui#8595)) - Added new button background component tokens to Amsterdam theme: ([#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` **Bug fixes** - Fixed an issue with `EuiDataGrid` where navigating cells with simultaneous key presses would result in a crash in React 18 legacy mode ([#8698](elastic/eui#8698)) **Accessibility** - Improved the accessibility experience of `EuiMarkdownEditorFooter` by fixing the ARIA attributes of the `syntax help` modal. ([#8702](elastic/eui#8702)) ### `@elastic/eui-theme-borealis` ## [`v1.1.0`](https://github.com/elastic/eui/releases/v1.1.0) - Added token `filterButtonBadgeBackgroundHover` ([#8652](elastic/eui#8652)) - Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` ([#8652](elastic/eui#8652)) - Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` ([#8595](elastic/eui#8595)) - Added new button background component tokens: ([#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` - Updated `backgroundLightText` token value to `shade120` ([#8595](elastic/eui#8595)) --------- Co-authored-by: “jeramysoucy” <jeramy.soucy@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`102.2.0` ⏩ `102.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes >[!IMPORTANT] This release contains the visual refresh updates for buttons ⏹️ 💅 These have already been available for QA ahead of time on [this PR](elastic#220093). 1. **EUI changes**: Adds all Visual Refresh related EUI changes on button components: - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiButtonGroup` - `EuiFilterGroup`/`EuiFilterButton` 2. **EUI button component API updates:** Updates instances of `EuiFilterButton` usages that were missing `isSelected` prop or that should use the new `isToggle` prop to ensure the expected visual and semantic output as toggle button. <details><summary>Examples of new toggle filter buttons</summary> | before | after | |---|---| | ![Screenshot 2025-05-05 at 16 18 13](https://github.com/user-attachments/assets/65dcb4f1-27c2-4e73-8d0e-2702de8c35e3) | ![Screenshot 2025-05-02 at 13 48 28](https://github.com/user-attachments/assets/54ec723b-ff3f-49b7-ad6c-0d804fcd8a82) | | ![Screenshot 2025-05-05 at 16 19 30](https://github.com/user-attachments/assets/65bcef9a-c06b-46e4-91e1-698a76b1dbc2) | ![Screenshot 2025-05-02 at 14 02 46](https://github.com/user-attachments/assets/bf05d9f9-0eba-4733-87f6-d7abdaa53bfa) | | ![Screenshot 2025-05-05 at 16 21 50](https://github.com/user-attachments/assets/8f4a6592-9dc0-4b69-8ba5-aca0a3c26f69) | ![Screenshot 2025-05-02 at 14 08 07](https://github.com/user-attachments/assets/34d78faa-4137-4650-a4a9-f71cbde64054) | </details> 3. **Custom styling updates:** Updates custom styling overrides on EUI button components in selected **high-visibility places** (discover, dashboard, lens) to ensure expected Visual Refresh output. (This is a first iteration step to ensure expected design. In the future we want to replace custom buttons with proper EUI components) <details><summary>Updated custom button styling</summary> | Solution/Area | After | |---|---| | Discover(classic) | ![Screenshot 2025-05-30 at 14 45 01](https://github.com/user-attachments/assets/93a46e2a-4989-4bcb-99f2-5eafa4483629) | | Discover(ES/QL) | ![Screenshot 2025-05-30 at 14 45 11](https://github.com/user-attachments/assets/8fc390d4-fdb0-4377-851c-b3835dc9a14e) | | Dashboard(Create Visualization) | ![Screenshot 2025-05-30 at 14 47 21](https://github.com/user-attachments/assets/a5895309-9b48-494d-b4b4-e91ca41e316b) | | Maps: Aligned map toolbar button hover | ![Screenshot 2025-04-30 at 17 19 11](https://github.com/user-attachments/assets/2d467f6b-ab50-46b1-b393-ed1e6c5d5548) | </details> ## Package updates ### `@elastic/eui` ## [`v102.3.0`](https://github.com/elastic/eui/releases/v102.3.0) - Added support for `focusTrapProps.returnFocus` on `EuiFlyout` ([elastic#8716](elastic/eui#8716)) - Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast ([elastic#8670](elastic/eui#8670)) - Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button ([elastic#8652](elastic/eui#8652)) - Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state ([elastic#8652](elastic/eui#8652)) - Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states ([elastic#8652](elastic/eui#8652)) - Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` ([elastic#8652](elastic/eui#8652)) - Updated `EuiNotificationBadge` border radius to `2px` ([elastic#8652](elastic/eui#8652)) - Updated `EuiBreadcrumbs` text color for `type="application"` ([elastic#8652](elastic/eui#8652)) - Added new `refresh` design variant for button components: ([elastic#8595](elastic/eui#8595)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens to Amsterdam theme: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` **Bug fixes** - Fixed an issue with `EuiDataGrid` where navigating cells with simultaneous key presses would result in a crash in React 18 legacy mode ([elastic#8698](elastic/eui#8698)) **Accessibility** - Improved the accessibility experience of `EuiMarkdownEditorFooter` by fixing the ARIA attributes of the `syntax help` modal. ([elastic#8702](elastic/eui#8702)) ### `@elastic/eui-theme-borealis` ## [`v1.1.0`](https://github.com/elastic/eui/releases/v1.1.0) - Added token `filterButtonBadgeBackgroundHover` ([elastic#8652](elastic/eui#8652)) - Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` ([elastic#8652](elastic/eui#8652)) - Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` - Updated `backgroundLightText` token value to `shade120` ([elastic#8595](elastic/eui#8595)) --------- Co-authored-by: “jeramysoucy” <jeramy.soucy@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit b2d1075) # Conflicts: # src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.test.tsx # src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx # src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_grouped/field_list_grouped.test.tsx # src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx # src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx # src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.test.tsx # x-pack/platform/plugins/private/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap # x-pack/platform/plugins/shared/fleet/public/components/platform_selector.tsx # x-pack/platform/plugins/shared/lens/public/shared_components/dataview_picker/toolbar_button.tsx # x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/processor_outcome_preview.tsx

`102.2.0` ⏩ `102.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes >[!IMPORTANT] This release contains the visual refresh updates for buttons ⏹️ 💅 These have already been available for QA ahead of time on [this PR](elastic#220093). 1. **EUI changes**: Adds all Visual Refresh related EUI changes on button components: - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiButtonGroup` - `EuiFilterGroup`/`EuiFilterButton` 2. **EUI button component API updates:** Updates instances of `EuiFilterButton` usages that were missing `isSelected` prop or that should use the new `isToggle` prop to ensure the expected visual and semantic output as toggle button. <details><summary>Examples of new toggle filter buttons</summary> | before | after | |---|---| | ![Screenshot 2025-05-05 at 16 18 13](https://github.com/user-attachments/assets/65dcb4f1-27c2-4e73-8d0e-2702de8c35e3) | ![Screenshot 2025-05-02 at 13 48 28](https://github.com/user-attachments/assets/54ec723b-ff3f-49b7-ad6c-0d804fcd8a82) | | ![Screenshot 2025-05-05 at 16 19 30](https://github.com/user-attachments/assets/65bcef9a-c06b-46e4-91e1-698a76b1dbc2) | ![Screenshot 2025-05-02 at 14 02 46](https://github.com/user-attachments/assets/bf05d9f9-0eba-4733-87f6-d7abdaa53bfa) | | ![Screenshot 2025-05-05 at 16 21 50](https://github.com/user-attachments/assets/8f4a6592-9dc0-4b69-8ba5-aca0a3c26f69) | ![Screenshot 2025-05-02 at 14 08 07](https://github.com/user-attachments/assets/34d78faa-4137-4650-a4a9-f71cbde64054) | </details> 3. **Custom styling updates:** Updates custom styling overrides on EUI button components in selected **high-visibility places** (discover, dashboard, lens) to ensure expected Visual Refresh output. (This is a first iteration step to ensure expected design. In the future we want to replace custom buttons with proper EUI components) <details><summary>Updated custom button styling</summary> | Solution/Area | After | |---|---| | Discover(classic) | ![Screenshot 2025-05-30 at 14 45 01](https://github.com/user-attachments/assets/93a46e2a-4989-4bcb-99f2-5eafa4483629) | | Discover(ES/QL) | ![Screenshot 2025-05-30 at 14 45 11](https://github.com/user-attachments/assets/8fc390d4-fdb0-4377-851c-b3835dc9a14e) | | Dashboard(Create Visualization) | ![Screenshot 2025-05-30 at 14 47 21](https://github.com/user-attachments/assets/a5895309-9b48-494d-b4b4-e91ca41e316b) | | Maps: Aligned map toolbar button hover | ![Screenshot 2025-04-30 at 17 19 11](https://github.com/user-attachments/assets/2d467f6b-ab50-46b1-b393-ed1e6c5d5548) | </details> ## Package updates ### `@elastic/eui` ## [`v102.3.0`](https://github.com/elastic/eui/releases/v102.3.0) - Added support for `focusTrapProps.returnFocus` on `EuiFlyout` ([elastic#8716](elastic/eui#8716)) - Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast ([elastic#8670](elastic/eui#8670)) - Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button ([elastic#8652](elastic/eui#8652)) - Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state ([elastic#8652](elastic/eui#8652)) - Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states ([elastic#8652](elastic/eui#8652)) - Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` ([elastic#8652](elastic/eui#8652)) - Updated `EuiNotificationBadge` border radius to `2px` ([elastic#8652](elastic/eui#8652)) - Updated `EuiBreadcrumbs` text color for `type="application"` ([elastic#8652](elastic/eui#8652)) - Added new `refresh` design variant for button components: ([elastic#8595](elastic/eui#8595)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens to Amsterdam theme: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` **Bug fixes** - Fixed an issue with `EuiDataGrid` where navigating cells with simultaneous key presses would result in a crash in React 18 legacy mode ([elastic#8698](elastic/eui#8698)) **Accessibility** - Improved the accessibility experience of `EuiMarkdownEditorFooter` by fixing the ARIA attributes of the `syntax help` modal. ([elastic#8702](elastic/eui#8702)) ### `@elastic/eui-theme-borealis` ## [`v1.1.0`](https://github.com/elastic/eui/releases/v1.1.0) - Added token `filterButtonBadgeBackgroundHover` ([elastic#8652](elastic/eui#8652)) - Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` ([elastic#8652](elastic/eui#8652)) - Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` - Updated `backgroundLightText` token value to `shade120` ([elastic#8595](elastic/eui#8595)) --------- Co-authored-by: “jeramysoucy” <jeramy.soucy@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit b2d1075) # Conflicts: # package.json # src/dev/license_checker/config.ts # src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx # src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts # src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx # src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap # src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx # x-pack/platform/packages/shared/security/api_key_management/src/components/token_field.tsx # x-pack/platform/plugins/private/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap # x-pack/platform/plugins/shared/fleet/public/components/platform_selector.tsx # x-pack/platform/plugins/shared/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap # x-pack/platform/plugins/shared/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap # x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx # yarn.lock

`102.2.0` ⏩ `102.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes >[!IMPORTANT] This release contains the visual refresh updates for buttons ⏹️ 💅 These have already been available for QA ahead of time on [this PR](elastic#220093). 1. **EUI changes**: Adds all Visual Refresh related EUI changes on button components: - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiButtonGroup` - `EuiFilterGroup`/`EuiFilterButton` 2. **EUI button component API updates:** Updates instances of `EuiFilterButton` usages that were missing `isSelected` prop or that should use the new `isToggle` prop to ensure the expected visual and semantic output as toggle button. <details><summary>Examples of new toggle filter buttons</summary> | before | after | |---|---| | ![Screenshot 2025-05-05 at 16 18 13](https://github.com/user-attachments/assets/65dcb4f1-27c2-4e73-8d0e-2702de8c35e3) | ![Screenshot 2025-05-02 at 13 48 28](https://github.com/user-attachments/assets/54ec723b-ff3f-49b7-ad6c-0d804fcd8a82) | | ![Screenshot 2025-05-05 at 16 19 30](https://github.com/user-attachments/assets/65bcef9a-c06b-46e4-91e1-698a76b1dbc2) | ![Screenshot 2025-05-02 at 14 02 46](https://github.com/user-attachments/assets/bf05d9f9-0eba-4733-87f6-d7abdaa53bfa) | | ![Screenshot 2025-05-05 at 16 21 50](https://github.com/user-attachments/assets/8f4a6592-9dc0-4b69-8ba5-aca0a3c26f69) | ![Screenshot 2025-05-02 at 14 08 07](https://github.com/user-attachments/assets/34d78faa-4137-4650-a4a9-f71cbde64054) | </details> 3. **Custom styling updates:** Updates custom styling overrides on EUI button components in selected **high-visibility places** (discover, dashboard, lens) to ensure expected Visual Refresh output. (This is a first iteration step to ensure expected design. In the future we want to replace custom buttons with proper EUI components) <details><summary>Updated custom button styling</summary> | Solution/Area | After | |---|---| | Discover(classic) | ![Screenshot 2025-05-30 at 14 45 01](https://github.com/user-attachments/assets/93a46e2a-4989-4bcb-99f2-5eafa4483629) | | Discover(ES/QL) | ![Screenshot 2025-05-30 at 14 45 11](https://github.com/user-attachments/assets/8fc390d4-fdb0-4377-851c-b3835dc9a14e) | | Dashboard(Create Visualization) | ![Screenshot 2025-05-30 at 14 47 21](https://github.com/user-attachments/assets/a5895309-9b48-494d-b4b4-e91ca41e316b) | | Maps: Aligned map toolbar button hover | ![Screenshot 2025-04-30 at 17 19 11](https://github.com/user-attachments/assets/2d467f6b-ab50-46b1-b393-ed1e6c5d5548) | </details> ## Package updates ### `@elastic/eui` ## [`v102.3.0`](https://github.com/elastic/eui/releases/v102.3.0) - Added support for `focusTrapProps.returnFocus` on `EuiFlyout` ([elastic#8716](elastic/eui#8716)) - Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast ([elastic#8670](elastic/eui#8670)) - Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button ([elastic#8652](elastic/eui#8652)) - Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state ([elastic#8652](elastic/eui#8652)) - Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states ([elastic#8652](elastic/eui#8652)) - Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` ([elastic#8652](elastic/eui#8652)) - Updated `EuiNotificationBadge` border radius to `2px` ([elastic#8652](elastic/eui#8652)) - Updated `EuiBreadcrumbs` text color for `type="application"` ([elastic#8652](elastic/eui#8652)) - Added new `refresh` design variant for button components: ([elastic#8595](elastic/eui#8595)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens to Amsterdam theme: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` **Bug fixes** - Fixed an issue with `EuiDataGrid` where navigating cells with simultaneous key presses would result in a crash in React 18 legacy mode ([elastic#8698](elastic/eui#8698)) **Accessibility** - Improved the accessibility experience of `EuiMarkdownEditorFooter` by fixing the ARIA attributes of the `syntax help` modal. ([elastic#8702](elastic/eui#8702)) ### `@elastic/eui-theme-borealis` ## [`v1.1.0`](https://github.com/elastic/eui/releases/v1.1.0) - Added token `filterButtonBadgeBackgroundHover` ([elastic#8652](elastic/eui#8652)) - Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` ([elastic#8652](elastic/eui#8652)) - Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` ([elastic#8595](elastic/eui#8595)) - Added new button background component tokens: ([elastic#8595](elastic/eui#8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` - Updated `backgroundLightText` token value to `shade120` ([elastic#8595](elastic/eui#8595)) --------- Co-authored-by: “jeramysoucy” <jeramy.soucy@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

mgadewoll added 2 commits May 27, 2025 14:14

feat(flyout): support focusTrapProps.returnFocus

b009dbc

- allows handling manual return focus on the prop instead of applying it manually on top, e.g. via onClose

test: add cypress tests

e74229a

mgadewoll self-assigned this May 27, 2025

chore: add changelog

028c193

mgadewoll marked this pull request as ready for review May 27, 2025 12:57

mgadewoll requested a review from a team as a code owner May 27, 2025 12:57

JasonStoltz added the accessibility label May 27, 2025

MiriamAparicio mentioned this pull request May 28, 2025

[Observability:Infrastructure inventory page]Incorrect navigation after closing Managed saved views flyout elastic/kibana#218088

Closed

acstll self-requested a review May 28, 2025 10:53

acstll reviewed May 28, 2025

View reviewed changes

packages/eui/src/components/flyout/flyout.stories.tsx Outdated Show resolved Hide resolved

mgadewoll added 2 commits May 28, 2025 14:26

docs: add story for manually returning focus

9bc1033

test(vrt) add reference images

439dcf2

mgadewoll force-pushed the flyout/support-return-focus-prop branch from 43de14e to 439dcf2 Compare May 28, 2025 12:28

mgadewoll requested a review from acstll May 28, 2025 12:29

acstll approved these changes May 28, 2025

View reviewed changes

mgadewoll merged commit 3a779b1 into elastic:main May 28, 2025
5 checks passed

mgadewoll mentioned this pull request Jun 2, 2025

Upgrade EUI to v102.3.0 elastic/kibana#222149

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiFlyout] Support `returnFocus` prop #8716

[EuiFlyout] Support `returnFocus` prop #8716

Uh oh!

mgadewoll commented May 27, 2025 •

edited by acstll

Loading

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

elasticmachine commented May 28, 2025

Uh oh!

acstll left a comment

Uh oh!

elasticmachine commented May 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

[EuiFlyout] Support returnFocus prop #8716

[EuiFlyout] Support returnFocus prop #8716

Uh oh!

Conversation

mgadewoll commented May 27, 2025 • edited by acstll Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

General checklist

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented May 28, 2025

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented May 28, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

[EuiFlyout] Support `returnFocus` prop #8716

[EuiFlyout] Support `returnFocus` prop #8716

mgadewoll commented May 27, 2025 •

edited by acstll

Loading