Add type definitions for @atlaskit/button (#23897)

types/atlaskit__button/atlaskit__button-tests.tsx

@@ -0,0 +1,38 @@
+import Button, { ButtonGroup, themeNamespace } from "@atlaskit/button";
+
+import * as React from "react";
+import { render } from "react-dom";
+
+declare const container: Element;
+
+render(
+    <ButtonGroup appearance="primary">
+        <Button
+            appearance="danger"
+            ariaControls="some-aria-controls"
+            ariaExpanded={true}
+            ariaHaspopup={true}
+            className="some-class-name"
+            component={Button}
+            form="some-form"
+            href="some-href"
+            iconAfter={<div />}
+            iconBefore={<div />}
+            id="some-id"
+            innerRef={() => {}}
+            isDisabled={true}
+            isSelected={true}
+            key="some-key"
+            onClick={event => event.currentTarget.formMethod}
+            ref="some-ref"
+            shouldFitContainer={true}
+            spacing="compact"
+            tabIndex={88}
+            target="some-target"
+            type="button"
+        >
+            {themeNamespace}
+        </Button>
+    </ButtonGroup>,
+    container
+);

types/atlaskit__button/index.d.ts

@@ -0,0 +1,93 @@
+// Type definitions for @atlaskit/button 6.4
+// Project: https://bitbucket.org/atlassian/atlaskit-mk-2/
+// Definitions by: Jimmy Luong <https://github.com/dijimsta>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.6
+
+import {
+    Component,
+    ReactNode,
+    ReactElement,
+    ComponentClass,
+    MouseEventHandler
+} from "react";
+
+export type ButtonAppearances =
+    | "default"
+    | "danger"
+    | "link"
+    | "primary"
+    | "subtle"
+    | "subtle-link"
+    | "warning"
+    | "help";
+
+export interface ButtonProps {
+    /** The base styling to apply to the button. */
+    readonly appearance?: ButtonAppearances;
+    /** Pass aria-controls to underlying html button. */
+    readonly ariaControls?: string;
+    /** Pass aria-expanded to underlying html button. */
+    readonly ariaExpanded?: boolean;
+    /** Pass aria-haspopup to underlying html button. */
+    readonly ariaHaspopup?: boolean;
+    /** This button's child nodes. */
+    readonly children?: ReactNode;
+    /** Add a classname to the button. */
+    readonly className?: string;
+    /** A custom component to use instead of the default button. */
+    readonly component?: ComponentClass<any>;
+    /** Name property of a linked form that the button submits when clicked. */
+    readonly form?: string;
+    /** Provides a url for buttons being used as a link. */
+    readonly href?: string;
+    /** Places an icon within the button, after the button's text. */
+    readonly iconAfter?: ReactElement<any>;
+    /** Places an icon within the button, before the button's text. */
+    readonly iconBefore?: ReactElement<any>;
+    /** Pass a reference on to the styled component */
+    readonly innerRef?: (instance: any) => void;
+    /** Provide a unique id to the button. */
+    readonly id?: string;
+    /** Set if the button is disabled. */
+    readonly isDisabled?: boolean;
+    /** Change the style to indicate the button is selected. */
+    readonly isSelected?: boolean;
+    /** Handler to be called on click. */
+    readonly onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Set the amount of padding in the button. */
+    readonly spacing?: ButtonSpacing;
+    /** Assign specific tabIndex order to the underlying html button. */
+    readonly tabIndex?: number;
+    /** Pass target down to a link within the button component, if a href is provided. */
+    readonly target?: string;
+    /** Set whether it is a button or a form submission. */
+    readonly type?: ButtonType;
+    /** Option to fit button width to its parent width */
+    readonly shouldFitContainer?: boolean;
+}
+
+export type ButtonType = "button" | "submit";
+
+export type ButtonSpacing = "compact" | "default" | "none";
+
+export interface ButtonState {
+    readonly isActive: boolean;
+    readonly isFocus: boolean;
+    readonly isHover: boolean;
+}
+
+declare class Button extends Component<ButtonProps, ButtonState> {}
+
+export interface ButtonGroupProps {
+    /** The appearance to apply to all buttons. */
+    readonly appearance?: ButtonAppearances;
+    /** The buttons to render. */
+    readonly children: ReactNode;
+}
+
+export class ButtonGroup extends Component<ButtonGroupProps> {}
+
+export const themeNamespace: string;
+
+export default Button;

types/atlaskit__button/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["es6", "dom"],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react",
+        "paths": {
+            "@atlaskit/button": ["atlaskit__button"]
+        }
+    },
+    "files": ["index.d.ts", "atlaskit__button-tests.tsx"]
+}

types/atlaskit__button/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }