@atlaskit/primitives 1.17.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/primitives
 
+## 1.19.0
+
+### Minor Changes
+
+- [#66702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66702) [`5b6bbaf2d5fc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5b6bbaf2d5fc) - Added `maxLines` prop to `Text` component, allowing truncation at a certain number of lines. This prop replaces `shouldTruncate` prop.
+
+### Patch Changes
+
+- [#67698](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67698) [`175c07b58c52`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/175c07b58c52) - Export tokensMap object
+
+## 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

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

@@ -40,11 +40,16 @@ var textAlignMap = {
     textAlign: 'start'
   })
 };
-var truncateStyles = (0, _react2.css)({
+var truncationStyles = (0, _react2.css)({
+  display: '-webkit-box',
   overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  WebkitBoxOrient: 'vertical'
 });
+var wordBreakMap = {
+  breakAll: (0, _react2.css)({
+    wordBreak: 'break-all'
+  })
+};
 
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
@@ -93,14 +98,13 @@ var Text = function Text(_ref) {
       Component = 'span';
     }
   }
+  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
 
-  // 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;
+  // Remove the ability to bypass typescript errors for maxLines
+  var maxLines;
+  if ('maxLines' in props && variant.includes('body')) {
+    maxLines = props.maxLines;
   }
-  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();
 
@@ -112,7 +116,10 @@ var Text = function Text(_ref) {
     return (0, _react2.jsx)(_react.Fragment, null, children);
   }
   var component = (0, _react2.jsx)(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    style: {
+      WebkitLineClamp: maxLines
+    },
     "data-testid": testId,
     id: id
   }, children);

package/dist/cjs/index.js

@@ -64,6 +64,12 @@ Object.defineProperty(exports, "media", {
     return _responsive.media;
   }
 });
+Object.defineProperty(exports, "tokensMap", {
+  enumerable: true,
+  get: function get() {
+    return _xcss.tokensMap;
+  }
+});
 Object.defineProperty(exports, "xcss", {
   enumerable: true,
   get: function get() {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.parseXcss = void 0;
+exports.tokensMap = exports.parseXcss = void 0;
 exports.xcss = xcss;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -15,7 +15,7 @@ var _styleMaps = require("./style-maps.partial");
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-var tokensMap = {
+var tokensMap = exports.tokensMap = {
   backgroundColor: _styleMaps.backgroundColorMap,
   blockSize: _styleMaps.dimensionMap,
   borderBlockColor: _styleMaps.borderColorMap,

package/dist/es2019/components/text.js

@@ -32,11 +32,16 @@ const textAlignMap = {
     textAlign: 'start'
   })
 };
-const truncateStyles = css({
+const truncationStyles = css({
+  display: '-webkit-box',
   overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  WebkitBoxOrient: 'vertical'
 });
+const wordBreakMap = {
+  breakAll: css({
+    wordBreak: 'break-all'
+  })
+};
 
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
@@ -85,14 +90,13 @@ const Text = ({
       Component = 'span';
     }
   }
+  invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
 
-  // 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;
+  // Remove the ability to bypass typescript errors for maxLines
+  let maxLines;
+  if ('maxLines' in props && variant.includes('body')) {
+    maxLines = props.maxLines;
   }
-  invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
   const color = useColor(colorProp);
   const isWrapped = useHasTextAncestor();
 
@@ -104,7 +108,10 @@ const Text = ({
     return jsx(Fragment, null, children);
   }
   const component = jsx(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    style: {
+      WebkitLineClamp: maxLines
+    },
     "data-testid": testId,
     id: id
   }, children);

package/dist/es2019/index.js

@@ -1,6 +1,6 @@
 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
-export { xcss } from './xcss/xcss';
+export { xcss, tokensMap } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export { default as Flex } from './components/flex';
 export { default as Grid } from './components/grid';

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

@@ -4,7 +4,7 @@ import { css as cssEmotion } from '@emotion/react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
-const tokensMap = {
+export const tokensMap = {
   backgroundColor: backgroundColorMap,
   blockSize: dimensionMap,
   borderBlockColor: borderColorMap,

package/dist/esm/components/text.js

@@ -34,11 +34,16 @@ var textAlignMap = {
     textAlign: 'start'
   })
 };
-var truncateStyles = css({
+var truncationStyles = css({
+  display: '-webkit-box',
   overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  WebkitBoxOrient: 'vertical'
 });
+var wordBreakMap = {
+  breakAll: css({
+    wordBreak: 'break-all'
+  })
+};
 
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
@@ -87,14 +92,13 @@ var Text = function Text(_ref) {
       Component = 'span';
     }
   }
+  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
 
-  // 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;
+  // Remove the ability to bypass typescript errors for maxLines
+  var maxLines;
+  if ('maxLines' in props && variant.includes('body')) {
+    maxLines = props.maxLines;
   }
-  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();
 
@@ -106,7 +110,10 @@ var Text = function Text(_ref) {
     return jsx(Fragment, null, children);
   }
   var component = jsx(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    style: {
+      WebkitLineClamp: maxLines
+    },
     "data-testid": testId,
     id: id
   }, children);

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
-export { xcss } from './xcss/xcss';
+export { xcss, tokensMap } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export { default as Flex } from './components/flex';
 export { default as Grid } from './components/grid';

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

@@ -7,7 +7,7 @@ import { css as cssEmotion } from '@emotion/react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
-var tokensMap = {
+export var tokensMap = {
   backgroundColor: backgroundColorMap,
   blockSize: dimensionMap,
   borderBlockColor: borderColorMap,

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

@@ -10,18 +10,20 @@ type TextPropsBody = {
      */
     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).
+     * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
+     *
+     * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
      *
      * Only available for `body` text variants.
      */
-    shouldTruncate?: boolean;
+    maxLines?: number;
 };
 type TextPropsUi = {
     /**
      * Text variant
      */
     variant: UiText;
+    maxLines?: never;
 };
 type TextPropsBase = {
     /**

package/dist/types/index.d.ts

@@ -3,7 +3,7 @@ export { default as Box } from './components/box';
 export type { BoxProps } from './components/box';
 export { default as Inline } from './components/inline';
 export type { InlineProps } from './components/inline';
-export { xcss } from './xcss/xcss';
+export { xcss, tokensMap } from './xcss/xcss';
 export type { XCSS } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export type { StackProps } from './components/stack';
@@ -16,4 +16,4 @@ export type { BleedProps } from './components/bleed';
 export { default as Text } from './components/text';
 export type { TextProps } from './components/text';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
-export type { Breakpoint } from './responsive';
+export type { Breakpoint, MediaQuery } from './responsive';

package/dist/types/responsive/index.d.ts

@@ -1,7 +1,7 @@
 export { media, UNSAFE_media } from './media-helper';
 export { UNSAFE_buildAboveMediaQueryCSS } from './build-media-query-css';
 export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG, } from './constants';
-export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, } from './types';
+export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, MediaQuery, } from './types';
 export { UNSAFE_useMediaQuery } from './use-media-query';
 export { Show } from './show';
 export { Hide } from './hide';

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"]