@atlaskit/button 16.9.2 → 16.9.4

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 (193) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/entry-points/button-group.js +1 -1
  3. package/dist/cjs/entry-points/custom-theme-button.js +1 -1
  4. package/dist/cjs/entry-points/loading-button.js +1 -1
  5. package/dist/cjs/entry-points/new.js +34 -0
  6. package/dist/cjs/entry-points/standard-button.js +1 -1
  7. package/dist/cjs/entry-points/unsafe.js +13 -0
  8. package/dist/cjs/new-button/variants/default/button.js +100 -0
  9. package/dist/cjs/new-button/variants/default/link.js +106 -0
  10. package/dist/cjs/new-button/variants/default/use-default-button.js +90 -0
  11. package/dist/cjs/new-button/variants/icon/button.js +96 -0
  12. package/dist/cjs/new-button/variants/icon/link.js +102 -0
  13. package/dist/cjs/new-button/variants/icon/use-icon-button.js +82 -0
  14. package/dist/cjs/new-button/variants/shared/block-events.js +33 -0
  15. package/dist/cjs/new-button/variants/shared/colors.js +130 -0
  16. package/dist/cjs/new-button/variants/shared/use-button-base.js +140 -0
  17. package/dist/cjs/new-button/variants/shared/xcss.js +191 -0
  18. package/dist/cjs/new-button/variants/types.js +5 -0
  19. package/dist/cjs/old-button/custom-theme-button/custom-theme-button-types.js +5 -0
  20. package/dist/cjs/{custom-theme-button → old-button/custom-theme-button}/custom-theme-button.js +2 -2
  21. package/dist/cjs/{custom-theme-button → old-button/custom-theme-button}/theme.js +2 -2
  22. package/dist/cjs/{shared → old-button/shared}/button-base.js +2 -2
  23. package/dist/cjs/{shared → old-button/shared}/css.js +2 -2
  24. package/dist/cjs/old-button/types.js +5 -0
  25. package/dist/cjs/utils/appearances.js +9 -0
  26. package/dist/cjs/utils/spacing.js +9 -0
  27. package/dist/cjs/utils/variants.js +35 -0
  28. package/dist/es2019/entry-points/button-group.js +1 -1
  29. package/dist/es2019/entry-points/custom-theme-button.js +1 -1
  30. package/dist/es2019/entry-points/loading-button.js +1 -1
  31. package/dist/es2019/entry-points/new.js +4 -0
  32. package/dist/es2019/entry-points/standard-button.js +1 -1
  33. package/dist/es2019/entry-points/unsafe.js +1 -0
  34. package/dist/es2019/new-button/variants/default/button.js +91 -0
  35. package/dist/es2019/new-button/variants/default/link.js +98 -0
  36. package/dist/es2019/new-button/variants/default/use-default-button.js +80 -0
  37. package/dist/es2019/new-button/variants/icon/button.js +87 -0
  38. package/dist/es2019/new-button/variants/icon/link.js +94 -0
  39. package/dist/es2019/new-button/variants/icon/use-icon-button.js +77 -0
  40. package/dist/es2019/new-button/variants/shared/block-events.js +27 -0
  41. package/dist/es2019/new-button/variants/shared/colors.js +120 -0
  42. package/dist/es2019/new-button/variants/shared/use-button-base.js +120 -0
  43. package/dist/es2019/new-button/variants/shared/xcss.js +182 -0
  44. package/dist/es2019/{shared → old-button/shared}/button-base.js +2 -5
  45. package/dist/es2019/old-button/types.js +1 -0
  46. package/dist/es2019/utils/appearances.js +2 -0
  47. package/dist/es2019/utils/spacing.js +2 -0
  48. package/dist/es2019/utils/variants.js +20 -0
  49. package/dist/esm/entry-points/button-group.js +1 -1
  50. package/dist/esm/entry-points/custom-theme-button.js +1 -1
  51. package/dist/esm/entry-points/loading-button.js +1 -1
  52. package/dist/esm/entry-points/new.js +4 -0
  53. package/dist/esm/entry-points/standard-button.js +1 -1
  54. package/dist/esm/entry-points/unsafe.js +1 -0
  55. package/dist/esm/new-button/variants/default/button.js +92 -0
  56. package/dist/esm/new-button/variants/default/link.js +98 -0
  57. package/dist/esm/new-button/variants/default/types.js +1 -0
  58. package/dist/esm/new-button/variants/default/use-default-button.js +79 -0
  59. package/dist/esm/new-button/variants/icon/button.js +88 -0
  60. package/dist/esm/new-button/variants/icon/link.js +94 -0
  61. package/dist/esm/new-button/variants/icon/types.js +1 -0
  62. package/dist/esm/new-button/variants/icon/use-icon-button.js +74 -0
  63. package/dist/esm/new-button/variants/shared/block-events.js +27 -0
  64. package/dist/esm/new-button/variants/shared/colors.js +120 -0
  65. package/dist/esm/new-button/variants/shared/use-button-base.js +131 -0
  66. package/dist/esm/new-button/variants/shared/xcss.js +178 -0
  67. package/dist/esm/new-button/variants/types.js +1 -0
  68. package/dist/esm/old-button/custom-theme-button/custom-theme-button-types.js +1 -0
  69. package/dist/esm/{custom-theme-button → old-button/custom-theme-button}/custom-theme-button.js +2 -2
  70. package/dist/esm/{custom-theme-button → old-button/custom-theme-button}/theme.js +2 -2
  71. package/dist/esm/{shared → old-button/shared}/button-base.js +2 -2
  72. package/dist/esm/{shared → old-button/shared}/css.js +2 -2
  73. package/dist/esm/old-button/types.js +1 -0
  74. package/dist/esm/utils/appearances.js +2 -0
  75. package/dist/esm/utils/spacing.js +2 -0
  76. package/dist/esm/utils/variants.js +22 -0
  77. package/dist/types/{button-group.d.ts → containers/button-group.d.ts} +1 -1
  78. package/dist/types/entry-points/button-group.d.ts +1 -1
  79. package/dist/types/entry-points/custom-theme-button.d.ts +2 -2
  80. package/dist/types/entry-points/loading-button.d.ts +2 -2
  81. package/dist/types/entry-points/new.d.ts +5 -0
  82. package/dist/types/entry-points/standard-button.d.ts +2 -2
  83. package/dist/types/entry-points/types.d.ts +1 -1
  84. package/dist/types/entry-points/unsafe.d.ts +1 -0
  85. package/dist/types/new-button/variants/default/button.d.ts +19 -0
  86. package/dist/types/new-button/variants/default/link.d.ts +17 -0
  87. package/dist/types/new-button/variants/default/types.d.ts +15 -0
  88. package/dist/types/new-button/variants/default/use-default-button.d.ts +15 -0
  89. package/dist/types/new-button/variants/icon/button.d.ts +17 -0
  90. package/dist/types/new-button/variants/icon/link.d.ts +17 -0
  91. package/dist/types/new-button/variants/icon/types.d.ts +8 -0
  92. package/dist/types/new-button/variants/icon/use-icon-button.d.ts +15 -0
  93. package/dist/types/new-button/variants/shared/block-events.d.ts +2 -0
  94. package/dist/types/new-button/variants/shared/colors.d.ts +18 -0
  95. package/dist/types/new-button/variants/shared/use-button-base.d.ts +37 -0
  96. package/dist/types/new-button/variants/shared/xcss.d.ts +24 -0
  97. package/dist/types/new-button/variants/types.d.ts +69 -0
  98. package/dist/{types-ts4.5 → types/old-button}/custom-theme-button/custom-theme-button.d.ts +1 -1
  99. package/dist/types/utils/appearances.d.ts +3 -0
  100. package/dist/types/utils/spacing.d.ts +3 -0
  101. package/dist/types/utils/variants.d.ts +15 -0
  102. package/dist/types-ts4.5/{button-group.d.ts → containers/button-group.d.ts} +1 -1
  103. package/dist/types-ts4.5/entry-points/button-group.d.ts +1 -1
  104. package/dist/types-ts4.5/entry-points/custom-theme-button.d.ts +2 -2
  105. package/dist/types-ts4.5/entry-points/loading-button.d.ts +2 -2
  106. package/dist/types-ts4.5/entry-points/new.d.ts +5 -0
  107. package/dist/types-ts4.5/entry-points/standard-button.d.ts +2 -2
  108. package/dist/types-ts4.5/entry-points/types.d.ts +1 -1
  109. package/dist/types-ts4.5/entry-points/unsafe.d.ts +1 -0
  110. package/dist/types-ts4.5/new-button/variants/default/button.d.ts +19 -0
  111. package/dist/types-ts4.5/new-button/variants/default/link.d.ts +17 -0
  112. package/dist/types-ts4.5/new-button/variants/default/types.d.ts +15 -0
  113. package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts +15 -0
  114. package/dist/types-ts4.5/new-button/variants/icon/button.d.ts +17 -0
  115. package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +17 -0
  116. package/dist/types-ts4.5/new-button/variants/icon/types.d.ts +8 -0
  117. package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts +15 -0
  118. package/dist/types-ts4.5/new-button/variants/shared/block-events.d.ts +2 -0
  119. package/dist/types-ts4.5/new-button/variants/shared/colors.d.ts +18 -0
  120. package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +37 -0
  121. package/dist/types-ts4.5/new-button/variants/shared/xcss.d.ts +24 -0
  122. package/dist/types-ts4.5/new-button/variants/types.d.ts +69 -0
  123. package/dist/{types → types-ts4.5/old-button}/custom-theme-button/custom-theme-button.d.ts +1 -1
  124. package/dist/types-ts4.5/utils/appearances.d.ts +3 -0
  125. package/dist/types-ts4.5/utils/spacing.d.ts +3 -0
  126. package/dist/types-ts4.5/utils/variants.d.ts +15 -0
  127. package/extract-react-types/custom-theme-button-props.tsx +1 -1
  128. package/extract-react-types/loading-button-props.tsx +1 -1
  129. package/extract-react-types/shared-props.tsx +1 -1
  130. package/package.json +9 -6
  131. package/unsafe/package.json +15 -0
  132. /package/dist/cjs/{button-group.js → containers/button-group.js} +0 -0
  133. /package/dist/cjs/{types.js → new-button/variants/default/types.js} +0 -0
  134. /package/dist/cjs/{custom-theme-button/custom-theme-button-types.js → new-button/variants/icon/types.js} +0 -0
  135. /package/dist/cjs/{button.js → old-button/button.js} +0 -0
  136. /package/dist/cjs/{custom-theme-button → old-button/custom-theme-button}/index.js +0 -0
  137. /package/dist/cjs/{loading-button.js → old-button/loading-button.js} +0 -0
  138. /package/dist/cjs/{shared → old-button/shared}/block-events.js +0 -0
  139. /package/dist/cjs/{shared → old-button/shared}/colors.js +0 -0
  140. /package/dist/cjs/{shared → old-button/shared}/get-if-visually-hidden-children.js +0 -0
  141. /package/dist/cjs/{shared → old-button/shared}/get-is-only-single-icon.js +0 -0
  142. /package/dist/cjs/{shared → old-button/shared}/loading-spinner.js +0 -0
  143. /package/dist/es2019/{button-group.js → containers/button-group.js} +0 -0
  144. /package/dist/es2019/{types.js → new-button/variants/default/types.js} +0 -0
  145. /package/dist/{esm → es2019/new-button/variants/icon}/types.js +0 -0
  146. /package/dist/es2019/{custom-theme-button/custom-theme-button-types.js → new-button/variants/types.js} +0 -0
  147. /package/dist/es2019/{button.js → old-button/button.js} +0 -0
  148. /package/dist/{esm → es2019/old-button}/custom-theme-button/custom-theme-button-types.js +0 -0
  149. /package/dist/es2019/{custom-theme-button → old-button/custom-theme-button}/custom-theme-button.js +0 -0
  150. /package/dist/es2019/{custom-theme-button → old-button/custom-theme-button}/index.js +0 -0
  151. /package/dist/es2019/{custom-theme-button → old-button/custom-theme-button}/theme.js +0 -0
  152. /package/dist/es2019/{loading-button.js → old-button/loading-button.js} +0 -0
  153. /package/dist/es2019/{shared → old-button/shared}/block-events.js +0 -0
  154. /package/dist/es2019/{shared → old-button/shared}/colors.js +0 -0
  155. /package/dist/es2019/{shared → old-button/shared}/css.js +0 -0
  156. /package/dist/es2019/{shared → old-button/shared}/get-if-visually-hidden-children.js +0 -0
  157. /package/dist/es2019/{shared → old-button/shared}/get-is-only-single-icon.js +0 -0
  158. /package/dist/es2019/{shared → old-button/shared}/loading-spinner.js +0 -0
  159. /package/dist/esm/{button-group.js → containers/button-group.js} +0 -0
  160. /package/dist/esm/{button.js → old-button/button.js} +0 -0
  161. /package/dist/esm/{custom-theme-button → old-button/custom-theme-button}/index.js +0 -0
  162. /package/dist/esm/{loading-button.js → old-button/loading-button.js} +0 -0
  163. /package/dist/esm/{shared → old-button/shared}/block-events.js +0 -0
  164. /package/dist/esm/{shared → old-button/shared}/colors.js +0 -0
  165. /package/dist/esm/{shared → old-button/shared}/get-if-visually-hidden-children.js +0 -0
  166. /package/dist/esm/{shared → old-button/shared}/get-is-only-single-icon.js +0 -0
  167. /package/dist/esm/{shared → old-button/shared}/loading-spinner.js +0 -0
  168. /package/dist/types/{button.d.ts → old-button/button.d.ts} +0 -0
  169. /package/dist/types/{custom-theme-button → old-button/custom-theme-button}/custom-theme-button-types.d.ts +0 -0
  170. /package/dist/types/{custom-theme-button → old-button/custom-theme-button}/index.d.ts +0 -0
  171. /package/dist/types/{custom-theme-button → old-button/custom-theme-button}/theme.d.ts +0 -0
  172. /package/dist/types/{loading-button.d.ts → old-button/loading-button.d.ts} +0 -0
  173. /package/dist/types/{shared → old-button/shared}/block-events.d.ts +0 -0
  174. /package/dist/types/{shared → old-button/shared}/button-base.d.ts +0 -0
  175. /package/dist/types/{shared → old-button/shared}/colors.d.ts +0 -0
  176. /package/dist/types/{shared → old-button/shared}/css.d.ts +0 -0
  177. /package/dist/types/{shared → old-button/shared}/get-if-visually-hidden-children.d.ts +0 -0
  178. /package/dist/types/{shared → old-button/shared}/get-is-only-single-icon.d.ts +0 -0
  179. /package/dist/types/{shared → old-button/shared}/loading-spinner.d.ts +0 -0
  180. /package/dist/types/{types.d.ts → old-button/types.d.ts} +0 -0
  181. /package/dist/types-ts4.5/{button.d.ts → old-button/button.d.ts} +0 -0
  182. /package/dist/types-ts4.5/{custom-theme-button → old-button/custom-theme-button}/custom-theme-button-types.d.ts +0 -0
  183. /package/dist/types-ts4.5/{custom-theme-button → old-button/custom-theme-button}/index.d.ts +0 -0
  184. /package/dist/types-ts4.5/{custom-theme-button → old-button/custom-theme-button}/theme.d.ts +0 -0
  185. /package/dist/types-ts4.5/{loading-button.d.ts → old-button/loading-button.d.ts} +0 -0
  186. /package/dist/types-ts4.5/{shared → old-button/shared}/block-events.d.ts +0 -0
  187. /package/dist/types-ts4.5/{shared → old-button/shared}/button-base.d.ts +0 -0
  188. /package/dist/types-ts4.5/{shared → old-button/shared}/colors.d.ts +0 -0
  189. /package/dist/types-ts4.5/{shared → old-button/shared}/css.d.ts +0 -0
  190. /package/dist/types-ts4.5/{shared → old-button/shared}/get-if-visually-hidden-children.d.ts +0 -0
  191. /package/dist/types-ts4.5/{shared → old-button/shared}/get-is-only-single-icon.d.ts +0 -0
  192. /package/dist/types-ts4.5/{shared → old-button/shared}/loading-spinner.d.ts +0 -0
  193. /package/dist/types-ts4.5/{types.d.ts → old-button/types.d.ts} +0 -0
@@ -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, autoFocus, buttonType, interactionName, isDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
37
+ export default useButtonBase;
@@ -0,0 +1,24 @@
1
+ import { xcss } from '@atlaskit/primitives';
2
+ import { type Appearance, type Spacing } from '../types';
3
+ export type GetXCSSArgs = {
4
+ appearance: Appearance;
5
+ spacing: Spacing;
6
+ isDisabled: boolean;
7
+ isSelected: boolean;
8
+ shouldFitContainer: boolean;
9
+ hasOverlay: boolean;
10
+ isIconButton: boolean;
11
+ hasIconBefore: boolean;
12
+ hasIconAfter: boolean;
13
+ /**
14
+ * If the button is a LinkButton
15
+ */
16
+ isLink: boolean;
17
+ };
18
+ export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, isLink, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
19
+ export declare const iconStyles: ReturnType<typeof xcss>;
20
+ export declare const contentStyles: ReturnType<typeof xcss>;
21
+ export declare function getFadingStyles({ hasOverlay, }: {
22
+ hasOverlay: boolean;
23
+ }): ReturnType<typeof xcss>;
24
+ export declare const overlayStyles: 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 {};
@@ -6,5 +6,5 @@ import React from 'react';
6
6
  *
7
7
  * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
8
8
  */
9
- declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("..").BaseProps, "overlay"> & import("./custom-theme-button-types").CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
9
+ declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../types").BaseProps, "overlay"> & import("./custom-theme-button-types").CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
10
10
  export default CustomThemeButton;
@@ -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;
@@ -1,7 +1,7 @@
1
1
  /** @jsx jsx */
2
2
  import React from 'react';
3
3
  import { jsx } from '@emotion/react';
4
- import { Appearance } from './types';
4
+ import { Appearance } from '../old-button/types';
5
5
  export type ButtonGroupProps = {
6
6
  /**
7
7
  * The appearance to apply to all buttons.
@@ -1 +1 @@
1
- export { default } from '../button-group';
1
+ export { default } from '../containers/button-group';
@@ -1,2 +1,2 @@
1
- export { default, Theme } from '../custom-theme-button';
2
- export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from '../custom-theme-button/custom-theme-button-types';
1
+ export { default, Theme } from '../old-button/custom-theme-button';
2
+ export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from '../old-button/custom-theme-button/custom-theme-button-types';
@@ -1,2 +1,2 @@
1
- export { default } from '../loading-button';
2
- export type { LoadingButtonProps, LoadingButtonOwnProps, } from '../loading-button';
1
+ export { default } from '../old-button/loading-button';
2
+ export type { LoadingButtonProps, LoadingButtonOwnProps, } from '../old-button/loading-button';
@@ -0,0 +1,5 @@
1
+ export { default, type ButtonProps, } from '../new-button/variants/default/button';
2
+ export { default as LinkButton, type LinkButtonProps, } from '../new-button/variants/default/link';
3
+ export { default as IconButton, type IconButtonProps, } from '../new-button/variants/icon/button';
4
+ export { default as LinkIconButton, type LinkIconButtonProps, } from '../new-button/variants/icon/link';
5
+ export type { Appearance, Spacing } from '../new-button/variants/types';
@@ -3,5 +3,5 @@
3
3
  * https://product-fabric.atlassian.net/browse/DSP-3222
4
4
  */
5
5
  import '@emotion/react';
6
- export { default } from '../button';
7
- export type { ButtonProps } from '../button';
6
+ export { default } from '../old-button/button';
7
+ export type { ButtonProps } from '../old-button/button';
@@ -1,4 +1,4 @@
1
- export type { Appearance, Spacing, BaseOwnProps, BaseProps } from '../types';
1
+ export type { Appearance, Spacing, BaseOwnProps, BaseProps, } from '../old-button/types';
2
2
  export type { ButtonProps } from './standard-button';
3
3
  export type { LoadingButtonProps, LoadingButtonOwnProps, } from './loading-button';
4
4
  export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from './custom-theme-button';
@@ -0,0 +1 @@
1
+ export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
3
+ import { type CommonDefaultButtonProps } from './types';
4
+ type Element = HTMLButtonElement;
5
+ type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<Element>>;
6
+ export type ButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
7
+ /**
8
+ * __Button__
9
+ *
10
+ * @warning __UNSAFE__ Button is not yet safe for production use.
11
+ *
12
+ * A button triggers an event or action.
13
+ *
14
+ * - [Examples](https://atlassian.design/components/button/examples)
15
+ * - [Code](https://atlassian.design/components/button/code)
16
+ * - [Usage](https://atlassian.design/components/button/usage)
17
+ */
18
+ declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
19
+ export default Button;
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
3
+ import { type CommonDefaultButtonProps } from './types';
4
+ type Element = HTMLAnchorElement;
5
+ type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.AnchorHTMLAttributes<Element>>;
6
+ export type LinkButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
7
+ /**
8
+ * __Link Button__
9
+ *
10
+ * A link button renders a link in the style of a button.
11
+ *
12
+ * - [Examples](https://atlassian.design/components/button/examples)
13
+ * - [Code](https://atlassian.design/components/button/code)
14
+ * - [Usage](https://atlassian.design/components/button/usage)
15
+ */
16
+ declare const LinkButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>>;
17
+ export default LinkButton;
@@ -0,0 +1,15 @@
1
+ /// <reference types="react" />
2
+ export type CommonDefaultButtonProps = {
3
+ /**
4
+ * Places an icon within the button, after the button's text
5
+ */
6
+ iconAfter?: React.ReactChild;
7
+ /**
8
+ * Places an icon within the button, before the button's text
9
+ */
10
+ iconBefore?: React.ReactChild;
11
+ /**
12
+ * Option to fit button width to its parent width
13
+ */
14
+ shouldFitContainer?: boolean;
15
+ };
@@ -0,0 +1,15 @@
1
+ import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
2
+ import { type CommonDefaultButtonProps } from './types';
3
+ type UseDefaultButtonArgs<TagName extends HTMLElement> = UseButtonBaseArgs<TagName> & CommonDefaultButtonProps;
4
+ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
5
+ /**
6
+ * __Use default button base__
7
+ *
8
+ * A React hook that accepts a set of default Button props,
9
+ * and processes them to return consistent base props for usage
10
+ * across Button and LinkButton variants.
11
+ *
12
+ * @private
13
+ */
14
+ declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore, iconAfter, interactionName, isDisabled, isSelected, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
15
+ export default useDefaultButton;
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
3
+ import { type CommonIconButtonProps } from './types';
4
+ type Element = HTMLButtonElement;
5
+ type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<Element>>;
6
+ export type IconButtonProps = CommonIconButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
7
+ /**
8
+ * __Icon Button__
9
+ *
10
+ * TODO: Description
11
+ *
12
+ * - [Examples](https://atlassian.design/components/button/examples)
13
+ * - [Code](https://atlassian.design/components/button/code)
14
+ * - [Usage](https://atlassian.design/components/button/usage)
15
+ */
16
+ declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
17
+ export default IconButton;
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
3
+ import { type CommonIconButtonProps } from './types';
4
+ type Element = HTMLAnchorElement;
5
+ type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.AnchorHTMLAttributes<Element>>;
6
+ export type LinkIconButtonProps = CommonIconButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
7
+ /**
8
+ * __Link Button__
9
+ *
10
+ * A link button renders a link in the style of a button.
11
+ *
12
+ * - [Examples](https://atlassian.design/components/button/examples)
13
+ * - [Code](https://atlassian.design/components/button/code)
14
+ * - [Usage](https://atlassian.design/components/button/usage)
15
+ */
16
+ declare const LinkIconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>>;
17
+ export default LinkIconButton;
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export type CommonIconButtonProps = {
3
+ /**
4
+ * TODO: Consider locking-down icon props by converting from slot props to component props
5
+ * Places an icon within the button, after the button's text
6
+ */
7
+ icon: React.ReactChild;
8
+ };
@@ -0,0 +1,15 @@
1
+ import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
2
+ import { type CommonIconButtonProps } from './types';
3
+ type UseIconButtonArgs<TagName extends HTMLElement> = UseButtonBaseArgs<TagName> & CommonIconButtonProps;
4
+ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
5
+ /**
6
+ * __Use icon button__
7
+ *
8
+ * A React hook that accepts a set of icon Button props,
9
+ * and processes them to return consistent base props for usage
10
+ * across IconButton and LinkIconButton variants.
11
+ *
12
+ * @private
13
+ */
14
+ declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon, interactionName, isDisabled, isSelected, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
15
+ export default useIconButton;
@@ -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,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, autoFocus, buttonType, interactionName, isDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
37
+ export default useButtonBase;
@@ -0,0 +1,24 @@
1
+ import { xcss } from '@atlaskit/primitives';
2
+ import { type Appearance, type Spacing } from '../types';
3
+ export type GetXCSSArgs = {
4
+ appearance: Appearance;
5
+ spacing: Spacing;
6
+ isDisabled: boolean;
7
+ isSelected: boolean;
8
+ shouldFitContainer: boolean;
9
+ hasOverlay: boolean;
10
+ isIconButton: boolean;
11
+ hasIconBefore: boolean;
12
+ hasIconAfter: boolean;
13
+ /**
14
+ * If the button is a LinkButton
15
+ */
16
+ isLink: boolean;
17
+ };
18
+ export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, isLink, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
19
+ export declare const iconStyles: ReturnType<typeof xcss>;
20
+ export declare const contentStyles: ReturnType<typeof xcss>;
21
+ export declare function getFadingStyles({ hasOverlay, }: {
22
+ hasOverlay: boolean;
23
+ }): ReturnType<typeof xcss>;
24
+ export declare const overlayStyles: 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 {};
@@ -6,5 +6,5 @@ import React from 'react';
6
6
  *
7
7
  * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
8
8
  */
9
- declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("..").BaseProps, "overlay"> & import("./custom-theme-button-types").CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
9
+ declare const CustomThemeButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../types").BaseProps, "overlay"> & import("./custom-theme-button-types").CustomThemeButtonOwnProps & React.RefAttributes<HTMLElement>>>;
10
10
  export default CustomThemeButton;
@@ -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;
@@ -1,4 +1,4 @@
1
- import { CustomThemeButtonOwnProps } from '../src/custom-theme-button/custom-theme-button-types';
1
+ import { CustomThemeButtonOwnProps } from '../src/old-button/custom-theme-button/custom-theme-button-types';
2
2
 
3
3
  export default function CustomThemeButtonProps(
4
4
  props: CustomThemeButtonOwnProps,
@@ -1,4 +1,4 @@
1
- import { LoadingButtonOwnProps } from '../src/loading-button';
1
+ import { LoadingButtonOwnProps } from '../src/old-button/loading-button';
2
2
 
3
3
  export default function LoadingButtonProps(props: LoadingButtonOwnProps) {
4
4
  return null;
@@ -1,4 +1,4 @@
1
- import { BaseOwnProps } from '../src/types';
1
+ import { BaseOwnProps } from '../src/old-button/types';
2
2
 
3
3
  export default function SharedProps(props: BaseOwnProps) {
4
4
  return null;