@atlaskit/primitives 0.3.1 → 0.3.3

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 CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 0.3.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
8
+
9
+ ## 0.3.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`e7b64da97a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7b64da97a1) - Add `rowSpace` prop to override the `space` prop's spacing between rows.
14
+
3
15
  ## 0.3.1
4
16
 
5
17
  ### Patch Changes
@@ -50,10 +50,10 @@ var flexWrapStyles = (0, _react2.css)({
50
50
 
51
51
  /**
52
52
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
53
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
53
+ * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
54
54
  * @codegenId spacing
55
55
  * @codegenCommand yarn codegen-styles
56
- * @codegenParams ["space"]
56
+ * @codegenParams ["space", "rowSpace"]
57
57
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
58
58
  */
59
59
  var spaceMap = {
@@ -100,6 +100,50 @@ var spaceMap = {
100
100
  gap: "var(--ds-space-1000, 80px)"
101
101
  })
102
102
  };
103
+ var rowSpaceMap = {
104
+ '0': (0, _react2.css)({
105
+ rowGap: "var(--ds-space-0, 0px)"
106
+ }),
107
+ '025': (0, _react2.css)({
108
+ rowGap: "var(--ds-space-025, 2px)"
109
+ }),
110
+ '050': (0, _react2.css)({
111
+ rowGap: "var(--ds-space-050, 4px)"
112
+ }),
113
+ '075': (0, _react2.css)({
114
+ rowGap: "var(--ds-space-075, 6px)"
115
+ }),
116
+ '100': (0, _react2.css)({
117
+ rowGap: "var(--ds-space-100, 8px)"
118
+ }),
119
+ '150': (0, _react2.css)({
120
+ rowGap: "var(--ds-space-150, 12px)"
121
+ }),
122
+ '200': (0, _react2.css)({
123
+ rowGap: "var(--ds-space-200, 16px)"
124
+ }),
125
+ '250': (0, _react2.css)({
126
+ rowGap: "var(--ds-space-250, 20px)"
127
+ }),
128
+ '300': (0, _react2.css)({
129
+ rowGap: "var(--ds-space-300, 24px)"
130
+ }),
131
+ '400': (0, _react2.css)({
132
+ rowGap: "var(--ds-space-400, 32px)"
133
+ }),
134
+ '500': (0, _react2.css)({
135
+ rowGap: "var(--ds-space-500, 40px)"
136
+ }),
137
+ '600': (0, _react2.css)({
138
+ rowGap: "var(--ds-space-600, 48px)"
139
+ }),
140
+ '800': (0, _react2.css)({
141
+ rowGap: "var(--ds-space-800, 64px)"
142
+ }),
143
+ '1000': (0, _react2.css)({
144
+ rowGap: "var(--ds-space-1000, 80px)"
145
+ })
146
+ };
103
147
  /**
104
148
  * @codegenEnd
105
149
  */
@@ -146,6 +190,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
146
190
  spread = _ref2.spread,
147
191
  grow = _ref2.grow,
148
192
  space = _ref2.space,
193
+ rowSpace = _ref2.rowSpace,
149
194
  separator = _ref2.separator,
150
195
  testId = _ref2.testId,
151
196
  rawChildren = _ref2.children;
@@ -157,7 +202,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
157
202
  }) : rawChildren;
158
203
  var justifyContent = spread || alignInline;
159
204
  return (0, _react2.jsx)("div", {
160
- css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
205
+ css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
161
206
  "data-testid": testId,
162
207
  ref: ref
163
208
  }, children);
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "sideEffects": false
5
5
  }
@@ -43,10 +43,10 @@ const flexWrapStyles = css({
43
43
 
44
44
  /**
45
45
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
46
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
46
+ * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
47
47
  * @codegenId spacing
48
48
  * @codegenCommand yarn codegen-styles
49
- * @codegenParams ["space"]
49
+ * @codegenParams ["space", "rowSpace"]
50
50
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
51
51
  */
52
52
  const spaceMap = {
@@ -93,6 +93,50 @@ const spaceMap = {
93
93
  gap: "var(--ds-space-1000, 80px)"
94
94
  })
95
95
  };
96
+ const rowSpaceMap = {
97
+ '0': css({
98
+ rowGap: "var(--ds-space-0, 0px)"
99
+ }),
100
+ '025': css({
101
+ rowGap: "var(--ds-space-025, 2px)"
102
+ }),
103
+ '050': css({
104
+ rowGap: "var(--ds-space-050, 4px)"
105
+ }),
106
+ '075': css({
107
+ rowGap: "var(--ds-space-075, 6px)"
108
+ }),
109
+ '100': css({
110
+ rowGap: "var(--ds-space-100, 8px)"
111
+ }),
112
+ '150': css({
113
+ rowGap: "var(--ds-space-150, 12px)"
114
+ }),
115
+ '200': css({
116
+ rowGap: "var(--ds-space-200, 16px)"
117
+ }),
118
+ '250': css({
119
+ rowGap: "var(--ds-space-250, 20px)"
120
+ }),
121
+ '300': css({
122
+ rowGap: "var(--ds-space-300, 24px)"
123
+ }),
124
+ '400': css({
125
+ rowGap: "var(--ds-space-400, 32px)"
126
+ }),
127
+ '500': css({
128
+ rowGap: "var(--ds-space-500, 40px)"
129
+ }),
130
+ '600': css({
131
+ rowGap: "var(--ds-space-600, 48px)"
132
+ }),
133
+ '800': css({
134
+ rowGap: "var(--ds-space-800, 64px)"
135
+ }),
136
+ '1000': css({
137
+ rowGap: "var(--ds-space-1000, 80px)"
138
+ })
139
+ };
96
140
  /**
97
141
  * @codegenEnd
98
142
  */
@@ -137,6 +181,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
137
181
  spread,
138
182
  grow,
139
183
  space,
184
+ rowSpace,
140
185
  separator,
141
186
  testId,
142
187
  children: rawChildren
@@ -149,7 +194,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
149
194
  }) : rawChildren;
150
195
  const justifyContent = spread || alignInline;
151
196
  return jsx("div", {
152
- css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
197
+ css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
153
198
  "data-testid": testId,
154
199
  ref: ref
155
200
  }, children);
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "sideEffects": false
5
5
  }
@@ -43,10 +43,10 @@ var flexWrapStyles = css({
43
43
 
44
44
  /**
45
45
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
46
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
46
+ * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
47
47
  * @codegenId spacing
48
48
  * @codegenCommand yarn codegen-styles
49
- * @codegenParams ["space"]
49
+ * @codegenParams ["space", "rowSpace"]
50
50
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
51
51
  */
52
52
  var spaceMap = {
@@ -93,6 +93,50 @@ var spaceMap = {
93
93
  gap: "var(--ds-space-1000, 80px)"
94
94
  })
95
95
  };
96
+ var rowSpaceMap = {
97
+ '0': css({
98
+ rowGap: "var(--ds-space-0, 0px)"
99
+ }),
100
+ '025': css({
101
+ rowGap: "var(--ds-space-025, 2px)"
102
+ }),
103
+ '050': css({
104
+ rowGap: "var(--ds-space-050, 4px)"
105
+ }),
106
+ '075': css({
107
+ rowGap: "var(--ds-space-075, 6px)"
108
+ }),
109
+ '100': css({
110
+ rowGap: "var(--ds-space-100, 8px)"
111
+ }),
112
+ '150': css({
113
+ rowGap: "var(--ds-space-150, 12px)"
114
+ }),
115
+ '200': css({
116
+ rowGap: "var(--ds-space-200, 16px)"
117
+ }),
118
+ '250': css({
119
+ rowGap: "var(--ds-space-250, 20px)"
120
+ }),
121
+ '300': css({
122
+ rowGap: "var(--ds-space-300, 24px)"
123
+ }),
124
+ '400': css({
125
+ rowGap: "var(--ds-space-400, 32px)"
126
+ }),
127
+ '500': css({
128
+ rowGap: "var(--ds-space-500, 40px)"
129
+ }),
130
+ '600': css({
131
+ rowGap: "var(--ds-space-600, 48px)"
132
+ }),
133
+ '800': css({
134
+ rowGap: "var(--ds-space-800, 64px)"
135
+ }),
136
+ '1000': css({
137
+ rowGap: "var(--ds-space-1000, 80px)"
138
+ })
139
+ };
96
140
  /**
97
141
  * @codegenEnd
98
142
  */
@@ -139,6 +183,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
139
183
  spread = _ref2.spread,
140
184
  grow = _ref2.grow,
141
185
  space = _ref2.space,
186
+ rowSpace = _ref2.rowSpace,
142
187
  separator = _ref2.separator,
143
188
  testId = _ref2.testId,
144
189
  rawChildren = _ref2.children;
@@ -150,7 +195,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
150
195
  }) : rawChildren;
151
196
  var justifyContent = spread || alignInline;
152
197
  return jsx("div", {
153
- css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
198
+ css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
154
199
  "data-testid": testId,
155
200
  ref: ref
156
201
  }, children);
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "sideEffects": false
5
5
  }
@@ -25,6 +25,11 @@ export interface InlineProps {
25
25
  * Represents the space between each child.
26
26
  */
27
27
  space?: Space;
28
+ /**
29
+ * Represents the space between rows when content wraps.
30
+ * Used to override the `space` value in between rows.
31
+ */
32
+ rowSpace?: RowSpace;
28
33
  /**
29
34
  * Renders a separator string between each child.
30
35
  */
@@ -44,10 +49,10 @@ export declare type Spread = 'space-between';
44
49
  export declare type Grow = 'hug' | 'fill';
45
50
  /**
46
51
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
47
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
52
+ * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
48
53
  * @codegenId spacing
49
54
  * @codegenCommand yarn codegen-styles
50
- * @codegenParams ["space"]
55
+ * @codegenParams ["space", "rowSpace"]
51
56
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
52
57
  */
53
58
  declare const spaceMap: {
@@ -67,6 +72,23 @@ declare const spaceMap: {
67
72
  readonly '1000': import("@emotion/react").SerializedStyles;
68
73
  };
69
74
  export declare type Space = keyof typeof spaceMap;
75
+ declare const rowSpaceMap: {
76
+ readonly '0': import("@emotion/react").SerializedStyles;
77
+ readonly '025': import("@emotion/react").SerializedStyles;
78
+ readonly '050': import("@emotion/react").SerializedStyles;
79
+ readonly '075': import("@emotion/react").SerializedStyles;
80
+ readonly '100': import("@emotion/react").SerializedStyles;
81
+ readonly '150': import("@emotion/react").SerializedStyles;
82
+ readonly '200': import("@emotion/react").SerializedStyles;
83
+ readonly '250': import("@emotion/react").SerializedStyles;
84
+ readonly '300': import("@emotion/react").SerializedStyles;
85
+ readonly '400': import("@emotion/react").SerializedStyles;
86
+ readonly '500': import("@emotion/react").SerializedStyles;
87
+ readonly '600': import("@emotion/react").SerializedStyles;
88
+ readonly '800': import("@emotion/react").SerializedStyles;
89
+ readonly '1000': import("@emotion/react").SerializedStyles;
90
+ };
91
+ export declare type RowSpace = keyof typeof rowSpaceMap;
70
92
  /**
71
93
  * __Inline__
72
94
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
package/report.api.md CHANGED
@@ -365,6 +365,7 @@ export interface InlineProps {
365
365
  alignInline?: AlignInline;
366
366
  children: ReactNode;
367
367
  grow?: Grow;
368
+ rowSpace?: RowSpace;
368
369
  separator?: string;
369
370
  shouldWrap?: boolean;
370
371
  space?: Space;
@@ -482,6 +483,27 @@ type PublicBoxPropsBase = {
482
483
  // @public
483
484
  type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
484
485
 
486
+ // @public (undocumented)
487
+ type RowSpace = keyof typeof rowSpaceMap;
488
+
489
+ // @public (undocumented)
490
+ const rowSpaceMap: {
491
+ readonly '0': SerializedStyles;
492
+ readonly '025': SerializedStyles;
493
+ readonly '050': SerializedStyles;
494
+ readonly '075': SerializedStyles;
495
+ readonly '100': SerializedStyles;
496
+ readonly '150': SerializedStyles;
497
+ readonly '200': SerializedStyles;
498
+ readonly '250': SerializedStyles;
499
+ readonly '300': SerializedStyles;
500
+ readonly '400': SerializedStyles;
501
+ readonly '500': SerializedStyles;
502
+ readonly '600': SerializedStyles;
503
+ readonly '800': SerializedStyles;
504
+ readonly '1000': SerializedStyles;
505
+ };
506
+
485
507
  // @public (undocumented)
486
508
  type Shadow = keyof typeof shadowMap;
487
509
 
@@ -10,6 +10,7 @@ const spacingProperties: Record<
10
10
  {
11
11
  cssProperties: readonly string[];
12
12
  responsiveOutput?: boolean;
13
+ propNameFormatter?: (propName: string) => string;
13
14
  }
14
15
  > = {
15
16
  padding: {
@@ -24,17 +25,13 @@ const spacingProperties: Record<
24
25
  ],
25
26
  responsiveOutput: true,
26
27
  },
27
- gap: {
28
- cssProperties: ['gap'],
29
- },
30
28
  space: {
31
29
  cssProperties: ['gap'],
30
+ propNameFormatter: tokenName => tokenName.replace(spacingTokenPrefix, ''),
32
31
  },
33
- columnGap: {
34
- cssProperties: ['columnGap'],
35
- },
36
- rowGap: {
32
+ rowSpace: {
37
33
  cssProperties: ['rowGap'],
34
+ propNameFormatter: tokenName => tokenName.replace(spacingTokenPrefix, ''),
38
35
  },
39
36
  } as const;
40
37
 
@@ -55,7 +52,7 @@ export const createSpacingStylesFromTemplate = (
55
52
  throw new Error(`[codegen] Unknown option found "${spacingProperty}"`);
56
53
  }
57
54
 
58
- const { cssProperties, responsiveOutput } =
55
+ const { cssProperties, responsiveOutput, propNameFormatter } =
59
56
  spacingProperties[spacingProperty]!;
60
57
 
61
58
  return (
@@ -65,10 +62,9 @@ const ${spacingProperty}Map = {
65
62
  ${activeTokens
66
63
  .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
67
64
  .map(token => {
68
- const propName =
69
- spacingProperty === 'space'
70
- ? token.name.replace(spacingTokenPrefix, '')
71
- : token.name;
65
+ const propName = propNameFormatter
66
+ ? propNameFormatter(token.name)
67
+ : token.name;
72
68
 
73
69
  // a responsive output simply prints out a mapping of tokens
74
70
  if (responsiveOutput) {
@@ -301,6 +301,7 @@ export interface InlineProps {
301
301
  alignInline?: AlignInline;
302
302
  children: ReactNode;
303
303
  grow?: Grow;
304
+ rowSpace?: RowSpace;
304
305
  separator?: string;
305
306
  shouldWrap?: boolean;
306
307
  space?: Space;
@@ -418,6 +419,27 @@ type PublicBoxPropsBase = {
418
419
  // @public
419
420
  type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
420
421
 
422
+ // @public (undocumented)
423
+ type RowSpace = keyof typeof rowSpaceMap;
424
+
425
+ // @public (undocumented)
426
+ const rowSpaceMap: {
427
+ readonly '0': SerializedStyles;
428
+ readonly '025': SerializedStyles;
429
+ readonly '050': SerializedStyles;
430
+ readonly '075': SerializedStyles;
431
+ readonly '100': SerializedStyles;
432
+ readonly '150': SerializedStyles;
433
+ readonly '200': SerializedStyles;
434
+ readonly '250': SerializedStyles;
435
+ readonly '300': SerializedStyles;
436
+ readonly '400': SerializedStyles;
437
+ readonly '500': SerializedStyles;
438
+ readonly '600': SerializedStyles;
439
+ readonly '800': SerializedStyles;
440
+ readonly '1000': SerializedStyles;
441
+ };
442
+
421
443
  // @public (undocumented)
422
444
  type Shadow = keyof typeof shadowMap;
423
445