@atlaskit/primitives 10.0.0 → 11.0.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +77 -15
  2. package/dist/cjs/components/anchor.js +1 -1
  3. package/dist/cjs/components/pressable.js +1 -1
  4. package/dist/cjs/xcss/style-maps.partial.js +2 -0
  5. package/dist/es2019/components/anchor.js +1 -1
  6. package/dist/es2019/components/pressable.js +1 -1
  7. package/dist/es2019/xcss/style-maps.partial.js +2 -0
  8. package/dist/esm/components/anchor.js +1 -1
  9. package/dist/esm/components/pressable.js +1 -1
  10. package/dist/esm/xcss/style-maps.partial.js +2 -0
  11. package/dist/types/xcss/style-maps.partial.d.ts +26 -24
  12. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +26 -24
  13. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,75 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 11.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#119014](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119014)
8
+ [`80c46fcb18957`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80c46fcb18957) -
9
+ Increased type safety for `xcss`. In general, non-token values for the following properties are no
10
+ longer allowed:
11
+
12
+ - `margin`
13
+ - `marginBlock`
14
+ - `marginBlockEnd`
15
+ - `marginBlockStart`
16
+ - `marginBottom`
17
+ - `marginInline`
18
+ - `marginInlineEnd`
19
+ - `marginInlineStart`
20
+ - `marginLeft`
21
+ - `marginRight`
22
+ - `marginTop`
23
+ - `paddingBottom`
24
+ - `paddingLeft`
25
+ - `paddingRight`
26
+ - `paddingTop`
27
+
28
+ Note: Logical properties for `padding`, e.g. `paddingInline`, already prohibit non-token values.
29
+
30
+ For example:
31
+
32
+ ```typescript
33
+ const styles = xcss({
34
+ padding: '8px', // <-- Type Error
35
+ ^^^^^
36
+ });
37
+ ```
38
+
39
+ A few additional non-token values are still accepted:
40
+
41
+ - `margin`: `'0 auto'` | `'auto'` | `'0'`
42
+ - `marginBlock`: `'auto'` | `'0'`
43
+ - `marginBlockEnd`: `'auto'` | `'0'`
44
+ - `marginBlockStart`: `'auto'` | `'0'`
45
+ - `marginBottom`: `'auto'` | `'0'`
46
+ - `marginInline`: `'auto'` | `'0'`
47
+ - `marginInlineEnd`: `'auto'` | `'0'`
48
+ - `marginInlineStart`: `'auto'` | `'0'`
49
+ - `marginLeft`: `'auto'` | `'0'`
50
+ - `marginRight`: `'auto'` | `'0'`
51
+ - `marginTop`: `'auto'` | `'0'`
52
+ - `paddingBlock`: `'0'`
53
+ - `paddingBlockEnd`: `'0'`
54
+ - `paddingBlockStart`: `'0'`
55
+ - `paddingBottom`: `'0'`
56
+ - `paddingInline`: `'0'`
57
+ - `paddingInlineEnd`: `'0'`
58
+ - `paddingInlineStart`: `'0'`
59
+ - `paddingLeft`: `'0'`
60
+ - `paddingRight`: `'0'`
61
+ - `paddingTop`: `'0'`
62
+
63
+ as well as global CSS properties: `'inherit'` | `'initial'` | `'revert'` | `'revert-layer'` |
64
+ `'unset'`
65
+
66
+ ## 10.1.0
67
+
68
+ ### Minor Changes
69
+
70
+ - [`b78fad249a1e7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b78fad249a1e7) -
71
+ Allow Negative Spaces in OutlineOffset
72
+
3
73
  ## 10.0.0
4
74
 
5
75
  ### Major Changes
@@ -74,43 +144,35 @@
74
144
 
75
145
  **Before migration**
76
146
 
77
- ```
147
+ ```tsx
78
148
  import { Box, xcss } from '@atlaskit/primitives';
79
149
  import FocusRing from '@atlaskit/focus-ring';
80
150
 
81
151
  const buttonStyles = xcss({
82
152
  cursor: 'pointer',
83
- backgroundColor: 'color.background.brand.bold'
153
+ backgroundColor: 'color.background.brand.bold',
84
154
  });
85
155
 
86
-
87
156
  const MyApp = () => (
88
157
  <FocusRing>
89
- <Box
90
- as="button"
91
- xcss={buttonStyles}
92
- disabled={isDisabled}
93
- >
158
+ <Box as="button" xcss={buttonStyles} disabled={isDisabled}>
94
159
  Hello
95
160
  </Box>
96
161
  </FocusRing>
97
- )
162
+ );
98
163
  ```
99
164
 
100
165
  **After migration**
101
166
 
102
- ```
167
+ ```tsx
103
168
  import { Pressable, xcss } from '@atlaskit/primitives';
104
169
 
105
170
  const buttonStyles = xcss({
106
- backgroundColor: 'color.background.brand.bold'
171
+ backgroundColor: 'color.background.brand.bold',
107
172
  });
108
173
 
109
174
  const MyApp = () => (
110
- <Pressable
111
- xcss={buttonStyles}
112
- isDisabled={isDisabled}
113
- >
175
+ <Pressable xcss={buttonStyles} isDisabled={isDisabled}>
114
176
  Hello
115
177
  </Pressable>
116
178
  );
package/dist/cjs/components/anchor.js CHANGED
@@ -103,7 +103,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
103
103
  action: 'clicked',
104
104
  componentName: componentName || 'Anchor',
105
105
  packageName: "@atlaskit/primitives",
106
- packageVersion: "10.0.0",
106
+ packageVersion: "11.0.0",
107
107
  analyticsData: analyticsContext,
108
108
  actionSubject: 'link'
109
109
  });
package/dist/cjs/components/pressable.js CHANGED
@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
95
95
  action: 'clicked',
96
96
  componentName: componentName || 'Pressable',
97
97
  packageName: "@atlaskit/primitives",
98
- packageVersion: "10.0.0",
98
+ packageVersion: "11.0.0",
99
99
  analyticsData: analyticsContext,
100
100
  actionSubject: 'button'
101
101
  });
package/dist/cjs/xcss/style-maps.partial.js CHANGED
@@ -530,6 +530,8 @@ var fontFamilyMap = exports.fontFamilyMap = {
530
530
  * @codegenEnd
531
531
  */
532
532
 
533
+ // Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
534
+
533
535
  // Generate maps for Box props. backgroundColor, padding, etc
534
536
  var spacingProperties = [
535
537
  // Used by Box
package/dist/es2019/components/anchor.js CHANGED
@@ -93,7 +93,7 @@ const AnchorNoRef = ({
93
93
  action: 'clicked',
94
94
  componentName: componentName || 'Anchor',
95
95
  packageName: "@atlaskit/primitives",
96
- packageVersion: "10.0.0",
96
+ packageVersion: "11.0.0",
97
97
  analyticsData: analyticsContext,
98
98
  actionSubject: 'link'
99
99
  });
package/dist/es2019/components/pressable.js CHANGED
@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
85
85
  action: 'clicked',
86
86
  componentName: componentName || 'Pressable',
87
87
  packageName: "@atlaskit/primitives",
88
- packageVersion: "10.0.0",
88
+ packageVersion: "11.0.0",
89
89
  analyticsData: analyticsContext,
90
90
  actionSubject: 'button'
91
91
  });
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -525,6 +525,8 @@ export const fontFamilyMap = {
525
525
  * @codegenEnd
526
526
  */
527
527
 
528
+ // Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
529
+
528
530
  // Generate maps for Box props. backgroundColor, padding, etc
529
531
  const spacingProperties = [
530
532
  // Used by Box
package/dist/esm/components/anchor.js CHANGED
@@ -97,7 +97,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
97
97
  action: 'clicked',
98
98
  componentName: componentName || 'Anchor',
99
99
  packageName: "@atlaskit/primitives",
100
- packageVersion: "10.0.0",
100
+ packageVersion: "11.0.0",
101
101
  analyticsData: analyticsContext,
102
102
  actionSubject: 'link'
103
103
  });
package/dist/esm/components/pressable.js CHANGED
@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
89
89
  action: 'clicked',
90
90
  componentName: componentName || 'Pressable',
91
91
  packageName: "@atlaskit/primitives",
92
- packageVersion: "10.0.0",
92
+ packageVersion: "11.0.0",
93
93
  analyticsData: analyticsContext,
94
94
  actionSubject: 'button'
95
95
  });
package/dist/esm/xcss/style-maps.partial.js CHANGED
@@ -525,6 +525,8 @@ export var fontFamilyMap = {
525
525
  * @codegenEnd
526
526
  */
527
527
 
528
+ // Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
529
+
528
530
  // Generate maps for Box props. backgroundColor, padding, etc
529
531
  var spacingProperties = [
530
532
  // Used by Box
package/dist/types/xcss/style-maps.partial.d.ts CHANGED
@@ -550,7 +550,9 @@ export type FontFamily = keyof typeof fontFamilyMap;
550
550
  /**
551
551
  * @codegenEnd
552
552
  */
553
- type MarginSpace = AllSpace | 'auto';
553
+ type MarginSpace = AllSpace | 'auto' | '0';
554
+ type PaddingSpace = Space | '0';
555
+ type GlobalValue = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
554
556
  type AutoComplete<T extends string> = T | Omit<string, T>;
555
557
  export type TokenisedProps = {
556
558
  backgroundColor?: BackgroundColor;
@@ -601,17 +603,17 @@ export type TokenisedProps = {
601
603
  insetInlineEnd?: AutoComplete<AllSpace>;
602
604
  insetInlineStart?: AutoComplete<AllSpace>;
603
605
  left?: AutoComplete<AllSpace>;
604
- margin?: AutoComplete<MarginSpace>;
605
- marginBlock?: AutoComplete<MarginSpace>;
606
- marginBlockEnd?: AutoComplete<MarginSpace>;
607
- marginBlockStart?: AutoComplete<MarginSpace>;
608
- marginBottom?: AutoComplete<MarginSpace>;
609
- marginInline?: AutoComplete<MarginSpace>;
610
- marginInlineEnd?: AutoComplete<MarginSpace>;
611
- marginInlineStart?: AutoComplete<MarginSpace>;
612
- marginLeft?: AutoComplete<MarginSpace>;
613
- marginRight?: AutoComplete<MarginSpace>;
614
- marginTop?: AutoComplete<MarginSpace>;
606
+ margin?: MarginSpace | '0 auto' | GlobalValue;
607
+ marginBlock?: MarginSpace | GlobalValue;
608
+ marginInline?: MarginSpace | GlobalValue;
609
+ marginBlockEnd?: MarginSpace | GlobalValue;
610
+ marginBlockStart?: MarginSpace | GlobalValue;
611
+ marginBottom?: MarginSpace | GlobalValue;
612
+ marginInlineEnd?: MarginSpace | GlobalValue;
613
+ marginInlineStart?: MarginSpace | GlobalValue;
614
+ marginLeft?: MarginSpace | GlobalValue;
615
+ marginRight?: MarginSpace | GlobalValue;
616
+ marginTop?: MarginSpace | GlobalValue;
615
617
  maxBlockSize?: Dimension | string;
616
618
  maxHeight?: Dimension | string;
617
619
  maxInlineSize?: Dimension | string;
@@ -622,19 +624,19 @@ export type TokenisedProps = {
622
624
  minWidth?: Dimension | string;
623
625
  opacity?: AutoComplete<Opacity> | number;
624
626
  outlineColor?: BorderColor;
625
- outlineOffset?: Space;
627
+ outlineOffset?: AllSpace;
626
628
  outlineWidth?: BorderWidth | string;
627
- padding?: Space;
628
- paddingBlock?: Space;
629
- paddingBlockEnd?: Space;
630
- paddingBlockStart?: Space;
631
- paddingBottom?: AutoComplete<Space>;
632
- paddingInline?: Space;
633
- paddingInlineEnd?: Space;
634
- paddingInlineStart?: Space;
635
- paddingLeft?: AutoComplete<Space>;
636
- paddingRight?: AutoComplete<Space>;
637
- paddingTop?: AutoComplete<Space>;
629
+ padding?: PaddingSpace | GlobalValue;
630
+ paddingBlock?: PaddingSpace | GlobalValue;
631
+ paddingBlockEnd?: PaddingSpace | GlobalValue;
632
+ paddingBlockStart?: PaddingSpace | GlobalValue;
633
+ paddingBottom?: PaddingSpace | GlobalValue;
634
+ paddingInline?: PaddingSpace | GlobalValue;
635
+ paddingInlineEnd?: PaddingSpace | GlobalValue;
636
+ paddingInlineStart?: PaddingSpace | GlobalValue;
637
+ paddingLeft?: PaddingSpace | GlobalValue;
638
+ paddingRight?: PaddingSpace | GlobalValue;
639
+ paddingTop?: PaddingSpace | GlobalValue;
638
640
  right?: AutoComplete<AllSpace>;
639
641
  rowGap?: Space;
640
642
  top?: AutoComplete<AllSpace>;
package/dist/types-ts4.5/xcss/style-maps.partial.d.ts CHANGED
@@ -550,7 +550,9 @@ export type FontFamily = keyof typeof fontFamilyMap;
550
550
  /**
551
551
  * @codegenEnd
552
552
  */
553
- type MarginSpace = AllSpace | 'auto';
553
+ type MarginSpace = AllSpace | 'auto' | '0';
554
+ type PaddingSpace = Space | '0';
555
+ type GlobalValue = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
554
556
  type AutoComplete<T extends string> = T | Omit<string, T>;
555
557
  export type TokenisedProps = {
556
558
  backgroundColor?: BackgroundColor;
@@ -601,17 +603,17 @@ export type TokenisedProps = {
601
603
  insetInlineEnd?: AutoComplete<AllSpace>;
602
604
  insetInlineStart?: AutoComplete<AllSpace>;
603
605
  left?: AutoComplete<AllSpace>;
604
- margin?: AutoComplete<MarginSpace>;
605
- marginBlock?: AutoComplete<MarginSpace>;
606
- marginBlockEnd?: AutoComplete<MarginSpace>;
607
- marginBlockStart?: AutoComplete<MarginSpace>;
608
- marginBottom?: AutoComplete<MarginSpace>;
609
- marginInline?: AutoComplete<MarginSpace>;
610
- marginInlineEnd?: AutoComplete<MarginSpace>;
611
- marginInlineStart?: AutoComplete<MarginSpace>;
612
- marginLeft?: AutoComplete<MarginSpace>;
613
- marginRight?: AutoComplete<MarginSpace>;
614
- marginTop?: AutoComplete<MarginSpace>;
606
+ margin?: MarginSpace | '0 auto' | GlobalValue;
607
+ marginBlock?: MarginSpace | GlobalValue;
608
+ marginInline?: MarginSpace | GlobalValue;
609
+ marginBlockEnd?: MarginSpace | GlobalValue;
610
+ marginBlockStart?: MarginSpace | GlobalValue;
611
+ marginBottom?: MarginSpace | GlobalValue;
612
+ marginInlineEnd?: MarginSpace | GlobalValue;
613
+ marginInlineStart?: MarginSpace | GlobalValue;
614
+ marginLeft?: MarginSpace | GlobalValue;
615
+ marginRight?: MarginSpace | GlobalValue;
616
+ marginTop?: MarginSpace | GlobalValue;
615
617
  maxBlockSize?: Dimension | string;
616
618
  maxHeight?: Dimension | string;
617
619
  maxInlineSize?: Dimension | string;
@@ -622,19 +624,19 @@ export type TokenisedProps = {
622
624
  minWidth?: Dimension | string;
623
625
  opacity?: AutoComplete<Opacity> | number;
624
626
  outlineColor?: BorderColor;
625
- outlineOffset?: Space;
627
+ outlineOffset?: AllSpace;
626
628
  outlineWidth?: BorderWidth | string;
627
- padding?: Space;
628
- paddingBlock?: Space;
629
- paddingBlockEnd?: Space;
630
- paddingBlockStart?: Space;
631
- paddingBottom?: AutoComplete<Space>;
632
- paddingInline?: Space;
633
- paddingInlineEnd?: Space;
634
- paddingInlineStart?: Space;
635
- paddingLeft?: AutoComplete<Space>;
636
- paddingRight?: AutoComplete<Space>;
637
- paddingTop?: AutoComplete<Space>;
629
+ padding?: PaddingSpace | GlobalValue;
630
+ paddingBlock?: PaddingSpace | GlobalValue;
631
+ paddingBlockEnd?: PaddingSpace | GlobalValue;
632
+ paddingBlockStart?: PaddingSpace | GlobalValue;
633
+ paddingBottom?: PaddingSpace | GlobalValue;
634
+ paddingInline?: PaddingSpace | GlobalValue;
635
+ paddingInlineEnd?: PaddingSpace | GlobalValue;
636
+ paddingInlineStart?: PaddingSpace | GlobalValue;
637
+ paddingLeft?: PaddingSpace | GlobalValue;
638
+ paddingRight?: PaddingSpace | GlobalValue;
639
+ paddingTop?: PaddingSpace | GlobalValue;
638
640
  right?: AutoComplete<AllSpace>;
639
641
  rowGap?: Space;
640
642
  top?: AutoComplete<AllSpace>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "10.0.0",
3
+ "version": "11.0.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"