add EuiListGroup and EuiListGroupItem type definitions. (#1737)

- Adds type definitions for EuiListGroup and EuiListGroupItem - Changes the propTypes of EuiListGroup to reuse EuiListGroupItem.propTypes instead of redefining the shape.
elastic · Mar 21, 2019 · 9faba0d · 9faba0d
1 parent 3ae9cd4
commit 9faba0d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Changed `EuiSuperDatePicker` to call `onRefresh` instead of `onTimeChanged` when user clicks "Refresh" button ([#1745](https://github.com/elastic/eui/pull/1745))
 - Added documentation entry in `EuiPagination` for `activePage` prop. ([#1740](https://github.com/elastic/eui/pull/1740))
 - Changed `EuiButton` to use "m" as it's default `size` prop ([#1742](https://github.com/elastic/eui/pull/1742))
+- Adds type definitions for `EuiListGroup` and `EuiListGroupItem` ([#1737](https://github.com/elastic/eui/pull/1737))
 
 **Bug fixes**
 

diff --git a/src/components/list_group/index.d.ts b/src/components/list_group/index.d.ts
@@ -1,5 +1,15 @@
-import { CommonProps } from '../common';
-import { FunctionComponent } from 'react';
+import { EuiButtonIconProps, EuiButtonPropsForButtonOrLink } from '@elastic/eui';
+import { IconType } from '../icon';
+import { CommonProps, ExclusiveUnion } from '../common';
+import {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  FunctionComponent,
+  HTMLAttributes,
+  MouseEventHandler,
+  ReactElement,
+  ReactNode
+} from 'react';
 
 declare module '@elastic/eui' {
   /**
@@ -8,9 +18,52 @@ declare module '@elastic/eui' {
    * @see './list_group.js'
    */
 
-  type EuiListGroupProps = CommonProps & {
-
+  type EuiListGroupProps = CommonProps & HTMLAttributes<HTMLUListElement> & {
+    bordered?: boolean;
+    flush?: boolean;
+    listItems?: FunctionComponent<EuiListGroupItemProps>[];
+    maxWidth?: boolean | number | string;
+    showToolTips?: boolean;
+    wrapText?: boolean;
   };
 
   export const EuiListGroup: FunctionComponent<EuiListGroupProps>;
+
+  /**
+   * list group item type defs
+   *
+   * @see './list_group_item.js'
+   */
+
+  type EuiListGroupItemPropsBasics = {
+    size?: 'xs' | 's' | 'm' | 'l';
+    label: ReactNode;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    href?: string;
+    iconType?: IconType;
+    icon?: ReactElement;
+    showToolTip?: boolean;
+    extraAction?: EuiButtonPropsForButtonOrLink<
+      CommonProps &
+        EuiButtonIconProps & {
+          iconType: IconType;
+          alwaysShow?: boolean;
+        }
+    >;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    wrapText?: boolean;
+  };
+
+  type EuiListGroupItemProps = EuiListGroupItemPropsBasics &
+  CommonProps &
+  ExclusiveUnion<
+    ExclusiveUnion<
+      ButtonHTMLAttributes<HTMLButtonElement>,
+      AnchorHTMLAttributes<HTMLAnchorElement>
+    >,
+    HTMLAttributes<HTMLSpanElement>
+  >;
+
+  export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps>;
 }
diff --git a/src/components/list_group/list_group.js b/src/components/list_group/list_group.js
@@ -76,15 +76,7 @@ export const EuiListGroup = ({
 };
 
 EuiListGroup.propTypes = {
-  listItems: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.node,
-    href: PropTypes.string,
-    extraAction: PropTypes.object,
-    iconType: PropTypes.string,
-    isActive: PropTypes.boolean,
-    isDisabled: PropTypes.boolean,
-    showToolTip: PropTypes.boolean,
-  })),
+  listItems: PropTypes.arrayOf(PropTypes.shape(EuiListGroupItem.propTypes)),
   children: PropTypes.node,
   className: PropTypes.string,