@atlaskit/button 16.10.2 → 16.11.0
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 +6 -0
- package/dist/cjs/entry-points/new.js +8 -1
- package/dist/cjs/entry-points/unsafe.js +40 -1
- package/dist/cjs/new-button/containers/split-button/index.js +50 -0
- package/dist/cjs/new-button/containers/split-button/split-button-context.js +37 -0
- package/dist/cjs/new-button/containers/split-button/split-button.js +137 -0
- package/dist/cjs/new-button/containers/split-button/types.js +5 -0
- package/dist/cjs/new-button/containers/split-button/utils.js +23 -0
- package/dist/cjs/new-button/variants/shared/use-button-base.js +19 -6
- package/dist/cjs/new-button/variants/shared/xcss.js +52 -10
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/entry-points/new.js +2 -1
- package/dist/es2019/entry-points/unsafe.js +4 -1
- package/dist/es2019/new-button/containers/split-button/index.js +3 -0
- package/dist/es2019/new-button/containers/split-button/split-button-context.js +31 -0
- package/dist/es2019/new-button/containers/split-button/split-button.js +129 -0
- package/dist/es2019/new-button/containers/split-button/types.js +1 -0
- package/dist/es2019/new-button/containers/split-button/utils.js +12 -0
- package/dist/es2019/new-button/variants/shared/use-button-base.js +19 -6
- package/dist/es2019/new-button/variants/shared/xcss.js +54 -10
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/entry-points/new.js +2 -1
- package/dist/esm/entry-points/unsafe.js +4 -1
- package/dist/esm/new-button/containers/split-button/index.js +3 -0
- package/dist/esm/new-button/containers/split-button/split-button-context.js +31 -0
- package/dist/esm/new-button/containers/split-button/split-button.js +131 -0
- package/dist/esm/new-button/containers/split-button/types.js +1 -0
- package/dist/esm/new-button/containers/split-button/utils.js +16 -0
- package/dist/esm/new-button/variants/shared/use-button-base.js +19 -6
- package/dist/esm/new-button/variants/shared/xcss.js +51 -10
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/types/entry-points/new.d.ts +1 -0
- package/dist/types/entry-points/unsafe.d.ts +3 -0
- package/dist/types/new-button/containers/split-button/index.d.ts +3 -0
- package/dist/types/new-button/containers/split-button/split-button-context.d.ts +47 -0
- package/dist/types/new-button/containers/split-button/split-button.d.ts +47 -0
- package/dist/types/new-button/containers/split-button/types.d.ts +4 -0
- package/dist/types/new-button/containers/split-button/utils.d.ts +5 -0
- package/dist/types/new-button/variants/shared/use-button-base.d.ts +1 -1
- package/dist/types/new-button/variants/shared/xcss.d.ts +14 -1
- package/dist/types/old-button/types.d.ts +2 -2
- package/dist/types-ts4.5/containers/button-group.d.ts +12 -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/new.d.ts +6 -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/entry-points/unsafe.d.ts +4 -0
- package/dist/types-ts4.5/index.d.ts +8 -0
- package/dist/types-ts4.5/new-button/containers/split-button/index.d.ts +3 -0
- package/dist/types-ts4.5/new-button/containers/split-button/split-button-context.d.ts +47 -0
- package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +47 -0
- package/dist/types-ts4.5/new-button/containers/split-button/types.d.ts +4 -0
- package/dist/types-ts4.5/new-button/containers/split-button/utils.d.ts +5 -0
- package/dist/types-ts4.5/new-button/variants/default/button.d.ts +19 -0
- package/dist/types-ts4.5/new-button/variants/default/link.d.ts +17 -0
- package/dist/types-ts4.5/new-button/variants/default/types.d.ts +15 -0
- package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts +15 -0
- package/dist/types-ts4.5/new-button/variants/icon/button.d.ts +17 -0
- package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +17 -0
- package/dist/types-ts4.5/new-button/variants/icon/types.d.ts +8 -0
- package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts +15 -0
- package/dist/types-ts4.5/new-button/variants/shared/block-events.d.ts +2 -0
- package/dist/types-ts4.5/new-button/variants/shared/colors.d.ts +18 -0
- package/dist/types-ts4.5/new-button/variants/shared/content.d.ts +13 -0
- package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +37 -0
- package/dist/types-ts4.5/new-button/variants/shared/xcss.d.ts +31 -0
- package/dist/types-ts4.5/new-button/variants/types.d.ts +69 -0
- package/dist/types-ts4.5/old-button/button.d.ts +15 -0
- package/dist/types-ts4.5/old-button/custom-theme-button/custom-theme-button-types.d.ts +22 -0
- package/dist/types-ts4.5/old-button/custom-theme-button/custom-theme-button.d.ts +10 -0
- package/dist/types-ts4.5/old-button/custom-theme-button/index.d.ts +2 -0
- package/dist/types-ts4.5/old-button/custom-theme-button/theme.d.ts +21 -0
- package/dist/types-ts4.5/old-button/loading-button.d.ts +15 -0
- package/dist/types-ts4.5/old-button/shared/block-events.d.ts +4 -0
- package/dist/types-ts4.5/old-button/shared/button-base.d.ts +10 -0
- package/dist/types-ts4.5/old-button/shared/colors.d.ts +23 -0
- package/dist/types-ts4.5/old-button/shared/css.d.ts +22 -0
- package/dist/types-ts4.5/old-button/shared/get-if-visually-hidden-children.d.ts +2 -0
- package/dist/types-ts4.5/old-button/shared/get-is-only-single-icon.d.ts +2 -0
- package/dist/types-ts4.5/old-button/shared/loading-spinner.d.ts +5 -0
- package/dist/types-ts4.5/old-button/types.d.ts +94 -0
- package/dist/types-ts4.5/utils/appearances.d.ts +3 -0
- package/dist/types-ts4.5/utils/spacing.d.ts +3 -0
- package/dist/types-ts4.5/utils/variants.d.ts +15 -0
- package/package.json +2 -2
- package/tmp/api-report-tmp.d.ts +133 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type BackgroundColor, type TextColor } from '@atlaskit/primitives';
|
|
2
|
+
import { type Appearance } from '../types';
|
|
3
|
+
export type ColorGroup<T extends BackgroundColor | TextColor> = {
|
|
4
|
+
default: T;
|
|
5
|
+
hover?: T;
|
|
6
|
+
active?: T;
|
|
7
|
+
disabled?: T;
|
|
8
|
+
selected?: T;
|
|
9
|
+
};
|
|
10
|
+
export type ColorPreset<T extends BackgroundColor | TextColor> = {
|
|
11
|
+
[key in Appearance]: ColorGroup<T>;
|
|
12
|
+
};
|
|
13
|
+
type Values = {
|
|
14
|
+
background: ColorPreset<BackgroundColor>;
|
|
15
|
+
color: ColorPreset<TextColor>;
|
|
16
|
+
};
|
|
17
|
+
declare const values: Values;
|
|
18
|
+
export default values;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type ContentProps = {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
type?: 'text' | 'icon';
|
|
5
|
+
hasOverlay: boolean;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* __Content__
|
|
9
|
+
*
|
|
10
|
+
* Used for slots within a Button, including icons and text content.
|
|
11
|
+
*/
|
|
12
|
+
declare const Content: ({ children, type, hasOverlay }: ContentProps) => JSX.Element;
|
|
13
|
+
export default Content;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { xcss } from '@atlaskit/primitives';
|
|
3
|
+
import { type CommonButtonProps } from '../types';
|
|
4
|
+
export type ControlledEvents<TagName extends HTMLElement> = Pick<React.DOMAttributes<TagName>, 'onMouseDownCapture' | 'onMouseUpCapture' | 'onKeyDownCapture' | 'onKeyUpCapture' | 'onTouchStartCapture' | 'onTouchEndCapture' | 'onPointerDownCapture' | 'onPointerUpCapture' | 'onClickCapture' | 'onClick'>;
|
|
5
|
+
export type ControlledEventsPassed<TagName extends HTMLElement> = Omit<ControlledEvents<TagName>, 'onClick'> & Pick<CommonButtonProps<TagName>, 'onClick'>;
|
|
6
|
+
export type UseButtonBaseArgs<TagName extends HTMLElement> = {
|
|
7
|
+
ref: React.Ref<TagName>;
|
|
8
|
+
/**
|
|
9
|
+
* The type of button. Used to pass action subject context to analytics.
|
|
10
|
+
*/
|
|
11
|
+
buttonType: 'button' | 'link';
|
|
12
|
+
isIconButton?: boolean;
|
|
13
|
+
hasIconBefore?: boolean;
|
|
14
|
+
hasIconAfter?: boolean;
|
|
15
|
+
shouldFitContainer?: boolean;
|
|
16
|
+
} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'appearance' | 'autoFocus' | 'children' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay' | 'spacing'> & ControlledEventsPassed<TagName>;
|
|
17
|
+
export type UseButtonBaseReturn<TagName extends HTMLElement> = {
|
|
18
|
+
xcss: ReturnType<typeof xcss>;
|
|
19
|
+
ref(node: TagName | null): void;
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
isDisabled: boolean;
|
|
22
|
+
} & ControlledEvents<TagName>;
|
|
23
|
+
/**
|
|
24
|
+
* __Use button base__
|
|
25
|
+
*
|
|
26
|
+
* A React hook that accepts a set of common Button props,
|
|
27
|
+
* and processes them to return consistent base props for usage
|
|
28
|
+
* across various Button components.
|
|
29
|
+
*
|
|
30
|
+
* It also:
|
|
31
|
+
* - Implements auto focus when enabled.
|
|
32
|
+
* - Appends the `onClick` event with UFO analytics tracking.
|
|
33
|
+
*
|
|
34
|
+
* @private
|
|
35
|
+
*/
|
|
36
|
+
declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance: propAppearance, autoFocus, buttonType, interactionName, isDisabled: propIsDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
|
|
37
|
+
export default useButtonBase;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { xcss } from '@atlaskit/primitives';
|
|
2
|
+
import { type Appearance, type Spacing } from '../types';
|
|
3
|
+
export declare const heights: {
|
|
4
|
+
[key in Spacing]: string;
|
|
5
|
+
};
|
|
6
|
+
export type GetXCSSArgs = {
|
|
7
|
+
appearance: Appearance;
|
|
8
|
+
spacing: Spacing;
|
|
9
|
+
isDisabled: boolean;
|
|
10
|
+
isSelected: boolean;
|
|
11
|
+
isHighlighted: boolean;
|
|
12
|
+
isActiveOverSelected: boolean;
|
|
13
|
+
shouldFitContainer: boolean;
|
|
14
|
+
hasOverlay: boolean;
|
|
15
|
+
isIconButton: boolean;
|
|
16
|
+
hasIconBefore: boolean;
|
|
17
|
+
hasIconAfter: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* If the button is a LinkButton
|
|
20
|
+
*/
|
|
21
|
+
isLink: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* If the button is a SplitButton
|
|
24
|
+
*/
|
|
25
|
+
isSplit: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* If the button is a PrimarySplitButton used in atlassian-navigation
|
|
28
|
+
*/
|
|
29
|
+
isNavigationSplit: boolean;
|
|
30
|
+
};
|
|
31
|
+
export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
|
|
@@ -0,0 +1,69 @@
|
|
|
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 CommonButtonProps<TagName extends HTMLElement> = {
|
|
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
|
+
* Used to 'overlay' something over a button. This is commonly used to display a loading spinner
|
|
17
|
+
*/
|
|
18
|
+
overlay?: React.ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Set if the button is disabled
|
|
21
|
+
*/
|
|
22
|
+
isDisabled?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Change the style to indicate the button is selected
|
|
25
|
+
*/
|
|
26
|
+
isSelected?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Handler to be called on blur
|
|
29
|
+
*/
|
|
30
|
+
onBlur?: React.FocusEventHandler<TagName>;
|
|
31
|
+
/**
|
|
32
|
+
* 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
|
|
33
|
+
*/
|
|
34
|
+
onClick?: (e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
35
|
+
/**
|
|
36
|
+
* Handler to be called on focus
|
|
37
|
+
*/
|
|
38
|
+
onFocus?: React.FocusEventHandler<TagName>;
|
|
39
|
+
/**
|
|
40
|
+
* Set the amount of padding in the button
|
|
41
|
+
*/
|
|
42
|
+
spacing?: Spacing;
|
|
43
|
+
/**
|
|
44
|
+
* Text content to be rendered in the button
|
|
45
|
+
*/
|
|
46
|
+
children: React.ReactNode;
|
|
47
|
+
/**
|
|
48
|
+
* 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
|
|
49
|
+
*/
|
|
50
|
+
testId?: string;
|
|
51
|
+
/**
|
|
52
|
+
* An optional name used to identify this component to press listeners. E.g. interaction tracing
|
|
53
|
+
* @see https://hello.atlassian.net/wiki/spaces/UFO/pages/2010358949/UFO+Integration+into+Design+System+components
|
|
54
|
+
*/
|
|
55
|
+
interactionName?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Additional information to be included in the `context` of analytics events that come from button
|
|
58
|
+
*/
|
|
59
|
+
analyticsContext?: Record<string, any>;
|
|
60
|
+
};
|
|
61
|
+
type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
62
|
+
export type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'role' | 'disabled'>, {
|
|
63
|
+
'data-testid'?: never;
|
|
64
|
+
}>;
|
|
65
|
+
/**
|
|
66
|
+
* Combines common buttom props with additional HTML attributes.
|
|
67
|
+
*/
|
|
68
|
+
export type CombinedButtonProps<TagName extends HTMLElement, HTMLAttributes extends SupportedElementAttributes> = Combine<HTMLAttributes, CommonButtonProps<TagName>>;
|
|
69
|
+
export {};
|
|
@@ -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("../types").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,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({ appearance, isDisabled, isSelected, spacing, }: 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. For example, interaction tracing. For more information,
|
|
82
|
+
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration)
|
|
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 {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Button from '../new-button/variants/default/button';
|
|
3
|
+
export type Variant = {
|
|
4
|
+
name: string;
|
|
5
|
+
Component: typeof Button | typeof LinkButtonRender;
|
|
6
|
+
/**
|
|
7
|
+
* Expected element rendered as underlying button
|
|
8
|
+
*/
|
|
9
|
+
elementType: typeof HTMLButtonElement | typeof HTMLAnchorElement;
|
|
10
|
+
};
|
|
11
|
+
declare const LinkButtonRender: React.ForwardRefExoticComponent<import("../new-button/variants/default/types").CommonDefaultButtonProps & Omit<Omit<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "style" | "disabled" | "className" | "role">, "data-testid"> & {
|
|
12
|
+
'data-testid'?: undefined;
|
|
13
|
+
}, keyof import("../new-button/variants/types").CommonButtonProps<TagName>> & import("../new-button/variants/types").CommonButtonProps<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
|
|
14
|
+
export declare const variants: Variant[];
|
|
15
|
+
export default variants;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/button",
|
|
3
|
-
"version": "16.
|
|
3
|
+
"version": "16.11.0",
|
|
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/"
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@atlaskit/primitives": "^1.6.0",
|
|
54
54
|
"@atlaskit/spinner": "^15.6.0",
|
|
55
55
|
"@atlaskit/theme": "^12.6.0",
|
|
56
|
-
"@atlaskit/tokens": "^1.
|
|
56
|
+
"@atlaskit/tokens": "^1.28.0",
|
|
57
57
|
"@atlaskit/visually-hidden": "^1.2.4",
|
|
58
58
|
"@babel/runtime": "^7.0.0",
|
|
59
59
|
"@emotion/react": "^11.7.1"
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
## API Report File for "@atlaskit/button"
|
|
2
|
+
|
|
3
|
+
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
|
+
|
|
5
|
+
```ts
|
|
6
|
+
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
|
|
9
|
+
import { ComponentType } from 'react';
|
|
10
|
+
import { CSSObject } from '@emotion/react';
|
|
11
|
+
import { jsx } from '@emotion/react';
|
|
12
|
+
import { default as React_2 } from 'react';
|
|
13
|
+
import { ReactNode } from 'react';
|
|
14
|
+
import { ThemeModes } from '@atlaskit/theme/types';
|
|
15
|
+
import { ThemeModes as ThemeModes_2 } from '@atlaskit/theme';
|
|
16
|
+
import { ThemeProp } from '@atlaskit/theme/components';
|
|
17
|
+
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
18
|
+
|
|
19
|
+
// @public (undocumented)
|
|
20
|
+
export type Appearance = 'danger' | 'default' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
|
|
21
|
+
|
|
22
|
+
// @public (undocumented)
|
|
23
|
+
export type BaseOwnProps = {
|
|
24
|
+
appearance?: Appearance;
|
|
25
|
+
autoFocus?: boolean;
|
|
26
|
+
className?: string;
|
|
27
|
+
overlay?: React_2.ReactNode;
|
|
28
|
+
href?: string;
|
|
29
|
+
iconAfter?: React_2.ReactChild;
|
|
30
|
+
iconBefore?: React_2.ReactChild;
|
|
31
|
+
isDisabled?: boolean;
|
|
32
|
+
isSelected?: boolean;
|
|
33
|
+
onBlur?: React_2.FocusEventHandler<HTMLElement>;
|
|
34
|
+
onClick?: (e: React_2.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
35
|
+
onFocus?: React_2.FocusEventHandler<HTMLElement>;
|
|
36
|
+
spacing?: Spacing;
|
|
37
|
+
target?: React_2.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
38
|
+
type?: React_2.ButtonHTMLAttributes<HTMLButtonElement>['type'];
|
|
39
|
+
shouldFitContainer?: boolean;
|
|
40
|
+
children?: React_2.ReactNode;
|
|
41
|
+
testId?: string;
|
|
42
|
+
component?: React_2.ComponentType<React_2.AllHTMLAttributes<HTMLElement>> | React_2.ElementType;
|
|
43
|
+
interactionName?: string;
|
|
44
|
+
analyticsContext?: Record<string, any>;
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
// @public (undocumented)
|
|
48
|
+
export type BaseProps = Combine<Combine<Omit<React_2.AllHTMLAttributes<HTMLElement>, 'disabled'>, {
|
|
49
|
+
'data-testid'?: never;
|
|
50
|
+
'data-has-overlay'?: never;
|
|
51
|
+
}>, BaseOwnProps>;
|
|
52
|
+
|
|
53
|
+
// @public
|
|
54
|
+
const Button: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLElement>>>;
|
|
55
|
+
export default Button;
|
|
56
|
+
|
|
57
|
+
// @public (undocumented)
|
|
58
|
+
export function ButtonGroup({ appearance, children, }: ButtonGroupProps): jsx.JSX.Element;
|
|
59
|
+
|
|
60
|
+
// @public (undocumented)
|
|
61
|
+
type ButtonGroupProps = {
|
|
62
|
+
appearance?: Appearance;
|
|
63
|
+
children?: React_2.ReactNode;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
// @public (undocumented)
|
|
67
|
+
export interface ButtonProps extends BaseProps {
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// @public (undocumented)
|
|
71
|
+
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
72
|
+
|
|
73
|
+
// @public
|
|
74
|
+
export const CustomThemeButton: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & CustomThemeButtonOwnProps & React_2.RefAttributes<HTMLElement>>>;
|
|
75
|
+
|
|
76
|
+
// @public (undocumented)
|
|
77
|
+
export type CustomThemeButtonOwnProps = {
|
|
78
|
+
isLoading?: boolean;
|
|
79
|
+
theme?: (current: (props: ThemeProps) => ThemeTokens, props: ThemeProps) => ThemeTokens;
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
// @public (undocumented)
|
|
83
|
+
export type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> & CustomThemeButtonOwnProps;
|
|
84
|
+
|
|
85
|
+
// @public (undocumented)
|
|
86
|
+
export type InteractionState = 'active' | 'default' | 'disabled' | 'focus' | 'focusSelected' | 'hover' | 'selected';
|
|
87
|
+
|
|
88
|
+
// @public
|
|
89
|
+
export const LoadingButton: React_2.ForwardRefExoticComponent<Omit<BaseProps, "overlay"> & LoadingButtonOwnProps & React_2.RefAttributes<HTMLElement>>;
|
|
90
|
+
|
|
91
|
+
// @public (undocumented)
|
|
92
|
+
export type LoadingButtonOwnProps = {
|
|
93
|
+
isLoading?: boolean;
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
// @public (undocumented)
|
|
97
|
+
export type LoadingButtonProps = Omit<BaseProps, 'overlay'> & LoadingButtonOwnProps;
|
|
98
|
+
|
|
99
|
+
// @public (undocumented)
|
|
100
|
+
export type Spacing = 'compact' | 'default' | 'none';
|
|
101
|
+
|
|
102
|
+
// @public (undocumented)
|
|
103
|
+
export const Theme: {
|
|
104
|
+
Consumer: ComponentType< {
|
|
105
|
+
children: (tokens: ThemeTokens) => ReactNode;
|
|
106
|
+
} & Partial<CustomThemeButtonProps> & {
|
|
107
|
+
state: InteractionState;
|
|
108
|
+
iconIsOnlyChild?: boolean | undefined;
|
|
109
|
+
mode?: ThemeModes_2 | undefined;
|
|
110
|
+
}>;
|
|
111
|
+
Provider: ComponentType< {
|
|
112
|
+
children?: ReactNode;
|
|
113
|
+
value?: ThemeProp<ThemeTokens, ThemeProps> | undefined;
|
|
114
|
+
}>;
|
|
115
|
+
useTheme: (props: ThemeProps) => ThemeTokens;
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
// @public (undocumented)
|
|
119
|
+
export type ThemeProps = Partial<CustomThemeButtonProps> & {
|
|
120
|
+
state: InteractionState;
|
|
121
|
+
iconIsOnlyChild?: boolean;
|
|
122
|
+
mode?: ThemeModes;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
// @public (undocumented)
|
|
126
|
+
export type ThemeTokens = {
|
|
127
|
+
buttonStyles: CSSObject;
|
|
128
|
+
spinnerStyles: CSSObject;
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
// (No @packageDocumentation comment for this package)
|
|
132
|
+
|
|
133
|
+
```
|