@atlaskit/primitives 14.0.0 → 14.1.0
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 +13 -0
- package/dist/cjs/compiled/components/anchor.js +1 -1
- 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/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/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/package.json +8 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/primitives
|
|
2
2
|
|
|
3
|
+
## 14.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#118121](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118121)
|
|
8
|
+
[`4850fa1a503ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4850fa1a503ba) -
|
|
9
|
+
[ux] Automatic color inversion based on bold surfaces will only affect the default color behind a
|
|
10
|
+
feature flag. If testing successful, this change will be made available in a later release.
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 14.0.0
|
|
4
17
|
|
|
5
18
|
### 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.0",
|
|
74
74
|
analyticsData: analyticsContext,
|
|
75
75
|
actionSubject: 'link'
|
|
76
76
|
});
|
|
@@ -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.0",
|
|
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.0",
|
|
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.0",
|
|
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
|
|
@@ -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.0",
|
|
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.0",
|
|
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.0",
|
|
64
64
|
analyticsData: analyticsContext,
|
|
65
65
|
actionSubject: 'link'
|
|
66
66
|
});
|
|
@@ -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.0",
|
|
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.0",
|
|
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.0",
|
|
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
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/primitives",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.1.0",
|
|
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",
|
|
@@ -202,5 +203,10 @@
|
|
|
202
203
|
"./anchor": "./src/components/anchor.tsx",
|
|
203
204
|
"./responsive": "./src/responsive/index.tsx",
|
|
204
205
|
"./compiled": "./src/compiled/index.tsx"
|
|
206
|
+
},
|
|
207
|
+
"platform-feature-flags": {
|
|
208
|
+
"platform-typography-improved-color-control": {
|
|
209
|
+
"type": "boolean"
|
|
210
|
+
}
|
|
205
211
|
}
|
|
206
212
|
}
|