@atlaskit/primitives 1.15.2 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/primitives
 
+## 1.17.0
+
+### Minor Changes
+
+- [#65770](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65770) [`1e2db2714522`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1e2db2714522) - The `shouldTruncate` prop on `Text` is now only available for `body` variants and cannot be used with `ui` variants.
+
+## 1.16.0
+
+### Minor Changes
+
+- [#63526](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63526) [`e8835feffae9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e8835feffae9) - Internal change to improve token sorting logic for typography tokens. Typography tokens are now marked as active though they are still in development and not recommend for use without prior approval from ADS.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.15.2
 
 ### Patch Changes

package/dist/cjs/components/text.js

@@ -24,7 +24,7 @@ var resetStyles = (0, _react2.css)({
 });
 var variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap);
 var strongStyles = (0, _react2.css)({
-  fontWeight: "var(--ds-font-weight-bold, bold)"
+  fontWeight: 'bold'
 });
 var emStyles = (0, _react2.css)({
   fontStyle: 'italic'
@@ -79,8 +79,6 @@ var Text = function Text(_ref) {
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var asElement = props.as,
     colorProp = props.color,
-    _props$shouldTruncate = props.shouldTruncate,
-    shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
@@ -95,6 +93,13 @@ var Text = function Text(_ref) {
       Component = 'span';
     }
   }
+
+  // Remove the ability to bypass typescript errors for shouldTruncate
+  var shouldTruncate = false;
+  if ('shouldTruncate' in props && variant.includes('body')) {
+    var _props$shouldTruncate;
+    shouldTruncate = (_props$shouldTruncate = props.shouldTruncate) !== null && _props$shouldTruncate !== void 0 ? _props$shouldTruncate : false;
+  }
   (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();

package/dist/es2019/components/text.js

@@ -16,7 +16,7 @@ const variantStyles = {
   ...uiTextStylesMap
 };
 const strongStyles = css({
-  fontWeight: "var(--ds-font-weight-bold, bold)"
+  fontWeight: 'bold'
 });
 const emStyles = css({
   fontStyle: 'italic'
@@ -71,7 +71,6 @@ const Text = ({
   const {
     as: asElement,
     color: colorProp,
-    shouldTruncate = false,
     textAlign,
     testId,
     id,
@@ -86,6 +85,13 @@ const Text = ({
       Component = 'span';
     }
   }
+
+  // Remove the ability to bypass typescript errors for shouldTruncate
+  let shouldTruncate = false;
+  if ('shouldTruncate' in props && variant.includes('body')) {
+    var _props$shouldTruncate;
+    shouldTruncate = (_props$shouldTruncate = props.shouldTruncate) !== null && _props$shouldTruncate !== void 0 ? _props$shouldTruncate : false;
+  }
   invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
   const color = useColor(colorProp);
   const isWrapped = useHasTextAncestor();

package/dist/esm/components/text.js

@@ -18,7 +18,7 @@ var resetStyles = css({
 });
 var variantStyles = _objectSpread(_objectSpread({}, bodyTextStylesMap), uiTextStylesMap);
 var strongStyles = css({
-  fontWeight: "var(--ds-font-weight-bold, bold)"
+  fontWeight: 'bold'
 });
 var emStyles = css({
   fontStyle: 'italic'
@@ -73,8 +73,6 @@ var Text = function Text(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var asElement = props.as,
     colorProp = props.color,
-    _props$shouldTruncate = props.shouldTruncate,
-    shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
@@ -89,6 +87,13 @@ var Text = function Text(_ref) {
       Component = 'span';
     }
   }
+
+  // Remove the ability to bypass typescript errors for shouldTruncate
+  var shouldTruncate = false;
+  if ('shouldTruncate' in props && variant.includes('body')) {
+    var _props$shouldTruncate;
+    shouldTruncate = (_props$shouldTruncate = props.shouldTruncate) !== null && _props$shouldTruncate !== void 0 ? _props$shouldTruncate : false;
+  }
   invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();

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

@@ -4,8 +4,26 @@ import { BodyText, TextColor, UiText } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly ["span", "p", "strong", "em"];
 type AsElement = (typeof asAllowlist)[number];
-type Variant = BodyText | UiText;
-export interface TextProps extends Omit<BasePrimitiveProps, 'xcss'> {
+type TextPropsBody = {
+    /**
+     * Text variant
+     */
+    variant?: BodyText;
+    /**
+     * Truncates text with an ellipsis when text overflows its parent container
+     * (i.e. `width` has been set on parent that is shorter than text length).
+     *
+     * Only available for `body` text variants.
+     */
+    shouldTruncate?: boolean;
+};
+type TextPropsUi = {
+    /**
+     * Text variant
+     */
+    variant: UiText;
+};
+type TextPropsBase = {
     /**
      * HTML tag to be rendered. Defaults to `span`.
      */
@@ -14,10 +32,6 @@ export interface TextProps extends Omit<BasePrimitiveProps, 'xcss'> {
      * Elements rendered within the Text element
      */
     children: ReactNode;
-    /**
-     * Text variant
-     */
-    variant?: Variant;
     /**
      * Token representing text color with a built-in fallback value.
      * Will apply inverse text color automatically if placed within a Box with backgroundColor.
@@ -28,16 +42,12 @@ export interface TextProps extends Omit<BasePrimitiveProps, 'xcss'> {
      * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
      */
     id?: string;
-    /**
-     * Truncates text with an ellipsis when text overflows its parent container
-     * (i.e. `width` has been set on parent that is shorter than text length).
-     */
-    shouldTruncate?: boolean;
     /**
      * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
      */
     textAlign?: TextAlign;
-}
+};
+export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
 type TextAlign = keyof typeof textAlignMap;
 declare const textAlignMap: {
     center: import("@emotion/react").SerializedStyles;

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

@@ -9,8 +9,26 @@ declare const asAllowlist: readonly [
     "em"
 ];
 type AsElement = (typeof asAllowlist)[number];
-type Variant = BodyText | UiText;
-export interface TextProps extends Omit<BasePrimitiveProps, 'xcss'> {
+type TextPropsBody = {
+    /**
+     * Text variant
+     */
+    variant?: BodyText;
+    /**
+     * Truncates text with an ellipsis when text overflows its parent container
+     * (i.e. `width` has been set on parent that is shorter than text length).
+     *
+     * Only available for `body` text variants.
+     */
+    shouldTruncate?: boolean;
+};
+type TextPropsUi = {
+    /**
+     * Text variant
+     */
+    variant: UiText;
+};
+type TextPropsBase = {
     /**
      * HTML tag to be rendered. Defaults to `span`.
      */
@@ -19,10 +37,6 @@ export interface TextProps extends Omit<BasePrimitiveProps, 'xcss'> {
      * Elements rendered within the Text element
      */
     children: ReactNode;
-    /**
-     * Text variant
-     */
-    variant?: Variant;
     /**
      * Token representing text color with a built-in fallback value.
      * Will apply inverse text color automatically if placed within a Box with backgroundColor.
@@ -33,16 +47,12 @@ export interface TextProps extends Omit<BasePrimitiveProps, 'xcss'> {
      * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
      */
     id?: string;
-    /**
-     * Truncates text with an ellipsis when text overflows its parent container
-     * (i.e. `width` has been set on parent that is shorter than text length).
-     */
-    shouldTruncate?: boolean;
     /**
      * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
      */
     textAlign?: TextAlign;
-}
+};
+export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
 type TextAlign = keyof typeof textAlignMap;
 declare const textAlignMap: {
     center: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.15.2",
+  "version": "1.17.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -105,7 +105,7 @@
   },
   "dependencies": {
     "@atlaskit/app-provider": "^0.4.0",
-    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",

package/scripts/typography-codegen-template.tsx

@@ -1,7 +1,7 @@
 import prettier from 'prettier';
 import parserTypeScript from 'prettier/parser-typescript';
 
-import { typography as tokens } from '@atlaskit/tokens/tokens-raw';
+import { typographyAdg3 as tokens } from '@atlaskit/tokens/tokens-raw';
 
 import { capitalize, constructTokenFunctionCall } from './utils';
 
@@ -81,19 +81,19 @@ export const createTypographyStylesFromTemplate = (
     prettier.format(
       `
 export const ${objectName}Map = {
-  ${activeTokens
-    .filter(filterFn)
-    .map(t => ({ ...t, name: t.name.replace(/\.\[default\]/g, '') }))
-    .sort((a, b) => (a.name < b.name ? -1 : 1))
-    .map(token => {
-      return `
-        '${removeVerbosity(token.name)}': ${constructTokenFunctionCall(
-        token.name,
-        token.fallback,
-      )}
-      `.trim();
-    })
-    .join(',\n\t')}
+${activeTokens
+  .filter(filterFn)
+  .map(t => ({ ...t, name: t.name.replace(/\.\[default\]/g, '') }))
+  .sort((a, b) => (a.name < b.name ? -1 : 1))
+  .map(token => {
+    return `
+      '${removeVerbosity(token.name)}': ${constructTokenFunctionCall(
+      token.name,
+      token.fallback,
+    )}
+    `.trim();
+  })
+  .join(',\n\t')}
 };`,
       {
         singleQuote: true,