@atlaskit/primitives 0.8.8 → 0.8.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 0.8.9
+
+### Patch Changes
+
+- [`da1727baf77`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da1727baf77) - Allow non tokenised values to be passed through for tokenisable properties like `padding`. Adds type hinting for zIndex CSS property.
+
 ## 0.8.8
 
 ### Patch Changes

package/constellation/box/examples.mdx

@@ -1,7 +1,38 @@
 ---
 title: Box
-description: Box primitive...
+description: Box is a primitive component that leverages the foundations of the Atlassian Design System.
 order: 0
 ---
 
-*Coming soon*
+import BoxBasic from '../../examples/constellation/box/basic';
+import BoxPadding from '../../examples/constellation/box/padding';
+import BoxBackgroundColor from '../../examples/constellation/box/background-color';
+import BoxXcss from '../../examples/constellation/box/xcss';
+
+## Basic
+
+Box is a general-purpose container with controlled use of design tokens. Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
+
+<Example Component={BoxBasic} packageName="@atlaskit/primitives/box" />
+
+## Padding
+
+Padding props can be used to access spacing design token and control internal layout. The following example demonstrates how each prop works individually:
+
+<Example Component={BoxPadding} packageName="@atlaskit/primitives/box" />
+
+*Note*: The nomenclature used by these props follows [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). It might be less intuitive at first but they are adequate to properly support different [writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) in our products.
+
+## Background color
+
+`Box` accepts a wide variety of background colors, referenced as semantic design tokens.
+
+<Example Component={BoxBackgroundColor} packageName="@atlaskit/primitives/box" />
+
+## xCSS
+
+Box also exposes an `xcss` prop. This prop can take `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xCSS takes most CSS properties, and when a token exists, the rule accepts that token as a value. 
+
+<Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
+
+For more information on xCSS, see the dedicated [xCSS](/components/primitives/xcss) documentation.

package/dist/cjs/internal/xcss.js

@@ -40,7 +40,6 @@ var tokensMap = {
   insetInline: _styleMaps.insetMap,
   insetInlineEnd: _styleMaps.insetMap,
   insetInlineStart: _styleMaps.insetMap,
-  layer: _styleMaps.layerMap,
   left: _styleMaps.dimensionMap,
   maxBlockSize: _styleMaps.dimensionMap,
   maxHeight: _styleMaps.dimensionMap,
@@ -68,7 +67,8 @@ var tokensMap = {
   right: _styleMaps.dimensionMap,
   rowGap: _styleMaps.spaceMap,
   top: _styleMaps.dimensionMap,
-  width: _styleMaps.dimensionMap
+  width: _styleMaps.dimensionMap,
+  zIndex: _styleMaps.layerMap
 };
 var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
 var isSafeEnvToThrow = function isSafeEnvToThrow() {
@@ -117,11 +117,8 @@ var transformStyles = function transformStyles(styleObj) {
     if (!tokenValue) {
       var message = "Invalid token alias: ".concat(value);
       (0, _warnOnce.default)(message);
-      if (isSafeEnvToThrow()) {
-        throw new Error(message);
-      }
     }
-    styleObj[key] = tokenValue;
+    styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
   });
   return styleObj;
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.8.8",
+	"version": "0.8.9",
 	"sideEffects": false
 }

package/dist/es2019/internal/xcss.js

@@ -29,7 +29,6 @@ const tokensMap = {
   insetInline: insetMap,
   insetInlineEnd: insetMap,
   insetInlineStart: insetMap,
-  layer: layerMap,
   left: dimensionMap,
   maxBlockSize: dimensionMap,
   maxHeight: dimensionMap,
@@ -57,7 +56,8 @@ const tokensMap = {
   right: dimensionMap,
   rowGap: spaceMap,
   top: dimensionMap,
-  width: dimensionMap
+  width: dimensionMap,
+  zIndex: layerMap
 };
 const uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
 const isSafeEnvToThrow = () => typeof process === 'object' && typeof process.env === 'object' && process.env.NODE_ENV !== 'production';
@@ -101,11 +101,8 @@ const transformStyles = styleObj => {
     if (!tokenValue) {
       const message = `Invalid token alias: ${value}`;
       warnOnce(message);
-      if (isSafeEnvToThrow()) {
-        throw new Error(message);
-      }
     }
-    styleObj[key] = tokenValue;
+    styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
   });
   return styleObj;
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.8.8",
+	"version": "0.8.9",
 	"sideEffects": false
 }

package/dist/esm/internal/xcss.js

@@ -31,7 +31,6 @@ var tokensMap = {
   insetInline: insetMap,
   insetInlineEnd: insetMap,
   insetInlineStart: insetMap,
-  layer: layerMap,
   left: dimensionMap,
   maxBlockSize: dimensionMap,
   maxHeight: dimensionMap,
@@ -59,7 +58,8 @@ var tokensMap = {
   right: dimensionMap,
   rowGap: spaceMap,
   top: dimensionMap,
-  width: dimensionMap
+  width: dimensionMap,
+  zIndex: layerMap
 };
 var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
 var isSafeEnvToThrow = function isSafeEnvToThrow() {
@@ -108,11 +108,8 @@ var transformStyles = function transformStyles(styleObj) {
     if (!tokenValue) {
       var message = "Invalid token alias: ".concat(value);
       warnOnce(message);
-      if (isSafeEnvToThrow()) {
-        throw new Error(message);
-      }
     }
-    styleObj[key] = tokenValue;
+    styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
   });
   return styleObj;
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.8.8",
+	"version": "0.8.9",
 	"sideEffects": false
 }

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

@@ -449,7 +449,6 @@ export declare type TokenisedProps = {
     insetInline?: InsetInline;
     insetInlineEnd?: InsetInlineEnd;
     insetInlineStart?: InsetInlineStart;
-    layer?: Layer;
     left?: Left;
     maxBlockSize?: MaxBlockSize;
     maxHeight?: MaxHeight;
@@ -474,6 +473,7 @@ export declare type TokenisedProps = {
     rowGap?: RowGap;
     top?: Top;
     width?: Width;
+    zIndex?: Layer;
 };
 declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap", "columnGap"];
 declare type SpacingProperty = typeof spacingProperties[number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -29,6 +29,15 @@
             "type": "alpha"
           }
         },
+        {
+          "title": "Box",
+          "folder": "box",
+          "slug": "primitives/box",
+          "id": "@atlaskit/primitives/box",
+          "status": {
+            "type": "alpha"
+          }
+        },
         {
           "title": "Inline",
           "folder": "inline",
@@ -87,8 +96,10 @@
     "@atlaskit/heading": "*",
     "@atlaskit/icon": "*",
     "@atlaskit/icon-object": "*",
+    "@atlaskit/logo": "*",
     "@atlaskit/lozenge": "*",
     "@atlaskit/radio": "^5.4.9",
+    "@atlaskit/range": "^7.0.4",
     "@atlaskit/ssr": "*",
     "@atlaskit/tag": "*",
     "@atlaskit/theme": "*",
@@ -96,6 +107,7 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.0.1",
+    "@atlassian/gemini-visual-regression": "^0.0.5",
     "@testing-library/react": "^12.1.5",
     "csstype": "^3.1.0",
     "prettier": "^2.7.0",

package/report.api.md

@@ -940,7 +940,6 @@ type TokenisedProps = {
   insetInline?: InsetInline;
   insetInlineEnd?: InsetInlineEnd;
   insetInlineStart?: InsetInlineStart;
-  layer?: Layer;
   left?: Left;
   maxBlockSize?: MaxBlockSize;
   maxHeight?: MaxHeight;
@@ -965,6 +964,7 @@ type TokenisedProps = {
   rowGap?: RowGap;
   top?: Top;
   width?: Width;
+  zIndex?: Layer;
 };
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -626,7 +626,6 @@ type TokenisedProps = {
     insetInline?: InsetInline;
     insetInlineEnd?: InsetInlineEnd;
     insetInlineStart?: InsetInlineStart;
-    layer?: Layer;
     left?: Left;
     maxBlockSize?: MaxBlockSize;
     maxHeight?: MaxHeight;
@@ -651,6 +650,7 @@ type TokenisedProps = {
     rowGap?: RowGap;
     top?: Top;
     width?: Width;
+    zIndex?: Layer;
 };
 
 // @public (undocumented)