@atlaskit/ds-explorations 2.3.2 → 2.4.0

package/report.api.md

@@ -15,10 +15,17 @@
 <!--SECTION START: Main Entry Types-->
 
 ```ts
+import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import type { CSSProperties } from 'react';
+import { ElementType } from 'react';
 import { FC } from 'react';
+import { ForwardRefExoticComponent } from 'react';
 import { jsx } from '@emotion/react';
+import { MemoExoticComponent } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
 
 // @public (undocumented)
@@ -27,6 +34,41 @@ const asAllowlist: readonly ['span', 'div', 'p', 'strong'];
 // @public (undocumented)
 type AsElement = (typeof asAllowlist)[number];
 
+// @public (undocumented)
+type BackgroundColor = keyof typeof backgroundColorMap;
+
+// @public (undocumented)
+const backgroundColorMap: {
+  readonly disabled: SerializedStyles;
+  readonly input: SerializedStyles;
+  readonly 'inverse.subtle': SerializedStyles;
+  readonly neutral: SerializedStyles;
+  readonly 'neutral.subtle': SerializedStyles;
+  readonly 'neutral.bold': SerializedStyles;
+  readonly selected: SerializedStyles;
+  readonly 'selected.bold': SerializedStyles;
+  readonly 'brand.subtlest': SerializedStyles;
+  readonly 'brand.bold': SerializedStyles;
+  readonly 'brand.boldest': SerializedStyles;
+  readonly danger: SerializedStyles;
+  readonly 'danger.bold': SerializedStyles;
+  readonly warning: SerializedStyles;
+  readonly 'warning.bold': SerializedStyles;
+  readonly success: SerializedStyles;
+  readonly 'success.bold': SerializedStyles;
+  readonly discovery: SerializedStyles;
+  readonly 'discovery.bold': SerializedStyles;
+  readonly information: SerializedStyles;
+  readonly 'information.bold': SerializedStyles;
+  readonly 'color.blanket': SerializedStyles;
+  readonly 'color.blanket.selected': SerializedStyles;
+  readonly 'color.blanket.danger': SerializedStyles;
+  readonly 'elevation.surface': SerializedStyles;
+  readonly 'elevation.surface.overlay': SerializedStyles;
+  readonly 'elevation.surface.raised': SerializedStyles;
+  readonly 'elevation.surface.sunken': SerializedStyles;
+};
+
 // @public (undocumented)
 const backgroundHoverColorMap: {
   'accent.lime.subtlest': SerializedStyles;
@@ -100,6 +142,227 @@ interface BasePrimitiveProps {
   UNSAFE_style?: CSSProperties;
 }
 
+// @public (undocumented)
+type BorderColor = keyof typeof borderColorMap;
+
+// @public
+const borderColorMap: {
+  readonly 'color.border': SerializedStyles;
+  readonly disabled: SerializedStyles;
+  readonly focused: SerializedStyles;
+  readonly input: SerializedStyles;
+  readonly inverse: SerializedStyles;
+  readonly selected: SerializedStyles;
+  readonly brand: SerializedStyles;
+  readonly danger: SerializedStyles;
+  readonly warning: SerializedStyles;
+  readonly success: SerializedStyles;
+  readonly discovery: SerializedStyles;
+  readonly information: SerializedStyles;
+  readonly bold: SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderRadius = keyof typeof borderRadiusMap;
+
+// @public (undocumented)
+const borderRadiusMap: {
+  normal: SerializedStyles;
+  rounded: SerializedStyles;
+  badge: SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderStyle = keyof typeof borderStyleMap;
+
+// @public (undocumented)
+const borderStyleMap: {
+  none: SerializedStyles;
+  solid: SerializedStyles;
+  dashed: SerializedStyles;
+  dotted: SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderWidth = keyof typeof borderWidthMap;
+
+// @public (undocumented)
+const borderWidthMap: {
+  '0px': SerializedStyles;
+  '1px': SerializedStyles;
+  '2px': SerializedStyles;
+  '3px': SerializedStyles;
+};
+
+// @public (undocumented)
+type BoxComponent<T extends ElementType = 'div'> = (<
+  T extends ElementType = 'div',
+>(
+  props: UNSAFE_BoxProps<T>,
+) => ReactElement | null) &
+  FC<UNSAFE_BoxProps<T>>;
+
+// @public (undocumented)
+type BoxPropsBase<T extends ElementType> = {
+  as?: T;
+  children?: ReactNode;
+  className?: string;
+  backgroundColor?: BackgroundColor;
+  shadow?: Shadow;
+  borderStyle?: BorderStyle;
+  borderWidth?: BorderWidth;
+  borderColor?: BorderColor;
+  borderRadius?: BorderRadius;
+  layer?: Layer;
+  flexDirection?: FlexDirection;
+  alignItems?: FlexAlignItems;
+  justifyContent?: FlexJustifyContent;
+  overflow?: Overflow;
+  padding?: Padding;
+  paddingBlock?: PaddingBlock;
+  paddingInline?: PaddingInline;
+  width?: Width;
+  height?: Height;
+  display?: Display;
+  position?: Position;
+  ref?: ComponentPropsWithRef<T>['ref'];
+};
+
+// @public (undocumented)
+type ColumnGap = keyof typeof columnGapMap;
+
+// @public
+const columnGapMap: {
+  'space.0': SerializedStyles;
+  'space.025': SerializedStyles;
+  'space.050': SerializedStyles;
+  'space.075': SerializedStyles;
+  'space.100': SerializedStyles;
+  'space.1000': SerializedStyles;
+  'space.150': SerializedStyles;
+  'space.200': SerializedStyles;
+  'space.250': SerializedStyles;
+  'space.300': SerializedStyles;
+  'space.400': SerializedStyles;
+  'space.500': SerializedStyles;
+  'space.600': SerializedStyles;
+  'space.800': SerializedStyles;
+};
+
+// @public (undocumented)
+type Display = keyof typeof displayMap;
+
+// @public (undocumented)
+const displayMap: {
+  block: SerializedStyles;
+  inline: SerializedStyles;
+  flex: SerializedStyles;
+  inlineFlex: SerializedStyles;
+  inlineBlock: SerializedStyles;
+};
+
+// @public
+type FlexAlignItems = keyof typeof flexAlignItemsMap;
+
+// @public (undocumented)
+type FlexAlignItems_2 = keyof typeof flexAlignItemsMap_2;
+
+// @public (undocumented)
+type FlexAlignItems_3 = keyof typeof flexAlignItemsMap_3;
+
+// @public (undocumented)
+const flexAlignItemsMap: {
+  center: SerializedStyles;
+  baseline: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexAlignItemsMap_2: {
+  center: SerializedStyles;
+  baseline: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexAlignItemsMap_3: {
+  center: SerializedStyles;
+  baseline: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
+};
+
+// @public
+type FlexDirection = keyof typeof flexDirectionMap;
+
+// @public (undocumented)
+const flexDirectionMap: {
+  column: SerializedStyles;
+  row: SerializedStyles;
+};
+
+// @public
+type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+
+// @public (undocumented)
+type FlexJustifyContent_2 = keyof typeof flexJustifyContentMap_2;
+
+// @public (undocumented)
+type FlexJustifyContent_3 = keyof typeof flexJustifyContentMap_3;
+
+// @public (undocumented)
+const flexJustifyContentMap: {
+  center: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexJustifyContentMap_2: {
+  center: SerializedStyles;
+  flexStart: SerializedStyles;
+  'space-between': SerializedStyles;
+  flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
+  spaceBetween: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexJustifyContentMap_3: {
+  center: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
+};
+
+// @public (undocumented)
+type FlexWrap = keyof typeof flexWrapMap;
+
+// @public (undocumented)
+type FlexWrap_2 = keyof typeof flexWrapMap_2;
+
+// @public (undocumented)
+const flexWrapMap: {
+  wrap: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexWrapMap_2: {
+  wrap: SerializedStyles;
+};
+
 // @public (undocumented)
 type FontSize = keyof typeof fontSizeMap;
 
@@ -126,6 +389,21 @@ const fontWeightMap: {
   semibold: SerializedStyles;
 };
 
+// @public (undocumented)
+type Height = keyof typeof heightMap;
+
+// @public (undocumented)
+const heightMap: {
+  '100%': SerializedStyles;
+  'size.100': SerializedStyles;
+  'size.1000': SerializedStyles;
+  'size.200': SerializedStyles;
+  'size.300': SerializedStyles;
+  'size.400': SerializedStyles;
+  'size.500': SerializedStyles;
+  'size.600': SerializedStyles;
+};
+
 // @public (undocumented)
 type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
 
@@ -137,6 +415,22 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
   children: ReactNode;
 }
 
+// @public (undocumented)
+type Layer = keyof typeof LAYERS;
+
+// @public (undocumented)
+const LAYERS: {
+  readonly card: 100;
+  readonly navigation: 200;
+  readonly dialog: 300;
+  readonly layer: 400;
+  readonly blanket: 500;
+  readonly modal: 510;
+  readonly flag: 600;
+  readonly spotlight: 700;
+  readonly tooltip: 800;
+};
+
 // @public (undocumented)
 type LineHeight = keyof typeof lineHeightMap;
 
@@ -151,6 +445,122 @@ const lineHeightMap: {
   'lineHeight.600': SerializedStyles;
 };
 
+// @public (undocumented)
+type Overflow = keyof typeof overflowMap;
+
+// @public (undocumented)
+const overflowMap: {
+  auto: SerializedStyles;
+  hidden: SerializedStyles;
+};
+
+// @public (undocumented)
+type Padding = keyof typeof paddingMap;
+
+// @public (undocumented)
+type PaddingBlock = keyof typeof paddingBlockMap;
+
+// @public (undocumented)
+const paddingBlockMap: {
+  'space.0': SerializedStyles;
+  'space.025': SerializedStyles;
+  'space.050': SerializedStyles;
+  'space.075': SerializedStyles;
+  'space.100': SerializedStyles;
+  'space.1000': SerializedStyles;
+  'space.150': SerializedStyles;
+  'space.200': SerializedStyles;
+  'space.250': SerializedStyles;
+  'space.300': SerializedStyles;
+  'space.400': SerializedStyles;
+  'space.500': SerializedStyles;
+  'space.600': SerializedStyles;
+  'space.800': SerializedStyles;
+};
+
+// @public (undocumented)
+type PaddingInline = keyof typeof paddingInlineMap;
+
+// @public (undocumented)
+const paddingInlineMap: {
+  'space.0': SerializedStyles;
+  'space.025': SerializedStyles;
+  'space.050': SerializedStyles;
+  'space.075': SerializedStyles;
+  'space.100': SerializedStyles;
+  'space.1000': SerializedStyles;
+  'space.150': SerializedStyles;
+  'space.200': SerializedStyles;
+  'space.250': SerializedStyles;
+  'space.300': SerializedStyles;
+  'space.400': SerializedStyles;
+  'space.500': SerializedStyles;
+  'space.600': SerializedStyles;
+  'space.800': SerializedStyles;
+};
+
+// @public
+const paddingMap: {
+  'space.0': SerializedStyles;
+  'space.025': SerializedStyles;
+  'space.050': SerializedStyles;
+  'space.075': SerializedStyles;
+  'space.100': SerializedStyles;
+  'space.1000': SerializedStyles;
+  'space.150': SerializedStyles;
+  'space.200': SerializedStyles;
+  'space.250': SerializedStyles;
+  'space.300': SerializedStyles;
+  'space.400': SerializedStyles;
+  'space.500': SerializedStyles;
+  'space.600': SerializedStyles;
+  'space.800': SerializedStyles;
+};
+
+// @public (undocumented)
+type Position = keyof typeof positionMap;
+
+// @public (undocumented)
+const positionMap: {
+  absolute: SerializedStyles;
+  fixed: SerializedStyles;
+  relative: SerializedStyles;
+  static: SerializedStyles;
+};
+
+// @public (undocumented)
+type RowGap = keyof typeof rowGapMap;
+
+// @public
+const rowGapMap: {
+  'space.0': SerializedStyles;
+  'space.025': SerializedStyles;
+  'space.050': SerializedStyles;
+  'space.075': SerializedStyles;
+  'space.100': SerializedStyles;
+  'space.1000': SerializedStyles;
+  'space.150': SerializedStyles;
+  'space.200': SerializedStyles;
+  'space.250': SerializedStyles;
+  'space.300': SerializedStyles;
+  'space.400': SerializedStyles;
+  'space.500': SerializedStyles;
+  'space.600': SerializedStyles;
+  'space.800': SerializedStyles;
+};
+
+// @public (undocumented)
+type Shadow = keyof typeof shadowMap;
+
+// @public (undocumented)
+const shadowMap: {
+  readonly overflow: SerializedStyles;
+  readonly 'overflow.perimeter': SerializedStyles;
+  readonly 'overflow.spread': SerializedStyles;
+  readonly overlay: SerializedStyles;
+  readonly raised: SerializedStyles;
+};
+
 // @public (undocumented)
 type TextAlign = keyof typeof textAlignMap;
 
@@ -191,6 +601,32 @@ const textTransformMap: {
   uppercase: SerializedStyles;
 };
 
+// @public @deprecated
+export const UNSAFE_Box: BoxComponent;
+
+// @public @deprecated (undocumented)
+export type UNSAFE_BoxProps<T extends ElementType = 'div'> = Omit<
+  ComponentPropsWithoutRef<T>,
+  'as' | 'className' | 'style'
+> &
+  BasePrimitiveProps &
+  BoxPropsBase<T>;
+
+// @public @deprecated
+export const UNSAFE_Inline: MemoExoticComponent<
+  ForwardRefExoticComponent<UNSAFE_InlineProps & RefAttributes<HTMLDivElement>>
+>;
+
+// @public @deprecated (undocumented)
+export interface UNSAFE_InlineProps extends BasePrimitiveProps {
+  alignItems?: FlexAlignItems_2;
+  children: ReactNode;
+  divider?: ReactNode;
+  flexWrap?: FlexWrap;
+  gap: ColumnGap;
+  justifyContent?: FlexJustifyContent_2;
+}
+
 // @public (undocumented)
 export const UNSAFE_InteractionSurface: ({
   appearance,
@@ -198,6 +634,20 @@ export const UNSAFE_InteractionSurface: ({
   testId,
 }: InteractionSurfaceProps) => jsx.JSX.Element;
 
+// @public @deprecated
+export const UNSAFE_Stack: MemoExoticComponent<
+  ForwardRefExoticComponent<UNSAFE_StackProps & RefAttributes<HTMLDivElement>>
+>;
+
+// @public @deprecated (undocumented)
+export interface UNSAFE_StackProps extends BasePrimitiveProps {
+  alignItems?: FlexAlignItems_3;
+  children: ReactNode;
+  flexWrap?: FlexWrap_2;
+  gap: RowGap;
+  justifyContent?: FlexJustifyContent_3;
+}
+
 // @internal
 export const UNSAFE_Text: FC<UNSAFE_TextProps>;
 
@@ -226,6 +676,21 @@ const verticalAlignMap: {
   bottom: SerializedStyles;
 };
 
+// @public (undocumented)
+type Width = keyof typeof widthMap;
+
+// @public
+const widthMap: {
+  '100%': SerializedStyles;
+  'size.100': SerializedStyles;
+  'size.1000': SerializedStyles;
+  'size.200': SerializedStyles;
+  'size.300': SerializedStyles;
+  'size.400': SerializedStyles;
+  'size.500': SerializedStyles;
+  'size.600': SerializedStyles;
+};
+
 // (No @packageDocumentation comment for this package)
 ```
 

package/scripts/codegen-styles.tsx

@@ -9,7 +9,10 @@ import {
 
 import { createColorStylesFromTemplate } from './color-codegen-template';
 import { createColorMapTemplate } from './color-map-template';
+import { createDimensionStylesFromTemplate } from './dimension-codegen-template';
 import { createInteractionStylesFromTemplate } from './interaction-codegen';
+import { createStylesFromTemplate } from './misc-codegen-template';
+import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
 import { createSpacingScaleTemplate } from './spacing-scale-template';
 import { createTypographyStylesFromTemplate } from './typography-codegen-template';
 
@@ -17,7 +20,9 @@ const colorMapOutputFolder = join(__dirname, '../', 'src', 'internal');
 const colorTokensDependencyPath = require.resolve(
   '../../tokens/src/artifacts/tokens-raw/atlassian-light',
 );
-
+const spacingTokensDependencyPath = require.resolve(
+  '../../tokens/src/artifacts/tokens-raw/atlassian-spacing',
+);
 const typographyTokensDependencyPath = require.resolve(
   '../../tokens/src/artifacts/tokens-raw/atlassian-typography',
 );
@@ -43,24 +48,52 @@ writeFile(
 
 // generate colors
 Promise.all(
-  [{ target: 'text.partial.tsx' }].map(({ target }) => {
-    const targetPath = join(__dirname, '../', 'src', 'components', target);
+  [{ target: 'text.partial.tsx' }, { target: 'box.partial.tsx' }].map(
+    ({ target }) => {
+      const targetPath = join(__dirname, '../', 'src', 'components', target);
 
-    const source = createPartialSignedArtifact(
-      (options) => options.map(createColorStylesFromTemplate).join('\n'),
-      'yarn codegen-styles',
-      {
-        id: 'colors',
-        absoluteFilePath: targetPath,
-        dependencies: [colorTokensDependencyPath],
-      },
-    );
+      const source = createPartialSignedArtifact(
+        (options) => options.map(createColorStylesFromTemplate).join('\n'),
+        'yarn codegen-styles',
+        {
+          id: 'colors',
+          absoluteFilePath: targetPath,
+          dependencies: [colorTokensDependencyPath],
+        },
+      );
 
-    return writeFile(targetPath, source).then(() =>
-      console.log(`${targetPath} written!`),
-    );
-  }),
+      return writeFile(targetPath, source).then(() =>
+        console.log(`${targetPath} written!`),
+      );
+    },
+  ),
 )
+  .then(() => {
+    // generate spacing values
+    return Promise.all(
+      [
+        { target: 'box.partial.tsx' },
+        { target: 'stack.partial.tsx' },
+        { target: 'inline.partial.tsx' },
+      ].map(({ target }) => {
+        const targetPath = join(__dirname, '../', 'src', 'components', target);
+
+        const source = createPartialSignedArtifact(
+          (options) => options.map(createSpacingStylesFromTemplate).join('\n'),
+          'yarn codegen-styles',
+          {
+            id: 'spacing',
+            absoluteFilePath: targetPath,
+            dependencies: [spacingTokensDependencyPath],
+          },
+        );
+
+        return writeFile(targetPath, source).then(() =>
+          console.log(`${targetPath} written!`),
+        );
+      }),
+    );
+  })
   .then(() => {
     // generate typography values
     return Promise.all(
@@ -84,6 +117,24 @@ Promise.all(
       }),
     );
   })
+  .then(() => {
+    // generate other values
+    return Promise.all(
+      [{ target: 'box.partial.tsx' }].map(({ target }) => {
+        const targetPath = join(__dirname, '../', 'src', 'components', target);
+
+        const source = createPartialSignedArtifact(
+          (options) => options.map(createStylesFromTemplate).join('\n'),
+          'yarn codegen-styles',
+          { id: 'misc', absoluteFilePath: targetPath },
+        );
+
+        return writeFile(targetPath, source).then(() =>
+          console.log(`${targetPath} written!`),
+        );
+      }),
+    );
+  })
   .then(() => {
     const targetPath = join(
       __dirname,
@@ -103,6 +154,28 @@ Promise.all(
       },
     );
 
+    return writeFile(targetPath, source).then(() =>
+      console.log(`${targetPath} written!`),
+    );
+  })
+  .then(() => {
+    const targetPath = join(
+      __dirname,
+      '../',
+      'src',
+      'components',
+      'box.partial.tsx',
+    );
+
+    const source = createPartialSignedArtifact(
+      (options) => options.map(createDimensionStylesFromTemplate).join('\n'),
+      'yarn codegen-styles',
+      {
+        id: 'dimensions',
+        absoluteFilePath: targetPath,
+      },
+    );
+
     return writeFile(targetPath, source).then(() =>
       console.log(`${targetPath} written!`),
     );