@atlaskit/primitives 10.1.0 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @atlaskit/primitives
 
+## 11.0.0
+
+### Major Changes
+
+- [#119014](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119014)
+  [`80c46fcb18957`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80c46fcb18957) -
+  Increased type safety for `xcss`. In general, non-token values for the following properties are no
+  longer allowed:
+
+  - `margin`
+  - `marginBlock`
+  - `marginBlockEnd`
+  - `marginBlockStart`
+  - `marginBottom`
+  - `marginInline`
+  - `marginInlineEnd`
+  - `marginInlineStart`
+  - `marginLeft`
+  - `marginRight`
+  - `marginTop`
+  - `paddingBottom`
+  - `paddingLeft`
+  - `paddingRight`
+  - `paddingTop`
+
+  Note: Logical properties for `padding`, e.g. `paddingInline`, already prohibit non-token values.
+
+  For example:
+
+  ```typescript
+  const styles = xcss({
+    padding: '8px', //  <-- Type Error
+             ^^^^^
+  });
+  ```
+
+  A few additional non-token values are still accepted:
+
+  - `margin`: `'0 auto'` | `'auto'` | `'0'`
+  - `marginBlock`: `'auto'` | `'0'`
+  - `marginBlockEnd`: `'auto'` | `'0'`
+  - `marginBlockStart`: `'auto'` | `'0'`
+  - `marginBottom`: `'auto'` | `'0'`
+  - `marginInline`: `'auto'` | `'0'`
+  - `marginInlineEnd`: `'auto'` | `'0'`
+  - `marginInlineStart`: `'auto'` | `'0'`
+  - `marginLeft`: `'auto'` | `'0'`
+  - `marginRight`: `'auto'` | `'0'`
+  - `marginTop`: `'auto'` | `'0'`
+  - `paddingBlock`: `'0'`
+  - `paddingBlockEnd`: `'0'`
+  - `paddingBlockStart`: `'0'`
+  - `paddingBottom`: `'0'`
+  - `paddingInline`: `'0'`
+  - `paddingInlineEnd`: `'0'`
+  - `paddingInlineStart`: `'0'`
+  - `paddingLeft`: `'0'`
+  - `paddingRight`: `'0'`
+  - `paddingTop`: `'0'`
+
+  as well as global CSS properties: `'inherit'` | `'initial'` | `'revert'` | `'revert-layer'` |
+  `'unset'`
+
 ## 10.1.0
 
 ### Minor Changes

package/dist/cjs/components/anchor.js

@@ -103,7 +103,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "10.1.0",
+    packageVersion: "11.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/pressable.js

@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "10.1.0",
+    packageVersion: "11.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/xcss/style-maps.partial.js

@@ -530,6 +530,8 @@ var fontFamilyMap = exports.fontFamilyMap = {
  * @codegenEnd
  */
 
+// Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
+
 // Generate maps for Box props. backgroundColor, padding, etc
 var spacingProperties = [
 // Used by Box

package/dist/es2019/components/anchor.js

@@ -93,7 +93,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "10.1.0",
+    packageVersion: "11.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "10.1.0",
+    packageVersion: "11.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/xcss/style-maps.partial.js

@@ -525,6 +525,8 @@ export const fontFamilyMap = {
  * @codegenEnd
  */
 
+// Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
+
 // Generate maps for Box props. backgroundColor, padding, etc
 const spacingProperties = [
 // Used by Box

package/dist/esm/components/anchor.js

@@ -97,7 +97,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "10.1.0",
+    packageVersion: "11.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/pressable.js

@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "10.1.0",
+    packageVersion: "11.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/xcss/style-maps.partial.js

@@ -525,6 +525,8 @@ export var fontFamilyMap = {
  * @codegenEnd
  */
 
+// Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
+
 // Generate maps for Box props. backgroundColor, padding, etc
 var spacingProperties = [
 // Used by Box

package/dist/types/xcss/style-maps.partial.d.ts

@@ -550,7 +550,9 @@ export type FontFamily = keyof typeof fontFamilyMap;
 /**
  * @codegenEnd
  */
-type MarginSpace = AllSpace | 'auto';
+type MarginSpace = AllSpace | 'auto' | '0';
+type PaddingSpace = Space | '0';
+type GlobalValue = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
 type AutoComplete<T extends string> = T | Omit<string, T>;
 export type TokenisedProps = {
     backgroundColor?: BackgroundColor;
@@ -601,17 +603,17 @@ export type TokenisedProps = {
     insetInlineEnd?: AutoComplete<AllSpace>;
     insetInlineStart?: AutoComplete<AllSpace>;
     left?: AutoComplete<AllSpace>;
-    margin?: AutoComplete<MarginSpace>;
-    marginBlock?: AutoComplete<MarginSpace>;
-    marginBlockEnd?: AutoComplete<MarginSpace>;
-    marginBlockStart?: AutoComplete<MarginSpace>;
-    marginBottom?: AutoComplete<MarginSpace>;
-    marginInline?: AutoComplete<MarginSpace>;
-    marginInlineEnd?: AutoComplete<MarginSpace>;
-    marginInlineStart?: AutoComplete<MarginSpace>;
-    marginLeft?: AutoComplete<MarginSpace>;
-    marginRight?: AutoComplete<MarginSpace>;
-    marginTop?: AutoComplete<MarginSpace>;
+    margin?: MarginSpace | '0 auto' | GlobalValue;
+    marginBlock?: MarginSpace | GlobalValue;
+    marginInline?: MarginSpace | GlobalValue;
+    marginBlockEnd?: MarginSpace | GlobalValue;
+    marginBlockStart?: MarginSpace | GlobalValue;
+    marginBottom?: MarginSpace | GlobalValue;
+    marginInlineEnd?: MarginSpace | GlobalValue;
+    marginInlineStart?: MarginSpace | GlobalValue;
+    marginLeft?: MarginSpace | GlobalValue;
+    marginRight?: MarginSpace | GlobalValue;
+    marginTop?: MarginSpace | GlobalValue;
     maxBlockSize?: Dimension | string;
     maxHeight?: Dimension | string;
     maxInlineSize?: Dimension | string;
@@ -624,17 +626,17 @@ export type TokenisedProps = {
     outlineColor?: BorderColor;
     outlineOffset?: AllSpace;
     outlineWidth?: BorderWidth | string;
-    padding?: Space;
-    paddingBlock?: Space;
-    paddingBlockEnd?: Space;
-    paddingBlockStart?: Space;
-    paddingBottom?: AutoComplete<Space>;
-    paddingInline?: Space;
-    paddingInlineEnd?: Space;
-    paddingInlineStart?: Space;
-    paddingLeft?: AutoComplete<Space>;
-    paddingRight?: AutoComplete<Space>;
-    paddingTop?: AutoComplete<Space>;
+    padding?: PaddingSpace | GlobalValue;
+    paddingBlock?: PaddingSpace | GlobalValue;
+    paddingBlockEnd?: PaddingSpace | GlobalValue;
+    paddingBlockStart?: PaddingSpace | GlobalValue;
+    paddingBottom?: PaddingSpace | GlobalValue;
+    paddingInline?: PaddingSpace | GlobalValue;
+    paddingInlineEnd?: PaddingSpace | GlobalValue;
+    paddingInlineStart?: PaddingSpace | GlobalValue;
+    paddingLeft?: PaddingSpace | GlobalValue;
+    paddingRight?: PaddingSpace | GlobalValue;
+    paddingTop?: PaddingSpace | GlobalValue;
     right?: AutoComplete<AllSpace>;
     rowGap?: Space;
     top?: AutoComplete<AllSpace>;

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -550,7 +550,9 @@ export type FontFamily = keyof typeof fontFamilyMap;
 /**
  * @codegenEnd
  */
-type MarginSpace = AllSpace | 'auto';
+type MarginSpace = AllSpace | 'auto' | '0';
+type PaddingSpace = Space | '0';
+type GlobalValue = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
 type AutoComplete<T extends string> = T | Omit<string, T>;
 export type TokenisedProps = {
     backgroundColor?: BackgroundColor;
@@ -601,17 +603,17 @@ export type TokenisedProps = {
     insetInlineEnd?: AutoComplete<AllSpace>;
     insetInlineStart?: AutoComplete<AllSpace>;
     left?: AutoComplete<AllSpace>;
-    margin?: AutoComplete<MarginSpace>;
-    marginBlock?: AutoComplete<MarginSpace>;
-    marginBlockEnd?: AutoComplete<MarginSpace>;
-    marginBlockStart?: AutoComplete<MarginSpace>;
-    marginBottom?: AutoComplete<MarginSpace>;
-    marginInline?: AutoComplete<MarginSpace>;
-    marginInlineEnd?: AutoComplete<MarginSpace>;
-    marginInlineStart?: AutoComplete<MarginSpace>;
-    marginLeft?: AutoComplete<MarginSpace>;
-    marginRight?: AutoComplete<MarginSpace>;
-    marginTop?: AutoComplete<MarginSpace>;
+    margin?: MarginSpace | '0 auto' | GlobalValue;
+    marginBlock?: MarginSpace | GlobalValue;
+    marginInline?: MarginSpace | GlobalValue;
+    marginBlockEnd?: MarginSpace | GlobalValue;
+    marginBlockStart?: MarginSpace | GlobalValue;
+    marginBottom?: MarginSpace | GlobalValue;
+    marginInlineEnd?: MarginSpace | GlobalValue;
+    marginInlineStart?: MarginSpace | GlobalValue;
+    marginLeft?: MarginSpace | GlobalValue;
+    marginRight?: MarginSpace | GlobalValue;
+    marginTop?: MarginSpace | GlobalValue;
     maxBlockSize?: Dimension | string;
     maxHeight?: Dimension | string;
     maxInlineSize?: Dimension | string;
@@ -624,17 +626,17 @@ export type TokenisedProps = {
     outlineColor?: BorderColor;
     outlineOffset?: AllSpace;
     outlineWidth?: BorderWidth | string;
-    padding?: Space;
-    paddingBlock?: Space;
-    paddingBlockEnd?: Space;
-    paddingBlockStart?: Space;
-    paddingBottom?: AutoComplete<Space>;
-    paddingInline?: Space;
-    paddingInlineEnd?: Space;
-    paddingInlineStart?: Space;
-    paddingLeft?: AutoComplete<Space>;
-    paddingRight?: AutoComplete<Space>;
-    paddingTop?: AutoComplete<Space>;
+    padding?: PaddingSpace | GlobalValue;
+    paddingBlock?: PaddingSpace | GlobalValue;
+    paddingBlockEnd?: PaddingSpace | GlobalValue;
+    paddingBlockStart?: PaddingSpace | GlobalValue;
+    paddingBottom?: PaddingSpace | GlobalValue;
+    paddingInline?: PaddingSpace | GlobalValue;
+    paddingInlineEnd?: PaddingSpace | GlobalValue;
+    paddingInlineStart?: PaddingSpace | GlobalValue;
+    paddingLeft?: PaddingSpace | GlobalValue;
+    paddingRight?: PaddingSpace | GlobalValue;
+    paddingTop?: PaddingSpace | GlobalValue;
     right?: AutoComplete<AllSpace>;
     rowGap?: Space;
     top?: AutoComplete<AllSpace>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "10.1.0",
+	"version": "11.0.0",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"