Add props and examples for the combobox (opensearch-project#660)

Signed-off-by: AbhishekReddy1127 <[email protected]>

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

@@ -0,0 +1,93 @@
+/*
+ * 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';
+
+export default () => {
+  const [options, updateOptions] = useState([
+    {
+      label: 'Titan',
+      'data-test-subj': 'titanOption',
+    },
+    {
+      label: 'Enceladus is disabled',
+    },
+    {
+      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',
+    },
+  ]);
+
+  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
+    ) {
+      updateOptions([...options, newOption]);
+    }
+
+    // Select the option.
+    setSelected((prevSelected) => [...prevSelected, newOption]);
+  };
+
+  return (
+    <OuiComboBox
+      placeholder="Select or create options"
+      options={options}
+      selectedOptions={selectedOptions}
+      onChange={onChange}
+      onCreateOption={onCreateOption}
+      isClearable={true}
+      icon="menu"
+    />
+  );
+};

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

@@ -0,0 +1,93 @@
+/*
+ * 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';
+
+export default () => {
+  const [options, updateOptions] = useState([
+    {
+      label: 'Titan',
+      'data-test-subj': 'titanOption',
+    },
+    {
+      label: 'Enceladus is disabled',
+    },
+    {
+      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',
+    },
+  ]);
+
+  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
+    ) {
+      updateOptions([...options, newOption]);
+    }
+
+    // Select the option.
+    setSelected((prevSelected) => [...prevSelected, newOption]);
+  };
+
+  return (
+    <OuiComboBox
+      placeholder="Select or create options"
+      options={options}
+      selectedOptions={selectedOptions}
+      onChange={onChange}
+      onCreateOption={onCreateOption}
+      isClearable={true}
+      icon
+    />
+  );
+};

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

@@ -218,6 +218,28 @@ const clearOnBlurSnippet = `<OuiComboBox
   clearOnBlur={true}
 />`;
 
+import ComboBoxDefaultIcon from './combo_box_default_icon';
+const comboBoxDefaultIconSource = require('!!raw-loader!./combo_box_default_icon');
+const comboBoxDefaultIconSourceOptionsHtml = renderToHtml(ComboBoxDefaultIcon);
+const comboBoxDefaultIconSnippet = `<OuiComboBox
+  placeholder="Select one or more options"
+  options={options}
+  onChange={onChange}
+  onSearchChange={onSearchChange}
+  icon={true}
+/>`;
+
+import ComboBoxCustomIcon from './combo_box_custom_icon';
+const comboBoxCustomIconSource = require('!!raw-loader!./combo_box_custom_icon');
+const comboBoxCustomIconSourceOptionsHtml = renderToHtml(ComboBoxCustomIcon);
+const comboBoxCustomIconSnippet = `<OuiComboBox
+  placeholder="Select one or more options"
+  options={options}
+  onChange={onChange}
+  onSearchChange={onSearchChange}
+  icon="menu"
+/>`;
+
 export const ComboBoxExample = {
   title: 'Combo box',
   intro: (
@@ -634,5 +656,49 @@ export const ComboBoxExample = {
       snippet: clearOnBlurSnippet,
       demo: <ClearOnBlur />,
     },
+    {
+      title: 'Combox box default icon',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: comboBoxDefaultIconSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: comboBoxDefaultIconSourceOptionsHtml,
+        },
+      ],
+      text: (
+        <p>
+          Set the prop <OuiCode>icon</OuiCode> to make the combo box input text
+          appear with a default search icon.
+        </p>
+      ),
+      props: { OuiComboBox, OuiComboBoxOptionOption },
+      snippet: comboBoxDefaultIconSnippet,
+      demo: <ComboBoxDefaultIcon />,
+    },
+    {
+      title: 'Combox box custom icon',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: comboBoxCustomIconSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: comboBoxCustomIconSourceOptionsHtml,
+        },
+      ],
+      text: (
+        <p>
+          Set the prop <OuiCode>icon</OuiCode> with a valid IconType to make the
+          combo box input text appear with an given icon type.
+        </p>
+      ),
+      props: { OuiComboBox, OuiComboBoxOptionOption },
+      snippet: comboBoxCustomIconSnippet,
+      demo: <ComboBoxCustomIcon />,
+    },
   ],
 };