@atlaskit/button 23.0.3 → 23.0.5
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 +18 -0
- package/dist/cjs/containers/button-group.js +1 -1
- package/dist/cjs/new-button/variants/default/link.compiled.css +1 -0
- package/dist/cjs/new-button/variants/default/link.js +5 -3
- package/dist/cjs/new-button/variants/icon/link.compiled.css +1 -0
- package/dist/cjs/new-button/variants/icon/link.js +5 -6
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/cjs/old-button/shared/css.js +2 -2
- package/dist/cjs/utils/variants.js +6 -3
- package/dist/es2019/containers/button-group.js +1 -1
- package/dist/es2019/new-button/variants/default/link.compiled.css +1 -0
- package/dist/es2019/new-button/variants/default/link.js +4 -2
- package/dist/es2019/new-button/variants/icon/link.compiled.css +1 -0
- package/dist/es2019/new-button/variants/icon/link.js +5 -6
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/es2019/old-button/shared/css.js +2 -2
- package/dist/es2019/utils/variants.js +5 -2
- package/dist/esm/containers/button-group.js +1 -1
- package/dist/esm/new-button/variants/default/link.compiled.css +1 -0
- package/dist/esm/new-button/variants/default/link.js +5 -3
- package/dist/esm/new-button/variants/icon/link.compiled.css +1 -0
- package/dist/esm/new-button/variants/icon/link.js +5 -6
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/esm/old-button/shared/css.js +2 -2
- package/dist/esm/utils/variants.js +5 -2
- package/dist/types/new-button/variants/default/link.d.ts +1 -1
- package/dist/types/utils/variants.d.ts +4 -0
- package/dist/types-ts4.5/new-button/variants/default/link.d.ts +1 -1
- package/dist/types-ts4.5/utils/variants.d.ts +4 -0
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 23.0.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#141813](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141813)
|
|
8
|
+
[`4bf38a93b38f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4bf38a93b38f3) -
|
|
9
|
+
Fix styling not being applied for LinkIconButtons with shape 'circle'.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 23.0.4
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#139619](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139619)
|
|
17
|
+
[`fdd33e36655ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fdd33e36655ab) -
|
|
18
|
+
Fixed a regression where Link Buttons with `shouldFitContainer` were not expanding to fill the
|
|
19
|
+
full width of their container.
|
|
20
|
+
|
|
3
21
|
## 23.0.3
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -19,7 +19,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
19
19
|
var buttonGroupStyles = (0, _react2.css)({
|
|
20
20
|
display: 'inline-flex',
|
|
21
21
|
gap: "var(--ds-space-050, 4px)",
|
|
22
|
-
// eslint-disable-next-line @atlaskit/
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
23
23
|
'> *': {
|
|
24
24
|
flex: '1 0 auto'
|
|
25
25
|
}
|
|
@@ -20,7 +20,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
20
20
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
21
21
|
var _content = _interopRequireDefault(require("../shared/content"));
|
|
22
22
|
var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
|
|
23
|
-
var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "spacing", "testId"],
|
|
23
|
+
var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId"],
|
|
24
24
|
_excluded2 = ["className", "css", "as", "style"];
|
|
25
25
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
26
26
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -30,7 +30,8 @@ var styles = {
|
|
|
30
30
|
disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
|
|
31
31
|
spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
|
|
32
32
|
buttonIconBefore: "_bozgu2gc",
|
|
33
|
-
buttonIconAfter: "_y4tiu2gc"
|
|
33
|
+
buttonIconAfter: "_y4tiu2gc",
|
|
34
|
+
fullWidth: "_1bsb1osq"
|
|
34
35
|
};
|
|
35
36
|
var defaultStyles = {
|
|
36
37
|
root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
|
|
@@ -94,6 +95,7 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
94
95
|
onPointerUpCapture = _ref.onPointerUpCapture,
|
|
95
96
|
onTouchEndCapture = _ref.onTouchEndCapture,
|
|
96
97
|
onTouchStartCapture = _ref.onTouchStartCapture,
|
|
98
|
+
shouldFitContainer = _ref.shouldFitContainer,
|
|
97
99
|
spacing = _ref.spacing,
|
|
98
100
|
testId = _ref.testId,
|
|
99
101
|
unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
@@ -143,7 +145,7 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
143
145
|
// TODO: remove me once we kill color fallbacks
|
|
144
146
|
isSelected && appearance === 'warning' && selectedStyles.warning,
|
|
145
147
|
// TODO: remove me once we kill color fallbacks
|
|
146
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter)
|
|
148
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
147
149
|
}), iconBefore && /*#__PURE__*/React.createElement(_content.default, {
|
|
148
150
|
type: "icon",
|
|
149
151
|
position: "before",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
|
|
4
5
|
._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
|
|
5
6
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
6
7
|
._v5649dqc{transition:background .1s ease-out}
|
|
@@ -31,7 +31,8 @@ var styles = {
|
|
|
31
31
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
32
32
|
disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
|
|
33
33
|
spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
|
|
34
|
-
iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t"
|
|
34
|
+
iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
|
|
35
|
+
circle: "_2rko14q2"
|
|
35
36
|
};
|
|
36
37
|
var defaultStyles = {
|
|
37
38
|
root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
|
|
@@ -110,9 +111,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
110
111
|
hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
|
|
111
112
|
ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
|
|
112
113
|
}, function (triggerProps) {
|
|
113
|
-
return /*#__PURE__*/React.createElement(_compiled.Anchor
|
|
114
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
115
|
-
, (0, _extends2.default)({}, saferRest, {
|
|
114
|
+
return /*#__PURE__*/React.createElement(_compiled.Anchor, (0, _extends2.default)({}, saferRest, {
|
|
116
115
|
"aria-labelledby": ariaLabelledBy,
|
|
117
116
|
testId: testId,
|
|
118
117
|
componentName: "LinkIconButton",
|
|
@@ -162,7 +161,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
162
161
|
,
|
|
163
162
|
xcss: (0, _css2.cx)(styles.base, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
|
|
164
163
|
// TODO: remove me once we kill color fallbacks
|
|
165
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton),
|
|
164
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
|
|
166
165
|
onMouseDownCapture: onMouseDownCapture,
|
|
167
166
|
onMouseUpCapture: onMouseUpCapture,
|
|
168
167
|
onKeyDownCapture: onKeyDownCapture,
|
|
@@ -197,7 +196,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
197
196
|
ref: (0, _mergeRefs.default)([localRef, ref]),
|
|
198
197
|
xcss: (0, _css2.cx)(styles.base, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
|
|
199
198
|
// TODO: remove me once we kill color fallbacks
|
|
200
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact),
|
|
199
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
|
|
201
200
|
onClick: _onClick,
|
|
202
201
|
onMouseDownCapture: onMouseDownCapture,
|
|
203
202
|
onMouseUpCapture: onMouseUpCapture,
|
|
@@ -133,7 +133,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
|
|
|
133
133
|
action: 'clicked',
|
|
134
134
|
componentName: 'button',
|
|
135
135
|
packageName: "@atlaskit/button",
|
|
136
|
-
packageVersion: "23.0.
|
|
136
|
+
packageVersion: "23.0.5",
|
|
137
137
|
analyticsData: analyticsContext
|
|
138
138
|
});
|
|
139
139
|
|
|
@@ -323,7 +323,7 @@ function getIconStyle(_ref4) {
|
|
|
323
323
|
return (0, _react.css)({
|
|
324
324
|
display: 'flex',
|
|
325
325
|
// icon size cannot grow and shrink
|
|
326
|
-
// eslint-disable-next-line @atlaskit/
|
|
326
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
327
327
|
margin: spacing === 'none' ? 0 : innerMargin.icon,
|
|
328
328
|
flexGrow: 0,
|
|
329
329
|
flexShrink: 0,
|
|
@@ -340,7 +340,7 @@ function getIconStyle(_ref4) {
|
|
|
340
340
|
function getContentStyle(_ref5) {
|
|
341
341
|
var spacing = _ref5.spacing;
|
|
342
342
|
return (0, _react.css)({
|
|
343
|
-
// eslint-disable-next-line @atlaskit/
|
|
343
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
344
344
|
margin: spacing === 'none' ? 0 : innerMargin.content,
|
|
345
345
|
// content can grow and shrink
|
|
346
346
|
flexGrow: 1,
|
|
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.linkButtonVariants = exports.iconButtonVariants = exports.defaultButtonVariants = exports.default = void 0;
|
|
8
|
+
exports.linkButtonVariants = exports.iconButtonVariants = exports.iconButtonShapes = exports.defaultButtonVariants = exports.default = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -22,6 +22,7 @@ var _excluded = ["href", "children"],
|
|
|
22
22
|
/* eslint-disable @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-20398 */
|
|
23
23
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
24
24
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
25
|
+
var iconButtonShapes = exports.iconButtonShapes = ['default', 'circle'];
|
|
25
26
|
// Add required default props to variants
|
|
26
27
|
var LinkButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
27
28
|
var _ref$href = _ref.href,
|
|
@@ -77,13 +78,15 @@ var variants = [{
|
|
|
77
78
|
Component: IconButtonRender,
|
|
78
79
|
elementType: HTMLButtonElement,
|
|
79
80
|
appearances: _appearances.iconButtonAppearances,
|
|
80
|
-
spacing: _spacing.iconButtonSpacing
|
|
81
|
+
spacing: _spacing.iconButtonSpacing,
|
|
82
|
+
shape: iconButtonShapes
|
|
81
83
|
}, {
|
|
82
84
|
name: 'LinkIconButton',
|
|
83
85
|
Component: LinkIconButtonRender,
|
|
84
86
|
elementType: HTMLAnchorElement,
|
|
85
87
|
appearances: _appearances.iconButtonAppearances,
|
|
86
|
-
spacing: _spacing.iconButtonSpacing
|
|
88
|
+
spacing: _spacing.iconButtonSpacing,
|
|
89
|
+
shape: iconButtonShapes
|
|
87
90
|
}];
|
|
88
91
|
var defaultButtonVariants = exports.defaultButtonVariants = variants.filter(function (_ref4) {
|
|
89
92
|
var name = _ref4.name;
|
|
@@ -9,7 +9,7 @@ import { css, jsx } from '@emotion/react';
|
|
|
9
9
|
const buttonGroupStyles = css({
|
|
10
10
|
display: 'inline-flex',
|
|
11
11
|
gap: "var(--ds-space-050, 4px)",
|
|
12
|
-
// eslint-disable-next-line @atlaskit/
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
13
13
|
'> *': {
|
|
14
14
|
flex: '1 0 auto'
|
|
15
15
|
}
|
|
@@ -17,7 +17,8 @@ const styles = {
|
|
|
17
17
|
disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
|
|
18
18
|
spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
|
|
19
19
|
buttonIconBefore: "_bozgu2gc",
|
|
20
|
-
buttonIconAfter: "_y4tiu2gc"
|
|
20
|
+
buttonIconAfter: "_y4tiu2gc",
|
|
21
|
+
fullWidth: "_1bsb1osq"
|
|
21
22
|
};
|
|
22
23
|
const defaultStyles = {
|
|
23
24
|
root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
|
|
@@ -79,6 +80,7 @@ const LinkButtonBase = ({
|
|
|
79
80
|
onPointerUpCapture,
|
|
80
81
|
onTouchEndCapture,
|
|
81
82
|
onTouchStartCapture,
|
|
83
|
+
shouldFitContainer,
|
|
82
84
|
spacing,
|
|
83
85
|
testId,
|
|
84
86
|
...unsafeRest
|
|
@@ -131,7 +133,7 @@ const LinkButtonBase = ({
|
|
|
131
133
|
// TODO: remove me once we kill color fallbacks
|
|
132
134
|
isSelected && appearance === 'warning' && selectedStyles.warning,
|
|
133
135
|
// TODO: remove me once we kill color fallbacks
|
|
134
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter)
|
|
136
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
135
137
|
}), iconBefore && /*#__PURE__*/React.createElement(Content, {
|
|
136
138
|
type: "icon",
|
|
137
139
|
position: "before",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
|
|
4
5
|
._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
|
|
5
6
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
6
7
|
._v5649dqc{transition:background .1s ease-out}
|
|
@@ -18,7 +18,8 @@ const styles = {
|
|
|
18
18
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
19
19
|
disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
|
|
20
20
|
spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
|
|
21
|
-
iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t"
|
|
21
|
+
iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
|
|
22
|
+
circle: "_2rko14q2"
|
|
22
23
|
};
|
|
23
24
|
const defaultStyles = {
|
|
24
25
|
root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
|
|
@@ -97,9 +98,7 @@ const LinkIconButtonBase = ({
|
|
|
97
98
|
hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
|
|
98
99
|
hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
|
|
99
100
|
ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
|
|
100
|
-
}, triggerProps => /*#__PURE__*/React.createElement(Anchor
|
|
101
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
102
|
-
, _extends({}, saferRest, {
|
|
101
|
+
}, triggerProps => /*#__PURE__*/React.createElement(Anchor, _extends({}, saferRest, {
|
|
103
102
|
"aria-labelledby": ariaLabelledBy,
|
|
104
103
|
testId: testId,
|
|
105
104
|
componentName: "LinkIconButton",
|
|
@@ -149,7 +148,7 @@ const LinkIconButtonBase = ({
|
|
|
149
148
|
,
|
|
150
149
|
xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
|
|
151
150
|
// TODO: remove me once we kill color fallbacks
|
|
152
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton),
|
|
151
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
|
|
153
152
|
onMouseDownCapture: onMouseDownCapture,
|
|
154
153
|
onMouseUpCapture: onMouseUpCapture,
|
|
155
154
|
onKeyDownCapture: onKeyDownCapture,
|
|
@@ -183,7 +182,7 @@ const LinkIconButtonBase = ({
|
|
|
183
182
|
ref: mergeRefs([localRef, ref]),
|
|
184
183
|
xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
|
|
185
184
|
// TODO: remove me once we kill color fallbacks
|
|
186
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact),
|
|
185
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
|
|
187
186
|
onClick: onClick,
|
|
188
187
|
onMouseDownCapture: onMouseDownCapture,
|
|
189
188
|
onMouseUpCapture: onMouseUpCapture,
|
|
@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
|
|
|
119
119
|
action: 'clicked',
|
|
120
120
|
componentName: 'button',
|
|
121
121
|
packageName: "@atlaskit/button",
|
|
122
|
-
packageVersion: "23.0.
|
|
122
|
+
packageVersion: "23.0.5",
|
|
123
123
|
analyticsData: analyticsContext
|
|
124
124
|
});
|
|
125
125
|
|
|
@@ -341,7 +341,7 @@ export function getIconStyle({
|
|
|
341
341
|
return css({
|
|
342
342
|
display: 'flex',
|
|
343
343
|
// icon size cannot grow and shrink
|
|
344
|
-
// eslint-disable-next-line @atlaskit/
|
|
344
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
345
345
|
margin: spacing === 'none' ? 0 : innerMargin.icon,
|
|
346
346
|
flexGrow: 0,
|
|
347
347
|
flexShrink: 0,
|
|
@@ -359,7 +359,7 @@ export function getContentStyle({
|
|
|
359
359
|
spacing
|
|
360
360
|
}) {
|
|
361
361
|
return css({
|
|
362
|
-
// eslint-disable-next-line @atlaskit/
|
|
362
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
363
363
|
margin: spacing === 'none' ? 0 : innerMargin.content,
|
|
364
364
|
// content can grow and shrink
|
|
365
365
|
flexGrow: 1,
|
|
@@ -8,6 +8,7 @@ import IconButton from '../new-button/variants/icon/button';
|
|
|
8
8
|
import LinkIconButton from '../new-button/variants/icon/link';
|
|
9
9
|
import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
|
|
10
10
|
import { buttonSpacing, iconButtonSpacing } from './spacing';
|
|
11
|
+
export const iconButtonShapes = ['default', 'circle'];
|
|
11
12
|
// Add required default props to variants
|
|
12
13
|
const LinkButtonRender = /*#__PURE__*/forwardRef(({
|
|
13
14
|
href = 'home',
|
|
@@ -54,13 +55,15 @@ const variants = [{
|
|
|
54
55
|
Component: IconButtonRender,
|
|
55
56
|
elementType: HTMLButtonElement,
|
|
56
57
|
appearances: iconButtonAppearances,
|
|
57
|
-
spacing: iconButtonSpacing
|
|
58
|
+
spacing: iconButtonSpacing,
|
|
59
|
+
shape: iconButtonShapes
|
|
58
60
|
}, {
|
|
59
61
|
name: 'LinkIconButton',
|
|
60
62
|
Component: LinkIconButtonRender,
|
|
61
63
|
elementType: HTMLAnchorElement,
|
|
62
64
|
appearances: iconButtonAppearances,
|
|
63
|
-
spacing: iconButtonSpacing
|
|
65
|
+
spacing: iconButtonSpacing,
|
|
66
|
+
shape: iconButtonShapes
|
|
64
67
|
}];
|
|
65
68
|
export const defaultButtonVariants = variants.filter(({
|
|
66
69
|
name
|
|
@@ -9,7 +9,7 @@ import { css, jsx } from '@emotion/react';
|
|
|
9
9
|
var buttonGroupStyles = css({
|
|
10
10
|
display: 'inline-flex',
|
|
11
11
|
gap: "var(--ds-space-050, 4px)",
|
|
12
|
-
// eslint-disable-next-line @atlaskit/
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
13
13
|
'> *': {
|
|
14
14
|
flex: '1 0 auto'
|
|
15
15
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* link.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "spacing", "testId"],
|
|
4
|
+
var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId"],
|
|
5
5
|
_excluded2 = ["className", "css", "as", "style"];
|
|
6
6
|
import "./link.compiled.css";
|
|
7
7
|
import * as React from 'react';
|
|
@@ -20,7 +20,8 @@ var styles = {
|
|
|
20
20
|
disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
|
|
21
21
|
spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
|
|
22
22
|
buttonIconBefore: "_bozgu2gc",
|
|
23
|
-
buttonIconAfter: "_y4tiu2gc"
|
|
23
|
+
buttonIconAfter: "_y4tiu2gc",
|
|
24
|
+
fullWidth: "_1bsb1osq"
|
|
24
25
|
};
|
|
25
26
|
var defaultStyles = {
|
|
26
27
|
root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
|
|
@@ -84,6 +85,7 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
84
85
|
onPointerUpCapture = _ref.onPointerUpCapture,
|
|
85
86
|
onTouchEndCapture = _ref.onTouchEndCapture,
|
|
86
87
|
onTouchStartCapture = _ref.onTouchStartCapture,
|
|
88
|
+
shouldFitContainer = _ref.shouldFitContainer,
|
|
87
89
|
spacing = _ref.spacing,
|
|
88
90
|
testId = _ref.testId,
|
|
89
91
|
unsafeRest = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -133,7 +135,7 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
133
135
|
// TODO: remove me once we kill color fallbacks
|
|
134
136
|
isSelected && appearance === 'warning' && selectedStyles.warning,
|
|
135
137
|
// TODO: remove me once we kill color fallbacks
|
|
136
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter)
|
|
138
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
137
139
|
}), iconBefore && /*#__PURE__*/React.createElement(Content, {
|
|
138
140
|
type: "icon",
|
|
139
141
|
position: "before",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
|
|
4
5
|
._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
|
|
5
6
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
6
7
|
._v5649dqc{transition:background .1s ease-out}
|
|
@@ -21,7 +21,8 @@ var styles = {
|
|
|
21
21
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
22
22
|
disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
|
|
23
23
|
spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
|
|
24
|
-
iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t"
|
|
24
|
+
iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
|
|
25
|
+
circle: "_2rko14q2"
|
|
25
26
|
};
|
|
26
27
|
var defaultStyles = {
|
|
27
28
|
root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
|
|
@@ -100,9 +101,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
100
101
|
hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
|
|
101
102
|
ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
|
|
102
103
|
}, function (triggerProps) {
|
|
103
|
-
return /*#__PURE__*/React.createElement(Anchor
|
|
104
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
105
|
-
, _extends({}, saferRest, {
|
|
104
|
+
return /*#__PURE__*/React.createElement(Anchor, _extends({}, saferRest, {
|
|
106
105
|
"aria-labelledby": ariaLabelledBy,
|
|
107
106
|
testId: testId,
|
|
108
107
|
componentName: "LinkIconButton",
|
|
@@ -152,7 +151,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
152
151
|
,
|
|
153
152
|
xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
|
|
154
153
|
// TODO: remove me once we kill color fallbacks
|
|
155
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton),
|
|
154
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
|
|
156
155
|
onMouseDownCapture: onMouseDownCapture,
|
|
157
156
|
onMouseUpCapture: onMouseUpCapture,
|
|
158
157
|
onKeyDownCapture: onKeyDownCapture,
|
|
@@ -187,7 +186,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
187
186
|
ref: mergeRefs([localRef, ref]),
|
|
188
187
|
xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
|
|
189
188
|
// TODO: remove me once we kill color fallbacks
|
|
190
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact),
|
|
189
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
|
|
191
190
|
onClick: _onClick,
|
|
192
191
|
onMouseDownCapture: onMouseDownCapture,
|
|
193
192
|
onMouseUpCapture: onMouseUpCapture,
|
|
@@ -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: "23.0.
|
|
128
|
+
packageVersion: "23.0.5",
|
|
129
129
|
analyticsData: analyticsContext
|
|
130
130
|
});
|
|
131
131
|
|
|
@@ -315,7 +315,7 @@ export function getIconStyle(_ref4) {
|
|
|
315
315
|
return css({
|
|
316
316
|
display: 'flex',
|
|
317
317
|
// icon size cannot grow and shrink
|
|
318
|
-
// eslint-disable-next-line @atlaskit/
|
|
318
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
319
319
|
margin: spacing === 'none' ? 0 : innerMargin.icon,
|
|
320
320
|
flexGrow: 0,
|
|
321
321
|
flexShrink: 0,
|
|
@@ -332,7 +332,7 @@ export function getIconStyle(_ref4) {
|
|
|
332
332
|
export function getContentStyle(_ref5) {
|
|
333
333
|
var spacing = _ref5.spacing;
|
|
334
334
|
return css({
|
|
335
|
-
// eslint-disable-next-line @atlaskit/
|
|
335
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
336
336
|
margin: spacing === 'none' ? 0 : innerMargin.content,
|
|
337
337
|
// content can grow and shrink
|
|
338
338
|
flexGrow: 1,
|
|
@@ -12,6 +12,7 @@ import IconButton from '../new-button/variants/icon/button';
|
|
|
12
12
|
import LinkIconButton from '../new-button/variants/icon/link';
|
|
13
13
|
import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
|
|
14
14
|
import { buttonSpacing, iconButtonSpacing } from './spacing';
|
|
15
|
+
export var iconButtonShapes = ['default', 'circle'];
|
|
15
16
|
// Add required default props to variants
|
|
16
17
|
var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
17
18
|
var _ref$href = _ref.href,
|
|
@@ -67,13 +68,15 @@ var variants = [{
|
|
|
67
68
|
Component: IconButtonRender,
|
|
68
69
|
elementType: HTMLButtonElement,
|
|
69
70
|
appearances: iconButtonAppearances,
|
|
70
|
-
spacing: iconButtonSpacing
|
|
71
|
+
spacing: iconButtonSpacing,
|
|
72
|
+
shape: iconButtonShapes
|
|
71
73
|
}, {
|
|
72
74
|
name: 'LinkIconButton',
|
|
73
75
|
Component: LinkIconButtonRender,
|
|
74
76
|
elementType: HTMLAnchorElement,
|
|
75
77
|
appearances: iconButtonAppearances,
|
|
76
|
-
spacing: iconButtonSpacing
|
|
78
|
+
spacing: iconButtonSpacing,
|
|
79
|
+
shape: iconButtonShapes
|
|
77
80
|
}];
|
|
78
81
|
export var defaultButtonVariants = variants.filter(function (_ref4) {
|
|
79
82
|
var name = _ref4.name;
|
|
@@ -11,7 +11,7 @@ export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never
|
|
|
11
11
|
* - [Code](https://atlassian.design/components/link-button/code)
|
|
12
12
|
* - [Usage](https://atlassian.design/components/link-button/usage)
|
|
13
13
|
*/
|
|
14
|
-
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, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: React.Ref<HTMLAnchorElement>) => JSX.Element;
|
|
14
|
+
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, shouldFitContainer, spacing, testId, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: React.Ref<HTMLAnchorElement>) => JSX.Element;
|
|
15
15
|
/**
|
|
16
16
|
* __Link Button__
|
|
17
17
|
*
|
|
@@ -5,6 +5,8 @@ import { type IconButtonProps } from '../new-button/variants/icon/button';
|
|
|
5
5
|
import { type LinkIconButtonProps } from '../new-button/variants/icon/link';
|
|
6
6
|
import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
|
|
7
7
|
import { buttonSpacing, iconButtonSpacing } from './spacing';
|
|
8
|
+
type IconButtonShape = 'default' | 'circle';
|
|
9
|
+
export declare const iconButtonShapes: IconButtonShape[];
|
|
8
10
|
type DefaultButtonVariant = {
|
|
9
11
|
name: 'Button';
|
|
10
12
|
Component: typeof Button;
|
|
@@ -25,6 +27,7 @@ type IconButtonVariant = {
|
|
|
25
27
|
elementType: typeof HTMLButtonElement;
|
|
26
28
|
appearances: typeof iconButtonAppearances;
|
|
27
29
|
spacing: typeof iconButtonSpacing;
|
|
30
|
+
shape: typeof iconButtonShapes;
|
|
28
31
|
};
|
|
29
32
|
type LinkIconButtonVariant = {
|
|
30
33
|
name: 'LinkIconButton';
|
|
@@ -32,6 +35,7 @@ type LinkIconButtonVariant = {
|
|
|
32
35
|
elementType: typeof HTMLAnchorElement;
|
|
33
36
|
appearances: typeof iconButtonAppearances;
|
|
34
37
|
spacing: typeof iconButtonSpacing;
|
|
38
|
+
shape: typeof iconButtonShapes;
|
|
35
39
|
};
|
|
36
40
|
type DefaultButtonVariants = DefaultButtonVariant | LinkButtonVariant;
|
|
37
41
|
type LinkButtonVariants = LinkButtonVariant | LinkIconButtonVariant;
|
|
@@ -11,7 +11,7 @@ export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never
|
|
|
11
11
|
* - [Code](https://atlassian.design/components/link-button/code)
|
|
12
12
|
* - [Usage](https://atlassian.design/components/link-button/usage)
|
|
13
13
|
*/
|
|
14
|
-
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, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: React.Ref<HTMLAnchorElement>) => JSX.Element;
|
|
14
|
+
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, shouldFitContainer, spacing, testId, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: React.Ref<HTMLAnchorElement>) => JSX.Element;
|
|
15
15
|
/**
|
|
16
16
|
* __Link Button__
|
|
17
17
|
*
|
|
@@ -5,6 +5,8 @@ import { type IconButtonProps } from '../new-button/variants/icon/button';
|
|
|
5
5
|
import { type LinkIconButtonProps } from '../new-button/variants/icon/link';
|
|
6
6
|
import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
|
|
7
7
|
import { buttonSpacing, iconButtonSpacing } from './spacing';
|
|
8
|
+
type IconButtonShape = 'default' | 'circle';
|
|
9
|
+
export declare const iconButtonShapes: IconButtonShape[];
|
|
8
10
|
type DefaultButtonVariant = {
|
|
9
11
|
name: 'Button';
|
|
10
12
|
Component: typeof Button;
|
|
@@ -25,6 +27,7 @@ type IconButtonVariant = {
|
|
|
25
27
|
elementType: typeof HTMLButtonElement;
|
|
26
28
|
appearances: typeof iconButtonAppearances;
|
|
27
29
|
spacing: typeof iconButtonSpacing;
|
|
30
|
+
shape: typeof iconButtonShapes;
|
|
28
31
|
};
|
|
29
32
|
type LinkIconButtonVariant = {
|
|
30
33
|
name: 'LinkIconButton';
|
|
@@ -32,6 +35,7 @@ type LinkIconButtonVariant = {
|
|
|
32
35
|
elementType: typeof HTMLAnchorElement;
|
|
33
36
|
appearances: typeof iconButtonAppearances;
|
|
34
37
|
spacing: typeof iconButtonSpacing;
|
|
38
|
+
shape: typeof iconButtonShapes;
|
|
35
39
|
};
|
|
36
40
|
type DefaultButtonVariants = DefaultButtonVariant | LinkButtonVariant;
|
|
37
41
|
type LinkButtonVariants = LinkButtonVariant | LinkIconButtonVariant;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/button",
|
|
3
|
-
"version": "23.0.
|
|
3
|
+
"version": "23.0.5",
|
|
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/"
|
|
@@ -88,13 +88,13 @@
|
|
|
88
88
|
"@atlaskit/css": "^0.10.0",
|
|
89
89
|
"@atlaskit/ds-lib": "^4.0.0",
|
|
90
90
|
"@atlaskit/focus-ring": "^3.0.0",
|
|
91
|
-
"@atlaskit/icon": "^25.
|
|
91
|
+
"@atlaskit/icon": "^25.6.0",
|
|
92
92
|
"@atlaskit/interaction-context": "^3.0.0",
|
|
93
93
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
94
|
-
"@atlaskit/primitives": "^14.
|
|
94
|
+
"@atlaskit/primitives": "^14.4.0",
|
|
95
95
|
"@atlaskit/spinner": "^18.0.0",
|
|
96
96
|
"@atlaskit/theme": "^18.0.0",
|
|
97
|
-
"@atlaskit/tokens": "^4.
|
|
97
|
+
"@atlaskit/tokens": "^4.8.0",
|
|
98
98
|
"@atlaskit/tooltip": "^20.0.0",
|
|
99
99
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
100
100
|
"@babel/runtime": "^7.0.0",
|
|
@@ -113,12 +113,12 @@
|
|
|
113
113
|
"@atlaskit/docs": "^10.0.0",
|
|
114
114
|
"@atlaskit/dropdown-menu": "^14.0.0",
|
|
115
115
|
"@atlaskit/form": "^12.0.0",
|
|
116
|
-
"@atlaskit/heading": "^5.
|
|
116
|
+
"@atlaskit/heading": "^5.2.0",
|
|
117
117
|
"@atlaskit/link": "^3.1.0",
|
|
118
118
|
"@atlaskit/logo": "^16.0.0",
|
|
119
119
|
"@atlaskit/modal-dialog": "^14.1.0",
|
|
120
120
|
"@atlaskit/section-message": "^8.2.0",
|
|
121
|
-
"@atlaskit/select": "^20.
|
|
121
|
+
"@atlaskit/select": "^20.3.0",
|
|
122
122
|
"@atlaskit/ssr": "^0.4.0",
|
|
123
123
|
"@atlaskit/toggle": "^15.0.0",
|
|
124
124
|
"@atlaskit/visual-regression": "^0.10.0",
|