@atlaskit/primitives 18.1.3 → 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 +6 -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/pressable.js +2 -2
- package/dist/es2019/compiled/components/pressable.js +1 -1
- package/dist/esm/compiled/components/pressable.js +1 -1
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -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.
|
|
@@ -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"));
|
|
@@ -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,
|
|
@@ -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';
|
|
@@ -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';
|
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/"
|
|
@@ -142,9 +142,9 @@
|
|
|
142
142
|
"@atlaskit/analytics-next": "^11.2.0",
|
|
143
143
|
"@atlaskit/app-provider": "^4.2.0",
|
|
144
144
|
"@atlaskit/css": "^0.19.0",
|
|
145
|
-
"@atlaskit/ds-lib": "^
|
|
145
|
+
"@atlaskit/ds-lib": "^7.0.0",
|
|
146
146
|
"@atlaskit/interaction-context": "^3.1.0",
|
|
147
|
-
"@atlaskit/tokens": "^
|
|
147
|
+
"@atlaskit/tokens": "^12.0.0",
|
|
148
148
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
149
149
|
"@babel/runtime": "^7.0.0",
|
|
150
150
|
"@compiled/react": "^0.20.0",
|
|
@@ -162,25 +162,25 @@
|
|
|
162
162
|
"@af/integration-testing": "workspace:^",
|
|
163
163
|
"@af/visual-regression": "workspace:^",
|
|
164
164
|
"@atlaskit/avatar": "^25.11.0",
|
|
165
|
-
"@atlaskit/button": "^23.
|
|
165
|
+
"@atlaskit/button": "^23.11.0",
|
|
166
166
|
"@atlaskit/checkbox": "^17.3.0",
|
|
167
167
|
"@atlaskit/code": "^17.4.0",
|
|
168
168
|
"@atlaskit/docs": "^11.7.0",
|
|
169
169
|
"@atlaskit/dropdown-menu": "^16.8.0",
|
|
170
170
|
"@atlaskit/flag": "^17.9.0",
|
|
171
171
|
"@atlaskit/form": "^15.5.0",
|
|
172
|
-
"@atlaskit/heading": "^5.
|
|
172
|
+
"@atlaskit/heading": "^5.4.0",
|
|
173
173
|
"@atlaskit/icon": "^34.0.0",
|
|
174
174
|
"@atlaskit/icon-object": "^7.5.0",
|
|
175
175
|
"@atlaskit/image": "^3.0.0",
|
|
176
|
-
"@atlaskit/link": "^3.
|
|
177
|
-
"@atlaskit/logo": "^
|
|
176
|
+
"@atlaskit/link": "^3.4.0",
|
|
177
|
+
"@atlaskit/logo": "^20.0.0",
|
|
178
178
|
"@atlaskit/lozenge": "^13.5.0",
|
|
179
179
|
"@atlaskit/motion": "^5.5.0",
|
|
180
180
|
"@atlaskit/range": "^10.0.0",
|
|
181
181
|
"@atlaskit/section-message": "^8.12.0",
|
|
182
|
-
"@atlaskit/textfield": "^8.
|
|
183
|
-
"@atlaskit/toggle": "^15.
|
|
182
|
+
"@atlaskit/textfield": "^8.3.0",
|
|
183
|
+
"@atlaskit/toggle": "^15.4.0",
|
|
184
184
|
"@atlaskit/tooltip": "^21.1.0",
|
|
185
185
|
"@atlassian/analytics-bridge": "^0.8.0",
|
|
186
186
|
"@atlassian/codegen": "^0.1.0",
|