@atlaskit/ds-explorations 0.1.0 → 0.1.3

package/report.api.md

@@ -4,15 +4,20 @@
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
-```ts
-import { CSSProperties } from 'react';
+````ts
+import type { CSSProperties } from 'react';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
+import { jsx } from '@emotion/react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
-import { SerializedStyles } from '@emotion/utils';
+import { SerializedStyles } from '@emotion/react';
+
+declare const asAllowlist: readonly ['span', 'div', 'p'];
+
+declare type AsElement = typeof asAllowlist[number];
 
 declare type BackgroundColor = keyof typeof backgroundColorMap;
 
@@ -45,6 +50,27 @@ declare const backgroundColorMap: {
   'elevation.surface.overlay': SerializedStyles;
 };
 
+declare const backgroundHoverColorMap: {
+  'inverse.subtle': SerializedStyles;
+  input: SerializedStyles;
+  neutral: SerializedStyles;
+  'neutral.subtle': SerializedStyles;
+  'neutral.bold': SerializedStyles;
+  'brand.bold': SerializedStyles;
+  selected: SerializedStyles;
+  'selected.bold': SerializedStyles;
+  danger: SerializedStyles;
+  'danger.bold': SerializedStyles;
+  warning: SerializedStyles;
+  'warning.bold': SerializedStyles;
+  success: SerializedStyles;
+  'success.bold': SerializedStyles;
+  discovery: SerializedStyles;
+  'discovery.bold': SerializedStyles;
+  information: SerializedStyles;
+  'information.bold': SerializedStyles;
+};
+
 declare interface BasePrimitiveProps {
   /**
    * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
@@ -62,7 +88,7 @@ declare type BorderColor = keyof typeof borderColorMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e3f27406477352f51168b4108558f051>>
+ * @codegen <<SignedSource::ebb55786a54803214357d0eef0cac448>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
@@ -109,78 +135,6 @@ declare const borderWidthMap: {
   '3px': SerializedStyles;
 };
 
-declare interface BoxProps
-  extends Omit<HTMLAttributes<HTMLElement>, 'style'>,
-    BasePrimitiveProps {
-  /**
-   * The DOM element to render as the Box. Defaults to `div`.
-   */
-  as?: ElementType;
-  /**
-   * Elements to be rendered inside the Box.
-   */
-  children: ReactNode;
-  /**
-   * Token representing background color with a fallback.
-   */
-  backgroundColor?: [BackgroundColor, string];
-  /**
-   * Defines border style.
-   */
-  borderStyle?: BorderStyle;
-  /**
-   * Defines border width.
-   */
-  borderWidth?: BorderWidth;
-  /**
-   * Token representing border color with a fallback.
-   */
-  borderColor?: [BorderColor, string];
-  /**
-   * Defines border radius.
-   */
-  borderRadius?: BorderRadius;
-  /**
-   * Defines the main axis direction.
-   */
-  flexDirection?: FlexDirection;
-  /**
-   * Used to align children along the cross axis.
-   */
-  alignItems?: FlexAlignItems;
-  /**
-   * Used to align children along the main axis.
-   */
-  justifyContent?: FlexJustifyContent;
-  /**
-   * Shorthand for `paddingBlock` and `paddingInline` together.
-   *
-   * @see paddingBlock
-   * @see paddingInline
-   */
-  padding?: GlobalSpacingToken;
-  /**
-   * Token representing CSS `padding-block`.
-   */
-  paddingBlock?: GlobalSpacingToken;
-  /**
-   * Token representing CSS `padding-inline`.
-   */
-  paddingInline?: GlobalSpacingToken;
-  /**
-   * Token representing width.
-   */
-  width?: GlobalSpacingToken;
-  /**
-   * Token representing height.
-   */
-  height?: GlobalSpacingToken;
-  /**
-   * Defines display type and layout. Defaults to `flex`.
-   */
-  display?: Display;
-}
-
 declare type Display = keyof typeof displayMap;
 
 declare const displayMap: {
@@ -251,9 +205,9 @@ declare const flexJustifyContentMap_3: {
 declare type FontSize = keyof typeof fontSizeMap;
 
 declare const fontSizeMap: {
-  '11': SerializedStyles;
-  '12': SerializedStyles;
-  '14': SerializedStyles;
+  '11px': SerializedStyles;
+  '12px': SerializedStyles;
+  '14px': SerializedStyles;
 };
 
 declare type FontWeight = keyof typeof fontWeightMap;
@@ -261,9 +215,10 @@ declare type FontWeight = keyof typeof fontWeightMap;
 declare const fontWeightMap: {
   '400': SerializedStyles;
   '500': SerializedStyles;
+  '700': SerializedStyles;
 };
 
-declare type GlobalSpacingToken = keyof typeof SPACING_SCALE;
+declare type GlobalSpacingToken = keyof typeof UNSAFE_SPACING_SCALE;
 
 declare interface InlineProps extends BasePrimitiveProps {
   /**
@@ -289,6 +244,13 @@ declare interface InlineProps extends BasePrimitiveProps {
   children: ReactNode;
 }
 
+declare type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
+
+declare interface InteractionSurfaceProps extends BasePrimitiveProps {
+  children?: ReactNode;
+  appearance?: InteractionBackgroundColor;
+}
+
 declare type LineHeight = keyof typeof lineHeightMap;
 
 declare const lineHeightMap: {
@@ -301,18 +263,10 @@ declare const lineHeightMap: {
   '40px': SerializedStyles;
 };
 
-declare const SPACING_SCALE: {
-  'sp-0': number;
-  'sp-25': number;
-  'sp-50': number;
-  'sp-75': number;
-  'sp-100': number;
-  'sp-200': number;
-  'sp-300': number;
-  'sp-400': number;
-  'sp-500': number;
-  'sp-600': number;
-  'sp-800': number;
+declare const positionMap: {
+  absolute: SerializedStyles;
+  relative: SerializedStyles;
+  static: SerializedStyles;
 };
 
 declare interface StackProps extends BasePrimitiveProps {
@@ -346,7 +300,7 @@ declare type TextColor = keyof typeof textColorMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::85a0a0bc073c7af8fd63101d6c88d59e>>
+ * @codegen <<SignedSource::140ffff6e1310c1c37e2067e2c232b92>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
@@ -367,65 +321,114 @@ declare const textColorMap: {
   information: SerializedStyles;
 };
 
-declare interface TextProps extends BasePrimitiveProps {
+declare type TextTransform = keyof typeof textTransformMap;
+
+declare const textTransformMap: {
+  none: SerializedStyles;
+  lowercase: SerializedStyles;
+  uppercase: SerializedStyles;
+};
+
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+export declare const UNSAFE_Box: ForwardRefExoticComponent<
+  UNSAFE_BoxProps<HTMLElement> & RefAttributes<HTMLElement>
+>;
+
+export declare interface UNSAFE_BoxProps<T extends HTMLElement = HTMLElement>
+  extends Omit<HTMLAttributes<T>, 'style' | 'as' | 'className'>,
+    BasePrimitiveProps {
   /**
-   * HTML tag to be rendered. Defaults to `span`.
+   * The DOM element to render as the Box. Defaults to `div`.
    */
-  as?:
-    | 'span'
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'label'
-    | 'a'
-    | 'ul'
-    | 'ol'
-    | 'p';
+  as?: ElementType;
   /**
-   * Elements rendered within the Text element
+   * Elements to be rendered inside the Box.
    */
-  children: ReactNode;
+  children?: ReactNode;
   /**
-   * Text color
+   * The html className attribute.
+   *
+   * Before using this prop please ensure:
+   * - The styles cannot otherwise be achieved through `Box` directly.
+   * - The use case needs custom styles that cannot be designed or implemented differently
+   *
+   * Ensure you're using the `@atlaskit/eslint-plugin-design-system` with this prop to prevent unbounded usage.
+   *
+   * @see `@atlaskit/eslint-plugin-design-system`
    */
-  color?: [TextColor, string];
+  className?: string;
   /**
-   * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
+   * Token representing background color with a fallback.
    */
-  fontSize?: FontSize;
+  backgroundColor?: [BackgroundColor, string];
   /**
-   * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+   * Defines border style.
    */
-  fontWeight?: FontWeight;
+  borderStyle?: BorderStyle;
   /**
-   * Line height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
+   * Defines border width.
    */
-  lineHeight?: LineHeight;
+  borderWidth?: BorderWidth;
   /**
-   * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+   * Token representing border color with a fallback.
    */
-  textAlign?: TextAlign;
+  borderColor?: [BorderColor, string];
+  /**
+   * Defines border radius.
+   */
+  borderRadius?: BorderRadius;
+  /**
+   * Defines the main axis direction.
+   */
+  flexDirection?: FlexDirection;
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignItems?: FlexAlignItems;
   /**
-   * For use with `a` link tags.
+   * Used to align children along the main axis.
    */
-  href?: string;
+  justifyContent?: FlexJustifyContent;
+  /**
+   * Shorthand for `paddingBlock` and `paddingInline` together.
+   *
+   * @see paddingBlock
+   * @see paddingInline
+   */
+  padding?: GlobalSpacingToken;
+  /**
+   * Token representing CSS `padding-block`.
+   */
+  paddingBlock?: GlobalSpacingToken;
+  /**
+   * Token representing CSS `padding-inline`.
+   */
+  paddingInline?: GlobalSpacingToken;
+  /**
+   * Token representing width.
+   */
+  width?: GlobalSpacingToken;
+  /**
+   * Token representing height.
+   */
+  height?: GlobalSpacingToken;
+  /**
+   * Defines display type and layout. Defaults to `flex`.
+   */
+  display?: Display;
+  /**
+   * CSS position property.
+   */
+  position?: keyof typeof positionMap;
 }
 
-/**
- * __Box__
- *
- * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
- * Renders a `div` by default.
- *
- * @internal
- */
-export declare const UNSAFE_Box: ForwardRefExoticComponent<
-  BoxProps & RefAttributes<HTMLElement>
->;
-
 /**
  * __Inline__
  *
@@ -437,6 +440,38 @@ export declare const UNSAFE_Inline: ForwardRefExoticComponent<
   InlineProps & RefAttributes<HTMLDivElement>
 >;
 
+/**
+ *
+ * @example
+ * ```js
+ * // a minimal icon button
+ * <Box as="button">
+ *   <InteractionSurface />
+ *   <WarningIcon label="icon button" />
+ * </Box>
+ * ```
+ */
+export declare const UNSAFE_InteractionSurface: ({
+  appearance,
+  children,
+  testId,
+}: InteractionSurfaceProps) => jsx.JSX.Element;
+
+export declare const UNSAFE_SPACING_SCALE: {
+  'sp-0': number;
+  'sp-25': number;
+  'sp-50': number;
+  'sp-75': number;
+  'sp-100': number;
+  'sp-150': number;
+  'sp-200': number;
+  'sp-300': number;
+  'sp-400': number;
+  'sp-500': number;
+  'sp-600': number;
+  'sp-800': number;
+};
+
 /**
  * __Stack__
  *
@@ -457,7 +492,59 @@ export declare const UNSAFE_Stack: ForwardRefExoticComponent<
  *
  * @internal
  */
-export declare const UNSAFE_Text: FC<TextProps>;
+export declare const UNSAFE_Text: FC<UNSAFE_TextProps>;
+
+export declare interface UNSAFE_TextProps extends BasePrimitiveProps {
+  /**
+   * HTML tag to be rendered. Defaults to `span`.
+   */
+  as?: AsElement;
+  /**
+   * Elements rendered within the Text element
+   */
+  children: ReactNode;
+  /**
+   * Text color
+   */
+  color?: [TextColor, string];
+  /**
+   * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
+   */
+  fontSize?: FontSize;
+  /**
+   * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+   */
+  fontWeight?: FontWeight;
+  /**
+   * Line height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
+   */
+  lineHeight?: LineHeight;
+  /**
+   * Truncates text with an ellipsis when text overflows its parent container
+   * (i.e. `width` has been set on parent that is shorter than text length).
+   */
+  shouldTruncate?: boolean;
+  /**
+   * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+   */
+  textAlign?: TextAlign;
+  /**
+   * Text transform https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
+   */
+  textTransform?: TextTransform;
+  /**
+   * Vertical align https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
+   */
+  verticalAlign?: VerticalAlign;
+}
+
+declare type VerticalAlign = keyof typeof verticalAlignMap;
+
+declare const verticalAlignMap: {
+  top: SerializedStyles;
+  middle: SerializedStyles;
+  bottom: SerializedStyles;
+};
 
 export {};
-```
+````

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -94,7 +94,7 @@ exports[`@atlaskit/design-system-explorations bg styles are generated correctly
   }),
 };
 
-type BackgroundColor = keyof typeof backgroundColorMap;
+export type BackgroundColor = keyof typeof backgroundColorMap;
 "
 `;
 
@@ -141,7 +141,168 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
   }),
 };
 
-type BorderColor = keyof typeof borderColorMap;
+export type BorderColor = keyof typeof borderColorMap;
+"
+`;
+
+exports[`@atlaskit/design-system-explorations border styles are generated correctly 2`] = `
+"const backgroundActiveColorMap = {
+  'inverse.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.inverse.subtle.pressed'),
+    },
+  }),
+  input: css({
+    ':active': { backgroundColor: token('color.background.input.pressed') },
+  }),
+  neutral: css({
+    ':active': { backgroundColor: token('color.background.neutral.pressed') },
+  }),
+  'neutral.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.neutral.subtle.pressed'),
+    },
+  }),
+  'neutral.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.neutral.bold.pressed'),
+    },
+  }),
+  'brand.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.brand.bold.pressed'),
+    },
+  }),
+  selected: css({
+    ':active': { backgroundColor: token('color.background.selected.pressed') },
+  }),
+  'selected.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.selected.bold.pressed'),
+    },
+  }),
+  danger: css({
+    ':active': { backgroundColor: token('color.background.danger.pressed') },
+  }),
+  'danger.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.danger.bold.pressed'),
+    },
+  }),
+  warning: css({
+    ':active': { backgroundColor: token('color.background.warning.pressed') },
+  }),
+  'warning.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.warning.bold.pressed'),
+    },
+  }),
+  success: css({
+    ':active': { backgroundColor: token('color.background.success.pressed') },
+  }),
+  'success.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.success.bold.pressed'),
+    },
+  }),
+  discovery: css({
+    ':active': { backgroundColor: token('color.background.discovery.pressed') },
+  }),
+  'discovery.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.discovery.bold.pressed'),
+    },
+  }),
+  information: css({
+    ':active': {
+      backgroundColor: token('color.background.information.pressed'),
+    },
+  }),
+  'information.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.information.bold.pressed'),
+    },
+  }),
+};
+
+const backgroundHoverColorMap = {
+  'inverse.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.inverse.subtle.hovered'),
+    },
+  }),
+  input: css({
+    ':hover': { backgroundColor: token('color.background.input.hovered') },
+  }),
+  neutral: css({
+    ':hover': { backgroundColor: token('color.background.neutral.hovered') },
+  }),
+  'neutral.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.neutral.subtle.hovered'),
+    },
+  }),
+  'neutral.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.neutral.bold.hovered'),
+    },
+  }),
+  'brand.bold': css({
+    ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
+  }),
+  selected: css({
+    ':hover': { backgroundColor: token('color.background.selected.hovered') },
+  }),
+  'selected.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.selected.bold.hovered'),
+    },
+  }),
+  danger: css({
+    ':hover': { backgroundColor: token('color.background.danger.hovered') },
+  }),
+  'danger.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.danger.bold.hovered'),
+    },
+  }),
+  warning: css({
+    ':hover': { backgroundColor: token('color.background.warning.hovered') },
+  }),
+  'warning.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.warning.bold.hovered'),
+    },
+  }),
+  success: css({
+    ':hover': { backgroundColor: token('color.background.success.hovered') },
+  }),
+  'success.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.success.bold.hovered'),
+    },
+  }),
+  discovery: css({
+    ':hover': { backgroundColor: token('color.background.discovery.hovered') },
+  }),
+  'discovery.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.discovery.bold.hovered'),
+    },
+  }),
+  information: css({
+    ':hover': {
+      backgroundColor: token('color.background.information.hovered'),
+    },
+  }),
+  'information.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.information.bold.hovered'),
+    },
+  }),
+};
+
+type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
 "
 `;
 
@@ -188,6 +349,6 @@ exports[`@atlaskit/design-system-explorations text styles are generated correctl
   }),
 };
 
-type TextColor = keyof typeof textColorMap;
+export type TextColor = keyof typeof textColorMap;
 "
 `;

package/scripts/__tests__/codegen.test.tsx

@@ -1,4 +1,5 @@
 import { createColorStylesFromTemplate } from '../color-codegen-template';
+import { createInteractionStylesFromTemplate } from '../interaction-codegen';
 describe('@atlaskit/design-system-explorations', () => {
   test('text styles are generated correctly', () => {
     expect(createColorStylesFromTemplate('text')).toMatchSnapshot();
@@ -12,6 +13,10 @@ describe('@atlaskit/design-system-explorations', () => {
     expect(createColorStylesFromTemplate('border')).toMatchSnapshot();
   });
 
+  test('border styles are generated correctly', () => {
+    expect(createInteractionStylesFromTemplate('background')).toMatchSnapshot();
+  });
+
   test('incorrect config throws', () => {
     expect(() =>
       createColorStylesFromTemplate('fizzbuzz' as any),