@atlaskit/primitives 14.14.1 → 14.14.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 +15 -0
- package/dist/cjs/compiled/components/anchor.js +1 -1
- package/dist/cjs/compiled/components/focusable.compiled.css +4 -4
- package/dist/cjs/compiled/components/focusable.js +2 -2
- package/dist/cjs/compiled/components/pressable.js +1 -1
- package/dist/cjs/components/anchor.js +4 -3
- package/dist/cjs/components/pressable.js +4 -3
- package/dist/es2019/compiled/components/anchor.js +1 -1
- package/dist/es2019/compiled/components/focusable.compiled.css +4 -4
- package/dist/es2019/compiled/components/focusable.js +1 -1
- package/dist/es2019/compiled/components/pressable.js +1 -1
- package/dist/es2019/components/anchor.js +4 -3
- package/dist/es2019/components/pressable.js +4 -3
- package/dist/esm/compiled/components/anchor.js +1 -1
- package/dist/esm/compiled/components/focusable.compiled.css +4 -4
- package/dist/esm/compiled/components/focusable.js +2 -2
- package/dist/esm/compiled/components/pressable.js +1 -1
- package/dist/esm/components/anchor.js +4 -3
- package/dist/esm/components/pressable.js +4 -3
- package/offerings.json +298 -0
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/primitives
|
|
2
2
|
|
|
3
|
+
## 14.14.3
|
|
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
|
+
|
|
10
|
+
## 14.14.2
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`f0662cd7a143e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0662cd7a143e) -
|
|
15
|
+
Internal changes to how borders are applied.
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 14.14.1
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -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: "14.14.2",
|
|
74
74
|
analyticsData: analyticsContext,
|
|
75
75
|
actionSubject: 'link'
|
|
76
76
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
3
|
-
.
|
|
1
|
+
._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
|
|
2
|
+
._1ah31gt5:focus-visible{outline-offset:var(--_12dc40g)}
|
|
3
|
+
._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
|
|
4
4
|
._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
|
|
5
5
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
6
|
-
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}.
|
|
6
|
+
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}._2mwq1gt5:focus-visible{outline-offset:var(--_12dc40g)}}
|
|
@@ -43,13 +43,13 @@ var Focusable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
43
43
|
return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, safeHtmlAttributes, {
|
|
44
44
|
// @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
|
|
45
45
|
ref: ref,
|
|
46
|
-
className: (0, _runtime.ax)(["_mizu194a
|
|
46
|
+
className: (0, _runtime.ax)(["_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gt5 _2mwq1gt5", xcss])
|
|
47
47
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
48
48
|
,
|
|
49
49
|
|
|
50
50
|
"data-testid": testId,
|
|
51
51
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
52
|
-
"--
|
|
52
|
+
"--_12dc40g": (0, _runtime.ix)("calc(0px - ".concat("var(--ds-border-width-focused, 2px)", ")"))
|
|
53
53
|
})
|
|
54
54
|
}), children);
|
|
55
55
|
});
|
|
@@ -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: "14.14.2",
|
|
65
65
|
analyticsData: analyticsContext,
|
|
66
66
|
actionSubject: 'button'
|
|
67
67
|
});
|
|
@@ -36,7 +36,7 @@ var focusRingStyles = (0, _react2.css)({
|
|
|
36
36
|
outlineOffset: _styleMaps.positiveSpaceMap['space.025'],
|
|
37
37
|
outlineStyle: 'solid',
|
|
38
38
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
39
|
-
outlineWidth: _styleMaps.borderWidthMap['border.width.
|
|
39
|
+
outlineWidth: _styleMaps.borderWidthMap['border.width.focused']
|
|
40
40
|
},
|
|
41
41
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
42
42
|
'&:focus:not(:focus-visible)': {
|
|
@@ -44,7 +44,8 @@ var focusRingStyles = (0, _react2.css)({
|
|
|
44
44
|
},
|
|
45
45
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
46
46
|
'&:focus-visible': {
|
|
47
|
-
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
48
|
+
outline: "".concat(_styleMaps.borderWidthMap['border.width'], " solid")
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
51
|
});
|
|
@@ -104,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
104
105
|
action: 'clicked',
|
|
105
106
|
componentName: componentName || 'Anchor',
|
|
106
107
|
packageName: "@atlaskit/primitives",
|
|
107
|
-
packageVersion: "
|
|
108
|
+
packageVersion: "14.14.2",
|
|
108
109
|
analyticsData: analyticsContext,
|
|
109
110
|
actionSubject: 'link'
|
|
110
111
|
});
|
|
@@ -31,7 +31,7 @@ var focusRingStyles = (0, _react2.css)({
|
|
|
31
31
|
outlineOffset: _styleMaps.positiveSpaceMap['space.025'],
|
|
32
32
|
outlineStyle: 'solid',
|
|
33
33
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
34
|
-
outlineWidth: _styleMaps.borderWidthMap['border.width.
|
|
34
|
+
outlineWidth: _styleMaps.borderWidthMap['border.width.focused']
|
|
35
35
|
},
|
|
36
36
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
37
37
|
'&:focus:not(:focus-visible)': {
|
|
@@ -39,7 +39,8 @@ var focusRingStyles = (0, _react2.css)({
|
|
|
39
39
|
},
|
|
40
40
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
41
41
|
'&:focus-visible': {
|
|
42
|
-
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
43
|
+
outline: "".concat(_styleMaps.borderWidthMap['border.width'], " solid")
|
|
43
44
|
}
|
|
44
45
|
}
|
|
45
46
|
});
|
|
@@ -96,7 +97,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
96
97
|
action: 'clicked',
|
|
97
98
|
componentName: componentName || 'Pressable',
|
|
98
99
|
packageName: "@atlaskit/primitives",
|
|
99
|
-
packageVersion: "
|
|
100
|
+
packageVersion: "14.14.2",
|
|
100
101
|
analyticsData: analyticsContext,
|
|
101
102
|
actionSubject: 'button'
|
|
102
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: "14.14.2",
|
|
60
60
|
analyticsData: analyticsContext,
|
|
61
61
|
actionSubject: 'link'
|
|
62
62
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
3
|
-
.
|
|
1
|
+
._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
|
|
2
|
+
._1ah31gjf:focus-visible{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
|
|
3
|
+
._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
|
|
4
4
|
._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
|
|
5
5
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
6
|
-
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}.
|
|
6
|
+
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}._2mwq1gjf:focus-visible{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}}
|
|
@@ -30,7 +30,7 @@ const Focusable = /*#__PURE__*/forwardRef(({
|
|
|
30
30
|
return /*#__PURE__*/React.createElement(Component, _extends({}, safeHtmlAttributes, {
|
|
31
31
|
// @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
|
|
32
32
|
ref: ref,
|
|
33
|
-
className: ax(["_mizu194a
|
|
33
|
+
className: ax(["_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gjf _2mwq1gjf", xcss])
|
|
34
34
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
35
35
|
,
|
|
36
36
|
style: style,
|
|
@@ -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: "14.14.2",
|
|
52
52
|
analyticsData: analyticsContext,
|
|
53
53
|
actionSubject: 'button'
|
|
54
54
|
});
|
|
@@ -25,7 +25,7 @@ const focusRingStyles = css({
|
|
|
25
25
|
outlineOffset: positiveSpaceMap['space.025'],
|
|
26
26
|
outlineStyle: 'solid',
|
|
27
27
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
28
|
-
outlineWidth: borderWidthMap['border.width.
|
|
28
|
+
outlineWidth: borderWidthMap['border.width.focused']
|
|
29
29
|
},
|
|
30
30
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
31
31
|
'&:focus:not(:focus-visible)': {
|
|
@@ -33,7 +33,8 @@ const focusRingStyles = css({
|
|
|
33
33
|
},
|
|
34
34
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
35
35
|
'&:focus-visible': {
|
|
36
|
-
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
37
|
+
outline: `${borderWidthMap['border.width']} solid`
|
|
37
38
|
}
|
|
38
39
|
}
|
|
39
40
|
});
|
|
@@ -93,7 +94,7 @@ const AnchorNoRef = ({
|
|
|
93
94
|
action: 'clicked',
|
|
94
95
|
componentName: componentName || 'Anchor',
|
|
95
96
|
packageName: "@atlaskit/primitives",
|
|
96
|
-
packageVersion: "
|
|
97
|
+
packageVersion: "14.14.2",
|
|
97
98
|
analyticsData: analyticsContext,
|
|
98
99
|
actionSubject: 'link'
|
|
99
100
|
});
|
|
@@ -21,7 +21,7 @@ const focusRingStyles = css({
|
|
|
21
21
|
outlineOffset: positiveSpaceMap['space.025'],
|
|
22
22
|
outlineStyle: 'solid',
|
|
23
23
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
24
|
-
outlineWidth: borderWidthMap['border.width.
|
|
24
|
+
outlineWidth: borderWidthMap['border.width.focused']
|
|
25
25
|
},
|
|
26
26
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
27
27
|
'&:focus:not(:focus-visible)': {
|
|
@@ -29,7 +29,8 @@ const focusRingStyles = css({
|
|
|
29
29
|
},
|
|
30
30
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
31
31
|
'&:focus-visible': {
|
|
32
|
-
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
33
|
+
outline: `${borderWidthMap['border.width']} solid`
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
});
|
|
@@ -85,7 +86,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
|
|
|
85
86
|
action: 'clicked',
|
|
86
87
|
componentName: componentName || 'Pressable',
|
|
87
88
|
packageName: "@atlaskit/primitives",
|
|
88
|
-
packageVersion: "
|
|
89
|
+
packageVersion: "14.14.2",
|
|
89
90
|
analyticsData: analyticsContext,
|
|
90
91
|
actionSubject: 'button'
|
|
91
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: "14.14.2",
|
|
65
65
|
analyticsData: analyticsContext,
|
|
66
66
|
actionSubject: 'link'
|
|
67
67
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
3
|
-
.
|
|
1
|
+
._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
|
|
2
|
+
._1ah31gt5:focus-visible{outline-offset:var(--_12dc40g)}
|
|
3
|
+
._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
|
|
4
4
|
._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
|
|
5
5
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
6
|
-
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}.
|
|
6
|
+
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}._2mwq1gt5:focus-visible{outline-offset:var(--_12dc40g)}}
|
|
@@ -34,13 +34,13 @@ var Focusable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
34
34
|
return /*#__PURE__*/React.createElement(Component, _extends({}, safeHtmlAttributes, {
|
|
35
35
|
// @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
|
|
36
36
|
ref: ref,
|
|
37
|
-
className: ax(["_mizu194a
|
|
37
|
+
className: ax(["_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y", isInset && "_1ah31gt5 _2mwq1gt5", xcss])
|
|
38
38
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
39
39
|
,
|
|
40
40
|
|
|
41
41
|
"data-testid": testId,
|
|
42
42
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
43
|
-
"--
|
|
43
|
+
"--_12dc40g": ix("calc(0px - ".concat("var(--ds-border-width-focused, 2px)", ")"))
|
|
44
44
|
})
|
|
45
45
|
}), children);
|
|
46
46
|
});
|
|
@@ -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: "14.14.2",
|
|
56
56
|
analyticsData: analyticsContext,
|
|
57
57
|
actionSubject: 'button'
|
|
58
58
|
});
|
|
@@ -30,7 +30,7 @@ var focusRingStyles = css({
|
|
|
30
30
|
outlineOffset: positiveSpaceMap['space.025'],
|
|
31
31
|
outlineStyle: 'solid',
|
|
32
32
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
33
|
-
outlineWidth: borderWidthMap['border.width.
|
|
33
|
+
outlineWidth: borderWidthMap['border.width.focused']
|
|
34
34
|
},
|
|
35
35
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
36
36
|
'&:focus:not(:focus-visible)': {
|
|
@@ -38,7 +38,8 @@ var focusRingStyles = css({
|
|
|
38
38
|
},
|
|
39
39
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
40
40
|
'&:focus-visible': {
|
|
41
|
-
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
42
|
+
outline: "".concat(borderWidthMap['border.width'], " solid")
|
|
42
43
|
}
|
|
43
44
|
}
|
|
44
45
|
});
|
|
@@ -98,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
98
99
|
action: 'clicked',
|
|
99
100
|
componentName: componentName || 'Anchor',
|
|
100
101
|
packageName: "@atlaskit/primitives",
|
|
101
|
-
packageVersion: "
|
|
102
|
+
packageVersion: "14.14.2",
|
|
102
103
|
analyticsData: analyticsContext,
|
|
103
104
|
actionSubject: 'link'
|
|
104
105
|
});
|
|
@@ -25,7 +25,7 @@ var focusRingStyles = css({
|
|
|
25
25
|
outlineOffset: positiveSpaceMap['space.025'],
|
|
26
26
|
outlineStyle: 'solid',
|
|
27
27
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
28
|
-
outlineWidth: borderWidthMap['border.width.
|
|
28
|
+
outlineWidth: borderWidthMap['border.width.focused']
|
|
29
29
|
},
|
|
30
30
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
31
31
|
'&:focus:not(:focus-visible)': {
|
|
@@ -33,7 +33,8 @@ var focusRingStyles = css({
|
|
|
33
33
|
},
|
|
34
34
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
35
35
|
'&:focus-visible': {
|
|
36
|
-
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
37
|
+
outline: "".concat(borderWidthMap['border.width'], " solid")
|
|
37
38
|
}
|
|
38
39
|
}
|
|
39
40
|
});
|
|
@@ -90,7 +91,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
90
91
|
action: 'clicked',
|
|
91
92
|
componentName: componentName || 'Pressable',
|
|
92
93
|
packageName: "@atlaskit/primitives",
|
|
93
|
-
packageVersion: "
|
|
94
|
+
packageVersion: "14.14.2",
|
|
94
95
|
analyticsData: analyticsContext,
|
|
95
96
|
actionSubject: 'button'
|
|
96
97
|
});
|
package/offerings.json
ADDED
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "Anchor",
|
|
4
|
+
"package": "@atlaskit/primitives",
|
|
5
|
+
"import": {
|
|
6
|
+
"name": "Anchor",
|
|
7
|
+
"package": "@atlaskit/primitives/compiled",
|
|
8
|
+
"type": "named"
|
|
9
|
+
},
|
|
10
|
+
"keywords": ["anchor", "link", "navigation", "href", "url", "primitive", "compiled"],
|
|
11
|
+
"categories": ["primitive"],
|
|
12
|
+
"shortDescription": "A primitive Anchor component for navigation links with compiled styling support.",
|
|
13
|
+
"status": "general-availability",
|
|
14
|
+
"accessibilityGuidelines": [
|
|
15
|
+
"Provide clear link text that describes the destination",
|
|
16
|
+
"Use appropriate ARIA attributes for links",
|
|
17
|
+
"Ensure keyboard navigation support",
|
|
18
|
+
"Provide clear visual indicators for link state",
|
|
19
|
+
"Use descriptive link text for screen readers"
|
|
20
|
+
],
|
|
21
|
+
"usageGuidelines": [
|
|
22
|
+
"Use for navigation links to other pages or sections",
|
|
23
|
+
"Leverage compiled styling for performance",
|
|
24
|
+
"Use appropriate link styling and states",
|
|
25
|
+
"Consider link behavior and target attributes"
|
|
26
|
+
],
|
|
27
|
+
"contentGuidelines": [
|
|
28
|
+
"Use clear, descriptive link text",
|
|
29
|
+
"Maintain consistent link styling",
|
|
30
|
+
"Consider link context and destination"
|
|
31
|
+
],
|
|
32
|
+
"examples": ["./examples/ai/anchor.tsx"]
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"name": "Bleed",
|
|
36
|
+
"package": "@atlaskit/primitives",
|
|
37
|
+
"import": {
|
|
38
|
+
"name": "Bleed",
|
|
39
|
+
"package": "@atlaskit/primitives/compiled",
|
|
40
|
+
"type": "named"
|
|
41
|
+
},
|
|
42
|
+
"keywords": ["bleed", "layout", "margin", "spacing", "edge", "primitive", "compiled"],
|
|
43
|
+
"categories": ["primitive"],
|
|
44
|
+
"shortDescription": "A primitive Bleed component for extending content beyond container boundaries with compiled styling support.",
|
|
45
|
+
"status": "general-availability",
|
|
46
|
+
"usageGuidelines": [
|
|
47
|
+
"Use for extending content beyond container margins",
|
|
48
|
+
"Leverage compiled styling for performance",
|
|
49
|
+
"Use appropriate bleed directions and amounts",
|
|
50
|
+
"Consider responsive behavior and container constraints"
|
|
51
|
+
],
|
|
52
|
+
"contentGuidelines": [
|
|
53
|
+
"Use for appropriate layout bleeding",
|
|
54
|
+
"Maintain consistent bleeding patterns",
|
|
55
|
+
"Consider content hierarchy and visual flow"
|
|
56
|
+
],
|
|
57
|
+
"examples": ["./examples/ai/bleed.tsx"]
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "Box",
|
|
61
|
+
"package": "@atlaskit/primitives",
|
|
62
|
+
"import": {
|
|
63
|
+
"name": "Box",
|
|
64
|
+
"package": "@atlaskit/primitives/compiled",
|
|
65
|
+
"type": "named"
|
|
66
|
+
},
|
|
67
|
+
"keywords": ["box", "container", "div", "layout", "primitive", "compiled"],
|
|
68
|
+
"categories": ["primitive"],
|
|
69
|
+
"shortDescription": "A primitive Box component for layout and container purposes with compiled styling support.",
|
|
70
|
+
"status": "general-availability",
|
|
71
|
+
"usageGuidelines": [
|
|
72
|
+
"Use for basic layout and container needs",
|
|
73
|
+
"Leverage compiled styling for performance",
|
|
74
|
+
"Use appropriate spacing and layout props",
|
|
75
|
+
"Consider semantic HTML when possible"
|
|
76
|
+
],
|
|
77
|
+
"contentGuidelines": [
|
|
78
|
+
"Use for appropriate layout purposes",
|
|
79
|
+
"Maintain consistent spacing and layout patterns",
|
|
80
|
+
"Consider accessibility and semantic structure"
|
|
81
|
+
],
|
|
82
|
+
"examples": ["./examples/ai/box.tsx"]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "Flex",
|
|
86
|
+
"package": "@atlaskit/primitives",
|
|
87
|
+
"import": {
|
|
88
|
+
"name": "Flex",
|
|
89
|
+
"package": "@atlaskit/primitives/compiled",
|
|
90
|
+
"type": "named"
|
|
91
|
+
},
|
|
92
|
+
"keywords": ["flex", "layout", "flexbox", "alignment", "primitive", "compiled"],
|
|
93
|
+
"categories": ["primitive"],
|
|
94
|
+
"shortDescription": "A primitive Flex component for flexbox layout with compiled styling support.",
|
|
95
|
+
"status": "general-availability",
|
|
96
|
+
"usageGuidelines": [
|
|
97
|
+
"Use for flexbox layout needs",
|
|
98
|
+
"Leverage compiled styling for performance",
|
|
99
|
+
"Use appropriate flex properties and alignment",
|
|
100
|
+
"Consider responsive behavior"
|
|
101
|
+
],
|
|
102
|
+
"contentGuidelines": [
|
|
103
|
+
"Use for appropriate flex layout",
|
|
104
|
+
"Maintain consistent flex patterns",
|
|
105
|
+
"Consider content alignment and distribution"
|
|
106
|
+
],
|
|
107
|
+
"examples": ["./examples/ai/flex.tsx"]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"name": "Focusable",
|
|
111
|
+
"package": "@atlaskit/primitives",
|
|
112
|
+
"import": {
|
|
113
|
+
"name": "Focusable",
|
|
114
|
+
"package": "@atlaskit/primitives/compiled",
|
|
115
|
+
"type": "named"
|
|
116
|
+
},
|
|
117
|
+
"keywords": ["focusable", "focus", "keyboard", "navigation", "accessibility", "primitive", "compiled"],
|
|
118
|
+
"categories": ["primitive"],
|
|
119
|
+
"shortDescription": "A primitive Focusable component for keyboard navigation and focus management with compiled styling support.",
|
|
120
|
+
"status": "general-availability",
|
|
121
|
+
"accessibilityGuidelines": [
|
|
122
|
+
"Provide clear focus indicators",
|
|
123
|
+
"Use appropriate tab order and navigation",
|
|
124
|
+
"Ensure keyboard accessibility",
|
|
125
|
+
"Provide clear visual feedback for focus state",
|
|
126
|
+
"Use appropriate ARIA attributes"
|
|
127
|
+
],
|
|
128
|
+
"usageGuidelines": [
|
|
129
|
+
"Use for elements that need keyboard focus",
|
|
130
|
+
"Leverage compiled styling for performance",
|
|
131
|
+
"Use appropriate focus management",
|
|
132
|
+
"Consider keyboard navigation patterns"
|
|
133
|
+
],
|
|
134
|
+
"contentGuidelines": [
|
|
135
|
+
"Use for appropriate focusable content",
|
|
136
|
+
"Maintain consistent focus patterns",
|
|
137
|
+
"Consider keyboard navigation flow"
|
|
138
|
+
],
|
|
139
|
+
"examples": ["./examples/ai/focusable.tsx"]
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": "Grid",
|
|
143
|
+
"package": "@atlaskit/primitives",
|
|
144
|
+
"import": {
|
|
145
|
+
"name": "Grid",
|
|
146
|
+
"package": "@atlaskit/primitives/compiled",
|
|
147
|
+
"type": "named"
|
|
148
|
+
},
|
|
149
|
+
"keywords": ["grid", "layout", "css-grid", "alignment", "primitive", "compiled"],
|
|
150
|
+
"categories": ["primitive"],
|
|
151
|
+
"shortDescription": "A primitive Grid component for CSS Grid layout with compiled styling support.",
|
|
152
|
+
"status": "general-availability",
|
|
153
|
+
"usageGuidelines": [
|
|
154
|
+
"Use for CSS Grid layout needs",
|
|
155
|
+
"Leverage compiled styling for performance",
|
|
156
|
+
"Use appropriate grid properties and alignment",
|
|
157
|
+
"Consider responsive behavior"
|
|
158
|
+
],
|
|
159
|
+
"contentGuidelines": [
|
|
160
|
+
"Use for appropriate grid layout",
|
|
161
|
+
"Maintain consistent grid patterns",
|
|
162
|
+
"Consider content alignment and distribution"
|
|
163
|
+
],
|
|
164
|
+
"examples": ["./examples/ai/grid.tsx"]
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"name": "Inline",
|
|
168
|
+
"package": "@atlaskit/primitives",
|
|
169
|
+
"import": {
|
|
170
|
+
"name": "Inline",
|
|
171
|
+
"package": "@atlaskit/primitives/compiled",
|
|
172
|
+
"type": "named"
|
|
173
|
+
},
|
|
174
|
+
"keywords": ["inline", "layout", "horizontal", "spacing", "primitive", "compiled"],
|
|
175
|
+
"categories": ["primitive"],
|
|
176
|
+
"shortDescription": "A primitive Inline component for horizontal layout with consistent spacing.",
|
|
177
|
+
"status": "general-availability",
|
|
178
|
+
"usageGuidelines": [
|
|
179
|
+
"Use for horizontal layout needs",
|
|
180
|
+
"Leverage compiled styling for performance",
|
|
181
|
+
"Use appropriate spacing and alignment props",
|
|
182
|
+
"Consider wrapping behavior"
|
|
183
|
+
],
|
|
184
|
+
"contentGuidelines": [
|
|
185
|
+
"Use for appropriate horizontal grouping",
|
|
186
|
+
"Maintain consistent spacing patterns",
|
|
187
|
+
"Consider content flow and readability"
|
|
188
|
+
],
|
|
189
|
+
"examples": ["./examples/ai/inline.tsx"]
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"name": "MetricText",
|
|
193
|
+
"package": "@atlaskit/primitives",
|
|
194
|
+
"import": {
|
|
195
|
+
"name": "MetricText",
|
|
196
|
+
"package": "@atlaskit/primitives/compiled",
|
|
197
|
+
"type": "named"
|
|
198
|
+
},
|
|
199
|
+
"keywords": ["text", "typography", "font", "primitive", "compiled"],
|
|
200
|
+
"categories": ["primitive"],
|
|
201
|
+
"shortDescription": "A primitive Text component for typography with compiled styling support.",
|
|
202
|
+
"status": "general-availability",
|
|
203
|
+
"usageGuidelines": [
|
|
204
|
+
"Use for text content with consistent typography",
|
|
205
|
+
"Leverage compiled styling for performance",
|
|
206
|
+
"Use appropriate font size and weight props",
|
|
207
|
+
"Consider semantic HTML elements"
|
|
208
|
+
],
|
|
209
|
+
"contentGuidelines": [
|
|
210
|
+
"Use for appropriate text content",
|
|
211
|
+
"Maintain consistent typography patterns",
|
|
212
|
+
"Consider readability and hierarchy"
|
|
213
|
+
],
|
|
214
|
+
"examples": ["./examples/ai/metric-text.tsx"]
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"name": "Pressable",
|
|
218
|
+
"package": "@atlaskit/primitives",
|
|
219
|
+
"import": {
|
|
220
|
+
"name": "Pressable",
|
|
221
|
+
"package": "@atlaskit/primitives/compiled",
|
|
222
|
+
"type": "named"
|
|
223
|
+
},
|
|
224
|
+
"keywords": ["pressable", "interaction", "touch", "click", "primitive", "compiled"],
|
|
225
|
+
"categories": ["primitive"],
|
|
226
|
+
"shortDescription": "A primitive Pressable component for handling touch and click interactions with compiled styling support.",
|
|
227
|
+
"status": "general-availability",
|
|
228
|
+
"accessibilityGuidelines": [
|
|
229
|
+
"Provide clear visual feedback for press states",
|
|
230
|
+
"Ensure appropriate touch target sizes",
|
|
231
|
+
"Use appropriate ARIA attributes for interactive elements",
|
|
232
|
+
"Provide keyboard navigation support"
|
|
233
|
+
],
|
|
234
|
+
"usageGuidelines": [
|
|
235
|
+
"Use for interactive elements that need press feedback",
|
|
236
|
+
"Leverage compiled styling for performance",
|
|
237
|
+
"Use appropriate press states and feedback",
|
|
238
|
+
"Consider touch target accessibility"
|
|
239
|
+
],
|
|
240
|
+
"contentGuidelines": [
|
|
241
|
+
"Use for appropriate interactive content",
|
|
242
|
+
"Maintain consistent press patterns",
|
|
243
|
+
"Consider user interaction expectations"
|
|
244
|
+
],
|
|
245
|
+
"examples": ["./examples/ai/pressable.tsx"]
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"name": "Stack",
|
|
249
|
+
"package": "@atlaskit/primitives",
|
|
250
|
+
"import": {
|
|
251
|
+
"name": "Stack",
|
|
252
|
+
"package": "@atlaskit/primitives/compiled",
|
|
253
|
+
"type": "named"
|
|
254
|
+
},
|
|
255
|
+
"keywords": ["stack", "layout", "vertical", "horizontal", "spacing", "primitive", "compiled"],
|
|
256
|
+
"categories": ["primitive"],
|
|
257
|
+
"shortDescription": "A primitive Stack component for vertical and horizontal layout with consistent spacing.",
|
|
258
|
+
"status": "general-availability",
|
|
259
|
+
"usageGuidelines": [
|
|
260
|
+
"Use for consistent vertical or horizontal layouts",
|
|
261
|
+
"Leverage compiled styling for performance",
|
|
262
|
+
"Use appropriate spacing and alignment props",
|
|
263
|
+
"Consider responsive behavior"
|
|
264
|
+
],
|
|
265
|
+
"contentGuidelines": [
|
|
266
|
+
"Use for appropriate layout grouping",
|
|
267
|
+
"Maintain consistent spacing patterns",
|
|
268
|
+
"Consider content hierarchy and flow"
|
|
269
|
+
],
|
|
270
|
+
"examples": ["./examples/ai/stack.tsx"]
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"name": "Text",
|
|
274
|
+
"package": "@atlaskit/primitives",
|
|
275
|
+
"import": {
|
|
276
|
+
"name": "Text",
|
|
277
|
+
"package": "@atlaskit/primitives/compiled",
|
|
278
|
+
"type": "named"
|
|
279
|
+
},
|
|
280
|
+
"keywords": ["text", "typography", "font", "primitive", "compiled"],
|
|
281
|
+
"categories": ["primitive"],
|
|
282
|
+
"shortDescription": "A primitive Text component for typography with compiled styling support.",
|
|
283
|
+
"status": "general-availability",
|
|
284
|
+
"usageGuidelines": [
|
|
285
|
+
"Use for text content with consistent typography",
|
|
286
|
+
"Leverage compiled styling for performance",
|
|
287
|
+
"Use appropriate font size and weight props",
|
|
288
|
+
"Consider semantic HTML elements"
|
|
289
|
+
],
|
|
290
|
+
"contentGuidelines": [
|
|
291
|
+
"Use for appropriate text content",
|
|
292
|
+
"Maintain consistent typography patterns",
|
|
293
|
+
"Consider readability and hierarchy"
|
|
294
|
+
],
|
|
295
|
+
"generativeInstructions": "./docs/ai/text-instructions.md",
|
|
296
|
+
"examples": ["./examples/ai/text.tsx"]
|
|
297
|
+
}
|
|
298
|
+
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/primitives",
|
|
3
|
-
"version": "14.14.
|
|
3
|
+
"version": "14.14.3",
|
|
4
4
|
"description": "Primitives are token-backed low-level building blocks.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
},
|
|
134
134
|
"dependencies": {
|
|
135
135
|
"@atlaskit/analytics-next": "^11.1.0",
|
|
136
|
-
"@atlaskit/app-provider": "^3.
|
|
136
|
+
"@atlaskit/app-provider": "^3.2.0",
|
|
137
137
|
"@atlaskit/css": "^0.14.0",
|
|
138
138
|
"@atlaskit/ds-lib": "^5.0.0",
|
|
139
139
|
"@atlaskit/interaction-context": "^3.0.0",
|
|
@@ -158,12 +158,12 @@
|
|
|
158
158
|
"@atlaskit/button": "^23.4.0",
|
|
159
159
|
"@atlaskit/checkbox": "^17.1.0",
|
|
160
160
|
"@atlaskit/code": "^17.2.0",
|
|
161
|
-
"@atlaskit/docs": "^11.
|
|
161
|
+
"@atlaskit/docs": "^11.1.0",
|
|
162
162
|
"@atlaskit/dropdown-menu": "^16.3.0",
|
|
163
163
|
"@atlaskit/flag": "^17.4.0",
|
|
164
|
-
"@atlaskit/form": "^12.
|
|
164
|
+
"@atlaskit/form": "^12.7.0",
|
|
165
165
|
"@atlaskit/heading": "^5.2.0",
|
|
166
|
-
"@atlaskit/icon": "^28.
|
|
166
|
+
"@atlaskit/icon": "^28.2.0",
|
|
167
167
|
"@atlaskit/icon-object": "^7.2.0",
|
|
168
168
|
"@atlaskit/image": "^3.0.0",
|
|
169
169
|
"@atlaskit/link": "^3.2.0",
|