@atlaskit/primitives 1.8.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 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
+
+- [#42494](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42494) [`8cc2926465e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2926465e) - Removed the ability to use the `style` prop on primitives such as Inline, Stack, and Flex. This prop previously had no effect on these components and is now only allowed on Box.
+
 ## 1.8.0
 
 ### Minor Changes

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/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/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/types/components/box.d.ts

@@ -2,12 +2,12 @@
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import { SVGElements } from './internal/types';
-import type { BasePrimitiveProps } from './types';
+import type { BasePrimitiveProps, StyleProp } from './types';
 type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
 type CustomElementType<P = any> = {
     [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
 }[AllowedElements];
-export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
 type BaseBoxProps<T extends CustomElementType> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.

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

@@ -5,11 +5,6 @@ export type BasePrimitiveProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
-     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
-     */
-    style?: CSSProperties;
     /**
      * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
@@ -19,6 +14,13 @@ export type BasePrimitiveProps = {
      */
     role?: string;
 };
+export type StyleProp = {
+    /**
+     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
+     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
+     */
+    style?: CSSProperties;
+};
 export type AlignInline = 'start' | 'center' | 'end' | 'stretch';
 export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 export type Spread = 'space-between';

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/components/box.d.ts

@@ -2,12 +2,12 @@
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import { SVGElements } from './internal/types';
-import type { BasePrimitiveProps } from './types';
+import type { BasePrimitiveProps, StyleProp } from './types';
 type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
 type CustomElementType<P = any> = {
     [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
 }[AllowedElements];
-export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
 type BaseBoxProps<T extends CustomElementType> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.

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

@@ -5,11 +5,6 @@ export type BasePrimitiveProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
-     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
-     */
-    style?: CSSProperties;
     /**
      * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
@@ -19,6 +14,13 @@ export type BasePrimitiveProps = {
      */
     role?: string;
 };
+export type StyleProp = {
+    /**
+     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
+     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
+     */
+    style?: CSSProperties;
+};
 export type AlignInline = 'start' | 'center' | 'end' | 'stretch';
 export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 export type Spread = 'space-between';

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/extract-react-types/box-props.tsx

@@ -1,7 +1,7 @@
 // TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
 import React, { ElementType, ReactNode } from 'react';
 
-import { BasePrimitiveProps } from '../src/components/types';
+import { BasePrimitiveProps, StyleProp } from '../src/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 namespace Token {
@@ -84,5 +84,6 @@ export default function Box(
      * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<ElementType>['ref'];
-  } & BasePrimitiveProps,
+  } & BasePrimitiveProps &
+    StyleProp,
 ) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "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'>;
 
@@ -313,7 +320,6 @@ type BaseBoxProps<T extends CustomElementType> = {
 // @public (undocumented)
 type BasePrimitiveProps = {
   testId?: string;
-  style?: CSSProperties;
   xcss?: Array<XCSS | false | undefined> | XCSS;
   role?: string;
 };
@@ -338,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;
 
@@ -407,6 +423,7 @@ export type BoxProps<T extends CustomElementType> = Omit<
   'as' | 'className'
 > &
   BasePrimitiveProps &
+  StyleProp &
   BaseBoxProps<T>;
 
 // @public
@@ -974,6 +991,11 @@ export type StackProps<T extends ElementType = 'div'> = {
   ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
+// @public (undocumented)
+type StyleProp = {
+  style?: CSSProperties;
+};
+
 // @public (undocumented)
 type SVGElements =
   | 'animate'
@@ -1035,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;
 
@@ -1078,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;
@@ -1140,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;
 
@@ -1210,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'>;
 
@@ -297,7 +304,6 @@ type BaseBoxProps<T extends CustomElementType> = {
 // @public (undocumented)
 type BasePrimitiveProps = {
     testId?: string;
-    style?: CSSProperties;
     xcss?: Array<XCSS | false | undefined> | XCSS;
     role?: string;
 };
@@ -313,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;
 
@@ -375,7 +391,7 @@ export const Box: BoxComponent;
 type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
 
 // @public (undocumented)
-export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
 
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
@@ -687,9 +703,28 @@ export type StackProps<T extends ElementType = 'div'> = {
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
+// @public (undocumented)
+type StyleProp = {
+    style?: CSSProperties;
+};
+
 // @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;
 
@@ -733,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;
@@ -795,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;
 
@@ -865,6 +920,9 @@ export const UNSAFE_media: {
     };
 };
 
+// @public (undocumented)
+type Variant = BodyText | UiText;
+
 // @public (undocumented)
 type Wrap = keyof typeof flexWrapMap;