@atlaskit/button 21.1.4 → 21.1.6
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 +15 -0
- package/dist/cjs/new-button/containers/split-button/split-button.compiled.css +34 -0
- package/dist/cjs/new-button/containers/split-button/split-button.js +58 -118
- package/dist/cjs/new-button/variants/default/button.js +36 -41
- package/dist/cjs/new-button/variants/default/link.compiled.css +119 -0
- package/dist/cjs/new-button/variants/default/link.js +111 -59
- package/dist/cjs/new-button/variants/icon/button.js +128 -143
- package/dist/cjs/new-button/variants/icon/link.compiled.css +104 -0
- package/dist/cjs/new-button/variants/icon/link.js +101 -75
- package/dist/cjs/new-button/variants/shared/button-base.compiled.css +137 -0
- package/dist/cjs/new-button/variants/shared/button-base.js +223 -0
- package/dist/cjs/new-button/variants/shared/content.compiled.css +19 -0
- package/dist/cjs/new-button/variants/shared/content.js +13 -53
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/new-button/containers/split-button/split-button.compiled.css +34 -0
- package/dist/es2019/new-button/containers/split-button/split-button.js +54 -117
- package/dist/es2019/new-button/variants/default/button.js +47 -56
- package/dist/es2019/new-button/variants/default/link.compiled.css +119 -0
- package/dist/es2019/new-button/variants/default/link.js +113 -63
- package/dist/es2019/new-button/variants/icon/button.js +117 -133
- package/dist/es2019/new-button/variants/icon/link.compiled.css +104 -0
- package/dist/es2019/new-button/variants/icon/link.js +94 -70
- package/dist/es2019/new-button/variants/shared/button-base.compiled.css +137 -0
- package/dist/es2019/new-button/variants/shared/button-base.js +203 -0
- package/dist/es2019/new-button/variants/shared/content.compiled.css +19 -0
- package/dist/es2019/new-button/variants/shared/content.js +13 -52
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/new-button/containers/split-button/split-button.compiled.css +34 -0
- package/dist/esm/new-button/containers/split-button/split-button.js +55 -120
- package/dist/esm/new-button/variants/default/button.js +33 -41
- package/dist/esm/new-button/variants/default/link.compiled.css +119 -0
- package/dist/esm/new-button/variants/default/link.js +111 -59
- package/dist/esm/new-button/variants/icon/button.js +128 -143
- package/dist/esm/new-button/variants/icon/link.compiled.css +104 -0
- package/dist/esm/new-button/variants/icon/link.js +98 -72
- package/dist/esm/new-button/variants/shared/button-base.compiled.css +137 -0
- package/dist/esm/new-button/variants/shared/button-base.js +213 -0
- package/dist/esm/new-button/variants/shared/content.compiled.css +19 -0
- package/dist/esm/new-button/variants/shared/content.js +13 -53
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/types/new-button/containers/split-button/split-button.d.ts +4 -5
- package/dist/types/new-button/variants/default/button.d.ts +5 -1
- package/dist/types/new-button/variants/default/link.d.ts +22 -8
- package/dist/types/new-button/variants/icon/button.d.ts +5 -1
- package/dist/types/new-button/variants/icon/link.d.ts +11 -4
- package/dist/types/new-button/variants/shared/block-events.d.ts +1 -1
- package/dist/types/new-button/variants/shared/button-base.d.ts +45 -0
- package/dist/types/new-button/variants/shared/content.d.ts +5 -1
- package/dist/types/new-button/variants/types.d.ts +26 -6
- package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +4 -5
- package/dist/types-ts4.5/new-button/variants/default/button.d.ts +5 -1
- package/dist/types-ts4.5/new-button/variants/default/link.d.ts +22 -8
- package/dist/types-ts4.5/new-button/variants/icon/button.d.ts +5 -1
- package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +11 -4
- package/dist/types-ts4.5/new-button/variants/shared/block-events.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/shared/button-base.d.ts +45 -0
- package/dist/types-ts4.5/new-button/variants/shared/content.d.ts +5 -1
- package/dist/types-ts4.5/new-button/variants/types.d.ts +26 -6
- package/package.json +17 -15
- package/dist/cjs/new-button/variants/default/use-default-button.js +0 -98
- package/dist/cjs/new-button/variants/icon/use-icon-button.js +0 -88
- package/dist/cjs/new-button/variants/shared/use-button-base.js +0 -639
- package/dist/es2019/new-button/variants/default/use-default-button.js +0 -88
- package/dist/es2019/new-button/variants/icon/use-icon-button.js +0 -81
- package/dist/es2019/new-button/variants/shared/use-button-base.js +0 -619
- package/dist/esm/new-button/variants/default/use-default-button.js +0 -88
- package/dist/esm/new-button/variants/icon/use-icon-button.js +0 -81
- package/dist/esm/new-button/variants/shared/use-button-base.js +0 -629
- package/dist/types/new-button/variants/default/use-default-button.d.ts +0 -16
- package/dist/types/new-button/variants/icon/use-icon-button.d.ts +0 -16
- package/dist/types/new-button/variants/shared/use-button-base.d.ts +0 -46
- package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts +0 -16
- package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts +0 -16
- package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +0 -46
|
@@ -1,54 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
/* content.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import "./content.compiled.css";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
2
4
|
import React from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
whiteSpace: 'nowrap'
|
|
12
|
-
});
|
|
13
|
-
var iconStyles = xcss({
|
|
14
|
-
display: 'flex',
|
|
15
|
-
// icon size cannot grow and shrink
|
|
16
|
-
flexGrow: 0,
|
|
17
|
-
flexShrink: 0,
|
|
18
|
-
alignSelf: 'center',
|
|
19
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
20
|
-
fontSize: 0,
|
|
21
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
22
|
-
lineHeight: 0,
|
|
23
|
-
userSelect: 'none'
|
|
24
|
-
});
|
|
25
|
-
var commonStyles = xcss({
|
|
26
|
-
transition: 'opacity 0.3s'
|
|
27
|
-
});
|
|
28
|
-
var fadeStyles = xcss({
|
|
29
|
-
opacity: 0
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* These CSS variables consumed by the new icons, to allow them to have appropriate
|
|
34
|
-
* padding inside Button while also maintaining spacing for the existing icons.
|
|
35
|
-
*
|
|
36
|
-
* These styles can be removed once the new icons are fully rolled out, feature flag
|
|
37
|
-
* platform-visual-refresh-icons is cleaned up,
|
|
38
|
-
* and we bump Button to set padding based on the new icons.
|
|
39
|
-
*/
|
|
40
|
-
var beforeIconStyles = xcss({
|
|
41
|
-
// @ts-ignore
|
|
42
|
-
'--ds--button--new-icon-padding-start': "var(--ds-space-050, 4px)",
|
|
43
|
-
// @ts-ignore
|
|
44
|
-
'--ds--button--new-icon-padding-end': "var(--ds-space-025, 2px)"
|
|
45
|
-
});
|
|
46
|
-
var afterIconStyles = xcss({
|
|
47
|
-
// @ts-ignore
|
|
48
|
-
'--ds--button--new-icon-padding-start': "var(--ds-space-025, 2px)",
|
|
49
|
-
// @ts-ignore
|
|
50
|
-
'--ds--button--new-icon-padding-end': "var(--ds-space-050, 4px)"
|
|
51
|
-
});
|
|
5
|
+
var styles = {
|
|
6
|
+
text: "_1reo15vq _18m915vq _16jlkb7n _1o9zkb7n _1bto1l2s _o5721q9c",
|
|
7
|
+
icon: "_1e0c1txw _16jlidpf _1o9zidpf _1wpz1h6o _1wybidpf _vwz4idpf _uiztglyw",
|
|
8
|
+
beforeIcon: "_1he91b66 _w795v77o",
|
|
9
|
+
afterIcon: "_1he9v77o _w7951b66",
|
|
10
|
+
common: "_v564g17y",
|
|
11
|
+
fade: "_tzy4idpf"
|
|
12
|
+
};
|
|
52
13
|
/**
|
|
53
14
|
* __Content__
|
|
54
15
|
*
|
|
@@ -60,9 +21,8 @@ var Content = function Content(_ref) {
|
|
|
60
21
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
|
61
22
|
isLoading = _ref.isLoading,
|
|
62
23
|
position = _ref.position;
|
|
63
|
-
return /*#__PURE__*/React.createElement(
|
|
64
|
-
|
|
65
|
-
xcss: [commonStyles].concat(_toConsumableArray(type === 'text' ? [textStyles] : [iconStyles]), _toConsumableArray(isLoading ? [fadeStyles] : []), _toConsumableArray(position === 'before' ? [beforeIconStyles] : []), _toConsumableArray(position === 'after' ? [afterIconStyles] : []))
|
|
24
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
25
|
+
className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade, position === 'before' && styles.beforeIcon, position === 'after' && styles.afterIcon])
|
|
66
26
|
}, children);
|
|
67
27
|
};
|
|
68
28
|
export default Content;
|
|
@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
|
|
|
125
125
|
action: 'clicked',
|
|
126
126
|
componentName: 'button',
|
|
127
127
|
packageName: "@atlaskit/button",
|
|
128
|
-
packageVersion: "21.1.
|
|
128
|
+
packageVersion: "21.1.6",
|
|
129
129
|
analyticsData: analyticsContext
|
|
130
130
|
});
|
|
131
131
|
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
import { type ReactNode } from 'react';
|
|
6
|
-
import { jsx } from '@emotion/react';
|
|
7
6
|
import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonProps, SplitButtonSpacing } from './types';
|
|
8
7
|
type DividerProps = {
|
|
9
8
|
appearance: SplitButtonContextAppearance;
|
|
@@ -13,7 +12,7 @@ type DividerProps = {
|
|
|
13
12
|
/**
|
|
14
13
|
* TODO: Add JSDoc
|
|
15
14
|
*/
|
|
16
|
-
export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps) =>
|
|
15
|
+
export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps) => JSX.Element;
|
|
17
16
|
/**
|
|
18
17
|
* TODO: Add JSdoc
|
|
19
18
|
*/
|
|
@@ -21,7 +20,7 @@ export declare const SplitButtonContainer: ({ appearance, children, isDisabled,
|
|
|
21
20
|
appearance: SplitButtonAppearance;
|
|
22
21
|
children: ReactNode;
|
|
23
22
|
isDisabled?: boolean | undefined;
|
|
24
|
-
}) =>
|
|
23
|
+
}) => JSX.Element;
|
|
25
24
|
/**
|
|
26
25
|
* __Split Button__
|
|
27
26
|
*
|
|
@@ -31,7 +30,7 @@ export declare const SplitButtonContainer: ({ appearance, children, isDisabled,
|
|
|
31
30
|
* - [Code](https://atlassian.design/components/button/split-button/code)
|
|
32
31
|
* - [Usage](https://atlassian.design/components/button/split-button/usage)
|
|
33
32
|
*/
|
|
34
|
-
export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) =>
|
|
33
|
+
export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => JSX.Element;
|
|
35
34
|
type SplitButtonWithSlotsProps = {
|
|
36
35
|
primaryAction: ReactNode;
|
|
37
36
|
secondaryAction: ReactNode;
|
|
@@ -48,5 +47,5 @@ type SplitButtonWithSlotsProps = {
|
|
|
48
47
|
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
49
48
|
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
50
49
|
*/
|
|
51
|
-
export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) =>
|
|
50
|
+
export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => JSX.Element;
|
|
52
51
|
export {};
|
|
@@ -13,5 +13,9 @@ export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
|
|
|
13
13
|
*/
|
|
14
14
|
declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
|
|
15
15
|
'data-testid'?: undefined;
|
|
16
|
-
}, keyof import("../types").
|
|
16
|
+
}, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
|
|
17
|
+
onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
18
|
+
onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
19
|
+
onClick?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
|
|
20
|
+
} & React.RefAttributes<HTMLButtonElement>>>;
|
|
17
21
|
export default Button;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
import { type
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
|
|
3
|
+
import type { AdditionalDefaultLinkVariantProps, CommonLinkVariantProps } from '../types';
|
|
4
|
+
import type { CommonDefaultButtonProps } from './types';
|
|
5
|
+
export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps & {
|
|
6
|
+
xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
|
|
7
|
+
};
|
|
6
8
|
/**
|
|
7
9
|
* __Link Button__
|
|
8
10
|
*
|
|
@@ -12,7 +14,19 @@ declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = ne
|
|
|
12
14
|
* - [Code](https://atlassian.design/components/link-button/code)
|
|
13
15
|
* - [Usage](https://atlassian.design/components/link-button/usage)
|
|
14
16
|
*/
|
|
15
|
-
declare const
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, spacing, testId, xcss, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: React.Ref<HTMLAnchorElement>) => JSX.Element;
|
|
18
|
+
/**
|
|
19
|
+
* __Link Button__
|
|
20
|
+
*
|
|
21
|
+
* Renders a link in the style of a button.
|
|
22
|
+
*
|
|
23
|
+
* - [Examples](https://atlassian.design/components/link-button/examples)
|
|
24
|
+
* - [Code](https://atlassian.design/components/link-button/code)
|
|
25
|
+
* - [Usage](https://atlassian.design/components/link-button/usage)
|
|
26
|
+
*/
|
|
27
|
+
declare const LinkButton: (<RouterLinkConfig extends Record<string, any> = never>(props: LinkButtonProps<RouterLinkConfig> & {
|
|
28
|
+
ref?: React.Ref<HTMLAnchorElement>;
|
|
29
|
+
}) => ReturnType<typeof LinkButtonBase>) & {
|
|
30
|
+
displayName?: string | undefined;
|
|
31
|
+
};
|
|
18
32
|
export default LinkButton;
|
|
@@ -13,5 +13,9 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
|
|
|
13
13
|
*/
|
|
14
14
|
declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
|
|
15
15
|
'data-testid'?: undefined;
|
|
16
|
-
}, keyof import("../types").
|
|
16
|
+
}, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
|
|
17
|
+
onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
18
|
+
onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
19
|
+
onClick?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
|
|
20
|
+
} & React.RefAttributes<HTMLButtonElement>>>;
|
|
17
21
|
export default IconButton;
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type Ref } from 'react';
|
|
6
|
+
import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
|
|
7
|
+
import { CommonAnchorProps, type CommonLinkVariantProps } from '../types';
|
|
3
8
|
import { type CommonIconButtonProps } from './types';
|
|
4
|
-
export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig
|
|
5
|
-
|
|
9
|
+
export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig> & CommonAnchorProps<RouterLinkConfig> & {
|
|
10
|
+
xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
|
|
11
|
+
};
|
|
12
|
+
declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, xcss, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
|
|
6
13
|
/**
|
|
7
14
|
* __Link Icon Button__
|
|
8
15
|
*
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { type ControlledEvents } from './
|
|
1
|
+
import { type ControlledEvents } from './button-base';
|
|
2
2
|
export default function blockEvents<TagName extends HTMLElement>(shouldBlockEvents: boolean, events: ControlledEvents<TagName>): ControlledEvents<TagName>;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
7
|
+
import { type Appearance, type CommonBaseProps, type CommonButtonProps, type Spacing } from '../types';
|
|
8
|
+
export type ControlledEvents<TagName extends HTMLElement> = Pick<React.DOMAttributes<TagName>, 'onMouseDownCapture' | 'onMouseUpCapture' | 'onKeyDownCapture' | 'onKeyUpCapture' | 'onTouchStartCapture' | 'onTouchEndCapture' | 'onPointerDownCapture' | 'onPointerUpCapture' | 'onClickCapture' | 'onMouseOver' | 'onMouseOut' | 'onMouseMove' | 'onFocus' | 'onBlur' | 'onMouseDown' | 'onMouseUp' | 'onKeyDown' | 'onKeyUp' | 'onTouchStart' | 'onTouchEnd' | 'onPointerDown' | 'onPointerUp'> & Pick<CommonButtonProps<TagName>, 'onClick'>;
|
|
9
|
+
type ButtonBaseProps<TagName extends HTMLElement> = CommonBaseProps & Pick<CommonButtonProps<TagName>, 'autoFocus' | 'isDisabled' | 'isSelected' | 'testId' | 'analyticsContext' | 'interactionName'> & {
|
|
10
|
+
appearance?: Appearance;
|
|
11
|
+
isLoading?: boolean;
|
|
12
|
+
isIconButton?: boolean;
|
|
13
|
+
isCircle?: boolean;
|
|
14
|
+
hasIconBefore?: boolean;
|
|
15
|
+
hasIconAfter?: boolean;
|
|
16
|
+
shouldFitContainer?: boolean;
|
|
17
|
+
spacing?: Spacing;
|
|
18
|
+
ariaLabel?: string;
|
|
19
|
+
ariaLabelledBy?: string;
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
ref: React.Ref<TagName>;
|
|
22
|
+
type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
|
|
23
|
+
componentName?: string;
|
|
24
|
+
role?: string;
|
|
25
|
+
iconButtonRef?: React.Ref<HTMLButtonElement>;
|
|
26
|
+
tooltipRef?: React.Ref<HTMLButtonElement>;
|
|
27
|
+
onMouseOver?: React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<TagName>;
|
|
28
|
+
onMouseOutonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
|
|
29
|
+
onMouseMoveonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
|
|
30
|
+
onMouseDownonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
|
|
31
|
+
onMouseMove?: React.MouseEventHandler<HTMLButtonElement>;
|
|
32
|
+
onFocus?: React.FocusEventHandler<HTMLButtonElement>;
|
|
33
|
+
onBlur?: React.FocusEventHandler<HTMLButtonElement>;
|
|
34
|
+
onClick?: ((e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
|
|
35
|
+
} & ControlledEvents<TagName>;
|
|
36
|
+
/**
|
|
37
|
+
* __button base__
|
|
38
|
+
*
|
|
39
|
+
* - Implements auto focus when enabled.
|
|
40
|
+
* - Appends the `onClick` event with UFO analytics tracking.
|
|
41
|
+
*
|
|
42
|
+
* @private
|
|
43
|
+
*/
|
|
44
|
+
declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonBaseProps<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
45
|
+
export default ButtonBase;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
1
5
|
import React from 'react';
|
|
2
6
|
type ContentProps = {
|
|
3
7
|
children: React.ReactNode;
|
|
@@ -10,5 +14,5 @@ type ContentProps = {
|
|
|
10
14
|
*
|
|
11
15
|
* Used for slots within a Button, including icons and text content.
|
|
12
16
|
*/
|
|
13
|
-
declare const Content: ({ children, type, isLoading, position }: ContentProps) =>
|
|
17
|
+
declare const Content: ({ children, type, isLoading, position }: ContentProps) => JSX.Element;
|
|
14
18
|
export default Content;
|
|
@@ -11,7 +11,7 @@ export type Spacing = ButtonSpacing | IconButtonSpacing;
|
|
|
11
11
|
export type IconProp = React.ComponentType<IconProps | Omit<NewIconProps, 'spacing'>>;
|
|
12
12
|
export type IconSize = 'small' | 'large' | 'xlarge';
|
|
13
13
|
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
14
|
-
export type
|
|
14
|
+
export type CommonBaseProps = {
|
|
15
15
|
/**
|
|
16
16
|
* Set the button to autofocus on mount.
|
|
17
17
|
*/
|
|
@@ -28,6 +28,16 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
|
|
|
28
28
|
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
29
29
|
*/
|
|
30
30
|
testId?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Additional information to be included in the `context` of Atlaskit analytics events that come from button. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) for more information.
|
|
33
|
+
*/
|
|
34
|
+
analyticsContext?: Record<string, any>;
|
|
35
|
+
/**
|
|
36
|
+
* An optional name used to identify the button to interaction content listeners. By default, button fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#react-ufo-press-interactions) for more information.
|
|
37
|
+
*/
|
|
38
|
+
interactionName?: string;
|
|
39
|
+
};
|
|
40
|
+
export type CommonButtonProps<TagName extends HTMLElement = HTMLButtonElement> = CommonBaseProps & {
|
|
31
41
|
/**
|
|
32
42
|
* Handler called on blur.
|
|
33
43
|
*/
|
|
@@ -39,15 +49,25 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
|
|
|
39
49
|
/**
|
|
40
50
|
* Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
|
|
41
51
|
*/
|
|
42
|
-
onClick?: (e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
52
|
+
onClick?: (e: React.MouseEvent<TagName, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
53
|
+
};
|
|
54
|
+
export type CommonAnchorProps<RouterLinkConfig extends Record<string, any> = never> = CommonBaseProps & {
|
|
43
55
|
/**
|
|
44
|
-
*
|
|
56
|
+
* Handler called on blur.
|
|
45
57
|
*/
|
|
46
|
-
|
|
58
|
+
onBlur?: React.FocusEventHandler<HTMLAnchorElement>;
|
|
47
59
|
/**
|
|
48
|
-
*
|
|
60
|
+
* Handler called on focus.
|
|
49
61
|
*/
|
|
50
|
-
|
|
62
|
+
onFocus?: React.FocusEventHandler<HTMLAnchorElement>;
|
|
63
|
+
/**
|
|
64
|
+
* Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
|
|
65
|
+
*/
|
|
66
|
+
onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
67
|
+
/**
|
|
68
|
+
* URL to navigate to.
|
|
69
|
+
*/
|
|
70
|
+
href?: string | RouterLinkConfig;
|
|
51
71
|
};
|
|
52
72
|
type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
53
73
|
type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'role' | 'disabled'>, {
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
import { type ReactNode } from 'react';
|
|
6
|
-
import { jsx } from '@emotion/react';
|
|
7
6
|
import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonProps, SplitButtonSpacing } from './types';
|
|
8
7
|
type DividerProps = {
|
|
9
8
|
appearance: SplitButtonContextAppearance;
|
|
@@ -13,7 +12,7 @@ type DividerProps = {
|
|
|
13
12
|
/**
|
|
14
13
|
* TODO: Add JSDoc
|
|
15
14
|
*/
|
|
16
|
-
export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps) =>
|
|
15
|
+
export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps) => JSX.Element;
|
|
17
16
|
/**
|
|
18
17
|
* TODO: Add JSdoc
|
|
19
18
|
*/
|
|
@@ -21,7 +20,7 @@ export declare const SplitButtonContainer: ({ appearance, children, isDisabled,
|
|
|
21
20
|
appearance: SplitButtonAppearance;
|
|
22
21
|
children: ReactNode;
|
|
23
22
|
isDisabled?: boolean | undefined;
|
|
24
|
-
}) =>
|
|
23
|
+
}) => JSX.Element;
|
|
25
24
|
/**
|
|
26
25
|
* __Split Button__
|
|
27
26
|
*
|
|
@@ -31,7 +30,7 @@ export declare const SplitButtonContainer: ({ appearance, children, isDisabled,
|
|
|
31
30
|
* - [Code](https://atlassian.design/components/button/split-button/code)
|
|
32
31
|
* - [Usage](https://atlassian.design/components/button/split-button/usage)
|
|
33
32
|
*/
|
|
34
|
-
export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) =>
|
|
33
|
+
export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => JSX.Element;
|
|
35
34
|
type SplitButtonWithSlotsProps = {
|
|
36
35
|
primaryAction: ReactNode;
|
|
37
36
|
secondaryAction: ReactNode;
|
|
@@ -48,5 +47,5 @@ type SplitButtonWithSlotsProps = {
|
|
|
48
47
|
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
49
48
|
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
50
49
|
*/
|
|
51
|
-
export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) =>
|
|
50
|
+
export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => JSX.Element;
|
|
52
51
|
export {};
|
|
@@ -13,5 +13,9 @@ export type ButtonProps = CommonDefaultButtonProps & CommonButtonVariantProps;
|
|
|
13
13
|
*/
|
|
14
14
|
declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
|
|
15
15
|
'data-testid'?: undefined;
|
|
16
|
-
}, keyof import("../types").
|
|
16
|
+
}, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
|
|
17
|
+
onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
18
|
+
onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
19
|
+
onClick?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
|
|
20
|
+
} & React.RefAttributes<HTMLButtonElement>>>;
|
|
17
21
|
export default Button;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
import { type
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
|
|
3
|
+
import type { AdditionalDefaultLinkVariantProps, CommonLinkVariantProps } from '../types';
|
|
4
|
+
import type { CommonDefaultButtonProps } from './types';
|
|
5
|
+
export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps & {
|
|
6
|
+
xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
|
|
7
|
+
};
|
|
6
8
|
/**
|
|
7
9
|
* __Link Button__
|
|
8
10
|
*
|
|
@@ -12,7 +14,19 @@ declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = ne
|
|
|
12
14
|
* - [Code](https://atlassian.design/components/link-button/code)
|
|
13
15
|
* - [Usage](https://atlassian.design/components/link-button/usage)
|
|
14
16
|
*/
|
|
15
|
-
declare const
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, spacing, testId, xcss, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: React.Ref<HTMLAnchorElement>) => JSX.Element;
|
|
18
|
+
/**
|
|
19
|
+
* __Link Button__
|
|
20
|
+
*
|
|
21
|
+
* Renders a link in the style of a button.
|
|
22
|
+
*
|
|
23
|
+
* - [Examples](https://atlassian.design/components/link-button/examples)
|
|
24
|
+
* - [Code](https://atlassian.design/components/link-button/code)
|
|
25
|
+
* - [Usage](https://atlassian.design/components/link-button/usage)
|
|
26
|
+
*/
|
|
27
|
+
declare const LinkButton: (<RouterLinkConfig extends Record<string, any> = never>(props: LinkButtonProps<RouterLinkConfig> & {
|
|
28
|
+
ref?: React.Ref<HTMLAnchorElement>;
|
|
29
|
+
}) => ReturnType<typeof LinkButtonBase>) & {
|
|
30
|
+
displayName?: string | undefined;
|
|
31
|
+
};
|
|
18
32
|
export default LinkButton;
|
|
@@ -13,5 +13,9 @@ export type IconButtonProps = CommonIconButtonProps & CommonButtonVariantProps;
|
|
|
13
13
|
*/
|
|
14
14
|
declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & import("../types").AdditionalButtonVariantProps & Omit<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, "style" | "disabled" | "className" | "role">, "data-testid"> & {
|
|
15
15
|
'data-testid'?: undefined;
|
|
16
|
-
}, keyof import("../types").
|
|
16
|
+
}, "onFocus" | "onBlur" | "onClick" | keyof import("../types").CommonBaseProps> & import("../types").CommonBaseProps & {
|
|
17
|
+
onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
18
|
+
onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
19
|
+
onClick?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>, analyticsEvent: import("@atlaskit/analytics-next").UIAnalyticsEvent) => void) | undefined;
|
|
20
|
+
} & React.RefAttributes<HTMLButtonElement>>>;
|
|
17
21
|
export default IconButton;
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type Ref } from 'react';
|
|
6
|
+
import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
|
|
7
|
+
import { CommonAnchorProps, type CommonLinkVariantProps } from '../types';
|
|
3
8
|
import { type CommonIconButtonProps } from './types';
|
|
4
|
-
export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig
|
|
5
|
-
|
|
9
|
+
export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig> & CommonAnchorProps<RouterLinkConfig> & {
|
|
10
|
+
xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
|
|
11
|
+
};
|
|
12
|
+
declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, xcss, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
|
|
6
13
|
/**
|
|
7
14
|
* __Link Icon Button__
|
|
8
15
|
*
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { type ControlledEvents } from './
|
|
1
|
+
import { type ControlledEvents } from './button-base';
|
|
2
2
|
export default function blockEvents<TagName extends HTMLElement>(shouldBlockEvents: boolean, events: ControlledEvents<TagName>): ControlledEvents<TagName>;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
7
|
+
import { type Appearance, type CommonBaseProps, type CommonButtonProps, type Spacing } from '../types';
|
|
8
|
+
export type ControlledEvents<TagName extends HTMLElement> = Pick<React.DOMAttributes<TagName>, 'onMouseDownCapture' | 'onMouseUpCapture' | 'onKeyDownCapture' | 'onKeyUpCapture' | 'onTouchStartCapture' | 'onTouchEndCapture' | 'onPointerDownCapture' | 'onPointerUpCapture' | 'onClickCapture' | 'onMouseOver' | 'onMouseOut' | 'onMouseMove' | 'onFocus' | 'onBlur' | 'onMouseDown' | 'onMouseUp' | 'onKeyDown' | 'onKeyUp' | 'onTouchStart' | 'onTouchEnd' | 'onPointerDown' | 'onPointerUp'> & Pick<CommonButtonProps<TagName>, 'onClick'>;
|
|
9
|
+
type ButtonBaseProps<TagName extends HTMLElement> = CommonBaseProps & Pick<CommonButtonProps<TagName>, 'autoFocus' | 'isDisabled' | 'isSelected' | 'testId' | 'analyticsContext' | 'interactionName'> & {
|
|
10
|
+
appearance?: Appearance;
|
|
11
|
+
isLoading?: boolean;
|
|
12
|
+
isIconButton?: boolean;
|
|
13
|
+
isCircle?: boolean;
|
|
14
|
+
hasIconBefore?: boolean;
|
|
15
|
+
hasIconAfter?: boolean;
|
|
16
|
+
shouldFitContainer?: boolean;
|
|
17
|
+
spacing?: Spacing;
|
|
18
|
+
ariaLabel?: string;
|
|
19
|
+
ariaLabelledBy?: string;
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
ref: React.Ref<TagName>;
|
|
22
|
+
type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
|
|
23
|
+
componentName?: string;
|
|
24
|
+
role?: string;
|
|
25
|
+
iconButtonRef?: React.Ref<HTMLButtonElement>;
|
|
26
|
+
tooltipRef?: React.Ref<HTMLButtonElement>;
|
|
27
|
+
onMouseOver?: React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<TagName>;
|
|
28
|
+
onMouseOutonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
|
|
29
|
+
onMouseMoveonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
|
|
30
|
+
onMouseDownonMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
|
|
31
|
+
onMouseMove?: React.MouseEventHandler<HTMLButtonElement>;
|
|
32
|
+
onFocus?: React.FocusEventHandler<HTMLButtonElement>;
|
|
33
|
+
onBlur?: React.FocusEventHandler<HTMLButtonElement>;
|
|
34
|
+
onClick?: ((e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
|
|
35
|
+
} & ControlledEvents<TagName>;
|
|
36
|
+
/**
|
|
37
|
+
* __button base__
|
|
38
|
+
*
|
|
39
|
+
* - Implements auto focus when enabled.
|
|
40
|
+
* - Appends the `onClick` event with UFO analytics tracking.
|
|
41
|
+
*
|
|
42
|
+
* @private
|
|
43
|
+
*/
|
|
44
|
+
declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonBaseProps<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
45
|
+
export default ButtonBase;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
1
5
|
import React from 'react';
|
|
2
6
|
type ContentProps = {
|
|
3
7
|
children: React.ReactNode;
|
|
@@ -10,5 +14,5 @@ type ContentProps = {
|
|
|
10
14
|
*
|
|
11
15
|
* Used for slots within a Button, including icons and text content.
|
|
12
16
|
*/
|
|
13
|
-
declare const Content: ({ children, type, isLoading, position }: ContentProps) =>
|
|
17
|
+
declare const Content: ({ children, type, isLoading, position }: ContentProps) => JSX.Element;
|
|
14
18
|
export default Content;
|
|
@@ -11,7 +11,7 @@ export type Spacing = ButtonSpacing | IconButtonSpacing;
|
|
|
11
11
|
export type IconProp = React.ComponentType<IconProps | Omit<NewIconProps, 'spacing'>>;
|
|
12
12
|
export type IconSize = 'small' | 'large' | 'xlarge';
|
|
13
13
|
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
14
|
-
export type
|
|
14
|
+
export type CommonBaseProps = {
|
|
15
15
|
/**
|
|
16
16
|
* Set the button to autofocus on mount.
|
|
17
17
|
*/
|
|
@@ -28,6 +28,16 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
|
|
|
28
28
|
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
29
29
|
*/
|
|
30
30
|
testId?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Additional information to be included in the `context` of Atlaskit analytics events that come from button. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#atlaskit-analytics) for more information.
|
|
33
|
+
*/
|
|
34
|
+
analyticsContext?: Record<string, any>;
|
|
35
|
+
/**
|
|
36
|
+
* An optional name used to identify the button to interaction content listeners. By default, button fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the pressable or anchor primitive code examples](https://atlassian.design/components/primitives/anchor/examples#react-ufo-press-interactions) for more information.
|
|
37
|
+
*/
|
|
38
|
+
interactionName?: string;
|
|
39
|
+
};
|
|
40
|
+
export type CommonButtonProps<TagName extends HTMLElement = HTMLButtonElement> = CommonBaseProps & {
|
|
31
41
|
/**
|
|
32
42
|
* Handler called on blur.
|
|
33
43
|
*/
|
|
@@ -39,15 +49,25 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
|
|
|
39
49
|
/**
|
|
40
50
|
* Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
|
|
41
51
|
*/
|
|
42
|
-
onClick?: (e: React.MouseEvent<TagName>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
52
|
+
onClick?: (e: React.MouseEvent<TagName, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
53
|
+
};
|
|
54
|
+
export type CommonAnchorProps<RouterLinkConfig extends Record<string, any> = never> = CommonBaseProps & {
|
|
43
55
|
/**
|
|
44
|
-
*
|
|
56
|
+
* Handler called on blur.
|
|
45
57
|
*/
|
|
46
|
-
|
|
58
|
+
onBlur?: React.FocusEventHandler<HTMLAnchorElement>;
|
|
47
59
|
/**
|
|
48
|
-
*
|
|
60
|
+
* Handler called on focus.
|
|
49
61
|
*/
|
|
50
|
-
|
|
62
|
+
onFocus?: React.FocusEventHandler<HTMLAnchorElement>;
|
|
63
|
+
/**
|
|
64
|
+
* Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
|
|
65
|
+
*/
|
|
66
|
+
onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
67
|
+
/**
|
|
68
|
+
* URL to navigate to.
|
|
69
|
+
*/
|
|
70
|
+
href?: string | RouterLinkConfig;
|
|
51
71
|
};
|
|
52
72
|
type SupportedElementAttributes = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
53
73
|
type AdditionalHTMLElementPropsExtender<Props extends SupportedElementAttributes> = Combine<Omit<Props, 'className' | 'style' | 'role' | 'disabled'>, {
|