diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableList_EuiSelectableListItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableList_EuiSelectableListItem_Playground.png deleted file mode 100644 index 33659ada3bb..00000000000 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableList_EuiSelectableListItem_Playground.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableList_EuiSelectableList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableList_EuiSelectableList_Playground.png deleted file mode 100644 index 66ed0e40a76..00000000000 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableList_EuiSelectableList_Playground.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableMessage_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableMessage_Playground.png deleted file mode 100644 index 021fa123f39..00000000000 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableMessage_Playground.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableSearch_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableSearch_Playground.png deleted file mode 100644 index 520a5145d45..00000000000 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_EuiSelectableSearch_Playground.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Playground.png deleted file mode 100644 index cbd7f9b48f4..00000000000 Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Playground.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableList_EuiSelectableListItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableList_EuiSelectableListItem_Playground.png deleted file mode 100644 index e043bf0c141..00000000000 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableList_EuiSelectableListItem_Playground.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableList_EuiSelectableList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableList_EuiSelectableList_Playground.png deleted file mode 100644 index 0eb059b3157..00000000000 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableList_EuiSelectableList_Playground.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableMessage_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableMessage_Playground.png deleted file mode 100644 index dbf120f557f..00000000000 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableMessage_Playground.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableSearch_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableSearch_Playground.png deleted file mode 100644 index 899a5b6e612..00000000000 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_EuiSelectableSearch_Playground.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Playground.png deleted file mode 100644 index c9a1ae17e1c..00000000000 Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Playground.png and /dev/null differ diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx deleted file mode 100644 index dea20b6543d..00000000000 --- a/packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx +++ /dev/null @@ -1,109 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import type { Meta, StoryObj } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; - -import { - enableFunctionToggleControls, - moveStorybookControlsToCategory, -} from '../../../../.storybook/utils'; -import { EuiSelectableOption } from '../selectable_option'; -import { EuiSelectableList, EuiSelectableListProps } from './selectable_list'; - -const options: EuiSelectableOption[] = [ - { - label: 'Titan', - 'data-test-subj': 'titanOption', - }, - { - label: 'Enceladus is disabled', - disabled: true, - }, - { - label: 'Mimas', - checked: 'on', - }, - { - label: 'Dione', - }, - { - label: 'Iapetus', - checked: 'on', - }, - { - label: 'Phoebe', - }, - { - label: 'Rhea', - }, - { - label: - "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", - }, - { - label: 'Tethys', - }, - { - label: 'Hyperion', - }, -]; - -const meta: Meta> = { - title: 'Forms/EuiSelectable/EuiSelectableList/EuiSelectableList', - component: EuiSelectableList, - argTypes: { - height: { control: 'number' }, - isPreFiltered: { control: 'boolean' }, - singleSelection: { control: 'boolean' }, - }, - args: { - textWrap: 'truncate', - paddingSize: 's', - onFocusBadge: true, - showIcons: true, - // set up for easier testing/QA - listId: '', - allowExclusions: false, - bordered: false, - isPreFiltered: false, - isVirtualized: false, - searchable: false, - singleSelection: true, - }, -}; -enableFunctionToggleControls(meta, ['onOptionClick', 'setActiveOptionIndex']); -moveStorybookControlsToCategory( - meta, - [ - 'allowExclusions', - 'onFocusBadge', - 'paddingSize', - 'searchable', - 'showIcons', - 'textWrap', - ], - 'EuiSelectableListItem props' -); - -export default meta; -type Story = StoryObj>; - -export const Playground: Story = { - args: { - options, - activeOptionIndex: 0, - makeOptionId: (index) => `selectable_list_item-${index}`, - // ensuring that onOptionClick triggers an action as it's - // only called through setActiveOptionIndex callback - setActiveOptionIndex: (index, callback) => { - callback?.(); - action('setActiveOptionIndex')(index); - }, - }, -}; diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx index cb1c40df01f..b2e7dd4e1d4 100644 --- a/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx +++ b/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx @@ -177,12 +177,10 @@ export class EuiSelectableList extends Component< static defaultProps = { rowHeight: 32, searchValue: '', - isVirtualized: true as const, + isVirtualized: true, }; private animationFrameId: number | undefined; - // counter for tracking list renders and ensuring rerenders - private listRowRerender = 0; constructor(props: EuiSelectableListProps) { super(props); @@ -260,47 +258,9 @@ export class EuiSelectableList extends Component< } }; - shouldComponentUpdate( - nextProps: Readonly> - ): boolean { - const { - allowExclusions, - showIcons, - paddingSize, - textWrap, - onFocusBadge, - searchable, - } = this.props; - - // using shouldComponentUpdate to determine needed rerender before actual rerender - // without needing state updates or lagging behind on updates - if ( - nextProps.allowExclusions !== allowExclusions || - nextProps.showIcons !== showIcons || - nextProps.paddingSize !== paddingSize || - nextProps.textWrap !== textWrap || - nextProps.onFocusBadge !== onFocusBadge || - nextProps.searchable !== searchable - ) { - this.listRowRerender += 1; - } - - return true; - } - componentDidUpdate(prevProps: EuiSelectableListProps) { - const { - isVirtualized, - activeOptionIndex, - visibleOptions, - options, - allowExclusions, - showIcons, - paddingSize, - textWrap, - onFocusBadge, - searchable, - } = this.props; + const { isVirtualized, activeOptionIndex, visibleOptions, options } = + this.props; if (prevProps.activeOptionIndex !== activeOptionIndex) { const { makeOptionId } = this.props; @@ -338,20 +298,6 @@ export class EuiSelectableList extends Component< ...this.calculateAriaSetAttrs(optionArray), }); } - - // ensure that ListRow updates based on item props - if (isVirtualized) { - if ( - prevProps.allowExclusions !== allowExclusions || - prevProps.showIcons !== showIcons || - prevProps.paddingSize !== paddingSize || - prevProps.textWrap !== textWrap || - prevProps.onFocusBadge !== onFocusBadge || - prevProps.searchable !== searchable - ) { - this.forceVirtualizedListRowRerender(); - } - } } // This utility is necessary to exclude group labels from the aria set count @@ -732,7 +678,7 @@ export class EuiSelectableList extends Component< React.createElement( this.ListRow, { - key: `${index}-${this.listRowRerender}`, + key: index, data: this.state.optionArray, index, }, diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.stories.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.stories.tsx deleted file mode 100644 index bcb2e190307..00000000000 --- a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; - -import { OPTION_CHECKED_STATES } from '../selectable_option'; -import { - EuiSelectableListItem, - EuiSelectableListItemProps, -} from './selectable_list_item'; - -const meta: Meta = { - title: 'Forms/EuiSelectable/EuiSelectableList/EuiSelectableListItem', - component: EuiSelectableListItem, - argTypes: { - checked: { - control: 'radio', - options: [undefined, ...OPTION_CHECKED_STATES], - }, - append: { - control: 'boolean', - description: 'Use the control to toggle showing an appended example', - mapping: { - true: Append, - false: undefined, - }, - }, - prepend: { - control: 'boolean', - description: 'Use the control to toggle showing an prepended example', - mapping: { - true: Prepend, - false: undefined, - }, - }, - }, - args: { - showIcons: true, - paddingSize: 's', - onFocusBadge: true, - textWrap: 'truncate', - // set up for easier testing/QA - allowExclusions: false, - searchable: false, - disabled: false, - isFocused: false, - append: false, - prepend: false, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - args: { - children: 'Selectable list item', - }, -}; diff --git a/packages/eui/src/components/selectable/selectable_message/selectable_message.stories.tsx b/packages/eui/src/components/selectable/selectable_message/selectable_message.stories.tsx deleted file mode 100644 index 865e73efb79..00000000000 --- a/packages/eui/src/components/selectable/selectable_message/selectable_message.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import type { Meta, StoryObj } from '@storybook/react'; - -import { - EuiSelectableMessage, - EuiSelectableMessageProps, -} from './selectable_message'; - -const meta: Meta = { - title: 'Forms/EuiSelectable/EuiSelectableMessage', - component: EuiSelectableMessage, - args: { - bordered: false, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - args: { - children: 'Custom selectable message', - }, -}; diff --git a/packages/eui/src/components/selectable/selectable_option.tsx b/packages/eui/src/components/selectable/selectable_option.tsx index c45df2b1121..70ac21e2529 100644 --- a/packages/eui/src/components/selectable/selectable_option.tsx +++ b/packages/eui/src/components/selectable/selectable_option.tsx @@ -11,9 +11,7 @@ import { CommonProps, ExclusiveUnion } from '../common'; import type { EuiTextTruncateProps } from '../text_truncate'; import { EuiToolTipProps } from '../tool_tip'; -export const OPTION_CHECKED_STATES = ['on', 'off', 'mixed', undefined] as const; -export type EuiSelectableOptionCheckedType = - (typeof OPTION_CHECKED_STATES)[number]; +export type EuiSelectableOptionCheckedType = 'on' | 'off' | 'mixed' | undefined; export type EuiSelectableOptionBase = CommonProps & { /** diff --git a/packages/eui/src/components/selectable/selectable_search/selectable_search.stories.tsx b/packages/eui/src/components/selectable/selectable_search/selectable_search.stories.tsx deleted file mode 100644 index d00ebb175ea..00000000000 --- a/packages/eui/src/components/selectable/selectable_search/selectable_search.stories.tsx +++ /dev/null @@ -1,94 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import type { Meta, StoryObj } from '@storybook/react'; - -import { - disableStorybookControls, - enableFunctionToggleControls, -} from '../../../../.storybook/utils'; -import { EuiSelectableOption } from '../selectable_option'; -import { createPartialStringEqualityOptionMatcher } from '../matching_options'; -import { - EuiSelectableSearch, - _EuiSelectableSearchProps as EuiSelectableSearchProps, -} from './selectable_search'; - -const options: EuiSelectableOption[] = [ - { - label: 'Titan', - 'data-test-subj': 'titanOption', - }, - { - label: 'Enceladus is disabled', - disabled: true, - }, - { - label: 'Mimas', - checked: 'on', - }, - { - label: 'Dione', - }, - { - label: 'Iapetus', - checked: 'on', - }, - { - label: 'Phoebe', - }, - { - label: 'Rhea', - }, - { - label: - "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", - }, - { - label: 'Tethys', - }, - { - label: 'Hyperion', - }, -]; - -const meta: Meta> = { - title: 'Forms/EuiSelectable/EuiSelectableSearch', - component: EuiSelectableSearch, - argTypes: { - name: { control: 'text' }, - placeholder: { control: 'text' }, - prepend: { control: 'text' }, - append: { control: 'text' }, - }, - args: { - // set up for easier testing/QA - name: '', - placeholder: '', - prepend: '', - append: '', - isPreFiltered: false, - compressed: false, - fullWidth: true, - isClearable: true, - isInvalid: false, - isLoading: false, - }, -}; -disableStorybookControls(meta, ['optionMatcher']); -enableFunctionToggleControls(meta, ['onChange']); - -export default meta; -type Story = StoryObj>; - -export const Playground: Story = { - args: { - options, - optionMatcher: createPartialStringEqualityOptionMatcher(), - }, -}; diff --git a/packages/eui/src/components/selectable/selectable_search/selectable_search.tsx b/packages/eui/src/components/selectable/selectable_search/selectable_search.tsx index bf8ba8d9317..7434bce690a 100644 --- a/packages/eui/src/components/selectable/selectable_search/selectable_search.tsx +++ b/packages/eui/src/components/selectable/selectable_search/selectable_search.tsx @@ -30,7 +30,7 @@ export type EuiSelectableSearchProps = CommonProps & ) => void; }; -export type _EuiSelectableSearchProps = EuiSelectableSearchProps & { +type _EuiSelectableSearchProps = EuiSelectableSearchProps & { options: Array>; /** * Search value state managed by parent EuiSelectable diff --git a/packages/eui/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss b/packages/eui/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss index 6aebcfcadc3..fee5d8cc22a 100644 --- a/packages/eui/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss +++ b/packages/eui/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss @@ -1,7 +1,3 @@ -.euiSelectableTemplateSitewide { - display: block; // Override .euiSelectable flex display, which fixes the anchor positioning for mobile `popoverButton`s -} - .euiSelectableTemplateSitewide__listItem { .euiSelectableListItem__text { text-decoration: none !important; // stylelint-disable-line declaration-no-important @@ -36,4 +32,4 @@ #{$property}: $value; } } -} \ No newline at end of file +} diff --git a/packages/eui/src/components/selectable/selectable_templates/selectable_template_sidewide.stories.tsx b/packages/eui/src/components/selectable/selectable_templates/selectable_template_sidewide.stories.tsx deleted file mode 100644 index caf8c060534..00000000000 --- a/packages/eui/src/components/selectable/selectable_templates/selectable_template_sidewide.stories.tsx +++ /dev/null @@ -1,108 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; - -import { EuiButton } from '../../button'; -import { - EuiSelectableTemplateSitewide, - EuiSelectableTemplateSitewideProps, -} from './selectable_template_sitewide'; -import type { EuiSelectableTemplateSitewideOption } from './selectable_template_sitewide_option'; - -const options: EuiSelectableTemplateSitewideOption[] = [ - { - label: 'Welcome dashboards', - icon: { type: 'logoKibana' }, - avatar: { name: 'Default Space' }, - meta: [ - { - text: 'Dashboard', - type: 'application', - highlightSearchString: true, - }, - ], - url: 'welcome-dashboards', - }, - { - label: 'SIEM', - icon: { type: 'logoSecurity' }, - meta: [ - { - text: 'personal-databoard', - type: 'deployment', - }, - ], - space: 'Hello World', - }, - { - label: 'Dev tools', - url: 'dev-tools-console', - icon: { type: 'wrench' }, - meta: [ - { - text: 'Management application', - type: 'application', - }, - ], - }, - { - label: 'My support tickets', - icon: { type: 'help' }, - meta: [ - { - text: 'Support', - type: 'platform', - }, - ], - }, -]; - -const meta: Meta = { - title: 'Templates/EuiSelectableTemplateSitewide', - component: EuiSelectableTemplateSitewide, - argTypes: { - popoverButton: { - control: 'boolean', - mapping: { - true: Toggle popover, - false: undefined, - }, - }, - popoverTitle: { - control: 'boolean', - mapping: { - true: I am a Title, - false: undefined, - }, - }, - popoverFooter: { - control: 'boolean', - mapping: { - true: I am a Footer, - false: undefined, - }, - }, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Playground: Story = { - args: { - options, - // set up for easier testing/QA - // @ts-ignore - using testing control types - popoverButton: false, - popoverTitle: false, - popoverFooter: false, - popoverButtonBreakpoints: ['xs', 's', 'm', 'l', 'xl'], - }, -};