@atlaskit/button 16.7.0 → 16.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/button-group/package.json +2 -2
- package/custom-theme-button/package.json +2 -2
- package/dist/cjs/shared/button-base.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/shared/button-base.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/shared/button-base.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/button-group.d.ts +1 -1
- package/dist/types/custom-theme-button/custom-theme-button-types.d.ts +5 -5
- package/dist/types/loading-button.d.ts +2 -2
- package/dist/types/shared/colors.d.ts +4 -4
- package/dist/types/shared/css.d.ts +1 -1
- package/dist/types/shared/loading-spinner.d.ts +1 -1
- package/dist/types/types.d.ts +5 -5
- package/dist/types-ts4.5/button-group.d.ts +12 -0
- package/dist/types-ts4.5/button.d.ts +15 -0
- package/dist/types-ts4.5/custom-theme-button/custom-theme-button-types.d.ts +22 -0
- package/dist/types-ts4.5/custom-theme-button/custom-theme-button.d.ts +10 -0
- package/dist/types-ts4.5/custom-theme-button/index.d.ts +2 -0
- package/dist/types-ts4.5/custom-theme-button/theme.d.ts +21 -0
- package/dist/types-ts4.5/entry-points/button-group.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/custom-theme-button.d.ts +2 -0
- package/dist/types-ts4.5/entry-points/loading-button.d.ts +2 -0
- package/dist/types-ts4.5/entry-points/standard-button.d.ts +7 -0
- package/dist/types-ts4.5/entry-points/types.d.ts +4 -0
- package/dist/types-ts4.5/index.d.ts +8 -0
- package/dist/types-ts4.5/loading-button.d.ts +15 -0
- package/dist/types-ts4.5/shared/block-events.d.ts +4 -0
- package/dist/types-ts4.5/shared/button-base.d.ts +10 -0
- package/dist/types-ts4.5/shared/colors.d.ts +23 -0
- package/dist/types-ts4.5/shared/css.d.ts +22 -0
- package/dist/types-ts4.5/shared/get-is-only-single-icon.d.ts +2 -0
- package/dist/types-ts4.5/shared/loading-spinner.d.ts +5 -0
- package/dist/types-ts4.5/types.d.ts +94 -0
- package/loading-button/package.json +2 -2
- package/package.json +12 -4
- package/standard-button/package.json +2 -2
- package/types/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 16.7.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`96b5112590b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/96b5112590b) - DUMMY CHANGESET to work around Product Integrator bug
|
|
8
|
+
|
|
9
|
+
## 16.7.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
|
|
14
|
+
|
|
3
15
|
## 16.7.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"types": "../dist/types/entry-points/button-group.d.ts",
|
|
8
8
|
"typesVersions": {
|
|
9
|
-
">=4.
|
|
9
|
+
">=4.5 <4.9": {
|
|
10
10
|
"*": [
|
|
11
|
-
"../dist/types-ts4.
|
|
11
|
+
"../dist/types-ts4.5/entry-points/button-group.d.ts"
|
|
12
12
|
]
|
|
13
13
|
}
|
|
14
14
|
}
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"types": "../dist/types/entry-points/custom-theme-button.d.ts",
|
|
8
8
|
"typesVersions": {
|
|
9
|
-
">=4.
|
|
9
|
+
">=4.5 <4.9": {
|
|
10
10
|
"*": [
|
|
11
|
-
"../dist/types-ts4.
|
|
11
|
+
"../dist/types-ts4.5/entry-points/custom-theme-button.d.ts"
|
|
12
12
|
]
|
|
13
13
|
}
|
|
14
14
|
}
|
|
@@ -93,7 +93,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
|
|
|
93
93
|
action: 'clicked',
|
|
94
94
|
componentName: 'button',
|
|
95
95
|
packageName: "@atlaskit/button",
|
|
96
|
-
packageVersion: "16.7.
|
|
96
|
+
packageVersion: "16.7.2",
|
|
97
97
|
analyticsData: analyticsContext
|
|
98
98
|
});
|
|
99
99
|
|
package/dist/cjs/version.json
CHANGED
|
@@ -76,7 +76,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
|
|
|
76
76
|
action: 'clicked',
|
|
77
77
|
componentName: 'button',
|
|
78
78
|
packageName: "@atlaskit/button",
|
|
79
|
-
packageVersion: "16.7.
|
|
79
|
+
packageVersion: "16.7.2",
|
|
80
80
|
analyticsData: analyticsContext
|
|
81
81
|
});
|
|
82
82
|
|
package/dist/es2019/version.json
CHANGED
|
@@ -84,7 +84,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
|
|
|
84
84
|
action: 'clicked',
|
|
85
85
|
componentName: 'button',
|
|
86
86
|
packageName: "@atlaskit/button",
|
|
87
|
-
packageVersion: "16.7.
|
|
87
|
+
packageVersion: "16.7.2",
|
|
88
88
|
analyticsData: analyticsContext
|
|
89
89
|
});
|
|
90
90
|
|
package/dist/esm/version.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { CSSObject } from '@emotion/react';
|
|
2
2
|
import { ThemeModes } from '@atlaskit/theme/types';
|
|
3
3
|
import { BaseProps } from '../types';
|
|
4
|
-
export
|
|
4
|
+
export type ThemeTokens = {
|
|
5
5
|
buttonStyles: CSSObject;
|
|
6
6
|
spinnerStyles: CSSObject;
|
|
7
7
|
};
|
|
8
|
-
export
|
|
9
|
-
export
|
|
8
|
+
export type InteractionState = 'disabled' | 'focusSelected' | 'selected' | 'active' | 'hover' | 'focus' | 'default';
|
|
9
|
+
export type CustomThemeButtonOwnProps = {
|
|
10
10
|
isLoading?: boolean;
|
|
11
11
|
/**
|
|
12
12
|
* Slow + discouraged custom theme API
|
|
@@ -14,8 +14,8 @@ export declare type CustomThemeButtonOwnProps = {
|
|
|
14
14
|
*/
|
|
15
15
|
theme?: (current: (props: ThemeProps) => ThemeTokens, props: ThemeProps) => ThemeTokens;
|
|
16
16
|
};
|
|
17
|
-
export
|
|
18
|
-
export
|
|
17
|
+
export type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps;
|
|
18
|
+
export type ThemeProps = Partial<CustomThemeButtonProps> & {
|
|
19
19
|
state: InteractionState;
|
|
20
20
|
iconIsOnlyChild?: boolean;
|
|
21
21
|
mode?: ThemeModes;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BaseProps } from './types';
|
|
3
|
-
export
|
|
3
|
+
export type LoadingButtonOwnProps = {
|
|
4
4
|
isLoading?: boolean;
|
|
5
5
|
};
|
|
6
|
-
export
|
|
6
|
+
export type LoadingButtonProps = Omit<BaseProps, 'overlay'> & LoadingButtonOwnProps;
|
|
7
7
|
/**
|
|
8
8
|
* __Loading button__
|
|
9
9
|
*
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { ThemeModes } from '@atlaskit/theme/types';
|
|
2
2
|
import { Appearance } from '../types';
|
|
3
|
-
export
|
|
3
|
+
export type ColorRule = {
|
|
4
4
|
[key in ThemeModes]: string;
|
|
5
5
|
};
|
|
6
|
-
export
|
|
6
|
+
export type ColorGroup = {
|
|
7
7
|
default: ColorRule;
|
|
8
8
|
hover?: ColorRule;
|
|
9
9
|
active?: ColorRule;
|
|
@@ -12,10 +12,10 @@ export declare type ColorGroup = {
|
|
|
12
12
|
focus?: ColorRule;
|
|
13
13
|
focusSelected?: ColorRule;
|
|
14
14
|
};
|
|
15
|
-
export
|
|
15
|
+
export type ColorPreset = {
|
|
16
16
|
[key in Appearance]: ColorGroup;
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
type Values = {
|
|
19
19
|
background: ColorPreset;
|
|
20
20
|
color: ColorPreset;
|
|
21
21
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CSSObject } from '@emotion/react';
|
|
2
2
|
import { ThemeModes } from '@atlaskit/theme/types';
|
|
3
3
|
import { Appearance, Spacing } from '../types';
|
|
4
|
-
export
|
|
4
|
+
export type GetCssArgs = {
|
|
5
5
|
appearance: Appearance;
|
|
6
6
|
spacing: Spacing;
|
|
7
7
|
mode: ThemeModes;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { BaseProps } from '../types';
|
|
3
|
-
|
|
3
|
+
type LoadingSpinnerProps = Pick<BaseProps, 'appearance' | 'isDisabled' | 'isSelected' | 'spacing'>;
|
|
4
4
|
export default function LoadingSpinner({ spacing, ...rest }: LoadingSpinnerProps): JSX.Element;
|
|
5
5
|
export {};
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
|
|
6
|
-
export
|
|
3
|
+
export type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
|
|
4
|
+
export type Spacing = 'compact' | 'default' | 'none';
|
|
5
|
+
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
6
|
+
export type BaseOwnProps = {
|
|
7
7
|
/**
|
|
8
8
|
* The base styling to apply to the button
|
|
9
9
|
*/
|
|
@@ -87,7 +87,7 @@ export declare type BaseOwnProps = {
|
|
|
87
87
|
*/
|
|
88
88
|
analyticsContext?: Record<string, any>;
|
|
89
89
|
};
|
|
90
|
-
export
|
|
90
|
+
export type BaseProps = Combine<Combine<Omit<React.AllHTMLAttributes<HTMLElement>, 'disabled'>, {
|
|
91
91
|
'data-testid'?: never;
|
|
92
92
|
'data-has-overlay'?: never;
|
|
93
93
|
}>, BaseOwnProps>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { jsx } from '@emotion/react';
|
|
4
|
+
import { Appearance } from './types';
|
|
5
|
+
export type ButtonGroupProps = {
|
|
6
|
+
/**
|
|
7
|
+
* The appearance to apply to all buttons.
|
|
8
|
+
*/
|
|
9
|
+
appearance?: Appearance;
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): jsx.JSX.Element;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BaseProps } from './types';
|
|
3
|
+
export interface ButtonProps extends BaseProps {
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* __Button__
|
|
7
|
+
*
|
|
8
|
+
* A button triggers an event or action. They let users know what will happen next.
|
|
9
|
+
*
|
|
10
|
+
* - [Examples](https://atlassian.design/components/button/examples)
|
|
11
|
+
* - [Code](https://atlassian.design/components/button/code)
|
|
12
|
+
* - [Usage](https://atlassian.design/components/button/usage)
|
|
13
|
+
*/
|
|
14
|
+
declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>>;
|
|
15
|
+
export default Button;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { CSSObject } from '@emotion/react';
|
|
2
|
+
import { ThemeModes } from '@atlaskit/theme/types';
|
|
3
|
+
import { BaseProps } from '../types';
|
|
4
|
+
export type ThemeTokens = {
|
|
5
|
+
buttonStyles: CSSObject;
|
|
6
|
+
spinnerStyles: CSSObject;
|
|
7
|
+
};
|
|
8
|
+
export type InteractionState = 'disabled' | 'focusSelected' | 'selected' | 'active' | 'hover' | 'focus' | 'default';
|
|
9
|
+
export type CustomThemeButtonOwnProps = {
|
|
10
|
+
isLoading?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Slow + discouraged custom theme API
|
|
13
|
+
* See custom theme guide for usage details
|
|
14
|
+
*/
|
|
15
|
+
theme?: (current: (props: ThemeProps) => ThemeTokens, props: ThemeProps) => ThemeTokens;
|
|
16
|
+
};
|
|
17
|
+
export type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps;
|
|
18
|
+
export type ThemeProps = Partial<CustomThemeButtonProps> & {
|
|
19
|
+
state: InteractionState;
|
|
20
|
+
iconIsOnlyChild?: boolean;
|
|
21
|
+
mode?: ThemeModes;
|
|
22
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* __Custom theme button__
|
|
4
|
+
*
|
|
5
|
+
* A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
|
|
6
|
+
*
|
|
7
|
+
* - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
|
|
8
|
+
*/
|
|
9
|
+
declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("..").BaseProps, "overlay"> & import("./custom-theme-button-types").CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
|
|
10
|
+
export default CustomThemeButton;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CSSObject } from '@emotion/react';
|
|
3
|
+
import { InteractionState, ThemeProps, ThemeTokens } from './custom-theme-button-types';
|
|
4
|
+
export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
|
|
5
|
+
export declare function getSpecifiers(styles: CSSObject): CSSObject;
|
|
6
|
+
export declare function defaultThemeFn(current: (values: ThemeProps) => ThemeTokens, values: ThemeProps): ThemeTokens;
|
|
7
|
+
declare const Theme: {
|
|
8
|
+
Consumer: import("react").ComponentType<{
|
|
9
|
+
children: (tokens: ThemeTokens) => import("react").ReactNode;
|
|
10
|
+
} & Partial<import("./custom-theme-button-types").CustomThemeButtonProps> & {
|
|
11
|
+
state: InteractionState;
|
|
12
|
+
iconIsOnlyChild?: boolean | undefined;
|
|
13
|
+
mode?: import("@atlaskit/theme").ThemeModes | undefined;
|
|
14
|
+
}>;
|
|
15
|
+
Provider: import("react").ComponentType<{
|
|
16
|
+
children?: import("react").ReactNode;
|
|
17
|
+
value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;
|
|
18
|
+
}>;
|
|
19
|
+
useTheme: (props: ThemeProps) => ThemeTokens;
|
|
20
|
+
};
|
|
21
|
+
export default Theme;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '../button-group';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export type { Appearance, Spacing, BaseOwnProps, BaseProps } from '../types';
|
|
2
|
+
export type { ButtonProps } from './standard-button';
|
|
3
|
+
export type { LoadingButtonProps, LoadingButtonOwnProps, } from './loading-button';
|
|
4
|
+
export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from './custom-theme-button';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type { Appearance, Spacing, BaseOwnProps, BaseProps, } from './entry-points/types';
|
|
2
|
+
export { default, } from './entry-points/standard-button';
|
|
3
|
+
export type { ButtonProps } from './entry-points/standard-button';
|
|
4
|
+
export { default as LoadingButton } from './entry-points/loading-button';
|
|
5
|
+
export type { LoadingButtonProps, LoadingButtonOwnProps, } from './entry-points/loading-button';
|
|
6
|
+
export { default as CustomThemeButton, Theme, } from './entry-points/custom-theme-button';
|
|
7
|
+
export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from './entry-points/custom-theme-button';
|
|
8
|
+
export { default as ButtonGroup } from './entry-points/button-group';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BaseProps } from './types';
|
|
3
|
+
export type LoadingButtonOwnProps = {
|
|
4
|
+
isLoading?: boolean;
|
|
5
|
+
};
|
|
6
|
+
export type LoadingButtonProps = Omit<BaseProps, 'overlay'> & LoadingButtonOwnProps;
|
|
7
|
+
/**
|
|
8
|
+
* __Loading button__
|
|
9
|
+
*
|
|
10
|
+
* A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
|
|
11
|
+
*
|
|
12
|
+
* - [Examples](https://atlassian.design/components/button/examples#loading-button)
|
|
13
|
+
*/
|
|
14
|
+
declare const LoadingButton: React.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & LoadingButtonOwnProps & React.RefAttributes<HTMLElement>>;
|
|
15
|
+
export default LoadingButton;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { CSSObject } from '@emotion/react';
|
|
4
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.AllHTMLAttributes<HTMLElement>, "disabled">, "data-testid" | "data-has-overlay"> & {
|
|
5
|
+
'data-testid'?: undefined;
|
|
6
|
+
'data-has-overlay'?: undefined;
|
|
7
|
+
}, keyof import("../types").BaseOwnProps> & import("../types").BaseOwnProps & {
|
|
8
|
+
buttonCss: CSSObject;
|
|
9
|
+
} & React.RefAttributes<HTMLElement>>;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ThemeModes } from '@atlaskit/theme/types';
|
|
2
|
+
import { Appearance } from '../types';
|
|
3
|
+
export type ColorRule = {
|
|
4
|
+
[key in ThemeModes]: string;
|
|
5
|
+
};
|
|
6
|
+
export type ColorGroup = {
|
|
7
|
+
default: ColorRule;
|
|
8
|
+
hover?: ColorRule;
|
|
9
|
+
active?: ColorRule;
|
|
10
|
+
disabled?: ColorRule;
|
|
11
|
+
selected?: ColorRule;
|
|
12
|
+
focus?: ColorRule;
|
|
13
|
+
focusSelected?: ColorRule;
|
|
14
|
+
};
|
|
15
|
+
export type ColorPreset = {
|
|
16
|
+
[key in Appearance]: ColorGroup;
|
|
17
|
+
};
|
|
18
|
+
type Values = {
|
|
19
|
+
background: ColorPreset;
|
|
20
|
+
color: ColorPreset;
|
|
21
|
+
};
|
|
22
|
+
declare const values: Values;
|
|
23
|
+
export default values;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { CSSObject } from '@emotion/react';
|
|
2
|
+
import { ThemeModes } from '@atlaskit/theme/types';
|
|
3
|
+
import { Appearance, Spacing } from '../types';
|
|
4
|
+
export type GetCssArgs = {
|
|
5
|
+
appearance: Appearance;
|
|
6
|
+
spacing: Spacing;
|
|
7
|
+
mode: ThemeModes;
|
|
8
|
+
isSelected: boolean;
|
|
9
|
+
shouldFitContainer: boolean;
|
|
10
|
+
isOnlySingleIcon: boolean;
|
|
11
|
+
};
|
|
12
|
+
export declare function getCss({ appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
|
|
13
|
+
export declare function getIconStyle({ spacing }: {
|
|
14
|
+
spacing: Spacing;
|
|
15
|
+
}): import("@emotion/react").SerializedStyles;
|
|
16
|
+
export declare function getContentStyle({ spacing }: {
|
|
17
|
+
spacing: Spacing;
|
|
18
|
+
}): import("@emotion/react").SerializedStyles;
|
|
19
|
+
export declare function getFadingCss({ hasOverlay }: {
|
|
20
|
+
hasOverlay: boolean;
|
|
21
|
+
}): import("@emotion/react").SerializedStyles;
|
|
22
|
+
export declare const overlayCss: CSSObject;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BaseProps } from '../types';
|
|
3
|
+
type LoadingSpinnerProps = Pick<BaseProps, 'appearance' | 'isDisabled' | 'isSelected' | 'spacing'>;
|
|
4
|
+
export default function LoadingSpinner({ spacing, ...rest }: LoadingSpinnerProps): JSX.Element;
|
|
5
|
+
export {};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
|
+
export type Appearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
|
|
4
|
+
export type Spacing = 'compact' | 'default' | 'none';
|
|
5
|
+
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
6
|
+
export type BaseOwnProps = {
|
|
7
|
+
/**
|
|
8
|
+
* The base styling to apply to the button
|
|
9
|
+
*/
|
|
10
|
+
appearance?: Appearance;
|
|
11
|
+
/**
|
|
12
|
+
* Set the button to autofocus on mount
|
|
13
|
+
*/
|
|
14
|
+
autoFocus?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Add a classname to the button
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Used to 'overlay' something over a button. This is commonly used to display a loading spinner
|
|
21
|
+
*/
|
|
22
|
+
overlay?: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* Provides a url for buttons being used as a link
|
|
25
|
+
*/
|
|
26
|
+
href?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Places an icon within the button, after the button's text
|
|
29
|
+
*/
|
|
30
|
+
iconAfter?: React.ReactChild;
|
|
31
|
+
/**
|
|
32
|
+
* Places an icon within the button, before the button's text
|
|
33
|
+
*/
|
|
34
|
+
iconBefore?: React.ReactChild;
|
|
35
|
+
/**
|
|
36
|
+
* Set if the button is disabled
|
|
37
|
+
*/
|
|
38
|
+
isDisabled?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Change the style to indicate the button is selected
|
|
41
|
+
*/
|
|
42
|
+
isSelected?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Handler to be called on blur
|
|
45
|
+
*/
|
|
46
|
+
onBlur?: React.FocusEventHandler<HTMLElement>;
|
|
47
|
+
/**
|
|
48
|
+
* Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details
|
|
49
|
+
*/
|
|
50
|
+
onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
51
|
+
/**
|
|
52
|
+
* Handler to be called on focus
|
|
53
|
+
*/
|
|
54
|
+
onFocus?: React.FocusEventHandler<HTMLElement>;
|
|
55
|
+
/**
|
|
56
|
+
* Set the amount of padding in the button
|
|
57
|
+
*/
|
|
58
|
+
spacing?: Spacing;
|
|
59
|
+
/**
|
|
60
|
+
* Pass target down to a link within the button component, if a href is provided
|
|
61
|
+
*/
|
|
62
|
+
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
63
|
+
/**
|
|
64
|
+
* Pass type down to a button
|
|
65
|
+
*/
|
|
66
|
+
type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
|
|
67
|
+
/**
|
|
68
|
+
* Option to fit button width to its parent width
|
|
69
|
+
*/
|
|
70
|
+
shouldFitContainer?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Text content to be rendered in the button
|
|
73
|
+
*/
|
|
74
|
+
children?: React.ReactNode;
|
|
75
|
+
/**
|
|
76
|
+
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
77
|
+
*/
|
|
78
|
+
testId?: string;
|
|
79
|
+
component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
|
|
80
|
+
/**
|
|
81
|
+
* An optional name used to identify this component to press listeners. E.g. interaction tracing
|
|
82
|
+
* @see https://hello.atlassian.net/wiki/spaces/UFO/pages/2010358949/UFO+Integration+into+Design+System+components
|
|
83
|
+
*/
|
|
84
|
+
interactionName?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Additional information to be included in the `context` of analytics events that come from button
|
|
87
|
+
*/
|
|
88
|
+
analyticsContext?: Record<string, any>;
|
|
89
|
+
};
|
|
90
|
+
export type BaseProps = Combine<Combine<Omit<React.AllHTMLAttributes<HTMLElement>, 'disabled'>, {
|
|
91
|
+
'data-testid'?: never;
|
|
92
|
+
'data-has-overlay'?: never;
|
|
93
|
+
}>, BaseOwnProps>;
|
|
94
|
+
export {};
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"types": "../dist/types/entry-points/loading-button.d.ts",
|
|
8
8
|
"typesVersions": {
|
|
9
|
-
">=4.
|
|
9
|
+
">=4.5 <4.9": {
|
|
10
10
|
"*": [
|
|
11
|
-
"../dist/types-ts4.
|
|
11
|
+
"../dist/types-ts4.5/entry-points/loading-button.d.ts"
|
|
12
12
|
]
|
|
13
13
|
}
|
|
14
14
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/button",
|
|
3
|
-
"version": "16.7.
|
|
3
|
+
"version": "16.7.2",
|
|
4
4
|
"description": "A button triggers an event or action. They let users know what will happen next.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,6 +12,14 @@
|
|
|
12
12
|
"module": "dist/esm/index.js",
|
|
13
13
|
"module:es2019": "dist/es2019/index.js",
|
|
14
14
|
"types": "dist/types/index.d.ts",
|
|
15
|
+
"typesVersions": {
|
|
16
|
+
">=4.5 <4.9": {
|
|
17
|
+
"*": [
|
|
18
|
+
"dist/types-ts4.5/*",
|
|
19
|
+
"dist/types-ts4.5/index.d.ts"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
},
|
|
15
23
|
"sideEffects": false,
|
|
16
24
|
"atlaskit:src": "src/index.tsx",
|
|
17
25
|
"atlassian": {
|
|
@@ -37,7 +45,7 @@
|
|
|
37
45
|
"@atlaskit/interaction-context": "^2.1.0",
|
|
38
46
|
"@atlaskit/spinner": "^15.5.0",
|
|
39
47
|
"@atlaskit/theme": "^12.5.0",
|
|
40
|
-
"@atlaskit/tokens": "^1.
|
|
48
|
+
"@atlaskit/tokens": "^1.4.0",
|
|
41
49
|
"@babel/runtime": "^7.0.0",
|
|
42
50
|
"@emotion/react": "^11.7.1"
|
|
43
51
|
},
|
|
@@ -45,7 +53,7 @@
|
|
|
45
53
|
"react": "^16.8.0"
|
|
46
54
|
},
|
|
47
55
|
"devDependencies": {
|
|
48
|
-
"@atlaskit/checkbox": "^12.
|
|
56
|
+
"@atlaskit/checkbox": "^12.6.0",
|
|
49
57
|
"@atlaskit/docs": "*",
|
|
50
58
|
"@atlaskit/icon": "^21.12.0",
|
|
51
59
|
"@atlaskit/logo": "^13.14.0",
|
|
@@ -66,7 +74,7 @@
|
|
|
66
74
|
"react-router-dom": "^4.2.2",
|
|
67
75
|
"react-test-renderer": "^16.8.0",
|
|
68
76
|
"storybook-addon-performance": "^0.16.0",
|
|
69
|
-
"typescript": "4.
|
|
77
|
+
"typescript": "~4.9.5",
|
|
70
78
|
"wait-for-expect": "^1.2.0"
|
|
71
79
|
},
|
|
72
80
|
"techstack": {
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"types": "../dist/types/entry-points/standard-button.d.ts",
|
|
8
8
|
"typesVersions": {
|
|
9
|
-
">=4.
|
|
9
|
+
">=4.5 <4.9": {
|
|
10
10
|
"*": [
|
|
11
|
-
"../dist/types-ts4.
|
|
11
|
+
"../dist/types-ts4.5/entry-points/standard-button.d.ts"
|
|
12
12
|
]
|
|
13
13
|
}
|
|
14
14
|
}
|
package/types/package.json
CHANGED