@atlaskit/primitives 1.15.0 → 1.15.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 +13 -0
- package/dist/cjs/components/bleed.js +3 -2
- package/dist/cjs/xcss/style-maps.partial.js +8 -5
- package/dist/cjs/xcss/xcss.js +37 -37
- package/dist/es2019/components/bleed.js +2 -2
- package/dist/es2019/xcss/style-maps.partial.js +8 -4
- package/dist/es2019/xcss/xcss.js +38 -38
- package/dist/esm/components/bleed.js +2 -2
- package/dist/esm/xcss/style-maps.partial.js +7 -4
- package/dist/esm/xcss/xcss.js +38 -38
- package/dist/types/components/bleed.d.ts +2 -2
- package/dist/types/xcss/style-maps.partial.d.ts +42 -16
- package/dist/types-ts4.5/components/bleed.d.ts +2 -2
- package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +42 -16
- package/package.json +1 -1
- package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +6 -2
- package/scripts/spacing-codegen-template.tsx +5 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/primitives
|
|
2
2
|
|
|
3
|
+
## 1.15.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#61090](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61090) [`2e34d3535125`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2e34d3535125) - - Fixed issue where using negative space tokens in `xcss` wouldn't apply.
|
|
8
|
+
- Allow negative space tokens for position properties in `xcss` (i.e. top, bottom, left, right, and inset-\*).
|
|
9
|
+
|
|
10
|
+
## 1.15.1
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [#57241](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57241) [`cae2e80ae968`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cae2e80ae968) - Migrate webdriver tests for @atlassian/product-search-dialog
|
|
15
|
+
|
|
3
16
|
## 1.15.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.default = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
9
|
var _react2 = require("@emotion/react");
|
|
9
10
|
var _xcss = require("../xcss/xcss");
|
|
10
11
|
/**
|
|
@@ -58,7 +59,7 @@ var inlineBleedMap = {
|
|
|
58
59
|
* - [Examples](https://atlassian.design/components/primitives/bleed/examples)
|
|
59
60
|
* - [Code](https://atlassian.design/components/primitives/bleed/code)
|
|
60
61
|
*/
|
|
61
|
-
var Bleed = /*#__PURE__*/
|
|
62
|
+
var Bleed = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
62
63
|
var children = _ref.children,
|
|
63
64
|
testId = _ref.testId,
|
|
64
65
|
inline = _ref.inline,
|
|
@@ -4,10 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.uiTextStylesMap = exports.uiTextMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.
|
|
7
|
+
exports.uiTextStylesMap = exports.uiTextMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.shadowMap = exports.positiveSpaceMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.lineHeightStylesMap = exports.lineHeightMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontSizeStylesMap = exports.fontSizeMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.bodyTextStylesMap = exports.bodyTextMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.allSpaceMap = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _tokens = require("@atlaskit/tokens");
|
|
11
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
12
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
11
13
|
/**
|
|
12
14
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
13
15
|
* @codegen <<SignedSource::7af6097e56f7fb03635b6f8aaf121b02>>
|
|
@@ -32,12 +34,12 @@ var dimensionMap = exports.dimensionMap = {
|
|
|
32
34
|
|
|
33
35
|
/**
|
|
34
36
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
35
|
-
* @codegen <<SignedSource::
|
|
37
|
+
* @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
|
|
36
38
|
* @codegenId spacing
|
|
37
39
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
38
40
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
|
|
39
41
|
*/
|
|
40
|
-
var
|
|
42
|
+
var positiveSpaceMap = exports.positiveSpaceMap = {
|
|
41
43
|
'space.0': "var(--ds-space-0, 0px)",
|
|
42
44
|
'space.025': "var(--ds-space-025, 2px)",
|
|
43
45
|
'space.050': "var(--ds-space-050, 4px)",
|
|
@@ -64,6 +66,7 @@ var negativeSpaceMap = exports.negativeSpaceMap = {
|
|
|
64
66
|
'space.negative.300': "var(--ds-space-negative-300, -24px)",
|
|
65
67
|
'space.negative.400': "var(--ds-space-negative-400, -32px)"
|
|
66
68
|
};
|
|
69
|
+
var allSpaceMap = exports.allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), negativeSpaceMap);
|
|
67
70
|
/**
|
|
68
71
|
* @codegenEnd
|
|
69
72
|
*/
|
|
@@ -560,11 +563,11 @@ var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenM
|
|
|
560
563
|
}, {});
|
|
561
564
|
};
|
|
562
565
|
var paddingStylesMap = exports.paddingStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
|
|
563
|
-
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty,
|
|
566
|
+
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
|
|
564
567
|
return styleMap;
|
|
565
568
|
}, {});
|
|
566
569
|
var spaceStylesMap = exports.spaceStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
|
|
567
|
-
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty,
|
|
570
|
+
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
|
|
568
571
|
return styleMap;
|
|
569
572
|
}, {});
|
|
570
573
|
var backgroundColorStylesMap = exports.backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
|
package/dist/cjs/xcss/xcss.js
CHANGED
|
@@ -49,32 +49,32 @@ var tokensMap = {
|
|
|
49
49
|
borderTopRightRadius: _styleMaps.borderRadiusMap,
|
|
50
50
|
borderTopWidth: _styleMaps.borderWidthMap,
|
|
51
51
|
borderWidth: _styleMaps.borderWidthMap,
|
|
52
|
-
bottom: _styleMaps.
|
|
52
|
+
bottom: _styleMaps.allSpaceMap,
|
|
53
53
|
boxShadow: _styleMaps.shadowMap,
|
|
54
54
|
color: _styleMaps.textColorMap,
|
|
55
|
-
columnGap: _styleMaps.
|
|
56
|
-
gap: _styleMaps.
|
|
55
|
+
columnGap: _styleMaps.positiveSpaceMap,
|
|
56
|
+
gap: _styleMaps.positiveSpaceMap,
|
|
57
57
|
height: _styleMaps.dimensionMap,
|
|
58
58
|
inlineSize: _styleMaps.dimensionMap,
|
|
59
|
-
inset: _styleMaps.
|
|
60
|
-
insetBlock: _styleMaps.
|
|
61
|
-
insetBlockEnd: _styleMaps.
|
|
62
|
-
insetBlockStart: _styleMaps.
|
|
63
|
-
insetInline: _styleMaps.
|
|
64
|
-
insetInlineEnd: _styleMaps.
|
|
65
|
-
insetInlineStart: _styleMaps.
|
|
66
|
-
left: _styleMaps.
|
|
67
|
-
margin: _styleMaps.
|
|
68
|
-
marginBlock: _styleMaps.
|
|
69
|
-
marginBlockEnd: _styleMaps.
|
|
70
|
-
marginBlockStart: _styleMaps.
|
|
71
|
-
marginBottom: _styleMaps.
|
|
72
|
-
marginInline: _styleMaps.
|
|
73
|
-
marginInlineEnd: _styleMaps.
|
|
74
|
-
marginInlineStart: _styleMaps.
|
|
75
|
-
marginLeft: _styleMaps.
|
|
76
|
-
marginRight: _styleMaps.
|
|
77
|
-
marginTop: _styleMaps.
|
|
59
|
+
inset: _styleMaps.allSpaceMap,
|
|
60
|
+
insetBlock: _styleMaps.allSpaceMap,
|
|
61
|
+
insetBlockEnd: _styleMaps.allSpaceMap,
|
|
62
|
+
insetBlockStart: _styleMaps.allSpaceMap,
|
|
63
|
+
insetInline: _styleMaps.allSpaceMap,
|
|
64
|
+
insetInlineEnd: _styleMaps.allSpaceMap,
|
|
65
|
+
insetInlineStart: _styleMaps.allSpaceMap,
|
|
66
|
+
left: _styleMaps.allSpaceMap,
|
|
67
|
+
margin: _styleMaps.allSpaceMap,
|
|
68
|
+
marginBlock: _styleMaps.allSpaceMap,
|
|
69
|
+
marginBlockEnd: _styleMaps.allSpaceMap,
|
|
70
|
+
marginBlockStart: _styleMaps.allSpaceMap,
|
|
71
|
+
marginBottom: _styleMaps.allSpaceMap,
|
|
72
|
+
marginInline: _styleMaps.allSpaceMap,
|
|
73
|
+
marginInlineEnd: _styleMaps.allSpaceMap,
|
|
74
|
+
marginInlineStart: _styleMaps.allSpaceMap,
|
|
75
|
+
marginLeft: _styleMaps.allSpaceMap,
|
|
76
|
+
marginRight: _styleMaps.allSpaceMap,
|
|
77
|
+
marginTop: _styleMaps.allSpaceMap,
|
|
78
78
|
maxBlockSize: _styleMaps.dimensionMap,
|
|
79
79
|
maxHeight: _styleMaps.dimensionMap,
|
|
80
80
|
maxInlineSize: _styleMaps.dimensionMap,
|
|
@@ -85,22 +85,22 @@ var tokensMap = {
|
|
|
85
85
|
minWidth: _styleMaps.dimensionMap,
|
|
86
86
|
opacity: _styleMaps.opacityMap,
|
|
87
87
|
outlineColor: _styleMaps.borderColorMap,
|
|
88
|
-
outlineOffset: _styleMaps.
|
|
88
|
+
outlineOffset: _styleMaps.positiveSpaceMap,
|
|
89
89
|
outlineWidth: _styleMaps.borderWidthMap,
|
|
90
|
-
padding: _styleMaps.
|
|
91
|
-
paddingBlock: _styleMaps.
|
|
92
|
-
paddingBlockEnd: _styleMaps.
|
|
93
|
-
paddingBlockStart: _styleMaps.
|
|
94
|
-
paddingBottom: _styleMaps.
|
|
95
|
-
paddingInline: _styleMaps.
|
|
96
|
-
paddingInlineEnd: _styleMaps.
|
|
97
|
-
paddingInlineStart: _styleMaps.
|
|
98
|
-
paddingLeft: _styleMaps.
|
|
99
|
-
paddingRight: _styleMaps.
|
|
100
|
-
paddingTop: _styleMaps.
|
|
101
|
-
right: _styleMaps.
|
|
102
|
-
rowGap: _styleMaps.
|
|
103
|
-
top: _styleMaps.
|
|
90
|
+
padding: _styleMaps.positiveSpaceMap,
|
|
91
|
+
paddingBlock: _styleMaps.positiveSpaceMap,
|
|
92
|
+
paddingBlockEnd: _styleMaps.positiveSpaceMap,
|
|
93
|
+
paddingBlockStart: _styleMaps.positiveSpaceMap,
|
|
94
|
+
paddingBottom: _styleMaps.positiveSpaceMap,
|
|
95
|
+
paddingInline: _styleMaps.positiveSpaceMap,
|
|
96
|
+
paddingInlineEnd: _styleMaps.positiveSpaceMap,
|
|
97
|
+
paddingInlineStart: _styleMaps.positiveSpaceMap,
|
|
98
|
+
paddingLeft: _styleMaps.positiveSpaceMap,
|
|
99
|
+
paddingRight: _styleMaps.positiveSpaceMap,
|
|
100
|
+
paddingTop: _styleMaps.positiveSpaceMap,
|
|
101
|
+
right: _styleMaps.allSpaceMap,
|
|
102
|
+
rowGap: _styleMaps.positiveSpaceMap,
|
|
103
|
+
top: _styleMaps.allSpaceMap,
|
|
104
104
|
width: _styleMaps.dimensionMap,
|
|
105
105
|
zIndex: _styleMaps.layerMap
|
|
106
106
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @jsxRuntime classic
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
|
-
import
|
|
5
|
+
import React from 'react';
|
|
6
6
|
import { css, jsx } from '@emotion/react';
|
|
7
7
|
import { parseXcss } from '../xcss/xcss';
|
|
8
8
|
const baseStyles = css({
|
|
@@ -51,7 +51,7 @@ const inlineBleedMap = {
|
|
|
51
51
|
* - [Examples](https://atlassian.design/components/primitives/bleed/examples)
|
|
52
52
|
* - [Code](https://atlassian.design/components/primitives/bleed/code)
|
|
53
53
|
*/
|
|
54
|
-
const Bleed = /*#__PURE__*/memo(({
|
|
54
|
+
const Bleed = /*#__PURE__*/React.memo(({
|
|
55
55
|
children,
|
|
56
56
|
testId,
|
|
57
57
|
inline,
|
|
@@ -24,12 +24,12 @@ export const dimensionMap = {
|
|
|
24
24
|
*/
|
|
25
25
|
/**
|
|
26
26
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
27
|
-
* @codegen <<SignedSource::
|
|
27
|
+
* @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
|
|
28
28
|
* @codegenId spacing
|
|
29
29
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
30
30
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
|
|
31
31
|
*/
|
|
32
|
-
export const
|
|
32
|
+
export const positiveSpaceMap = {
|
|
33
33
|
'space.0': "var(--ds-space-0, 0px)",
|
|
34
34
|
'space.025': "var(--ds-space-025, 2px)",
|
|
35
35
|
'space.050': "var(--ds-space-050, 4px)",
|
|
@@ -56,6 +56,10 @@ export const negativeSpaceMap = {
|
|
|
56
56
|
'space.negative.300': "var(--ds-space-negative-300, -24px)",
|
|
57
57
|
'space.negative.400': "var(--ds-space-negative-400, -32px)"
|
|
58
58
|
};
|
|
59
|
+
export const allSpaceMap = {
|
|
60
|
+
...positiveSpaceMap,
|
|
61
|
+
...negativeSpaceMap
|
|
62
|
+
};
|
|
59
63
|
/**
|
|
60
64
|
* @codegenEnd
|
|
61
65
|
*/
|
|
@@ -549,11 +553,11 @@ const getSerializedStylesMap = (cssProperty, tokenMap) => {
|
|
|
549
553
|
}, {});
|
|
550
554
|
};
|
|
551
555
|
export const paddingStylesMap = spacingProperties.reduce((styleMap, spacingProperty) => {
|
|
552
|
-
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty,
|
|
556
|
+
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
|
|
553
557
|
return styleMap;
|
|
554
558
|
}, {});
|
|
555
559
|
export const spaceStylesMap = spacingProperties.reduce((styleMap, spacingProperty) => {
|
|
556
|
-
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty,
|
|
560
|
+
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
|
|
557
561
|
return styleMap;
|
|
558
562
|
}, {});
|
|
559
563
|
export const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
|
package/dist/es2019/xcss/xcss.js
CHANGED
|
@@ -3,7 +3,7 @@ import { css as cssEmotion } from '@emotion/react';
|
|
|
3
3
|
|
|
4
4
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
5
5
|
|
|
6
|
-
import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap,
|
|
6
|
+
import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
|
|
7
7
|
const tokensMap = {
|
|
8
8
|
backgroundColor: backgroundColorMap,
|
|
9
9
|
blockSize: dimensionMap,
|
|
@@ -38,32 +38,32 @@ const tokensMap = {
|
|
|
38
38
|
borderTopRightRadius: borderRadiusMap,
|
|
39
39
|
borderTopWidth: borderWidthMap,
|
|
40
40
|
borderWidth: borderWidthMap,
|
|
41
|
-
bottom:
|
|
41
|
+
bottom: allSpaceMap,
|
|
42
42
|
boxShadow: shadowMap,
|
|
43
43
|
color: textColorMap,
|
|
44
|
-
columnGap:
|
|
45
|
-
gap:
|
|
44
|
+
columnGap: positiveSpaceMap,
|
|
45
|
+
gap: positiveSpaceMap,
|
|
46
46
|
height: dimensionMap,
|
|
47
47
|
inlineSize: dimensionMap,
|
|
48
|
-
inset:
|
|
49
|
-
insetBlock:
|
|
50
|
-
insetBlockEnd:
|
|
51
|
-
insetBlockStart:
|
|
52
|
-
insetInline:
|
|
53
|
-
insetInlineEnd:
|
|
54
|
-
insetInlineStart:
|
|
55
|
-
left:
|
|
56
|
-
margin:
|
|
57
|
-
marginBlock:
|
|
58
|
-
marginBlockEnd:
|
|
59
|
-
marginBlockStart:
|
|
60
|
-
marginBottom:
|
|
61
|
-
marginInline:
|
|
62
|
-
marginInlineEnd:
|
|
63
|
-
marginInlineStart:
|
|
64
|
-
marginLeft:
|
|
65
|
-
marginRight:
|
|
66
|
-
marginTop:
|
|
48
|
+
inset: allSpaceMap,
|
|
49
|
+
insetBlock: allSpaceMap,
|
|
50
|
+
insetBlockEnd: allSpaceMap,
|
|
51
|
+
insetBlockStart: allSpaceMap,
|
|
52
|
+
insetInline: allSpaceMap,
|
|
53
|
+
insetInlineEnd: allSpaceMap,
|
|
54
|
+
insetInlineStart: allSpaceMap,
|
|
55
|
+
left: allSpaceMap,
|
|
56
|
+
margin: allSpaceMap,
|
|
57
|
+
marginBlock: allSpaceMap,
|
|
58
|
+
marginBlockEnd: allSpaceMap,
|
|
59
|
+
marginBlockStart: allSpaceMap,
|
|
60
|
+
marginBottom: allSpaceMap,
|
|
61
|
+
marginInline: allSpaceMap,
|
|
62
|
+
marginInlineEnd: allSpaceMap,
|
|
63
|
+
marginInlineStart: allSpaceMap,
|
|
64
|
+
marginLeft: allSpaceMap,
|
|
65
|
+
marginRight: allSpaceMap,
|
|
66
|
+
marginTop: allSpaceMap,
|
|
67
67
|
maxBlockSize: dimensionMap,
|
|
68
68
|
maxHeight: dimensionMap,
|
|
69
69
|
maxInlineSize: dimensionMap,
|
|
@@ -74,22 +74,22 @@ const tokensMap = {
|
|
|
74
74
|
minWidth: dimensionMap,
|
|
75
75
|
opacity: opacityMap,
|
|
76
76
|
outlineColor: borderColorMap,
|
|
77
|
-
outlineOffset:
|
|
77
|
+
outlineOffset: positiveSpaceMap,
|
|
78
78
|
outlineWidth: borderWidthMap,
|
|
79
|
-
padding:
|
|
80
|
-
paddingBlock:
|
|
81
|
-
paddingBlockEnd:
|
|
82
|
-
paddingBlockStart:
|
|
83
|
-
paddingBottom:
|
|
84
|
-
paddingInline:
|
|
85
|
-
paddingInlineEnd:
|
|
86
|
-
paddingInlineStart:
|
|
87
|
-
paddingLeft:
|
|
88
|
-
paddingRight:
|
|
89
|
-
paddingTop:
|
|
90
|
-
right:
|
|
91
|
-
rowGap:
|
|
92
|
-
top:
|
|
79
|
+
padding: positiveSpaceMap,
|
|
80
|
+
paddingBlock: positiveSpaceMap,
|
|
81
|
+
paddingBlockEnd: positiveSpaceMap,
|
|
82
|
+
paddingBlockStart: positiveSpaceMap,
|
|
83
|
+
paddingBottom: positiveSpaceMap,
|
|
84
|
+
paddingInline: positiveSpaceMap,
|
|
85
|
+
paddingInlineEnd: positiveSpaceMap,
|
|
86
|
+
paddingInlineStart: positiveSpaceMap,
|
|
87
|
+
paddingLeft: positiveSpaceMap,
|
|
88
|
+
paddingRight: positiveSpaceMap,
|
|
89
|
+
paddingTop: positiveSpaceMap,
|
|
90
|
+
right: allSpaceMap,
|
|
91
|
+
rowGap: positiveSpaceMap,
|
|
92
|
+
top: allSpaceMap,
|
|
93
93
|
width: dimensionMap,
|
|
94
94
|
zIndex: layerMap
|
|
95
95
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @jsxRuntime classic
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
|
-
import
|
|
5
|
+
import React from 'react';
|
|
6
6
|
import { css, jsx } from '@emotion/react';
|
|
7
7
|
import { parseXcss } from '../xcss/xcss';
|
|
8
8
|
var baseStyles = css({
|
|
@@ -51,7 +51,7 @@ var inlineBleedMap = {
|
|
|
51
51
|
* - [Examples](https://atlassian.design/components/primitives/bleed/examples)
|
|
52
52
|
* - [Code](https://atlassian.design/components/primitives/bleed/code)
|
|
53
53
|
*/
|
|
54
|
-
var Bleed = /*#__PURE__*/memo(function (_ref) {
|
|
54
|
+
var Bleed = /*#__PURE__*/React.memo(function (_ref) {
|
|
55
55
|
var children = _ref.children,
|
|
56
56
|
testId = _ref.testId,
|
|
57
57
|
inline = _ref.inline,
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
2
4
|
import { css } from '@emotion/react';
|
|
3
5
|
import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
|
|
4
6
|
|
|
@@ -25,12 +27,12 @@ export var dimensionMap = {
|
|
|
25
27
|
*/
|
|
26
28
|
/**
|
|
27
29
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
28
|
-
* @codegen <<SignedSource::
|
|
30
|
+
* @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
|
|
29
31
|
* @codegenId spacing
|
|
30
32
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
31
33
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
|
|
32
34
|
*/
|
|
33
|
-
export var
|
|
35
|
+
export var positiveSpaceMap = {
|
|
34
36
|
'space.0': "var(--ds-space-0, 0px)",
|
|
35
37
|
'space.025': "var(--ds-space-025, 2px)",
|
|
36
38
|
'space.050': "var(--ds-space-050, 4px)",
|
|
@@ -57,6 +59,7 @@ export var negativeSpaceMap = {
|
|
|
57
59
|
'space.negative.300': "var(--ds-space-negative-300, -24px)",
|
|
58
60
|
'space.negative.400': "var(--ds-space-negative-400, -32px)"
|
|
59
61
|
};
|
|
62
|
+
export var allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), negativeSpaceMap);
|
|
60
63
|
/**
|
|
61
64
|
* @codegenEnd
|
|
62
65
|
*/
|
|
@@ -548,11 +551,11 @@ var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenM
|
|
|
548
551
|
}, {});
|
|
549
552
|
};
|
|
550
553
|
export var paddingStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
|
|
551
|
-
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty,
|
|
554
|
+
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
|
|
552
555
|
return styleMap;
|
|
553
556
|
}, {});
|
|
554
557
|
export var spaceStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
|
|
555
|
-
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty,
|
|
558
|
+
styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
|
|
556
559
|
return styleMap;
|
|
557
560
|
}, {});
|
|
558
561
|
export var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
|
package/dist/esm/xcss/xcss.js
CHANGED
|
@@ -6,7 +6,7 @@ import { css as cssEmotion } from '@emotion/react';
|
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
8
8
|
|
|
9
|
-
import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap,
|
|
9
|
+
import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
|
|
10
10
|
var tokensMap = {
|
|
11
11
|
backgroundColor: backgroundColorMap,
|
|
12
12
|
blockSize: dimensionMap,
|
|
@@ -41,32 +41,32 @@ var tokensMap = {
|
|
|
41
41
|
borderTopRightRadius: borderRadiusMap,
|
|
42
42
|
borderTopWidth: borderWidthMap,
|
|
43
43
|
borderWidth: borderWidthMap,
|
|
44
|
-
bottom:
|
|
44
|
+
bottom: allSpaceMap,
|
|
45
45
|
boxShadow: shadowMap,
|
|
46
46
|
color: textColorMap,
|
|
47
|
-
columnGap:
|
|
48
|
-
gap:
|
|
47
|
+
columnGap: positiveSpaceMap,
|
|
48
|
+
gap: positiveSpaceMap,
|
|
49
49
|
height: dimensionMap,
|
|
50
50
|
inlineSize: dimensionMap,
|
|
51
|
-
inset:
|
|
52
|
-
insetBlock:
|
|
53
|
-
insetBlockEnd:
|
|
54
|
-
insetBlockStart:
|
|
55
|
-
insetInline:
|
|
56
|
-
insetInlineEnd:
|
|
57
|
-
insetInlineStart:
|
|
58
|
-
left:
|
|
59
|
-
margin:
|
|
60
|
-
marginBlock:
|
|
61
|
-
marginBlockEnd:
|
|
62
|
-
marginBlockStart:
|
|
63
|
-
marginBottom:
|
|
64
|
-
marginInline:
|
|
65
|
-
marginInlineEnd:
|
|
66
|
-
marginInlineStart:
|
|
67
|
-
marginLeft:
|
|
68
|
-
marginRight:
|
|
69
|
-
marginTop:
|
|
51
|
+
inset: allSpaceMap,
|
|
52
|
+
insetBlock: allSpaceMap,
|
|
53
|
+
insetBlockEnd: allSpaceMap,
|
|
54
|
+
insetBlockStart: allSpaceMap,
|
|
55
|
+
insetInline: allSpaceMap,
|
|
56
|
+
insetInlineEnd: allSpaceMap,
|
|
57
|
+
insetInlineStart: allSpaceMap,
|
|
58
|
+
left: allSpaceMap,
|
|
59
|
+
margin: allSpaceMap,
|
|
60
|
+
marginBlock: allSpaceMap,
|
|
61
|
+
marginBlockEnd: allSpaceMap,
|
|
62
|
+
marginBlockStart: allSpaceMap,
|
|
63
|
+
marginBottom: allSpaceMap,
|
|
64
|
+
marginInline: allSpaceMap,
|
|
65
|
+
marginInlineEnd: allSpaceMap,
|
|
66
|
+
marginInlineStart: allSpaceMap,
|
|
67
|
+
marginLeft: allSpaceMap,
|
|
68
|
+
marginRight: allSpaceMap,
|
|
69
|
+
marginTop: allSpaceMap,
|
|
70
70
|
maxBlockSize: dimensionMap,
|
|
71
71
|
maxHeight: dimensionMap,
|
|
72
72
|
maxInlineSize: dimensionMap,
|
|
@@ -77,22 +77,22 @@ var tokensMap = {
|
|
|
77
77
|
minWidth: dimensionMap,
|
|
78
78
|
opacity: opacityMap,
|
|
79
79
|
outlineColor: borderColorMap,
|
|
80
|
-
outlineOffset:
|
|
80
|
+
outlineOffset: positiveSpaceMap,
|
|
81
81
|
outlineWidth: borderWidthMap,
|
|
82
|
-
padding:
|
|
83
|
-
paddingBlock:
|
|
84
|
-
paddingBlockEnd:
|
|
85
|
-
paddingBlockStart:
|
|
86
|
-
paddingBottom:
|
|
87
|
-
paddingInline:
|
|
88
|
-
paddingInlineEnd:
|
|
89
|
-
paddingInlineStart:
|
|
90
|
-
paddingLeft:
|
|
91
|
-
paddingRight:
|
|
92
|
-
paddingTop:
|
|
93
|
-
right:
|
|
94
|
-
rowGap:
|
|
95
|
-
top:
|
|
82
|
+
padding: positiveSpaceMap,
|
|
83
|
+
paddingBlock: positiveSpaceMap,
|
|
84
|
+
paddingBlockEnd: positiveSpaceMap,
|
|
85
|
+
paddingBlockStart: positiveSpaceMap,
|
|
86
|
+
paddingBottom: positiveSpaceMap,
|
|
87
|
+
paddingInline: positiveSpaceMap,
|
|
88
|
+
paddingInlineEnd: positiveSpaceMap,
|
|
89
|
+
paddingInlineStart: positiveSpaceMap,
|
|
90
|
+
paddingLeft: positiveSpaceMap,
|
|
91
|
+
paddingRight: positiveSpaceMap,
|
|
92
|
+
paddingTop: positiveSpaceMap,
|
|
93
|
+
right: allSpaceMap,
|
|
94
|
+
rowGap: positiveSpaceMap,
|
|
95
|
+
top: allSpaceMap,
|
|
96
96
|
width: dimensionMap,
|
|
97
97
|
zIndex: layerMap
|
|
98
98
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @jsxRuntime classic
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
|
-
import { ReactNode } from 'react';
|
|
5
|
+
import React, { ReactNode } from 'react';
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
7
|
import type { BasePrimitiveProps } from './types';
|
|
8
8
|
export type BleedProps = {
|
|
@@ -32,5 +32,5 @@ type Space = 'space.025' | 'space.050' | 'space.100' | 'space.150' | 'space.200'
|
|
|
32
32
|
* - [Examples](https://atlassian.design/components/primitives/bleed/examples)
|
|
33
33
|
* - [Code](https://atlassian.design/components/primitives/bleed/code)
|
|
34
34
|
*/
|
|
35
|
-
declare const Bleed:
|
|
35
|
+
declare const Bleed: React.MemoExoticComponent<({ children, testId, inline, block, all, xcss }: BleedProps) => jsx.JSX.Element>;
|
|
36
36
|
export default Bleed;
|
|
@@ -23,12 +23,12 @@ export type Dimension = keyof typeof dimensionMap;
|
|
|
23
23
|
*/
|
|
24
24
|
/**
|
|
25
25
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
26
|
-
* @codegen <<SignedSource::
|
|
26
|
+
* @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
|
|
27
27
|
* @codegenId spacing
|
|
28
28
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
29
29
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
|
|
30
30
|
*/
|
|
31
|
-
export declare const
|
|
31
|
+
export declare const positiveSpaceMap: {
|
|
32
32
|
'space.0': "var(--ds-space-0)";
|
|
33
33
|
'space.025': "var(--ds-space-025)";
|
|
34
34
|
'space.050': "var(--ds-space-050)";
|
|
@@ -44,7 +44,7 @@ export declare const spaceMap: {
|
|
|
44
44
|
'space.800': "var(--ds-space-800)";
|
|
45
45
|
'space.1000': "var(--ds-space-1000)";
|
|
46
46
|
};
|
|
47
|
-
export type Space = keyof typeof
|
|
47
|
+
export type Space = keyof typeof positiveSpaceMap;
|
|
48
48
|
export declare const negativeSpaceMap: {
|
|
49
49
|
'space.negative.025': "var(--ds-space-negative-025)";
|
|
50
50
|
'space.negative.050': "var(--ds-space-negative-050)";
|
|
@@ -57,6 +57,32 @@ export declare const negativeSpaceMap: {
|
|
|
57
57
|
'space.negative.400': "var(--ds-space-negative-400)";
|
|
58
58
|
};
|
|
59
59
|
export type NegativeSpace = keyof typeof negativeSpaceMap;
|
|
60
|
+
export declare const allSpaceMap: {
|
|
61
|
+
'space.negative.025': "var(--ds-space-negative-025)";
|
|
62
|
+
'space.negative.050': "var(--ds-space-negative-050)";
|
|
63
|
+
'space.negative.075': "var(--ds-space-negative-075)";
|
|
64
|
+
'space.negative.100': "var(--ds-space-negative-100)";
|
|
65
|
+
'space.negative.150': "var(--ds-space-negative-150)";
|
|
66
|
+
'space.negative.200': "var(--ds-space-negative-200)";
|
|
67
|
+
'space.negative.250': "var(--ds-space-negative-250)";
|
|
68
|
+
'space.negative.300': "var(--ds-space-negative-300)";
|
|
69
|
+
'space.negative.400': "var(--ds-space-negative-400)";
|
|
70
|
+
'space.0': "var(--ds-space-0)";
|
|
71
|
+
'space.025': "var(--ds-space-025)";
|
|
72
|
+
'space.050': "var(--ds-space-050)";
|
|
73
|
+
'space.075': "var(--ds-space-075)";
|
|
74
|
+
'space.100': "var(--ds-space-100)";
|
|
75
|
+
'space.150': "var(--ds-space-150)";
|
|
76
|
+
'space.200': "var(--ds-space-200)";
|
|
77
|
+
'space.250': "var(--ds-space-250)";
|
|
78
|
+
'space.300': "var(--ds-space-300)";
|
|
79
|
+
'space.400': "var(--ds-space-400)";
|
|
80
|
+
'space.500': "var(--ds-space-500)";
|
|
81
|
+
'space.600': "var(--ds-space-600)";
|
|
82
|
+
'space.800': "var(--ds-space-800)";
|
|
83
|
+
'space.1000': "var(--ds-space-1000)";
|
|
84
|
+
};
|
|
85
|
+
export type AllSpace = keyof typeof allSpaceMap;
|
|
60
86
|
/**
|
|
61
87
|
* @codegenEnd
|
|
62
88
|
*/
|
|
@@ -547,7 +573,7 @@ export type UiText = keyof typeof uiTextMap;
|
|
|
547
573
|
/**
|
|
548
574
|
* @codegenEnd
|
|
549
575
|
*/
|
|
550
|
-
type MarginSpace =
|
|
576
|
+
type MarginSpace = AllSpace | 'auto';
|
|
551
577
|
type AutoComplete<T extends string> = T | Omit<string, T>;
|
|
552
578
|
export type TokenisedProps = {
|
|
553
579
|
backgroundColor?: BackgroundColor;
|
|
@@ -583,21 +609,21 @@ export type TokenisedProps = {
|
|
|
583
609
|
borderTopRightRadius?: AutoComplete<BorderRadius>;
|
|
584
610
|
borderTopWidth?: AutoComplete<BorderWidth>;
|
|
585
611
|
borderWidth?: BorderWidth;
|
|
586
|
-
bottom?: AutoComplete<
|
|
612
|
+
bottom?: AutoComplete<AllSpace>;
|
|
587
613
|
boxShadow?: Shadow;
|
|
588
614
|
color?: TextColor;
|
|
589
615
|
columnGap?: Space;
|
|
590
616
|
gap?: Space;
|
|
591
617
|
height?: AutoComplete<Dimension>;
|
|
592
618
|
inlineSize?: AutoComplete<Dimension>;
|
|
593
|
-
inset?:
|
|
594
|
-
insetBlock?:
|
|
595
|
-
insetBlockEnd?:
|
|
596
|
-
insetBlockStart?:
|
|
597
|
-
insetInline?:
|
|
598
|
-
insetInlineEnd?:
|
|
599
|
-
insetInlineStart?:
|
|
600
|
-
left?: AutoComplete<
|
|
619
|
+
inset?: AutoComplete<AllSpace>;
|
|
620
|
+
insetBlock?: AutoComplete<AllSpace>;
|
|
621
|
+
insetBlockEnd?: AutoComplete<AllSpace>;
|
|
622
|
+
insetBlockStart?: AutoComplete<AllSpace>;
|
|
623
|
+
insetInline?: AutoComplete<AllSpace>;
|
|
624
|
+
insetInlineEnd?: AutoComplete<AllSpace>;
|
|
625
|
+
insetInlineStart?: AutoComplete<AllSpace>;
|
|
626
|
+
left?: AutoComplete<AllSpace>;
|
|
601
627
|
margin?: AutoComplete<MarginSpace>;
|
|
602
628
|
marginBlock?: AutoComplete<MarginSpace>;
|
|
603
629
|
marginBlockEnd?: AutoComplete<MarginSpace>;
|
|
@@ -632,15 +658,15 @@ export type TokenisedProps = {
|
|
|
632
658
|
paddingLeft?: AutoComplete<Space>;
|
|
633
659
|
paddingRight?: AutoComplete<Space>;
|
|
634
660
|
paddingTop?: AutoComplete<Space>;
|
|
635
|
-
right?: AutoComplete<
|
|
661
|
+
right?: AutoComplete<AllSpace>;
|
|
636
662
|
rowGap?: Space;
|
|
637
|
-
top?: AutoComplete<
|
|
663
|
+
top?: AutoComplete<AllSpace>;
|
|
638
664
|
width?: AutoComplete<Dimension>;
|
|
639
665
|
zIndex?: Layer;
|
|
640
666
|
};
|
|
641
667
|
declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap", "columnGap"];
|
|
642
668
|
type SpacingProperty = (typeof spacingProperties)[number];
|
|
643
|
-
type SpacingToken = keyof typeof
|
|
669
|
+
type SpacingToken = keyof typeof positiveSpaceMap;
|
|
644
670
|
type BackgroundColorToken = keyof typeof backgroundColorMap;
|
|
645
671
|
type SurfaceColorToken = keyof typeof surfaceColorMap;
|
|
646
672
|
type TextColorToken = keyof typeof textColorMap;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @jsxRuntime classic
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
|
-
import { ReactNode } from 'react';
|
|
5
|
+
import React, { ReactNode } from 'react';
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
7
|
import type { BasePrimitiveProps } from './types';
|
|
8
8
|
export type BleedProps = {
|
|
@@ -32,5 +32,5 @@ type Space = 'space.025' | 'space.050' | 'space.100' | 'space.150' | 'space.200'
|
|
|
32
32
|
* - [Examples](https://atlassian.design/components/primitives/bleed/examples)
|
|
33
33
|
* - [Code](https://atlassian.design/components/primitives/bleed/code)
|
|
34
34
|
*/
|
|
35
|
-
declare const Bleed:
|
|
35
|
+
declare const Bleed: React.MemoExoticComponent<({ children, testId, inline, block, all, xcss }: BleedProps) => jsx.JSX.Element>;
|
|
36
36
|
export default Bleed;
|
|
@@ -23,12 +23,12 @@ export type Dimension = keyof typeof dimensionMap;
|
|
|
23
23
|
*/
|
|
24
24
|
/**
|
|
25
25
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
26
|
-
* @codegen <<SignedSource::
|
|
26
|
+
* @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
|
|
27
27
|
* @codegenId spacing
|
|
28
28
|
* @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
|
|
29
29
|
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
|
|
30
30
|
*/
|
|
31
|
-
export declare const
|
|
31
|
+
export declare const positiveSpaceMap: {
|
|
32
32
|
'space.0': "var(--ds-space-0)";
|
|
33
33
|
'space.025': "var(--ds-space-025)";
|
|
34
34
|
'space.050': "var(--ds-space-050)";
|
|
@@ -44,7 +44,7 @@ export declare const spaceMap: {
|
|
|
44
44
|
'space.800': "var(--ds-space-800)";
|
|
45
45
|
'space.1000': "var(--ds-space-1000)";
|
|
46
46
|
};
|
|
47
|
-
export type Space = keyof typeof
|
|
47
|
+
export type Space = keyof typeof positiveSpaceMap;
|
|
48
48
|
export declare const negativeSpaceMap: {
|
|
49
49
|
'space.negative.025': "var(--ds-space-negative-025)";
|
|
50
50
|
'space.negative.050': "var(--ds-space-negative-050)";
|
|
@@ -57,6 +57,32 @@ export declare const negativeSpaceMap: {
|
|
|
57
57
|
'space.negative.400': "var(--ds-space-negative-400)";
|
|
58
58
|
};
|
|
59
59
|
export type NegativeSpace = keyof typeof negativeSpaceMap;
|
|
60
|
+
export declare const allSpaceMap: {
|
|
61
|
+
'space.negative.025': "var(--ds-space-negative-025)";
|
|
62
|
+
'space.negative.050': "var(--ds-space-negative-050)";
|
|
63
|
+
'space.negative.075': "var(--ds-space-negative-075)";
|
|
64
|
+
'space.negative.100': "var(--ds-space-negative-100)";
|
|
65
|
+
'space.negative.150': "var(--ds-space-negative-150)";
|
|
66
|
+
'space.negative.200': "var(--ds-space-negative-200)";
|
|
67
|
+
'space.negative.250': "var(--ds-space-negative-250)";
|
|
68
|
+
'space.negative.300': "var(--ds-space-negative-300)";
|
|
69
|
+
'space.negative.400': "var(--ds-space-negative-400)";
|
|
70
|
+
'space.0': "var(--ds-space-0)";
|
|
71
|
+
'space.025': "var(--ds-space-025)";
|
|
72
|
+
'space.050': "var(--ds-space-050)";
|
|
73
|
+
'space.075': "var(--ds-space-075)";
|
|
74
|
+
'space.100': "var(--ds-space-100)";
|
|
75
|
+
'space.150': "var(--ds-space-150)";
|
|
76
|
+
'space.200': "var(--ds-space-200)";
|
|
77
|
+
'space.250': "var(--ds-space-250)";
|
|
78
|
+
'space.300': "var(--ds-space-300)";
|
|
79
|
+
'space.400': "var(--ds-space-400)";
|
|
80
|
+
'space.500': "var(--ds-space-500)";
|
|
81
|
+
'space.600': "var(--ds-space-600)";
|
|
82
|
+
'space.800': "var(--ds-space-800)";
|
|
83
|
+
'space.1000': "var(--ds-space-1000)";
|
|
84
|
+
};
|
|
85
|
+
export type AllSpace = keyof typeof allSpaceMap;
|
|
60
86
|
/**
|
|
61
87
|
* @codegenEnd
|
|
62
88
|
*/
|
|
@@ -547,7 +573,7 @@ export type UiText = keyof typeof uiTextMap;
|
|
|
547
573
|
/**
|
|
548
574
|
* @codegenEnd
|
|
549
575
|
*/
|
|
550
|
-
type MarginSpace =
|
|
576
|
+
type MarginSpace = AllSpace | 'auto';
|
|
551
577
|
type AutoComplete<T extends string> = T | Omit<string, T>;
|
|
552
578
|
export type TokenisedProps = {
|
|
553
579
|
backgroundColor?: BackgroundColor;
|
|
@@ -583,21 +609,21 @@ export type TokenisedProps = {
|
|
|
583
609
|
borderTopRightRadius?: AutoComplete<BorderRadius>;
|
|
584
610
|
borderTopWidth?: AutoComplete<BorderWidth>;
|
|
585
611
|
borderWidth?: BorderWidth;
|
|
586
|
-
bottom?: AutoComplete<
|
|
612
|
+
bottom?: AutoComplete<AllSpace>;
|
|
587
613
|
boxShadow?: Shadow;
|
|
588
614
|
color?: TextColor;
|
|
589
615
|
columnGap?: Space;
|
|
590
616
|
gap?: Space;
|
|
591
617
|
height?: AutoComplete<Dimension>;
|
|
592
618
|
inlineSize?: AutoComplete<Dimension>;
|
|
593
|
-
inset?:
|
|
594
|
-
insetBlock?:
|
|
595
|
-
insetBlockEnd?:
|
|
596
|
-
insetBlockStart?:
|
|
597
|
-
insetInline?:
|
|
598
|
-
insetInlineEnd?:
|
|
599
|
-
insetInlineStart?:
|
|
600
|
-
left?: AutoComplete<
|
|
619
|
+
inset?: AutoComplete<AllSpace>;
|
|
620
|
+
insetBlock?: AutoComplete<AllSpace>;
|
|
621
|
+
insetBlockEnd?: AutoComplete<AllSpace>;
|
|
622
|
+
insetBlockStart?: AutoComplete<AllSpace>;
|
|
623
|
+
insetInline?: AutoComplete<AllSpace>;
|
|
624
|
+
insetInlineEnd?: AutoComplete<AllSpace>;
|
|
625
|
+
insetInlineStart?: AutoComplete<AllSpace>;
|
|
626
|
+
left?: AutoComplete<AllSpace>;
|
|
601
627
|
margin?: AutoComplete<MarginSpace>;
|
|
602
628
|
marginBlock?: AutoComplete<MarginSpace>;
|
|
603
629
|
marginBlockEnd?: AutoComplete<MarginSpace>;
|
|
@@ -632,9 +658,9 @@ export type TokenisedProps = {
|
|
|
632
658
|
paddingLeft?: AutoComplete<Space>;
|
|
633
659
|
paddingRight?: AutoComplete<Space>;
|
|
634
660
|
paddingTop?: AutoComplete<Space>;
|
|
635
|
-
right?: AutoComplete<
|
|
661
|
+
right?: AutoComplete<AllSpace>;
|
|
636
662
|
rowGap?: Space;
|
|
637
|
-
top?: AutoComplete<
|
|
663
|
+
top?: AutoComplete<AllSpace>;
|
|
638
664
|
width?: AutoComplete<Dimension>;
|
|
639
665
|
zIndex?: Layer;
|
|
640
666
|
};
|
|
@@ -651,7 +677,7 @@ declare const spacingProperties: readonly [
|
|
|
651
677
|
"columnGap"
|
|
652
678
|
];
|
|
653
679
|
type SpacingProperty = (typeof spacingProperties)[number];
|
|
654
|
-
type SpacingToken = keyof typeof
|
|
680
|
+
type SpacingToken = keyof typeof positiveSpaceMap;
|
|
655
681
|
type BackgroundColorToken = keyof typeof backgroundColorMap;
|
|
656
682
|
type SurfaceColorToken = keyof typeof surfaceColorMap;
|
|
657
683
|
type TextColorToken = keyof typeof textColorMap;
|
package/package.json
CHANGED
|
@@ -810,7 +810,7 @@ export type Shadow = keyof typeof shadowMap;
|
|
|
810
810
|
`;
|
|
811
811
|
|
|
812
812
|
exports[`@atlaskit/primitives spacing styles are generated correctly 1`] = `
|
|
813
|
-
"export const
|
|
813
|
+
"export const positiveSpaceMap = {
|
|
814
814
|
'space.0': token('space.0', '0px'),
|
|
815
815
|
'space.025': token('space.025', '2px'),
|
|
816
816
|
'space.050': token('space.050', '4px'),
|
|
@@ -826,7 +826,7 @@ exports[`@atlaskit/primitives spacing styles are generated correctly 1`] = `
|
|
|
826
826
|
'space.800': token('space.800', '64px'),
|
|
827
827
|
'space.1000': token('space.1000', '80px'),
|
|
828
828
|
};
|
|
829
|
-
export type Space = keyof typeof
|
|
829
|
+
export type Space = keyof typeof positiveSpaceMap;
|
|
830
830
|
|
|
831
831
|
export const negativeSpaceMap = {
|
|
832
832
|
'space.negative.025': token('space.negative.025', '-2px'),
|
|
@@ -840,6 +840,10 @@ export const negativeSpaceMap = {
|
|
|
840
840
|
'space.negative.400': token('space.negative.400', '-32px'),
|
|
841
841
|
};
|
|
842
842
|
export type NegativeSpace = keyof typeof negativeSpaceMap;
|
|
843
|
+
|
|
844
|
+
export const allSpaceMap = { ...positiveSpaceMap, ...negativeSpaceMap };
|
|
845
|
+
|
|
846
|
+
export type AllSpace = keyof typeof allSpaceMap;
|
|
843
847
|
"
|
|
844
848
|
`;
|
|
845
849
|
|
|
@@ -7,7 +7,7 @@ import { constructTokenFunctionCall } from './utils';
|
|
|
7
7
|
|
|
8
8
|
const spacingTokenPrefix = 'space.';
|
|
9
9
|
const negativeSuffix = '.negative';
|
|
10
|
-
const
|
|
10
|
+
const positiveSpaceTokens = tokens
|
|
11
11
|
.filter(token => token.name.startsWith(spacingTokenPrefix))
|
|
12
12
|
.filter(token => !token.name.includes(negativeSuffix))
|
|
13
13
|
.map(t => ({
|
|
@@ -25,13 +25,13 @@ const negativeSpaceTokens = tokens
|
|
|
25
25
|
|
|
26
26
|
export const createSpacingStylesFromTemplate = () => {
|
|
27
27
|
const output = [
|
|
28
|
-
`export const
|
|
28
|
+
`export const positiveSpaceMap = {\n${positiveSpaceTokens
|
|
29
29
|
.map(
|
|
30
30
|
({ name, fallback }) =>
|
|
31
31
|
`'${name}': ${constructTokenFunctionCall(name, fallback)},`,
|
|
32
32
|
)
|
|
33
33
|
.join('\n')}}`,
|
|
34
|
-
`export type Space = keyof typeof
|
|
34
|
+
`export type Space = keyof typeof positiveSpaceMap;\n`,
|
|
35
35
|
`export const negativeSpaceMap = {\n${negativeSpaceTokens
|
|
36
36
|
.map(
|
|
37
37
|
({ name, fallback }) =>
|
|
@@ -39,6 +39,8 @@ export const createSpacingStylesFromTemplate = () => {
|
|
|
39
39
|
)
|
|
40
40
|
.join('\n')}}`,
|
|
41
41
|
`export type NegativeSpace = keyof typeof negativeSpaceMap;\n`,
|
|
42
|
+
`export const allSpaceMap = { ...positiveSpaceMap, ...negativeSpaceMap };\n`,
|
|
43
|
+
`export type AllSpace = keyof typeof allSpaceMap;\n`,
|
|
42
44
|
].join('\n');
|
|
43
45
|
|
|
44
46
|
return prettier.format(output, {
|