@atlaskit/primitives 0.5.0 → 0.6.0

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

@@ -24,7 +24,7 @@ export interface StackProps<T extends ElementType = 'div'> {
     /**
      * Represents the space between each child.
      */
-    space?: Space;
+    space?: Gap;
     /**
      * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
      */
@@ -44,29 +44,31 @@ export declare type Spread = 'space-between';
 export declare type Grow = 'hug' | 'fill';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::4eb2c996d6ce5791acad51e2b226635f>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["stackSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-declare const spaceMap: {
-    readonly '0': import("@emotion/react").SerializedStyles;
-    readonly '025': import("@emotion/react").SerializedStyles;
-    readonly '050': import("@emotion/react").SerializedStyles;
-    readonly '075': import("@emotion/react").SerializedStyles;
-    readonly '100': import("@emotion/react").SerializedStyles;
-    readonly '150': import("@emotion/react").SerializedStyles;
-    readonly '200': import("@emotion/react").SerializedStyles;
-    readonly '250': import("@emotion/react").SerializedStyles;
-    readonly '300': import("@emotion/react").SerializedStyles;
-    readonly '400': import("@emotion/react").SerializedStyles;
-    readonly '500': import("@emotion/react").SerializedStyles;
-    readonly '600': import("@emotion/react").SerializedStyles;
-    readonly '800': import("@emotion/react").SerializedStyles;
-    readonly '1000': import("@emotion/react").SerializedStyles;
+declare const stackSpaceMap: {
+    [k: string]: {
+        readonly '0': import("@emotion/react").SerializedStyles;
+        readonly '025': import("@emotion/react").SerializedStyles;
+        readonly '050': import("@emotion/react").SerializedStyles;
+        readonly '075': import("@emotion/react").SerializedStyles;
+        readonly '100': import("@emotion/react").SerializedStyles;
+        readonly '150': import("@emotion/react").SerializedStyles;
+        readonly '200': import("@emotion/react").SerializedStyles;
+        readonly '250': import("@emotion/react").SerializedStyles;
+        readonly '300': import("@emotion/react").SerializedStyles;
+        readonly '400': import("@emotion/react").SerializedStyles;
+        readonly '500': import("@emotion/react").SerializedStyles;
+        readonly '600': import("@emotion/react").SerializedStyles;
+        readonly '800': import("@emotion/react").SerializedStyles;
+        readonly '1000': import("@emotion/react").SerializedStyles;
+    };
 };
-export declare type Space = keyof typeof spaceMap;
+export declare type Gap = keyof typeof stackSpaceMap.gap;
 /**
  * __Stack__
  *

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

@@ -1,6 +1,5 @@
 import type { CSSProperties } from 'react';
 import { type BoxXCSS } from '../internal/xcss';
-import type { BorderWidth, Display, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from './internal/base-box.partial';
 export declare type BasePrimitiveProps = {
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
@@ -12,51 +11,6 @@ export declare type BasePrimitiveProps = {
     style?: CSSProperties;
 };
 export declare type PublicBoxPropsBase = {
-    /**
-     * Defines border width.
-     */
-    borderWidth?: BorderWidth;
-    /**
-     * Defines display type and layout. Defaults to `block`.
-     */
-    display?: Display;
-    /**
-     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
-     *
-     * @see paddingBlock
-     * @see paddingInline
-     */
-    padding?: Padding;
-    /**
-     * Tokens representing CSS shorthand `paddingBlock`.
-     *
-     * @see paddingBlockStart
-     * @see paddingBlockEnd
-     */
-    paddingBlock?: PaddingBlock;
-    /**
-     * Tokens representing CSS `paddingBlockStart`.
-     */
-    paddingBlockStart?: PaddingBlockStart;
-    /**
-     * Tokens representing CSS `paddingBlockEnd`.
-     */
-    paddingBlockEnd?: PaddingBlockEnd;
-    /**
-     * Tokens representing CSS shorthand `paddingInline`.
-     *
-     * @see paddingInlineStart
-     * @see paddingInlineEnd
-     */
-    paddingInline?: PaddingInline;
-    /**
-     * Tokens representing CSS `paddingInlineStart`.
-     */
-    paddingInlineStart?: PaddingInlineStart;
-    /**
-     * Tokens representing CSS `paddingInlineEnd`.
-     */
-    paddingInlineEnd?: PaddingInlineEnd;
     /**
      * Safe subset of styles that can be applied as a classname.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -41,8 +41,7 @@
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
-    "@emotion/serialize": "^1.1.0",
-    "tiny-invariant": "^1.2.0"
+    "@emotion/serialize": "^1.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

package/report.api.md

@@ -182,7 +182,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
   backgroundColor?: BackgroundColor;
   shadow?: Shadow;
   borderStyle?: BorderStyle;
-  borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
+  borderWidth?: BorderWidth;
   borderColor?: BorderColor;
   borderRadius?: BorderRadius;
   layer?: Layer;
@@ -193,18 +193,16 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
   overflow?: Overflow;
   overflowInline?: OverflowInline;
   overflowBlock?: OverflowBlock;
-  padding?: Padding | ResponsiveObject<Padding>;
-  paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
-  paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
-  paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
-  paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
-  paddingInlineStart?:
-    | PaddingInlineStart
-    | ResponsiveObject<PaddingInlineStart>;
-  paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
+  padding?: Padding;
+  paddingBlock?: PaddingBlock;
+  paddingBlockStart?: PaddingBlockStart;
+  paddingBlockEnd?: PaddingBlockEnd;
+  paddingInline?: PaddingInline;
+  paddingInlineStart?: PaddingInlineStart;
+  paddingInlineEnd?: PaddingInlineEnd;
   width?: Width;
   height?: Height;
-  display?: Display | ResponsiveObject<Display>;
+  display?: Display;
   position?: Position;
   ref?: ComponentPropsWithRef<T>['ref'];
 };
@@ -293,9 +291,9 @@ type BorderWidth_2 = keyof typeof borderWidthMap_2;
 
 // @public (undocumented)
 const borderWidthMap: {
-  readonly 'size.0': 'var(--ds-width-0)';
-  readonly 'size.050': 'var(--ds-width-050)';
-  readonly 'size.100': 'var(--ds-width-100)';
+  readonly 'size.0': SerializedStyles;
+  readonly 'size.050': SerializedStyles;
+  readonly 'size.100': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -308,19 +306,6 @@ const borderWidthMap_2: {
 // @public
 export const Box: BoxComponent;
 
-// @public (undocumented)
-const BOX_RESPONSIVE_PROPS: readonly [
-  'borderWidth',
-  'display',
-  'padding',
-  'paddingBlock',
-  'paddingBlockStart',
-  'paddingBlockEnd',
-  'paddingInline',
-  'paddingInlineStart',
-  'paddingInlineEnd',
-];
-
 // @public (undocumented)
 type BoxComponent<T extends ElementType = 'div'> = (<
   T extends ElementType = 'div',
@@ -332,13 +317,10 @@ type BoxComponent<T extends ElementType = 'div'> = (<
 // @public (undocumented)
 export type BoxProps<T extends ElementType = 'div'> = Omit<
   BaseBoxProps<T>,
-  'className' | BoxResponsiveProp
+  'className'
 > &
   PublicBoxPropsBase;
 
-// @public (undocumented)
-type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
-
 // @public (undocumented)
 type BoxStyles = SerializedStyles_2 & {
   [boxTag]: true;
@@ -353,9 +335,6 @@ type BoxXCSS = {
   readonly styles: BoxStyles;
 };
 
-// @public
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
-
 // @public (undocumented)
 const dimensionMap: {
   readonly '100%': '100%';
@@ -373,11 +352,11 @@ type Display = keyof typeof displayMap;
 
 // @public (undocumented)
 const displayMap: {
-  readonly block: 'block';
-  readonly inline: 'inline';
-  readonly flex: 'flex';
-  readonly 'inline-flex': 'inline-flex';
-  readonly 'inline-block': 'inline-block';
+  readonly block: SerializedStyles;
+  readonly inline: SerializedStyles;
+  readonly flex: SerializedStyles;
+  readonly 'inline-flex': SerializedStyles;
+  readonly 'inline-block': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -406,6 +385,12 @@ const flexShrinkMap: {
   readonly '1': SerializedStyles;
 };
 
+// @public (undocumented)
+type Gap = keyof typeof inlineSpaceMap.gap;
+
+// @public (undocumented)
+type Gap_2 = keyof typeof stackSpaceMap.gap;
+
 // @public (undocumented)
 type Grow = 'fill' | 'hug';
 
@@ -459,14 +444,34 @@ export interface InlineProps<T extends ElementType = 'div'> {
   children: ReactNode;
   grow?: Grow;
   ref?: ComponentPropsWithRef<T>['ref'];
-  rowSpace?: RowSpace;
+  rowSpace?: RowGap;
   separator?: string;
   shouldWrap?: boolean;
-  space?: Space;
+  space?: Gap;
   spread?: Spread;
   testId?: string;
 }
 
+// @public
+const inlineSpaceMap: {
+  [k: string]: {
+    readonly '0': SerializedStyles;
+    readonly '025': SerializedStyles;
+    readonly '050': SerializedStyles;
+    readonly '075': SerializedStyles;
+    readonly '100': SerializedStyles;
+    readonly '150': SerializedStyles;
+    readonly '200': SerializedStyles;
+    readonly '250': SerializedStyles;
+    readonly '300': SerializedStyles;
+    readonly '400': SerializedStyles;
+    readonly '500': SerializedStyles;
+    readonly '600': SerializedStyles;
+    readonly '800': SerializedStyles;
+    readonly '1000': SerializedStyles;
+  };
+};
+
 // @public (undocumented)
 type InlineStyles = SerializedStyles_2 & {
   [inlineTag]: true;
@@ -531,45 +536,47 @@ const overflowMap: {
 };
 
 // @public (undocumented)
-type Padding = keyof typeof paddingMap;
+type Padding = keyof typeof paddingMap.padding;
 
 // @public (undocumented)
 type Padding_2 = keyof typeof paddingMap_2;
 
 // @public (undocumented)
-type PaddingBlock = keyof typeof paddingMap;
+type PaddingBlock = keyof typeof paddingMap.paddingBlock;
 
 // @public (undocumented)
-type PaddingBlockEnd = keyof typeof paddingMap;
+type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
 
 // @public (undocumented)
-type PaddingBlockStart = keyof typeof paddingMap;
+type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
 
 // @public (undocumented)
-type PaddingInline = keyof typeof paddingMap;
+type PaddingInline = keyof typeof paddingMap.paddingInline;
 
 // @public (undocumented)
-type PaddingInlineEnd = keyof typeof paddingMap;
+type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
 
 // @public (undocumented)
-type PaddingInlineStart = keyof typeof paddingMap;
+type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
 
 // @public
 const paddingMap: {
-  readonly 'space.0': 'var(--ds-space-0)';
-  readonly 'space.025': 'var(--ds-space-025)';
-  readonly 'space.050': 'var(--ds-space-050)';
-  readonly 'space.075': 'var(--ds-space-075)';
-  readonly 'space.100': 'var(--ds-space-100)';
-  readonly 'space.150': 'var(--ds-space-150)';
-  readonly 'space.200': 'var(--ds-space-200)';
-  readonly 'space.250': 'var(--ds-space-250)';
-  readonly 'space.300': 'var(--ds-space-300)';
-  readonly 'space.400': 'var(--ds-space-400)';
-  readonly 'space.500': 'var(--ds-space-500)';
-  readonly 'space.600': 'var(--ds-space-600)';
-  readonly 'space.800': 'var(--ds-space-800)';
-  readonly 'space.1000': 'var(--ds-space-1000)';
+  [k: string]: {
+    readonly 'space.0': SerializedStyles;
+    readonly 'space.025': SerializedStyles;
+    readonly 'space.050': SerializedStyles;
+    readonly 'space.075': SerializedStyles;
+    readonly 'space.100': SerializedStyles;
+    readonly 'space.150': SerializedStyles;
+    readonly 'space.200': SerializedStyles;
+    readonly 'space.250': SerializedStyles;
+    readonly 'space.300': SerializedStyles;
+    readonly 'space.400': SerializedStyles;
+    readonly 'space.500': SerializedStyles;
+    readonly 'space.600': SerializedStyles;
+    readonly 'space.800': SerializedStyles;
+    readonly 'space.1000': SerializedStyles;
+  };
 };
 
 // @public (undocumented)
@@ -603,41 +610,11 @@ const positionMap: {
 
 // @public (undocumented)
 type PublicBoxPropsBase = {
-  borderWidth?: BorderWidth;
-  display?: Display;
-  padding?: Padding;
-  paddingBlock?: PaddingBlock;
-  paddingBlockStart?: PaddingBlockStart;
-  paddingBlockEnd?: PaddingBlockEnd;
-  paddingInline?: PaddingInline;
-  paddingInlineStart?: PaddingInlineStart;
-  paddingInlineEnd?: PaddingInlineEnd;
   xcss?: BoxXCSS;
 };
 
-// @public
-type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
-
 // @public (undocumented)
-type RowSpace = keyof typeof rowSpaceMap;
-
-// @public (undocumented)
-const rowSpaceMap: {
-  readonly '0': SerializedStyles;
-  readonly '025': SerializedStyles;
-  readonly '050': SerializedStyles;
-  readonly '075': SerializedStyles;
-  readonly '100': SerializedStyles;
-  readonly '150': SerializedStyles;
-  readonly '200': SerializedStyles;
-  readonly '250': SerializedStyles;
-  readonly '300': SerializedStyles;
-  readonly '400': SerializedStyles;
-  readonly '500': SerializedStyles;
-  readonly '600': SerializedStyles;
-  readonly '800': SerializedStyles;
-  readonly '1000': SerializedStyles;
-};
+type RowGap = keyof typeof inlineSpaceMap.rowGap;
 
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
@@ -662,48 +639,6 @@ const shadowMap: {
   readonly raised: SerializedStyles;
 };
 
-// @public (undocumented)
-type Space = keyof typeof spaceMap;
-
-// @public (undocumented)
-type Space_2 = keyof typeof spaceMap_2;
-
-// @public
-const spaceMap: {
-  readonly '0': SerializedStyles;
-  readonly '025': SerializedStyles;
-  readonly '050': SerializedStyles;
-  readonly '075': SerializedStyles;
-  readonly '100': SerializedStyles;
-  readonly '150': SerializedStyles;
-  readonly '200': SerializedStyles;
-  readonly '250': SerializedStyles;
-  readonly '300': SerializedStyles;
-  readonly '400': SerializedStyles;
-  readonly '500': SerializedStyles;
-  readonly '600': SerializedStyles;
-  readonly '800': SerializedStyles;
-  readonly '1000': SerializedStyles;
-};
-
-// @public
-const spaceMap_2: {
-  readonly '0': SerializedStyles;
-  readonly '025': SerializedStyles;
-  readonly '050': SerializedStyles;
-  readonly '075': SerializedStyles;
-  readonly '100': SerializedStyles;
-  readonly '150': SerializedStyles;
-  readonly '200': SerializedStyles;
-  readonly '250': SerializedStyles;
-  readonly '300': SerializedStyles;
-  readonly '400': SerializedStyles;
-  readonly '500': SerializedStyles;
-  readonly '600': SerializedStyles;
-  readonly '800': SerializedStyles;
-  readonly '1000': SerializedStyles;
-};
-
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -736,11 +671,31 @@ export interface StackProps<T extends ElementType = 'div'> {
   children: ReactNode;
   grow?: Grow_2;
   ref?: ComponentPropsWithRef<T>['ref'];
-  space?: Space_2;
+  space?: Gap_2;
   spread?: Spread_2;
   testId?: string;
 }
 
+// @public
+const stackSpaceMap: {
+  [k: string]: {
+    readonly '0': SerializedStyles;
+    readonly '025': SerializedStyles;
+    readonly '050': SerializedStyles;
+    readonly '075': SerializedStyles;
+    readonly '100': SerializedStyles;
+    readonly '150': SerializedStyles;
+    readonly '200': SerializedStyles;
+    readonly '250': SerializedStyles;
+    readonly '300': SerializedStyles;
+    readonly '400': SerializedStyles;
+    readonly '500': SerializedStyles;
+    readonly '600': SerializedStyles;
+    readonly '800': SerializedStyles;
+    readonly '1000': SerializedStyles;
+  };
+};
+
 // @public (undocumented)
 type TextColor = keyof typeof textColorMap;
 

package/scripts/spacing-codegen-template.tsx

@@ -3,13 +3,12 @@ import parserTypeScript from 'prettier/parser-typescript';
 
 import { spacing as tokens } from '@atlaskit/tokens/tokens-raw';
 
-import { capitalize, tokenCall, tokenToStyle } from './utils';
+import { capitalize, tokenToStyle } from './utils';
 
 const spacingProperties: Record<
   string,
   {
     cssProperties: readonly string[];
-    responsiveOutput?: boolean;
     propNameFormatter?: (propName: string) => string;
   }
 > = {
@@ -23,14 +22,13 @@ const spacingProperties: Record<
       'paddingInlineStart',
       'paddingInlineEnd',
     ],
-    responsiveOutput: true,
   },
-  space: {
-    cssProperties: ['gap'],
+  inlineSpace: {
+    cssProperties: ['gap', 'rowGap'],
     propNameFormatter: tokenName => tokenName.replace(spacingTokenPrefix, ''),
   },
-  rowSpace: {
-    cssProperties: ['rowGap'],
+  stackSpace: {
+    cssProperties: ['gap'],
     propNameFormatter: tokenName => tokenName.replace(spacingTokenPrefix, ''),
   },
 } as const;
@@ -52,32 +50,34 @@ export const createSpacingStylesFromTemplate = (
     throw new Error(`[codegen] Unknown option found "${spacingProperty}"`);
   }
 
-  const { cssProperties, responsiveOutput, propNameFormatter } =
+  const { cssProperties, propNameFormatter } =
     spacingProperties[spacingProperty]!;
 
   return (
     prettier.format(
       `
-const ${spacingProperty}Map = {
-  ${activeTokens
-    .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
-    .map(token => {
-      const propName = propNameFormatter
-        ? propNameFormatter(token.name)
-        : token.name;
-
-      // a responsive output simply prints out a mapping of tokens
-      if (responsiveOutput) {
-        return `'${token.name}': ${tokenCall(token.name, token.fallback)}`;
-      }
-
-      return `'${propName}': ${tokenToStyle(
-        [cssProperties] as any,
-        token.name,
-        token.fallback,
-      )}`;
-    })}
-  } as const;`,
+  const ${spacingProperty}Map = Object.fromEntries(
+    [
+      '${cssProperties.join("','")}',
+    ].map((property: string) => [
+      property,
+      {
+    ${activeTokens
+      .sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, { numeric: true }),
+      )
+      .map(token => {
+        const propName = propNameFormatter
+          ? propNameFormatter(token.name)
+          : token.name;
+        return `'${propName}': ${tokenToStyle(
+          '[property]' as any,
+          token.name,
+          token.fallback,
+        )}`;
+      })}
+    } as const,
+  ]));`,
       {
         singleQuote: true,
         trailingComma: 'all',
@@ -89,8 +89,8 @@ const ${spacingProperty}Map = {
       .map(
         cssProperty =>
           `\nexport type ${capitalize(
-            cssProperties.length === 1 ? spacingProperty : cssProperty,
-          )} = keyof typeof ${spacingProperty}Map;`,
+            cssProperty,
+          )} = keyof typeof ${spacingProperty}Map.${cssProperty};`,
       )
       .join('') +
       '\n')