@atlaskit/button 23.10.1 → 23.10.3
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 +13 -0
- package/button.docs.tsx +256 -0
- package/dist/cjs/new-button/variants/default/link.compiled.css +0 -2
- package/dist/cjs/new-button/variants/default/link.js +1 -11
- package/dist/cjs/new-button/variants/shared/button-base.compiled.css +0 -2
- package/dist/cjs/new-button/variants/shared/button-base.js +1 -11
- package/dist/cjs/new-button/variants/shared/content.compiled.css +1 -5
- package/dist/cjs/new-button/variants/shared/content.js +3 -7
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/new-button/variants/default/link.compiled.css +0 -2
- package/dist/es2019/new-button/variants/default/link.js +1 -11
- package/dist/es2019/new-button/variants/shared/button-base.compiled.css +0 -2
- package/dist/es2019/new-button/variants/shared/button-base.js +1 -11
- package/dist/es2019/new-button/variants/shared/content.compiled.css +1 -5
- package/dist/es2019/new-button/variants/shared/content.js +3 -7
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/new-button/variants/default/link.compiled.css +0 -2
- package/dist/esm/new-button/variants/default/link.js +1 -11
- package/dist/esm/new-button/variants/shared/button-base.compiled.css +0 -2
- package/dist/esm/new-button/variants/shared/button-base.js +1 -11
- package/dist/esm/new-button/variants/shared/content.compiled.css +1 -5
- package/dist/esm/new-button/variants/shared/content.js +3 -7
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/types/new-button/variants/shared/content.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/shared/content.d.ts +1 -1
- package/package.json +5 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 23.10.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 23.10.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`236ae1160f1a0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/236ae1160f1a0) -
|
|
14
|
+
Clean up platform-button-icon-spacing-cleanup FG
|
|
15
|
+
|
|
3
16
|
## 23.10.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/button.docs.tsx
ADDED
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
|
|
3
|
+
import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
|
|
4
|
+
|
|
5
|
+
const documentation: ComponentStructuredContentSource[] = [
|
|
6
|
+
{
|
|
7
|
+
name: 'Button',
|
|
8
|
+
description:
|
|
9
|
+
'A versatile button component with multiple appearances and states for triggering actions. A button triggers an event or action. They let users know what will happen next. Note the root entrypoint of `@atlaskit/button` is deprecated and being replaced with `@atlaskit/button/new`.',
|
|
10
|
+
status: 'general-availability',
|
|
11
|
+
import: {
|
|
12
|
+
name: 'Button',
|
|
13
|
+
package: '@atlaskit/button/new',
|
|
14
|
+
type: 'default',
|
|
15
|
+
packagePath: path.resolve(__dirname),
|
|
16
|
+
packageJson: require('./package.json'),
|
|
17
|
+
},
|
|
18
|
+
usageGuidelines: [
|
|
19
|
+
'Use primary buttons for the main action on a page',
|
|
20
|
+
'Limit to one primary button per section',
|
|
21
|
+
'Use compact size for tight spaces',
|
|
22
|
+
'Use subtle buttons for secondary actions',
|
|
23
|
+
'Use danger buttons sparingly for destructive actions',
|
|
24
|
+
'Group related buttons together with ButtonGroup',
|
|
25
|
+
'Use buttons for actions; use links for navigation (different semantics and assistive tech behavior)',
|
|
26
|
+
],
|
|
27
|
+
contentGuidelines: [
|
|
28
|
+
'Use action verbs that describe the interaction',
|
|
29
|
+
'Keep text concise (1-3 words ideal)',
|
|
30
|
+
'Avoid generic terms like "Submit" or "Click here"',
|
|
31
|
+
'Use sentence case',
|
|
32
|
+
'Keep button labels consistent with surrounding UI (e.g. modal primary button should reflect modal intent)',
|
|
33
|
+
'Use buttons for actions, links for navigation',
|
|
34
|
+
'Only include one primary call to action (CTA) per area',
|
|
35
|
+
"Start with the verb and specify what's being acted on",
|
|
36
|
+
"Don't use punctuation in button labels",
|
|
37
|
+
],
|
|
38
|
+
accessibilityGuidelines: [
|
|
39
|
+
'Always provide meaningful labels for screen readers',
|
|
40
|
+
'Provide loading state announcements for async actions',
|
|
41
|
+
],
|
|
42
|
+
examples: [
|
|
43
|
+
{
|
|
44
|
+
name: 'Disabled',
|
|
45
|
+
description:
|
|
46
|
+
"Set `isDisabled` to disable a button that shouldn't be actionable. The button will appear faded and won't respond to user interaction. Disabled buttons can cause accessibility issues (disabled elements are not in the tab order) so wherever possible, avoid using `isDisabled`. Instead, use [validation](/components/button/usage) or other techniques to show users how to proceed.",
|
|
47
|
+
source: path.resolve(
|
|
48
|
+
__dirname,
|
|
49
|
+
'./examples/constellation/new-button/button/button-disabled.tsx',
|
|
50
|
+
),
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
name: 'Danger',
|
|
54
|
+
description:
|
|
55
|
+
'A danger button appears as a final confirmation for a destructive and irreversible action, such as deleting.',
|
|
56
|
+
source: path.resolve(
|
|
57
|
+
__dirname,
|
|
58
|
+
'./examples/constellation/new-button/button/button-danger.tsx',
|
|
59
|
+
),
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: 'Icon after',
|
|
63
|
+
description: 'Display an icon after the text.',
|
|
64
|
+
source: path.resolve(
|
|
65
|
+
__dirname,
|
|
66
|
+
'./examples/constellation/new-button/button/button-with-icon-after.tsx',
|
|
67
|
+
),
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
keywords: ['button', 'action', 'click', 'submit', 'form', 'interactive', 'cta'],
|
|
71
|
+
categories: ['form', 'interaction'],
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
name: 'IconButton',
|
|
75
|
+
description:
|
|
76
|
+
'A button that displays only an icon with an optional tooltip. Perfect for toolbar actions, compact interfaces, and when space is limited.',
|
|
77
|
+
status: 'general-availability',
|
|
78
|
+
import: {
|
|
79
|
+
name: 'IconButton',
|
|
80
|
+
package: '@atlaskit/button/new',
|
|
81
|
+
type: 'named',
|
|
82
|
+
packagePath: path.resolve(__dirname),
|
|
83
|
+
packageJson: require('./package.json'),
|
|
84
|
+
},
|
|
85
|
+
usageGuidelines: [
|
|
86
|
+
'Use for toolbar actions and compact interfaces',
|
|
87
|
+
'Choose icons that clearly represent their function',
|
|
88
|
+
'Group related icon buttons together',
|
|
89
|
+
'Use sparingly to avoid visual clutter',
|
|
90
|
+
'Consider using tooltips for additional context',
|
|
91
|
+
'Always provide a meaningful label for accessibility',
|
|
92
|
+
'The icon should clearly represent the action it performs',
|
|
93
|
+
],
|
|
94
|
+
contentGuidelines: [
|
|
95
|
+
'Use clear, concise, descriptive labels',
|
|
96
|
+
'Use action verbs (e.g., "Edit item", "Delete comment")',
|
|
97
|
+
'Choose icons that are universally understood',
|
|
98
|
+
'Avoid using icons without labels in critical actions',
|
|
99
|
+
],
|
|
100
|
+
examples: [
|
|
101
|
+
{
|
|
102
|
+
name: 'Icon Button',
|
|
103
|
+
description: 'Icon Button example',
|
|
104
|
+
source: path.resolve(__dirname, './examples/ai/icon-button.tsx'),
|
|
105
|
+
},
|
|
106
|
+
],
|
|
107
|
+
keywords: ['button', 'icon', 'action', 'click', 'interactive', 'toolbar'],
|
|
108
|
+
categories: ['form', 'interaction'],
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
name: 'SplitButton',
|
|
112
|
+
description:
|
|
113
|
+
'A button that splits into a primary action and a dropdown menu. The main button performs the primary action, while the dropdown arrow reveals additional related actions.',
|
|
114
|
+
status: 'general-availability',
|
|
115
|
+
import: {
|
|
116
|
+
name: 'SplitButton',
|
|
117
|
+
package: '@atlaskit/button/new',
|
|
118
|
+
type: 'named',
|
|
119
|
+
packagePath: path.resolve(__dirname),
|
|
120
|
+
packageJson: require('./package.json'),
|
|
121
|
+
},
|
|
122
|
+
usageGuidelines: [
|
|
123
|
+
'Always must have exactly two children: `Button` and `DropdownMenu` that are related to each other',
|
|
124
|
+
'Use `shouldRenderToParent` on `DropdownMenu` for proper positioning',
|
|
125
|
+
'Make the primary action the most common or important action',
|
|
126
|
+
'Limit dropdown items to avoid overwhelming users',
|
|
127
|
+
],
|
|
128
|
+
contentGuidelines: [
|
|
129
|
+
'Use clear, action-oriented text for the primary button',
|
|
130
|
+
'Keep dropdown item labels concise and descriptive',
|
|
131
|
+
'Use consistent terminology across related actions',
|
|
132
|
+
],
|
|
133
|
+
accessibilityGuidelines: ['Provide descriptive labels for the IconButton trigger'],
|
|
134
|
+
examples: [
|
|
135
|
+
{
|
|
136
|
+
name: 'Split Button',
|
|
137
|
+
description: 'Split Button example',
|
|
138
|
+
source: path.resolve(__dirname, './examples/ai/split-button.tsx'),
|
|
139
|
+
},
|
|
140
|
+
],
|
|
141
|
+
keywords: ['button', 'split', 'dropdown', 'menu', 'action', 'options'],
|
|
142
|
+
categories: ['form', 'interaction'],
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
name: 'LinkButton',
|
|
146
|
+
description:
|
|
147
|
+
'A button that renders as an anchor tag for navigation. Combines the visual appearance of a button with the semantic behavior of a link.',
|
|
148
|
+
status: 'general-availability',
|
|
149
|
+
import: {
|
|
150
|
+
name: 'LinkButton',
|
|
151
|
+
package: '@atlaskit/button/new',
|
|
152
|
+
type: 'named',
|
|
153
|
+
packagePath: path.resolve(__dirname),
|
|
154
|
+
packageJson: require('./package.json'),
|
|
155
|
+
},
|
|
156
|
+
usageGuidelines: [
|
|
157
|
+
'Use for navigation actions that change the URL',
|
|
158
|
+
'Use for external links and internal navigation',
|
|
159
|
+
"Consider using regular buttons for actions that don't navigate",
|
|
160
|
+
'Provide clear visual indication of link behavior',
|
|
161
|
+
'Use consistent styling with other buttons when appropriate',
|
|
162
|
+
'Use for navigation actions that should look like buttons but behave like links',
|
|
163
|
+
'Perfect for external links, internal navigation, or any action that changes the URL',
|
|
164
|
+
],
|
|
165
|
+
contentGuidelines: [
|
|
166
|
+
'Use clear, descriptive text that indicates the destination',
|
|
167
|
+
'Be specific about where the link will take the user',
|
|
168
|
+
'Use action-oriented language when appropriate',
|
|
169
|
+
"Avoid generic terms like 'Click here' or 'Learn more'",
|
|
170
|
+
],
|
|
171
|
+
examples: [
|
|
172
|
+
{
|
|
173
|
+
name: 'Link Button',
|
|
174
|
+
description: 'Link Button example',
|
|
175
|
+
source: path.resolve(__dirname, './examples/ai/link-button.tsx'),
|
|
176
|
+
},
|
|
177
|
+
],
|
|
178
|
+
keywords: ['button', 'link', 'navigation', 'href', 'anchor'],
|
|
179
|
+
categories: ['form', 'navigation', 'interaction'],
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
name: 'ButtonGroup',
|
|
183
|
+
description:
|
|
184
|
+
'A component for grouping related buttons together with consistent spacing and alignment.',
|
|
185
|
+
status: 'general-availability',
|
|
186
|
+
import: {
|
|
187
|
+
name: 'ButtonGroup',
|
|
188
|
+
package: '@atlaskit/button/button-group',
|
|
189
|
+
type: 'default',
|
|
190
|
+
packagePath: path.resolve(__dirname),
|
|
191
|
+
packageJson: require('./package.json'),
|
|
192
|
+
},
|
|
193
|
+
usageGuidelines: [
|
|
194
|
+
'Use for related actions that belong together',
|
|
195
|
+
'Group buttons that perform similar or complementary actions',
|
|
196
|
+
'Maintain consistent spacing and alignment',
|
|
197
|
+
'Consider the visual hierarchy within the group',
|
|
198
|
+
"Don't group unrelated actions together",
|
|
199
|
+
'Use when you have multiple related actions that should be visually grouped',
|
|
200
|
+
'Provides consistent spacing and alignment between buttons',
|
|
201
|
+
],
|
|
202
|
+
contentGuidelines: [
|
|
203
|
+
'Ensure button labels are consistent in tone and style',
|
|
204
|
+
'Use parallel structure for related actions',
|
|
205
|
+
'Keep labels concise but descriptive',
|
|
206
|
+
'Consider the order of actions within the group',
|
|
207
|
+
],
|
|
208
|
+
examples: [
|
|
209
|
+
{
|
|
210
|
+
name: 'Button Group',
|
|
211
|
+
description: 'Button Group example',
|
|
212
|
+
source: path.resolve(__dirname, './examples/ai/button-group.tsx'),
|
|
213
|
+
},
|
|
214
|
+
],
|
|
215
|
+
keywords: ['button', 'group', 'container', 'layout', 'spacing'],
|
|
216
|
+
categories: ['form', 'layout', 'interaction'],
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
name: 'Button (Legacy)',
|
|
220
|
+
description:
|
|
221
|
+
'Legacy button component (deprecated). Use Button from @atlaskit/button/new instead.',
|
|
222
|
+
status: 'intent-to-deprecate',
|
|
223
|
+
import: {
|
|
224
|
+
name: 'Button',
|
|
225
|
+
package: '@atlaskit/button',
|
|
226
|
+
type: 'default',
|
|
227
|
+
packagePath: path.resolve(__dirname),
|
|
228
|
+
packageJson: require('./package.json'),
|
|
229
|
+
},
|
|
230
|
+
usageGuidelines: [
|
|
231
|
+
'Use the new Button component from @atlaskit/button/new instead',
|
|
232
|
+
'Migrate existing usage to the new Button API',
|
|
233
|
+
'Consider this component deprecated',
|
|
234
|
+
],
|
|
235
|
+
contentGuidelines: [
|
|
236
|
+
'Use action verbs that describe the interaction',
|
|
237
|
+
'Keep text concise (1-3 words ideal)',
|
|
238
|
+
"Avoid generic terms like 'Submit' or 'Click here'",
|
|
239
|
+
],
|
|
240
|
+
accessibilityGuidelines: [
|
|
241
|
+
'Always provide meaningful labels for screen readers',
|
|
242
|
+
'Provide loading state announcements for async actions',
|
|
243
|
+
],
|
|
244
|
+
examples: [
|
|
245
|
+
{
|
|
246
|
+
name: '99 Button Old Button',
|
|
247
|
+
description: '99 Button Old Button example',
|
|
248
|
+
source: path.resolve(__dirname, './examples/99-button-old-button.tsx'),
|
|
249
|
+
},
|
|
250
|
+
],
|
|
251
|
+
keywords: ['button', 'legacy', 'deprecated', 'action', 'click', 'submit', 'form'],
|
|
252
|
+
categories: ['form', 'interaction'],
|
|
253
|
+
},
|
|
254
|
+
];
|
|
255
|
+
|
|
256
|
+
export default documentation;
|
|
@@ -35,7 +35,6 @@
|
|
|
35
35
|
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
36
36
|
._bfhku5tj{background-color:var(--ds-background-discovery-bold,#964ac0)}
|
|
37
37
|
._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
|
|
38
|
-
._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
|
|
39
38
|
._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
|
|
40
39
|
._gy1p12x7{column-gap:var(--ds-space-075,6px)}
|
|
41
40
|
._gy1p1b66{column-gap:var(--ds-space-050,4px)}
|
|
@@ -50,7 +49,6 @@
|
|
|
50
49
|
._syazazsu{color:var(--ds-text-subtle,#505258)}
|
|
51
50
|
._vchhusvi{box-sizing:border-box}
|
|
52
51
|
._y3gn1h6o{text-align:center}
|
|
53
|
-
._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
|
|
54
52
|
._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}._105315cr:visited{color:var(--ds-text-inverse,#fff)}
|
|
55
53
|
._10531yd3:visited{color:var(--ds-text-warning-inverse,#292a2e)}
|
|
56
54
|
._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
|
|
@@ -29,8 +29,6 @@ var styles = {
|
|
|
29
29
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
30
30
|
disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
|
|
31
31
|
spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
|
|
32
|
-
buttonIconBeforeWithHack: "_bozgu2gc",
|
|
33
|
-
buttonIconAfterWithHack: "_y4tiu2gc",
|
|
34
32
|
buttonIconBefore: "_bozgutpp _gy1p12x7",
|
|
35
33
|
buttonIconAfter: "_y4tiutpp _gy1p12x7",
|
|
36
34
|
fullWidth: "_1bsb1osq"
|
|
@@ -138,15 +136,7 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
138
136
|
interactionName: interactionName
|
|
139
137
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
140
138
|
}, saferRest, {
|
|
141
|
-
xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore &&
|
|
142
|
-
//to remove when platform-button-icon-spacing-cleanup is removed
|
|
143
|
-
hasIconAfter && !(0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
|
|
144
|
-
//to remove when platform-button-icon-spacing-cleanup is removed
|
|
145
|
-
hasIconBefore && (0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
|
|
146
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
147
|
-
hasIconAfter && (0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
|
|
148
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
149
|
-
shouldFitContainer && styles.fullWidth)
|
|
139
|
+
xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
150
140
|
}), iconBefore && /*#__PURE__*/React.createElement(_content.default, {
|
|
151
141
|
type: "icon",
|
|
152
142
|
position: "before",
|
|
@@ -54,7 +54,6 @@
|
|
|
54
54
|
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
55
55
|
._bfhkvdtc{background-color:var(--ds-background-selected,#ff991f)}
|
|
56
56
|
._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
|
|
57
|
-
._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
|
|
58
57
|
._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
|
|
59
58
|
._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
|
|
60
59
|
._gy1p12x7{column-gap:var(--ds-space-075,6px)}
|
|
@@ -76,7 +75,6 @@
|
|
|
76
75
|
._vchhusvi{box-sizing:border-box}
|
|
77
76
|
._y3gn1h6o{text-align:center}
|
|
78
77
|
._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
|
|
79
|
-
._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
|
|
80
78
|
._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
|
|
81
79
|
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105315cr:visited{color:var(--ds-text-inverse,#fff)}
|
|
82
80
|
._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
|
|
@@ -39,8 +39,6 @@ var styles = {
|
|
|
39
39
|
loading: "_80om15jw",
|
|
40
40
|
iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
|
|
41
41
|
iconButtonCompact: "_4t3i1k8s _1bsb1k8s",
|
|
42
|
-
buttonIconBeforeWithHack: "_bozgu2gc",
|
|
43
|
-
buttonIconAfterWithHack: "_y4tiu2gc",
|
|
44
42
|
buttonIconBefore: "_bozgutpp _gy1p12x7",
|
|
45
43
|
buttonIconAfter: "_y4tiutpp _gy1p12x7",
|
|
46
44
|
splitButton: "_g0pbb4wl",
|
|
@@ -180,15 +178,7 @@ function (_ref, ref) {
|
|
|
180
178
|
// TODO: remove me once we kill color fallbacks
|
|
181
179
|
isSelected && appearance === 'warning' && selectedStyles.warning,
|
|
182
180
|
// TODO: remove me once we kill color fallbacks
|
|
183
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, shouldFitContainer && styles.fullWidth, hasIconBefore &&
|
|
184
|
-
//TODO Remove when platform-button-icon-spacing-cleanup is removed
|
|
185
|
-
hasIconAfter && !(0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
|
|
186
|
-
//TODO Remove when platform-button-icon-spacing-cleanup is removed
|
|
187
|
-
hasIconBefore && (0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
|
|
188
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
189
|
-
hasIconAfter && (0, _platformFeatureFlags.fg)('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
|
|
190
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
191
|
-
isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
|
|
181
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, shouldFitContainer && styles.fullWidth, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
|
|
192
182
|
isDisabled: (0, _platformFeatureFlags.fg)('platform-dst_fix_not_focusable_loading_button') ? isDisabled : isEffectivelyDisabled
|
|
193
183
|
}, (0, _platformFeatureFlags.fg)('platform-dst_fix_not_focusable_loading_button') && {
|
|
194
184
|
'aria-live': 'polite'
|
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
._18m915vq{overflow-y:hidden}
|
|
5
5
|
._1bto1l2s{text-overflow:ellipsis}
|
|
6
6
|
._1e0c1txw{display:flex}
|
|
7
|
-
._1he91b66{--ds--button--new-icon-padding-start:var(--ds-space-050,4px)}
|
|
8
|
-
._1he9v77o{--ds--button--new-icon-padding-start:var(--ds-space-025,2px)}
|
|
9
7
|
._1o9zidpf{flex-shrink:0}
|
|
10
8
|
._1o9zkb7n{flex-shrink:1}
|
|
11
9
|
._1reo15vq{overflow-x:hidden}
|
|
@@ -14,6 +12,4 @@
|
|
|
14
12
|
._o5721q9c{white-space:nowrap}
|
|
15
13
|
._tzy4idpf{opacity:0}
|
|
16
14
|
._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
|
|
17
|
-
._vwz4idpf{line-height:0}
|
|
18
|
-
._w7951b66{--ds--button--new-icon-padding-end:var(--ds-space-050,4px)}
|
|
19
|
-
._w795v77o{--ds--button--new-icon-padding-end:var(--ds-space-025,2px)}
|
|
15
|
+
._vwz4idpf{line-height:0}
|
|
@@ -9,14 +9,11 @@ exports.default = void 0;
|
|
|
9
9
|
require("./content.compiled.css");
|
|
10
10
|
var _runtime = require("@compiled/react/runtime");
|
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
|
12
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
12
|
var styles = {
|
|
14
13
|
text: "_1reo15vq _18m915vq _16jlkb7n _1o9zkb7n _1bto1l2s _o5721q9c",
|
|
15
14
|
icon: "_1e0c1txw _16jlidpf _1o9zidpf _1wpz1h6o _1wybidpf _vwz4idpf _uiztglyw",
|
|
16
15
|
common: "_v564g17y",
|
|
17
|
-
fade: "_tzy4idpf"
|
|
18
|
-
beforeIcon: "_1he91b66 _w795v77o",
|
|
19
|
-
afterIcon: "_1he9v77o _w7951b66"
|
|
16
|
+
fade: "_tzy4idpf"
|
|
20
17
|
};
|
|
21
18
|
/**
|
|
22
19
|
* __Content__
|
|
@@ -27,10 +24,9 @@ var Content = function Content(_ref) {
|
|
|
27
24
|
var children = _ref.children,
|
|
28
25
|
_ref$type = _ref.type,
|
|
29
26
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
|
30
|
-
isLoading = _ref.isLoading
|
|
31
|
-
position = _ref.position;
|
|
27
|
+
isLoading = _ref.isLoading;
|
|
32
28
|
return /*#__PURE__*/_react.default.createElement("span", {
|
|
33
|
-
className: (0, _runtime.ax)([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade
|
|
29
|
+
className: (0, _runtime.ax)([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade])
|
|
34
30
|
}, children);
|
|
35
31
|
};
|
|
36
32
|
var _default = exports.default = Content;
|
|
@@ -132,7 +132,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
|
|
|
132
132
|
action: 'clicked',
|
|
133
133
|
componentName: 'button',
|
|
134
134
|
packageName: "@atlaskit/button",
|
|
135
|
-
packageVersion: "
|
|
135
|
+
packageVersion: "23.10.2",
|
|
136
136
|
analyticsData: analyticsContext
|
|
137
137
|
});
|
|
138
138
|
|
|
@@ -35,7 +35,6 @@
|
|
|
35
35
|
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
36
36
|
._bfhku5tj{background-color:var(--ds-background-discovery-bold,#964ac0)}
|
|
37
37
|
._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
|
|
38
|
-
._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
|
|
39
38
|
._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
|
|
40
39
|
._gy1p12x7{column-gap:var(--ds-space-075,6px)}
|
|
41
40
|
._gy1p1b66{column-gap:var(--ds-space-050,4px)}
|
|
@@ -50,7 +49,6 @@
|
|
|
50
49
|
._syazazsu{color:var(--ds-text-subtle,#505258)}
|
|
51
50
|
._vchhusvi{box-sizing:border-box}
|
|
52
51
|
._y3gn1h6o{text-align:center}
|
|
53
|
-
._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
|
|
54
52
|
._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}._105315cr:visited{color:var(--ds-text-inverse,#fff)}
|
|
55
53
|
._10531yd3:visited{color:var(--ds-text-warning-inverse,#292a2e)}
|
|
56
54
|
._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
|
|
@@ -17,8 +17,6 @@ const styles = {
|
|
|
17
17
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
18
18
|
disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
|
|
19
19
|
spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
|
|
20
|
-
buttonIconBeforeWithHack: "_bozgu2gc",
|
|
21
|
-
buttonIconAfterWithHack: "_y4tiu2gc",
|
|
22
20
|
buttonIconBefore: "_bozgutpp _gy1p12x7",
|
|
23
21
|
buttonIconAfter: "_y4tiutpp _gy1p12x7",
|
|
24
22
|
fullWidth: "_1bsb1osq"
|
|
@@ -127,15 +125,7 @@ const LinkButtonBase = ({
|
|
|
127
125
|
interactionName: interactionName
|
|
128
126
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
129
127
|
}, saferRest, {
|
|
130
|
-
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore &&
|
|
131
|
-
//to remove when platform-button-icon-spacing-cleanup is removed
|
|
132
|
-
hasIconAfter && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
|
|
133
|
-
//to remove when platform-button-icon-spacing-cleanup is removed
|
|
134
|
-
hasIconBefore && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
|
|
135
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
136
|
-
hasIconAfter && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
|
|
137
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
138
|
-
shouldFitContainer && styles.fullWidth)
|
|
128
|
+
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
139
129
|
}), iconBefore && /*#__PURE__*/React.createElement(Content, {
|
|
140
130
|
type: "icon",
|
|
141
131
|
position: "before",
|
|
@@ -54,7 +54,6 @@
|
|
|
54
54
|
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
55
55
|
._bfhkvdtc{background-color:var(--ds-background-selected,#ff991f)}
|
|
56
56
|
._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
|
|
57
|
-
._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
|
|
58
57
|
._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
|
|
59
58
|
._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
|
|
60
59
|
._gy1p12x7{column-gap:var(--ds-space-075,6px)}
|
|
@@ -76,7 +75,6 @@
|
|
|
76
75
|
._vchhusvi{box-sizing:border-box}
|
|
77
76
|
._y3gn1h6o{text-align:center}
|
|
78
77
|
._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
|
|
79
|
-
._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
|
|
80
78
|
._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
|
|
81
79
|
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105315cr:visited{color:var(--ds-text-inverse,#fff)}
|
|
82
80
|
._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
|
|
@@ -27,8 +27,6 @@ const styles = {
|
|
|
27
27
|
loading: "_80om15jw",
|
|
28
28
|
iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
|
|
29
29
|
iconButtonCompact: "_4t3i1k8s _1bsb1k8s",
|
|
30
|
-
buttonIconBeforeWithHack: "_bozgu2gc",
|
|
31
|
-
buttonIconAfterWithHack: "_y4tiu2gc",
|
|
32
30
|
buttonIconBefore: "_bozgutpp _gy1p12x7",
|
|
33
31
|
buttonIconAfter: "_y4tiutpp _gy1p12x7",
|
|
34
32
|
splitButton: "_g0pbb4wl",
|
|
@@ -161,15 +159,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(
|
|
|
161
159
|
// TODO: remove me once we kill color fallbacks
|
|
162
160
|
isSelected && appearance === 'warning' && selectedStyles.warning,
|
|
163
161
|
// TODO: remove me once we kill color fallbacks
|
|
164
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && fg('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, shouldFitContainer && styles.fullWidth, hasIconBefore &&
|
|
165
|
-
//TODO Remove when platform-button-icon-spacing-cleanup is removed
|
|
166
|
-
hasIconAfter && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
|
|
167
|
-
//TODO Remove when platform-button-icon-spacing-cleanup is removed
|
|
168
|
-
hasIconBefore && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
|
|
169
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
170
|
-
hasIconAfter && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
|
|
171
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
172
|
-
isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
|
|
162
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && fg('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, shouldFitContainer && styles.fullWidth, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
|
|
173
163
|
isDisabled: fg('platform-dst_fix_not_focusable_loading_button') ? isDisabled : isEffectivelyDisabled
|
|
174
164
|
}, fg('platform-dst_fix_not_focusable_loading_button') && {
|
|
175
165
|
'aria-live': 'polite'
|
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
._18m915vq{overflow-y:hidden}
|
|
5
5
|
._1bto1l2s{text-overflow:ellipsis}
|
|
6
6
|
._1e0c1txw{display:flex}
|
|
7
|
-
._1he91b66{--ds--button--new-icon-padding-start:var(--ds-space-050,4px)}
|
|
8
|
-
._1he9v77o{--ds--button--new-icon-padding-start:var(--ds-space-025,2px)}
|
|
9
7
|
._1o9zidpf{flex-shrink:0}
|
|
10
8
|
._1o9zkb7n{flex-shrink:1}
|
|
11
9
|
._1reo15vq{overflow-x:hidden}
|
|
@@ -14,6 +12,4 @@
|
|
|
14
12
|
._o5721q9c{white-space:nowrap}
|
|
15
13
|
._tzy4idpf{opacity:0}
|
|
16
14
|
._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
|
|
17
|
-
._vwz4idpf{line-height:0}
|
|
18
|
-
._w7951b66{--ds--button--new-icon-padding-end:var(--ds-space-050,4px)}
|
|
19
|
-
._w795v77o{--ds--button--new-icon-padding-end:var(--ds-space-025,2px)}
|
|
15
|
+
._vwz4idpf{line-height:0}
|
|
@@ -2,14 +2,11 @@
|
|
|
2
2
|
import "./content.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
const styles = {
|
|
7
6
|
text: "_1reo15vq _18m915vq _16jlkb7n _1o9zkb7n _1bto1l2s _o5721q9c",
|
|
8
7
|
icon: "_1e0c1txw _16jlidpf _1o9zidpf _1wpz1h6o _1wybidpf _vwz4idpf _uiztglyw",
|
|
9
8
|
common: "_v564g17y",
|
|
10
|
-
fade: "_tzy4idpf"
|
|
11
|
-
beforeIcon: "_1he91b66 _w795v77o",
|
|
12
|
-
afterIcon: "_1he9v77o _w7951b66"
|
|
9
|
+
fade: "_tzy4idpf"
|
|
13
10
|
};
|
|
14
11
|
/**
|
|
15
12
|
* __Content__
|
|
@@ -19,11 +16,10 @@ const styles = {
|
|
|
19
16
|
const Content = ({
|
|
20
17
|
children,
|
|
21
18
|
type = 'text',
|
|
22
|
-
isLoading
|
|
23
|
-
position
|
|
19
|
+
isLoading
|
|
24
20
|
}) => {
|
|
25
21
|
return /*#__PURE__*/React.createElement("span", {
|
|
26
|
-
className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade
|
|
22
|
+
className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade])
|
|
27
23
|
}, children);
|
|
28
24
|
};
|
|
29
25
|
export default Content;
|
|
@@ -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: "
|
|
122
|
+
packageVersion: "23.10.2",
|
|
123
123
|
analyticsData: analyticsContext
|
|
124
124
|
});
|
|
125
125
|
|
|
@@ -35,7 +35,6 @@
|
|
|
35
35
|
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
36
36
|
._bfhku5tj{background-color:var(--ds-background-discovery-bold,#964ac0)}
|
|
37
37
|
._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
|
|
38
|
-
._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
|
|
39
38
|
._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
|
|
40
39
|
._gy1p12x7{column-gap:var(--ds-space-075,6px)}
|
|
41
40
|
._gy1p1b66{column-gap:var(--ds-space-050,4px)}
|
|
@@ -50,7 +49,6 @@
|
|
|
50
49
|
._syazazsu{color:var(--ds-text-subtle,#505258)}
|
|
51
50
|
._vchhusvi{box-sizing:border-box}
|
|
52
51
|
._y3gn1h6o{text-align:center}
|
|
53
|
-
._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
|
|
54
52
|
._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}._105315cr:visited{color:var(--ds-text-inverse,#fff)}
|
|
55
53
|
._10531yd3:visited{color:var(--ds-text-warning-inverse,#292a2e)}
|
|
56
54
|
._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
|
|
@@ -20,8 +20,6 @@ var styles = {
|
|
|
20
20
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
21
21
|
disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
|
|
22
22
|
spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
|
|
23
|
-
buttonIconBeforeWithHack: "_bozgu2gc",
|
|
24
|
-
buttonIconAfterWithHack: "_y4tiu2gc",
|
|
25
23
|
buttonIconBefore: "_bozgutpp _gy1p12x7",
|
|
26
24
|
buttonIconAfter: "_y4tiutpp _gy1p12x7",
|
|
27
25
|
fullWidth: "_1bsb1osq"
|
|
@@ -129,15 +127,7 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
129
127
|
interactionName: interactionName
|
|
130
128
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
131
129
|
}, saferRest, {
|
|
132
|
-
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore &&
|
|
133
|
-
//to remove when platform-button-icon-spacing-cleanup is removed
|
|
134
|
-
hasIconAfter && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
|
|
135
|
-
//to remove when platform-button-icon-spacing-cleanup is removed
|
|
136
|
-
hasIconBefore && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
|
|
137
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
138
|
-
hasIconAfter && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
|
|
139
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
140
|
-
shouldFitContainer && styles.fullWidth)
|
|
130
|
+
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
141
131
|
}), iconBefore && /*#__PURE__*/React.createElement(Content, {
|
|
142
132
|
type: "icon",
|
|
143
133
|
position: "before",
|
|
@@ -54,7 +54,6 @@
|
|
|
54
54
|
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
55
55
|
._bfhkvdtc{background-color:var(--ds-background-selected,#ff991f)}
|
|
56
56
|
._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
|
|
57
|
-
._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
|
|
58
57
|
._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
|
|
59
58
|
._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
|
|
60
59
|
._gy1p12x7{column-gap:var(--ds-space-075,6px)}
|
|
@@ -76,7 +75,6 @@
|
|
|
76
75
|
._vchhusvi{box-sizing:border-box}
|
|
77
76
|
._y3gn1h6o{text-align:center}
|
|
78
77
|
._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
|
|
79
|
-
._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
|
|
80
78
|
._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
|
|
81
79
|
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105315cr:visited{color:var(--ds-text-inverse,#fff)}
|
|
82
80
|
._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
|
|
@@ -30,8 +30,6 @@ var styles = {
|
|
|
30
30
|
loading: "_80om15jw",
|
|
31
31
|
iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
|
|
32
32
|
iconButtonCompact: "_4t3i1k8s _1bsb1k8s",
|
|
33
|
-
buttonIconBeforeWithHack: "_bozgu2gc",
|
|
34
|
-
buttonIconAfterWithHack: "_y4tiu2gc",
|
|
35
33
|
buttonIconBefore: "_bozgutpp _gy1p12x7",
|
|
36
34
|
buttonIconAfter: "_y4tiutpp _gy1p12x7",
|
|
37
35
|
splitButton: "_g0pbb4wl",
|
|
@@ -171,15 +169,7 @@ function (_ref, ref) {
|
|
|
171
169
|
// TODO: remove me once we kill color fallbacks
|
|
172
170
|
isSelected && appearance === 'warning' && selectedStyles.warning,
|
|
173
171
|
// TODO: remove me once we kill color fallbacks
|
|
174
|
-
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && fg('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, shouldFitContainer && styles.fullWidth, hasIconBefore &&
|
|
175
|
-
//TODO Remove when platform-button-icon-spacing-cleanup is removed
|
|
176
|
-
hasIconAfter && !fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfterWithHack,
|
|
177
|
-
//TODO Remove when platform-button-icon-spacing-cleanup is removed
|
|
178
|
-
hasIconBefore && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconBefore,
|
|
179
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
180
|
-
hasIconAfter && fg('platform-button-icon-spacing-cleanup') && styles.buttonIconAfter,
|
|
181
|
-
//to keep when platform-button-icon-spacing-cleanup is removed
|
|
182
|
-
isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
|
|
172
|
+
isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, spacing === 'compact' && fg('platform-dst-shape-theme-default') && styles.spacingCompactT26Shape, shouldFitContainer && styles.fullWidth, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
|
|
183
173
|
isDisabled: fg('platform-dst_fix_not_focusable_loading_button') ? isDisabled : isEffectivelyDisabled
|
|
184
174
|
}, fg('platform-dst_fix_not_focusable_loading_button') && {
|
|
185
175
|
'aria-live': 'polite'
|
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
._18m915vq{overflow-y:hidden}
|
|
5
5
|
._1bto1l2s{text-overflow:ellipsis}
|
|
6
6
|
._1e0c1txw{display:flex}
|
|
7
|
-
._1he91b66{--ds--button--new-icon-padding-start:var(--ds-space-050,4px)}
|
|
8
|
-
._1he9v77o{--ds--button--new-icon-padding-start:var(--ds-space-025,2px)}
|
|
9
7
|
._1o9zidpf{flex-shrink:0}
|
|
10
8
|
._1o9zkb7n{flex-shrink:1}
|
|
11
9
|
._1reo15vq{overflow-x:hidden}
|
|
@@ -14,6 +12,4 @@
|
|
|
14
12
|
._o5721q9c{white-space:nowrap}
|
|
15
13
|
._tzy4idpf{opacity:0}
|
|
16
14
|
._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
|
|
17
|
-
._vwz4idpf{line-height:0}
|
|
18
|
-
._w7951b66{--ds--button--new-icon-padding-end:var(--ds-space-050,4px)}
|
|
19
|
-
._w795v77o{--ds--button--new-icon-padding-end:var(--ds-space-025,2px)}
|
|
15
|
+
._vwz4idpf{line-height:0}
|
|
@@ -2,14 +2,11 @@
|
|
|
2
2
|
import "./content.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
var styles = {
|
|
7
6
|
text: "_1reo15vq _18m915vq _16jlkb7n _1o9zkb7n _1bto1l2s _o5721q9c",
|
|
8
7
|
icon: "_1e0c1txw _16jlidpf _1o9zidpf _1wpz1h6o _1wybidpf _vwz4idpf _uiztglyw",
|
|
9
8
|
common: "_v564g17y",
|
|
10
|
-
fade: "_tzy4idpf"
|
|
11
|
-
beforeIcon: "_1he91b66 _w795v77o",
|
|
12
|
-
afterIcon: "_1he9v77o _w7951b66"
|
|
9
|
+
fade: "_tzy4idpf"
|
|
13
10
|
};
|
|
14
11
|
/**
|
|
15
12
|
* __Content__
|
|
@@ -20,10 +17,9 @@ var Content = function Content(_ref) {
|
|
|
20
17
|
var children = _ref.children,
|
|
21
18
|
_ref$type = _ref.type,
|
|
22
19
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
|
23
|
-
isLoading = _ref.isLoading
|
|
24
|
-
position = _ref.position;
|
|
20
|
+
isLoading = _ref.isLoading;
|
|
25
21
|
return /*#__PURE__*/React.createElement("span", {
|
|
26
|
-
className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade
|
|
22
|
+
className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade])
|
|
27
23
|
}, children);
|
|
28
24
|
};
|
|
29
25
|
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: "
|
|
128
|
+
packageVersion: "23.10.2",
|
|
129
129
|
analyticsData: analyticsContext
|
|
130
130
|
});
|
|
131
131
|
|
|
@@ -14,5 +14,5 @@ type ContentProps = {
|
|
|
14
14
|
*
|
|
15
15
|
* Used for slots within a Button, including icons and text content.
|
|
16
16
|
*/
|
|
17
|
-
declare const Content: ({ children, type, isLoading
|
|
17
|
+
declare const Content: ({ children, type, isLoading }: ContentProps) => JSX.Element;
|
|
18
18
|
export default Content;
|
|
@@ -14,5 +14,5 @@ type ContentProps = {
|
|
|
14
14
|
*
|
|
15
15
|
* Used for slots within a Button, including icons and text content.
|
|
16
16
|
*/
|
|
17
|
-
declare const Content: ({ children, type, isLoading
|
|
17
|
+
declare const Content: ({ children, type, isLoading }: ContentProps) => JSX.Element;
|
|
18
18
|
export default Content;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/button",
|
|
3
|
-
"version": "23.10.
|
|
3
|
+
"version": "23.10.3",
|
|
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/"
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"@atlaskit/css": "^0.19.0",
|
|
79
79
|
"@atlaskit/ds-lib": "^6.0.0",
|
|
80
80
|
"@atlaskit/focus-ring": "^3.0.0",
|
|
81
|
-
"@atlaskit/icon": "^
|
|
81
|
+
"@atlaskit/icon": "^33.0.0",
|
|
82
82
|
"@atlaskit/interaction-context": "^3.1.0",
|
|
83
83
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
84
84
|
"@atlaskit/primitives": "^18.0.0",
|
|
@@ -100,8 +100,8 @@
|
|
|
100
100
|
"@af/visual-regression": "workspace:^",
|
|
101
101
|
"@atlaskit/app-provider": "^4.1.0",
|
|
102
102
|
"@atlaskit/checkbox": "^17.3.0",
|
|
103
|
-
"@atlaskit/docs": "^11.
|
|
104
|
-
"@atlaskit/dropdown-menu": "^16.
|
|
103
|
+
"@atlaskit/docs": "^11.7.0",
|
|
104
|
+
"@atlaskit/dropdown-menu": "^16.7.0",
|
|
105
105
|
"@atlaskit/form": "^15.4.0",
|
|
106
106
|
"@atlaskit/heading": "^5.3.0",
|
|
107
107
|
"@atlaskit/link": "^3.3.0",
|
|
@@ -112,6 +112,7 @@
|
|
|
112
112
|
"@atlaskit/toggle": "^15.2.0",
|
|
113
113
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
114
114
|
"@atlassian/ssr-tests": "workspace:^",
|
|
115
|
+
"@atlassian/structured-docs-types": "workspace:^",
|
|
115
116
|
"@testing-library/react": "^16.3.0",
|
|
116
117
|
"@testing-library/user-event": "^14.4.3",
|
|
117
118
|
"ast-types": "^0.13.3",
|
|
@@ -129,9 +130,6 @@
|
|
|
129
130
|
},
|
|
130
131
|
"platform-dst_fix_not_focusable_loading_button": {
|
|
131
132
|
"type": "boolean"
|
|
132
|
-
},
|
|
133
|
-
"platform-button-icon-spacing-cleanup": {
|
|
134
|
-
"type": "boolean"
|
|
135
133
|
}
|
|
136
134
|
}
|
|
137
135
|
}
|