@atlaskit/primitives 1.9.0 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 1.10.1
+
+### Patch Changes
+
+- [#43018](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43018) [`3cb6a290654`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3cb6a290654) - Text component now has `margin: 0` to ensure no margins are inherited (for example from the CSS reset).
+
+## 1.10.0
+
+### Minor Changes
+
+- [#42931](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42931) [`5778f757885`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5778f757885) - Added export for Text component. This component is currently in closed beta and is not intended for general use at this stage.
+
 ## 1.9.0
 
 ### Minor Changes

package/dist/cjs/components/text.js

@@ -16,6 +16,12 @@ var _excluded = ["children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var asAllowlist = ['span', 'p', 'strong', 'em'];
+// 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 <Text> will be unaffected by this.
+var resetStyles = (0, _react2.css)({
+  margin: 0
+});
 var variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap);
 var strongStyles = (0, _react2.css)({
   fontWeight: "var(--ds-font-weight-bold, bold)"
@@ -101,7 +107,7 @@ var Text = function Text(_ref) {
     return (0, _react2.jsx)(_react.Fragment, null, children);
   }
   var component = (0, _react2.jsx)(Component, {
-    css: [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], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     "data-testid": testId,
     id: id
   }, children);

package/dist/cjs/index.js

@@ -40,6 +40,12 @@ Object.defineProperty(exports, "Stack", {
     return _stack.default;
   }
 });
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function get() {
+    return _text.default;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
   enumerable: true,
   get: function get() {
@@ -71,4 +77,5 @@ var _stack = _interopRequireDefault(require("./components/stack"));
 var _flex = _interopRequireDefault(require("./components/flex"));
 var _grid = _interopRequireDefault(require("./components/grid"));
 var _bleed = _interopRequireDefault(require("./components/bleed"));
+var _text = _interopRequireDefault(require("./components/text"));
 var _responsive = require("./responsive");

package/dist/cjs/xcss/xcss.js

@@ -13,6 +13,8 @@ var _react = require("@emotion/react");
 var _styleMaps = require("./style-maps.partial");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+
 var tokensMap = {
   backgroundColor: _styleMaps.backgroundColorMap,
   blockSize: _styleMaps.dimensionMap,

package/dist/es2019/components/text.js

@@ -5,6 +5,12 @@ import invariant from 'tiny-invariant';
 import { bodyTextStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
 import { useSurface } from './internal/surface-provider';
 const asAllowlist = ['span', 'p', 'strong', 'em'];
+// 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 <Text> will be unaffected by this.
+const resetStyles = css({
+  margin: 0
+});
 const variantStyles = {
   ...bodyTextStylesMap,
   ...uiTextStylesMap
@@ -92,7 +98,7 @@ const Text = ({
     return jsx(Fragment, null, children);
   }
   const component = jsx(Component, {
-    css: [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], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     "data-testid": testId,
     id: id
   }, children);

package/dist/es2019/index.js

@@ -5,4 +5,5 @@ export { default as Stack } from './components/stack';
 export { default as Flex } from './components/flex';
 export { default as Grid } from './components/grid';
 export { default as Bleed } from './components/bleed';
+export { default as Text } from './components/text';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/es2019/xcss/xcss.js

@@ -1,5 +1,8 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
 import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 const tokensMap = {
   backgroundColor: backgroundColorMap,

package/dist/esm/components/text.js

@@ -10,6 +10,12 @@ import invariant from 'tiny-invariant';
 import { bodyTextStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
 import { useSurface } from './internal/surface-provider';
 var asAllowlist = ['span', 'p', 'strong', 'em'];
+// 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 <Text> will be unaffected by this.
+var resetStyles = css({
+  margin: 0
+});
 var variantStyles = _objectSpread(_objectSpread({}, bodyTextStylesMap), uiTextStylesMap);
 var strongStyles = css({
   fontWeight: "var(--ds-font-weight-bold, bold)"
@@ -95,7 +101,7 @@ var Text = function Text(_ref) {
     return jsx(Fragment, null, children);
   }
   var component = jsx(Component, {
-    css: [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], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     "data-testid": testId,
     id: id
   }, children);

package/dist/esm/index.js

@@ -5,4 +5,5 @@ export { default as Stack } from './components/stack';
 export { default as Flex } from './components/flex';
 export { default as Grid } from './components/grid';
 export { default as Bleed } from './components/bleed';
+export { default as Text } from './components/text';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/esm/xcss/xcss.js

@@ -3,6 +3,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
 import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 var tokensMap = {
   backgroundColor: backgroundColorMap,

package/dist/types/index.d.ts

@@ -12,5 +12,7 @@ export { default as Grid } from './components/grid';
 export type { GridProps } from './components/grid';
 export { default as Bleed } from './components/bleed';
 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';

package/dist/types-ts4.5/index.d.ts

@@ -12,5 +12,7 @@ export { default as Grid } from './components/grid';
 export type { GridProps } from './components/grid';
 export { default as Bleed } from './components/bleed';
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -191,6 +191,7 @@
     "./box": "./src/components/box.tsx",
     "./stack": "./src/components/stack.tsx",
     "./inline": "./src/components/inline.tsx",
+    "./text": "./src/components/text.tsx",
     "./pressable": "./src/components/pressable.tsx",
     "./link": "./src/components/link.tsx",
     "./responsive": "./src/responsive/index.tsx"

package/report.api.md

@@ -21,6 +21,7 @@ import type * as CSS_2 from 'csstype';
 import type { CSSProperties } from 'react';
 import type { CSSPropertiesWithMultiValues } from '@emotion/serialize';
 import { ElementType } from 'react';
+import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { MemoExoticComponent } from 'react';
@@ -84,6 +85,12 @@ type AllMedia =
 // @public (undocumented)
 type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
 
+// @public (undocumented)
+const asAllowlist: readonly ['span', 'p', 'strong', 'em'];
+
+// @public (undocumented)
+type AsElement = (typeof asAllowlist)[number];
+
 // @public (undocumented)
 type AtRulesWithoutMedia = Exclude<CSS_2.AtRules, '@media'>;
 
@@ -337,6 +344,16 @@ export type BleedProps = {
   block?: Space_2;
 } & BasePrimitiveProps;
 
+// @public (undocumented)
+type BodyText = keyof typeof bodyTextMap;
+
+// @public (undocumented)
+const bodyTextMap: {
+  body: 'var(--ds-font-body)';
+  'body.large': 'var(--ds-font-body-large)';
+  'body.small': 'var(--ds-font-body-small)';
+};
+
 // @public (undocumented)
 export type BorderColor = keyof typeof borderColorMap;
 
@@ -1040,6 +1057,20 @@ type SVGElements =
   | 'use'
   | 'view';
 
+// @internal
+const Text_2: FC<TextProps>;
+export { Text_2 as Text };
+
+// @public (undocumented)
+type TextAlign = keyof typeof textAlignMap;
+
+// @public (undocumented)
+const textAlignMap: {
+  center: SerializedStyles_2;
+  end: SerializedStyles_2;
+  start: SerializedStyles_2;
+};
+
 // @public (undocumented)
 export type TextColor = keyof typeof textColorMap;
 
@@ -1083,6 +1114,17 @@ const textColorMap: {
   readonly 'color.link.visited': 'var(--ds-link-visited)';
 };
 
+// @public (undocumented)
+export interface TextProps extends BasePrimitiveProps {
+  as?: AsElement;
+  children: ReactNode;
+  color?: TextColor;
+  id?: string;
+  shouldTruncate?: boolean;
+  textAlign?: TextAlign;
+  variant?: Variant;
+}
+
 // @public (undocumented)
 type TokenisedProps = {
   backgroundColor?: BackgroundColor;
@@ -1145,6 +1187,15 @@ type TokenisedProps = {
   zIndex?: Layer;
 };
 
+// @public (undocumented)
+type UiText = keyof typeof uiTextMap;
+
+// @public (undocumented)
+const uiTextMap: {
+  ui: 'var(--ds-font-ui)';
+  'ui.small': 'var(--ds-font-ui-small)';
+};
+
 // @public (undocumented)
 const uniqueSymbol: unique symbol;
 
@@ -1215,6 +1266,9 @@ export const UNSAFE_media: {
   };
 };
 
+// @public (undocumented)
+type Variant = BodyText | UiText;
+
 // @public (undocumented)
 type Wrap = keyof typeof flexWrapMap;
 

package/text/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/primitives/text",
+  "main": "../dist/cjs/components/text.js",
+  "module": "../dist/esm/components/text.js",
+  "module:es2019": "../dist/es2019/components/text.js",
+  "sideEffects": false,
+  "types": "../dist/types/components/text.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/components/text.d.ts"
+      ]
+    }
+  }
+}

package/tmp/api-report-tmp.d.ts

@@ -10,6 +10,7 @@ import type * as CSS_2 from 'csstype';
 import type { CSSProperties } from 'react';
 import type { CSSPropertiesWithMultiValues } from '@emotion/serialize';
 import { ElementType } from 'react';
+import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { MemoExoticComponent } from 'react';
@@ -68,6 +69,12 @@ type AllMedia = '@media (prefers-color-scheme: dark)' | '@media (prefers-color-s
 // @public (undocumented)
 type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
 
+// @public (undocumented)
+const asAllowlist: readonly ["span", "p", "strong", "em"];
+
+// @public (undocumented)
+type AsElement = (typeof asAllowlist)[number];
+
 // @public (undocumented)
 type AtRulesWithoutMedia = Exclude<CSS_2.AtRules, '@media'>;
 
@@ -312,6 +319,16 @@ export type BleedProps = {
     block?: Space_2;
 } & BasePrimitiveProps;
 
+// @public (undocumented)
+type BodyText = keyof typeof bodyTextMap;
+
+// @public (undocumented)
+const bodyTextMap: {
+    body: "var(--ds-font-body)";
+    'body.large': "var(--ds-font-body-large)";
+    'body.small': "var(--ds-font-body-small)";
+};
+
 // @public (undocumented)
 export type BorderColor = keyof typeof borderColorMap;
 
@@ -694,6 +711,20 @@ type StyleProp = {
 // @public (undocumented)
 type SVGElements = 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'svg' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';
 
+// @internal
+const Text_2: FC<TextProps>;
+export { Text_2 as Text }
+
+// @public (undocumented)
+type TextAlign = keyof typeof textAlignMap;
+
+// @public (undocumented)
+const textAlignMap: {
+    center: SerializedStyles_2;
+    end: SerializedStyles_2;
+    start: SerializedStyles_2;
+};
+
 // @public (undocumented)
 export type TextColor = keyof typeof textColorMap;
 
@@ -737,6 +768,17 @@ const textColorMap: {
     readonly 'color.link.visited': "var(--ds-link-visited)";
 };
 
+// @public (undocumented)
+export interface TextProps extends BasePrimitiveProps {
+    as?: AsElement;
+    children: ReactNode;
+    color?: TextColor;
+    id?: string;
+    shouldTruncate?: boolean;
+    textAlign?: TextAlign;
+    variant?: Variant;
+}
+
 // @public (undocumented)
 type TokenisedProps = {
     backgroundColor?: BackgroundColor;
@@ -799,6 +841,15 @@ type TokenisedProps = {
     zIndex?: Layer;
 };
 
+// @public (undocumented)
+type UiText = keyof typeof uiTextMap;
+
+// @public (undocumented)
+const uiTextMap: {
+    ui: "var(--ds-font-ui)";
+    'ui.small': "var(--ds-font-ui-small)";
+};
+
 // @public (undocumented)
 const uniqueSymbol: unique symbol;
 
@@ -869,6 +920,9 @@ export const UNSAFE_media: {
     };
 };
 
+// @public (undocumented)
+type Variant = BodyText | UiText;
+
 // @public (undocumented)
 type Wrap = keyof typeof flexWrapMap;