[EuiComboBox] Improved props table for EuiComboBox (#4563)

* Improved props table for EuiComboBox * changed type declaration * added cl entry * added description,link
elastic · Mar 2, 2021 · c112540 · c112540
1 parent 0b6e9c0
commit c112540
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiComboBoxOptionOption` prop to `EuiComboBox` props table ([#4563](https://github.com/elastic/eui/pull/4563))
 - Allowed dynamically changing the `direction` prop on `EuiResizableContainer` ([#4557](https://github.com/elastic/eui/pull/4557))
 - Exported `useIsWithinBreakpoints` hook ([#4557](https://github.com/elastic/eui/pull/4557))
 

diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
@@ -14,6 +14,8 @@ import {
   EuiText,
 } from '../../../../src/components';
 
+import { EuiComboBoxOptionOption } from '!!prop-loader!../../../../src/components/combo_box/types';
+
 import ComboBox from './combo_box';
 const comboBoxSource = require('!!raw-loader!./combo_box');
 const comboBoxHtml = renderToHtml(ComboBox);
@@ -223,7 +225,7 @@ export const ComboBoxExample = {
           code: comboBoxHtml,
         },
       ],
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: comboBoxSnippet,
       demo: <ComboBox />,
     },
@@ -245,7 +247,7 @@ export const ComboBoxExample = {
           disabled.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: disabledSnippet,
       demo: <Disabled />,
     },
@@ -271,7 +273,7 @@ export const ComboBoxExample = {
           options there are.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: virtualizedSnippet,
       demo: <Virtualized />,
     },
@@ -294,7 +296,7 @@ export const ComboBoxExample = {
           works within other portal-using components.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       demo: <Containers />,
     },
     {
@@ -321,7 +323,7 @@ export const ComboBoxExample = {
           component.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: colorsSnippet,
       demo: <Colors />,
     },
@@ -355,7 +357,7 @@ export const ComboBoxExample = {
           </p>
         </Fragment>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: renderOptionSnippet,
       demo: <RenderOption />,
     },
@@ -377,7 +379,7 @@ export const ComboBoxExample = {
           against the search value.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: groupsSnippet,
       demo: <Groups />,
     },
@@ -413,7 +415,7 @@ export const ComboBoxExample = {
           </p>
         </Fragment>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: singleSelectionSnippet,
       demo: <SingleSelection />,
     },
@@ -445,7 +447,7 @@ export const ComboBoxExample = {
           </p>
         </Fragment>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: singleSelectionCustomOptionsSnippet,
       demo: <SingleSelectionCustomOptions />,
     },
@@ -467,7 +469,7 @@ export const ComboBoxExample = {
           creation of custom options.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: disallowCustomOptionsSnippet,
       demo: <DisallowCustomOptions />,
     },
@@ -490,7 +492,7 @@ export const ComboBoxExample = {
           custom options.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: customOptionsOnlySnippet,
       demo: <CustomOptionsOnly />,
     },
@@ -514,7 +516,7 @@ export const ComboBoxExample = {
           async is happening.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: asyncSnippet,
       demo: <Async />,
     },
@@ -537,7 +539,7 @@ export const ComboBoxExample = {
           may be pasted from elsewhere such as a comma separated list.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: delimiterSnippet,
       demo: <Delimiter />,
     },
@@ -562,7 +564,7 @@ export const ComboBoxExample = {
           to display those options at the top of the list.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: startingWithSnippet,
       demo: <StartingWith />,
     },
@@ -586,7 +588,7 @@ export const ComboBoxExample = {
           <EuiCode language="js">key</EuiCode> for each option.
         </p>
       ),
-      props: { EuiComboBox },
+      props: { EuiComboBox, EuiComboBoxOptionOption },
       demo: <DuplicateOptions />,
       snippet: duplicateOptionsSnippet,
     },

diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -82,6 +82,9 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps &
     onOptionEnterKey?: OptionHandler<T>;
     onScroll?: ListProps['onScroll'];
     optionRef: (index: number, node: RefInstance<EuiFilterSelectItem>) => void;
+    /**
+     * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
+     */
     options: Array<EuiComboBoxOptionOption<T>>;
     position?: EuiComboBoxOptionsListPosition;
     renderOption?: (

diff --git a/src/components/combo_box/types.ts b/src/components/combo_box/types.ts
@@ -21,16 +21,16 @@ import { ButtonHTMLAttributes } from 'react';
 import { CommonProps } from '../common';
 
 // note similarity to `Option` in `components/selectable/types.tsx`
-export type EuiComboBoxOptionOption<
+export interface EuiComboBoxOptionOption<
   T = string | number | string[] | undefined
-> = CommonProps &
-  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {
-    isGroupLabelOption?: boolean;
-    label: string;
-    key?: string;
-    options?: Array<EuiComboBoxOptionOption<T>>;
-    value?: T;
-  };
+> extends CommonProps,
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+  isGroupLabelOption?: boolean;
+  label: string;
+  key?: string;
+  options?: Array<EuiComboBoxOptionOption<T>>;
+  value?: T;
+}
 
 export type UpdatePositionHandler = (
   listElement?: RefInstance<HTMLDivElement>