Skip to content

[EuiMarkdownEditorFooter] fix the aria-label of syntax help modal#8702

Merged
alexwizp merged 2 commits intoelastic:mainfrom
alexwizp:12may
May 27, 2025
Merged

[EuiMarkdownEditorFooter] fix the aria-label of syntax help modal#8702
alexwizp merged 2 commits intoelastic:mainfrom
alexwizp:12may

Conversation

@alexwizp
Copy link
Copy Markdown
Contributor

@alexwizp alexwizp commented May 12, 2025

Part of: elastic/kibana#205615

Summary

Dialog modal, flyout visible title should be announced for the users, especially using assistive technology to know what dialog modal, flyout opened.

Changes made

  1. Added required aria attributes to the EuiModal in the mentioned place.

@alexwizp alexwizp changed the title EuiMarkdownEditorFooter – fix the aria-label of syntax help modal [EuiMarkdownEditorFooter] fix the aria-label of syntax help modal May 12, 2025
@alexwizp alexwizp marked this pull request as ready for review May 12, 2025 17:19
@alexwizp alexwizp requested a review from a team as a code owner May 12, 2025 17:19
@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

@acstll acstll self-requested a review May 26, 2025 11:40
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Thanks for the update! Changes look correct to me, the expected modal label is announced as expected.

@alexwizp alexwizp merged commit 8aa830c into elastic:main May 27, 2025
6 checks passed
mgadewoll added a commit to elastic/kibana that referenced this pull request Jun 9, 2025
`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><b>Examples of new toggle filter buttons</b></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><b>Updated custom button styling</b></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>
mgadewoll added a commit to mgadewoll/kibana that referenced this pull request Jun 9, 2025
`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><b>Examples of new toggle filter buttons</b></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><b>Updated custom button styling</b></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
mgadewoll added a commit to mgadewoll/kibana that referenced this pull request Jun 9, 2025
`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><b>Examples of new toggle filter buttons</b></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><b>Updated custom button styling</b></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
pmuellr pushed a commit to pmuellr/kibana that referenced this pull request Jun 11, 2025
`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><b>Examples of new toggle filter buttons</b></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><b>Updated custom button styling</b></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>
nickpeihl pushed a commit to nickpeihl/kibana that referenced this pull request Jun 12, 2025
`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><b>Examples of new toggle filter buttons</b></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><b>Updated custom button styling</b></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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants