@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.
Files changed (88) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/entry-points/new.js +8 -1
  3. package/dist/cjs/entry-points/unsafe.js +40 -1
  4. package/dist/cjs/new-button/containers/split-button/index.js +50 -0
  5. package/dist/cjs/new-button/containers/split-button/split-button-context.js +37 -0
  6. package/dist/cjs/new-button/containers/split-button/split-button.js +137 -0
  7. package/dist/cjs/new-button/containers/split-button/types.js +5 -0
  8. package/dist/cjs/new-button/containers/split-button/utils.js +23 -0
  9. package/dist/cjs/new-button/variants/shared/use-button-base.js +19 -6
  10. package/dist/cjs/new-button/variants/shared/xcss.js +52 -10
  11. package/dist/cjs/old-button/shared/button-base.js +1 -1
  12. package/dist/es2019/entry-points/new.js +2 -1
  13. package/dist/es2019/entry-points/unsafe.js +4 -1
  14. package/dist/es2019/new-button/containers/split-button/index.js +3 -0
  15. package/dist/es2019/new-button/containers/split-button/split-button-context.js +31 -0
  16. package/dist/es2019/new-button/containers/split-button/split-button.js +129 -0
  17. package/dist/es2019/new-button/containers/split-button/types.js +1 -0
  18. package/dist/es2019/new-button/containers/split-button/utils.js +12 -0
  19. package/dist/es2019/new-button/variants/shared/use-button-base.js +19 -6
  20. package/dist/es2019/new-button/variants/shared/xcss.js +54 -10
  21. package/dist/es2019/old-button/shared/button-base.js +1 -1
  22. package/dist/esm/entry-points/new.js +2 -1
  23. package/dist/esm/entry-points/unsafe.js +4 -1
  24. package/dist/esm/new-button/containers/split-button/index.js +3 -0
  25. package/dist/esm/new-button/containers/split-button/split-button-context.js +31 -0
  26. package/dist/esm/new-button/containers/split-button/split-button.js +131 -0
  27. package/dist/esm/new-button/containers/split-button/types.js +1 -0
  28. package/dist/esm/new-button/containers/split-button/utils.js +16 -0
  29. package/dist/esm/new-button/variants/shared/use-button-base.js +19 -6
  30. package/dist/esm/new-button/variants/shared/xcss.js +51 -10
  31. package/dist/esm/old-button/shared/button-base.js +1 -1
  32. package/dist/types/entry-points/new.d.ts +1 -0
  33. package/dist/types/entry-points/unsafe.d.ts +3 -0
  34. package/dist/types/new-button/containers/split-button/index.d.ts +3 -0
  35. package/dist/types/new-button/containers/split-button/split-button-context.d.ts +47 -0
  36. package/dist/types/new-button/containers/split-button/split-button.d.ts +47 -0
  37. package/dist/types/new-button/containers/split-button/types.d.ts +4 -0
  38. package/dist/types/new-button/containers/split-button/utils.d.ts +5 -0
  39. package/dist/types/new-button/variants/shared/use-button-base.d.ts +1 -1
  40. package/dist/types/new-button/variants/shared/xcss.d.ts +14 -1
  41. package/dist/types/old-button/types.d.ts +2 -2
  42. package/dist/types-ts4.5/containers/button-group.d.ts +12 -0
  43. package/dist/types-ts4.5/entry-points/button-group.d.ts +1 -0
  44. package/dist/types-ts4.5/entry-points/custom-theme-button.d.ts +2 -0
  45. package/dist/types-ts4.5/entry-points/loading-button.d.ts +2 -0
  46. package/dist/types-ts4.5/entry-points/new.d.ts +6 -0
  47. package/dist/types-ts4.5/entry-points/standard-button.d.ts +7 -0
  48. package/dist/types-ts4.5/entry-points/types.d.ts +4 -0
  49. package/dist/types-ts4.5/entry-points/unsafe.d.ts +4 -0
  50. package/dist/types-ts4.5/index.d.ts +8 -0
  51. package/dist/types-ts4.5/new-button/containers/split-button/index.d.ts +3 -0
  52. package/dist/types-ts4.5/new-button/containers/split-button/split-button-context.d.ts +47 -0
  53. package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +47 -0
  54. package/dist/types-ts4.5/new-button/containers/split-button/types.d.ts +4 -0
  55. package/dist/types-ts4.5/new-button/containers/split-button/utils.d.ts +5 -0
  56. package/dist/types-ts4.5/new-button/variants/default/button.d.ts +19 -0
  57. package/dist/types-ts4.5/new-button/variants/default/link.d.ts +17 -0
  58. package/dist/types-ts4.5/new-button/variants/default/types.d.ts +15 -0
  59. package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts +15 -0
  60. package/dist/types-ts4.5/new-button/variants/icon/button.d.ts +17 -0
  61. package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +17 -0
  62. package/dist/types-ts4.5/new-button/variants/icon/types.d.ts +8 -0
  63. package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts +15 -0
  64. package/dist/types-ts4.5/new-button/variants/shared/block-events.d.ts +2 -0
  65. package/dist/types-ts4.5/new-button/variants/shared/colors.d.ts +18 -0
  66. package/dist/types-ts4.5/new-button/variants/shared/content.d.ts +13 -0
  67. package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +37 -0
  68. package/dist/types-ts4.5/new-button/variants/shared/xcss.d.ts +31 -0
  69. package/dist/types-ts4.5/new-button/variants/types.d.ts +69 -0
  70. package/dist/types-ts4.5/old-button/button.d.ts +15 -0
  71. package/dist/types-ts4.5/old-button/custom-theme-button/custom-theme-button-types.d.ts +22 -0
  72. package/dist/types-ts4.5/old-button/custom-theme-button/custom-theme-button.d.ts +10 -0
  73. package/dist/types-ts4.5/old-button/custom-theme-button/index.d.ts +2 -0
  74. package/dist/types-ts4.5/old-button/custom-theme-button/theme.d.ts +21 -0
  75. package/dist/types-ts4.5/old-button/loading-button.d.ts +15 -0
  76. package/dist/types-ts4.5/old-button/shared/block-events.d.ts +4 -0
  77. package/dist/types-ts4.5/old-button/shared/button-base.d.ts +10 -0
  78. package/dist/types-ts4.5/old-button/shared/colors.d.ts +23 -0
  79. package/dist/types-ts4.5/old-button/shared/css.d.ts +22 -0
  80. package/dist/types-ts4.5/old-button/shared/get-if-visually-hidden-children.d.ts +2 -0
  81. package/dist/types-ts4.5/old-button/shared/get-is-only-single-icon.d.ts +2 -0
  82. package/dist/types-ts4.5/old-button/shared/loading-spinner.d.ts +5 -0
  83. package/dist/types-ts4.5/old-button/types.d.ts +94 -0
  84. package/dist/types-ts4.5/utils/appearances.d.ts +3 -0
  85. package/dist/types-ts4.5/utils/spacing.d.ts +3 -0
  86. package/dist/types-ts4.5/utils/variants.d.ts +15 -0
  87. package/package.json +2 -2
  88. package/tmp/api-report-tmp.d.ts +133 -0
@@ -0,0 +1,2 @@
1
+ import { type ControlledEvents } from './use-button-base';
2
+ export default function blockEvents<TagName extends HTMLElement>(shouldBlockEvents: boolean, events: ControlledEvents<TagName>): ControlledEvents<TagName>;
@@ -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,2 @@
1
+ export { default } from './custom-theme-button';
2
+ export { default as Theme } from './theme';
@@ -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,4 @@
1
+ /// <reference types="react" />
2
+ export default function blockEvents({ isInteractive, }: {
3
+ isInteractive: boolean;
4
+ }): React.DOMAttributes<HTMLElement>;
@@ -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,2 @@
1
+ import { type ReactNode } from 'react';
2
+ export declare const getIfVisuallyHiddenChildren: (children: ReactNode) => boolean | "" | 0 | null | undefined;
@@ -0,0 +1,2 @@
1
+ import { BaseProps } from '../types';
2
+ export default function getIsOnlySingleIcon({ children, iconBefore, iconAfter, }: Pick<BaseProps, 'children' | 'iconBefore' | 'iconAfter'>): boolean;
@@ -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,3 @@
1
+ import { type Appearance } from '../new-button/variants/types';
2
+ declare const appearances: Appearance[];
3
+ export default appearances;
@@ -0,0 +1,3 @@
1
+ import { type Spacing } from '../new-button/variants/types';
2
+ declare const spacing: Spacing[];
3
+ export default spacing;
@@ -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.10.2",
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.25.0",
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
+ ```