@atlaskit/ds-explorations 1.6.0 → 1.6.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 +12 -0
- package/dist/cjs/components/box.partial.js +81 -4
- package/dist/cjs/components/inline.partial.js +3 -0
- package/dist/cjs/components/text.partial.js +1 -1
- package/dist/cjs/constants.js +18 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/box.partial.js +79 -3
- package/dist/es2019/components/inline.partial.js +3 -0
- package/dist/es2019/components/text.partial.js +1 -1
- package/dist/es2019/constants.js +11 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/box.partial.js +80 -4
- package/dist/esm/components/inline.partial.js +3 -0
- package/dist/esm/components/text.partial.js +1 -1
- package/dist/esm/constants.js +11 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/components/box.partial.d.ts +64 -43
- package/dist/types/components/inline.partial.d.ts +1 -0
- package/dist/types/components/text.partial.d.ts +14 -14
- package/dist/types/constants.d.ts +12 -0
- package/examples/01-box.tsx +54 -0
- package/package.json +2 -2
- package/report.api.md +89 -56
- package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +3 -3
- package/scripts/codegen-styles.tsx +19 -0
- package/scripts/color-codegen-template.tsx +25 -14
- package/scripts/misc-codegen-template.tsx +43 -0
- package/scripts/utils.tsx +23 -1
- package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-layer-should-match-snapshot-1-snap.png +3 -0
- package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-shadow-should-match-snapshot-1-snap.png +3 -0
- package/src/components/__tests__/visual-regression/box-snapshot-test.tsx +2 -0
- package/src/components/box.partial.tsx +76 -7
- package/src/components/inline.partial.tsx +1 -0
- package/src/components/text.partial.tsx +2 -2
- package/src/constants.tsx +13 -0
- package/tmp/api-report-tmp.d.ts +89 -56
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/ds-explorations
|
|
2
2
|
|
|
3
|
+
## 1.6.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 1.6.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`f7b2dbd6eba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7b2dbd6eba) - Add fontWeight 600 to Text. Add justifyContent spaceBetween to Inline. Add overflow hidden, position fixed, and start/end flex values to Box. Add shadow and layer props to Box.
|
|
14
|
+
|
|
3
15
|
## 1.6.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -15,9 +15,11 @@ var _react = require("react");
|
|
|
15
15
|
|
|
16
16
|
var _react2 = require("@emotion/react");
|
|
17
17
|
|
|
18
|
+
var _constants = require("../constants");
|
|
19
|
+
|
|
18
20
|
var _surfaceProvider = require("./surface-provider");
|
|
19
21
|
|
|
20
|
-
var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
|
|
22
|
+
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"];
|
|
21
23
|
|
|
22
24
|
/**
|
|
23
25
|
* __Box__
|
|
@@ -41,6 +43,8 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
41
43
|
borderStyle = _ref.borderStyle,
|
|
42
44
|
borderWidth = _ref.borderWidth,
|
|
43
45
|
borderRadius = _ref.borderRadius,
|
|
46
|
+
shadow = _ref.shadow,
|
|
47
|
+
layer = _ref.layer,
|
|
44
48
|
padding = _ref.padding,
|
|
45
49
|
paddingBlock = _ref.paddingBlock,
|
|
46
50
|
paddingInline = _ref.paddingInline,
|
|
@@ -59,7 +63,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
59
63
|
|
|
60
64
|
}, htmlAttributes, {
|
|
61
65
|
className: className,
|
|
62
|
-
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], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
|
|
66
|
+
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]],
|
|
63
67
|
"data-testid": testId
|
|
64
68
|
}), children);
|
|
65
69
|
return backgroundColor ? (0, _react2.jsx)(_surfaceProvider.SurfaceContext.Provider, {
|
|
@@ -138,6 +142,12 @@ var flexAlignItemsMap = {
|
|
|
138
142
|
}),
|
|
139
143
|
flexEnd: (0, _react2.css)({
|
|
140
144
|
alignItems: 'flex-end'
|
|
145
|
+
}),
|
|
146
|
+
start: (0, _react2.css)({
|
|
147
|
+
alignItems: 'start'
|
|
148
|
+
}),
|
|
149
|
+
end: (0, _react2.css)({
|
|
150
|
+
alignItems: 'end'
|
|
141
151
|
})
|
|
142
152
|
};
|
|
143
153
|
/**
|
|
@@ -153,6 +163,12 @@ var flexJustifyContentMap = {
|
|
|
153
163
|
}),
|
|
154
164
|
flexEnd: (0, _react2.css)({
|
|
155
165
|
justifyContent: 'flex-end'
|
|
166
|
+
}),
|
|
167
|
+
start: (0, _react2.css)({
|
|
168
|
+
alignItems: 'start'
|
|
169
|
+
}),
|
|
170
|
+
end: (0, _react2.css)({
|
|
171
|
+
alignItems: 'end'
|
|
156
172
|
})
|
|
157
173
|
};
|
|
158
174
|
var displayMap = {
|
|
@@ -173,6 +189,9 @@ var positionMap = {
|
|
|
173
189
|
absolute: (0, _react2.css)({
|
|
174
190
|
position: 'absolute'
|
|
175
191
|
}),
|
|
192
|
+
fixed: (0, _react2.css)({
|
|
193
|
+
position: 'fixed'
|
|
194
|
+
}),
|
|
176
195
|
relative: (0, _react2.css)({
|
|
177
196
|
position: 'relative'
|
|
178
197
|
}),
|
|
@@ -405,10 +424,10 @@ var paddingInlineMap = {
|
|
|
405
424
|
|
|
406
425
|
/**
|
|
407
426
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
408
|
-
* @codegen <<SignedSource::
|
|
427
|
+
* @codegen <<SignedSource::f8adab4246a66543cd1350e53abf9293>>
|
|
409
428
|
* @codegenId colors
|
|
410
429
|
* @codegenCommand yarn codegen-styles
|
|
411
|
-
* @codegenParams ["border", "background"]
|
|
430
|
+
* @codegenParams ["border", "background", "shadow"]
|
|
412
431
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
|
|
413
432
|
*/
|
|
414
433
|
var borderColorMap = {
|
|
@@ -532,6 +551,64 @@ var backgroundColorMap = {
|
|
|
532
551
|
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
|
|
533
552
|
})
|
|
534
553
|
};
|
|
554
|
+
var shadowMap = {
|
|
555
|
+
raised: (0, _react2.css)({
|
|
556
|
+
boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
|
|
557
|
+
}),
|
|
558
|
+
overflow: (0, _react2.css)({
|
|
559
|
+
boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
|
|
560
|
+
}),
|
|
561
|
+
'overflow.spread': (0, _react2.css)({
|
|
562
|
+
boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
|
|
563
|
+
}),
|
|
564
|
+
'overflow.perimeter': (0, _react2.css)({
|
|
565
|
+
boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
|
|
566
|
+
}),
|
|
567
|
+
overlay: (0, _react2.css)({
|
|
568
|
+
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
|
|
569
|
+
})
|
|
570
|
+
};
|
|
571
|
+
|
|
572
|
+
/**
|
|
573
|
+
* @codegenEnd
|
|
574
|
+
*/
|
|
575
|
+
|
|
576
|
+
/**
|
|
577
|
+
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
578
|
+
* @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
|
|
579
|
+
* @codegenId misc
|
|
580
|
+
* @codegenCommand yarn codegen-styles
|
|
581
|
+
* @codegenParams ["layer"]
|
|
582
|
+
*/
|
|
583
|
+
var layerMap = {
|
|
584
|
+
card: (0, _react2.css)({
|
|
585
|
+
zIndex: _constants.LAYERS['card']
|
|
586
|
+
}),
|
|
587
|
+
navigation: (0, _react2.css)({
|
|
588
|
+
zIndex: _constants.LAYERS['navigation']
|
|
589
|
+
}),
|
|
590
|
+
dialog: (0, _react2.css)({
|
|
591
|
+
zIndex: _constants.LAYERS['dialog']
|
|
592
|
+
}),
|
|
593
|
+
layer: (0, _react2.css)({
|
|
594
|
+
zIndex: _constants.LAYERS['layer']
|
|
595
|
+
}),
|
|
596
|
+
blanket: (0, _react2.css)({
|
|
597
|
+
zIndex: _constants.LAYERS['blanket']
|
|
598
|
+
}),
|
|
599
|
+
modal: (0, _react2.css)({
|
|
600
|
+
zIndex: _constants.LAYERS['modal']
|
|
601
|
+
}),
|
|
602
|
+
flag: (0, _react2.css)({
|
|
603
|
+
zIndex: _constants.LAYERS['flag']
|
|
604
|
+
}),
|
|
605
|
+
spotlight: (0, _react2.css)({
|
|
606
|
+
zIndex: _constants.LAYERS['spotlight']
|
|
607
|
+
}),
|
|
608
|
+
tooltip: (0, _react2.css)({
|
|
609
|
+
zIndex: _constants.LAYERS['tooltip']
|
|
610
|
+
})
|
|
611
|
+
};
|
|
535
612
|
/**
|
|
536
613
|
* @codegenEnd
|
|
537
614
|
*/
|
|
@@ -191,7 +191,7 @@ var Text = function Text(_ref) {
|
|
|
191
191
|
var _default = Text;
|
|
192
192
|
/**
|
|
193
193
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
194
|
-
* @codegen <<SignedSource::
|
|
194
|
+
* @codegen <<SignedSource::920426feace841166c6f4ffdc49ae26d>>
|
|
195
195
|
* @codegenId colors
|
|
196
196
|
* @codegenCommand yarn codegen-styles
|
|
197
197
|
* @codegenParams ["text"]
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.LAYERS = void 0;
|
|
7
|
+
var LAYERS = {
|
|
8
|
+
card: 100,
|
|
9
|
+
navigation: 200,
|
|
10
|
+
dialog: 300,
|
|
11
|
+
layer: 400,
|
|
12
|
+
blanket: 500,
|
|
13
|
+
modal: 510,
|
|
14
|
+
flag: 600,
|
|
15
|
+
spotlight: 700,
|
|
16
|
+
tooltip: 800
|
|
17
|
+
};
|
|
18
|
+
exports.LAYERS = LAYERS;
|
package/dist/cjs/version.json
CHANGED
|
@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
/** @jsx jsx */
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
5
|
import { css, jsx } from '@emotion/react';
|
|
6
|
+
import { LAYERS } from '../constants';
|
|
6
7
|
import { SurfaceContext } from './surface-provider';
|
|
7
8
|
|
|
8
9
|
/**
|
|
@@ -26,6 +27,8 @@ export const Box = /*#__PURE__*/forwardRef(({
|
|
|
26
27
|
borderStyle,
|
|
27
28
|
borderWidth,
|
|
28
29
|
borderRadius,
|
|
30
|
+
shadow,
|
|
31
|
+
layer,
|
|
29
32
|
padding,
|
|
30
33
|
paddingBlock,
|
|
31
34
|
paddingInline,
|
|
@@ -44,7 +47,7 @@ export const Box = /*#__PURE__*/forwardRef(({
|
|
|
44
47
|
|
|
45
48
|
}, htmlAttributes, {
|
|
46
49
|
className: className,
|
|
47
|
-
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], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
|
|
50
|
+
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]],
|
|
48
51
|
"data-testid": testId
|
|
49
52
|
}), children);
|
|
50
53
|
return backgroundColor ? jsx(SurfaceContext.Provider, {
|
|
@@ -121,6 +124,12 @@ const flexAlignItemsMap = {
|
|
|
121
124
|
}),
|
|
122
125
|
flexEnd: css({
|
|
123
126
|
alignItems: 'flex-end'
|
|
127
|
+
}),
|
|
128
|
+
start: css({
|
|
129
|
+
alignItems: 'start'
|
|
130
|
+
}),
|
|
131
|
+
end: css({
|
|
132
|
+
alignItems: 'end'
|
|
124
133
|
})
|
|
125
134
|
};
|
|
126
135
|
/**
|
|
@@ -136,6 +145,12 @@ const flexJustifyContentMap = {
|
|
|
136
145
|
}),
|
|
137
146
|
flexEnd: css({
|
|
138
147
|
justifyContent: 'flex-end'
|
|
148
|
+
}),
|
|
149
|
+
start: css({
|
|
150
|
+
alignItems: 'start'
|
|
151
|
+
}),
|
|
152
|
+
end: css({
|
|
153
|
+
alignItems: 'end'
|
|
139
154
|
})
|
|
140
155
|
};
|
|
141
156
|
const displayMap = {
|
|
@@ -156,6 +171,9 @@ const positionMap = {
|
|
|
156
171
|
absolute: css({
|
|
157
172
|
position: 'absolute'
|
|
158
173
|
}),
|
|
174
|
+
fixed: css({
|
|
175
|
+
position: 'fixed'
|
|
176
|
+
}),
|
|
159
177
|
relative: css({
|
|
160
178
|
position: 'relative'
|
|
161
179
|
}),
|
|
@@ -388,10 +406,10 @@ const paddingInlineMap = {
|
|
|
388
406
|
|
|
389
407
|
/**
|
|
390
408
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
391
|
-
* @codegen <<SignedSource::
|
|
409
|
+
* @codegen <<SignedSource::f8adab4246a66543cd1350e53abf9293>>
|
|
392
410
|
* @codegenId colors
|
|
393
411
|
* @codegenCommand yarn codegen-styles
|
|
394
|
-
* @codegenParams ["border", "background"]
|
|
412
|
+
* @codegenParams ["border", "background", "shadow"]
|
|
395
413
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
|
|
396
414
|
*/
|
|
397
415
|
const borderColorMap = {
|
|
@@ -515,6 +533,64 @@ const backgroundColorMap = {
|
|
|
515
533
|
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
|
|
516
534
|
})
|
|
517
535
|
};
|
|
536
|
+
const shadowMap = {
|
|
537
|
+
raised: css({
|
|
538
|
+
boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
|
|
539
|
+
}),
|
|
540
|
+
overflow: css({
|
|
541
|
+
boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
|
|
542
|
+
}),
|
|
543
|
+
'overflow.spread': css({
|
|
544
|
+
boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
|
|
545
|
+
}),
|
|
546
|
+
'overflow.perimeter': css({
|
|
547
|
+
boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
|
|
548
|
+
}),
|
|
549
|
+
overlay: css({
|
|
550
|
+
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
|
|
551
|
+
})
|
|
552
|
+
};
|
|
553
|
+
|
|
554
|
+
/**
|
|
555
|
+
* @codegenEnd
|
|
556
|
+
*/
|
|
557
|
+
|
|
558
|
+
/**
|
|
559
|
+
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
560
|
+
* @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
|
|
561
|
+
* @codegenId misc
|
|
562
|
+
* @codegenCommand yarn codegen-styles
|
|
563
|
+
* @codegenParams ["layer"]
|
|
564
|
+
*/
|
|
565
|
+
const layerMap = {
|
|
566
|
+
card: css({
|
|
567
|
+
zIndex: LAYERS['card']
|
|
568
|
+
}),
|
|
569
|
+
navigation: css({
|
|
570
|
+
zIndex: LAYERS['navigation']
|
|
571
|
+
}),
|
|
572
|
+
dialog: css({
|
|
573
|
+
zIndex: LAYERS['dialog']
|
|
574
|
+
}),
|
|
575
|
+
layer: css({
|
|
576
|
+
zIndex: LAYERS['layer']
|
|
577
|
+
}),
|
|
578
|
+
blanket: css({
|
|
579
|
+
zIndex: LAYERS['blanket']
|
|
580
|
+
}),
|
|
581
|
+
modal: css({
|
|
582
|
+
zIndex: LAYERS['modal']
|
|
583
|
+
}),
|
|
584
|
+
flag: css({
|
|
585
|
+
zIndex: LAYERS['flag']
|
|
586
|
+
}),
|
|
587
|
+
spotlight: css({
|
|
588
|
+
zIndex: LAYERS['spotlight']
|
|
589
|
+
}),
|
|
590
|
+
tooltip: css({
|
|
591
|
+
zIndex: LAYERS['tooltip']
|
|
592
|
+
})
|
|
593
|
+
};
|
|
518
594
|
/**
|
|
519
595
|
* @codegenEnd
|
|
520
596
|
*/
|
|
@@ -174,7 +174,7 @@ const Text = ({
|
|
|
174
174
|
export default Text;
|
|
175
175
|
/**
|
|
176
176
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
177
|
-
* @codegen <<SignedSource::
|
|
177
|
+
* @codegen <<SignedSource::920426feace841166c6f4ffdc49ae26d>>
|
|
178
178
|
* @codegenId colors
|
|
179
179
|
* @codegenCommand yarn codegen-styles
|
|
180
180
|
* @codegenParams ["text"]
|
package/dist/es2019/version.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
|
|
3
|
+
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"];
|
|
4
4
|
|
|
5
5
|
/** @jsx jsx */
|
|
6
6
|
import { forwardRef } from 'react';
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
|
+
import { LAYERS } from '../constants';
|
|
8
9
|
import { SurfaceContext } from './surface-provider';
|
|
9
10
|
|
|
10
11
|
/**
|
|
@@ -29,6 +30,8 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
29
30
|
borderStyle = _ref.borderStyle,
|
|
30
31
|
borderWidth = _ref.borderWidth,
|
|
31
32
|
borderRadius = _ref.borderRadius,
|
|
33
|
+
shadow = _ref.shadow,
|
|
34
|
+
layer = _ref.layer,
|
|
32
35
|
padding = _ref.padding,
|
|
33
36
|
paddingBlock = _ref.paddingBlock,
|
|
34
37
|
paddingInline = _ref.paddingInline,
|
|
@@ -48,7 +51,7 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
48
51
|
|
|
49
52
|
}, htmlAttributes, {
|
|
50
53
|
className: className,
|
|
51
|
-
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], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
|
|
54
|
+
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]],
|
|
52
55
|
"data-testid": testId
|
|
53
56
|
}), children);
|
|
54
57
|
return backgroundColor ? jsx(SurfaceContext.Provider, {
|
|
@@ -125,6 +128,12 @@ var flexAlignItemsMap = {
|
|
|
125
128
|
}),
|
|
126
129
|
flexEnd: css({
|
|
127
130
|
alignItems: 'flex-end'
|
|
131
|
+
}),
|
|
132
|
+
start: css({
|
|
133
|
+
alignItems: 'start'
|
|
134
|
+
}),
|
|
135
|
+
end: css({
|
|
136
|
+
alignItems: 'end'
|
|
128
137
|
})
|
|
129
138
|
};
|
|
130
139
|
/**
|
|
@@ -140,6 +149,12 @@ var flexJustifyContentMap = {
|
|
|
140
149
|
}),
|
|
141
150
|
flexEnd: css({
|
|
142
151
|
justifyContent: 'flex-end'
|
|
152
|
+
}),
|
|
153
|
+
start: css({
|
|
154
|
+
alignItems: 'start'
|
|
155
|
+
}),
|
|
156
|
+
end: css({
|
|
157
|
+
alignItems: 'end'
|
|
143
158
|
})
|
|
144
159
|
};
|
|
145
160
|
var displayMap = {
|
|
@@ -160,6 +175,9 @@ var positionMap = {
|
|
|
160
175
|
absolute: css({
|
|
161
176
|
position: 'absolute'
|
|
162
177
|
}),
|
|
178
|
+
fixed: css({
|
|
179
|
+
position: 'fixed'
|
|
180
|
+
}),
|
|
163
181
|
relative: css({
|
|
164
182
|
position: 'relative'
|
|
165
183
|
}),
|
|
@@ -392,10 +410,10 @@ var paddingInlineMap = {
|
|
|
392
410
|
|
|
393
411
|
/**
|
|
394
412
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
395
|
-
* @codegen <<SignedSource::
|
|
413
|
+
* @codegen <<SignedSource::f8adab4246a66543cd1350e53abf9293>>
|
|
396
414
|
* @codegenId colors
|
|
397
415
|
* @codegenCommand yarn codegen-styles
|
|
398
|
-
* @codegenParams ["border", "background"]
|
|
416
|
+
* @codegenParams ["border", "background", "shadow"]
|
|
399
417
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
|
|
400
418
|
*/
|
|
401
419
|
var borderColorMap = {
|
|
@@ -519,6 +537,64 @@ var backgroundColorMap = {
|
|
|
519
537
|
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
|
|
520
538
|
})
|
|
521
539
|
};
|
|
540
|
+
var shadowMap = {
|
|
541
|
+
raised: css({
|
|
542
|
+
boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
|
|
543
|
+
}),
|
|
544
|
+
overflow: css({
|
|
545
|
+
boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
|
|
546
|
+
}),
|
|
547
|
+
'overflow.spread': css({
|
|
548
|
+
boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
|
|
549
|
+
}),
|
|
550
|
+
'overflow.perimeter': css({
|
|
551
|
+
boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
|
|
552
|
+
}),
|
|
553
|
+
overlay: css({
|
|
554
|
+
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
|
|
555
|
+
})
|
|
556
|
+
};
|
|
557
|
+
|
|
558
|
+
/**
|
|
559
|
+
* @codegenEnd
|
|
560
|
+
*/
|
|
561
|
+
|
|
562
|
+
/**
|
|
563
|
+
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
564
|
+
* @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
|
|
565
|
+
* @codegenId misc
|
|
566
|
+
* @codegenCommand yarn codegen-styles
|
|
567
|
+
* @codegenParams ["layer"]
|
|
568
|
+
*/
|
|
569
|
+
var layerMap = {
|
|
570
|
+
card: css({
|
|
571
|
+
zIndex: LAYERS['card']
|
|
572
|
+
}),
|
|
573
|
+
navigation: css({
|
|
574
|
+
zIndex: LAYERS['navigation']
|
|
575
|
+
}),
|
|
576
|
+
dialog: css({
|
|
577
|
+
zIndex: LAYERS['dialog']
|
|
578
|
+
}),
|
|
579
|
+
layer: css({
|
|
580
|
+
zIndex: LAYERS['layer']
|
|
581
|
+
}),
|
|
582
|
+
blanket: css({
|
|
583
|
+
zIndex: LAYERS['blanket']
|
|
584
|
+
}),
|
|
585
|
+
modal: css({
|
|
586
|
+
zIndex: LAYERS['modal']
|
|
587
|
+
}),
|
|
588
|
+
flag: css({
|
|
589
|
+
zIndex: LAYERS['flag']
|
|
590
|
+
}),
|
|
591
|
+
spotlight: css({
|
|
592
|
+
zIndex: LAYERS['spotlight']
|
|
593
|
+
}),
|
|
594
|
+
tooltip: css({
|
|
595
|
+
zIndex: LAYERS['tooltip']
|
|
596
|
+
})
|
|
597
|
+
};
|
|
522
598
|
/**
|
|
523
599
|
* @codegenEnd
|
|
524
600
|
*/
|
|
@@ -179,7 +179,7 @@ var Text = function Text(_ref) {
|
|
|
179
179
|
export default Text;
|
|
180
180
|
/**
|
|
181
181
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
182
|
-
* @codegen <<SignedSource::
|
|
182
|
+
* @codegen <<SignedSource::920426feace841166c6f4ffdc49ae26d>>
|
|
183
183
|
* @codegenId colors
|
|
184
184
|
* @codegenCommand yarn codegen-styles
|
|
185
185
|
* @codegenParams ["text"]
|
package/dist/esm/version.json
CHANGED