@atlaskit/ds-explorations 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/ds-explorations
 
+## 1.3.0
+
+### Minor Changes
+
+- [`7d6e345cd63`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d6e345cd63) - Bump to account for bump in `@atlaskit/tokens`.
+
+## 1.2.2
+
+### Patch Changes
+
+- [`1dec7b39f7b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1dec7b39f7b) - - Children are only iterated over when divider prop is passed. There should be no behaviour change.
+  - Add `user-select: none;` to divider.
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/cjs/components/box.partial.js

@@ -110,6 +110,10 @@ var borderRadiusMap = {
     borderRadius: '8px'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 var flexDirectionMap = {
   column: (0, _react2.css)({
     flexDirection: 'column'
@@ -118,6 +122,10 @@ var flexDirectionMap = {
     flexDirection: 'row'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
     alignItems: 'center'
@@ -132,6 +140,10 @@ var flexAlignItemsMap = {
     alignItems: 'flex-end'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 var flexJustifyContentMap = {
   center: (0, _react2.css)({
     justifyContent: 'center'
@@ -180,201 +192,207 @@ var baseStyles = (0, _react2.css)({
 });
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
- * @codegenId spacing
+ * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
+ * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
+ * @codegenParams ["width", "height"]
  */
 
-var paddingMap = {
-  'scale.0': (0, _react2.css)({
-    padding: "var(--ds-scale-0, 0px)"
-  }),
-  'scale.025': (0, _react2.css)({
-    padding: "var(--ds-scale-025, 2px)"
-  }),
-  'scale.050': (0, _react2.css)({
-    padding: "var(--ds-scale-050, 4px)"
-  }),
-  'scale.075': (0, _react2.css)({
-    padding: "var(--ds-scale-075, 6px)"
+var widthMap = {
+  '100%': (0, _react2.css)({
+    width: '100%'
   }),
-  'scale.100': (0, _react2.css)({
-    padding: "var(--ds-scale-100, 8px)"
+  'size.100': (0, _react2.css)({
+    width: '16px'
   }),
-  'scale.150': (0, _react2.css)({
-    padding: "var(--ds-scale-150, 12px)"
+  'size.1000': (0, _react2.css)({
+    width: '192px'
   }),
-  'scale.200': (0, _react2.css)({
-    padding: "var(--ds-scale-200, 16px)"
+  'size.200': (0, _react2.css)({
+    width: '24px'
   }),
-  'scale.250': (0, _react2.css)({
-    padding: "var(--ds-scale-250, 20px)"
+  'size.300': (0, _react2.css)({
+    width: '32px'
   }),
-  'scale.300': (0, _react2.css)({
-    padding: "var(--ds-scale-300, 24px)"
+  'size.400': (0, _react2.css)({
+    width: '40px'
   }),
-  'scale.400': (0, _react2.css)({
-    padding: "var(--ds-scale-400, 32px)"
+  'size.500': (0, _react2.css)({
+    width: '48px'
   }),
-  'scale.500': (0, _react2.css)({
-    padding: "var(--ds-scale-500, 40px)"
-  }),
-  'scale.600': (0, _react2.css)({
-    padding: "var(--ds-scale-600, 48px)"
+  'size.600': (0, _react2.css)({
+    width: '96px'
   })
 };
-var paddingBlockMap = {
-  'scale.0': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-0, 0px)"
-  }),
-  'scale.025': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-025, 2px)"
-  }),
-  'scale.050': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-050, 4px)"
+var heightMap = {
+  '100%': (0, _react2.css)({
+    height: '100%'
   }),
-  'scale.075': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-075, 6px)"
+  'size.100': (0, _react2.css)({
+    height: '16px'
   }),
-  'scale.100': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-100, 8px)"
+  'size.1000': (0, _react2.css)({
+    height: '192px'
   }),
-  'scale.150': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-150, 12px)"
+  'size.200': (0, _react2.css)({
+    height: '24px'
   }),
-  'scale.200': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-200, 16px)"
-  }),
-  'scale.250': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-250, 20px)"
-  }),
-  'scale.300': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-300, 24px)"
+  'size.300': (0, _react2.css)({
+    height: '32px'
   }),
-  'scale.400': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-400, 32px)"
+  'size.400': (0, _react2.css)({
+    height: '40px'
   }),
-  'scale.500': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-500, 40px)"
+  'size.500': (0, _react2.css)({
+    height: '48px'
   }),
-  'scale.600': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-600, 48px)"
+  'size.600': (0, _react2.css)({
+    height: '96px'
   })
 };
-var paddingInlineMap = {
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::41980a62e387c13a99802814a0f33d26>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["padding", "paddingBlock", "paddingInline"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
+ */
+var paddingMap = {
   'scale.0': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-0, 0px)"
+    padding: "var(--ds-space-0, 0px)"
   }),
   'scale.025': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-025, 2px)"
+    padding: "var(--ds-space-025, 2px)"
   }),
   'scale.050': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-050, 4px)"
+    padding: "var(--ds-space-050, 4px)"
   }),
   'scale.075': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-075, 6px)"
+    padding: "var(--ds-space-075, 6px)"
   }),
   'scale.100': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-100, 8px)"
+    padding: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': (0, _react2.css)({
+    padding: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-150, 12px)"
+    padding: "var(--ds-space-150, 12px)"
   }),
   'scale.200': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-200, 16px)"
+    padding: "var(--ds-space-200, 16px)"
   }),
   'scale.250': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-250, 20px)"
+    padding: "var(--ds-space-250, 20px)"
   }),
   'scale.300': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-300, 24px)"
+    padding: "var(--ds-space-300, 24px)"
   }),
   'scale.400': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-400, 32px)"
+    padding: "var(--ds-space-400, 32px)"
   }),
   'scale.500': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-500, 40px)"
+    padding: "var(--ds-space-500, 40px)"
   }),
   'scale.600': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-600, 48px)"
+    padding: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': (0, _react2.css)({
+    padding: "var(--ds-space-800, 64px)"
   })
 };
-var widthMap = {
+var paddingBlockMap = {
   'scale.0': (0, _react2.css)({
-    width: "var(--ds-scale-0, 0px)"
+    paddingBlock: "var(--ds-space-0, 0px)"
   }),
   'scale.025': (0, _react2.css)({
-    width: "var(--ds-scale-025, 2px)"
+    paddingBlock: "var(--ds-space-025, 2px)"
   }),
   'scale.050': (0, _react2.css)({
-    width: "var(--ds-scale-050, 4px)"
+    paddingBlock: "var(--ds-space-050, 4px)"
   }),
   'scale.075': (0, _react2.css)({
-    width: "var(--ds-scale-075, 6px)"
+    paddingBlock: "var(--ds-space-075, 6px)"
   }),
   'scale.100': (0, _react2.css)({
-    width: "var(--ds-scale-100, 8px)"
+    paddingBlock: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': (0, _react2.css)({
-    width: "var(--ds-scale-150, 12px)"
+    paddingBlock: "var(--ds-space-150, 12px)"
   }),
   'scale.200': (0, _react2.css)({
-    width: "var(--ds-scale-200, 16px)"
+    paddingBlock: "var(--ds-space-200, 16px)"
   }),
   'scale.250': (0, _react2.css)({
-    width: "var(--ds-scale-250, 20px)"
+    paddingBlock: "var(--ds-space-250, 20px)"
   }),
   'scale.300': (0, _react2.css)({
-    width: "var(--ds-scale-300, 24px)"
+    paddingBlock: "var(--ds-space-300, 24px)"
   }),
   'scale.400': (0, _react2.css)({
-    width: "var(--ds-scale-400, 32px)"
+    paddingBlock: "var(--ds-space-400, 32px)"
   }),
   'scale.500': (0, _react2.css)({
-    width: "var(--ds-scale-500, 40px)"
+    paddingBlock: "var(--ds-space-500, 40px)"
   }),
   'scale.600': (0, _react2.css)({
-    width: "var(--ds-scale-600, 48px)"
+    paddingBlock: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-800, 64px)"
   })
 };
-var heightMap = {
+var paddingInlineMap = {
   'scale.0': (0, _react2.css)({
-    height: "var(--ds-scale-0, 0px)"
+    paddingInline: "var(--ds-space-0, 0px)"
   }),
   'scale.025': (0, _react2.css)({
-    height: "var(--ds-scale-025, 2px)"
+    paddingInline: "var(--ds-space-025, 2px)"
   }),
   'scale.050': (0, _react2.css)({
-    height: "var(--ds-scale-050, 4px)"
+    paddingInline: "var(--ds-space-050, 4px)"
   }),
   'scale.075': (0, _react2.css)({
-    height: "var(--ds-scale-075, 6px)"
+    paddingInline: "var(--ds-space-075, 6px)"
   }),
   'scale.100': (0, _react2.css)({
-    height: "var(--ds-scale-100, 8px)"
+    paddingInline: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': (0, _react2.css)({
+    paddingInline: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': (0, _react2.css)({
-    height: "var(--ds-scale-150, 12px)"
+    paddingInline: "var(--ds-space-150, 12px)"
   }),
   'scale.200': (0, _react2.css)({
-    height: "var(--ds-scale-200, 16px)"
+    paddingInline: "var(--ds-space-200, 16px)"
   }),
   'scale.250': (0, _react2.css)({
-    height: "var(--ds-scale-250, 20px)"
+    paddingInline: "var(--ds-space-250, 20px)"
   }),
   'scale.300': (0, _react2.css)({
-    height: "var(--ds-scale-300, 24px)"
+    paddingInline: "var(--ds-space-300, 24px)"
   }),
   'scale.400': (0, _react2.css)({
-    height: "var(--ds-scale-400, 32px)"
+    paddingInline: "var(--ds-space-400, 32px)"
   }),
   'scale.500': (0, _react2.css)({
-    height: "var(--ds-scale-500, 40px)"
+    paddingInline: "var(--ds-space-500, 40px)"
   }),
   'scale.600': (0, _react2.css)({
-    height: "var(--ds-scale-600, 48px)"
+    paddingInline: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': (0, _react2.css)({
+    paddingInline: "var(--ds-space-800, 64px)"
   })
 };
 

package/dist/cjs/components/inline.partial.js

@@ -60,7 +60,8 @@ var baseStyles = (0, _react2.css)({
 var dividerStyles = (0, _react2.css)({
   margin: '0 -2px',
   color: "var(--ds-text-subtle, #42526E)",
-  pointerEvents: 'none'
+  pointerEvents: 'none',
+  userSelect: 'none'
 });
 
 var Divider = function Divider(_ref) {
@@ -94,28 +95,26 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
       flexWrap = _ref2.flexWrap,
       divider = _ref2.divider,
       UNSAFE_style = _ref2.UNSAFE_style,
-      children = _ref2.children,
+      rawChildren = _ref2.children,
       testId = _ref2.testId;
   var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(Divider, null, divider) : divider;
-
-  var childrenArray = _react.Children.toArray(children).filter(Boolean);
-
+  var children = divider ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return (0, _react2.jsx)(_react.Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
+  }) : rawChildren;
   return (0, _react2.jsx)("div", {
     style: UNSAFE_style,
     css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
-  }, childrenArray.map(function (child, index) {
-    return (0, _react2.jsx)(_react.Fragment, {
-      key: index
-    }, divider && index > 0 ? dividerComponent : null, child);
-  }));
+  }, children);
 }));
 Inline.displayName = 'Inline';
 var _default = Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
+ * @codegen <<SignedSource::76168a57c8f10c9f325865d2189aa0ff>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
@@ -125,40 +124,46 @@ var _default = Inline;
 exports.default = _default;
 var columnGapMap = {
   'scale.0': (0, _react2.css)({
-    columnGap: "var(--ds-scale-0, 0px)"
+    columnGap: "var(--ds-space-0, 0px)"
   }),
   'scale.025': (0, _react2.css)({
-    columnGap: "var(--ds-scale-025, 2px)"
+    columnGap: "var(--ds-space-025, 2px)"
   }),
   'scale.050': (0, _react2.css)({
-    columnGap: "var(--ds-scale-050, 4px)"
+    columnGap: "var(--ds-space-050, 4px)"
   }),
   'scale.075': (0, _react2.css)({
-    columnGap: "var(--ds-scale-075, 6px)"
+    columnGap: "var(--ds-space-075, 6px)"
   }),
   'scale.100': (0, _react2.css)({
-    columnGap: "var(--ds-scale-100, 8px)"
+    columnGap: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': (0, _react2.css)({
+    columnGap: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': (0, _react2.css)({
-    columnGap: "var(--ds-scale-150, 12px)"
+    columnGap: "var(--ds-space-150, 12px)"
   }),
   'scale.200': (0, _react2.css)({
-    columnGap: "var(--ds-scale-200, 16px)"
+    columnGap: "var(--ds-space-200, 16px)"
   }),
   'scale.250': (0, _react2.css)({
-    columnGap: "var(--ds-scale-250, 20px)"
+    columnGap: "var(--ds-space-250, 20px)"
   }),
   'scale.300': (0, _react2.css)({
-    columnGap: "var(--ds-scale-300, 24px)"
+    columnGap: "var(--ds-space-300, 24px)"
   }),
   'scale.400': (0, _react2.css)({
-    columnGap: "var(--ds-scale-400, 32px)"
+    columnGap: "var(--ds-space-400, 32px)"
   }),
   'scale.500': (0, _react2.css)({
-    columnGap: "var(--ds-scale-500, 40px)"
+    columnGap: "var(--ds-space-500, 40px)"
   }),
   'scale.600': (0, _react2.css)({
-    columnGap: "var(--ds-scale-600, 48px)"
+    columnGap: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': (0, _react2.css)({
+    columnGap: "var(--ds-space-800, 64px)"
   })
 };
 /**

package/dist/cjs/components/stack.partial.js

@@ -84,7 +84,7 @@ Stack.displayName = 'Stack';
 var _default = Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
+ * @codegen <<SignedSource::2b10240c217de584b627a7e2f56d11a0>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
@@ -94,40 +94,46 @@ var _default = Stack;
 exports.default = _default;
 var rowGapMap = {
   'scale.0': (0, _react2.css)({
-    rowGap: "var(--ds-scale-0, 0px)"
+    rowGap: "var(--ds-space-0, 0px)"
   }),
   'scale.025': (0, _react2.css)({
-    rowGap: "var(--ds-scale-025, 2px)"
+    rowGap: "var(--ds-space-025, 2px)"
   }),
   'scale.050': (0, _react2.css)({
-    rowGap: "var(--ds-scale-050, 4px)"
+    rowGap: "var(--ds-space-050, 4px)"
   }),
   'scale.075': (0, _react2.css)({
-    rowGap: "var(--ds-scale-075, 6px)"
+    rowGap: "var(--ds-space-075, 6px)"
   }),
   'scale.100': (0, _react2.css)({
-    rowGap: "var(--ds-scale-100, 8px)"
+    rowGap: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': (0, _react2.css)({
+    rowGap: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': (0, _react2.css)({
-    rowGap: "var(--ds-scale-150, 12px)"
+    rowGap: "var(--ds-space-150, 12px)"
   }),
   'scale.200': (0, _react2.css)({
-    rowGap: "var(--ds-scale-200, 16px)"
+    rowGap: "var(--ds-space-200, 16px)"
   }),
   'scale.250': (0, _react2.css)({
-    rowGap: "var(--ds-scale-250, 20px)"
+    rowGap: "var(--ds-space-250, 20px)"
   }),
   'scale.300': (0, _react2.css)({
-    rowGap: "var(--ds-scale-300, 24px)"
+    rowGap: "var(--ds-space-300, 24px)"
   }),
   'scale.400': (0, _react2.css)({
-    rowGap: "var(--ds-scale-400, 32px)"
+    rowGap: "var(--ds-space-400, 32px)"
   }),
   'scale.500': (0, _react2.css)({
-    rowGap: "var(--ds-scale-500, 40px)"
+    rowGap: "var(--ds-space-500, 40px)"
   }),
   'scale.600': (0, _react2.css)({
-    rowGap: "var(--ds-scale-600, 48px)"
+    rowGap: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': (0, _react2.css)({
+    rowGap: "var(--ds-space-800, 64px)"
   })
 };
 /**

package/dist/cjs/internal/spacing-scale.js

@@ -8,10 +8,10 @@ exports.spacingScale = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Some artifact
+ * Internal codegen of the spacing scale values. Only used for internal examples.
  *
- * @codegen <<SignedSource::caecb926afa82b027fba396074de5c2c>>
+ * @codegen <<SignedSource::d351e41acd06f256fb46554409694f31>>
  * @codegenCommand yarn codegen-styles
  */
-var spacingScale = ['scale.0', 'scale.025', 'scale.050', 'scale.075', 'scale.100', 'scale.150', 'scale.200', 'scale.250', 'scale.300', 'scale.400', 'scale.500', 'scale.600'];
+var spacingScale = ['scale.0', 'scale.025', 'scale.050', 'scale.075', 'scale.100', 'scale.150', 'scale.200', 'scale.250', 'scale.300', 'scale.400', 'scale.500', 'scale.600', 'scale.800', 'scale.1000'];
 exports.spacingScale = spacingScale;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"sideEffects": false
 }