@atlaskit/primitives 0.1.0 → 0.2.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 +13 -0
- package/dist/cjs/components/box.js +80 -6
- package/dist/cjs/components/inline.partial.js +22 -46
- package/dist/cjs/components/internal/base-box.partial.js +822 -0
- package/dist/cjs/components/stack.partial.js +22 -46
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/box.js +75 -1
- package/dist/es2019/components/inline.partial.js +20 -20
- package/dist/es2019/components/internal/base-box.partial.js +839 -0
- package/dist/es2019/components/stack.partial.js +20 -20
- package/dist/es2019/index.js +2 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/box.js +77 -1
- package/dist/esm/components/inline.partial.js +21 -46
- package/dist/esm/components/internal/base-box.partial.js +817 -0
- package/dist/esm/components/stack.partial.js +21 -46
- package/dist/esm/index.js +2 -2
- package/dist/esm/version.json +1 -1
- package/dist/types/components/box.d.ts +10 -1
- package/dist/types/components/inline.partial.d.ts +18 -16
- package/dist/types/components/internal/base-box.partial.d.ts +483 -0
- package/dist/types/components/stack.partial.d.ts +18 -16
- package/dist/types/components/types.d.ts +8 -1
- package/dist/types/index.d.ts +3 -3
- package/package.json +2 -3
- package/report.api.md +505 -46
- package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +204 -0
- package/scripts/codegen-styles.tsx +31 -16
- package/scripts/color-codegen-template.tsx +10 -7
- package/scripts/dimension-codegen-template.tsx +14 -2
- package/scripts/misc-codegen-template.tsx +1 -1
- package/scripts/spacing-codegen-template.tsx +37 -33
- package/tmp/api-report-tmp.d.ts +466 -46
- package/dist/cjs/components/internal/box.partial.js +0 -605
- package/dist/es2019/components/internal/box.partial.js +0 -597
- package/dist/esm/components/internal/box.partial.js +0 -600
- package/dist/types/components/internal/box.partial.d.ts +0 -348
|
@@ -37,56 +37,56 @@ const flexGrowMap = {
|
|
|
37
37
|
|
|
38
38
|
/**
|
|
39
39
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
40
|
-
* @codegen <<SignedSource::
|
|
40
|
+
* @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
|
|
41
41
|
* @codegenId spacing
|
|
42
42
|
* @codegenCommand yarn codegen-styles
|
|
43
43
|
* @codegenParams ["space"]
|
|
44
44
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
|
|
45
45
|
*/
|
|
46
|
-
const spaceMap = {
|
|
46
|
+
const spaceMap = Object.fromEntries(['gap'].map(property => [property, {
|
|
47
47
|
'0': css({
|
|
48
|
-
|
|
48
|
+
[property]: "var(--ds-space-0, 0px)"
|
|
49
49
|
}),
|
|
50
50
|
'025': css({
|
|
51
|
-
|
|
51
|
+
[property]: "var(--ds-space-025, 2px)"
|
|
52
52
|
}),
|
|
53
53
|
'050': css({
|
|
54
|
-
|
|
54
|
+
[property]: "var(--ds-space-050, 4px)"
|
|
55
55
|
}),
|
|
56
56
|
'075': css({
|
|
57
|
-
|
|
57
|
+
[property]: "var(--ds-space-075, 6px)"
|
|
58
58
|
}),
|
|
59
59
|
'100': css({
|
|
60
|
-
|
|
61
|
-
}),
|
|
62
|
-
'1000': css({
|
|
63
|
-
gap: "var(--ds-space-1000, 80px)"
|
|
60
|
+
[property]: "var(--ds-space-100, 8px)"
|
|
64
61
|
}),
|
|
65
62
|
'150': css({
|
|
66
|
-
|
|
63
|
+
[property]: "var(--ds-space-150, 12px)"
|
|
67
64
|
}),
|
|
68
65
|
'200': css({
|
|
69
|
-
|
|
66
|
+
[property]: "var(--ds-space-200, 16px)"
|
|
70
67
|
}),
|
|
71
68
|
'250': css({
|
|
72
|
-
|
|
69
|
+
[property]: "var(--ds-space-250, 20px)"
|
|
73
70
|
}),
|
|
74
71
|
'300': css({
|
|
75
|
-
|
|
72
|
+
[property]: "var(--ds-space-300, 24px)"
|
|
76
73
|
}),
|
|
77
74
|
'400': css({
|
|
78
|
-
|
|
75
|
+
[property]: "var(--ds-space-400, 32px)"
|
|
79
76
|
}),
|
|
80
77
|
'500': css({
|
|
81
|
-
|
|
78
|
+
[property]: "var(--ds-space-500, 40px)"
|
|
82
79
|
}),
|
|
83
80
|
'600': css({
|
|
84
|
-
|
|
81
|
+
[property]: "var(--ds-space-600, 48px)"
|
|
85
82
|
}),
|
|
86
83
|
'800': css({
|
|
87
|
-
|
|
84
|
+
[property]: "var(--ds-space-800, 64px)"
|
|
85
|
+
}),
|
|
86
|
+
'1000': css({
|
|
87
|
+
[property]: "var(--ds-space-1000, 80px)"
|
|
88
88
|
})
|
|
89
|
-
};
|
|
89
|
+
}]));
|
|
90
90
|
/**
|
|
91
91
|
* @codegenEnd
|
|
92
92
|
*/
|
|
@@ -122,7 +122,7 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
122
122
|
}, ref) => {
|
|
123
123
|
const justifyContent = spread || alignBlock;
|
|
124
124
|
return jsx("div", {
|
|
125
|
-
css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
|
|
125
|
+
css: [baseStyles, space && spaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
|
|
126
126
|
"data-testid": testId,
|
|
127
127
|
ref: ref
|
|
128
128
|
}, children);
|
package/dist/es2019/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { default as Stack } from './components/stack.partial';
|
|
2
1
|
export { Box } from './components/box';
|
|
3
|
-
export { default as Inline } from './components/inline.partial';
|
|
2
|
+
export { default as Inline } from './components/inline.partial';
|
|
3
|
+
export { default as Stack } from './components/stack.partial';
|
package/dist/es2019/version.json
CHANGED
|
@@ -1 +1,77 @@
|
|
|
1
|
-
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "customStyles", "testId"],
|
|
4
|
+
_excluded2 = ["style", "className"];
|
|
5
|
+
import React, { forwardRef } from 'react';
|
|
6
|
+
import { BaseBox } from './internal/base-box.partial';
|
|
7
|
+
var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
8
|
+
var as = _ref.as,
|
|
9
|
+
children = _ref.children,
|
|
10
|
+
color = _ref.color,
|
|
11
|
+
backgroundColor = _ref.backgroundColor,
|
|
12
|
+
shadow = _ref.shadow,
|
|
13
|
+
borderStyle = _ref.borderStyle,
|
|
14
|
+
borderWidth = _ref.borderWidth,
|
|
15
|
+
borderRadius = _ref.borderRadius,
|
|
16
|
+
borderColor = _ref.borderColor,
|
|
17
|
+
layer = _ref.layer,
|
|
18
|
+
flex = _ref.flex,
|
|
19
|
+
flexGrow = _ref.flexGrow,
|
|
20
|
+
flexShrink = _ref.flexShrink,
|
|
21
|
+
alignSelf = _ref.alignSelf,
|
|
22
|
+
overflow = _ref.overflow,
|
|
23
|
+
overflowInline = _ref.overflowInline,
|
|
24
|
+
overflowBlock = _ref.overflowBlock,
|
|
25
|
+
padding = _ref.padding,
|
|
26
|
+
paddingBlock = _ref.paddingBlock,
|
|
27
|
+
paddingBlockStart = _ref.paddingBlockStart,
|
|
28
|
+
paddingBlockEnd = _ref.paddingBlockEnd,
|
|
29
|
+
paddingInline = _ref.paddingInline,
|
|
30
|
+
paddingInlineStart = _ref.paddingInlineStart,
|
|
31
|
+
paddingInlineEnd = _ref.paddingInlineEnd,
|
|
32
|
+
height = _ref.height,
|
|
33
|
+
width = _ref.width,
|
|
34
|
+
_ref$display = _ref.display,
|
|
35
|
+
display = _ref$display === void 0 ? 'block' : _ref$display,
|
|
36
|
+
_ref$position = _ref.position,
|
|
37
|
+
position = _ref$position === void 0 ? 'static' : _ref$position,
|
|
38
|
+
customStyles = _ref.customStyles,
|
|
39
|
+
testId = _ref.testId,
|
|
40
|
+
htmlAttributes = _objectWithoutProperties(_ref, _excluded);
|
|
41
|
+
var style = htmlAttributes.style,
|
|
42
|
+
className = htmlAttributes.className,
|
|
43
|
+
safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
|
|
44
|
+
return /*#__PURE__*/React.createElement(BaseBox, _extends({
|
|
45
|
+
as: as,
|
|
46
|
+
color: color,
|
|
47
|
+
backgroundColor: backgroundColor,
|
|
48
|
+
shadow: shadow,
|
|
49
|
+
borderStyle: borderStyle,
|
|
50
|
+
borderWidth: borderWidth,
|
|
51
|
+
borderRadius: borderRadius,
|
|
52
|
+
borderColor: borderColor,
|
|
53
|
+
layer: layer,
|
|
54
|
+
flex: flex,
|
|
55
|
+
flexGrow: flexGrow,
|
|
56
|
+
flexShrink: flexShrink,
|
|
57
|
+
alignSelf: alignSelf,
|
|
58
|
+
overflow: overflow,
|
|
59
|
+
overflowInline: overflowInline,
|
|
60
|
+
overflowBlock: overflowBlock,
|
|
61
|
+
padding: padding,
|
|
62
|
+
paddingBlock: paddingBlock,
|
|
63
|
+
paddingBlockStart: paddingBlockStart,
|
|
64
|
+
paddingBlockEnd: paddingBlockEnd,
|
|
65
|
+
paddingInline: paddingInline,
|
|
66
|
+
paddingInlineStart: paddingInlineStart,
|
|
67
|
+
paddingInlineEnd: paddingInlineEnd,
|
|
68
|
+
height: height,
|
|
69
|
+
width: width,
|
|
70
|
+
display: display,
|
|
71
|
+
position: position,
|
|
72
|
+
UNSAFE_style: customStyles,
|
|
73
|
+
testId: testId,
|
|
74
|
+
ref: ref
|
|
75
|
+
}, safeHtmlAttributes), children);
|
|
76
|
+
});
|
|
77
|
+
export { Box };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
1
2
|
/** @jsx jsx */
|
|
2
3
|
import { Children, forwardRef, Fragment, memo } from 'react';
|
|
3
4
|
import { css, jsx } from '@emotion/react';
|
|
@@ -43,56 +44,30 @@ var flexWrapStyles = css({
|
|
|
43
44
|
|
|
44
45
|
/**
|
|
45
46
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
46
|
-
* @codegen <<SignedSource::
|
|
47
|
+
* @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
|
|
47
48
|
* @codegenId spacing
|
|
48
49
|
* @codegenCommand yarn codegen-styles
|
|
49
50
|
* @codegenParams ["space"]
|
|
50
51
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
|
|
51
52
|
*/
|
|
52
|
-
var spaceMap = {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
}),
|
|
71
|
-
'150': css({
|
|
72
|
-
gap: "var(--ds-space-150, 12px)"
|
|
73
|
-
}),
|
|
74
|
-
'200': css({
|
|
75
|
-
gap: "var(--ds-space-200, 16px)"
|
|
76
|
-
}),
|
|
77
|
-
'250': css({
|
|
78
|
-
gap: "var(--ds-space-250, 20px)"
|
|
79
|
-
}),
|
|
80
|
-
'300': css({
|
|
81
|
-
gap: "var(--ds-space-300, 24px)"
|
|
82
|
-
}),
|
|
83
|
-
'400': css({
|
|
84
|
-
gap: "var(--ds-space-400, 32px)"
|
|
85
|
-
}),
|
|
86
|
-
'500': css({
|
|
87
|
-
gap: "var(--ds-space-500, 40px)"
|
|
88
|
-
}),
|
|
89
|
-
'600': css({
|
|
90
|
-
gap: "var(--ds-space-600, 48px)"
|
|
91
|
-
}),
|
|
92
|
-
'800': css({
|
|
93
|
-
gap: "var(--ds-space-800, 64px)"
|
|
94
|
-
})
|
|
95
|
-
};
|
|
53
|
+
var spaceMap = Object.fromEntries(['gap'].map(function (property) {
|
|
54
|
+
return [property, {
|
|
55
|
+
'0': css(_defineProperty({}, property, "var(--ds-space-0, 0px)")),
|
|
56
|
+
'025': css(_defineProperty({}, property, "var(--ds-space-025, 2px)")),
|
|
57
|
+
'050': css(_defineProperty({}, property, "var(--ds-space-050, 4px)")),
|
|
58
|
+
'075': css(_defineProperty({}, property, "var(--ds-space-075, 6px)")),
|
|
59
|
+
'100': css(_defineProperty({}, property, "var(--ds-space-100, 8px)")),
|
|
60
|
+
'150': css(_defineProperty({}, property, "var(--ds-space-150, 12px)")),
|
|
61
|
+
'200': css(_defineProperty({}, property, "var(--ds-space-200, 16px)")),
|
|
62
|
+
'250': css(_defineProperty({}, property, "var(--ds-space-250, 20px)")),
|
|
63
|
+
'300': css(_defineProperty({}, property, "var(--ds-space-300, 24px)")),
|
|
64
|
+
'400': css(_defineProperty({}, property, "var(--ds-space-400, 32px)")),
|
|
65
|
+
'500': css(_defineProperty({}, property, "var(--ds-space-500, 40px)")),
|
|
66
|
+
'600': css(_defineProperty({}, property, "var(--ds-space-600, 48px)")),
|
|
67
|
+
'800': css(_defineProperty({}, property, "var(--ds-space-800, 64px)")),
|
|
68
|
+
'1000': css(_defineProperty({}, property, "var(--ds-space-1000, 80px)"))
|
|
69
|
+
}];
|
|
70
|
+
}));
|
|
96
71
|
/**
|
|
97
72
|
* @codegenEnd
|
|
98
73
|
*/
|
|
@@ -150,7 +125,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
|
|
150
125
|
}) : rawChildren;
|
|
151
126
|
var justifyContent = spread || alignInline;
|
|
152
127
|
return jsx("div", {
|
|
153
|
-
css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
|
|
128
|
+
css: [baseStyles, space && spaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
|
|
154
129
|
"data-testid": testId,
|
|
155
130
|
ref: ref
|
|
156
131
|
}, children);
|