@atlaskit/heading 5.2.20 → 5.3.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 +17 -0
- package/dist/cjs/heading.compiled.css +3 -16
- package/dist/cjs/heading.js +5 -35
- package/dist/es2019/heading.compiled.css +3 -16
- package/dist/es2019/heading.js +5 -35
- package/dist/esm/heading.compiled.css +3 -16
- package/dist/esm/heading.js +5 -35
- package/dist/types/heading-context.d.ts +2 -5
- package/dist/types/heading.d.ts +2 -2
- package/dist/types-ts4.5/heading-context.d.ts +1 -1
- package/dist/types-ts4.5/heading.d.ts +2 -2
- package/heading.docs.tsx +94 -0
- package/package.json +16 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/heading
|
|
2
2
|
|
|
3
|
+
## 5.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`02483200273ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02483200273ec) -
|
|
8
|
+
Enrol all Design System UI packages into the React Compiler with platform gating via
|
|
9
|
+
isReactCompilerActivePlatform.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 5.3.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- [`2751faf4f808f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2751faf4f808f) -
|
|
17
|
+
Increased specificity for font styles previously introduced behind a feature flag are now the
|
|
18
|
+
default.
|
|
19
|
+
|
|
3
20
|
## 5.2.20
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
._11c812ln{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)}
|
|
3
|
-
._11c81af2{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)}
|
|
4
|
-
._11c81e3o{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)}
|
|
5
|
-
._11c81iff{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)}
|
|
6
|
-
._11c81qyo{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)}
|
|
7
|
-
._11c8i4vh{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)}
|
|
1
|
+
|
|
8
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)}
|
|
9
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)}
|
|
10
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)}
|
|
@@ -12,15 +6,8 @@
|
|
|
12
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)}
|
|
13
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)}
|
|
14
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)}
|
|
15
|
-
.
|
|
16
|
-
._dxsyidpf._dxsyidpf{margin-block:0}
|
|
17
|
-
._1dyz4jg8{letter-spacing:normal}
|
|
18
|
-
._1i144jg8._1i144jg8{letter-spacing:normal}
|
|
19
|
-
._1p1dglyw{text-transform:none}
|
|
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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* heading.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* heading.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -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: "_11c81iff",
|
|
53
|
-
xlarge: "_11c812ln",
|
|
54
|
-
large: "_11c810sd",
|
|
55
|
-
medium: "_11c81af2",
|
|
56
|
-
small: "_11c81e3o",
|
|
57
|
-
xsmall: "_11c81qyo",
|
|
58
|
-
xxsmall: "_11c8i4vh"
|
|
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,7 +47,7 @@ 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
|
|
50
|
+
var headingSizeStyles = {
|
|
81
51
|
xxlarge: "_fqox1iff",
|
|
82
52
|
xlarge: "_fqox12ln",
|
|
83
53
|
large: "_fqox10sd",
|
|
@@ -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,10 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
._11c812ln{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)}
|
|
3
|
-
._11c81af2{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)}
|
|
4
|
-
._11c81e3o{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)}
|
|
5
|
-
._11c81iff{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)}
|
|
6
|
-
._11c81qyo{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)}
|
|
7
|
-
._11c8i4vh{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)}
|
|
1
|
+
|
|
8
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)}
|
|
9
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)}
|
|
10
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)}
|
|
@@ -12,15 +6,8 @@
|
|
|
12
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)}
|
|
13
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)}
|
|
14
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)}
|
|
15
|
-
.
|
|
16
|
-
._dxsyidpf._dxsyidpf{margin-block:0}
|
|
17
|
-
._1dyz4jg8{letter-spacing:normal}
|
|
18
|
-
._1i144jg8._1i144jg8{letter-spacing:normal}
|
|
19
|
-
._1p1dglyw{text-transform:none}
|
|
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
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
/* heading.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* heading.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
|
|
3
3
|
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: "_11c81iff",
|
|
43
|
-
xlarge: "_11c812ln",
|
|
44
|
-
large: "_11c810sd",
|
|
45
|
-
medium: "_11c81af2",
|
|
46
|
-
small: "_11c81e3o",
|
|
47
|
-
xsmall: "_11c81qyo",
|
|
48
|
-
xxsmall: "_11c8i4vh"
|
|
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,7 +37,7 @@ 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
|
|
40
|
+
const headingSizeStyles = {
|
|
71
41
|
xxlarge: "_fqox1iff",
|
|
72
42
|
xlarge: "_fqox12ln",
|
|
73
43
|
large: "_fqox10sd",
|
|
@@ -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,10 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
._11c812ln{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)}
|
|
3
|
-
._11c81af2{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)}
|
|
4
|
-
._11c81e3o{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)}
|
|
5
|
-
._11c81iff{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)}
|
|
6
|
-
._11c81qyo{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)}
|
|
7
|
-
._11c8i4vh{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)}
|
|
1
|
+
|
|
8
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)}
|
|
9
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)}
|
|
10
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)}
|
|
@@ -12,15 +6,8 @@
|
|
|
12
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)}
|
|
13
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)}
|
|
14
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)}
|
|
15
|
-
.
|
|
16
|
-
._dxsyidpf._dxsyidpf{margin-block:0}
|
|
17
|
-
._1dyz4jg8{letter-spacing:normal}
|
|
18
|
-
._1i144jg8._1i144jg8{letter-spacing:normal}
|
|
19
|
-
._1p1dglyw{text-transform:none}
|
|
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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* heading.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* heading.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import "./heading.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
|
@@ -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: "_11c81iff",
|
|
45
|
-
xlarge: "_11c812ln",
|
|
46
|
-
large: "_11c810sd",
|
|
47
|
-
medium: "_11c81af2",
|
|
48
|
-
small: "_11c81e3o",
|
|
49
|
-
xsmall: "_11c81qyo",
|
|
50
|
-
xxsmall: "_11c8i4vh"
|
|
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,7 +39,7 @@ 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
|
|
42
|
+
var headingSizeStyles = {
|
|
73
43
|
xxlarge: "_fqox1iff",
|
|
74
44
|
xlarge: "_fqox12ln",
|
|
75
45
|
large: "_fqox10sd",
|
|
@@ -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,10 +4,7 @@ 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 [
|
|
8
|
-
HeadingLevel,
|
|
9
|
-
HeadingElement
|
|
10
|
-
];
|
|
7
|
+
export declare const useHeading: (fallback: HeadingElement) => readonly [HeadingLevel, HeadingElement];
|
|
11
8
|
interface HeadingLevelContextProps {
|
|
12
9
|
/**
|
|
13
10
|
* Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
|
|
@@ -34,5 +31,5 @@ interface HeadingLevelContextProps {
|
|
|
34
31
|
* </HeadingContext>
|
|
35
32
|
* ```
|
|
36
33
|
*/
|
|
37
|
-
declare const HeadingLevelContextProvider: ({ children, value }: HeadingLevelContextProps) => React.JSX.Element;
|
|
34
|
+
declare const HeadingLevelContextProvider: ({ children, value, }: HeadingLevelContextProps) => React.JSX.Element;
|
|
38
35
|
export default HeadingLevelContextProvider;
|
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
|
*
|
|
@@ -34,5 +34,5 @@ interface HeadingLevelContextProps {
|
|
|
34
34
|
* </HeadingContext>
|
|
35
35
|
* ```
|
|
36
36
|
*/
|
|
37
|
-
declare const HeadingLevelContextProvider: ({ children, value }: HeadingLevelContextProps) => React.JSX.Element;
|
|
37
|
+
declare const HeadingLevelContextProvider: ({ children, value, }: HeadingLevelContextProps) => React.JSX.Element;
|
|
38
38
|
export default HeadingLevelContextProvider;
|
|
@@ -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/heading.docs.tsx
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
|
|
3
|
+
import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
|
|
4
|
+
|
|
5
|
+
const documentation: ComponentStructuredContentSource[] = [
|
|
6
|
+
{
|
|
7
|
+
name: 'Heading',
|
|
8
|
+
description:
|
|
9
|
+
'A component for creating accessible, consistently styled headings with proper hierarchy. Headings are sized to contrast with content, increase visual hierarchy, and help readers easily understand the structure of content.',
|
|
10
|
+
status: 'general-availability',
|
|
11
|
+
import: {
|
|
12
|
+
name: 'Heading',
|
|
13
|
+
package: '@atlaskit/heading',
|
|
14
|
+
type: 'default',
|
|
15
|
+
packagePath: path.resolve(__dirname),
|
|
16
|
+
packageJson: require('./package.json'),
|
|
17
|
+
},
|
|
18
|
+
usageGuidelines: [
|
|
19
|
+
'Use the `HeadingContextProvider` offering to maintain heading levels in complex layouts',
|
|
20
|
+
'Maintain proper heading hierarchy',
|
|
21
|
+
'Keep headings concise and meaningful',
|
|
22
|
+
'Use sentence case for most headings',
|
|
23
|
+
'Use the `color` prop for inverse text on dark backgrounds',
|
|
24
|
+
'Do NOT use any inline styles, you must use the `size` (required) and `color` (optional) props available',
|
|
25
|
+
],
|
|
26
|
+
contentGuidelines: [
|
|
27
|
+
'Use clear, descriptive heading text',
|
|
28
|
+
'Maintain proper heading hierarchy',
|
|
29
|
+
'Keep headings concise and meaningful',
|
|
30
|
+
'Use sentence case for most headings',
|
|
31
|
+
'Make headings descriptive of the content that follows',
|
|
32
|
+
],
|
|
33
|
+
accessibilityGuidelines: [
|
|
34
|
+
'Maintain proper heading hierarchy (h1 to h6)',
|
|
35
|
+
'Use only one h1 per page for main page titles',
|
|
36
|
+
'Ensure minimum 4.5:1 color contrast for text readability',
|
|
37
|
+
'Use clear, descriptive heading text that describes the content below',
|
|
38
|
+
],
|
|
39
|
+
examples: [
|
|
40
|
+
{
|
|
41
|
+
name: 'Basic',
|
|
42
|
+
description: 'Basic example',
|
|
43
|
+
source: path.resolve(__dirname, './examples/ai/basic.tsx'),
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
keywords: [
|
|
47
|
+
'heading',
|
|
48
|
+
'title',
|
|
49
|
+
'header',
|
|
50
|
+
'typography',
|
|
51
|
+
'text',
|
|
52
|
+
'h1',
|
|
53
|
+
'h2',
|
|
54
|
+
'h3',
|
|
55
|
+
'h4',
|
|
56
|
+
'h5',
|
|
57
|
+
'h6',
|
|
58
|
+
],
|
|
59
|
+
categories: ['primitive', 'data-display'],
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: 'HeadingContextProvider',
|
|
63
|
+
description:
|
|
64
|
+
'A context provider that allows you to configure the default HTML heading level for all headings within its subtree. Useful for maintaining proper heading hierarchy in complex layouts.',
|
|
65
|
+
status: 'general-availability',
|
|
66
|
+
import: {
|
|
67
|
+
name: 'HeadingContextProvider',
|
|
68
|
+
package: '@atlaskit/heading',
|
|
69
|
+
type: 'named',
|
|
70
|
+
packagePath: path.resolve(__dirname),
|
|
71
|
+
packageJson: require('./package.json'),
|
|
72
|
+
},
|
|
73
|
+
usageGuidelines: [
|
|
74
|
+
'Wrap sections that need different heading hierarchy',
|
|
75
|
+
'Use for complex layouts where heading levels need adjustment',
|
|
76
|
+
],
|
|
77
|
+
contentGuidelines: [
|
|
78
|
+
'Ensure proper heading hierarchy is maintained',
|
|
79
|
+
'Use clear, descriptive heading text',
|
|
80
|
+
'Keep headings concise and meaningful',
|
|
81
|
+
],
|
|
82
|
+
examples: [
|
|
83
|
+
{
|
|
84
|
+
name: 'Heading Context Provider',
|
|
85
|
+
description: 'Heading Context Provider example',
|
|
86
|
+
source: path.resolve(__dirname, './examples/ai/heading-context-provider.tsx'),
|
|
87
|
+
},
|
|
88
|
+
],
|
|
89
|
+
keywords: ['heading', 'context', 'provider', 'hierarchy', 'accessibility'],
|
|
90
|
+
categories: ['primitive', 'data-display'],
|
|
91
|
+
},
|
|
92
|
+
];
|
|
93
|
+
|
|
94
|
+
export default documentation;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/heading",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.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/"
|
|
@@ -17,6 +17,13 @@
|
|
|
17
17
|
],
|
|
18
18
|
"atlaskit:src": "src/index.tsx",
|
|
19
19
|
"atlassian": {
|
|
20
|
+
"react-compiler": {
|
|
21
|
+
"enabled": true,
|
|
22
|
+
"gating": {
|
|
23
|
+
"source": "@atlassian/react-compiler-gating",
|
|
24
|
+
"importSpecifierName": "isReactCompilerActivePlatform"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
20
27
|
"team": "Design System Team",
|
|
21
28
|
"website": {
|
|
22
29
|
"name": "Heading",
|
|
@@ -24,12 +31,10 @@
|
|
|
24
31
|
}
|
|
25
32
|
},
|
|
26
33
|
"dependencies": {
|
|
27
|
-
"@atlaskit/
|
|
28
|
-
"@atlaskit/
|
|
29
|
-
"@atlaskit/primitives": "^18.0.0",
|
|
30
|
-
"@atlaskit/tokens": "^11.0.0",
|
|
34
|
+
"@atlaskit/primitives": "^18.1.0",
|
|
35
|
+
"@atlaskit/tokens": "^11.4.0",
|
|
31
36
|
"@babel/runtime": "^7.0.0",
|
|
32
|
-
"@compiled/react": "^0.
|
|
37
|
+
"@compiled/react": "^0.20.0"
|
|
33
38
|
},
|
|
34
39
|
"peerDependencies": {
|
|
35
40
|
"react": "^18.2.0"
|
|
@@ -39,9 +44,12 @@
|
|
|
39
44
|
"@af/formatting": "workspace:^",
|
|
40
45
|
"@af/integration-testing": "workspace:^",
|
|
41
46
|
"@af/visual-regression": "workspace:^",
|
|
42
|
-
"@atlaskit/button": "^23.
|
|
47
|
+
"@atlaskit/button": "^23.10.0",
|
|
48
|
+
"@atlaskit/css": "^0.19.0",
|
|
43
49
|
"@atlassian/codegen": "^0.1.0",
|
|
50
|
+
"@atlassian/react-compiler-gating": "workspace:^",
|
|
44
51
|
"@atlassian/ssr-tests": "workspace:^",
|
|
52
|
+
"@atlassian/structured-docs-types": "workspace:^",
|
|
45
53
|
"@testing-library/react": "^16.3.0",
|
|
46
54
|
"react-dom": "^18.2.0",
|
|
47
55
|
"ts-node": "^10.9.1"
|
|
@@ -76,9 +84,5 @@
|
|
|
76
84
|
}
|
|
77
85
|
},
|
|
78
86
|
"homepage": "https://atlassian.design/components/heading/",
|
|
79
|
-
"platform-feature-flags": {
|
|
80
|
-
"platform-dst-heading-specificity": {
|
|
81
|
-
"type": "boolean"
|
|
82
|
-
}
|
|
83
|
-
}
|
|
87
|
+
"platform-feature-flags": {}
|
|
84
88
|
}
|