@atlaskit/heading 5.2.19 → 5.3.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 +14 -0
- package/dist/cjs/heading.compiled.css +10 -23
- package/dist/cjs/heading.js +11 -41
- package/dist/es2019/heading.compiled.css +10 -23
- package/dist/es2019/heading.js +11 -41
- package/dist/esm/heading.compiled.css +10 -23
- package/dist/esm/heading.js +11 -41
- package/dist/types/heading-context.d.ts +4 -1
- package/dist/types/heading.d.ts +2 -2
- package/dist/types-ts4.5/heading.d.ts +2 -2
- package/package.json +5 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/heading
|
|
2
2
|
|
|
3
|
+
## 5.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`2751faf4f808f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2751faf4f808f) -
|
|
8
|
+
Increased specificity for font styles previously introduced behind a feature flag are now the
|
|
9
|
+
default.
|
|
10
|
+
|
|
11
|
+
## 5.2.20
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 5.2.19
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -1,26 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
8
|
-
.
|
|
9
|
-
.
|
|
10
|
-
._fqox1vhk._fqox1vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
11
|
-
._fqox4xcc._fqox4xcc{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
12
|
-
._fqoxlodh._fqoxlodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
13
|
-
._fqoxnbxd._fqoxnbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
14
|
-
._fqoxnf1z._fqoxnf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
15
|
-
._1mouidpf{margin-block:0}
|
|
16
|
-
._dxsyidpf._dxsyidpf{margin-block:0}
|
|
17
|
-
._1dyz4jg8{letter-spacing:normal}
|
|
18
|
-
._1i144jg8._1i144jg8{letter-spacing:normal}
|
|
19
|
-
._1p1dglyw{text-transform:none}
|
|
1
|
+
|
|
2
|
+
._fqox10sd._fqox10sd{font:var(--ds-font-heading-large,normal 653 24px/28px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
|
+
._fqox12ln._fqox12ln{font:var(--ds-font-heading-xlarge,normal 653 28px/2pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
|
+
._fqox1af2._fqox1af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
5
|
+
._fqox1e3o._fqox1e3o{font:var(--ds-font-heading-small,normal 653 1pc/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
6
|
+
._fqox1iff._fqox1iff{font:var(--ds-font-heading-xxlarge,normal 653 2pc/36px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
7
|
+
._fqox1qyo._fqox1qyo{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
8
|
+
._fqoxi4vh._fqoxi4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
9
|
+
._dxsyidpf._dxsyidpf{margin-block:0}._1i144jg8._1i144jg8{letter-spacing:normal}
|
|
20
10
|
._1w9015cr._1w9015cr{color:var(--ds-text-inverse,#fff)}
|
|
21
11
|
._1w901yd3._1w901yd3{color:var(--ds-text-warning-inverse,#292a2e)}
|
|
22
12
|
._1w90i7uo._1w90i7uo{color:var(--ds-text,#292a2e)}
|
|
23
|
-
._nmk4glyw._nmk4glyw{text-transform:none}
|
|
24
|
-
._syaz15cr{color:var(--ds-text-inverse,#fff)}
|
|
25
|
-
._syaz1yd3{color:var(--ds-text-warning-inverse,#292a2e)}
|
|
26
|
-
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
13
|
+
._nmk4glyw._nmk4glyw{text-transform:none}
|
package/dist/cjs/heading.js
CHANGED
|
@@ -12,7 +12,6 @@ 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");
|
|
16
15
|
var _primitives = require("@atlaskit/primitives");
|
|
17
16
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
18
17
|
var _headingContext = require("./heading-context");
|
|
@@ -29,46 +28,17 @@ var sizeTagMap = {
|
|
|
29
28
|
xxsmall: 'h6'
|
|
30
29
|
};
|
|
31
30
|
|
|
32
|
-
/**
|
|
33
|
-
* Remove with `platform-dst-heading-specificity` fg cleanup
|
|
34
|
-
*/
|
|
35
|
-
var styles = {
|
|
36
|
-
reset: "_1mouidpf _1dyz4jg8 _1p1dglyw"
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* Remove with `platform-dst-heading-specificity` fg cleanup
|
|
41
|
-
*/
|
|
42
|
-
var headingColorStyles = {
|
|
43
|
-
'color.text': "_syazi7uo",
|
|
44
|
-
'color.text.inverse': "_syaz15cr",
|
|
45
|
-
'color.text.warning.inverse': "_syaz1yd3"
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* Remove with `platform-dst-heading-specificity` fg cleanup
|
|
50
|
-
*/
|
|
51
|
-
var headingSizeStyles = {
|
|
52
|
-
xxlarge: "_11c84xcc",
|
|
53
|
-
xlarge: "_11c81c04",
|
|
54
|
-
large: "_11c8nf1z",
|
|
55
|
-
medium: "_11c8lodh",
|
|
56
|
-
small: "_11c8nbxd",
|
|
57
|
-
xsmall: "_11c8140y",
|
|
58
|
-
xxsmall: "_11c81vhk"
|
|
59
|
-
};
|
|
60
|
-
|
|
61
31
|
/**
|
|
62
32
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
63
33
|
*/
|
|
64
|
-
var
|
|
34
|
+
var styles = {
|
|
65
35
|
reset: "_dxsyidpf _1i144jg8 _nmk4glyw"
|
|
66
36
|
};
|
|
67
37
|
|
|
68
38
|
/**
|
|
69
39
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
70
40
|
*/
|
|
71
|
-
var
|
|
41
|
+
var headingColorStyles = {
|
|
72
42
|
'color.text': "_1w90i7uo",
|
|
73
43
|
'color.text.inverse': "_1w9015cr",
|
|
74
44
|
'color.text.warning.inverse': "_1w901yd3"
|
|
@@ -77,14 +47,14 @@ var headingColorStylesWithSpecificity = {
|
|
|
77
47
|
/**
|
|
78
48
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
79
49
|
*/
|
|
80
|
-
var
|
|
81
|
-
xxlarge: "
|
|
82
|
-
xlarge: "
|
|
83
|
-
large: "
|
|
84
|
-
medium: "
|
|
85
|
-
small: "
|
|
86
|
-
xsmall: "
|
|
87
|
-
xxsmall: "
|
|
50
|
+
var headingSizeStyles = {
|
|
51
|
+
xxlarge: "_fqox1iff",
|
|
52
|
+
xlarge: "_fqox12ln",
|
|
53
|
+
large: "_fqox10sd",
|
|
54
|
+
medium: "_fqox1af2",
|
|
55
|
+
small: "_fqox1e3o",
|
|
56
|
+
xsmall: "_fqox1qyo",
|
|
57
|
+
xxsmall: "_fqoxi4vh"
|
|
88
58
|
};
|
|
89
59
|
/**
|
|
90
60
|
* @codegenEnd
|
|
@@ -135,7 +105,7 @@ var Heading = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
135
105
|
"data-testid": testId,
|
|
136
106
|
role: needsAriaRole ? 'heading' : undefined,
|
|
137
107
|
"aria-level": needsAriaRole ? hLevel : undefined,
|
|
138
|
-
className: (0, _runtime.ax)([styles.reset,
|
|
108
|
+
className: (0, _runtime.ax)([styles.reset, headingSizeStyles[size], headingColorStyles[color]])
|
|
139
109
|
}, children);
|
|
140
110
|
});
|
|
141
111
|
var _default = exports.default = Heading;
|
|
@@ -1,26 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
8
|
-
.
|
|
9
|
-
.
|
|
10
|
-
._fqox1vhk._fqox1vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
11
|
-
._fqox4xcc._fqox4xcc{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
12
|
-
._fqoxlodh._fqoxlodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
13
|
-
._fqoxnbxd._fqoxnbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
14
|
-
._fqoxnf1z._fqoxnf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
15
|
-
._1mouidpf{margin-block:0}
|
|
16
|
-
._dxsyidpf._dxsyidpf{margin-block:0}
|
|
17
|
-
._1dyz4jg8{letter-spacing:normal}
|
|
18
|
-
._1i144jg8._1i144jg8{letter-spacing:normal}
|
|
19
|
-
._1p1dglyw{text-transform:none}
|
|
1
|
+
|
|
2
|
+
._fqox10sd._fqox10sd{font:var(--ds-font-heading-large,normal 653 24px/28px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
|
+
._fqox12ln._fqox12ln{font:var(--ds-font-heading-xlarge,normal 653 28px/2pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
|
+
._fqox1af2._fqox1af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
5
|
+
._fqox1e3o._fqox1e3o{font:var(--ds-font-heading-small,normal 653 1pc/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
6
|
+
._fqox1iff._fqox1iff{font:var(--ds-font-heading-xxlarge,normal 653 2pc/36px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
7
|
+
._fqox1qyo._fqox1qyo{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
8
|
+
._fqoxi4vh._fqoxi4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
9
|
+
._dxsyidpf._dxsyidpf{margin-block:0}._1i144jg8._1i144jg8{letter-spacing:normal}
|
|
20
10
|
._1w9015cr._1w9015cr{color:var(--ds-text-inverse,#fff)}
|
|
21
11
|
._1w901yd3._1w901yd3{color:var(--ds-text-warning-inverse,#292a2e)}
|
|
22
12
|
._1w90i7uo._1w90i7uo{color:var(--ds-text,#292a2e)}
|
|
23
|
-
._nmk4glyw._nmk4glyw{text-transform:none}
|
|
24
|
-
._syaz15cr{color:var(--ds-text-inverse,#fff)}
|
|
25
|
-
._syaz1yd3{color:var(--ds-text-warning-inverse,#292a2e)}
|
|
26
|
-
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
13
|
+
._nmk4glyw._nmk4glyw{text-transform:none}
|
package/dist/es2019/heading.js
CHANGED
|
@@ -4,7 +4,6 @@ import "./heading.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';
|
|
8
7
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
9
8
|
import { UNSAFE_inverseColorMap } from '@atlaskit/primitives';
|
|
10
9
|
import { UNSAFE_useSurface } from '@atlaskit/primitives/compiled';
|
|
@@ -19,46 +18,17 @@ const sizeTagMap = {
|
|
|
19
18
|
xxsmall: 'h6'
|
|
20
19
|
};
|
|
21
20
|
|
|
22
|
-
/**
|
|
23
|
-
* Remove with `platform-dst-heading-specificity` fg cleanup
|
|
24
|
-
*/
|
|
25
|
-
const styles = {
|
|
26
|
-
reset: "_1mouidpf _1dyz4jg8 _1p1dglyw"
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* Remove with `platform-dst-heading-specificity` fg cleanup
|
|
31
|
-
*/
|
|
32
|
-
const headingColorStyles = {
|
|
33
|
-
'color.text': "_syazi7uo",
|
|
34
|
-
'color.text.inverse': "_syaz15cr",
|
|
35
|
-
'color.text.warning.inverse': "_syaz1yd3"
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Remove with `platform-dst-heading-specificity` fg cleanup
|
|
40
|
-
*/
|
|
41
|
-
const headingSizeStyles = {
|
|
42
|
-
xxlarge: "_11c84xcc",
|
|
43
|
-
xlarge: "_11c81c04",
|
|
44
|
-
large: "_11c8nf1z",
|
|
45
|
-
medium: "_11c8lodh",
|
|
46
|
-
small: "_11c8nbxd",
|
|
47
|
-
xsmall: "_11c8140y",
|
|
48
|
-
xxsmall: "_11c81vhk"
|
|
49
|
-
};
|
|
50
|
-
|
|
51
21
|
/**
|
|
52
22
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
53
23
|
*/
|
|
54
|
-
const
|
|
24
|
+
const styles = {
|
|
55
25
|
reset: "_dxsyidpf _1i144jg8 _nmk4glyw"
|
|
56
26
|
};
|
|
57
27
|
|
|
58
28
|
/**
|
|
59
29
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
60
30
|
*/
|
|
61
|
-
const
|
|
31
|
+
const headingColorStyles = {
|
|
62
32
|
'color.text': "_1w90i7uo",
|
|
63
33
|
'color.text.inverse': "_1w9015cr",
|
|
64
34
|
'color.text.warning.inverse': "_1w901yd3"
|
|
@@ -67,14 +37,14 @@ const headingColorStylesWithSpecificity = {
|
|
|
67
37
|
/**
|
|
68
38
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
69
39
|
*/
|
|
70
|
-
const
|
|
71
|
-
xxlarge: "
|
|
72
|
-
xlarge: "
|
|
73
|
-
large: "
|
|
74
|
-
medium: "
|
|
75
|
-
small: "
|
|
76
|
-
xsmall: "
|
|
77
|
-
xxsmall: "
|
|
40
|
+
const headingSizeStyles = {
|
|
41
|
+
xxlarge: "_fqox1iff",
|
|
42
|
+
xlarge: "_fqox12ln",
|
|
43
|
+
large: "_fqox10sd",
|
|
44
|
+
medium: "_fqox1af2",
|
|
45
|
+
small: "_fqox1e3o",
|
|
46
|
+
xsmall: "_fqox1qyo",
|
|
47
|
+
xxsmall: "_fqoxi4vh"
|
|
78
48
|
};
|
|
79
49
|
/**
|
|
80
50
|
* @codegenEnd
|
|
@@ -124,7 +94,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
124
94
|
"data-testid": testId,
|
|
125
95
|
role: needsAriaRole ? 'heading' : undefined,
|
|
126
96
|
"aria-level": needsAriaRole ? hLevel : undefined,
|
|
127
|
-
className: ax([styles.reset,
|
|
97
|
+
className: ax([styles.reset, headingSizeStyles[size], headingColorStyles[color]])
|
|
128
98
|
}, children);
|
|
129
99
|
});
|
|
130
100
|
export default Heading;
|
|
@@ -1,26 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
8
|
-
.
|
|
9
|
-
.
|
|
10
|
-
._fqox1vhk._fqox1vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
11
|
-
._fqox4xcc._fqox4xcc{font:var(--ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
12
|
-
._fqoxlodh._fqoxlodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
13
|
-
._fqoxnbxd._fqoxnbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
14
|
-
._fqoxnf1z._fqoxnf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
15
|
-
._1mouidpf{margin-block:0}
|
|
16
|
-
._dxsyidpf._dxsyidpf{margin-block:0}
|
|
17
|
-
._1dyz4jg8{letter-spacing:normal}
|
|
18
|
-
._1i144jg8._1i144jg8{letter-spacing:normal}
|
|
19
|
-
._1p1dglyw{text-transform:none}
|
|
1
|
+
|
|
2
|
+
._fqox10sd._fqox10sd{font:var(--ds-font-heading-large,normal 653 24px/28px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
|
+
._fqox12ln._fqox12ln{font:var(--ds-font-heading-xlarge,normal 653 28px/2pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
|
+
._fqox1af2._fqox1af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
5
|
+
._fqox1e3o._fqox1e3o{font:var(--ds-font-heading-small,normal 653 1pc/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
6
|
+
._fqox1iff._fqox1iff{font:var(--ds-font-heading-xxlarge,normal 653 2pc/36px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
7
|
+
._fqox1qyo._fqox1qyo{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
8
|
+
._fqoxi4vh._fqoxi4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
9
|
+
._dxsyidpf._dxsyidpf{margin-block:0}._1i144jg8._1i144jg8{letter-spacing:normal}
|
|
20
10
|
._1w9015cr._1w9015cr{color:var(--ds-text-inverse,#fff)}
|
|
21
11
|
._1w901yd3._1w901yd3{color:var(--ds-text-warning-inverse,#292a2e)}
|
|
22
12
|
._1w90i7uo._1w90i7uo{color:var(--ds-text,#292a2e)}
|
|
23
|
-
._nmk4glyw._nmk4glyw{text-transform:none}
|
|
24
|
-
._syaz15cr{color:var(--ds-text-inverse,#fff)}
|
|
25
|
-
._syaz1yd3{color:var(--ds-text-warning-inverse,#292a2e)}
|
|
26
|
-
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
13
|
+
._nmk4glyw._nmk4glyw{text-transform:none}
|
package/dist/esm/heading.js
CHANGED
|
@@ -6,7 +6,6 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
6
6
|
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
|
|
7
7
|
|
|
8
8
|
import { forwardRef } from 'react';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
11
10
|
import { UNSAFE_inverseColorMap } from '@atlaskit/primitives';
|
|
12
11
|
import { UNSAFE_useSurface } from '@atlaskit/primitives/compiled';
|
|
@@ -21,46 +20,17 @@ var sizeTagMap = {
|
|
|
21
20
|
xxsmall: 'h6'
|
|
22
21
|
};
|
|
23
22
|
|
|
24
|
-
/**
|
|
25
|
-
* Remove with `platform-dst-heading-specificity` fg cleanup
|
|
26
|
-
*/
|
|
27
|
-
var styles = {
|
|
28
|
-
reset: "_1mouidpf _1dyz4jg8 _1p1dglyw"
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Remove with `platform-dst-heading-specificity` fg cleanup
|
|
33
|
-
*/
|
|
34
|
-
var headingColorStyles = {
|
|
35
|
-
'color.text': "_syazi7uo",
|
|
36
|
-
'color.text.inverse': "_syaz15cr",
|
|
37
|
-
'color.text.warning.inverse': "_syaz1yd3"
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Remove with `platform-dst-heading-specificity` fg cleanup
|
|
42
|
-
*/
|
|
43
|
-
var headingSizeStyles = {
|
|
44
|
-
xxlarge: "_11c84xcc",
|
|
45
|
-
xlarge: "_11c81c04",
|
|
46
|
-
large: "_11c8nf1z",
|
|
47
|
-
medium: "_11c8lodh",
|
|
48
|
-
small: "_11c8nbxd",
|
|
49
|
-
xsmall: "_11c8140y",
|
|
50
|
-
xxsmall: "_11c81vhk"
|
|
51
|
-
};
|
|
52
|
-
|
|
53
23
|
/**
|
|
54
24
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
55
25
|
*/
|
|
56
|
-
var
|
|
26
|
+
var styles = {
|
|
57
27
|
reset: "_dxsyidpf _1i144jg8 _nmk4glyw"
|
|
58
28
|
};
|
|
59
29
|
|
|
60
30
|
/**
|
|
61
31
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
62
32
|
*/
|
|
63
|
-
var
|
|
33
|
+
var headingColorStyles = {
|
|
64
34
|
'color.text': "_1w90i7uo",
|
|
65
35
|
'color.text.inverse': "_1w9015cr",
|
|
66
36
|
'color.text.warning.inverse': "_1w901yd3"
|
|
@@ -69,14 +39,14 @@ var headingColorStylesWithSpecificity = {
|
|
|
69
39
|
/**
|
|
70
40
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
71
41
|
*/
|
|
72
|
-
var
|
|
73
|
-
xxlarge: "
|
|
74
|
-
xlarge: "
|
|
75
|
-
large: "
|
|
76
|
-
medium: "
|
|
77
|
-
small: "
|
|
78
|
-
xsmall: "
|
|
79
|
-
xxsmall: "
|
|
42
|
+
var headingSizeStyles = {
|
|
43
|
+
xxlarge: "_fqox1iff",
|
|
44
|
+
xlarge: "_fqox12ln",
|
|
45
|
+
large: "_fqox10sd",
|
|
46
|
+
medium: "_fqox1af2",
|
|
47
|
+
small: "_fqox1e3o",
|
|
48
|
+
xsmall: "_fqox1qyo",
|
|
49
|
+
xxsmall: "_fqoxi4vh"
|
|
80
50
|
};
|
|
81
51
|
/**
|
|
82
52
|
* @codegenEnd
|
|
@@ -127,7 +97,7 @@ var Heading = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
127
97
|
"data-testid": testId,
|
|
128
98
|
role: needsAriaRole ? 'heading' : undefined,
|
|
129
99
|
"aria-level": needsAriaRole ? hLevel : undefined,
|
|
130
|
-
className: ax([styles.reset,
|
|
100
|
+
className: ax([styles.reset, headingSizeStyles[size], headingColorStyles[color]])
|
|
131
101
|
}, children);
|
|
132
102
|
});
|
|
133
103
|
export default Heading;
|
|
@@ -4,7 +4,10 @@ type HeadingElement = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'div';
|
|
|
4
4
|
/**
|
|
5
5
|
* Infers the correct heading markup based on the current heading level context.
|
|
6
6
|
*/
|
|
7
|
-
export declare const useHeading: (fallback: HeadingElement) => readonly [
|
|
7
|
+
export declare const useHeading: (fallback: HeadingElement) => readonly [
|
|
8
|
+
HeadingLevel,
|
|
9
|
+
HeadingElement
|
|
10
|
+
];
|
|
8
11
|
interface HeadingLevelContextProps {
|
|
9
12
|
/**
|
|
10
13
|
* Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
|
package/dist/types/heading.d.ts
CHANGED
|
@@ -39,7 +39,7 @@ export type HeadingProps = {
|
|
|
39
39
|
/**
|
|
40
40
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
41
41
|
*/
|
|
42
|
-
declare const
|
|
42
|
+
declare const headingSizeStyles: {
|
|
43
43
|
readonly xxlarge: CompiledStyles<{
|
|
44
44
|
'&&': {
|
|
45
45
|
font: 'var(--ds-font-heading-xxlarge)';
|
|
@@ -76,7 +76,7 @@ declare const headingSizeWithSpecificityStyles: {
|
|
|
76
76
|
};
|
|
77
77
|
}>;
|
|
78
78
|
};
|
|
79
|
-
type HeadingSize = keyof typeof
|
|
79
|
+
type HeadingSize = keyof typeof headingSizeStyles;
|
|
80
80
|
/**
|
|
81
81
|
* __Heading__
|
|
82
82
|
*
|
|
@@ -39,7 +39,7 @@ export type HeadingProps = {
|
|
|
39
39
|
/**
|
|
40
40
|
* Using '&&' here to increase specificity of Heading styles such that app styles like ".wiki-content h4" cannot override this component.
|
|
41
41
|
*/
|
|
42
|
-
declare const
|
|
42
|
+
declare const headingSizeStyles: {
|
|
43
43
|
readonly xxlarge: CompiledStyles<{
|
|
44
44
|
'&&': {
|
|
45
45
|
font: 'var(--ds-font-heading-xxlarge)';
|
|
@@ -76,7 +76,7 @@ declare const headingSizeWithSpecificityStyles: {
|
|
|
76
76
|
};
|
|
77
77
|
}>;
|
|
78
78
|
};
|
|
79
|
-
type HeadingSize = keyof typeof
|
|
79
|
+
type HeadingSize = keyof typeof headingSizeStyles;
|
|
80
80
|
/**
|
|
81
81
|
* __Heading__
|
|
82
82
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/heading",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
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/"
|
|
@@ -24,10 +24,8 @@
|
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@atlaskit/
|
|
28
|
-
"@atlaskit/
|
|
29
|
-
"@atlaskit/primitives": "^17.1.0",
|
|
30
|
-
"@atlaskit/tokens": "^10.0.0",
|
|
27
|
+
"@atlaskit/primitives": "^18.0.0",
|
|
28
|
+
"@atlaskit/tokens": "^11.0.0",
|
|
31
29
|
"@babel/runtime": "^7.0.0",
|
|
32
30
|
"@compiled/react": "^0.18.6"
|
|
33
31
|
},
|
|
@@ -40,6 +38,7 @@
|
|
|
40
38
|
"@af/integration-testing": "workspace:^",
|
|
41
39
|
"@af/visual-regression": "workspace:^",
|
|
42
40
|
"@atlaskit/button": "^23.9.0",
|
|
41
|
+
"@atlaskit/css": "^0.19.0",
|
|
43
42
|
"@atlassian/codegen": "^0.1.0",
|
|
44
43
|
"@atlassian/ssr-tests": "workspace:^",
|
|
45
44
|
"@testing-library/react": "^16.3.0",
|
|
@@ -76,9 +75,5 @@
|
|
|
76
75
|
}
|
|
77
76
|
},
|
|
78
77
|
"homepage": "https://atlassian.design/components/heading/",
|
|
79
|
-
"platform-feature-flags": {
|
|
80
|
-
"platform-dst-heading-specificity": {
|
|
81
|
-
"type": "boolean"
|
|
82
|
-
}
|
|
83
|
-
}
|
|
78
|
+
"platform-feature-flags": {}
|
|
84
79
|
}
|