[EuiSelectable] add support for option tooltips

changelogs/upcoming/7715.md

@@ -0,0 +1,6 @@
+- Added support for `toolTipContent` and `toolTipProps` props on `EuiSelectable` options
+
+**Bug fixes**
+
+- Fixed issue with unmounted component state updates on requestAnimationFrame for `EuiSelectable`
+

src-docs/src/views/selectable/selectable_example.js

@@ -9,6 +9,7 @@ import {
   EuiSelectableMessage,
   EuiText,
   EuiTextTruncate,
+  EuiToolTip,
   EuiCallOut,
   EuiLink,
 } from '../../../../src';
@@ -42,6 +43,9 @@ const selectableSizingSource = require('!!raw-loader!./selectable_sizing');
 import Truncation from './selectable_truncation';
 const truncationSource = require('!!raw-loader!./selectable_truncation');
 
+import SelectableToolTips from './selectable_tool_tips';
+const selectableToolTipsSource = require('!!raw-loader!./selectable_tool_tips');
+
 import SelectableCustomRender from './selectable_custom_render';
 const selectableCustomRenderSource = require('!!raw-loader!./selectable_custom_render');
 
@@ -439,6 +443,57 @@ export const SelectableExample = {
 </EuiSelectable>`,
       demo: <Truncation />,
     },
+
+    {
+      title: 'Tooltips',
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: selectableToolTipsSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            If you have longer information that you need to make available to
+            users outside of truncated text, one approach could be adding
+            tooltip descriptions to individual options by passing{' '}
+            <EuiCode>toolTipContent</EuiCode>.
+          </p>
+          <p>
+            You can additionally customize individual tooltip behavior by
+            passing <EuiCode>toolTipProps</EuiCode>, which accepts any
+            configuration that{' '}
+            <Link to="/display/tooltip">
+              <strong>EuiToolTip</strong>
+            </Link>{' '}
+            accepts.
+          </p>
+        </>
+      ),
+      props: {
+        EuiSelectableOptionProps,
+        EuiToolTip,
+      },
+      demo: <SelectableToolTips />,
+      snippet: `<EuiSelectable
+  aria-label="Example with option tooltips"
+  options={[
+    {
+      label: '',
+      checked: 'mixed',
+      toolTipContent: 'tooltip 1', 
+      toolTipProps: {
+        position: 'bottom'
+        'data-test-subj': 'optionTooltip',
+      }
+    }
+  ]}
+  onChange={newOptions => setOptions(newOptions)}
+>
+  {list => list}
+</EuiSelectable>`,
+    },
     {
       title: 'Rendering the options',
       source: [

src-docs/src/views/selectable/selectable_tool_tips.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+import { EuiSelectable, EuiSelectableOption } from '../../../../src';
+
+export default () => {
+  const [options, setOptions] = useState<EuiSelectableOption[]>([
+    {
+      label: 'Titan',
+      toolTipContent:
+        'Titan is the largest moon of Saturn and the second-largest in the Solar System',
+    },
+    {
+      label: 'Pandora',
+      toolTipContent:
+        "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+    },
+    {
+      label: 'Iapetus',
+      toolTipContent: "Iapetus is the outermost of Saturn's large moons",
+      toolTipProps: { position: 'bottom' },
+    },
+  ]);
+
+  return (
+    <EuiSelectable
+      aria-label="Example with option tooltips"
+      options={options}
+      listProps={{ bordered: true, style: { maxInlineSize: 400 } }}
+      onChange={(newOptions) => setOptions(newOptions)}
+    >
+      {(list) => list}
+    </EuiSelectable>
+  );
+};

src/components/selectable/selectable.stories.tsx

@@ -0,0 +1,150 @@
+/*
+ * 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, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  enableFunctionToggleControls,
+  hideStorybookControls,
+} from '../../../.storybook/utils';
+
+import { EuiSelectableOption } from './selectable_option';
+import {
+  EuiSelectable,
+  EuiSelectableOnChangeEvent,
+  EuiSelectableProps,
+} from './selectable';
+
+const toolTipProps = {
+  toolTipContent: 'This is a tooltip!',
+  toolTipProps: { position: 'left' as const },
+  value: 4,
+};
+
+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<EuiSelectableProps> = {
+  title: 'Forms/EuiSelectable',
+  component: EuiSelectable,
+  argTypes: {
+    singleSelection: { control: 'radio', options: [true, false, 'always'] },
+    emptyMessage: { control: 'text' },
+    loadingMessage: { control: 'text' },
+    noMatchesMessage: { control: 'text' },
+    selectableScreenReaderText: { control: 'text' },
+  },
+  args: {
+    searchable: false,
+    singleSelection: false,
+    isPreFiltered: false,
+  },
+};
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiSelectableProps>;
+
+export const Playground: Story = {
+  args: {
+    options,
+    // setting up for easier testing/QA
+    allowExclusions: false,
+    isLoading: false,
+    emptyMessage: '',
+    loadingMessage: '',
+    noMatchesMessage: '',
+    selectableScreenReaderText: '',
+    searchProps: {
+      'data-test-subj': 'selectableSearchHere',
+    },
+  },
+  render: ({ ...args }: EuiSelectableProps) => <StatefulSelectable {...args} />,
+};
+enableFunctionToggleControls(Playground, ['onChange', 'onActiveOptionChange']);
+
+export const WithTooltip: Story = {
+  parameters: {
+    controls: {
+      include: ['options', 'singleSelection', 'searchable'],
+    },
+  },
+  args: {
+    options: options.map((option) => ({ ...option, ...toolTipProps })),
+    searchable: false,
+  },
+  render: ({ ...args }: EuiSelectableProps) => <StatefulSelectable {...args} />,
+};
+
+const StatefulSelectable = ({
+  options,
+  onChange,
+  ...rest
+}: EuiSelectableProps) => {
+  const [selectableOptions, setOptions] = useState(options);
+
+  const handleOnChange = (
+    options: EuiSelectableOption[],
+    event: EuiSelectableOnChangeEvent,
+    changedOption: EuiSelectableOption
+  ) => {
+    setOptions(options);
+    onChange?.(options, event, changedOption);
+  };
+
+  return (
+    <EuiSelectable
+      {...rest}
+      options={selectableOptions}
+      onChange={handleOnChange}
+    >
+      {(list, search) => (
+        <>
+          {search}
+          {list}
+        </>
+      )}
+    </EuiSelectable>
+  );
+};