diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index 8944d40e0b4b..87b50fb01048 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -83,6 +83,26 @@ const renderOptionSnippet = ``; +import ToolTips from './tool_tips'; +const toolTipsSource = require('!!raw-loader!./tool_tips'); +const toolTipsSnippet = ``; + import Truncation from './truncation'; const truncationSource = require('!!raw-loader!./truncation'); const truncationSnippet = ` + You can add tooltips to the options by passing{' '} + toolTipContent. Use toolTipProps{' '} + to pass additional EuiToolTipProps to the tooltip. +

+ ), + props: { EuiComboBox, EuiComboBoxOptionOption }, + snippet: toolTipsSnippet, + demo: , + }, { title: 'Truncation', source: [ diff --git a/src-docs/src/views/combo_box/tool_tips.js b/src-docs/src/views/combo_box/tool_tips.js new file mode 100644 index 000000000000..fa2f3aec2b7f --- /dev/null +++ b/src-docs/src/views/combo_box/tool_tips.js @@ -0,0 +1,99 @@ +import React, { useState } from 'react'; + +import { EuiComboBox } from '../../../../src/components'; +import { DisplayToggles } from '../form_controls/display_toggles'; + +const optionsStatic = [ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + toolTipContent: 'Lorem ipsum', + }, + { + label: 'Enceladus is disabled', + disabled: true, + toolTipContent: 'Lorem ipsum', + }, + { + label: 'Mimas', + toolTipContent: 'Lorem ipsum', + }, + { + label: 'Dione', + toolTipContent: 'Lorem ipsum', + }, + { + label: 'Iapetus', + toolTipContent: 'Lorem ipsum', + }, + { + label: 'Phoebe', + toolTipContent: 'Lorem ipsum', + }, + { + label: 'Rhea', + toolTipContent: 'Lorem ipsum', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + toolTipContent: 'Lorem ipsum', + }, + { + label: 'Tethys', + toolTipContent: 'Lorem ipsum', + }, + { + label: 'Hyperion', + toolTipContent: 'Lorem ipsum', + }, +]; +export default () => { + const [options, setOptions] = useState(optionsStatic); + const [selectedOptions, setSelected] = useState([options[2], options[4]]); + + const onChange = (selectedOptions) => { + setSelected(selectedOptions); + }; + + const onCreateOption = (searchValue, flattenedOptions = []) => { + const normalizedSearchValue = searchValue.trim().toLowerCase(); + + if (!normalizedSearchValue) { + return; + } + + const newOption = { + label: searchValue, + }; + + // Create the option if it doesn't exist. + if ( + flattenedOptions.findIndex( + (option) => option.label.trim().toLowerCase() === normalizedSearchValue + ) === -1 + ) { + setOptions([...options, newOption]); + } + + // Select the option. + setSelected([...selectedOptions, newOption]); + }; + + return ( + /* DisplayToggles wrapper for Docs only */ + + + + ); +};