From b2d1075032238c5b6ea9a31b8271eed04a7c3b7e Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 9 Jun 2025 11:04:46 +0200 Subject: [PATCH] Upgrade EUI to v102.3.0 (#222149) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `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](https://github.com/elastic/kibana/pull/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.
Examples of new toggle filter buttons | 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) |
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)
Updated custom button styling | 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) |
## Package updates ### `@elastic/eui` ## [`v102.3.0`](https://github.com/elastic/eui/releases/v102.3.0) - Added support for `focusTrapProps.returnFocus` on `EuiFlyout` ([#8716](https://github.com/elastic/eui/pull/8716)) - Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast ([#8670](https://github.com/elastic/eui/pull/8670)) - Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated `EuiNotificationBadge` border radius to `2px` ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated `EuiBreadcrumbs` text color for `type="application"` ([#8652](https://github.com/elastic/eui/pull/8652)) - Added new `refresh` design variant for button components: ([#8595](https://github.com/elastic/eui/pull/8595)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` ([#8595](https://github.com/elastic/eui/pull/8595)) - Added new button background component tokens to Amsterdam theme: ([#8595](https://github.com/elastic/eui/pull/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](https://github.com/elastic/eui/pull/8698)) **Accessibility** - Improved the accessibility experience of `EuiMarkdownEditorFooter` by fixing the ARIA attributes of the `syntax help` modal. ([#8702](https://github.com/elastic/eui/pull/8702)) ### `@elastic/eui-theme-borealis` ## [`v1.1.0`](https://github.com/elastic/eui/releases/v1.1.0) - Added token `filterButtonBadgeBackgroundHover` ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` ([#8652](https://github.com/elastic/eui/pull/8652)) - Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` ([#8595](https://github.com/elastic/eui/pull/8595)) - Added new button background component tokens: ([#8595](https://github.com/elastic/eui/pull/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](https://github.com/elastic/eui/pull/8595)) --------- Co-authored-by: “jeramysoucy” Co-authored-by: Elastic Machine --- .../public/popover_demo.tsx | 1 + package.json | 6 +- src/dev/license_checker/config.ts | 6 +- .../editor_footer/history_starred_queries.tsx | 1 + .../src/components/table_sort_select.tsx | 1 + .../src/components/tag_filter_panel.tsx | 1 + .../src/components/user_filter_panel.tsx | 1 + .../custom_toolbar/render_custom_toolbar.scss | 47 +++++----- .../src/utils/get_render_cell_value.test.tsx | 4 +- .../field_type_filter.test.tsx | 3 +- .../field_list_filters/field_type_filter.tsx | 23 ++++- .../field_list_grouped.test.tsx | 16 ++-- .../src/user_profiles_selectable.tsx | 9 +- .../icon_button_group.styles.ts | 6 +- .../toolbar_button/toolbar_button.styles.ts | 23 +++-- .../src/popover/popover.test.tsx | 2 +- .../legend/__snapshots__/legend.test.tsx.snap | 2 +- .../components/options_list_control.tsx | 18 ++++ .../field_picker/field_type_filter.tsx | 2 +- .../doc_viewer_table/table.test.tsx | 3 +- .../dataview_picker/change_dataview.styles.ts | 3 +- .../dataview_picker/change_dataview.tsx | 2 +- .../filter_button_group.scss | 11 ++- .../query_string_input/query_bar_top_row.tsx | 5 +- .../kibana_privilege_table/feature_table.tsx | 4 +- .../src/components/token_field.tsx | 4 +- .../__snapshots__/app.test.tsx.snap | 2 +- .../field_types_help_popover.tsx | 1 + .../components/status_filter.tsx | 1 + .../filter_activity.tsx | 6 ++ .../table/dataset_quality_details_link.tsx | 7 +- .../public/components/platform_selector.tsx | 2 + .../details_page_mappings_content.tsx | 13 ++- .../esql_layer/components/datapanel.test.tsx | 3 +- .../dataview_picker/toolbar_button.tsx | 2 +- .../shared/maps/public/_mapbox_hacks.scss | 2 +- .../fit_to_data/fit_to_data.tsx | 1 + .../components/entity_filter.tsx | 1 + .../user_profile/user_profile.tsx | 8 +- .../api_keys/api_keys_grid/api_keys_table.tsx | 10 +++ .../unauthenticated_page.test.tsx.snap | 4 +- .../reset_session_page.test.tsx.snap | 4 +- .../components/manage_spaces_button.tsx | 18 ++-- .../components/spaces_description.tsx | 2 +- .../public/space_list/space_list_internal.tsx | 12 +-- .../processor_outcome_preview.tsx | 2 + .../event_log_list_status_filter.tsx | 1 + .../components/action_type_filter.tsx | 1 + .../rule_execution_status_filter.tsx | 1 + .../rule_last_run_outcome_filter.tsx | 1 + .../components/rule_status_filter.tsx | 1 + .../rules_list/components/rule_tag_filter.tsx | 4 + .../rules_list/components/type_filter.tsx | 1 + .../series_editor/columns/filter_expanded.tsx | 6 +- .../components/labels_filter.tsx | 7 +- .../field_value_selection.tsx | 1 + .../components/filter_status_button.tsx | 2 + .../waterfall/waterfall_filter.tsx | 2 + .../filter_status_button.test.tsx.snap | 29 ++++--- .../__snapshots__/status_filter.test.tsx.snap | 87 +++++++++++-------- .../monitor_list/filter_status_button.tsx | 2 + .../historical_results/index.tsx | 6 ++ .../public/pages/rules/rules_table_header.tsx | 4 + .../jobs_table/filters/jobs_table_filters.tsx | 4 + .../rules_with_gaps_overview_panel/index.tsx | 2 + .../rules_table_filters.tsx | 8 ++ .../pages/coverage_overview/filters_panel.tsx | 4 + .../flow_direction_select.test.tsx.snap | 58 ++++++++----- .../flow_controls/flow_direction_select.tsx | 4 + .../open_timeline/search_row/index.tsx | 2 + .../open_timeline/use_timeline_status.tsx | 2 + x-pack/test/functional/services/slo/common.ts | 4 +- yarn.lock | 36 ++++---- 73 files changed, 385 insertions(+), 200 deletions(-) diff --git a/examples/user_profile_examples/public/popover_demo.tsx b/examples/user_profile_examples/public/popover_demo.tsx index 0e70d2cddf38..a15e8c060391 100644 --- a/examples/user_profile_examples/public/popover_demo.tsx +++ b/examples/user_profile_examples/public/popover_demo.tsx @@ -130,6 +130,7 @@ export const PopoverDemo: FunctionComponent = () => { 0} numActiveFilters={selectedOptions2.length} onClick={() => setIsOpen2((value) => !value)} diff --git a/package.json b/package.json index 90b4cc446bed..adb74db4a5f6 100644 --- a/package.json +++ b/package.json @@ -126,9 +126,9 @@ "@elastic/ecs": "^8.11.5", "@elastic/elasticsearch": "9.0.2", "@elastic/ems-client": "8.6.3", - "@elastic/eui": "102.2.0", - "@elastic/eui-amsterdam": "npm:@elastic/eui@102.2.0-amsterdam.0", - "@elastic/eui-theme-borealis": "1.0.0", + "@elastic/eui": "102.3.0", + "@elastic/eui-amsterdam": "npm:@elastic/eui@102.3.0-amsterdam.0", + "@elastic/eui-theme-borealis": "1.1.0", "@elastic/filesaver": "1.1.2", "@elastic/monaco-esql": "^3.1.1", "@elastic/node-crypto": "^1.2.3", diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 77604b694623..0df4c072d6a5 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -88,11 +88,11 @@ export const LICENSE_OVERRIDES = { 'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint '@elastic/ems-client@8.6.3': ['Elastic License 2.0'], - '@elastic/eui@102.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], - '@elastic/eui-amsterdam@102.2.0-amsterdam.0': [ + '@elastic/eui@102.3.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], + '@elastic/eui-amsterdam@102.3.0-amsterdam.0': [ 'Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0', ], - '@elastic/eui-theme-borealis@1.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], + '@elastic/eui-theme-borealis@1.1.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], 'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry 'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause) diff --git a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx b/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx index e129c1a1d8b5..987fbde5738f 100644 --- a/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx +++ b/src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx @@ -87,6 +87,7 @@ export function QueryHistoryAction({ = ({}) => { iconSide="right" onClick={onFilterButtonClick} data-test-subj="tagFilterPopoverButton" + isSelected={isPopoverOpen} hasActiveFilters={totalActiveFilters > 0} numActiveFilters={totalActiveFilters} grow diff --git a/src/platform/packages/shared/content-management/table_list_view_table/src/components/user_filter_panel.tsx b/src/platform/packages/shared/content-management/table_list_view_table/src/components/user_filter_panel.tsx index 118d312dbd1a..44719b6d3b01 100644 --- a/src/platform/packages/shared/content-management/table_list_view_table/src/components/user_filter_panel.tsx +++ b/src/platform/packages/shared/content-management/table_list_view_table/src/components/user_filter_panel.tsx @@ -106,6 +106,7 @@ export const UserFilterPanel: FC<{}> = () => { iconSide="right" data-test-subj="userFilterPopoverButton" onClick={() => setPopoverOpen(!isPopoverOpen)} + isSelected={isPopoverOpen} hasActiveFilters={selectedUsers.length > 0} numActiveFilters={selectedUsers.length} grow diff --git a/src/platform/packages/shared/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.scss b/src/platform/packages/shared/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.scss index 0eb0748bbb55..f9e26b712ddf 100644 --- a/src/platform/packages/shared/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.scss +++ b/src/platform/packages/shared/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.scss @@ -1,39 +1,37 @@ .unifiedDataTableToolbar { padding: $euiSizeS $euiSizeS $euiSizeXS; - .unifiedDataTableToolbarControlButton .euiDataGridToolbarControl { - block-size: $euiSizeXL; - border: $euiBorderThin; - border-radius: $euiBorderRadiusSmall; - transition: transform $euiAnimSpeedNormal ease-in-out; + .unifiedDataTableToolbarControlButton { + .euiDataGridToolbarControl { + block-size: $euiSizeXL; + border: $euiBorderWidthThin solid $euiFormBorderColor; + border-radius: $euiBorderRadiusSmall; - // making the icons larger than the default size - & svg { - inline-size: $euiSize; - block-size: $euiSize; - } - - // cancel default background changes - &:active, &:focus { - background: transparent; - } - - // add toolbar control animation - &:hover { - transform: translateY(-1px); - } - &:active { - transform: translateY(0); + // making the icons larger than the default size + & svg { + inline-size: $euiSize; + block-size: $euiSize; + } } } .unifiedDataTableToolbarControlGroup { - box-shadow: inset 0 0 0 $euiBorderWidthThin $euiBorderColor; + position: relative; + overflow: hidden; border-radius: $euiBorderRadiusSmall; display: inline-flex; align-items: stretch; flex-direction: row; + &::after { + content: ''; + position: absolute; + inset: 0; + border: $euiBorderWidthThin solid $euiColorBorderBasePlain; + border-radius: inherit; + pointer-events: none; + } + & .unifiedDataTableToolbarControlButton .euiDataGridToolbarControl { border-radius: 0; border: none; @@ -48,6 +46,7 @@ .unifiedDataTableToolbarControlIconButton .euiToolTipAnchor .euiButtonIcon { inline-size: $euiSizeXL; block-size: $euiSizeXL; + border-radius: inherit; // cancel default behaviour &:hover, &:active, &:focus { @@ -58,7 +57,7 @@ } .unifiedDataTableToolbarControlIconButton + .unifiedDataTableToolbarControlIconButton { - border-inline-start: $euiBorderThin; + border-inline-start: $euiBorderWidthThin solid $euiColorBorderBasePlain; border-radius: 0; } diff --git a/src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx b/src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx index abee8aba16ec..894118d8f4bb 100644 --- a/src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx +++ b/src/platform/packages/shared/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx @@ -153,7 +153,7 @@ describe('Unified data table cell rendering', function () { /> ); expect(component.html()).toMatchInlineSnapshot( - `"
100
"` + `"
100
"` ); }); @@ -180,7 +180,7 @@ describe('Unified data table cell rendering', function () { /> ); expect(component.html()).toMatchInlineSnapshot( - `"
100
"` + `"
100
"` ); findTestSubject(component, 'docTableClosePopover').simulate('click'); expect(closePopoverMockFn).toHaveBeenCalledTimes(1); diff --git a/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.test.tsx b/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.test.tsx index eff46ff1bdcd..4a8f7da55bf9 100644 --- a/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.test.tsx +++ b/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.test.tsx @@ -12,7 +12,8 @@ import { stubLogstashDataView as dataView } from '@kbn/data-views-plugin/common/ import { coreMock } from '@kbn/core/public/mocks'; import { type DataViewField } from '@kbn/data-views-plugin/common'; import { FieldTypeFilter, type FieldTypeFilterProps } from './field_type_filter'; -import { render, screen, within } from '@testing-library/react'; +import { screen, within } from '@testing-library/react'; +import { render } from '@elastic/eui/lib/test/rtl'; import { __IntlProvider as IntlProvider } from '@kbn/i18n-react'; import { userEvent } from '@testing-library/user-event'; diff --git a/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx b/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx index 040fe27ba138..7d38dcc68a35 100644 --- a/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx +++ b/src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx @@ -29,6 +29,9 @@ import { useEuiTheme, EuiTitle, useGeneratedHtmlId, + logicalCSS, + UseEuiTheme, + mathWithUnits, } from '@elastic/eui'; import type { CoreStart } from '@kbn/core-lifecycle-browser'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -49,7 +52,22 @@ const EQUAL_HEIGHT_OFFSET = 2; // to avoid changes in the header's height after const popoverTitleStyle = css` padding: ${EQUAL_HEIGHT_OFFSET}px 0; `; -const filterButtonStyle = css` + +const filterPopoverStyle = ({ euiTheme }: UseEuiTheme) => css` + .euiFilterButton__wrapper { + ${logicalCSS('left', `-${euiTheme.size.s}`)} + ${logicalCSS('min-width', '0')} + ${logicalCSS('width', `calc(100% + ${mathWithUnits(euiTheme.size.s, (x) => x * 2)})`)} + + &::before { + display: none; + } + } +`; + +const filterButtonStyle = ({ euiTheme }: UseEuiTheme) => css` + padding: 0; + &, & .euiFilterButton__text { min-width: 0; @@ -166,12 +184,13 @@ export function FieldTypeFilter({ display="block" isOpen={isOpen} closePopover={() => setIsOpen(false)} + css={filterPopoverStyle} button={ { @@ -99,6 +100,9 @@ describe('UnifiedFieldList FieldListGrouped + useGroupedFields()', () => { render(); } + const mountComponent = async (component: React.ReactElement) => + await mountWithIntl({component}); + async function mountGroupedList({ listProps, hookParams }: WrapperProps): Promise { const Wrapper: React.FC = (props) => { const { @@ -110,10 +114,10 @@ describe('UnifiedFieldList FieldListGrouped + useGroupedFields()', () => { }); return ( - <> + - + ); }; @@ -128,8 +132,8 @@ describe('UnifiedFieldList FieldListGrouped + useGroupedFields()', () => { return wrapper!; } - it('renders correctly in empty state', () => { - const wrapper = mountWithIntl( + it('renders correctly in empty state', async () => { + const wrapper = await mountComponent( {selectedCount ? ( - onChange?.([])} - style={{ height: '1rem' }} - > + onChange?.([])}> {clearButtonLabel ?? ( { + const border = `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain} !important`; + return { button: { '&.euiButtonGroupButton': { backgroundColor: euiTheme.colors.emptyShade, - border: `${euiTheme.border.thin} !important`, + border, borderRight: 'none !important', '&:first-of-type': { borderTopLeftRadius: `${euiTheme.border.radius.medium} !important`, borderBottomLeftRadius: `${euiTheme.border.radius.medium} !important`, }, '&:last-of-type': { - borderRight: `${euiTheme.border.thin} !important`, + borderRight: border, borderTopRightRadius: `${euiTheme.border.radius.medium} !important`, borderBottomRightRadius: `${euiTheme.border.radius.medium} !important`, }, diff --git a/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts b/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts index b70993ed8b02..a75a5de1fac1 100644 --- a/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts +++ b/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts @@ -15,17 +15,24 @@ export const fontWeightDefinitions = (euiTheme: UseEuiTheme['euiTheme']) => ({ }); export const ToolbarButtonStyles = ({ euiTheme }: UseEuiTheme) => { + const isAmsterdam = euiTheme.themeName === 'EUI_THEME_AMSTERDAM'; + return { - default: { - // style declaration carried over from https://github.com/elastic/kibana/blob/v8.10.4/src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss - // informed by issue https://github.com/elastic/eui/issues/4730 - borderStyle: 'solid', - border: euiTheme.border.thin, - borderColor: euiTheme.border.color, - }, + default: isAmsterdam + ? { + // style declaration carried over from https://github.com/elastic/kibana/blob/v8.10.4/src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss + // informed by issue https://github.com/elastic/eui/issues/4730 + borderStyle: 'solid', + border: euiTheme.border.thin, + borderColor: euiTheme.border.color, + } + : { + // manual border override to ensure disabled buttons have a border to align with EuiButtonGroup styles + border: `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`, + }, emptyButton: { backgroundColor: euiTheme.colors.backgroundBasePlain, - border: `${euiTheme.border.thin}`, + border: `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`, color: `${euiTheme.colors.textParagraph}`, }, buttonPositions: { diff --git a/src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx b/src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx index 007cba0a6b5a..0382ccb3042c 100644 --- a/src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx +++ b/src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx @@ -36,7 +36,7 @@ describe('', () => { const component = mountWithIntl( !isOpen} />); const button = component.find('EuiButton'); expect(button).toHaveStyleRule('background-color', '#FFFFFF'); - expect(button).toHaveStyleRule('border', '1px solid #E3E8F2'); + expect(button).toHaveStyleRule('border', '1px solid #CAD3E2'); expect(button).toHaveStyleRule('color', '#1D2A3E'); }); diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap b/src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap index a6910fbc2f7c..41a67c06115f 100644 --- a/src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap +++ b/src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap @@ -2,4 +2,4 @@ exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"
"`; -exports[`VisLegend Component Legend open should match the snapshot 1`] = `"
"`; +exports[`VisLegend Component Legend open should match the snapshot 1`] = `"
"`; diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx index 2350828ed292..6ab7874f77f4 100644 --- a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx +++ b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx @@ -70,6 +70,23 @@ const optionListControlStyles = { borderStartStartRadius: '0 !important', }, }), + /* additional custom overrides due to unexpected component usage; + open issue: https://github.com/elastic/eui-private/issues/270 */ + filterGroup: css` + /* prevents duplicate border due to nested filterGroup */ + &::after { + display: none; + } + + .euiFilterButton__wrapper { + padding: 0; + + &::before, + &::after { + display: none; + } + } + `, }; export const OptionsListControl = ({ @@ -215,6 +232,7 @@ export const OptionsListControl = ({ fullWidth compressed={isCompressed(componentApi)} className={controlPanelClassName} + css={optionListControlStyles.filterGroup} > 0} + isSelected={isPopoverOpen} numFilters={0} hasActiveFilters={fieldTypesValue.length > 0} numActiveFilters={fieldTypesValue.length} diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.test.tsx b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.test.tsx index 46591e17e1db..16ba5dae9e62 100644 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.test.tsx +++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.test.tsx @@ -8,7 +8,8 @@ */ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; +import { render } from '@elastic/eui/lib/test/rtl'; import { __IntlProvider as IntlProvider } from '@kbn/i18n-react'; import { buildDataTableRecord } from '@kbn/discover-utils'; import { createStubDataView } from '@kbn/data-views-plugin/common/data_view.stub'; diff --git a/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.styles.ts b/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.styles.ts index 21ece7f82e88..b2582790bc30 100644 --- a/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.styles.ts +++ b/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.styles.ts @@ -28,7 +28,8 @@ export const changeDataViewStyles = ({ return { trigger: { maxWidth: fullWidth ? undefined : MIN_WIDTH, - border: theme.border.thin, + backgroundColor: theme.colors.backgroundBasePlain, + border: `${theme.border.width.thin} solid ${theme.colors.borderBasePlain}`, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, }, diff --git a/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.tsx b/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.tsx index 530c19e7086d..5c67af41b034 100644 --- a/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.tsx +++ b/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.tsx @@ -285,7 +285,7 @@ export function ChangeDataView({ padding: 11px; border-radius: ${euiTheme.border.radius.small} 0 0 ${euiTheme.border.radius.small}; background-color: ${euiTheme.colors.lightestShade}; - border: ${euiTheme.border.thin}; + border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}; border-right: 0; `} > diff --git a/src/platform/plugins/shared/unified_search/public/filter_bar/filter_button_group/filter_button_group.scss b/src/platform/plugins/shared/unified_search/public/filter_bar/filter_button_group/filter_button_group.scss index 95b87e1d827c..39f221449bfc 100644 --- a/src/platform/plugins/shared/unified_search/public/filter_bar/filter_button_group/filter_button_group.scss +++ b/src/platform/plugins/shared/unified_search/public/filter_bar/filter_button_group/filter_button_group.scss @@ -1,8 +1,17 @@ .kbnFilterButtonGroup { + position: relative; height: $euiFormControlHeight; background-color: $euiFormInputGroupLabelBackground; border-radius: $euiFormControlBorderRadius; - box-shadow: 0 0 1px inset rgba($euiFormBorderOpaqueColor, .4); + + &::after { + content: ''; + position: absolute; + inset: 0; + border: $euiBorderWidthThin solid $euiFormBorderColor; + border-radius: inherit; + pointer-events: none; + } // Targets any interactable elements *:enabled { diff --git a/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx index 77e7b88ef292..28e48f1c9672 100644 --- a/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx +++ b/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx @@ -641,7 +641,10 @@ export const QueryBarTopRow = React.memo( timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride} filtersForSuggestions={props.filtersForSuggestions} onFiltersUpdated={props.onFiltersUpdated} - buttonProps={{ size: shouldShowDatePickerAsBadge() ? 's' : 'm', display: 'empty' }} + buttonProps={{ + size: shouldShowDatePickerAsBadge() ? 's' : 'm', + display: 'empty', + }} isDisabled={props.isDisabled} suggestionsAbstraction={props.suggestionsAbstraction} /> diff --git a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx index 9ee1ea3517da..f93edf98956c 100644 --- a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx +++ b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx @@ -270,7 +270,7 @@ export class FeatureTable extends Component { ); const extraAction = ( - + {feature.reserved.description} ); @@ -353,7 +353,7 @@ export class FeatureTable extends Component { featureName: feature.name, }, })} - style={{ + css={{ minWidth: 200, }} /> diff --git a/x-pack/platform/packages/shared/security/api_key_management/src/components/token_field.tsx b/x-pack/platform/packages/shared/security/api_key_management/src/components/token_field.tsx index fa3454bfae0b..7e26be0f5b37 100644 --- a/x-pack/platform/packages/shared/security/api_key_management/src/components/token_field.tsx +++ b/x-pack/platform/packages/shared/security/api_key_management/src/components/token_field.tsx @@ -36,10 +36,9 @@ export const TokenField: FunctionComponent = ({ value, ...props defaultMessage: 'Token', })} value={value} - style={{ + css={{ fontFamily: euiThemeVars.euiCodeFontFamily, fontSize: euiThemeVars.euiFontSizeXS, - backgroundColor: 'transparent', }} onFocus={(event) => event.currentTarget.select()} readOnly @@ -53,7 +52,6 @@ export const TokenField: FunctionComponent = ({ value, ...props })} iconType="copyClipboard" color="accentSecondary" - style={{ backgroundColor: 'transparent' }} onClick={copyText} /> )} diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap index 59e6fc00737b..f1746c1b2304 100644 --- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap +++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` App renders properly 1`] = `"
markdown mock
markdown mock

Page level controls

My Canvas Workpad

There is a new region landmark with page level controls at the end of the document.

"`; +exports[` App renders properly 1`] = `"
markdown mock
markdown mock

Page level controls

My Canvas Workpad

There is a new region landmark with page level controls at the end of the document.

"`; diff --git a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/field_types_filter/field_types_help_popover.tsx b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/field_types_filter/field_types_help_popover.tsx index 6c5fedce0fee..eee084566dd9 100644 --- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/field_types_filter/field_types_help_popover.tsx +++ b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/field_types_filter/field_types_help_popover.tsx @@ -84,6 +84,7 @@ export const FieldTypesHelpPopover: FC<{ const helpButton = ( = React.memo( 0} numActiveFilters={selectedStatus.length} numFilters={selectedStatus.length} diff --git a/x-pack/platform/plugins/shared/cases/public/components/user_actions_activity_bar/filter_activity.tsx b/x-pack/platform/plugins/shared/cases/public/components/user_actions_activity_bar/filter_activity.tsx index 001b5ea8fc29..a1135c137baa 100644 --- a/x-pack/platform/plugins/shared/cases/public/components/user_actions_activity_bar/filter_activity.tsx +++ b/x-pack/platform/plugins/shared/cases/public/components/user_actions_activity_bar/filter_activity.tsx @@ -50,6 +50,8 @@ export const FilterActivity = React.memo( `} grow={false} onClick={() => handleFilterChange('all')} + isToggle + isSelected={type === 'all'} hasActiveFilters={type === 'all'} numFilters={userActionsStats && userActionsStats.total > 0 ? userActionsStats.total : 0} isLoading={isLoading} @@ -62,6 +64,8 @@ export const FilterActivity = React.memo( 0 @@ -76,6 +80,8 @@ export const FilterActivity = React.memo( {i18n.COMMENTS} 0 diff --git a/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/table/dataset_quality_details_link.tsx b/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/table/dataset_quality_details_link.tsx index ec6c34ce1a77..2ca7ce019501 100644 --- a/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/table/dataset_quality_details_link.tsx +++ b/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/table/dataset_quality_details_link.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiHeaderLink } from '@elastic/eui'; +import { EuiButtonEmpty } from '@elastic/eui'; import { DATA_QUALITY_DETAILS_LOCATOR_ID, DataQualityDetailsLocatorParams, @@ -41,15 +41,16 @@ export const DatasetQualityDetailsLink = React.memo( }); return ( - {children} - + ); } ); diff --git a/x-pack/platform/plugins/shared/fleet/public/components/platform_selector.tsx b/x-pack/platform/plugins/shared/fleet/public/components/platform_selector.tsx index 04490d0dcfe1..c33aa7f1f088 100644 --- a/x-pack/platform/plugins/shared/fleet/public/components/platform_selector.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/components/platform_selector.tsx @@ -152,6 +152,8 @@ export const PlatformSelector: React.FunctionComponent = ({ {VISIBLE_PLATFORM_OPTIONS.map((option) => ( setPlatform(option.id)} data-test-subj={option['data-test-subj']} diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx index fe2bbd6bfa6c..c7c5ba3e5935 100644 --- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx +++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx @@ -541,13 +541,22 @@ export const DetailsPageMappingsContent: FunctionComponent<{ )} onClick={onToggleChange} > - + - + { min-width: 0; border-width: ${euiTheme.border.width.thin}; border-style: solid; - border-color: ${euiTheme.border.color}; // Lighten the border color for all states + border-color: ${euiTheme.colors.borderBasePlain}; // Lighten the border color for all states // Override background color for non-disabled buttons &:not(:disabled) { diff --git a/x-pack/platform/plugins/shared/maps/public/_mapbox_hacks.scss b/x-pack/platform/plugins/shared/maps/public/_mapbox_hacks.scss index 118e0b186206..b6afb79c9f47 100644 --- a/x-pack/platform/plugins/shared/maps/public/_mapbox_hacks.scss +++ b/x-pack/platform/plugins/shared/maps/public/_mapbox_hacks.scss @@ -31,7 +31,7 @@ transition: background $euiAnimSpeedNormal ease-in-out; &:hover { - background-color: transparentize($euiColorDarkShade, .9); + background-color: lightOrDarkTheme(rgba($euiColorTextPrimary, .08), rgba($euiColorPlainLight, .12)); } } diff --git a/x-pack/platform/plugins/shared/maps/public/connected_components/toolbar_overlay/fit_to_data/fit_to_data.tsx b/x-pack/platform/plugins/shared/maps/public/connected_components/toolbar_overlay/fit_to_data/fit_to_data.tsx index 347dbcd84454..08e8c101ba26 100644 --- a/x-pack/platform/plugins/shared/maps/public/connected_components/toolbar_overlay/fit_to_data/fit_to_data.tsx +++ b/x-pack/platform/plugins/shared/maps/public/connected_components/toolbar_overlay/fit_to_data/fit_to_data.tsx @@ -40,6 +40,7 @@ export function FitToData(props: Props) { iconType="expand" aria-label={label} title={title} + color="text" display={props.autoFitToDataBounds ? 'fill' : 'empty'} /> diff --git a/x-pack/platform/plugins/shared/ml/public/application/notifications/components/entity_filter.tsx b/x-pack/platform/plugins/shared/ml/public/application/notifications/components/entity_filter.tsx index 01159b7491c2..ce71073840c7 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/notifications/components/entity_filter.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/notifications/components/entity_filter.tsx @@ -60,6 +60,7 @@ export const EntityFilter: FC = React.memo(({ query, onCha iconType="arrowDown" iconSide="right" onClick={setIsOpen.bind(null, (prev) => !prev)} + isSelected={isOpen} hasActiveFilters={hasActiveFilters} numActiveFilters={hasActiveFilters ? selectedOptions.length : undefined} grow diff --git a/x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.tsx b/x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.tsx index 8b417819b87e..e4f2bde19552 100644 --- a/x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.tsx +++ b/x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.tsx @@ -609,7 +609,7 @@ function UserAvatarEditor({ ) : ( - + @@ -657,7 +657,7 @@ function UserAvatarEditor({ onClick={() => formik.setFieldValue('data.avatar.color', getRandomColor())} size="xs" flush="right" - style={{ height: euiTheme.base }} + css={{ height: euiTheme.base }} > = ({ user }) => { @@ -1081,7 +1081,7 @@ export const SaveChangesBottomBar: FunctionComponent = () => { const { count } = useFormChangesContext(); return ( - + diff --git a/x-pack/platform/plugins/shared/security/public/management/api_keys/api_keys_grid/api_keys_table.tsx b/x-pack/platform/plugins/shared/security/public/management/api_keys/api_keys_grid/api_keys_table.tsx index 337ec88a3cee..acac9bf80c09 100644 --- a/x-pack/platform/plugins/shared/security/public/management/api_keys/api_keys_grid/api_keys_table.tsx +++ b/x-pack/platform/plugins/shared/security/public/management/api_keys/api_keys_grid/api_keys_table.tsx @@ -389,6 +389,8 @@ export const TypesFilterButton: FunctionComponent = ({ que { onFilterChange({ ...filters, type: filters.type === 'rest' ? undefined : 'rest' }); @@ -412,6 +414,8 @@ export const TypesFilterButton: FunctionComponent = ({ que { onFilterChange({ @@ -438,6 +442,8 @@ export const TypesFilterButton: FunctionComponent = ({ que { onFilterChange({ @@ -476,6 +482,8 @@ export const ExpiredFilterButton: FunctionComponent = ({ return ( <> { if (filters.expired === false) { @@ -493,6 +501,8 @@ export const ExpiredFilterButton: FunctionComponent = ({ /> { if (filters.expired === true) { diff --git a/x-pack/platform/plugins/shared/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap b/x-pack/platform/plugins/shared/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap index 43355ca0b328..1edc8fb41e17 100644 --- a/x-pack/platform/plugins/shared/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap +++ b/x-pack/platform/plugins/shared/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; +exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; -exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"My Company NameMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; +exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"My Company NameMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; diff --git a/x-pack/platform/plugins/shared/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap b/x-pack/platform/plugins/shared/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap index b8dc310ce7b6..303d6026f73e 100644 --- a/x-pack/platform/plugins/shared/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap +++ b/x-pack/platform/plugins/shared/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; +exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; -exports[`ResetSessionPage renders as expected with custom page title 1`] = `"My Company NameMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; +exports[`ResetSessionPage renders as expected with custom page title 1`] = `"My Company NameMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; diff --git a/x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx b/x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx index 753b3395e1ce..c1c7cd39b89c 100644 --- a/x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx +++ b/x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx @@ -7,7 +7,6 @@ import { EuiButton, useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; -import type { CSSProperties } from 'react'; import React from 'react'; import type { ApplicationStart, Capabilities } from '@kbn/core/public'; @@ -16,7 +15,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; interface Props { isDisabled?: boolean; size?: 's' | 'm'; - style?: CSSProperties; + fullWidth?: boolean; onClick?: () => void; capabilities: Capabilities; navigateToApp: ApplicationStart['navigateToApp']; @@ -25,7 +24,7 @@ interface Props { export const ManageSpacesButton: React.FC = ({ isDisabled, size, - style, + fullWidth, onClick, capabilities, navigateToApp, @@ -48,12 +47,15 @@ export const ManageSpacesButton: React.FC = ({ size={size || 's'} isDisabled={isDisabled} onClick={navigateToManageSpaces} - style={style} data-test-subj="manageSpaces" - css={css` - margin: ${euiTheme.size.m}; - width: calc(100% - ${euiTheme.size.m} * 2); - `} + css={ + fullWidth + ? { width: `100%` } + : css` + margin: ${euiTheme.size.m}; + width: calc(100% - ${euiTheme.size.m} * 2); + ` + } > = (props: Props) => { > displayLimit) { button = isExpanded ? ( - setIsExpanded(false)} - style={{ alignSelf: 'center' }} - > + setIsExpanded(false)}> ) : ( - setIsExpanded(true)} - style={{ alignSelf: 'center' }} - > + setIsExpanded(true)}> { ); const getFilterButtonPropsFor = (filter: PreviewDocsFilterOption) => ({ + isToggle: previewDocsFilter === filter, + isSelected: previewDocsFilter === filter, hasActiveFilters: previewDocsFilter === filter, onClick: () => changePreviewDocsFilter(filter), }); diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.tsx index 44ea69016497..6ae0b977a62c 100644 --- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.tsx +++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.tsx @@ -51,6 +51,7 @@ export const EventLogListStatusFilter = (props: EventLogListStatusFilterProps) = 0} numActiveFilters={selectedOptions.length} numFilters={selectedOptions.length} diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/action_type_filter.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/action_type_filter.tsx index 710eb8a3d645..2221789ea856 100644 --- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/action_type_filter.tsx +++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/action_type_filter.tsx @@ -45,6 +45,7 @@ export const ActionTypeFilter: React.FunctionComponent = button={ 0} numActiveFilters={filters.length} numFilters={filters.length} diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx index 2d0bd99f8ea8..6627765e2199 100644 --- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx +++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx @@ -59,6 +59,7 @@ export const RuleExecutionStatusFilter: React.FunctionComponent 0} numActiveFilters={selectedValues.length} numFilters={selectedValues.length} diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx index 19817cfda9a3..4a025b729fe9 100644 --- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx +++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx @@ -59,6 +59,7 @@ export const RuleLastRunOutcomeFilter: React.FunctionComponent 0} numActiveFilters={selectedOutcomes.length} numFilters={selectedOutcomes.length} diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.tsx index 09d723459585..aca3c12c6e68 100644 --- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.tsx +++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.tsx @@ -105,6 +105,7 @@ export const RuleStatusFilter = (props: RuleStatusFilterProps) => { 0} numActiveFilters={selectedStatuses.length} numFilters={selectedStatuses.length} diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_filter.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_filter.tsx index 861fb567a256..bcae277bf131 100644 --- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_filter.tsx +++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_filter.tsx @@ -69,10 +69,12 @@ const OptionWrapper = memo( const RuleTagFilterPopoverButton = memo( ({ + isSelected, selectedTags, onClosePopover, buttonDataTestSubj, }: { + isSelected: boolean; selectedTags: string[]; onClosePopover: () => void; buttonDataTestSubj?: string; @@ -81,6 +83,7 @@ const RuleTagFilterPopoverButton = memo( 0} numActiveFilters={selectedTags.length} numFilters={selectedTags.length} @@ -282,6 +285,7 @@ export const RuleTagFilter = memo((props: RuleTagFilterProps) => { closePopover={onClosePopover} button={ = ({ button={ 0} numActiveFilters={filters.length} numFilters={filters.length} diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_expanded.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_expanded.tsx index 09b9f443389c..3a7f531182ed 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_expanded.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_expanded.tsx @@ -37,7 +37,11 @@ export function FilterExpanded(props: FilterProps) { return ( setIsOpen((prevState) => !prevState)} iconType="arrowDown"> + setIsOpen((prevState) => !prevState)} + iconType="arrowDown" + isSelected={isOpen} + > {props.label} } diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/labels_filter.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/labels_filter.tsx index 5d8d7f24970c..a7eaceffc2c4 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/labels_filter.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/labels_filter.tsx @@ -39,7 +39,12 @@ export function LabelsFieldFilter(props: FilterProps) { }; const button = ( - + {LABELS_LABEL} ); diff --git a/x-pack/solutions/observability/plugins/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx b/x-pack/solutions/observability/plugins/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx index e74173e90cff..1dba68004968 100644 --- a/x-pack/solutions/observability/plugins/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx +++ b/x-pack/solutions/observability/plugins/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx @@ -136,6 +136,7 @@ export function FieldValueSelection({ defaultMessage: 'expands filter group for {label} filter', values: { label }, })} + isSelected={isPopoverOpen || forceOpen} hasActiveFilters={numOfFilters > 0} iconType="arrowDown" numActiveFilters={numOfFilters} diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/filter_status_button.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/filter_status_button.tsx index 7615f8aaa52a..2ece2635f435 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/filter_status_button.tsx +++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/filter_status_button.tsx @@ -36,6 +36,8 @@ export const FilterStatusButton = ({ return ( { diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/step_detail/waterfall/waterfall_filter.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/step_detail/waterfall/waterfall_filter.tsx index f8b0422c669b..972a8ed47fe8 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/step_detail/waterfall/waterfall_filter.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/step_detail/waterfall/waterfall_filter.tsx @@ -158,6 +158,8 @@ export const WaterfallFilter = ({ {MIME_FILTERS.map(({ label, mimeType }) => ( toggleFilters(mimeType)} key={label} diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap index dd4e3c9ff1e7..258eadff7b94 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap @@ -1,23 +1,28 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`FilterStatusButton renders without errors for valid props 1`] = ` - + + `; exports[`FilterStatusButton shallow renders without errors for valid props 1`] = ` diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/status_filter.test.tsx.snap b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/status_filter.test.tsx.snap index a9d2b7baf2cc..786119e0a8c7 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/status_filter.test.tsx.snap +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/status_filter.test.tsx.snap @@ -4,57 +4,72 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
- -
+
- - Up + + Up + - - -
+
- - Down + + Down + - - + +
`; diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/filter_status_button.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/filter_status_button.tsx index 625b16a3d349..306526b6dc88 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/filter_status_button.tsx +++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/filter_status_button.tsx @@ -31,6 +31,8 @@ export const FilterStatusButton = ({ return ( { diff --git a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/index.tsx b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/index.tsx index 2fcec02786dc..31daf2bd89a0 100644 --- a/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/index.tsx +++ b/x-pack/solutions/security/packages/ecs-data-quality-dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/index.tsx @@ -126,6 +126,8 @@ export const HistoricalResultsComponent: FC = ({ indexName }) => { aria-label={FILTER_RESULTS_BY_OUTCOME} > = ({ indexName }) => { {ALL} = ({ indexName }) => { {PASS} { { { {rulesPrebuiltInstalledCount != null ? ` (${rulesPrebuiltInstalledCount ?? ''})` : ''} { { {i18n.ENABLED_RULES} { {i18n.COLLAPSE_CELLS_FILTER_BUTTON} diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap index 9240e908a4af..717ae6990e05 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap @@ -4,39 +4,49 @@ exports[`Select Flow Direction rendering it renders the basic group button for u
- -
+
- - Bidirectional + + Bidirectional + - - + +
`; diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.tsx index 70d2ef30ad97..1eeb64609a8f 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.tsx @@ -20,6 +20,8 @@ export const FlowDirectionSelect = React.memo(({ onChangeDirection, selec onChangeDirection(FlowDirection.uniDirectional)} data-test-subj={FlowDirection.uniDirectional} @@ -28,6 +30,8 @@ export const FlowDirectionSelect = React.memo(({ onChangeDirection, selec onChangeDirection(FlowDirection.biDirectional)} data-test-subj={FlowDirection.biDirectional} diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.tsx index 17a12054bfa5..12a99026e900 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.tsx @@ -79,6 +79,8 @@ export const SearchRow = React.memo( <> ( { await this.assertOverviewModeSelectorExists(); - await testSubjects.click(OVERVIEW_MODE_SELECTOR); + const wrapper = await testSubjects.find(OVERVIEW_MODE_SELECTOR); + const button = await testSubjects.findDescendant('groups', wrapper); + await button.click(); }); }, diff --git a/yarn.lock b/yarn.lock index cc5815fa65cf..99260be40ce7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2169,12 +2169,12 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-1.0.0.tgz#2db728692ab1f13e08826a65c2adb180c3962195" integrity sha512-2CZ8w5+vJgruqWm5XEA1KENX+ZYAjMfkRyJtXafq4/jXIFLYCWqqAAWmVgrbY+DufLr405Zf8718L7Rp39TMEg== -"@elastic/eui-amsterdam@npm:@elastic/eui@102.2.0-amsterdam.0": - version "102.2.0-amsterdam.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.2.0-amsterdam.0.tgz#f520caecd95e1054de6b8e21d67f76768ae0b345" - integrity sha512-VqZAac9KHMaPS8yFaibSvD/j2+5/F2/smXrVXIOoTZb7EfK7Fg0UVJOzRdlLon+4W0gHaHvijbe2q8lmym7q6A== +"@elastic/eui-amsterdam@npm:@elastic/eui@102.3.0-amsterdam.0": + version "102.3.0-amsterdam.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.3.0-amsterdam.0.tgz#c7cf10b8746d949ca3ce395429b282e8265b9f78" + integrity sha512-G1W09aeOWldHwPkkJJ9/42q7+z5N9cr/oNESVW1wZ/FunYJt0FUIxqTj3QbpzK3B/qdCaW+Xe4wOyoW5Zad04Q== dependencies: - "@elastic/eui-theme-common" "1.0.0" + "@elastic/eui-theme-common" "1.1.0" "@elastic/prismjs-esql" "^1.1.0" "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202" @@ -2210,26 +2210,26 @@ uuid "^8.3.0" vfile "^4.2.1" -"@elastic/eui-theme-borealis@1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-1.0.0.tgz#f85679d2d72dfc43a620241cbf4161d4e4e81841" - integrity sha512-Zf3ZX5siUhF+TNOdP0FZ3PNEpVmfe3DDXFm5biAKFlGp4e5yrR1FKPYOzkOdJtPWlOoNaedawnALXNVjp1UH8w== +"@elastic/eui-theme-borealis@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-1.1.0.tgz#36cea288aa5238987d72601725653734a4db789f" + integrity sha512-sm5wxrDPv/vul/37AAFmj9GfeAyA55+DWYQPI3k79hu6/Dcsp53Kdwaxh4BgFuNjfAAtMbmPkpBIOJMGSCeW1w== -"@elastic/eui-theme-common@1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-1.0.0.tgz#c5e7b7597c4ebe71fc533b18458415a14a93794d" - integrity sha512-9+P21npVm05OmFr0OPkA5DSdts9teOo/OEotbJFAVkqBLkNf+Eevv6q89B8eQ6r383RnVwTl7vBzb6M9PnULJg== +"@elastic/eui-theme-common@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-1.1.0.tgz#952d98faf5a6afab50f126cd6eca980966317a1d" + integrity sha512-WI+hkJcPdX82a7Y7LGIkHnC80X4O8YwjjzgwEHngsuMXKuFUkCs9JFru1adzg+mF0TAseUjE+V5PvNWlrm8J3g== dependencies: "@types/lodash" "^4.14.202" chroma-js "^2.4.2" lodash "^4.17.21" -"@elastic/eui@102.2.0": - version "102.2.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.2.0.tgz#cba90fece1afa78686fd51ba9fa5fd019fd0c6a0" - integrity sha512-ksFQ66kKtftvcaEuHuzI7vI6CSDeet9QU5nkBDOl18QuoA3VyeGzX4ISranWj+Gyk22SGn2K9BEudXSVkoDBWg== +"@elastic/eui@102.3.0": + version "102.3.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.3.0.tgz#8bdeceb229d6987874ac32ec0db6e34d74bae0c9" + integrity sha512-U0WOGkKaiYc42t6d+42RYnFJD6p03pHheM8H8t2sr+fmsnd6sMzEwkng+xiTZrUGSvtqmw1ltbJXdK31J5EwdQ== dependencies: - "@elastic/eui-theme-common" "1.0.0" + "@elastic/eui-theme-common" "1.1.0" "@elastic/prismjs-esql" "^1.1.0" "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202"