[TypeScript]: EuiToggle, EuiButtonGroup, EuiButtonToggle, EuiFilterBu…

…tton, EuiFilterGroup, EuiFilterSelectItem (#1570)

* convert toggle to typescript

* add EuiButtonGroup and EuiButtonToggle type definitions

* add filter_group type definitions

* import direct from required_props

* #1570 changelog entry

* fewer extensions; more explicit properties

* buttonGroup onChange signature

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `7.2.0`.
+- Converted `EuiToggle` to TypeScript ([#1570](https://github.com/elastic/eui/pull/1570))
+- Added type definitions for `EuiButtonGroup`,`EuiButtonToggle`, `EuiFilterButton`, `EuiFilterGroup`, and `EuiFilterSelectItem` ([#1570](https://github.com/elastic/eui/pull/1570))
 
 ## [`7.2.0`](https://github.com/elastic/eui/tree/v7.2.0)
 

src/components/button/button_toggle/button_toggle.js

@@ -91,6 +91,11 @@ EuiButtonToggle.propTypes = {
    */
   isEmpty: PropTypes.bool,
 
+  /**
+   * Initial state of the toggle
+   */
+  isSelected: PropTypes.bool,
+
   /**
    * Classnames to add to `EuiToggle` instead of the `EuiButton`
    */

src/components/button/index.d.ts

@@ -1,7 +1,8 @@
 import { CommonProps } from '../common';
 import { IconType, IconSize } from '../icon'
+import { ToggleType } from '../toggle'
 
-import { SFC, ButtonHTMLAttributes, AnchorHTMLAttributes, MouseEventHandler, HTMLAttributes } from 'react';
+import { SFC, ButtonHTMLAttributes, AnchorHTMLAttributes, ChangeEventHandler, MouseEventHandler, HTMLAttributes } from 'react';
 
 declare module '@elastic/eui' {
   type EuiButtonPropsForButtonOrLink<Props> = (
@@ -67,7 +68,7 @@ declare module '@elastic/eui' {
   >;
 
   /**
-   * button icon type defs
+   * empty button type defs
    *
    * @see './button_empty/button_empty.js'
    */
@@ -82,7 +83,7 @@ declare module '@elastic/eui' {
   export type EmptyButtonSizes = 'xs' | 's' | 'l';
   export type EmptyButtonFlush = 'left' | 'right';
 
-  export interface EuiButtonEmptyProps {
+  export type EuiButtonEmptyProps = EuiButtonPropsForButtonOrLink<CommonProps & {
     iconType?: IconType;
     iconSide?: EmptyButtonIconSide;
     color?: EmptyButtonColor;
@@ -92,9 +93,59 @@ declare module '@elastic/eui' {
     isDisabled?: boolean;
     contentProps?: HTMLAttributes<HTMLSpanElement>;
     textProps?: HTMLAttributes<HTMLSpanElement>;
+  }>
+
+  export const EuiButtonEmpty: SFC<EuiButtonEmptyProps>;
+
+  /**
+   * button toggle type defs
+   *
+   * @see './button_toggle/button_toggle.js'
+   */
+
+  export type EuiButtonToggleProps = EuiButtonProps & {
+      isEmpty?: boolean;
+      isIconOnly?: boolean;
+      isSelected?: boolean;
+      label: string;
+      toggleClassName?: string;
+      type?: ToggleType;
+    }
+
+  export const EuiButtonToggle: SFC<
+    EuiButtonPropsForButtonOrLink<CommonProps & EuiButtonToggleProps>
+  >;
+
+  /**
+   * button group type defs
+   *
+   * @see './button_group/button_group.js'
+   */
+
+  export type EuiButtonGroupIdToSelectedMap = { [id: string]: boolean };
+  export type GroupButtonSize = 's' | 'm';
+
+  export interface EuiButtonGroupOption {
+    id: string,
+    label: string,
+    isDisabled?: boolean,
   }
+  export interface EuiButtonGroupProps {
+      options: EuiButtonGroupOption[],
+      onChange: (id: string, value: any) => void;
+      buttonSize?: GroupButtonSize;
+      isDisabled?: boolean,
+      isFullWidth?: boolean;
+      isIconOnly?: boolean;
+      idSelected?: string;
+      idToSelectedMap?: EuiButtonGroupIdToSelectedMap;
+      legend?: string,
+      color?: ButtonColor,
+      type?: ToggleType,
+      name?: string;
+    }
 
-  export const EuiButtonEmpty: SFC<
-    EuiButtonPropsForButtonOrLink<CommonProps & EuiButtonEmptyProps>
+  export const EuiButtonGroup: SFC<
+    HTMLAttributes<HTMLDivElement> & EuiButtonGroupProps
   >;
 }

src/components/filter_group/index.d.ts

@@ -0,0 +1,38 @@
+import { CommonProps } from '../common';
+import { IconType, IconSize } from '../icon'
+/// <reference path="../button/index.d.ts" />
+
+import { SFC, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+
+declare module '@elastic/eui' {
+  /**
+   * Filter button type defs
+   *
+   * @see './filter_button.js'
+   */
+
+  export const EuiFilterButton: SFC<EuiButtonEmptyProps>;
+
+  /**
+   * Filter group type defs
+   *
+   * @see './filter_group.js'
+   */
+
+  export const EuiFilterGroup: SFC<CommonProps & HTMLAttributes<HTMLDivElement>>;
+
+  /**
+   * Filter select item type defs
+   *
+   * @see './filter_select_item.js'
+   */
+
+  export type FilterChecked = 'on' | 'off';
+  export interface EuiFilterSelectItemProps {
+    checked?: FilterChecked
+  }
+
+  export const EuiFilterSelectItem: SFC<CommonProps &
+    ButtonHTMLAttributes<HTMLButtonElement> & EuiFilterSelectItemProps
+  >;
+}

src/components/index.d.ts

@@ -10,6 +10,7 @@
 /// <reference path="./description_list/index.d.ts" />
 /// <reference path="./empty_prompt/index.d.ts" />
 /// <reference path="./error_boundary/index.d.ts" />
+/// <reference path="./filter_group/index.d.ts" />
 /// <reference path="./flex/index.d.ts" />
 /// <reference path="./flyout/index.d.ts" />
 /// <reference path="./focus_trap/index.d.ts" />

src/components/toggle/index.ts

@@ -0,0 +1 @@
+export { EuiToggle, ToggleType, TYPES as TOGGLE_TYPES } from './toggle';

src/components/toggle/toggle.test.js → src/components/toggle/toggle.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test';
+import { requiredProps } from '../../test/required_props';
 
 import { EuiToggle } from './toggle';
 
@@ -10,7 +10,6 @@ describe('EuiToggle', () => {
       <EuiToggle label="Is toggle on?" {...requiredProps} />
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });

src/components/toggle/toggle.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ChangeEventHandler, HTMLAttributes } from 'react';
+import { CommonProps } from '../common';
+
+const typeToInputTypeMap = {
+  single: 'radio',
+  multi: 'checkbox',
+};
+
+export const TYPES = Object.keys(typeToInputTypeMap);
+
+export type ToggleType = keyof typeof typeToInputTypeMap;
+
+export type EuiToggleProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    id?: string;
+    /**
+     * Initial state of the toggle
+     */
+    checked?: boolean;
+    /**
+     * For handling the onChange event of the input
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    isDisabled?: boolean;
+    name?: string;
+    /**
+     * Determines the input type based on multiple or single item(s)
+     */
+    type?: ToggleType;
+    /**
+     * What would typically be the input's label. Required for accessibility.
+     */
+    label: string;
+    /**
+     * Additional classNames for the input itself
+     */
+    inputClassName?: string;
+    value?: string | number;
+  };
+
+export const EuiToggle: React.SFC<EuiToggleProps> = ({
+  id,
+  className,
+  checked,
+  children,
+  inputClassName,
+  isDisabled,
+  label,
+  name,
+  onChange,
+  title,
+  type,
+  value,
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiToggle',
+    { 'euiToggle--checked': checked },
+    className
+  );
+
+  const inputClasses = classNames('euiToggle__input', inputClassName);
+
+  return (
+    <div className={classes} {...rest}>
+      <input
+        id={id}
+        className={inputClasses}
+        aria-label={label}
+        checked={checked}
+        disabled={isDisabled}
+        name={name}
+        onChange={onChange}
+        title={title}
+        type={type ? typeToInputTypeMap[type] : undefined}
+        value={value}
+      />
+
+      {children}
+    </div>
+  );
+};
+
+EuiToggle.defaultProps = {
+  type: 'multi',
+};