[Storybook] Add stories for more components (letters R-S) - Part 2 (#…

…7728)

src/components/selectable/selectable_list/selectable_list.stories.tsx

@@ -0,0 +1,109 @@
+/*
+ * 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<EuiSelectableListProps<{}>> = {
+  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<EuiSelectableListProps<{}>>;
+
+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);
+    },
+  },
+};

src/components/selectable/selectable_list/selectable_list.tsx

@@ -177,10 +177,12 @@ export class EuiSelectableList<T> extends Component<
   static defaultProps = {
     rowHeight: 32,
     searchValue: '',
-    isVirtualized: true,
+    isVirtualized: true as const,
   };
 
   private animationFrameId: number | undefined;
+  // counter for tracking list renders and ensuring rerenders
+  private listRowRerender = 0;
 
   constructor(props: EuiSelectableListProps<T>) {
     super(props);
@@ -258,9 +260,47 @@ export class EuiSelectableList<T> extends Component<
     }
   };
 
+  shouldComponentUpdate(
+    nextProps: Readonly<EuiSelectableListProps<T>>
+  ): 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<T>) {
-    const { isVirtualized, activeOptionIndex, visibleOptions, options } =
-      this.props;
+    const {
+      isVirtualized,
+      activeOptionIndex,
+      visibleOptions,
+      options,
+      allowExclusions,
+      showIcons,
+      paddingSize,
+      textWrap,
+      onFocusBadge,
+      searchable,
+    } = this.props;
 
     if (prevProps.activeOptionIndex !== activeOptionIndex) {
       const { makeOptionId } = this.props;
@@ -298,6 +338,20 @@ export class EuiSelectableList<T> 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
@@ -678,7 +732,7 @@ export class EuiSelectableList<T> extends Component<
                 React.createElement(
                   this.ListRow,
                   {
-                    key: index,
+                    key: `${index}-${this.listRowRerender}`,
                     data: this.state.optionArray,
                     index,
                   },

src/components/selectable/selectable_list/selectable_list_item.stories.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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<EuiSelectableListItemProps> = {
+  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: <span>Append</span>,
+        false: undefined,
+      },
+    },
+    prepend: {
+      control: 'boolean',
+      description: 'Use the control to toggle showing an prepended example',
+      mapping: {
+        true: <span>Prepend</span>,
+        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<EuiSelectableListItemProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Selectable list item',
+  },
+};

src/components/selectable/selectable_message/selectable_message.stories.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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<EuiSelectableMessageProps> = {
+  title: 'Forms/EuiSelectable/EuiSelectableMessage',
+  component: EuiSelectableMessage,
+  args: {
+    bordered: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiSelectableMessageProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Custom selectable message',
+  },
+};

src/components/selectable/selectable_option.tsx

@@ -11,7 +11,9 @@ import { CommonProps, ExclusiveUnion } from '../common';
 import type { EuiTextTruncateProps } from '../text_truncate';
 import { EuiToolTipProps } from '../tool_tip';
 
-export type EuiSelectableOptionCheckedType = 'on' | 'off' | 'mixed' | undefined;
+export const OPTION_CHECKED_STATES = ['on', 'off', 'mixed', undefined] as const;
+export type EuiSelectableOptionCheckedType =
+  (typeof OPTION_CHECKED_STATES)[number];
 
 export type EuiSelectableOptionBase = CommonProps & {
   /**