diff --git a/eui_114.0.0_selectable_ui_updates_05.tgz b/eui_114.0.0_selectable_ui_updates_05.tgz new file mode 100644 index 0000000000000..2a2a2dae9f5fd Binary files /dev/null and b/eui_114.0.0_selectable_ui_updates_05.tgz differ diff --git a/package.json b/package.json index 3a38ed5316f83..0f71a8bcf2a08 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,7 @@ "@elastic/elasticsearch": "9.3.4", "@elastic/ems-client": "8.6.3", "@elastic/esql": "1.7.0", - "@elastic/eui": "114.0.0", + "@elastic/eui": "file:./eui_114.0.0_selectable_ui_updates_05.tgz", "@elastic/eui-theme-borealis": "7.0.0", "@elastic/filesaver": "1.1.2", "@elastic/kibana-d3-color": "npm:@elastic/kibana-d3-color@2.0.1", diff --git a/src/platform/packages/shared/content-management/table_list_view_table/src/components/tag_filter_panel.tsx b/src/platform/packages/shared/content-management/table_list_view_table/src/components/tag_filter_panel.tsx index 87c550de04cee..f876262fa2cfc 100644 --- a/src/platform/packages/shared/content-management/table_list_view_table/src/components/tag_filter_panel.tsx +++ b/src/platform/packages/shared/content-management/table_list_view_table/src/components/tag_filter_panel.tsx @@ -181,6 +181,7 @@ export const TagFilterPanel: FC<{}> = ({}) => { onChange={onSelectChange} data-test-subj="tagSelectableList" aria-label={tagsLabel} + listProps={{ paddingSize: 's' }} {...searchProps} > {(list, search) => { diff --git a/src/platform/packages/shared/kbn-alerts-ui-shared/src/add_message_variables/index.tsx b/src/platform/packages/shared/kbn-alerts-ui-shared/src/add_message_variables/index.tsx index edcf56f351dbb..abb56244afc9a 100644 --- a/src/platform/packages/shared/kbn-alerts-ui-shared/src/add_message_variables/index.tsx +++ b/src/platform/packages/shared/kbn-alerts-ui-shared/src/add_message_variables/index.tsx @@ -189,7 +189,6 @@ export const AddMessageVariables: React.FunctionComponent = ({ listProps={{ rowHeight: 70, showIcons: false, - paddingSize: 'none', textWrap: 'wrap', }} loadingMessage={i18n.LOADING_VARIABLES} diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestions.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestions.tsx index a22f023a7ddfc..34457dc49161c 100644 --- a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestions.tsx +++ b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestions.tsx @@ -210,7 +210,7 @@ export const OptionsListPopoverSuggestions = ({ renderOption(option, searchString)} - listProps={{ onFocusBadge: false }} + listProps={{ onFocusBadge: false, paddingSize: 's' }} aria-label={OptionsListStrings.popover.getSuggestionsAriaLabel( label, selectableOptions.length diff --git a/src/platform/plugins/shared/unified_search/public/dataview_picker/dataview_list.tsx b/src/platform/plugins/shared/unified_search/public/dataview_picker/dataview_list.tsx index fc1c3047ff9bf..4f2cac8d98935 100644 --- a/src/platform/plugins/shared/unified_search/public/dataview_picker/dataview_list.tsx +++ b/src/platform/plugins/shared/unified_search/public/dataview_picker/dataview_list.tsx @@ -131,6 +131,7 @@ export function DataViewsList({ {...selectableProps} listProps={{ truncationProps: MIDDLE_TRUNCATION_PROPS, + paddingSize: 's', ...(selectableProps?.listProps ? selectableProps.listProps : undefined), }} data-test-subj="indexPattern-switcher" diff --git a/src/platform/plugins/shared/unified_search/public/saved_query_management/saved_query_management_list.test.tsx b/src/platform/plugins/shared/unified_search/public/saved_query_management/saved_query_management_list.test.tsx index 7f495076e7806..00ff72f729467 100644 --- a/src/platform/plugins/shared/unified_search/public/saved_query_management/saved_query_management_list.test.tsx +++ b/src/platform/plugins/shared/unified_search/public/saved_query_management/saved_query_management_list.test.tsx @@ -379,9 +379,9 @@ describe('Saved query management list component', () => { await waitFor(() => { expect(findSavedQueriesSpy).toHaveBeenLastCalledWith(undefined, 5, 1); }); - expect(screen.getByRole('option', { name: 'Test 0', checked: false })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Test 0', selected: false })).toBeInTheDocument(); await userEvent.click(screen.getByRole('option', { name: 'Test 0' })); - expect(screen.getByRole('option', { name: 'Test 0', checked: true })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Test 0', selected: true })).toBeInTheDocument(); findSavedQueriesSpy.mockResolvedValue({ total: 6, queries: generateSavedQueries(1), @@ -398,7 +398,7 @@ describe('Saved query management list component', () => { await waitFor(() => { expect(findSavedQueriesSpy).toHaveBeenLastCalledWith(undefined, 5, 1); }); - expect(screen.getByRole('option', { name: 'Test 0', checked: true })).toBeInTheDocument(); + expect(screen.getByRole('option', { name: 'Test 0', selected: true })).toBeInTheDocument(); }); it('should allow providing a search term', async () => { diff --git a/src/platform/plugins/shared/unified_search/public/saved_query_management/saved_query_management_list.tsx b/src/platform/plugins/shared/unified_search/public/saved_query_management/saved_query_management_list.tsx index 2708630dce23e..ab8b3bba19745 100644 --- a/src/platform/plugins/shared/unified_search/public/saved_query_management/saved_query_management_list.tsx +++ b/src/platform/plugins/shared/unified_search/public/saved_query_management/saved_query_management_list.tsx @@ -430,7 +430,7 @@ export const SavedQueryManagementList = ({ isLoading={isInitializing} singleSelection="always" options={savedQueriesOptions} - listProps={{ onFocusBadge: false }} + listProps={{ onFocusBadge: false, paddingSize: 's' }} isPreFiltered searchable searchProps={{ diff --git a/x-pack/platform/packages/private/ml/field_stats_flyout/moon.yml b/x-pack/platform/packages/private/ml/field_stats_flyout/moon.yml index 7f7b97799d1b4..0baddc9ecc30a 100644 --- a/x-pack/platform/packages/private/ml/field_stats_flyout/moon.yml +++ b/x-pack/platform/packages/private/ml/field_stats_flyout/moon.yml @@ -29,6 +29,7 @@ dependsOn: - '@kbn/ml-query-utils' - '@kbn/ml-is-defined' - '@kbn/field-types' + - '@kbn/css-utils' tags: - shared-browser - package diff --git a/x-pack/platform/packages/private/ml/field_stats_flyout/options_list_with_stats/option_list_popover.tsx b/x-pack/platform/packages/private/ml/field_stats_flyout/options_list_with_stats/option_list_popover.tsx index 40b47acad3338..06f5d19a3410d 100644 --- a/x-pack/platform/packages/private/ml/field_stats_flyout/options_list_with_stats/option_list_popover.tsx +++ b/x-pack/platform/packages/private/ml/field_stats_flyout/options_list_with_stats/option_list_popover.tsx @@ -11,9 +11,11 @@ import type { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape, EuiSelectableOption, + UseEuiTheme, } from '@elastic/eui'; import { EuiFlexItem, EuiSelectable, htmlIdGenerator } from '@elastic/eui'; import { css } from '@emotion/react'; +import { useMemoCss } from '@kbn/css-utils/public/use_memo_css'; import { type DropDownLabel } from './types'; import { useFieldStatsFlyoutContext } from '../use_field_stats_flyout_context'; import { OptionsListPopoverFooter } from './option_list_popover_footer'; @@ -112,6 +114,11 @@ export const OptionsListPopover = ({ ); const id = useMemo(() => htmlIdGenerator()(), []); + const styles = useMemoCss({ + optionsListAvailableOptions: ({ euiTheme }: UseEuiTheme) => + css({ width: '100%', height: '100%', padding: euiTheme.size.s }), + }); + const filteredOptions = useMemo(() => { return showEmptyFields ? options @@ -140,7 +147,7 @@ export const OptionsListPopover = ({ > {(list, search) => ( <> -
+
{search}
diff --git a/x-pack/platform/plugins/private/drilldowns/url_drilldown/public/lib/components/variable_popover/index.tsx b/x-pack/platform/plugins/private/drilldowns/url_drilldown/public/lib/components/variable_popover/index.tsx index 2ccba947e62be..1714a65c3712f 100644 --- a/x-pack/platform/plugins/private/drilldowns/url_drilldown/public/lib/components/variable_popover/index.tsx +++ b/x-pack/platform/plugins/private/drilldowns/url_drilldown/public/lib/components/variable_popover/index.tsx @@ -69,6 +69,7 @@ export const VariablePopover: React.FC = ({ variables, onSelect, variable }} listProps={{ showIcons: false, + paddingSize: 's', }} > {(list, search) => ( diff --git a/x-pack/platform/plugins/shared/agent_builder/public/application/components/common/agent_selector/agent_selector_dropdown.tsx b/x-pack/platform/plugins/shared/agent_builder/public/application/components/common/agent_selector/agent_selector_dropdown.tsx index 727ffdacebdb9..0d4c3179120b3 100644 --- a/x-pack/platform/plugins/shared/agent_builder/public/application/components/common/agent_selector/agent_selector_dropdown.tsx +++ b/x-pack/platform/plugins/shared/agent_builder/public/application/components/common/agent_selector/agent_selector_dropdown.tsx @@ -221,6 +221,7 @@ export const AgentSelectorDropdown: React.FC = ({ rowHeight: AGENT_OPTION_ROW_HEIGHT, onFocusBadge: false, css: selectorListStyles, + paddingSize: 's', }} > {(list) => ( diff --git a/x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_input/input_actions/connector_selector/connector_selector.tsx b/x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_input/input_actions/connector_selector/connector_selector.tsx index 0d2dbc439618b..3dfb80412f515 100644 --- a/x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_input/input_actions/connector_selector/connector_selector.tsx +++ b/x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_input/input_actions/connector_selector/connector_selector.tsx @@ -300,6 +300,7 @@ export const ConnectorSelector: React.FC<{}> = () => { css: selectorListStyles, rowHeight: CONNECTOR_OPTION_ROW_HEIGHT, onFocusBadge: false, + paddingSize: 's', }} > {(list) => ( diff --git a/x-pack/platform/plugins/shared/cases/public/components/all_cases/assignees_filter.test.tsx b/x-pack/platform/plugins/shared/cases/public/components/all_cases/assignees_filter.test.tsx index 70812c9a1dbea..7ed065ed97abc 100644 --- a/x-pack/platform/plugins/shared/cases/public/components/all_cases/assignees_filter.test.tsx +++ b/x-pack/platform/plugins/shared/cases/public/components/all_cases/assignees_filter.test.tsx @@ -275,7 +275,7 @@ describe('AssigneesFilterPopover', () => { `You've selected the maximum number of ${MAX_ASSIGNEES_FILTER_LENGTH} assignees` ) ).toBeInTheDocument(); - expect(await screen.findByTitle('No assignees')).toHaveAttribute('aria-selected', 'false'); + expect(await screen.findByTitle('No assignees')).toHaveAttribute('aria-checked', 'false'); expect(await screen.findByTitle('No assignees')).toHaveAttribute('aria-disabled', 'true'); }); }); diff --git a/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx b/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx index 66c27393c58c2..2c2ffbe954771 100644 --- a/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx +++ b/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx @@ -116,6 +116,7 @@ export function IntegrationsSelector({ placeholder: integrationsSelectorSearchPlaceholder, compressed: true, }} + listProps={{ paddingSize: 's' }} aria-label={integrationsSelectorLabel} options={integrations} onChange={onIntegrationsChange} diff --git a/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx b/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx index 4ebd41334a8a9..ffd6088296a6f 100644 --- a/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx +++ b/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx @@ -96,6 +96,7 @@ export function NamespacesSelector({ placeholder: namespacesSelectorSearchPlaceholder, compressed: true, }} + listProps={{ paddingSize: 's' }} aria-label={namespacesSelectorLabel} options={namespaces} onChange={onNamespacesChange} diff --git a/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/selector.tsx b/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/selector.tsx index ecb15af96f23c..b0eb90619de3d 100644 --- a/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/selector.tsx +++ b/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/selector.tsx @@ -87,6 +87,7 @@ export function Selector({ placeholder: searchPlaceholder, compressed: true, }} + listProps={{ paddingSize: 's' }} aria-label={label} options={options} onChange={onOptionsChange} diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx index dab06fcc61b58..074764782acf2 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx @@ -95,7 +95,7 @@ export const DatasetFilter: React.FunctionComponent<{ } isOpen={isOpen} closePopover={closePopover} - panelPaddingSize="none" + panelPaddingSize="s" > {(list) => list} diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx index 1090024cf92e7..26f7b1500c73e 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx @@ -245,14 +245,13 @@ export const AgentStatusFilter: React.FC<{ } isOpen={isStatusFilterOpen} closePopover={() => updateIsStatusFilterOpen(false)} - panelPaddingSize="none" + panelPaddingSize="s" > = ({ } isOpen={isAgentPoliciesFilterOpen} closePopover={() => setIsAgentPoliciesFilterOpen(false)} - panelPaddingSize="none" + panelPaddingSize="s" > = ({ }} data-test-subj="agentList.agentPolicyFilterOptions" listProps={{ - paddingSize: 's', style: { minWidth: 200, }, diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/filter_bar/tags_filter.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/filter_bar/tags_filter.tsx index 381095fdc3915..cf7267c21ee86 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/filter_bar/tags_filter.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/filter_bar/tags_filter.tsx @@ -68,7 +68,7 @@ export const TagsFilter: React.FunctionComponent = ({ } isOpen={isTagsFilterOpen} closePopover={() => setIsTagsFilterOpen(false)} - panelPaddingSize="none" + panelPaddingSize="s" > = ({ }} data-test-subj="agentList.agentPolicyFilterOptions" listProps={{ - paddingSize: 's', style: { minWidth: 140, }, diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/status_filter.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/status_filter.tsx index a58e60cc0e438..37119c78818f5 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/status_filter.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/status_filter.tsx @@ -70,7 +70,7 @@ export const StatusFilter: React.FC = ({ id={popoverId} isOpen={isOpen} closePopover={closePopover} - panelPaddingSize="none" + panelPaddingSize="s" button={ = ({ options={options} onChange={onSelectionChange} listProps={{ - paddingSize: 's', showIcons: true, style: { minWidth: 250, diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/browse_integrations/components/search_and_filters_bar.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/browse_integrations/components/search_and_filters_bar.tsx index 9e1063b8ac2e3..3133f2587e137 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/browse_integrations/components/search_and_filters_bar.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/browse_integrations/components/search_and_filters_bar.tsx @@ -124,7 +124,7 @@ const SortFilter: React.FC = () => { id="browseIntegrationsSortPopover" isOpen={isOpen} closePopover={closePopover} - panelPaddingSize="none" + panelPaddingSize="s" button={ { } }} listProps={{ - paddingSize: 's', showIcons: false, }} > @@ -211,7 +210,7 @@ const SetupMethodFilter: React.FC<{ id="browseIntegrationsSetupMethodPopover" isOpen={isOpen} closePopover={closePopover} - panelPaddingSize="none" + panelPaddingSize="s" button={ = ({ } isOpen={showExtendedPlatforms} closePopover={() => setShowExtendedPlatforms(false)} - panelPaddingSize="none" + panelPaddingSize="s" repositionOnScroll={true} > = ({ setShowExtendedPlatforms(false); }} css={{ width: 150 }} - listProps={{ paddingSize: 'none', onFocusBadge: false }} + listProps={{ onFocusBadge: false }} > {(list) => list} diff --git a/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_list/table.tsx b/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_list/table.tsx index aa915b677d216..bc329118f4571 100644 --- a/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_list/table.tsx +++ b/x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_list/table.tsx @@ -221,7 +221,7 @@ export const ComponentTable: FunctionComponent = ({ button={button} isOpen={isPopoverOpen} closePopover={closePopover} - panelPaddingSize="none" + panelPaddingSize="s" > diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/components/filter_list_button.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/components/filter_list_button.tsx index 6947240c54fe8..4682e24741eb9 100644 --- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/components/filter_list_button.tsx +++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/components/filter_list_button.tsx @@ -80,7 +80,7 @@ export function FilterListButton({ onChange, filters }: Props< button={button} isOpen={isPopoverOpen} closePopover={closePopover} - panelPaddingSize="none" + panelPaddingSize="s" data-test-subj="filterList" > = ({ options={ !isAddingFields ? state.filter.selectedOptions : previousState.filter.selectedOptions } + listProps={{ paddingSize: 's' }} onChange={(options) => { if (!isAddingFields) { setSelectedOptions(options); diff --git a/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx b/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx index 6547d9f524426..8a10f5d9f0093 100644 --- a/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx +++ b/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx @@ -99,6 +99,7 @@ export const DocumentsDropdown: FunctionComponent = ({ }, }), }))} + listProps={{ paddingSize: 's' }} onChange={(newOptions) => { const selectedOption = newOptions.find((option) => option.checked === 'on'); if (selectedOption) { diff --git a/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/agg_select/agg_select.tsx b/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/agg_select/agg_select.tsx index 1d112a68fdf8a..ffca0e331b78a 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/agg_select/agg_select.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/agg_select/agg_select.tsx @@ -48,6 +48,8 @@ export const AggSelect: FC = ({ fields, changeHandler, selectedOptions, r key: f.name, searchableLabel: f.name, isEmpty, + // NOTE from EUI: Ignoring the type error here is clearly misuse. The component does not expect custom JSX content, + // `label` is typed as `string`. Use a string label and the appropriate prepend/append slots to place your content. // @ts-ignore Purposefully passing label as element instead of string // for more robust rendering label: ( diff --git a/x-pack/platform/plugins/shared/osquery/public/actions/components/run_by_filter_popover.tsx b/x-pack/platform/plugins/shared/osquery/public/actions/components/run_by_filter_popover.tsx index bf85329429fff..1867a40c03814 100644 --- a/x-pack/platform/plugins/shared/osquery/public/actions/components/run_by_filter_popover.tsx +++ b/x-pack/platform/plugins/shared/osquery/public/actions/components/run_by_filter_popover.tsx @@ -34,6 +34,9 @@ const SEARCH_USERS_PLACEHOLDER = i18n.translate( const PANEL_PROPS = { 'data-test-subj': 'history-run-by-filter-popover' }; const POPOVER_CONTENT_STYLE = { width: POPOVER_WIDTH }; +const LIST_PROPS = { + paddingSize: 's' as const, +}; interface RunByFilterPopoverProps { selectedUserIds: string[]; @@ -159,6 +162,7 @@ const RunByFilterPopoverComponent: React.FC = ({ noMatchesMessage={i18n.translate('xpack.osquery.historyFilters.noUsersMatch', { defaultMessage: 'No users match search', })} + listProps={LIST_PROPS} > {(list, search) => (
diff --git a/x-pack/platform/plugins/shared/osquery/public/actions/components/tags_filter_popover.tsx b/x-pack/platform/plugins/shared/osquery/public/actions/components/tags_filter_popover.tsx index f5ba682f85d10..b1dcee2b8d18b 100644 --- a/x-pack/platform/plugins/shared/osquery/public/actions/components/tags_filter_popover.tsx +++ b/x-pack/platform/plugins/shared/osquery/public/actions/components/tags_filter_popover.tsx @@ -38,6 +38,9 @@ const CLEAR_FILTER_LABEL = i18n.translate('xpack.osquery.historyFilters.clearTag const PANEL_PROPS = { 'data-test-subj': 'history-tags-filter-popover' }; const POPOVER_CONTENT_STYLE = { width: POPOVER_WIDTH }; const SEARCH_PROPS = { placeholder: SEARCH_TAGS_PLACEHOLDER }; +const LIST_PROPS = { + paddingSize: 's' as const, +}; interface TagsFilterPopoverProps { selectedTags: string[]; @@ -124,6 +127,7 @@ const TagsFilterPopoverComponent: React.FC = ({ noMatchesMessage={i18n.translate('xpack.osquery.historyFilters.noTagsMatch', { defaultMessage: 'No tags match search', })} + listProps={LIST_PROPS} > {(list, search) => (
diff --git a/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/column_picker_popover.tsx b/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/column_picker_popover.tsx index a7b1739b12a67..d91982a276bb6 100644 --- a/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/column_picker_popover.tsx +++ b/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/column_picker_popover.tsx @@ -17,6 +17,10 @@ const COLUMNS_LABEL = i18n.translate('xpack.osquery.tableToolbar.columnsLabel', defaultMessage: 'Columns', }); +const LIST_PROPS = { + paddingSize: 's' as const, +}; + export interface ColumnConfig { id: string; label: string; @@ -88,7 +92,12 @@ const ColumnPickerPopoverComponent: React.FC = ({ repositionOnScroll panelProps={panelProps} > - + {(list) => (
{COLUMNS_LABEL} diff --git a/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/created_by_filter_popover.tsx b/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/created_by_filter_popover.tsx index 69a998ae9a27f..470663987bb41 100644 --- a/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/created_by_filter_popover.tsx +++ b/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/created_by_filter_popover.tsx @@ -32,6 +32,10 @@ const SEARCH_USERS_PLACEHOLDER = i18n.translate( const POPOVER_CONTENT_STYLE = { width: POPOVER_WIDTH }; +const LIST_PROPS = { + paddingSize: 's' as const, +}; + interface CreatedByFilterPopoverProps { /** Unique usernames of users who created saved objects */ users: string[]; @@ -148,6 +152,7 @@ const CreatedByFilterPopoverComponent: React.FC = ( noMatchesMessage={i18n.translate('xpack.osquery.tableToolbar.noUsersMatch', { defaultMessage: 'No users match search', })} + listProps={LIST_PROPS} > {(list, search) => (
diff --git a/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/sort_fields_popover.tsx b/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/sort_fields_popover.tsx index 78c235b5ffcb6..0eb46e2d07da4 100644 --- a/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/sort_fields_popover.tsx +++ b/x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/sort_fields_popover.tsx @@ -46,6 +46,10 @@ const DIRECTION_OPTIONS = [ }, ]; +const LIST_PROPS = { + paddingSize: 's' as const, +}; + export type SortDirection = 'asc' | 'desc'; export interface SortFieldConfig { @@ -149,6 +153,7 @@ const SortFieldsPopoverComponent: React.FC = ({ options={selectableOptions} onChange={handleFieldChange} singleSelection + listProps={LIST_PROPS} > {(list) => list} diff --git a/x-pack/platform/plugins/shared/search_inference_endpoints/public/components/filter/multi_select_filter.tsx b/x-pack/platform/plugins/shared/search_inference_endpoints/public/components/filter/multi_select_filter.tsx index d24dd744f6e6e..ca960b9274555 100644 --- a/x-pack/platform/plugins/shared/search_inference_endpoints/public/components/filter/multi_select_filter.tsx +++ b/x-pack/platform/plugins/shared/search_inference_endpoints/public/components/filter/multi_select_filter.tsx @@ -93,6 +93,7 @@ export const MultiSelectFilter: React.FC = ({ onChange={onChange} singleSelection={false} renderOption={renderOption} + listProps={{ paddingSize: 's' }} > {(list, search) => (
diff --git a/x-pack/platform/plugins/shared/spaces/public/nav_control/components/spaces_menu.tsx b/x-pack/platform/plugins/shared/spaces/public/nav_control/components/spaces_menu.tsx index 32026202e7c50..17924ebdf6920 100644 --- a/x-pack/platform/plugins/shared/spaces/public/nav_control/components/spaces_menu.tsx +++ b/x-pack/platform/plugins/shared/spaces/public/nav_control/components/spaces_menu.tsx @@ -114,6 +114,7 @@ class SpacesMenuUI extends Component { rowHeight: 40, showIcons: true, onFocusBadge: false, + paddingSize: 's', }} isLoading={this.props.isLoading} loadingMessage={i18n.translate('xpack.spaces.navControl.loadingMessage', { diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/sig_events/stream_detail_significant_events_view/knowledge_indicator_rules_selector/knowledge_indicator_rules_selector.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/sig_events/stream_detail_significant_events_view/knowledge_indicator_rules_selector/knowledge_indicator_rules_selector.tsx index 5b36f1d41340d..0825fa732f5bc 100644 --- a/x-pack/platform/plugins/shared/streams_app/public/components/sig_events/stream_detail_significant_events_view/knowledge_indicator_rules_selector/knowledge_indicator_rules_selector.tsx +++ b/x-pack/platform/plugins/shared/streams_app/public/components/sig_events/stream_detail_significant_events_view/knowledge_indicator_rules_selector/knowledge_indicator_rules_selector.tsx @@ -44,7 +44,7 @@ export function KnowledgeIndicatorRulesSelector({ } isOpen={isPopoverOpen} closePopover={() => setIsPopoverOpen(false)} - panelPaddingSize="none" + panelPaddingSize="s" > setIsPopoverOpen(false)} - panelPaddingSize="none" + panelPaddingSize="s" > { onFiltersChange((prev) => ({ ...prev, @@ -196,6 +197,7 @@ export function AttachmentFilters({ checked: filters.tags.includes(tag.id) ? 'on' : undefined, tagId: tag.id, }))} + listProps={{ paddingSize: 's' }} onChange={(newOptions) => { onFiltersChange((prev) => ({ ...prev, diff --git a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/schema_editor/filters/filter_group.tsx b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/schema_editor/filters/filter_group.tsx index 95f2330a0a8d8..da77f9883579f 100644 --- a/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/schema_editor/filters/filter_group.tsx +++ b/x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/schema_editor/filters/filter_group.tsx @@ -45,7 +45,7 @@ export const FilterGroup = ({ button={button} isOpen={isPopoverOpen} closePopover={closePopover} - panelPaddingSize="none" + panelPaddingSize="s" > {(list) => ( diff --git a/x-pack/solutions/observability/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index_setup_dataset_filter.tsx b/x-pack/solutions/observability/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index_setup_dataset_filter.tsx index e38c290ba6a3a..19bdbf604d3b0 100644 --- a/x-pack/solutions/observability/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index_setup_dataset_filter.tsx +++ b/x-pack/solutions/observability/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index_setup_dataset_filter.tsx @@ -86,7 +86,12 @@ export const IndexSetupDatasetFilter: React.FC<{ isOpen={isVisible} panelPaddingSize="none" > - + {(list, search) => (
{search} 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 0443f7128fbda..ea2b72f994176 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 @@ -195,6 +195,7 @@ export function FieldValueSelection({ }} listProps={{ onFocusBadge: false, + paddingSize: 's', }} options={options} onChange={onChange} diff --git a/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/panel_header/primary_interactions/badges/shared_badge/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/panel_header/primary_interactions/badges/shared_badge/index.tsx index 78582eb331e0a..3b1afe17cd46d 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/panel_header/primary_interactions/badges/shared_badge/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/panel_header/primary_interactions/badges/shared_badge/index.tsx @@ -188,7 +188,7 @@ const SharedBadgeComponent: React.FC = ({ attackDiscovery }) => { data-test-subj="sharedBadgePopover" id={filterGroupPopoverId} isOpen={isPopoverOpen} - panelPaddingSize="none" + panelPaddingSize="s" > = ({ closePopover={closePopover} id={filterGroupPopoverId} isOpen={isPopoverOpen} - panelPaddingSize="none" + panelPaddingSize="s" > = ({ data-test-subj="statusFilterPopover" id={filterGroupPopoverId} isOpen={isPopoverOpen} - panelPaddingSize="none" + panelPaddingSize="s" > = ({ isLoading = false, setShar closePopover={closePopover} id={filterGroupPopoverId} isOpen={isPopoverOpen} - panelPaddingSize="none" + panelPaddingSize="s" > ({ } isOpen={isPopoverOpen} closePopover={closePopover} - panelPaddingSize="none" + panelPaddingSize="s" repositionOnScroll > { setIsExecutionStatusPopoverOpen(!isExecutionStatusPopoverOpen); }} - panelPaddingSize="none" + panelPaddingSize="s" repositionOnScroll > {(list, search) => (
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/rule_activity_filter.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/rule_activity_filter.tsx index 7e2b8aafa5831..8bc103cfcdfa0 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/rule_activity_filter.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/rule_activity_filter.tsx @@ -100,6 +100,7 @@ const RuleActivityFilterComponent = ({ options={options} onChange={handleSelectableOnChange} renderOption={renderOptionLabel} + listProps={{ paddingSize: 's' }} > {(list) => (
{(list) => (
{ ]; const { getByTestId } = await render(); - expect(getByTestId('customItem1').getAttribute('aria-disabled')).toEqual('false'); + expect(getByTestId('customItem1')).not.toHaveAttribute('aria-disabled'); expect((getByTestId('test-customItem1-checkbox') as HTMLInputElement).disabled).toBe(false); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/siem_readiness/pages/components/integrations_selectable_popover.tsx b/x-pack/solutions/security/plugins/security_solution/public/siem_readiness/pages/components/integrations_selectable_popover.tsx index 656e8bd1f707d..b61f2f720b79a 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/siem_readiness/pages/components/integrations_selectable_popover.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/siem_readiness/pages/components/integrations_selectable_popover.tsx @@ -172,6 +172,7 @@ export const IntegrationSelectablePopover = (props: IntegrationSelectablePopover }} listProps={{ showIcons: false, + paddingSize: 's', }} options={options} onChange={handleChange} diff --git a/x-pack/solutions/workplaceai/plugins/workplace_ai_app/public/application/components/agent_selector/agent_selector.tsx b/x-pack/solutions/workplaceai/plugins/workplace_ai_app/public/application/components/agent_selector/agent_selector.tsx index 0def7bdda9e76..331985fa21858 100644 --- a/x-pack/solutions/workplaceai/plugins/workplace_ai_app/public/application/components/agent_selector/agent_selector.tsx +++ b/x-pack/solutions/workplaceai/plugins/workplace_ai_app/public/application/components/agent_selector/agent_selector.tsx @@ -132,6 +132,7 @@ export const AgentSelector: React.FC = ({ selectedAgentId, o options={options} onChange={handleAgentChange} singleSelection + listProps={{ paddingSize: 's' }} > {(list) => ( <> diff --git a/yarn.lock b/yarn.lock index 85b37f971d463..e47a7aaa61c40 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2408,10 +2408,9 @@ chroma-js "^2.4.2" lodash "^4.17.21" -"@elastic/eui@114.0.0": +"@elastic/eui@file:./eui_114.0.0_selectable_ui_updates_05.tgz": version "114.0.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-114.0.0.tgz#643f0020d7d00cd8ec8fa2e66f1435f21eca6a09" - integrity sha512-wozSyxPpDTM5oMoldWBds6NdjCa+nf0FilTl0BoL3rgYaEGGvbEg3rWR7ff2P7SKWI40GPbKE6pGCaX66swq7A== + resolved "file:./eui_114.0.0_selectable_ui_updates_05.tgz#db94c3950d299e49917724ba851b18e25f711ed0" dependencies: "@elastic/eui-theme-common" "9.0.0" "@elastic/prismjs-esql" "^1.1.2"