@atlaskit/ds-explorations 2.2.14 → 2.3.0

package/report.api.md

@@ -15,17 +15,10 @@
 <!--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)
@@ -34,41 +27,6 @@ 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;
@@ -142,227 +100,6 @@ 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;
 
@@ -389,21 +126,6 @@ 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;
 
@@ -415,22 +137,6 @@ 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;
 
@@ -445,122 +151,6 @@ 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;
 
@@ -601,32 +191,6 @@ 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,
@@ -634,20 +198,6 @@ 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>;
 
@@ -676,21 +226,6 @@ 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,10 +9,7 @@ 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';
 
@@ -20,9 +17,7 @@ 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',
 );
@@ -48,52 +43,24 @@ writeFile(
 
 // generate colors
 Promise.all(
-  [{ 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],
-        },
-      );
-
-      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);
+  [{ target: 'text.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],
-          },
-        );
+    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 typography values
     return Promise.all(
@@ -117,24 +84,6 @@ 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,
@@ -154,28 +103,6 @@ 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!`),
     );

package/src/components/__tests__/unit/interaction-suface.test.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { act, fireEvent, render } from '@testing-library/react';
 
+import { Box } from '@atlaskit/primitives';
 import { token } from '@atlaskit/tokens';
 
 import {
-  UNSAFE_Box as Box,
   UNSAFE_InteractionSurface as InteractionSurface,
   UNSAFE_Text as Text,
 } from '../../../index';
@@ -57,7 +57,7 @@ describe('InteractionSurface component', () => {
 
   it('should render an inherited hover state if a Box context is present', () => {
     const { getByTestId } = render(
-      <Box backgroundColor="brand.bold">
+      <Box backgroundColor="color.background.brand.bold">
         <InteractionSurface testId="surface">
           <Text>hello</Text>
         </InteractionSurface>

package/src/components/surface-provider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 
-import type { BackgroundColor } from './box.partial';
+import type { BackgroundColor } from '@atlaskit/primitives';
 
 /**
  * __Surface context__