[Visual refresh][EuiDataGridToolbarControl] Add Refresh design changes#8670
Merged
mgadewoll merged 4 commits intoelastic:feat/button-visual-refreshfrom Apr 30, 2025
Conversation
…utton styles - removes text decoration on hover and ensures the badge background is adjusted on hover to provide enough contrast
- updates are not only based on changes in this branch but it seems we forgot to run VRT at some points earlier which means we have move smaller VRT changes here now
Collaborator
💚 Build Succeededcc @mgadewoll |
Collaborator
💚 Build Succeeded
cc @mgadewoll |
ae21686
into
elastic:feat/button-visual-refresh
4 checks passed
14 tasks
mgadewoll
added a commit
that referenced
this pull request
Apr 30, 2025
mgadewoll
added a commit
that referenced
this pull request
May 5, 2025
mgadewoll
added a commit
that referenced
this pull request
May 30, 2025
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 | |---|---| |  |  | |  |  | |  |  | </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) |  | | Discover(ES/QL) |  | | Dashboard(Create Visualization) |  | | Maps: Aligned map toolbar button hover |  | </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 | |---|---| |  |  | |  |  | |  |  | </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) |  | | Discover(ES/QL) |  | | Dashboard(Create Visualization) |  | | Maps: Aligned map toolbar button hover |  | </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 | |---|---| |  |  | |  |  | |  |  | </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) |  | | Discover(ES/QL) |  | | Dashboard(Create Visualization) |  | | Maps: Aligned map toolbar button hover |  | </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 | |---|---| |  |  | |  |  | |  |  | </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) |  | | Discover(ES/QL) |  | | Dashboard(Create Visualization) |  | | Maps: Aligned map toolbar button hover |  | </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 | |---|---| |  |  | |  |  | |  |  | </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) |  | | Discover(ES/QL) |  | | Dashboard(Create Visualization) |  | | Maps: Aligned map toolbar button hover |  | </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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements https://github.com/elastic/eui-private/issues/280
This PR is a follow-up to this previous PR and it adds additional style updates to
EuiDataGridToolbarControlto align it with the styles defined previously for buttons and specificallyEuiFilterButton.Before
After
Note
There are more VRT updates than would be expected based on the code changes. This is because we missed updating VRT for
EuiDataGridbefore on other changes. Overall the VRT changes are minor and are mainly due to icon changes or tiny render differences that are not caused by code changes.QA
🔗 Docs link
EuiDataGridToolbarControlhas no text decoration on hover for BorealisEuiDataGridToolbarControlhas text decoration (underline) on hover for AmsterdamGeneral checklist
Checked in both MacOS and Windows high contrast modesChecked in mobileChecked for accessibility including keyboard-only and screenreader modesAdded documentationProps have proper autodocs (using@defaultif default values are missing) and playground togglesChecked Code Sandbox works for any docs examplesAdded or updated jest and cypress testsIf applicable, added the breaking change issue label (and filled out the breaking change 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)