@atlaskit/button 23.4.7 → 23.4.9
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 +16 -0
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/cjs/old-button/shared/css.js +1 -2
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/es2019/old-button/shared/css.js +1 -4
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/esm/old-button/shared/css.js +1 -4
- package/offerings.json +192 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 23.4.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`248faa32d4835`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/248faa32d4835) -
|
|
8
|
+
Internal changes to how borders are applied.
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 23.4.8
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`f452c6c97d1d6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f452c6c97d1d6) -
|
|
16
|
+
Internal change to remove gridSize reference.
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 23.4.7
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -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: "23.4.
|
|
135
|
+
packageVersion: "23.4.8",
|
|
136
136
|
analyticsData: analyticsContext
|
|
137
137
|
});
|
|
138
138
|
|
|
@@ -12,11 +12,10 @@ exports.overlayCss = void 0;
|
|
|
12
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
13
|
var _react = require("@emotion/react");
|
|
14
14
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
|
-
var _constants = require("@atlaskit/theme/constants");
|
|
16
15
|
var _colors = _interopRequireDefault(require("./colors"));
|
|
17
16
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
17
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
|
-
var gridSize =
|
|
18
|
+
var gridSize = 8;
|
|
20
19
|
var HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
|
|
21
20
|
|
|
22
21
|
// ## Button layout
|
|
@@ -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.4.
|
|
122
|
+
packageVersion: "23.4.8",
|
|
123
123
|
analyticsData: analyticsContext
|
|
124
124
|
});
|
|
125
125
|
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
3
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
|
-
import {
|
|
5
|
-
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
6
|
-
gridSize as getGridSize } from '@atlaskit/theme/constants';
|
|
7
4
|
import colors from './colors';
|
|
8
|
-
const gridSize =
|
|
5
|
+
const gridSize = 8;
|
|
9
6
|
const HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
|
|
10
7
|
|
|
11
8
|
// ## Button layout
|
|
@@ -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.4.
|
|
128
|
+
packageVersion: "23.4.8",
|
|
129
129
|
analyticsData: analyticsContext
|
|
130
130
|
});
|
|
131
131
|
|
|
@@ -4,11 +4,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
4
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
5
|
import { css } from '@emotion/react';
|
|
6
6
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
-
import {
|
|
8
|
-
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
9
|
-
gridSize as getGridSize } from '@atlaskit/theme/constants';
|
|
10
7
|
import colors from './colors';
|
|
11
|
-
var gridSize =
|
|
8
|
+
var gridSize = 8;
|
|
12
9
|
var HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
|
|
13
10
|
|
|
14
11
|
// ## Button layout
|
package/offerings.json
ADDED
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "Button",
|
|
4
|
+
"package": "@atlaskit/button",
|
|
5
|
+
"import": {
|
|
6
|
+
"name": "Button",
|
|
7
|
+
"package": "@atlaskit/button/new",
|
|
8
|
+
"type": "default"
|
|
9
|
+
},
|
|
10
|
+
"keywords": ["button", "action", "click", "submit", "form", "interactive", "cta"],
|
|
11
|
+
"categories": ["form", "interaction"],
|
|
12
|
+
"shortDescription": "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`.",
|
|
13
|
+
"status": "general-availability",
|
|
14
|
+
"accessibilityGuidelines": [
|
|
15
|
+
"Always provide meaningful labels for screen readers",
|
|
16
|
+
"Provide loading state announcements for async actions"
|
|
17
|
+
],
|
|
18
|
+
"usageGuidelines": [
|
|
19
|
+
"Use primary buttons for the main action on a page",
|
|
20
|
+
"Limit to one primary button per section",
|
|
21
|
+
"Use subtle buttons for secondary actions",
|
|
22
|
+
"Use danger buttons sparingly for destructive actions",
|
|
23
|
+
"Group related buttons together with ButtonGroup",
|
|
24
|
+
"Use action verbs that describe the interaction",
|
|
25
|
+
"Keep text concise (1-3 words ideal)",
|
|
26
|
+
"Use buttons for actions, links for navigation",
|
|
27
|
+
"Only include one primary call to action (CTA) per area"
|
|
28
|
+
],
|
|
29
|
+
"contentGuidelines": [
|
|
30
|
+
"Use action verbs that describe the interaction",
|
|
31
|
+
"Keep text concise (1-3 words ideal)",
|
|
32
|
+
"Avoid generic terms like \"Submit\" or \"Click here\"",
|
|
33
|
+
"Use sentence case",
|
|
34
|
+
"Use buttons for actions, links for navigation",
|
|
35
|
+
"Only include one primary call to action (CTA) per area",
|
|
36
|
+
"Start with the verb and specify what's being acted on",
|
|
37
|
+
"Don't use punctuation in button labels"
|
|
38
|
+
],
|
|
39
|
+
"generativeInstructions": "./docs/ai/button-instructions.md",
|
|
40
|
+
"examples": [
|
|
41
|
+
"./examples/constellation/new-button/button/button-disabled.tsx",
|
|
42
|
+
"./examples/constellation/new-button/button/button-danger.tsx",
|
|
43
|
+
"./examples/constellation/new-button/button/button-with-icon-after.tsx"
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "IconButton",
|
|
48
|
+
"package": "@atlaskit/button",
|
|
49
|
+
"import": {
|
|
50
|
+
"name": "IconButton",
|
|
51
|
+
"package": "@atlaskit/button/new",
|
|
52
|
+
"type": "named"
|
|
53
|
+
},
|
|
54
|
+
"keywords": ["button", "icon", "action", "click", "interactive", "toolbar"],
|
|
55
|
+
"categories": ["form", "interaction"],
|
|
56
|
+
"shortDescription": "A button that displays only an icon with an optional tooltip. Perfect for toolbar actions, compact interfaces, and when space is limited.",
|
|
57
|
+
"status": "general-availability",
|
|
58
|
+
"usageGuidelines": [
|
|
59
|
+
"Use for toolbar actions and compact interfaces",
|
|
60
|
+
"Choose icons that clearly represent their function",
|
|
61
|
+
"Group related icon buttons together",
|
|
62
|
+
"Use sparingly to avoid visual clutter",
|
|
63
|
+
"Consider using tooltips for additional context",
|
|
64
|
+
"Always provide a meaningful label for accessibility",
|
|
65
|
+
"The icon should clearly represent the action it performs"
|
|
66
|
+
],
|
|
67
|
+
"contentGuidelines": [
|
|
68
|
+
"Use clear, concise, descriptive labels",
|
|
69
|
+
"Use action verbs (e.g., \"Edit item\", \"Delete comment\")",
|
|
70
|
+
"Choose icons that are universally understood",
|
|
71
|
+
"Avoid using icons without labels in critical actions"
|
|
72
|
+
],
|
|
73
|
+
"generativeInstructions": "./docs/ai/icon-button-instructions.md",
|
|
74
|
+
"examples": ["./examples/ai/icon-button.tsx"]
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"name": "SplitButton",
|
|
78
|
+
"package": "@atlaskit/button",
|
|
79
|
+
"import": {
|
|
80
|
+
"name": "SplitButton",
|
|
81
|
+
"package": "@atlaskit/button/new",
|
|
82
|
+
"type": "named"
|
|
83
|
+
},
|
|
84
|
+
"keywords": ["button", "split", "dropdown", "menu", "action", "options"],
|
|
85
|
+
"categories": ["form", "interaction"],
|
|
86
|
+
"shortDescription": "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.",
|
|
87
|
+
"status": "general-availability",
|
|
88
|
+
"accessibilityGuidelines": [
|
|
89
|
+
"Provide descriptive labels for the IconButton trigger"
|
|
90
|
+
],
|
|
91
|
+
"usageGuidelines": [
|
|
92
|
+
"Always must have exactly two children: `Button` and `DropdownMenu` that are related to each other",
|
|
93
|
+
"Use `shouldRenderToParent` on `DropdownMenu` for proper positioning",
|
|
94
|
+
"Make the primary action the most common or important action",
|
|
95
|
+
"Limit dropdown items to avoid overwhelming users"
|
|
96
|
+
],
|
|
97
|
+
"contentGuidelines": [
|
|
98
|
+
"Use clear, action-oriented text for the primary button",
|
|
99
|
+
"Keep dropdown item labels concise and descriptive",
|
|
100
|
+
"Use consistent terminology across related actions"
|
|
101
|
+
],
|
|
102
|
+
"generativeInstructions": "./docs/ai/split-button-instructions.md",
|
|
103
|
+
"examples": ["./examples/ai/split-button.tsx"]
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"name": "LinkButton",
|
|
107
|
+
"package": "@atlaskit/button",
|
|
108
|
+
"import": {
|
|
109
|
+
"name": "LinkButton",
|
|
110
|
+
"package": "@atlaskit/button/new",
|
|
111
|
+
"type": "named"
|
|
112
|
+
},
|
|
113
|
+
"keywords": ["button", "link", "navigation", "href", "anchor"],
|
|
114
|
+
"categories": ["form", "navigation", "interaction"],
|
|
115
|
+
"shortDescription": "A button that renders as an anchor tag for navigation. Combines the visual appearance of a button with the semantic behavior of a link.",
|
|
116
|
+
"status": "general-availability",
|
|
117
|
+
"usageGuidelines": [
|
|
118
|
+
"Use for navigation actions that change the URL",
|
|
119
|
+
"Use for external links and internal navigation",
|
|
120
|
+
"Consider using regular buttons for actions that don't navigate",
|
|
121
|
+
"Provide clear visual indication of link behavior",
|
|
122
|
+
"Use consistent styling with other buttons when appropriate",
|
|
123
|
+
"Use for navigation actions that should look like buttons but behave like links",
|
|
124
|
+
"Perfect for external links, internal navigation, or any action that changes the URL"
|
|
125
|
+
],
|
|
126
|
+
"contentGuidelines": [
|
|
127
|
+
"Use clear, descriptive text that indicates the destination",
|
|
128
|
+
"Be specific about where the link will take the user",
|
|
129
|
+
"Use action-oriented language when appropriate",
|
|
130
|
+
"Avoid generic terms like 'Click here' or 'Learn more'"
|
|
131
|
+
],
|
|
132
|
+
"generativeInstructions": "./docs/ai/link-button-instructions.md",
|
|
133
|
+
"examples": ["./examples/ai/link-button.tsx"]
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"name": "ButtonGroup",
|
|
137
|
+
"package": "@atlaskit/button",
|
|
138
|
+
"import": {
|
|
139
|
+
"name": "ButtonGroup",
|
|
140
|
+
"package": "@atlaskit/button/button-group",
|
|
141
|
+
"type": "default"
|
|
142
|
+
},
|
|
143
|
+
"keywords": ["button", "group", "container", "layout", "spacing"],
|
|
144
|
+
"categories": ["form", "layout", "interaction"],
|
|
145
|
+
"shortDescription": "A component for grouping related buttons together with consistent spacing and alignment.",
|
|
146
|
+
"status": "general-availability",
|
|
147
|
+
"usageGuidelines": [
|
|
148
|
+
"Use for related actions that belong together",
|
|
149
|
+
"Group buttons that perform similar or complementary actions",
|
|
150
|
+
"Maintain consistent spacing and alignment",
|
|
151
|
+
"Consider the visual hierarchy within the group",
|
|
152
|
+
"Don't group unrelated actions together",
|
|
153
|
+
"Use when you have multiple related actions that should be visually grouped",
|
|
154
|
+
"Provides consistent spacing and alignment between buttons"
|
|
155
|
+
],
|
|
156
|
+
"contentGuidelines": [
|
|
157
|
+
"Ensure button labels are consistent in tone and style",
|
|
158
|
+
"Use parallel structure for related actions",
|
|
159
|
+
"Keep labels concise but descriptive",
|
|
160
|
+
"Consider the order of actions within the group"
|
|
161
|
+
],
|
|
162
|
+
"examples": ["./examples/ai/button-group.tsx"]
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"name": "Button (Legacy)",
|
|
166
|
+
"package": "@atlaskit/button",
|
|
167
|
+
"import": {
|
|
168
|
+
"name": "Button",
|
|
169
|
+
"package": "@atlaskit/button",
|
|
170
|
+
"type": "default"
|
|
171
|
+
},
|
|
172
|
+
"keywords": ["button", "legacy", "deprecated", "action", "click", "submit", "form"],
|
|
173
|
+
"categories": ["form", "interaction"],
|
|
174
|
+
"shortDescription": "Legacy button component (deprecated). Use Button from @atlaskit/button/new instead.",
|
|
175
|
+
"status": "intent-to-deprecate",
|
|
176
|
+
"accessibilityGuidelines": [
|
|
177
|
+
"Always provide meaningful labels for screen readers",
|
|
178
|
+
"Provide loading state announcements for async actions"
|
|
179
|
+
],
|
|
180
|
+
"usageGuidelines": [
|
|
181
|
+
"Use the new Button component from @atlaskit/button/new instead",
|
|
182
|
+
"Migrate existing usage to the new Button API",
|
|
183
|
+
"Consider this component deprecated"
|
|
184
|
+
],
|
|
185
|
+
"contentGuidelines": [
|
|
186
|
+
"Use action verbs that describe the interaction",
|
|
187
|
+
"Keep text concise (1-3 words ideal)",
|
|
188
|
+
"Avoid generic terms like 'Submit' or 'Click here'"
|
|
189
|
+
],
|
|
190
|
+
"examples": ["./examples/99-button-old-button.tsx"]
|
|
191
|
+
}
|
|
192
|
+
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/button",
|
|
3
|
-
"version": "23.4.
|
|
3
|
+
"version": "23.4.9",
|
|
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,12 +78,12 @@
|
|
|
78
78
|
"@atlaskit/css": "^0.14.0",
|
|
79
79
|
"@atlaskit/ds-lib": "^5.0.0",
|
|
80
80
|
"@atlaskit/focus-ring": "^3.0.0",
|
|
81
|
-
"@atlaskit/icon": "^28.
|
|
81
|
+
"@atlaskit/icon": "^28.2.0",
|
|
82
82
|
"@atlaskit/interaction-context": "^3.0.0",
|
|
83
83
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
84
84
|
"@atlaskit/primitives": "^14.14.0",
|
|
85
85
|
"@atlaskit/spinner": "^19.0.0",
|
|
86
|
-
"@atlaskit/theme": "^
|
|
86
|
+
"@atlaskit/theme": "^21.0.0",
|
|
87
87
|
"@atlaskit/tokens": "^6.3.0",
|
|
88
88
|
"@atlaskit/tooltip": "^20.4.0",
|
|
89
89
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
@@ -98,17 +98,17 @@
|
|
|
98
98
|
"@af/accessibility-testing": "workspace:^",
|
|
99
99
|
"@af/integration-testing": "workspace:^",
|
|
100
100
|
"@af/visual-regression": "workspace:^",
|
|
101
|
-
"@atlaskit/app-provider": "^3.
|
|
101
|
+
"@atlaskit/app-provider": "^3.2.0",
|
|
102
102
|
"@atlaskit/checkbox": "^17.1.0",
|
|
103
|
-
"@atlaskit/docs": "^11.
|
|
103
|
+
"@atlaskit/docs": "^11.1.0",
|
|
104
104
|
"@atlaskit/dropdown-menu": "^16.3.0",
|
|
105
|
-
"@atlaskit/form": "^12.
|
|
105
|
+
"@atlaskit/form": "^12.7.0",
|
|
106
106
|
"@atlaskit/heading": "^5.2.0",
|
|
107
107
|
"@atlaskit/link": "^3.2.0",
|
|
108
108
|
"@atlaskit/logo": "^19.7.0",
|
|
109
109
|
"@atlaskit/modal-dialog": "^14.3.0",
|
|
110
110
|
"@atlaskit/section-message": "^8.7.0",
|
|
111
|
-
"@atlaskit/select": "^21.
|
|
111
|
+
"@atlaskit/select": "^21.3.0",
|
|
112
112
|
"@atlaskit/ssr": "workspace:^",
|
|
113
113
|
"@atlaskit/toggle": "^15.1.0",
|
|
114
114
|
"@atlassian/ssr-tests": "^0.3.0",
|