@atlaskit/primitives 15.0.1 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 16.0.0
+
+### Major Changes
+
+- [`64bcecfcb59ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/64bcecfcb59ac) -
+  MetricText no longer accepts emotion-based xcss props only @atlaskit/css compiled-based props as
+  per the Compiled variant API.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.0.1
 
 ### Patch Changes

package/dist/cjs/compiled/components/anchor.js

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

package/dist/cjs/compiled/components/pressable.js

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

package/dist/cjs/components/anchor.js

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

package/dist/cjs/components/metric-text.js

@@ -5,62 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _styleMaps = require("../xcss/style-maps.partial");
+var _metricText = _interopRequireDefault(require("../compiled/components/metric-text"));
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * IMPORTANT: This is a temporary mapping to avoid breaking changes.
+ * We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
  */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var asAllowlist = ['span', 'div'];
-// We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
-// Long term we should remove those instances from the reset - it should be a reset to 0.
-// For now, at least we know <MetricText> will be unaffected by this.
-var resetStyles = (0, _react2.css)({
-  margin: 0
-});
-var textAlignMap = {
-  center: (0, _react2.css)({
-    textAlign: 'center'
-  }),
-  end: (0, _react2.css)({
-    textAlign: 'end'
-  }),
-  start: (0, _react2.css)({
-    textAlign: 'start'
-  })
-};
-
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
- * __MetricText__
+ * __Metric text comp__
  *
- * MetricText is a primitive component that has the Atlassian Design System's design guidelines baked in.
- * It is designed for use specifically with displaying metrics and is not to be used for headings or general UI text.
- * It renders a `span` by default.
+ * A metric text comp {description}.
  *
- * @internal
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-var MetricText = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _ref$as = _ref.as,
-    Component = _ref$as === void 0 ? 'span' : _ref$as,
-    align = _ref.align,
-    testId = _ref.testId,
-    id = _ref.id,
-    size = _ref.size,
-    children = _ref.children;
-  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: MetricText received an invalid \"as\" value of \"".concat(Component, "\""));
-  var component = (0, _react2.jsx)(Component, {
-    ref: ref,
-    css: [resetStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    size && _styleMaps.metricTextSizeStylesMap[size], align && textAlignMap[align]],
-    "data-testid": testId,
-    id: id
-  }, children);
-  return component;
-});
-var _default = exports.default = MetricText;
+var _default = exports.default = _metricText.default;

package/dist/cjs/components/pressable.js

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

package/dist/es2019/compiled/components/anchor.js

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

package/dist/es2019/compiled/components/pressable.js

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

package/dist/es2019/components/anchor.js

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

package/dist/es2019/components/metric-text.js

@@ -1,58 +1,18 @@
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * IMPORTANT: This is a temporary mapping to avoid breaking changes.
+ * We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
  */
-import { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import invariant from 'tiny-invariant';
-import { metricTextSizeStylesMap } from '../xcss/style-maps.partial';
-const asAllowlist = ['span', 'div'];
-// We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
-// Long term we should remove those instances from the reset - it should be a reset to 0.
-// For now, at least we know <MetricText> will be unaffected by this.
-const resetStyles = css({
-  margin: 0
-});
-const textAlignMap = {
-  center: css({
-    textAlign: 'center'
-  }),
-  end: css({
-    textAlign: 'end'
-  }),
-  start: css({
-    textAlign: 'start'
-  })
-};
 
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
- * __MetricText__
+ * __Metric text comp__
  *
- * MetricText is a primitive component that has the Atlassian Design System's design guidelines baked in.
- * It is designed for use specifically with displaying metrics and is not to be used for headings or general UI text.
- * It renders a `span` by default.
+ * A metric text comp {description}.
  *
- * @internal
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-const MetricText = /*#__PURE__*/forwardRef(({
-  as: Component = 'span',
-  align,
-  testId,
-  id,
-  size,
-  children
-}, ref) => {
-  invariant(asAllowlist.includes(Component), `@atlaskit/primitives: MetricText received an invalid "as" value of "${Component}"`);
-  const component = jsx(Component, {
-    ref: ref,
-    css: [resetStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    size && metricTextSizeStylesMap[size], align && textAlignMap[align]],
-    "data-testid": testId,
-    id: id
-  }, children);
-  return component;
-});
+import MetricText from '../compiled/components/metric-text';
 export default MetricText;

package/dist/es2019/components/pressable.js

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

package/dist/esm/compiled/components/anchor.js

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

package/dist/esm/compiled/components/pressable.js

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

package/dist/esm/components/anchor.js

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

package/dist/esm/components/metric-text.js

@@ -1,58 +1,18 @@
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * IMPORTANT: This is a temporary mapping to avoid breaking changes.
+ * We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
  */
-import { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import invariant from 'tiny-invariant';
-import { metricTextSizeStylesMap } from '../xcss/style-maps.partial';
-var asAllowlist = ['span', 'div'];
-// We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
-// Long term we should remove those instances from the reset - it should be a reset to 0.
-// For now, at least we know <MetricText> will be unaffected by this.
-var resetStyles = css({
-  margin: 0
-});
-var textAlignMap = {
-  center: css({
-    textAlign: 'center'
-  }),
-  end: css({
-    textAlign: 'end'
-  }),
-  start: css({
-    textAlign: 'start'
-  })
-};
 
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
- * __MetricText__
+ * __Metric text comp__
  *
- * MetricText is a primitive component that has the Atlassian Design System's design guidelines baked in.
- * It is designed for use specifically with displaying metrics and is not to be used for headings or general UI text.
- * It renders a `span` by default.
+ * A metric text comp {description}.
  *
- * @internal
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-var MetricText = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$as = _ref.as,
-    Component = _ref$as === void 0 ? 'span' : _ref$as,
-    align = _ref.align,
-    testId = _ref.testId,
-    id = _ref.id,
-    size = _ref.size,
-    children = _ref.children;
-  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: MetricText received an invalid \"as\" value of \"".concat(Component, "\""));
-  var component = jsx(Component, {
-    ref: ref,
-    css: [resetStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    size && metricTextSizeStylesMap[size], align && textAlignMap[align]],
-    "data-testid": testId,
-    id: id
-  }, children);
-  return component;
-});
+import MetricText from '../compiled/components/metric-text';
 export default MetricText;

package/dist/esm/components/pressable.js

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

package/dist/types/components/metric-text.d.ts

@@ -1,53 +1,16 @@
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * IMPORTANT: This is a temporary mapping to avoid breaking changes.
+ * We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
  */
-import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
-import { type MetricTextSize } from '../xcss/style-maps.partial';
-import type { BasePrimitiveProps } from './types';
-declare const asAllowlist: readonly ["span", "div"];
-type AsElement = (typeof asAllowlist)[number];
-type MetricTextPropsBase<T extends ElementType = 'span'> = {
-    /**
-     * HTML tag to be rendered. Defaults to `span`.
-     */
-    as?: AsElement;
-    /**
-     * Elements rendered within the Text element.
-     */
-    children: ReactNode;
-    /**
-     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
-     */
-    id?: string;
-    /**
-     * Text alignment.
-     */
-    align?: TextAlign;
-    /**
-     * Text size.
-     */
-    size: MetricTextSize;
-    /**
-     * Forwarded ref.
-     */
-    ref?: ComponentPropsWithRef<T>['ref'];
-};
-export type MetricTextProps<T extends ElementType = 'span'> = MetricTextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
-type TextAlign = keyof typeof textAlignMap;
-declare const textAlignMap: {
-    center: import("@emotion/react").SerializedStyles;
-    end: import("@emotion/react").SerializedStyles;
-    start: import("@emotion/react").SerializedStyles;
-};
 /**
- * __MetricText__
+ * __Metric text comp__
  *
- * MetricText is a primitive component that has the Atlassian Design System's design guidelines baked in.
- * It is designed for use specifically with displaying metrics and is not to be used for headings or general UI text.
- * It renders a `span` by default.
+ * A metric text comp {description}.
  *
- * @internal
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-declare const MetricText: React.ForwardRefExoticComponent<React.PropsWithoutRef<MetricTextProps<ElementType>> & React.RefAttributes<any>>;
+import MetricText, { type MetricTextProps } from '../compiled/components/metric-text';
+export type { MetricTextProps };
 export default MetricText;

package/dist/types-ts4.5/components/metric-text.d.ts

@@ -1,56 +1,16 @@
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * IMPORTANT: This is a temporary mapping to avoid breaking changes.
+ * We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
  */
-import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
-import { type MetricTextSize } from '../xcss/style-maps.partial';
-import type { BasePrimitiveProps } from './types';
-declare const asAllowlist: readonly [
-    "span",
-    "div"
-];
-type AsElement = (typeof asAllowlist)[number];
-type MetricTextPropsBase<T extends ElementType = 'span'> = {
-    /**
-     * HTML tag to be rendered. Defaults to `span`.
-     */
-    as?: AsElement;
-    /**
-     * Elements rendered within the Text element.
-     */
-    children: ReactNode;
-    /**
-     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
-     */
-    id?: string;
-    /**
-     * Text alignment.
-     */
-    align?: TextAlign;
-    /**
-     * Text size.
-     */
-    size: MetricTextSize;
-    /**
-     * Forwarded ref.
-     */
-    ref?: ComponentPropsWithRef<T>['ref'];
-};
-export type MetricTextProps<T extends ElementType = 'span'> = MetricTextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
-type TextAlign = keyof typeof textAlignMap;
-declare const textAlignMap: {
-    center: import("@emotion/react").SerializedStyles;
-    end: import("@emotion/react").SerializedStyles;
-    start: import("@emotion/react").SerializedStyles;
-};
 /**
- * __MetricText__
+ * __Metric text comp__
  *
- * MetricText is a primitive component that has the Atlassian Design System's design guidelines baked in.
- * It is designed for use specifically with displaying metrics and is not to be used for headings or general UI text.
- * It renders a `span` by default.
+ * A metric text comp {description}.
  *
- * @internal
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-declare const MetricText: React.ForwardRefExoticComponent<React.PropsWithoutRef<MetricTextProps<ElementType>> & React.RefAttributes<any>>;
+import MetricText, { type MetricTextProps } from '../compiled/components/metric-text';
+export type { MetricTextProps };
 export default MetricText;

package/package.json

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