@atlaskit/primitives 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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.16.0",
+  "version": "1.17.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/scripts/typography-codegen-template.tsx

@@ -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,