@atlaskit/primitives 18.1.2 → 18.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/constellation/anchor/examples.mdx +1 -1
- package/constellation/anchor/usage.mdx +1 -1
- package/constellation/pressable/usage.mdx +3 -3
- package/constellation/text/examples.mdx +3 -3
- package/dist/cjs/compiled/components/anchor.js +1 -1
- package/dist/cjs/compiled/components/pressable.js +3 -3
- package/dist/cjs/components/anchor.js +1 -1
- package/dist/cjs/components/pressable.js +1 -1
- package/dist/es2019/compiled/components/anchor.js +1 -1
- package/dist/es2019/compiled/components/pressable.js +2 -2
- package/dist/es2019/components/anchor.js +1 -1
- package/dist/es2019/components/pressable.js +1 -1
- package/dist/esm/compiled/components/anchor.js +1 -1
- package/dist/esm/compiled/components/pressable.js +2 -2
- package/dist/esm/components/anchor.js +1 -1
- package/dist/esm/components/pressable.js +1 -1
- package/package.json +17 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/primitives
|
|
2
2
|
|
|
3
|
+
## 18.1.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 18.1.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`02483200273ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02483200273ec) -
|
|
14
|
+
Enrol all Design System UI packages into the React Compiler with platform gating via
|
|
15
|
+
isReactCompilerActivePlatform.
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 18.1.2
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -57,7 +57,7 @@ global styles.
|
|
|
57
57
|
## Basic styling
|
|
58
58
|
|
|
59
59
|
Anchor can be styled further using the design system styling API using
|
|
60
|
-
[cssMap](/components/css/
|
|
60
|
+
[cssMap](/components/css/overview).
|
|
61
61
|
|
|
62
62
|
<Example Component={AnchorBasic} packageName="@atlaskit/primitives/anchor" />
|
|
63
63
|
|
|
@@ -113,4 +113,4 @@ accessibility. For more information see
|
|
|
113
113
|
|
|
114
114
|
- Use existing components such as [link](/components/link/examples) or
|
|
115
115
|
[link button](/components/button/link-button/examples) wherever possible.
|
|
116
|
-
- Use [pressable primitive for custom buttons](/components/primitives/
|
|
116
|
+
- Use [pressable primitive for custom buttons](/components/primitives/pressable/usage).
|
|
@@ -95,7 +95,7 @@ Pressable is meant for on-page actions such as opening modals or submitting form
|
|
|
95
95
|
something that navigates to a new page, use a component that renders a semantically correct HTML
|
|
96
96
|
`<a>` element such as:
|
|
97
97
|
|
|
98
|
-
- The [link](/components/primitives/
|
|
98
|
+
- The [link](/components/primitives/anchor/examples) component for standard text links.
|
|
99
99
|
- The [anchor](/components/primitives/anchor/examples) primitive to create custom links.
|
|
100
100
|
|
|
101
101
|
Also, don't add underlines to a pressable. This makes the button appear to be a link, which can be
|
|
@@ -118,11 +118,11 @@ For example, _Change issue color to yellow_ instead of _yellow_.
|
|
|
118
118
|
### Follow other label and UI content guidance
|
|
119
119
|
|
|
120
120
|
Follow label and content guidelines for [buttons](/components/button/usage#content-guidelines).
|
|
121
|
-
Review the [general UI text guidance](/foundations/accessibility
|
|
121
|
+
Review the [general UI text guidance](/foundations/accessibility#meaningful-text) for specific
|
|
122
122
|
questions.
|
|
123
123
|
|
|
124
124
|
## Related
|
|
125
125
|
|
|
126
126
|
- Use existing components such as [buttons](/components/button/examples) or
|
|
127
127
|
[menus](/components/menu/examples) for most actions in Atlassian apps.
|
|
128
|
-
- Use the [anchor primitive for custom links](/components/primitives/
|
|
128
|
+
- Use the [anchor primitive for custom links](/components/primitives/pressable/usage).
|
|
@@ -49,7 +49,7 @@ component, color will automatically inherit from its parent.
|
|
|
49
49
|
|
|
50
50
|
Font weight defaults to regular (400) and can be set using the `weight` prop. More information about
|
|
51
51
|
the available weights can be found on the
|
|
52
|
-
[typography foundations page](/foundations/typography
|
|
52
|
+
[typography foundations page](/foundations/typography#body-font-weight).
|
|
53
53
|
|
|
54
54
|
Note: Text supports the semibold weight, however due to differences between font stacks across
|
|
55
55
|
different operating systems, semibold text may render as bold. We recommend using regular, medium,
|
|
@@ -76,13 +76,13 @@ Text does not apply any vertical margin or spacing. To control space between tex
|
|
|
76
76
|
use a [stack component](/components/primitives/stack).
|
|
77
77
|
|
|
78
78
|
The available values for paragraph spacing are outlined in the
|
|
79
|
-
[Typography foundations](/foundations/typography
|
|
79
|
+
[Typography foundations](/foundations/typography#body) page.
|
|
80
80
|
|
|
81
81
|
<Example Component={TextSpacing} packageName="@atlaskit/primitives" />
|
|
82
82
|
|
|
83
83
|
## Truncation
|
|
84
84
|
|
|
85
|
-
[Avoid truncation](/content/language-and-grammar
|
|
85
|
+
[Avoid truncation](/foundations/content/language-and-grammar#truncation) whenever possible.
|
|
86
86
|
|
|
87
87
|
If truncation cannot be avoided, for example when displaying user-generated content, use the
|
|
88
88
|
`maxLines` prop to indicate how text should be truncated.
|
|
@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
70
70
|
action: 'clicked',
|
|
71
71
|
componentName: componentName || 'Anchor',
|
|
72
72
|
packageName: "@atlaskit/primitives",
|
|
73
|
-
packageVersion: "
|
|
73
|
+
packageVersion: "0.0.0-development",
|
|
74
74
|
analyticsData: analyticsContext,
|
|
75
75
|
actionSubject: 'link'
|
|
76
76
|
});
|
|
@@ -15,7 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
15
15
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
16
16
|
var _react2 = require("@compiled/react");
|
|
17
17
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
18
|
-
var
|
|
18
|
+
var _isSafari = require("@atlaskit/ds-lib/is-safari");
|
|
19
19
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
20
20
|
var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
|
|
21
21
|
var _focusable = _interopRequireDefault(require("./focusable"));
|
|
@@ -61,7 +61,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
61
61
|
action: 'clicked',
|
|
62
62
|
componentName: componentName || 'Pressable',
|
|
63
63
|
packageName: "@atlaskit/primitives",
|
|
64
|
-
packageVersion: "
|
|
64
|
+
packageVersion: "0.0.0-development",
|
|
65
65
|
analyticsData: analyticsContext,
|
|
66
66
|
actionSubject: 'button'
|
|
67
67
|
});
|
|
@@ -78,7 +78,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
78
78
|
// Adding a tabIndex of 0 to the button will allow it to be focused on click.
|
|
79
79
|
// This is a known issue in Safari that is meant to be "intended", see https://bugs.webkit.org/show_bug.cgi?id=22261
|
|
80
80
|
,
|
|
81
|
-
tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (0,
|
|
81
|
+
tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (0, _isSafari.isSafari)() && !isDisabled ? 0 : undefined,
|
|
82
82
|
style: style
|
|
83
83
|
}, safeHtmlAttributes, {
|
|
84
84
|
type: type,
|
|
@@ -105,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
105
105
|
action: 'clicked',
|
|
106
106
|
componentName: componentName || 'Anchor',
|
|
107
107
|
packageName: "@atlaskit/primitives",
|
|
108
|
-
packageVersion: "
|
|
108
|
+
packageVersion: "0.0.0-development",
|
|
109
109
|
analyticsData: analyticsContext,
|
|
110
110
|
actionSubject: 'link'
|
|
111
111
|
});
|
|
@@ -97,7 +97,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
97
97
|
action: 'clicked',
|
|
98
98
|
componentName: componentName || 'Pressable',
|
|
99
99
|
packageName: "@atlaskit/primitives",
|
|
100
|
-
packageVersion: "
|
|
100
|
+
packageVersion: "0.0.0-development",
|
|
101
101
|
analyticsData: analyticsContext,
|
|
102
102
|
actionSubject: 'button'
|
|
103
103
|
});
|
|
@@ -56,7 +56,7 @@ const AnchorNoRef = ({
|
|
|
56
56
|
action: 'clicked',
|
|
57
57
|
componentName: componentName || 'Anchor',
|
|
58
58
|
packageName: "@atlaskit/primitives",
|
|
59
|
-
packageVersion: "
|
|
59
|
+
packageVersion: "0.0.0-development",
|
|
60
60
|
analyticsData: analyticsContext,
|
|
61
61
|
actionSubject: 'link'
|
|
62
62
|
});
|
|
@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
6
6
|
import { forwardRef, useCallback, useContext } from 'react';
|
|
7
7
|
import { cx } from '@compiled/react';
|
|
8
8
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
9
|
-
import { isSafari } from '@atlaskit/ds-lib/
|
|
9
|
+
import { isSafari } from '@atlaskit/ds-lib/is-safari';
|
|
10
10
|
import noop from '@atlaskit/ds-lib/noop';
|
|
11
11
|
import InteractionContext from '@atlaskit/interaction-context';
|
|
12
12
|
import Focusable from './focusable';
|
|
@@ -48,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
|
|
|
48
48
|
action: 'clicked',
|
|
49
49
|
componentName: componentName || 'Pressable',
|
|
50
50
|
packageName: "@atlaskit/primitives",
|
|
51
|
-
packageVersion: "
|
|
51
|
+
packageVersion: "0.0.0-development",
|
|
52
52
|
analyticsData: analyticsContext,
|
|
53
53
|
actionSubject: 'button'
|
|
54
54
|
});
|
|
@@ -94,7 +94,7 @@ const AnchorNoRef = ({
|
|
|
94
94
|
action: 'clicked',
|
|
95
95
|
componentName: componentName || 'Anchor',
|
|
96
96
|
packageName: "@atlaskit/primitives",
|
|
97
|
-
packageVersion: "
|
|
97
|
+
packageVersion: "0.0.0-development",
|
|
98
98
|
analyticsData: analyticsContext,
|
|
99
99
|
actionSubject: 'link'
|
|
100
100
|
});
|
|
@@ -86,7 +86,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
|
|
|
86
86
|
action: 'clicked',
|
|
87
87
|
componentName: componentName || 'Pressable',
|
|
88
88
|
packageName: "@atlaskit/primitives",
|
|
89
|
-
packageVersion: "
|
|
89
|
+
packageVersion: "0.0.0-development",
|
|
90
90
|
analyticsData: analyticsContext,
|
|
91
91
|
actionSubject: 'button'
|
|
92
92
|
});
|
|
@@ -61,7 +61,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
61
61
|
action: 'clicked',
|
|
62
62
|
componentName: componentName || 'Anchor',
|
|
63
63
|
packageName: "@atlaskit/primitives",
|
|
64
|
-
packageVersion: "
|
|
64
|
+
packageVersion: "0.0.0-development",
|
|
65
65
|
analyticsData: analyticsContext,
|
|
66
66
|
actionSubject: 'link'
|
|
67
67
|
});
|
|
@@ -9,7 +9,7 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
9
9
|
import { forwardRef, useCallback, useContext } from 'react';
|
|
10
10
|
import { cx } from '@compiled/react';
|
|
11
11
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
12
|
-
import { isSafari } from '@atlaskit/ds-lib/
|
|
12
|
+
import { isSafari } from '@atlaskit/ds-lib/is-safari';
|
|
13
13
|
import noop from '@atlaskit/ds-lib/noop';
|
|
14
14
|
import InteractionContext from '@atlaskit/interaction-context';
|
|
15
15
|
import Focusable from './focusable';
|
|
@@ -52,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
52
52
|
action: 'clicked',
|
|
53
53
|
componentName: componentName || 'Pressable',
|
|
54
54
|
packageName: "@atlaskit/primitives",
|
|
55
|
-
packageVersion: "
|
|
55
|
+
packageVersion: "0.0.0-development",
|
|
56
56
|
analyticsData: analyticsContext,
|
|
57
57
|
actionSubject: 'button'
|
|
58
58
|
});
|
|
@@ -99,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
99
99
|
action: 'clicked',
|
|
100
100
|
componentName: componentName || 'Anchor',
|
|
101
101
|
packageName: "@atlaskit/primitives",
|
|
102
|
-
packageVersion: "
|
|
102
|
+
packageVersion: "0.0.0-development",
|
|
103
103
|
analyticsData: analyticsContext,
|
|
104
104
|
actionSubject: 'link'
|
|
105
105
|
});
|
|
@@ -91,7 +91,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
91
91
|
action: 'clicked',
|
|
92
92
|
componentName: componentName || 'Pressable',
|
|
93
93
|
packageName: "@atlaskit/primitives",
|
|
94
|
-
packageVersion: "
|
|
94
|
+
packageVersion: "0.0.0-development",
|
|
95
95
|
analyticsData: analyticsContext,
|
|
96
96
|
actionSubject: 'button'
|
|
97
97
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/primitives",
|
|
3
|
-
"version": "18.1.
|
|
3
|
+
"version": "18.1.4",
|
|
4
4
|
"description": "Primitives are token-backed low-level building blocks.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -17,6 +17,13 @@
|
|
|
17
17
|
],
|
|
18
18
|
"atlaskit:src": "src/index.tsx",
|
|
19
19
|
"atlassian": {
|
|
20
|
+
"react-compiler": {
|
|
21
|
+
"enabled": true,
|
|
22
|
+
"gating": {
|
|
23
|
+
"source": "@atlassian/react-compiler-gating",
|
|
24
|
+
"importSpecifierName": "isReactCompilerActivePlatform"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
20
27
|
"team": "Design System Team",
|
|
21
28
|
"website": {
|
|
22
29
|
"name": "Primitives",
|
|
@@ -135,9 +142,9 @@
|
|
|
135
142
|
"@atlaskit/analytics-next": "^11.2.0",
|
|
136
143
|
"@atlaskit/app-provider": "^4.2.0",
|
|
137
144
|
"@atlaskit/css": "^0.19.0",
|
|
138
|
-
"@atlaskit/ds-lib": "^
|
|
145
|
+
"@atlaskit/ds-lib": "^7.0.0",
|
|
139
146
|
"@atlaskit/interaction-context": "^3.1.0",
|
|
140
|
-
"@atlaskit/tokens": "^
|
|
147
|
+
"@atlaskit/tokens": "^12.0.0",
|
|
141
148
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
142
149
|
"@babel/runtime": "^7.0.0",
|
|
143
150
|
"@compiled/react": "^0.20.0",
|
|
@@ -155,28 +162,29 @@
|
|
|
155
162
|
"@af/integration-testing": "workspace:^",
|
|
156
163
|
"@af/visual-regression": "workspace:^",
|
|
157
164
|
"@atlaskit/avatar": "^25.11.0",
|
|
158
|
-
"@atlaskit/button": "^23.
|
|
165
|
+
"@atlaskit/button": "^23.11.0",
|
|
159
166
|
"@atlaskit/checkbox": "^17.3.0",
|
|
160
167
|
"@atlaskit/code": "^17.4.0",
|
|
161
168
|
"@atlaskit/docs": "^11.7.0",
|
|
162
169
|
"@atlaskit/dropdown-menu": "^16.8.0",
|
|
163
170
|
"@atlaskit/flag": "^17.9.0",
|
|
164
171
|
"@atlaskit/form": "^15.5.0",
|
|
165
|
-
"@atlaskit/heading": "^5.
|
|
172
|
+
"@atlaskit/heading": "^5.4.0",
|
|
166
173
|
"@atlaskit/icon": "^34.0.0",
|
|
167
174
|
"@atlaskit/icon-object": "^7.5.0",
|
|
168
175
|
"@atlaskit/image": "^3.0.0",
|
|
169
|
-
"@atlaskit/link": "^3.
|
|
170
|
-
"@atlaskit/logo": "^
|
|
176
|
+
"@atlaskit/link": "^3.4.0",
|
|
177
|
+
"@atlaskit/logo": "^20.0.0",
|
|
171
178
|
"@atlaskit/lozenge": "^13.5.0",
|
|
172
179
|
"@atlaskit/motion": "^5.5.0",
|
|
173
180
|
"@atlaskit/range": "^10.0.0",
|
|
174
181
|
"@atlaskit/section-message": "^8.12.0",
|
|
175
|
-
"@atlaskit/textfield": "^8.
|
|
176
|
-
"@atlaskit/toggle": "^15.
|
|
182
|
+
"@atlaskit/textfield": "^8.3.0",
|
|
183
|
+
"@atlaskit/toggle": "^15.4.0",
|
|
177
184
|
"@atlaskit/tooltip": "^21.1.0",
|
|
178
185
|
"@atlassian/analytics-bridge": "^0.8.0",
|
|
179
186
|
"@atlassian/codegen": "^0.1.0",
|
|
187
|
+
"@atlassian/react-compiler-gating": "workspace:^",
|
|
180
188
|
"@atlassian/ssr-tests": "workspace:^",
|
|
181
189
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
182
190
|
"@testing-library/react": "^16.3.0",
|