@atlaskit/ds-explorations 2.0.1 → 2.0.2
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 +7 -0
- package/dist/cjs/components/box.partial.js +34 -43
- package/dist/cjs/components/inline.partial.js +10 -14
- package/dist/cjs/components/interaction-surface.partial.js +9 -14
- package/dist/cjs/components/stack.partial.js +9 -11
- package/dist/cjs/components/surface-provider.js +1 -5
- package/dist/cjs/components/text.partial.js +23 -36
- package/dist/cjs/index.js +0 -6
- package/dist/cjs/internal/color-map.js +2 -3
- package/dist/cjs/internal/role-to-element.js +0 -1
- package/dist/cjs/internal/spacing-scale.js +0 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/box.partial.js +12 -11
- package/dist/es2019/components/inline.partial.js +3 -4
- package/dist/es2019/components/interaction-surface.partial.js +7 -8
- package/dist/es2019/components/stack.partial.js +3 -2
- package/dist/es2019/components/surface-provider.js +1 -2
- package/dist/es2019/components/text.partial.js +10 -14
- package/dist/es2019/internal/color-map.js +2 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/box.partial.js +37 -37
- package/dist/esm/components/inline.partial.js +10 -11
- package/dist/esm/components/interaction-surface.partial.js +9 -10
- package/dist/esm/components/stack.partial.js +9 -8
- package/dist/esm/components/surface-provider.js +1 -2
- package/dist/esm/components/text.partial.js +24 -30
- package/dist/esm/internal/color-map.js +2 -2
- package/dist/esm/version.json +1 -1
- package/dist/types/components/box.partial.d.ts +2 -2
- package/dist/types/components/text.partial.d.ts +2 -2
- package/dist/types/internal/color-map.d.ts +2 -2
- package/package.json +2 -2
- package/src/components/box.partial.tsx +2 -2
- package/src/components/interaction-surface.partial.tsx +2 -2
- package/src/components/text.partial.tsx +2 -2
- package/src/internal/color-map.tsx +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/ds-explorations
|
|
2
2
|
|
|
3
|
+
## 2.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`cf16d8f8bcc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf16d8f8bcc) - Removes usage of tokens which have been removed from the codebase
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
3
10
|
## 2.0.1
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -1,26 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = exports.Box = void 0;
|
|
9
|
-
|
|
10
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
-
|
|
14
10
|
var _react = require("react");
|
|
15
|
-
|
|
16
11
|
var _react2 = require("@emotion/react");
|
|
17
|
-
|
|
18
12
|
var _constants = require("../constants");
|
|
19
|
-
|
|
20
13
|
var _surfaceProvider = require("./surface-provider");
|
|
21
|
-
|
|
22
14
|
var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "shadow", "layer", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
|
|
23
|
-
|
|
24
15
|
/**
|
|
25
16
|
* __Box__
|
|
26
17
|
*
|
|
@@ -31,36 +22,36 @@ var _excluded = ["children", "as", "className", "display", "flexDirection", "ali
|
|
|
31
22
|
*/
|
|
32
23
|
var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
33
24
|
var children = _ref.children,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
25
|
+
as = _ref.as,
|
|
26
|
+
className = _ref.className,
|
|
27
|
+
_ref$display = _ref.display,
|
|
28
|
+
display = _ref$display === void 0 ? 'flex' : _ref$display,
|
|
29
|
+
flexDirection = _ref.flexDirection,
|
|
30
|
+
alignItems = _ref.alignItems,
|
|
31
|
+
justifyContent = _ref.justifyContent,
|
|
32
|
+
backgroundColor = _ref.backgroundColor,
|
|
33
|
+
borderColor = _ref.borderColor,
|
|
34
|
+
borderStyle = _ref.borderStyle,
|
|
35
|
+
borderWidth = _ref.borderWidth,
|
|
36
|
+
borderRadius = _ref.borderRadius,
|
|
37
|
+
shadow = _ref.shadow,
|
|
38
|
+
layer = _ref.layer,
|
|
39
|
+
padding = _ref.padding,
|
|
40
|
+
paddingBlock = _ref.paddingBlock,
|
|
41
|
+
paddingInline = _ref.paddingInline,
|
|
42
|
+
_ref$position = _ref.position,
|
|
43
|
+
position = _ref$position === void 0 ? 'relative' : _ref$position,
|
|
44
|
+
height = _ref.height,
|
|
45
|
+
overflow = _ref.overflow,
|
|
46
|
+
width = _ref.width,
|
|
47
|
+
UNSAFE_style = _ref.UNSAFE_style,
|
|
48
|
+
testId = _ref.testId,
|
|
49
|
+
htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
59
50
|
var Component = as || 'div';
|
|
60
51
|
var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
|
|
61
52
|
style: UNSAFE_style,
|
|
62
|
-
ref: ref
|
|
63
|
-
|
|
53
|
+
ref: ref
|
|
54
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
64
55
|
}, htmlAttributes, {
|
|
65
56
|
className: className,
|
|
66
57
|
css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
|
|
@@ -73,7 +64,6 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
73
64
|
exports.Box = Box;
|
|
74
65
|
Box.displayName = 'Box';
|
|
75
66
|
var _default = Box; // <<< STYLES GO HERE >>>
|
|
76
|
-
|
|
77
67
|
exports.default = _default;
|
|
78
68
|
var borderStyleMap = {
|
|
79
69
|
none: (0, _react2.css)({
|
|
@@ -114,6 +104,7 @@ var borderRadiusMap = {
|
|
|
114
104
|
borderRadius: '8px'
|
|
115
105
|
})
|
|
116
106
|
};
|
|
107
|
+
|
|
117
108
|
/**
|
|
118
109
|
* @experimental - this is likely to be removed
|
|
119
110
|
*/
|
|
@@ -126,6 +117,7 @@ var flexDirectionMap = {
|
|
|
126
117
|
flexDirection: 'row'
|
|
127
118
|
})
|
|
128
119
|
};
|
|
120
|
+
|
|
129
121
|
/**
|
|
130
122
|
* @experimental - this is likely to be removed
|
|
131
123
|
*/
|
|
@@ -150,6 +142,7 @@ var flexAlignItemsMap = {
|
|
|
150
142
|
alignItems: 'end'
|
|
151
143
|
})
|
|
152
144
|
};
|
|
145
|
+
|
|
153
146
|
/**
|
|
154
147
|
* @experimental - this is likely to be removed
|
|
155
148
|
*/
|
|
@@ -215,6 +208,7 @@ var baseStyles = (0, _react2.css)({
|
|
|
215
208
|
appearance: 'none',
|
|
216
209
|
border: 'none'
|
|
217
210
|
});
|
|
211
|
+
|
|
218
212
|
/**
|
|
219
213
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
220
214
|
* @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
|
|
@@ -222,7 +216,6 @@ var baseStyles = (0, _react2.css)({
|
|
|
222
216
|
* @codegenCommand yarn codegen-styles
|
|
223
217
|
* @codegenParams ["width", "height"]
|
|
224
218
|
*/
|
|
225
|
-
|
|
226
219
|
var widthMap = {
|
|
227
220
|
'100%': (0, _react2.css)({
|
|
228
221
|
width: '100%'
|
|
@@ -275,7 +268,6 @@ var heightMap = {
|
|
|
275
268
|
height: '96px'
|
|
276
269
|
})
|
|
277
270
|
};
|
|
278
|
-
|
|
279
271
|
/**
|
|
280
272
|
* @codegenEnd
|
|
281
273
|
*/
|
|
@@ -420,18 +412,17 @@ var paddingInlineMap = {
|
|
|
420
412
|
paddingInline: "var(--ds-space-800, 64px)"
|
|
421
413
|
})
|
|
422
414
|
};
|
|
423
|
-
|
|
424
415
|
/**
|
|
425
416
|
* @codegenEnd
|
|
426
417
|
*/
|
|
427
418
|
|
|
428
419
|
/**
|
|
429
420
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
430
|
-
* @codegen <<SignedSource::
|
|
421
|
+
* @codegen <<SignedSource::514663609a5a48a284de40c5c4ad200b>>
|
|
431
422
|
* @codegenId colors
|
|
432
423
|
* @codegenCommand yarn codegen-styles
|
|
433
424
|
* @codegenParams ["border", "background", "shadow"]
|
|
434
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
425
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
|
|
435
426
|
*/
|
|
436
427
|
var borderColorMap = {
|
|
437
428
|
'color.border': (0, _react2.css)({
|
|
@@ -571,7 +562,6 @@ var shadowMap = {
|
|
|
571
562
|
boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
|
|
572
563
|
})
|
|
573
564
|
};
|
|
574
|
-
|
|
575
565
|
/**
|
|
576
566
|
* @codegenEnd
|
|
577
567
|
*/
|
|
@@ -612,6 +602,7 @@ var layerMap = {
|
|
|
612
602
|
zIndex: _constants.LAYERS['tooltip']
|
|
613
603
|
})
|
|
614
604
|
};
|
|
605
|
+
|
|
615
606
|
/**
|
|
616
607
|
* @codegenEnd
|
|
617
608
|
*/
|
|
@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _react2 = require("@emotion/react");
|
|
11
|
-
|
|
12
9
|
/** @jsx jsx */
|
|
10
|
+
|
|
13
11
|
var flexAlignItemsMap = {
|
|
14
12
|
center: (0, _react2.css)({
|
|
15
13
|
alignItems: 'center'
|
|
@@ -69,13 +67,13 @@ var dividerStyles = (0, _react2.css)({
|
|
|
69
67
|
pointerEvents: 'none',
|
|
70
68
|
userSelect: 'none'
|
|
71
69
|
});
|
|
72
|
-
|
|
73
70
|
var Divider = function Divider(_ref) {
|
|
74
71
|
var children = _ref.children;
|
|
75
72
|
return (0, _react2.jsx)("span", {
|
|
76
73
|
css: dividerStyles
|
|
77
74
|
}, children);
|
|
78
75
|
};
|
|
76
|
+
|
|
79
77
|
/**
|
|
80
78
|
* __Inline__
|
|
81
79
|
*
|
|
@@ -92,17 +90,15 @@ var Divider = function Divider(_ref) {
|
|
|
92
90
|
* )
|
|
93
91
|
* ```
|
|
94
92
|
*/
|
|
95
|
-
|
|
96
|
-
|
|
97
93
|
var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
|
|
98
94
|
var gap = _ref2.gap,
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
95
|
+
alignItems = _ref2.alignItems,
|
|
96
|
+
justifyContent = _ref2.justifyContent,
|
|
97
|
+
flexWrap = _ref2.flexWrap,
|
|
98
|
+
divider = _ref2.divider,
|
|
99
|
+
UNSAFE_style = _ref2.UNSAFE_style,
|
|
100
|
+
rawChildren = _ref2.children,
|
|
101
|
+
testId = _ref2.testId;
|
|
106
102
|
var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(Divider, null, divider) : divider;
|
|
107
103
|
var children = divider ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
|
|
108
104
|
return (0, _react2.jsx)(_react.Fragment, {
|
|
@@ -126,7 +122,6 @@ var _default = Inline;
|
|
|
126
122
|
* @codegenParams ["columnGap"]
|
|
127
123
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
|
|
128
124
|
*/
|
|
129
|
-
|
|
130
125
|
exports.default = _default;
|
|
131
126
|
var columnGapMap = {
|
|
132
127
|
'space.0': (0, _react2.css)({
|
|
@@ -172,6 +167,7 @@ var columnGapMap = {
|
|
|
172
167
|
columnGap: "var(--ds-space-800, 64px)"
|
|
173
168
|
})
|
|
174
169
|
};
|
|
170
|
+
|
|
175
171
|
/**
|
|
176
172
|
* @codegenEnd
|
|
177
173
|
*/
|
|
@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _react2 = require("@emotion/react");
|
|
11
|
-
|
|
12
9
|
var _surfaceProvider = require("./surface-provider");
|
|
13
|
-
|
|
14
10
|
/** @jsx jsx */
|
|
11
|
+
|
|
15
12
|
var baseStyles = (0, _react2.css)({
|
|
16
13
|
position: 'absolute',
|
|
17
14
|
borderRadius: 'inherit',
|
|
@@ -23,7 +20,6 @@ var baseStyles = (0, _react2.css)({
|
|
|
23
20
|
pointerEvents: 'none'
|
|
24
21
|
}
|
|
25
22
|
});
|
|
26
|
-
|
|
27
23
|
/**
|
|
28
24
|
*
|
|
29
25
|
* @example
|
|
@@ -38,33 +34,31 @@ var baseStyles = (0, _react2.css)({
|
|
|
38
34
|
*/
|
|
39
35
|
var InteractionSurface = function InteractionSurface(_ref) {
|
|
40
36
|
var appearance = _ref.appearance,
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
children = _ref.children,
|
|
38
|
+
testId = _ref.testId;
|
|
43
39
|
var defaultSurface = (0, _react.useContext)(_surfaceProvider.SurfaceContext);
|
|
44
|
-
var surface = appearance || defaultSurface;
|
|
40
|
+
var surface = appearance || defaultSurface;
|
|
41
|
+
|
|
42
|
+
// This case will occur if the Box has not set a bg color and the ancestor surface
|
|
45
43
|
// is an elevation. An alternative would be to throw an error here as it may be better
|
|
46
44
|
// to ensure correct predictable behaviour based on user specification.
|
|
47
|
-
|
|
48
45
|
if (!(surface in backgroundActiveColorMap)) {
|
|
49
46
|
surface = 'neutral';
|
|
50
47
|
}
|
|
51
|
-
|
|
52
48
|
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
|
|
53
49
|
"data-testid": testId,
|
|
54
50
|
css: [baseStyles, surface && backgroundHoverColorMap[surface], surface && backgroundActiveColorMap[surface]]
|
|
55
51
|
}), children);
|
|
56
52
|
};
|
|
57
|
-
|
|
58
53
|
var _default = InteractionSurface;
|
|
59
54
|
/**
|
|
60
55
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
61
|
-
* @codegen <<SignedSource::
|
|
56
|
+
* @codegen <<SignedSource::4f6bde99739600abea2bbe6e62397bc4>>
|
|
62
57
|
* @codegenId interactions
|
|
63
58
|
* @codegenCommand yarn codegen-styles
|
|
64
59
|
* @codegenParams ["background"]
|
|
65
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
60
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
|
|
66
61
|
*/
|
|
67
|
-
|
|
68
62
|
exports.default = _default;
|
|
69
63
|
var backgroundActiveColorMap = {
|
|
70
64
|
input: (0, _react2.css)({
|
|
@@ -280,6 +274,7 @@ var backgroundHoverColorMap = {
|
|
|
280
274
|
}
|
|
281
275
|
})
|
|
282
276
|
};
|
|
277
|
+
|
|
283
278
|
/**
|
|
284
279
|
* @codegenEnd
|
|
285
280
|
*/
|
|
@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _react2 = require("@emotion/react");
|
|
11
|
-
|
|
12
9
|
/** @jsx jsx */
|
|
10
|
+
|
|
13
11
|
var flexAlignItemsMap = {
|
|
14
12
|
center: (0, _react2.css)({
|
|
15
13
|
alignItems: 'center'
|
|
@@ -57,6 +55,7 @@ var baseStyles = (0, _react2.css)({
|
|
|
57
55
|
boxSizing: 'border-box',
|
|
58
56
|
flexDirection: 'column'
|
|
59
57
|
});
|
|
58
|
+
|
|
60
59
|
/**
|
|
61
60
|
* __Stack__
|
|
62
61
|
*
|
|
@@ -64,15 +63,14 @@ var baseStyles = (0, _react2.css)({
|
|
|
64
63
|
* Renders a `div` by default.
|
|
65
64
|
*
|
|
66
65
|
*/
|
|
67
|
-
|
|
68
66
|
var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
69
67
|
var gap = _ref.gap,
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
68
|
+
alignItems = _ref.alignItems,
|
|
69
|
+
justifyContent = _ref.justifyContent,
|
|
70
|
+
flexWrap = _ref.flexWrap,
|
|
71
|
+
children = _ref.children,
|
|
72
|
+
UNSAFE_style = _ref.UNSAFE_style,
|
|
73
|
+
testId = _ref.testId;
|
|
76
74
|
return (0, _react2.jsx)("div", {
|
|
77
75
|
style: UNSAFE_style,
|
|
78
76
|
css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
|
|
@@ -90,7 +88,6 @@ var _default = Stack;
|
|
|
90
88
|
* @codegenParams ["rowGap"]
|
|
91
89
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
|
|
92
90
|
*/
|
|
93
|
-
|
|
94
91
|
exports.default = _default;
|
|
95
92
|
var rowGapMap = {
|
|
96
93
|
'space.0': (0, _react2.css)({
|
|
@@ -136,6 +133,7 @@ var rowGapMap = {
|
|
|
136
133
|
rowGap: "var(--ds-space-800, 64px)"
|
|
137
134
|
})
|
|
138
135
|
};
|
|
136
|
+
|
|
139
137
|
/**
|
|
140
138
|
* @codegenEnd
|
|
141
139
|
*/
|
|
@@ -4,15 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useSurface = exports.SurfaceContext = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
/**
|
|
11
9
|
* __Surface context__
|
|
12
10
|
*
|
|
13
11
|
* A surface context provides context information on the current background (if set).
|
|
14
12
|
*/
|
|
15
13
|
var SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface');
|
|
14
|
+
|
|
16
15
|
/**
|
|
17
16
|
* __useSurface__
|
|
18
17
|
*
|
|
@@ -20,12 +19,9 @@ var SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface')
|
|
|
20
19
|
*
|
|
21
20
|
* @see SurfaceContext
|
|
22
21
|
*/
|
|
23
|
-
|
|
24
22
|
exports.SurfaceContext = SurfaceContext;
|
|
25
|
-
|
|
26
23
|
var useSurface = function useSurface() {
|
|
27
24
|
return (0, _react.useContext)(SurfaceContext);
|
|
28
25
|
};
|
|
29
|
-
|
|
30
26
|
exports.useSurface = useSurface;
|
|
31
27
|
SurfaceContext.displayName = 'SurfaceProvider';
|
|
@@ -1,24 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _react2 = require("@emotion/react");
|
|
15
|
-
|
|
16
11
|
var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
|
|
17
|
-
|
|
18
12
|
var _colorMap = _interopRequireDefault(require("../internal/color-map"));
|
|
19
|
-
|
|
20
13
|
var _surfaceProvider = require("./surface-provider");
|
|
21
|
-
|
|
22
14
|
var _excluded = ["children"];
|
|
23
15
|
var asAllowlist = ['span', 'div', 'p', 'strong'];
|
|
24
16
|
var textAlignMap = {
|
|
@@ -64,27 +56,26 @@ var truncateStyles = (0, _react2.css)({
|
|
|
64
56
|
textOverflow: 'ellipsis',
|
|
65
57
|
whiteSpace: 'nowrap'
|
|
66
58
|
});
|
|
59
|
+
|
|
67
60
|
/**
|
|
68
61
|
* Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
|
|
69
62
|
*/
|
|
70
|
-
|
|
71
63
|
var useColor = function useColor(colorProp) {
|
|
72
64
|
var surface = (0, _surfaceProvider.useSurface)();
|
|
73
65
|
var inverseTextColor = _colorMap.default[surface];
|
|
66
|
+
|
|
74
67
|
/**
|
|
75
68
|
* Where the color of the surface is inverted we override the user choice
|
|
76
69
|
* as there is no valid choice that is not covered by the override.
|
|
77
70
|
*/
|
|
78
|
-
|
|
79
71
|
var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
|
|
80
72
|
return color;
|
|
81
73
|
};
|
|
82
|
-
|
|
83
74
|
var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
|
|
84
|
-
|
|
85
75
|
var useHasTextAncestor = function useHasTextAncestor() {
|
|
86
76
|
return (0, _react.useContext)(HasTextAncestorContext);
|
|
87
77
|
};
|
|
78
|
+
|
|
88
79
|
/**
|
|
89
80
|
* __Text__
|
|
90
81
|
*
|
|
@@ -94,49 +85,46 @@ var useHasTextAncestor = function useHasTextAncestor() {
|
|
|
94
85
|
*
|
|
95
86
|
* @internal
|
|
96
87
|
*/
|
|
97
|
-
|
|
98
|
-
|
|
99
88
|
var Text = function Text(_ref) {
|
|
100
89
|
var children = _ref.children,
|
|
101
|
-
|
|
90
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
102
91
|
var _props$as = props.as,
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
92
|
+
Component = _props$as === void 0 ? 'span' : _props$as,
|
|
93
|
+
colorProp = props.color,
|
|
94
|
+
fontSize = props.fontSize,
|
|
95
|
+
fontWeight = props.fontWeight,
|
|
96
|
+
lineHeight = props.lineHeight,
|
|
97
|
+
_props$shouldTruncate = props.shouldTruncate,
|
|
98
|
+
shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
|
|
99
|
+
textAlign = props.textAlign,
|
|
100
|
+
textTransform = props.textTransform,
|
|
101
|
+
verticalAlign = props.verticalAlign,
|
|
102
|
+
testId = props.testId,
|
|
103
|
+
UNSAFE_style = props.UNSAFE_style,
|
|
104
|
+
id = props.id;
|
|
116
105
|
(0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
|
|
117
106
|
var color = useColor(colorProp);
|
|
118
107
|
var isWrapped = useHasTextAncestor();
|
|
108
|
+
|
|
119
109
|
/**
|
|
120
110
|
* If the text is already wrapped and applies no props we can just
|
|
121
111
|
* render the children directly as a fragment.
|
|
122
112
|
*/
|
|
123
|
-
|
|
124
113
|
if (isWrapped && Object.keys(props).length === 0) {
|
|
125
114
|
return (0, _react2.jsx)(_react.Fragment, null, children);
|
|
126
115
|
}
|
|
127
|
-
|
|
128
116
|
var component = (0, _react2.jsx)(Component, {
|
|
129
117
|
style: UNSAFE_style,
|
|
130
118
|
css: [baseStyles, fontFamilyMap.sans, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],
|
|
131
119
|
"data-testid": testId,
|
|
132
120
|
id: id
|
|
133
121
|
}, children);
|
|
134
|
-
return isWrapped ?
|
|
122
|
+
return isWrapped ?
|
|
123
|
+
// no need to re-apply context if the text is already wrapped
|
|
135
124
|
component : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
|
|
136
125
|
value: true
|
|
137
126
|
}, component);
|
|
138
127
|
};
|
|
139
|
-
|
|
140
128
|
var _default = Text;
|
|
141
129
|
/**
|
|
142
130
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
@@ -146,7 +134,6 @@ var _default = Text;
|
|
|
146
134
|
* @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
|
|
147
135
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
|
|
148
136
|
*/
|
|
149
|
-
|
|
150
137
|
exports.default = _default;
|
|
151
138
|
var fontSizeMap = {
|
|
152
139
|
'size.050': (0, _react2.css)({
|
|
@@ -216,18 +203,17 @@ var lineHeightMap = {
|
|
|
216
203
|
lineHeight: "var(--ds-font-lineHeight-600, 40px)"
|
|
217
204
|
})
|
|
218
205
|
};
|
|
219
|
-
|
|
220
206
|
/**
|
|
221
207
|
* @codegenEnd
|
|
222
208
|
*/
|
|
223
209
|
|
|
224
210
|
/**
|
|
225
211
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
226
|
-
* @codegen <<SignedSource::
|
|
212
|
+
* @codegen <<SignedSource::3780858df77f5fe0c6e0f39a4c989741>>
|
|
227
213
|
* @codegenId colors
|
|
228
214
|
* @codegenCommand yarn codegen-styles
|
|
229
215
|
* @codegenParams ["text"]
|
|
230
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
216
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
|
|
231
217
|
*/
|
|
232
218
|
var textColorMap = {
|
|
233
219
|
'color.text': (0, _react2.css)({
|
|
@@ -270,6 +256,7 @@ var textColorMap = {
|
|
|
270
256
|
color: "var(--ds-text-subtle, #42526E)"
|
|
271
257
|
})
|
|
272
258
|
};
|
|
259
|
+
|
|
273
260
|
/**
|
|
274
261
|
* @codegenEnd
|
|
275
262
|
*/
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -35,13 +34,8 @@ Object.defineProperty(exports, "UNSAFE_Text", {
|
|
|
35
34
|
return _text.default;
|
|
36
35
|
}
|
|
37
36
|
});
|
|
38
|
-
|
|
39
37
|
var _box = _interopRequireDefault(require("./components/box.partial"));
|
|
40
|
-
|
|
41
38
|
var _text = _interopRequireDefault(require("./components/text.partial"));
|
|
42
|
-
|
|
43
39
|
var _inline = _interopRequireDefault(require("./components/inline.partial"));
|
|
44
|
-
|
|
45
40
|
var _stack = _interopRequireDefault(require("./components/stack.partial"));
|
|
46
|
-
|
|
47
41
|
var _interactionSurface = _interopRequireDefault(require("./components/interaction-surface.partial"));
|
|
@@ -4,15 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/**
|
|
9
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
10
9
|
*
|
|
11
10
|
* The color map is used to map a background color token to a matching text color that will meet contrast.
|
|
12
11
|
*
|
|
13
|
-
* @codegen <<SignedSource::
|
|
12
|
+
* @codegen <<SignedSource::d168519874a16bbb92cfbfd4747a39b4>>
|
|
14
13
|
* @codegenCommand yarn codegen-styles
|
|
15
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
14
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
|
|
16
15
|
*/
|
|
17
16
|
var _default = {
|
|
18
17
|
'neutral.bold': 'inverse',
|
package/dist/cjs/version.json
CHANGED