@atlaskit/primitives 1.16.0 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/primitives
 
+## 1.18.0
+
+### Minor Changes
+
+- [#67463](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67463) [`adf1c3ebf0fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/adf1c3ebf0fd) - Fixed an issue with `Text` where text could render incorrectly if a typography token theme was not present on a page.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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/constellation/text/code.mdx

@@ -2,6 +2,10 @@
 title: Text
 description: Text is a token-backed typography component to display body and UI text.
 order: 1
+props:
+  packageName: '@atlaskit/primitives'
+  exports:
+    - Text
 ---
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
@@ -12,8 +16,6 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import ERTText from '!!extract-react-types-loader!../../extract-react-types/text-props';
-
 ## Props
 
-<PropsTable heading="" props={ERTText} />
+<TSMorphProps exportName="Text" packageName="@atlaskit/primitives" />

package/constellation/xcss/usage.mdx

@@ -6,7 +6,7 @@ order: 0
 
 import { MediaQueriesTable } from '@af/design-system-docs-ui';
 
-XCSS is an Atlassian Design System styling API that natively integrates with Atlassian's [design tokens](/tokens) and [primitives](/components/primitives).
+XCSS is an Atlassian Design System styling API that natively integrates with Atlassian's [design tokens](/tokens) and [primitives](/components/primitives/overview).
 
 The XCSS utility behaves similarly to the `css` utility in libraries like `styled-components`, `@compiled` or `@emotion`. If you've used these libraries, XCSS will feel familiar, with a few additional features and constraints.
 

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/cjs/xcss/style-maps.partial.js

@@ -496,7 +496,7 @@ var borderRadiusMap = exports.borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::739812ebd4363d1b1782332b2ebffd2c>>
+ * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -537,13 +537,13 @@ var lineHeightMap = exports.lineHeightMap = {
   'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
 };
 var bodyTextMap = exports.bodyTextMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px var(--ds-font-family-body))",
-  'body.large': "var(--ds-font-body-large, normal 400 16px/24px var(--ds-font-family-body))",
-  'body.small': "var(--ds-font-body-small, normal 400 11px/16px var(--ds-font-family-body))"
+  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 var uiTextMap = exports.uiTextMap = {
-  ui: "var(--ds-font-ui, normal 400 14px/1 var(--ds-font-family-body))",
-  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 var(--ds-font-family-body))"
+  ui: "var(--ds-font-ui, normal 400 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 
 /**

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/es2019/xcss/style-maps.partial.js

@@ -484,7 +484,7 @@ export const borderRadiusMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::739812ebd4363d1b1782332b2ebffd2c>>
+ * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -525,13 +525,13 @@ export const lineHeightMap = {
   'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
 };
 export const bodyTextMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px var(--ds-font-family-body))",
-  'body.large': "var(--ds-font-body-large, normal 400 16px/24px var(--ds-font-family-body))",
-  'body.small': "var(--ds-font-body-small, normal 400 11px/16px var(--ds-font-family-body))"
+  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 export const uiTextMap = {
-  ui: "var(--ds-font-ui, normal 400 14px/1 var(--ds-font-family-body))",
-  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 var(--ds-font-family-body))"
+  ui: "var(--ds-font-ui, normal 400 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 
 /**

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/esm/xcss/style-maps.partial.js

@@ -484,7 +484,7 @@ export var borderRadiusMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::739812ebd4363d1b1782332b2ebffd2c>>
+ * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -525,13 +525,13 @@ export var lineHeightMap = {
   'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
 };
 export var bodyTextMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px var(--ds-font-family-body))",
-  'body.large': "var(--ds-font-body-large, normal 400 16px/24px var(--ds-font-family-body))",
-  'body.small': "var(--ds-font-body-small, normal 400 11px/16px var(--ds-font-family-body))"
+  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 export var uiTextMap = {
-  ui: "var(--ds-font-ui, normal 400 14px/1 var(--ds-font-family-body))",
-  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 var(--ds-font-family-body))"
+  ui: "var(--ds-font-ui, normal 400 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 
 /**

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/xcss/style-maps.partial.d.ts

@@ -515,7 +515,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::739812ebd4363d1b1782332b2ebffd2c>>
+ * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]

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/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -515,7 +515,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::739812ebd4363d1b1782332b2ebffd2c>>
+ * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.16.0",
+  "version": "1.18.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.33.0",
+    "@atlaskit/tokens": "^1.34.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",

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,