@atlaskit/heading 5.0.0 → 5.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 +22 -0
- package/dist/cjs/heading.partial.compiled.css +7 -7
- package/dist/cjs/heading.partial.js +17 -7
- package/dist/es2019/heading.partial.compiled.css +7 -7
- package/dist/es2019/heading.partial.js +17 -7
- package/dist/esm/heading.partial.compiled.css +7 -7
- package/dist/esm/heading.partial.js +17 -7
- package/package.json +18 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/heading
|
|
2
2
|
|
|
3
|
+
## 5.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#129972](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129972)
|
|
8
|
+
[`b2d69a39e6687`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b2d69a39e6687) -
|
|
9
|
+
Update `@compiled/react` dependency for improved type checking support.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 5.1.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- [#118121](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118121)
|
|
17
|
+
[`4850fa1a503ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4850fa1a503ba) -
|
|
18
|
+
[ux] Automatic color inversion based on bold surfaces will only affect the default color behind a
|
|
19
|
+
feature flag. If testing successful, this change will be made available in a later release.
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- Updated dependencies
|
|
24
|
+
|
|
3
25
|
## 5.0.0
|
|
4
26
|
|
|
5
27
|
### Major Changes
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
1
|
+
._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
+
._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
|
+
._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
|
+
._11c84xcc{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
5
|
+
._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
6
|
+
._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
7
|
+
._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
8
8
|
._1mouidpf{margin-block:0}
|
|
9
9
|
._1dyz4jg8{letter-spacing:normal}
|
|
10
10
|
._1p1dglyw{text-transform:none}
|
|
@@ -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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
16
|
var _primitives = require("@atlaskit/primitives");
|
|
16
17
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
17
18
|
var _headingContext = require("./heading-context");
|
|
@@ -42,13 +43,13 @@ var headingColorStylesMap = {
|
|
|
42
43
|
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
43
44
|
*/
|
|
44
45
|
var headingSizeStylesMap = {
|
|
45
|
-
xxlarge: "
|
|
46
|
-
xlarge: "
|
|
47
|
-
large: "
|
|
48
|
-
medium: "
|
|
49
|
-
small: "
|
|
50
|
-
xsmall: "
|
|
51
|
-
xxsmall: "
|
|
46
|
+
xxlarge: "_11c84xcc",
|
|
47
|
+
xlarge: "_11c81c04",
|
|
48
|
+
large: "_11c8nf1z",
|
|
49
|
+
medium: "_11c8lodh",
|
|
50
|
+
small: "_11c8nbxd",
|
|
51
|
+
xsmall: "_11c8140y",
|
|
52
|
+
xxsmall: "_11c81vhk"
|
|
52
53
|
};
|
|
53
54
|
/**
|
|
54
55
|
* @codegenEnd
|
|
@@ -56,6 +57,15 @@ var headingSizeStylesMap = {
|
|
|
56
57
|
|
|
57
58
|
var useColor = function useColor(colorProp) {
|
|
58
59
|
var surface = (0, _compiled.UNSAFE_useSurface)();
|
|
60
|
+
if ((0, _platformFeatureFlags.fg)('platform-typography-improved-color-control')) {
|
|
61
|
+
if (colorProp) {
|
|
62
|
+
return colorProp;
|
|
63
|
+
}
|
|
64
|
+
if (_primitives.UNSAFE_inverseColorMap.hasOwnProperty(surface)) {
|
|
65
|
+
return _primitives.UNSAFE_inverseColorMap[surface];
|
|
66
|
+
}
|
|
67
|
+
return 'color.text';
|
|
68
|
+
}
|
|
59
69
|
|
|
60
70
|
/**
|
|
61
71
|
* Where the color of the surface is inverted we always override the color
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
1
|
+
._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
+
._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
|
+
._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
|
+
._11c84xcc{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
5
|
+
._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
6
|
+
._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
7
|
+
._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
8
8
|
._1mouidpf{margin-block:0}
|
|
9
9
|
._1dyz4jg8{letter-spacing:normal}
|
|
10
10
|
._1p1dglyw{text-transform:none}
|
|
@@ -3,6 +3,7 @@ import "./heading.partial.compiled.css";
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { forwardRef } from 'react';
|
|
6
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
7
|
import { UNSAFE_inverseColorMap } from '@atlaskit/primitives';
|
|
7
8
|
import { UNSAFE_useSurface } from '@atlaskit/primitives/compiled';
|
|
8
9
|
import { useHeading } from './heading-context';
|
|
@@ -31,13 +32,13 @@ const headingColorStylesMap = {
|
|
|
31
32
|
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
32
33
|
*/
|
|
33
34
|
const headingSizeStylesMap = {
|
|
34
|
-
xxlarge: "
|
|
35
|
-
xlarge: "
|
|
36
|
-
large: "
|
|
37
|
-
medium: "
|
|
38
|
-
small: "
|
|
39
|
-
xsmall: "
|
|
40
|
-
xxsmall: "
|
|
35
|
+
xxlarge: "_11c84xcc",
|
|
36
|
+
xlarge: "_11c81c04",
|
|
37
|
+
large: "_11c8nf1z",
|
|
38
|
+
medium: "_11c8lodh",
|
|
39
|
+
small: "_11c8nbxd",
|
|
40
|
+
xsmall: "_11c8140y",
|
|
41
|
+
xxsmall: "_11c81vhk"
|
|
41
42
|
};
|
|
42
43
|
/**
|
|
43
44
|
* @codegenEnd
|
|
@@ -45,6 +46,15 @@ const headingSizeStylesMap = {
|
|
|
45
46
|
|
|
46
47
|
const useColor = colorProp => {
|
|
47
48
|
const surface = UNSAFE_useSurface();
|
|
49
|
+
if (fg('platform-typography-improved-color-control')) {
|
|
50
|
+
if (colorProp) {
|
|
51
|
+
return colorProp;
|
|
52
|
+
}
|
|
53
|
+
if (UNSAFE_inverseColorMap.hasOwnProperty(surface)) {
|
|
54
|
+
return UNSAFE_inverseColorMap[surface];
|
|
55
|
+
}
|
|
56
|
+
return 'color.text';
|
|
57
|
+
}
|
|
48
58
|
|
|
49
59
|
/**
|
|
50
60
|
* Where the color of the surface is inverted we always override the color
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
1
|
+
._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
+
._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
|
+
._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
|
+
._11c84xcc{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
5
|
+
._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
6
|
+
._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
7
|
+
._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
8
8
|
._1mouidpf{margin-block:0}
|
|
9
9
|
._1dyz4jg8{letter-spacing:normal}
|
|
10
10
|
._1p1dglyw{text-transform:none}
|
|
@@ -4,6 +4,7 @@ import "./heading.partial.compiled.css";
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
6
6
|
import { forwardRef } from 'react';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
8
|
import { UNSAFE_inverseColorMap } from '@atlaskit/primitives';
|
|
8
9
|
import { UNSAFE_useSurface } from '@atlaskit/primitives/compiled';
|
|
9
10
|
import { useHeading } from './heading-context';
|
|
@@ -32,13 +33,13 @@ var headingColorStylesMap = {
|
|
|
32
33
|
* @codegenCommand yarn workspace @atlaskit/heading codegen
|
|
33
34
|
*/
|
|
34
35
|
var headingSizeStylesMap = {
|
|
35
|
-
xxlarge: "
|
|
36
|
-
xlarge: "
|
|
37
|
-
large: "
|
|
38
|
-
medium: "
|
|
39
|
-
small: "
|
|
40
|
-
xsmall: "
|
|
41
|
-
xxsmall: "
|
|
36
|
+
xxlarge: "_11c84xcc",
|
|
37
|
+
xlarge: "_11c81c04",
|
|
38
|
+
large: "_11c8nf1z",
|
|
39
|
+
medium: "_11c8lodh",
|
|
40
|
+
small: "_11c8nbxd",
|
|
41
|
+
xsmall: "_11c8140y",
|
|
42
|
+
xxsmall: "_11c81vhk"
|
|
42
43
|
};
|
|
43
44
|
/**
|
|
44
45
|
* @codegenEnd
|
|
@@ -46,6 +47,15 @@ var headingSizeStylesMap = {
|
|
|
46
47
|
|
|
47
48
|
var useColor = function useColor(colorProp) {
|
|
48
49
|
var surface = UNSAFE_useSurface();
|
|
50
|
+
if (fg('platform-typography-improved-color-control')) {
|
|
51
|
+
if (colorProp) {
|
|
52
|
+
return colorProp;
|
|
53
|
+
}
|
|
54
|
+
if (UNSAFE_inverseColorMap.hasOwnProperty(surface)) {
|
|
55
|
+
return UNSAFE_inverseColorMap[surface];
|
|
56
|
+
}
|
|
57
|
+
return 'color.text';
|
|
58
|
+
}
|
|
49
59
|
|
|
50
60
|
/**
|
|
51
61
|
* 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/heading",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.1.1",
|
|
4
4
|
"description": "A heading is a typography component used to display text in different sizes and formats.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -32,23 +32,23 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@atlaskit/css": "^0.10.0",
|
|
35
|
-
"@atlaskit/
|
|
36
|
-
"@atlaskit/
|
|
35
|
+
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
36
|
+
"@atlaskit/primitives": "^14.2.0",
|
|
37
|
+
"@atlaskit/tokens": "^4.5.0",
|
|
37
38
|
"@babel/runtime": "^7.0.0",
|
|
38
|
-
"@compiled/react": "^0.18.
|
|
39
|
-
"@emotion/react": "^11.7.1"
|
|
39
|
+
"@compiled/react": "^0.18.3"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": "^18.2.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@af/accessibility-testing": "
|
|
46
|
-
"@af/formatting": "
|
|
47
|
-
"@af/integration-testing": "
|
|
48
|
-
"@af/visual-regression": "
|
|
49
|
-
"@atlaskit/button": "^21.
|
|
45
|
+
"@af/accessibility-testing": "^2.0.0",
|
|
46
|
+
"@af/formatting": "^0.0.4",
|
|
47
|
+
"@af/integration-testing": "^0.5.0",
|
|
48
|
+
"@af/visual-regression": "^1.3.0",
|
|
49
|
+
"@atlaskit/button": "^21.1.0",
|
|
50
50
|
"@atlaskit/ds-lib": "^4.0.0",
|
|
51
|
-
"@atlaskit/ssr": "
|
|
51
|
+
"@atlaskit/ssr": "^0.4.0",
|
|
52
52
|
"@atlassian/codegen": "^0.1.0",
|
|
53
53
|
"@testing-library/react": "^13.4.0",
|
|
54
54
|
"react-dom": "^18.2.0",
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
"dom-events": "use-bind-event-listener",
|
|
65
65
|
"design-system": "v1",
|
|
66
66
|
"styling": [
|
|
67
|
+
"static",
|
|
67
68
|
"emotion"
|
|
68
69
|
],
|
|
69
70
|
"ui-components": "lite-mode",
|
|
@@ -86,5 +87,10 @@
|
|
|
86
87
|
"af:exports": {
|
|
87
88
|
".": "./src/index.tsx"
|
|
88
89
|
},
|
|
89
|
-
"homepage": "https://atlassian.design/components/heading/"
|
|
90
|
+
"homepage": "https://atlassian.design/components/heading/",
|
|
91
|
+
"platform-feature-flags": {
|
|
92
|
+
"platform-typography-improved-color-control": {
|
|
93
|
+
"type": "boolean"
|
|
94
|
+
}
|
|
95
|
+
}
|
|
90
96
|
}
|