[OuiComboBox] Add docs for icon and revise example for clearOnBlur (#806

)

Signed-off-by: Miki <miki@amazon.com>

src-docs/src/views/combo_box/clear_on_blur.js

@@ -14,7 +14,7 @@ import React, { useState } from 'react';
 import { OuiComboBox } from '../../../../src/components';
 
 export default () => {
-  const [options, updateOptions] = useState([
+  const [options] = useState([
     {
       label: 'Titan',
       'data-test-subj': 'titanOption',
@@ -55,38 +55,12 @@ export default () => {
     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
-    ) {
-      updateOptions([...options, newOption]);
-    }
-
-    // Select the option.
-    setSelected((prevSelected) => [...prevSelected, newOption]);
-  };
-
   return (
     <OuiComboBox
-      placeholder="Select or create options"
+      placeholder="Select one or more options"
       options={options}
-      selectedOptions={selectedOptions}
       onChange={onChange}
-      onCreateOption={onCreateOption}
-      isClearable={true}
+      selectedOptions={selectedOptions}
       clearOnBlur={true}
     />
   );

src-docs/src/views/combo_box/combo_box_example.js

@@ -182,6 +182,19 @@ const delimiterSnippet = `<OuiComboBox
   isClearable={true}
 />`;
 
+import WithIcon from './combo_box_icon';
+const withIconSource = require('!!raw-loader!./combo_box_icon');
+const withIconHtml = renderToHtml(WithIcon);
+const withIconSnippet = `<OuiComboBox
+  placeholder="Select or create options"
+  options={options}
+  icon={true}
+  selectedOptions={selectedOptions}
+  onChange={onChange}
+  onCreateOption={onCreateOption}
+  isClearable={true}
+/>`;
+
 import StartingWith from './startingWith';
 const startingWithSource = require('!!raw-loader!./startingWith');
 const startingWithHtml = renderToHtml(StartingWith);
@@ -214,7 +227,6 @@ const clearOnBlurSnippet = `<OuiComboBox
   placeholder="Select one or more options"
   options={options}
   onChange={onChange}
-  onSearchChange={onSearchChange}
   clearOnBlur={true}
 />`;
 
@@ -585,6 +597,29 @@ export const ComboBoxExample = {
       snippet: delimiterSnippet,
       demo: <Delimiter />,
     },
+    {
+      title: 'With icon',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: withIconSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: withIconHtml,
+        },
+      ],
+      text: (
+        <p>
+          Pass an <OuiCode>IconType</OuiCode> string to show the icon in the
+          combo box, or set it to <OuiCode>true</OuiCode> to show the search
+          icon.
+        </p>
+      ),
+      props: { OuiComboBox, OuiComboBoxOptionOption },
+      snippet: withIconSnippet,
+      demo: <WithIcon />,
+    },
     {
       title: 'Sorting matches',
       source: [

src-docs/src/views/combo_box/combo_box_icon.js

@@ -0,0 +1,96 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React, { useState } from 'react';
+
+import { OuiComboBox } from '../../../../src/components';
+
+const staticOptions = [
+  {
+    label: 'Titan',
+    'data-test-subj': 'titanOption',
+  },
+  {
+    label: 'Enceladus is disabled',
+    disabled: true,
+  },
+  {
+    label: 'Mimas',
+  },
+  {
+    label: 'Dione',
+  },
+  {
+    label: 'Iapetus',
+  },
+  {
+    label: 'Phoebe',
+  },
+  {
+    label: 'Rhea',
+  },
+  {
+    label:
+      "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+  },
+  {
+    label: 'Tethys',
+  },
+  {
+    label: 'Hyperion',
+  },
+];
+
+export default () => {
+  const [options, setOptions] = useState(staticOptions);
+  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.
+    // Use the previousState parameter (prevSelected) from the setState
+    // instance (setSelected) to ensure looped calls do not override each other
+    setSelected((prevSelected) => [...prevSelected, newOption]);
+  };
+
+  return (
+    <OuiComboBox
+      placeholder="Select or create options"
+      options={options}
+      icon={true}
+      selectedOptions={selectedOptions}
+      onChange={onChange}
+      onCreateOption={onCreateOption}
+    />
+  );
+};