@atlaskit/primitives 14.0.0 → 14.1.1
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 +21 -0
- package/dist/cjs/compiled/components/anchor.js +1 -1
- package/dist/cjs/compiled/components/box.js +2 -2
- package/dist/cjs/compiled/components/pressable.js +1 -1
- package/dist/cjs/compiled/components/text.js +16 -0
- package/dist/cjs/components/anchor.js +1 -1
- package/dist/cjs/components/pressable.js +1 -1
- package/dist/cjs/components/text.js +16 -0
- package/dist/es2019/compiled/components/anchor.js +1 -1
- package/dist/es2019/compiled/components/box.js +1 -1
- package/dist/es2019/compiled/components/pressable.js +1 -1
- package/dist/es2019/compiled/components/text.js +16 -0
- package/dist/es2019/components/anchor.js +1 -1
- package/dist/es2019/components/pressable.js +1 -1
- package/dist/es2019/components/text.js +16 -0
- package/dist/esm/compiled/components/anchor.js +1 -1
- package/dist/esm/compiled/components/box.js +1 -1
- package/dist/esm/compiled/components/pressable.js +1 -1
- package/dist/esm/compiled/components/text.js +16 -0
- package/dist/esm/components/anchor.js +1 -1
- package/dist/esm/components/pressable.js +1 -1
- package/dist/esm/components/text.js +16 -0
- package/dist/types/compiled/components/box.d.ts +1 -1
- package/dist/types/components/flex.d.ts +4 -4
- package/dist/types/responsive/types.d.ts +0 -22
- package/dist/types-ts4.5/compiled/components/box.d.ts +1 -1
- package/dist/types-ts4.5/components/flex.d.ts +4 -4
- package/dist/types-ts4.5/responsive/types.d.ts +0 -22
- package/package.json +29 -2
- package/scripts/utils.tsx +0 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/primitives
|
|
2
2
|
|
|
3
|
+
## 14.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#119116](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119116)
|
|
8
|
+
[`96ff1753a7299`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96ff1753a7299) -
|
|
9
|
+
Update dependencies and remove unused internal exports.
|
|
10
|
+
|
|
11
|
+
## 14.1.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [#118121](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118121)
|
|
16
|
+
[`4850fa1a503ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4850fa1a503ba) -
|
|
17
|
+
[ux] Automatic color inversion based on bold surfaces will only affect the default color behind a
|
|
18
|
+
feature flag. If testing successful, this change will be made available in a later release.
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
|
|
3
24
|
## 14.0.0
|
|
4
25
|
|
|
5
26
|
### Major 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: "14.
|
|
73
|
+
packageVersion: "14.1.1",
|
|
74
74
|
analyticsData: analyticsContext,
|
|
75
75
|
actionSubject: 'link'
|
|
76
76
|
});
|
|
@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
6
6
|
Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
value: true
|
|
8
8
|
});
|
|
9
|
-
exports.default =
|
|
9
|
+
exports.default = void 0;
|
|
10
10
|
require("./box.compiled.css");
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var React = _react;
|
|
@@ -311,7 +311,7 @@ var paddingInlineEndMap = {
|
|
|
311
311
|
* - [Code](https://atlassian.design/components/primitives/box/code)
|
|
312
312
|
* - [Usage](https://atlassian.design/components/primitives/box/usage)
|
|
313
313
|
*/
|
|
314
|
-
var Box =
|
|
314
|
+
var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
315
315
|
var _ref$as = _ref.as,
|
|
316
316
|
Component = _ref$as === void 0 ? 'div' : _ref$as,
|
|
317
317
|
children = _ref.children,
|
|
@@ -60,7 +60,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
60
60
|
action: 'clicked',
|
|
61
61
|
componentName: componentName || 'Pressable',
|
|
62
62
|
packageName: "@atlaskit/primitives",
|
|
63
|
-
packageVersion: "14.
|
|
63
|
+
packageVersion: "14.1.1",
|
|
64
64
|
analyticsData: analyticsContext,
|
|
65
65
|
actionSubject: 'button'
|
|
66
66
|
});
|
|
@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
12
12
|
var React = _react;
|
|
13
13
|
var _runtime = require("@compiled/react/runtime");
|
|
14
14
|
var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
|
|
15
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
16
|
var _hasTextAncestorContext = require("../../utils/has-text-ancestor-context");
|
|
16
17
|
var _surfaceProvider = require("../../utils/surface-provider");
|
|
17
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -22,6 +23,21 @@ var asAllowlist = ['span', 'p', 'strong', 'em'];
|
|
|
22
23
|
*/
|
|
23
24
|
var useColor = function useColor(colorProp, hasTextAncestor) {
|
|
24
25
|
var surface = (0, _surfaceProvider.useSurface)();
|
|
26
|
+
if ((0, _platformFeatureFlags.fg)('platform-typography-improved-color-control')) {
|
|
27
|
+
if (colorProp === 'inherit') {
|
|
28
|
+
return undefined;
|
|
29
|
+
}
|
|
30
|
+
if (colorProp) {
|
|
31
|
+
return colorProp;
|
|
32
|
+
}
|
|
33
|
+
if (hasTextAncestor) {
|
|
34
|
+
return undefined;
|
|
35
|
+
}
|
|
36
|
+
if (inverseColorMap.hasOwnProperty(surface)) {
|
|
37
|
+
return inverseColorMap[surface];
|
|
38
|
+
}
|
|
39
|
+
return 'color.text';
|
|
40
|
+
}
|
|
25
41
|
|
|
26
42
|
/*
|
|
27
43
|
* Where the color of the surface is inverted we always override the color
|
|
@@ -100,7 +100,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
100
100
|
action: 'clicked',
|
|
101
101
|
componentName: componentName || 'Anchor',
|
|
102
102
|
packageName: "@atlaskit/primitives",
|
|
103
|
-
packageVersion: "14.
|
|
103
|
+
packageVersion: "14.1.1",
|
|
104
104
|
analyticsData: analyticsContext,
|
|
105
105
|
actionSubject: 'link'
|
|
106
106
|
});
|
|
@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
95
95
|
action: 'clicked',
|
|
96
96
|
componentName: componentName || 'Pressable',
|
|
97
97
|
packageName: "@atlaskit/primitives",
|
|
98
|
-
packageVersion: "14.
|
|
98
|
+
packageVersion: "14.1.1",
|
|
99
99
|
analyticsData: analyticsContext,
|
|
100
100
|
actionSubject: 'button'
|
|
101
101
|
});
|
|
@@ -8,6 +8,7 @@ exports.default = void 0;
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _react2 = require("@emotion/react");
|
|
10
10
|
var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
12
|
var _hasTextAncestorContext = require("../utils/has-text-ancestor-context");
|
|
12
13
|
var _surfaceProvider = require("../utils/surface-provider");
|
|
13
14
|
var _styleMaps = require("../xcss/style-maps.partial");
|
|
@@ -59,6 +60,21 @@ var wordBreakMap = {
|
|
|
59
60
|
*/
|
|
60
61
|
var useColor = function useColor(colorProp, hasTextAncestor) {
|
|
61
62
|
var surface = (0, _surfaceProvider.useSurface)();
|
|
63
|
+
if ((0, _platformFeatureFlags.fg)('platform-typography-improved-color-control')) {
|
|
64
|
+
if (colorProp === 'inherit') {
|
|
65
|
+
return undefined;
|
|
66
|
+
}
|
|
67
|
+
if (colorProp) {
|
|
68
|
+
return colorProp;
|
|
69
|
+
}
|
|
70
|
+
if (hasTextAncestor) {
|
|
71
|
+
return undefined;
|
|
72
|
+
}
|
|
73
|
+
if (_styleMaps.inverseColorMap.hasOwnProperty(surface)) {
|
|
74
|
+
return _styleMaps.inverseColorMap[surface];
|
|
75
|
+
}
|
|
76
|
+
return 'color.text';
|
|
77
|
+
}
|
|
62
78
|
|
|
63
79
|
/**
|
|
64
80
|
* Where the color of the surface is inverted we always override the color
|
|
@@ -299,7 +299,7 @@ const paddingInlineEndMap = {
|
|
|
299
299
|
* - [Code](https://atlassian.design/components/primitives/box/code)
|
|
300
300
|
* - [Usage](https://atlassian.design/components/primitives/box/usage)
|
|
301
301
|
*/
|
|
302
|
-
|
|
302
|
+
const Box = /*#__PURE__*/forwardRef(({
|
|
303
303
|
as: Component = 'div',
|
|
304
304
|
children,
|
|
305
305
|
backgroundColor,
|
|
@@ -46,7 +46,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
|
|
|
46
46
|
action: 'clicked',
|
|
47
47
|
componentName: componentName || 'Pressable',
|
|
48
48
|
packageName: "@atlaskit/primitives",
|
|
49
|
-
packageVersion: "14.
|
|
49
|
+
packageVersion: "14.1.1",
|
|
50
50
|
analyticsData: analyticsContext,
|
|
51
51
|
actionSubject: 'button'
|
|
52
52
|
});
|
|
@@ -4,6 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { forwardRef } from 'react';
|
|
6
6
|
import invariant from 'tiny-invariant';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
8
|
import { HasTextAncestorProvider, useHasTextAncestor } from '../../utils/has-text-ancestor-context';
|
|
8
9
|
import { useSurface } from '../../utils/surface-provider';
|
|
9
10
|
const asAllowlist = ['span', 'p', 'strong', 'em'];
|
|
@@ -12,6 +13,21 @@ const asAllowlist = ['span', 'p', 'strong', 'em'];
|
|
|
12
13
|
*/
|
|
13
14
|
const useColor = (colorProp, hasTextAncestor) => {
|
|
14
15
|
const surface = useSurface();
|
|
16
|
+
if (fg('platform-typography-improved-color-control')) {
|
|
17
|
+
if (colorProp === 'inherit') {
|
|
18
|
+
return undefined;
|
|
19
|
+
}
|
|
20
|
+
if (colorProp) {
|
|
21
|
+
return colorProp;
|
|
22
|
+
}
|
|
23
|
+
if (hasTextAncestor) {
|
|
24
|
+
return undefined;
|
|
25
|
+
}
|
|
26
|
+
if (inverseColorMap.hasOwnProperty(surface)) {
|
|
27
|
+
return inverseColorMap[surface];
|
|
28
|
+
}
|
|
29
|
+
return 'color.text';
|
|
30
|
+
}
|
|
15
31
|
|
|
16
32
|
/*
|
|
17
33
|
* Where the color of the surface is inverted we always override the color
|
|
@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
|
|
|
85
85
|
action: 'clicked',
|
|
86
86
|
componentName: componentName || 'Pressable',
|
|
87
87
|
packageName: "@atlaskit/primitives",
|
|
88
|
-
packageVersion: "14.
|
|
88
|
+
packageVersion: "14.1.1",
|
|
89
89
|
analyticsData: analyticsContext,
|
|
90
90
|
actionSubject: 'button'
|
|
91
91
|
});
|
|
@@ -7,6 +7,7 @@ import { forwardRef } from 'react';
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import invariant from 'tiny-invariant';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { HasTextAncestorProvider, useHasTextAncestor } from '../utils/has-text-ancestor-context';
|
|
11
12
|
import { useSurface } from '../utils/surface-provider';
|
|
12
13
|
import { inverseColorMap, textColorStylesMap, textSizeStylesMap, textWeightStylesMap } from '../xcss/style-maps.partial';
|
|
@@ -51,6 +52,21 @@ const wordBreakMap = {
|
|
|
51
52
|
*/
|
|
52
53
|
const useColor = (colorProp, hasTextAncestor) => {
|
|
53
54
|
const surface = useSurface();
|
|
55
|
+
if (fg('platform-typography-improved-color-control')) {
|
|
56
|
+
if (colorProp === 'inherit') {
|
|
57
|
+
return undefined;
|
|
58
|
+
}
|
|
59
|
+
if (colorProp) {
|
|
60
|
+
return colorProp;
|
|
61
|
+
}
|
|
62
|
+
if (hasTextAncestor) {
|
|
63
|
+
return undefined;
|
|
64
|
+
}
|
|
65
|
+
if (inverseColorMap.hasOwnProperty(surface)) {
|
|
66
|
+
return inverseColorMap[surface];
|
|
67
|
+
}
|
|
68
|
+
return 'color.text';
|
|
69
|
+
}
|
|
54
70
|
|
|
55
71
|
/**
|
|
56
72
|
* Where the color of the surface is inverted we always override the color
|
|
@@ -60,7 +60,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
60
60
|
action: 'clicked',
|
|
61
61
|
componentName: componentName || 'Anchor',
|
|
62
62
|
packageName: "@atlaskit/primitives",
|
|
63
|
-
packageVersion: "14.
|
|
63
|
+
packageVersion: "14.1.1",
|
|
64
64
|
analyticsData: analyticsContext,
|
|
65
65
|
actionSubject: 'link'
|
|
66
66
|
});
|
|
@@ -302,7 +302,7 @@ var paddingInlineEndMap = {
|
|
|
302
302
|
* - [Code](https://atlassian.design/components/primitives/box/code)
|
|
303
303
|
* - [Usage](https://atlassian.design/components/primitives/box/usage)
|
|
304
304
|
*/
|
|
305
|
-
|
|
305
|
+
var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
306
306
|
var _ref$as = _ref.as,
|
|
307
307
|
Component = _ref$as === void 0 ? 'div' : _ref$as,
|
|
308
308
|
children = _ref.children,
|
|
@@ -50,7 +50,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
50
50
|
action: 'clicked',
|
|
51
51
|
componentName: componentName || 'Pressable',
|
|
52
52
|
packageName: "@atlaskit/primitives",
|
|
53
|
-
packageVersion: "14.
|
|
53
|
+
packageVersion: "14.1.1",
|
|
54
54
|
analyticsData: analyticsContext,
|
|
55
55
|
actionSubject: 'button'
|
|
56
56
|
});
|
|
@@ -4,6 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { forwardRef } from 'react';
|
|
6
6
|
import invariant from 'tiny-invariant';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
8
|
import { HasTextAncestorProvider, useHasTextAncestor } from '../../utils/has-text-ancestor-context';
|
|
8
9
|
import { useSurface } from '../../utils/surface-provider';
|
|
9
10
|
var asAllowlist = ['span', 'p', 'strong', 'em'];
|
|
@@ -12,6 +13,21 @@ var asAllowlist = ['span', 'p', 'strong', 'em'];
|
|
|
12
13
|
*/
|
|
13
14
|
var useColor = function useColor(colorProp, hasTextAncestor) {
|
|
14
15
|
var surface = useSurface();
|
|
16
|
+
if (fg('platform-typography-improved-color-control')) {
|
|
17
|
+
if (colorProp === 'inherit') {
|
|
18
|
+
return undefined;
|
|
19
|
+
}
|
|
20
|
+
if (colorProp) {
|
|
21
|
+
return colorProp;
|
|
22
|
+
}
|
|
23
|
+
if (hasTextAncestor) {
|
|
24
|
+
return undefined;
|
|
25
|
+
}
|
|
26
|
+
if (inverseColorMap.hasOwnProperty(surface)) {
|
|
27
|
+
return inverseColorMap[surface];
|
|
28
|
+
}
|
|
29
|
+
return 'color.text';
|
|
30
|
+
}
|
|
15
31
|
|
|
16
32
|
/*
|
|
17
33
|
* Where the color of the surface is inverted we always override the color
|
|
@@ -94,7 +94,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
94
94
|
action: 'clicked',
|
|
95
95
|
componentName: componentName || 'Anchor',
|
|
96
96
|
packageName: "@atlaskit/primitives",
|
|
97
|
-
packageVersion: "14.
|
|
97
|
+
packageVersion: "14.1.1",
|
|
98
98
|
analyticsData: analyticsContext,
|
|
99
99
|
actionSubject: 'link'
|
|
100
100
|
});
|
|
@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
89
89
|
action: 'clicked',
|
|
90
90
|
componentName: componentName || 'Pressable',
|
|
91
91
|
packageName: "@atlaskit/primitives",
|
|
92
|
-
packageVersion: "14.
|
|
92
|
+
packageVersion: "14.1.1",
|
|
93
93
|
analyticsData: analyticsContext,
|
|
94
94
|
actionSubject: 'button'
|
|
95
95
|
});
|
|
@@ -7,6 +7,7 @@ import { forwardRef } from 'react';
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import invariant from 'tiny-invariant';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { HasTextAncestorProvider, useHasTextAncestor } from '../utils/has-text-ancestor-context';
|
|
11
12
|
import { useSurface } from '../utils/surface-provider';
|
|
12
13
|
import { inverseColorMap, textColorStylesMap, textSizeStylesMap, textWeightStylesMap } from '../xcss/style-maps.partial';
|
|
@@ -51,6 +52,21 @@ var wordBreakMap = {
|
|
|
51
52
|
*/
|
|
52
53
|
var useColor = function useColor(colorProp, hasTextAncestor) {
|
|
53
54
|
var surface = useSurface();
|
|
55
|
+
if (fg('platform-typography-improved-color-control')) {
|
|
56
|
+
if (colorProp === 'inherit') {
|
|
57
|
+
return undefined;
|
|
58
|
+
}
|
|
59
|
+
if (colorProp) {
|
|
60
|
+
return colorProp;
|
|
61
|
+
}
|
|
62
|
+
if (hasTextAncestor) {
|
|
63
|
+
return undefined;
|
|
64
|
+
}
|
|
65
|
+
if (inverseColorMap.hasOwnProperty(surface)) {
|
|
66
|
+
return inverseColorMap[surface];
|
|
67
|
+
}
|
|
68
|
+
return 'color.text';
|
|
69
|
+
}
|
|
54
70
|
|
|
55
71
|
/**
|
|
56
72
|
* Where the color of the surface is inverted we always override the color
|
|
@@ -101,5 +101,5 @@ type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactEl
|
|
|
101
101
|
* - [Code](https://atlassian.design/components/primitives/box/code)
|
|
102
102
|
* - [Usage](https://atlassian.design/components/primitives/box/usage)
|
|
103
103
|
*/
|
|
104
|
-
|
|
104
|
+
declare const Box: BoxComponent;
|
|
105
105
|
export default Box;
|
|
@@ -47,10 +47,10 @@ export type FlexProps<T extends ElementType = 'div'> = {
|
|
|
47
47
|
*/
|
|
48
48
|
ref?: React.ComponentPropsWithRef<T>['ref'];
|
|
49
49
|
} & BasePrimitiveProps;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
type AlignItems = keyof typeof alignItemsMap;
|
|
51
|
+
type JustifyContent = keyof typeof justifyContentMap;
|
|
52
|
+
type Direction = keyof typeof flexDirectionMap;
|
|
53
|
+
type Wrap = keyof typeof flexWrapMap;
|
|
54
54
|
declare const justifyContentMap: {
|
|
55
55
|
readonly start: import("@emotion/react").SerializedStyles;
|
|
56
56
|
readonly center: import("@emotion/react").SerializedStyles;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { type SerializedStyles } from '@emotion/react';
|
|
2
|
-
import { type token } from '@atlaskit/tokens';
|
|
3
2
|
import { type media } from './media-helper';
|
|
4
3
|
/**
|
|
5
4
|
* The breakpoints we have for responsiveness.
|
|
@@ -31,24 +30,3 @@ export type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
|
|
|
31
30
|
* ```
|
|
32
31
|
*/
|
|
33
32
|
export type ResponsiveCSSObject = ResponsiveObject<SerializedStyles>;
|
|
34
|
-
/**
|
|
35
|
-
* Our internal breakpoint config used to build media queries and define attributes for certain components.
|
|
36
|
-
*/
|
|
37
|
-
export type BreakpointConfig = {
|
|
38
|
-
/**
|
|
39
|
-
* The gap between a `GridItem`.
|
|
40
|
-
*/
|
|
41
|
-
gridItemGutter: ReturnType<typeof token>;
|
|
42
|
-
/**
|
|
43
|
-
* The outer whitespace of a `Grid` item.
|
|
44
|
-
*/
|
|
45
|
-
gridMargin: ReturnType<typeof token>;
|
|
46
|
-
/**
|
|
47
|
-
* The min-width used in media queries.
|
|
48
|
-
*/
|
|
49
|
-
min: `${number}rem`;
|
|
50
|
-
/**
|
|
51
|
-
* The max-width used in media queries; if set to `null`, it has no max-width (should strictly only be on the largest breakpoint).
|
|
52
|
-
*/
|
|
53
|
-
max: `${number}rem` | null;
|
|
54
|
-
};
|
|
@@ -101,5 +101,5 @@ type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactEl
|
|
|
101
101
|
* - [Code](https://atlassian.design/components/primitives/box/code)
|
|
102
102
|
* - [Usage](https://atlassian.design/components/primitives/box/usage)
|
|
103
103
|
*/
|
|
104
|
-
|
|
104
|
+
declare const Box: BoxComponent;
|
|
105
105
|
export default Box;
|
|
@@ -47,10 +47,10 @@ export type FlexProps<T extends ElementType = 'div'> = {
|
|
|
47
47
|
*/
|
|
48
48
|
ref?: React.ComponentPropsWithRef<T>['ref'];
|
|
49
49
|
} & BasePrimitiveProps;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
type AlignItems = keyof typeof alignItemsMap;
|
|
51
|
+
type JustifyContent = keyof typeof justifyContentMap;
|
|
52
|
+
type Direction = keyof typeof flexDirectionMap;
|
|
53
|
+
type Wrap = keyof typeof flexWrapMap;
|
|
54
54
|
declare const justifyContentMap: {
|
|
55
55
|
readonly start: import("@emotion/react").SerializedStyles;
|
|
56
56
|
readonly center: import("@emotion/react").SerializedStyles;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { type SerializedStyles } from '@emotion/react';
|
|
2
|
-
import { type token } from '@atlaskit/tokens';
|
|
3
2
|
import { type media } from './media-helper';
|
|
4
3
|
/**
|
|
5
4
|
* The breakpoints we have for responsiveness.
|
|
@@ -31,24 +30,3 @@ export type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
|
|
|
31
30
|
* ```
|
|
32
31
|
*/
|
|
33
32
|
export type ResponsiveCSSObject = ResponsiveObject<SerializedStyles>;
|
|
34
|
-
/**
|
|
35
|
-
* Our internal breakpoint config used to build media queries and define attributes for certain components.
|
|
36
|
-
*/
|
|
37
|
-
export type BreakpointConfig = {
|
|
38
|
-
/**
|
|
39
|
-
* The gap between a `GridItem`.
|
|
40
|
-
*/
|
|
41
|
-
gridItemGutter: ReturnType<typeof token>;
|
|
42
|
-
/**
|
|
43
|
-
* The outer whitespace of a `Grid` item.
|
|
44
|
-
*/
|
|
45
|
-
gridMargin: ReturnType<typeof token>;
|
|
46
|
-
/**
|
|
47
|
-
* The min-width used in media queries.
|
|
48
|
-
*/
|
|
49
|
-
min: `${number}rem`;
|
|
50
|
-
/**
|
|
51
|
-
* The max-width used in media queries; if set to `null`, it has no max-width (should strictly only be on the largest breakpoint).
|
|
52
|
-
*/
|
|
53
|
-
max: `${number}rem` | null;
|
|
54
|
-
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/primitives",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.1.1",
|
|
4
4
|
"description": "Primitives are token-backed low-level building blocks.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -129,7 +129,8 @@
|
|
|
129
129
|
"@atlaskit/css": "^0.10.0",
|
|
130
130
|
"@atlaskit/ds-lib": "^4.0.0",
|
|
131
131
|
"@atlaskit/interaction-context": "^3.0.0",
|
|
132
|
-
"@atlaskit/
|
|
132
|
+
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
133
|
+
"@atlaskit/tokens": "^4.2.0",
|
|
133
134
|
"@atlaskit/visually-hidden": "^2.0.0",
|
|
134
135
|
"@babel/runtime": "^7.0.0",
|
|
135
136
|
"@compiled/react": "^0.18.2",
|
|
@@ -146,15 +147,36 @@
|
|
|
146
147
|
"@af/formatting": "*",
|
|
147
148
|
"@af/integration-testing": "*",
|
|
148
149
|
"@af/visual-regression": "*",
|
|
150
|
+
"@atlaskit/avatar": "^23.0.0",
|
|
151
|
+
"@atlaskit/button": "^21.1.0",
|
|
152
|
+
"@atlaskit/checkbox": "^16.0.0",
|
|
153
|
+
"@atlaskit/code": "^16.0.0",
|
|
154
|
+
"@atlaskit/docs": "*",
|
|
155
|
+
"@atlaskit/dropdown-menu": "^13.0.0",
|
|
156
|
+
"@atlaskit/flag": "^16.1.0",
|
|
157
|
+
"@atlaskit/form": "^12.0.0",
|
|
158
|
+
"@atlaskit/heading": "^5.1.0",
|
|
159
|
+
"@atlaskit/icon": "^24.1.0",
|
|
160
|
+
"@atlaskit/icon-object": "^7.0.0",
|
|
161
|
+
"@atlaskit/image": "^2.0.0",
|
|
162
|
+
"@atlaskit/link": "^3.0.0",
|
|
163
|
+
"@atlaskit/logo": "^16.0.0",
|
|
164
|
+
"@atlaskit/lozenge": "^12.0.0",
|
|
165
|
+
"@atlaskit/motion": "^5.0.0",
|
|
166
|
+
"@atlaskit/range": "^9.0.0",
|
|
167
|
+
"@atlaskit/section-message": "*",
|
|
149
168
|
"@atlaskit/ssr": "*",
|
|
169
|
+
"@atlaskit/textfield": "^8.0.0",
|
|
150
170
|
"@atlaskit/toggle": "^15.0.0",
|
|
151
171
|
"@atlaskit/tooltip": "^20.0.0",
|
|
152
172
|
"@atlaskit/visual-regression": "*",
|
|
173
|
+
"@atlassian/analytics-bridge": "^0.7.0",
|
|
153
174
|
"@atlassian/codegen": "^0.1.0",
|
|
154
175
|
"@testing-library/react": "^13.4.0",
|
|
155
176
|
"@testing-library/react-hooks": "^8.0.1",
|
|
156
177
|
"csstype": "^3.1.0",
|
|
157
178
|
"react-dom": "^18.2.0",
|
|
179
|
+
"react-resource-router": "^0.20.0",
|
|
158
180
|
"ts-node": "^10.9.1",
|
|
159
181
|
"typescript": "~5.4.2"
|
|
160
182
|
},
|
|
@@ -202,5 +224,10 @@
|
|
|
202
224
|
"./anchor": "./src/components/anchor.tsx",
|
|
203
225
|
"./responsive": "./src/responsive/index.tsx",
|
|
204
226
|
"./compiled": "./src/compiled/index.tsx"
|
|
227
|
+
},
|
|
228
|
+
"platform-feature-flags": {
|
|
229
|
+
"platform-typography-improved-color-control": {
|
|
230
|
+
"type": "boolean"
|
|
231
|
+
}
|
|
205
232
|
}
|
|
206
233
|
}
|
package/scripts/utils.tsx
CHANGED
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
import type { CSSProperties } from 'react';
|
|
2
|
-
|
|
3
|
-
export const tokenCall = (token: string, fallback: string | ShadowDefinition) =>
|
|
4
|
-
`token('${token}', '${fallback}')`;
|
|
5
|
-
|
|
6
|
-
export const tokenToStyle = (
|
|
7
|
-
prop: keyof CSSProperties,
|
|
8
|
-
token: string,
|
|
9
|
-
fallback: string | ShadowDefinition,
|
|
10
|
-
) => {
|
|
11
|
-
if (Array.isArray(fallback)) {
|
|
12
|
-
fallback = constructShadow(fallback);
|
|
13
|
-
}
|
|
14
|
-
return `css({\n\t${prop}: ${tokenCall(token, fallback)}\n})`;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
1
|
export const constructTokenFunctionCall = (token: string, fallback: string | ShadowDefinition) => {
|
|
18
2
|
if (Array.isArray(fallback)) {
|
|
19
3
|
fallback = constructShadow(fallback);
|