@atlaskit/primitives 0.5.0 → 0.7.0

package/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ignorePatterns: ['./scripts/codegen-file-templates/*'],
+};

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/primitives
 
+## 0.7.0
+
+### Minor Changes
+
+- [`7e17a8b8934`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e17a8b8934) - Box:
+
+  - Add xcss prop to enable token powered styling.
+
+## 0.6.0
+
+### Minor Changes
+
+- [`4d60ec345a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4d60ec345a5) - Remove internal/exploratory responsive props available in BaseBox.
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/cjs/components/box.js

@@ -10,9 +10,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _xcss = require("../internal/xcss");
-var _baseBox = require("./internal/base-box.partial");
-var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "style", "testId", "xcss"],
+var _baseBox = require("./internal/base-box");
+var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
   _excluded2 = ["className"];
+/** @jsx jsx */
 /**
  * __Box__
  *
@@ -26,21 +27,7 @@ var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "border
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var as = _ref.as,
     children = _ref.children,
-    color = _ref.color,
     backgroundColor = _ref.backgroundColor,
-    shadow = _ref.shadow,
-    borderStyle = _ref.borderStyle,
-    borderWidth = _ref.borderWidth,
-    borderRadius = _ref.borderRadius,
-    borderColor = _ref.borderColor,
-    layer = _ref.layer,
-    flex = _ref.flex,
-    flexGrow = _ref.flexGrow,
-    flexShrink = _ref.flexShrink,
-    alignSelf = _ref.alignSelf,
-    overflow = _ref.overflow,
-    overflowInline = _ref.overflowInline,
-    overflowBlock = _ref.overflowBlock,
     padding = _ref.padding,
     paddingBlock = _ref.paddingBlock,
     paddingBlockStart = _ref.paddingBlockStart,
@@ -48,12 +35,6 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     paddingInline = _ref.paddingInline,
     paddingInlineStart = _ref.paddingInlineStart,
     paddingInlineEnd = _ref.paddingInlineEnd,
-    height = _ref.height,
-    width = _ref.width,
-    _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'block' : _ref$display,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'static' : _ref$position,
     style = _ref.style,
     testId = _ref.testId,
     xcss = _ref.xcss,
@@ -63,21 +44,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = xcss && (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)(_baseBox.BaseBox, (0, _extends2.default)({
     as: as,
-    color: color,
     backgroundColor: backgroundColor,
-    shadow: shadow,
-    borderStyle: borderStyle,
-    borderWidth: borderWidth,
-    borderRadius: borderRadius,
-    borderColor: borderColor,
-    layer: layer,
-    flex: flex,
-    flexGrow: flexGrow,
-    flexShrink: flexShrink,
-    alignSelf: alignSelf,
-    overflow: overflow,
-    overflowInline: overflowInline,
-    overflowBlock: overflowBlock,
     padding: padding,
     paddingBlock: paddingBlock,
     paddingBlockStart: paddingBlockStart,
@@ -85,10 +52,6 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
     paddingInlineEnd: paddingInlineEnd,
-    height: height,
-    width: width,
-    display: display,
-    position: position,
     style: style,
     testId: testId,
     ref: ref

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

@@ -1,11 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
 var alignItemsMap = {
@@ -51,100 +54,30 @@ var flexWrapStyles = (0, _react2.css)({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
+ * @codegen <<SignedSource::fb7587b114753ed19425e2b07b5deb0d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space", "rowSpace"]
+ * @codegenParams ["inlineSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-var spaceMap = {
-  '0': (0, _react2.css)({
-    gap: "var(--ds-space-0, 0px)"
-  }),
-  '025': (0, _react2.css)({
-    gap: "var(--ds-space-025, 2px)"
-  }),
-  '050': (0, _react2.css)({
-    gap: "var(--ds-space-050, 4px)"
-  }),
-  '075': (0, _react2.css)({
-    gap: "var(--ds-space-075, 6px)"
-  }),
-  '100': (0, _react2.css)({
-    gap: "var(--ds-space-100, 8px)"
-  }),
-  '150': (0, _react2.css)({
-    gap: "var(--ds-space-150, 12px)"
-  }),
-  '200': (0, _react2.css)({
-    gap: "var(--ds-space-200, 16px)"
-  }),
-  '250': (0, _react2.css)({
-    gap: "var(--ds-space-250, 20px)"
-  }),
-  '300': (0, _react2.css)({
-    gap: "var(--ds-space-300, 24px)"
-  }),
-  '400': (0, _react2.css)({
-    gap: "var(--ds-space-400, 32px)"
-  }),
-  '500': (0, _react2.css)({
-    gap: "var(--ds-space-500, 40px)"
-  }),
-  '600': (0, _react2.css)({
-    gap: "var(--ds-space-600, 48px)"
-  }),
-  '800': (0, _react2.css)({
-    gap: "var(--ds-space-800, 64px)"
-  }),
-  '1000': (0, _react2.css)({
-    gap: "var(--ds-space-1000, 80px)"
-  })
-};
-var rowSpaceMap = {
-  '0': (0, _react2.css)({
-    rowGap: "var(--ds-space-0, 0px)"
-  }),
-  '025': (0, _react2.css)({
-    rowGap: "var(--ds-space-025, 2px)"
-  }),
-  '050': (0, _react2.css)({
-    rowGap: "var(--ds-space-050, 4px)"
-  }),
-  '075': (0, _react2.css)({
-    rowGap: "var(--ds-space-075, 6px)"
-  }),
-  '100': (0, _react2.css)({
-    rowGap: "var(--ds-space-100, 8px)"
-  }),
-  '150': (0, _react2.css)({
-    rowGap: "var(--ds-space-150, 12px)"
-  }),
-  '200': (0, _react2.css)({
-    rowGap: "var(--ds-space-200, 16px)"
-  }),
-  '250': (0, _react2.css)({
-    rowGap: "var(--ds-space-250, 20px)"
-  }),
-  '300': (0, _react2.css)({
-    rowGap: "var(--ds-space-300, 24px)"
-  }),
-  '400': (0, _react2.css)({
-    rowGap: "var(--ds-space-400, 32px)"
-  }),
-  '500': (0, _react2.css)({
-    rowGap: "var(--ds-space-500, 40px)"
-  }),
-  '600': (0, _react2.css)({
-    rowGap: "var(--ds-space-600, 48px)"
-  }),
-  '800': (0, _react2.css)({
-    rowGap: "var(--ds-space-800, 64px)"
-  }),
-  '1000': (0, _react2.css)({
-    rowGap: "var(--ds-space-1000, 80px)"
-  })
-};
+var inlineSpaceMap = Object.fromEntries(['gap', 'rowGap'].map(function (property) {
+  return [property, {
+    '0': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-0, 0px)")),
+    '025': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-025, 2px)")),
+    '050': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-050, 4px)")),
+    '075': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-075, 6px)")),
+    '100': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-100, 8px)")),
+    '150': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-150, 12px)")),
+    '200': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-200, 16px)")),
+    '250': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-250, 20px)")),
+    '300': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-300, 24px)")),
+    '400': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-400, 32px)")),
+    '500': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-500, 40px)")),
+    '600': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-600, 48px)")),
+    '800': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-800, 64px)")),
+    '1000': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
  * @codegenEnd
  */
@@ -205,7 +138,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
   }) : rawChildren;
   var justifyContent = spread || alignInline;
   return (0, _react2.jsx)(Component, {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
+    css: [baseStyles, space && inlineSpaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && inlineSpaceMap.rowGap[rowSpace]],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/cjs/components/internal/base-box.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BaseBox = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _styleMaps = require("../../internal/style-maps.partial");
+var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId"];
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
+
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var as = _ref.as,
+    className = _ref.className,
+    children = _ref.children,
+    backgroundColor = _ref.backgroundColor,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingBlockStart = _ref.paddingBlockStart,
+    paddingBlockEnd = _ref.paddingBlockEnd,
+    paddingInline = _ref.paddingInline,
+    paddingInlineStart = _ref.paddingInlineStart,
+    paddingInlineEnd = _ref.paddingInlineEnd,
+    style = _ref.style,
+    testId = _ref.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var Component = as || 'div';
+  var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
+    style: style,
+    ref: ref
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, htmlAttributes, {
+    className: className,
+    css: [baseStyles, backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor], padding && _styleMaps.paddingStylesMap.padding[padding], paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd], padding && _styleMaps.paddingStylesMap.padding[padding]],
+    "data-testid": testId
+  }), children);
+  return node;
+});
+exports.BaseBox = BaseBox;
+BaseBox.displayName = 'BaseBox';
+var _default = BaseBox;
+exports.default = _default;
+var baseStyles = (0, _react2.css)({
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none'
+});

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

@@ -1,11 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
 var justifyContentMap = {
@@ -45,56 +48,30 @@ var flexGrowMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::4eb2c996d6ce5791acad51e2b226635f>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["stackSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-var spaceMap = {
-  '0': (0, _react2.css)({
-    gap: "var(--ds-space-0, 0px)"
-  }),
-  '025': (0, _react2.css)({
-    gap: "var(--ds-space-025, 2px)"
-  }),
-  '050': (0, _react2.css)({
-    gap: "var(--ds-space-050, 4px)"
-  }),
-  '075': (0, _react2.css)({
-    gap: "var(--ds-space-075, 6px)"
-  }),
-  '100': (0, _react2.css)({
-    gap: "var(--ds-space-100, 8px)"
-  }),
-  '150': (0, _react2.css)({
-    gap: "var(--ds-space-150, 12px)"
-  }),
-  '200': (0, _react2.css)({
-    gap: "var(--ds-space-200, 16px)"
-  }),
-  '250': (0, _react2.css)({
-    gap: "var(--ds-space-250, 20px)"
-  }),
-  '300': (0, _react2.css)({
-    gap: "var(--ds-space-300, 24px)"
-  }),
-  '400': (0, _react2.css)({
-    gap: "var(--ds-space-400, 32px)"
-  }),
-  '500': (0, _react2.css)({
-    gap: "var(--ds-space-500, 40px)"
-  }),
-  '600': (0, _react2.css)({
-    gap: "var(--ds-space-600, 48px)"
-  }),
-  '800': (0, _react2.css)({
-    gap: "var(--ds-space-800, 64px)"
-  }),
-  '1000': (0, _react2.css)({
-    gap: "var(--ds-space-1000, 80px)"
-  })
-};
+var stackSpaceMap = Object.fromEntries(['gap'].map(function (property) {
+  return [property, {
+    '0': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-0, 0px)")),
+    '025': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-025, 2px)")),
+    '050': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-050, 4px)")),
+    '075': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-075, 6px)")),
+    '100': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-100, 8px)")),
+    '150': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-150, 12px)")),
+    '200': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-200, 16px)")),
+    '250': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-250, 20px)")),
+    '300': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-300, 24px)")),
+    '400': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-400, 32px)")),
+    '500': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-500, 40px)")),
+    '600': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-600, 48px)")),
+    '800': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-800, 64px)")),
+    '1000': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
  * @codegenEnd
  */
@@ -131,7 +108,7 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
   var Component = as || 'div';
   var justifyContent = spread || alignBlock;
   return (0, _react2.jsx)(Component, {
-    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && stackSpaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref
   }, children);