@atlaskit/primitives 15.0.1 → 16.0.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/primitives
 
+## 16.0.1
+
+### Patch Changes
+
+- [`e336b1e1861e5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e336b1e1861e5) -
+  ts-expect-error was replaced with ts-ignore to fix typecheck issues with help-center local
+  consumption
+
+## 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/box.js

@@ -333,7 +333,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     xcss = _ref.xcss,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // This is to remove className from safeHtmlAttributes
-  // @ts-expect-error -- className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
   var node = /*#__PURE__*/React.createElement(Component

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

@@ -40,7 +40,7 @@ var Focusable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     xcss = _ref.xcss,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // This is to remove className from safeHtmlAttributes
-  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, safeHtmlAttributes, {

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

@@ -71,7 +71,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
   return /*#__PURE__*/React.createElement(_focusable.default
-  // @ts-expect-error we don't allow `button` on Focusable for makers as they should use Pressable instead
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - we don't allow `button` on Focusable for makers as they should use Pressable instead
   , (0, _extends2.default)({
     as: "button"
     // Safari does not apply focus to buttons on click like other browsers, which means click events will not be fired.

package/dist/cjs/components/box.js

@@ -51,7 +51,7 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     xcss = _ref.xcss,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // This is to remove className from safeHtmlAttributes
-  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
   var resolvedStyles = (0, _xcss.parseXcss)(xcss);

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/es2019/compiled/components/box.js

@@ -316,7 +316,7 @@ const Box = /*#__PURE__*/forwardRef(({
   ...htmlAttributes
 }, ref) => {
   // This is to remove className from safeHtmlAttributes
-  // @ts-expect-error -- className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   const {
     className: _spreadClass,
     ...safeHtmlAttributes

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

@@ -28,7 +28,7 @@ const Focusable = /*#__PURE__*/forwardRef(({
   ...htmlAttributes
 }, ref) => {
   // This is to remove className from safeHtmlAttributes
-  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   const {
     className: _spreadClass,
     ...safeHtmlAttributes

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

@@ -60,7 +60,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     ...safeHtmlAttributes
   } = htmlAttributes;
   return /*#__PURE__*/React.createElement(Focusable
-  // @ts-expect-error we don't allow `button` on Focusable for makers as they should use Pressable instead
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - we don't allow `button` on Focusable for makers as they should use Pressable instead
   , _extends({
     as: "button"
     // Safari does not apply focus to buttons on click like other browsers, which means click events will not be fired.

package/dist/es2019/components/box.js

@@ -43,7 +43,7 @@ export const Box = /*#__PURE__*/forwardRef(({
   ...htmlAttributes
 }, ref) => {
   // This is to remove className from safeHtmlAttributes
-  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   const {
     className: _spreadClass,
     ...safeHtmlAttributes

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/esm/compiled/components/box.js

@@ -325,7 +325,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
   // This is to remove className from safeHtmlAttributes
-  // @ts-expect-error -- className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
   var node = /*#__PURE__*/React.createElement(Component

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

@@ -31,7 +31,7 @@ var Focusable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
   // This is to remove className from safeHtmlAttributes
-  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
   return /*#__PURE__*/React.createElement(Component, _extends({}, safeHtmlAttributes, {

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

@@ -62,7 +62,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
   return /*#__PURE__*/React.createElement(Focusable
-  // @ts-expect-error we don't allow `button` on Focusable for makers as they should use Pressable instead
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - we don't allow `button` on Focusable for makers as they should use Pressable instead
   , _extends({
     as: "button"
     // Safari does not apply focus to buttons on click like other browsers, which means click events will not be fired.

package/dist/esm/components/box.js

@@ -46,7 +46,7 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
   // This is to remove className from safeHtmlAttributes
-  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  // @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
   var resolvedStyles = parseXcss(xcss);

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/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.1",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -175,10 +175,10 @@
 		"@atlaskit/section-message": "^8.7.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.1.0",
-		"@atlaskit/tooltip": "^20.5.0",
+		"@atlaskit/tooltip": "^20.6.0",
 		"@atlassian/analytics-bridge": "^0.7.0",
 		"@atlassian/codegen": "^0.1.0",
-		"@atlassian/feature-flags-test-utils": "^0.3.0",
+		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",