@atlaskit/ds-explorations 0.1.3 → 0.1.5

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

@@ -223,6 +223,15 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
       backgroundColor: token('color.background.information.bold.pressed'),
     },
   }),
+  'elevation.surface': css({
+    ':active': { backgroundColor: token('elevation.surface.pressed') },
+  }),
+  'elevation.surface.raised': css({
+    ':active': { backgroundColor: token('elevation.surface.raised.pressed') },
+  }),
+  'elevation.surface.overlay': css({
+    ':active': { backgroundColor: token('elevation.surface.overlay.pressed') },
+  }),
 };
 
 const backgroundHoverColorMap = {
@@ -300,6 +309,15 @@ const backgroundHoverColorMap = {
       backgroundColor: token('color.background.information.bold.hovered'),
     },
   }),
+  'elevation.surface': css({
+    ':hover': { backgroundColor: token('elevation.surface.hovered') },
+  }),
+  'elevation.surface.raised': css({
+    ':hover': { backgroundColor: token('elevation.surface.raised.hovered') },
+  }),
+  'elevation.surface.overlay': css({
+    ':hover': { backgroundColor: token('elevation.surface.overlay.hovered') },
+  }),
 };
 
 type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;

package/scripts/spacing-codegen-template.tsx

@@ -22,6 +22,12 @@ const spacingProperties = {
   gap: {
     cssProperty: 'gap',
   },
+  columnGap: {
+    cssProperty: 'columnGap',
+  },
+  rowGap: {
+    cssProperty: 'rowGap',
+  },
 } as const;
 
 export const createSpacingStylesFromTemplate = (

package/src/components/__tests__/unit/box.test.tsx

@@ -10,7 +10,11 @@ describe('Box component', () => {
   const testId = 'test';
 
   it('should render box', () => {
-    const { getByText } = render(<Box>Box</Box>);
+    const { getByText } = render(
+      <Box>
+        <Text>Box</Text>
+      </Box>,
+    );
     expect(getByText('Box')).toBeInTheDocument();
   });
 
@@ -43,7 +47,11 @@ describe('Box component', () => {
   });
 
   it('should render with a given test id', () => {
-    const { getByTestId } = render(<Box testId={testId}>Box with testid</Box>);
+    const { getByTestId } = render(
+      <Box testId={testId}>
+        <Text>Box with testid</Text>
+      </Box>,
+    );
     const element = getByTestId(testId);
     expect(element).toBeInTheDocument();
   });

package/src/components/__tests__/unit/inline.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { render } from '@testing-library/react';
 
-import { UNSAFE_Box as Box, UNSAFE_Inline as Inline } from '../../../index';
+import { UNSAFE_Inline as Inline, UNSAFE_Text as Text } from '../../../index';
 
 describe('Inline component', () => {
   const testId = 'test';
@@ -10,8 +10,8 @@ describe('Inline component', () => {
   it('should render inline', () => {
     const { getByText } = render(
       <Inline gap="sp-50">
-        <Box>1</Box>
-        <Box>2</Box>
+        <Text>1</Text>
+        <Text>2</Text>
       </Inline>,
     );
     expect(getByText('1')).toBeInTheDocument();
@@ -21,8 +21,8 @@ describe('Inline component', () => {
   it('should render inline with dividers', () => {
     const { getByText } = render(
       <Inline gap="sp-50" divider="/">
-        <Box>1</Box>
-        <Box>2</Box>
+        <Text>1</Text>
+        <Text>2</Text>
       </Inline>,
     );
     expect(getByText('1')).toBeInTheDocument();
@@ -33,8 +33,8 @@ describe('Inline component', () => {
   it('should render with a given test id', () => {
     const { getByTestId } = render(
       <Inline gap="sp-50" testId={testId}>
-        <Box>1</Box>
-        <Box>2</Box>
+        <Text>1</Text>
+        <Text>2</Text>
       </Inline>,
     );
     const element = getByTestId(testId);

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

@@ -7,18 +7,22 @@ import { token } from '@atlaskit/tokens';
 import {
   UNSAFE_Box as Box,
   UNSAFE_InteractionSurface as InteractionSurface,
+  UNSAFE_Text as Text,
 } from '../../../index';
 
 describe('InteractionSurface component', () => {
   it('should render by itself', () => {
-    const { getByTestId } = render(<InteractionSurface testId="basic" />);
+    const { getByTestId } = render(
+      <InteractionSurface testId="basic">
+        <></>
+      </InteractionSurface>,
+    );
     expect(getByTestId('basic')).toBeInTheDocument();
   });
   it('should render given a neutral hover interaction by default', () => {
     const { getByTestId } = render(
       <div style={{ position: 'relative' }}>
-        <InteractionSurface testId="surface" />
-        hello
+        <InteractionSurface testId="surface">hello</InteractionSurface>
       </div>,
     );
 
@@ -35,8 +39,9 @@ describe('InteractionSurface component', () => {
   it('should render given a brand hover interaction by if set as brand', () => {
     const { getByTestId } = render(
       <div style={{ position: 'relative' }}>
-        <InteractionSurface appearance="brand.bold" testId="surface" />
-        hello
+        <InteractionSurface appearance="brand.bold" testId="surface">
+          hello
+        </InteractionSurface>
       </div>,
     );
 
@@ -53,8 +58,9 @@ describe('InteractionSurface component', () => {
   it('should render an inherited hover state if a Box context is present', () => {
     const { getByTestId } = render(
       <Box backgroundColor={['brand.bold', '']}>
-        <InteractionSurface testId="surface" />
-        hello
+        <InteractionSurface testId="surface">
+          <Text>hello</Text>
+        </InteractionSurface>
       </Box>,
     );
 

package/src/components/__tests__/unit/stack.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { render } from '@testing-library/react';
 
-import { UNSAFE_Box as Box, UNSAFE_Stack as Stack } from '../../../index';
+import { UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '../../../index';
 
 describe('Stack component', () => {
   const testId = 'test';
@@ -10,8 +10,8 @@ describe('Stack component', () => {
   it('should render stack', () => {
     const { getByText } = render(
       <Stack gap="sp-50">
-        <Box>1</Box>
-        <Box>2</Box>
+        <Text>1</Text>
+        <Text>2</Text>
       </Stack>,
     );
     expect(getByText('1')).toBeInTheDocument();
@@ -21,8 +21,8 @@ describe('Stack component', () => {
   it('should render with a given test id', () => {
     const { getByTestId } = render(
       <Stack gap="sp-50" testId={testId}>
-        <Box>1</Box>
-        <Box>2</Box>
+        <Text>1</Text>
+        <Text>2</Text>
       </Stack>,
     );
     const element = getByTestId(testId);

package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-alignment-example-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:eb39d049b365eb764d234de27fd8c49646213232ae31347dc846a23924f10776
-size 16922
+oid sha256:7cb6c27a507db62fd86112957d61a1e179013d3ca020a61e91064a33447a7271
+size 23986

package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-alignment-example-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3f907bdcd1449e0444850ddeb4301d6fa1fad478b4c8743d6aec32ceadf2f544
-size 19305
+oid sha256:3a37629aa269d2b05af02d0203219d88df7319357a88dab893c4ed9286dd6e9f
+size 26608

package/src/components/box.partial.tsx

@@ -1,11 +1,5 @@
 /** @jsx jsx */
-import {
-  CSSProperties,
-  ElementType,
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-} from 'react';
+import { CSSProperties, ElementType, forwardRef, HTMLAttributes } from 'react';
 
 import { css, jsx } from '@emotion/react';
 
@@ -14,7 +8,7 @@ import { token } from '@atlaskit/tokens';
 import { GlobalSpacingToken, SPACING_SCALE } from '../constants';
 
 import { SurfaceContext } from './surface-provider';
-import { BasePrimitiveProps } from './types';
+import type { BasePrimitiveProps, NonTextChildren } from './types';
 
 export interface BoxProps<T extends HTMLElement = HTMLElement>
   extends Omit<HTMLAttributes<T>, 'style' | 'as' | 'className'>,
@@ -26,7 +20,7 @@ export interface BoxProps<T extends HTMLElement = HTMLElement>
   /**
    * Elements to be rendered inside the Box.
    */
-  children?: ReactNode;
+  children?: NonTextChildren | boolean | null | undefined;
   /**
    * The html className attribute.
    *
@@ -71,6 +65,10 @@ export interface BoxProps<T extends HTMLElement = HTMLElement>
    * Used to align children along the main axis.
    */
   justifyContent?: FlexJustifyContent;
+  /**
+   * Defines what happens if content overflows the box.
+   */
+  overflow?: Overflow;
   /**
    * Shorthand for `paddingBlock` and `paddingInline` together.
    *
@@ -132,6 +130,7 @@ const Box = forwardRef<HTMLElement, BoxProps>(
       paddingInline,
       position = 'relative',
       height,
+      overflow,
       width,
       UNSAFE_style,
       testId,
@@ -254,6 +253,11 @@ const baseStyles = css({
   border: 'none',
 });
 
+type Overflow = keyof typeof overflowMap;
+const overflowMap = {
+  auto: css({ overflow: 'auto' }),
+};
+
 const positionMap = {
   absolute: css({ position: 'absolute' }),
   relative: css({ position: 'relative' }),

package/src/components/inline.partial.tsx

@@ -6,7 +6,7 @@ import { css, jsx } from '@emotion/react';
 import { GlobalSpacingToken, SPACING_SCALE } from '../constants';
 
 import Text from './text.partial';
-import { BasePrimitiveProps } from './types';
+import { BasePrimitiveProps, NonTextChildren } from './types';
 
 interface InlineProps extends BasePrimitiveProps {
   /**
@@ -17,6 +17,10 @@ interface InlineProps extends BasePrimitiveProps {
    * Used to align children along the main axis.
    */
   justifyContent?: FlexJustifyContent;
+  /**
+   * Sets whether children are forced onto one line or can wrap onto multiple lines
+   */
+  flexWrap?: FlexWrap;
   /**
    * Token representing gap between children.
    */
@@ -29,7 +33,7 @@ interface InlineProps extends BasePrimitiveProps {
   /**
    * Elements to be rendered inside the Inline.
    */
-  children: ReactNode;
+  children: NonTextChildren;
 }
 
 type FlexAlignItems = keyof typeof flexAlignItemsMap;
@@ -38,6 +42,8 @@ const flexAlignItemsMap = {
   baseline: css({ alignItems: 'baseline' }),
   flexStart: css({ alignItems: 'flex-start' }),
   flexEnd: css({ alignItems: 'flex-end' }),
+  start: css({ alignItems: 'start' }),
+  end: css({ alignItems: 'end' }),
 };
 
 type FlexJustifyContent = keyof typeof flexJustifyContentMap;
@@ -45,6 +51,13 @@ const flexJustifyContentMap = {
   center: css({ justifyContent: 'center' }),
   flexStart: css({ justifyContent: 'flex-start' }),
   flexEnd: css({ justifyContent: 'flex-end' }),
+  start: css({ justifyContent: 'start' }),
+  end: css({ justifyContent: 'end' }),
+};
+
+type FlexWrap = keyof typeof flexWrapMap;
+const flexWrapMap = {
+  wrap: css({ flexWrap: 'wrap' }),
 };
 
 const baseStyles = css({
@@ -61,17 +74,31 @@ const baseStyles = css({
  *
  */
 const Inline = forwardRef<HTMLDivElement, InlineProps>(
-  ({ gap, alignItems, justifyContent, divider, children, testId }, ref) => {
+  (
+    {
+      gap,
+      alignItems,
+      justifyContent,
+      flexWrap,
+      divider,
+      UNSAFE_style,
+      children,
+      testId,
+    },
+    ref,
+  ) => {
     const dividerComponent =
       typeof divider === 'string' ? <Text>{divider}</Text> : divider;
 
     return (
       <div
+        style={{ ...UNSAFE_style }}
         css={[
           baseStyles,
-          gap && gapMap[gap],
+          gap && columnGapMap[gap],
           alignItems && flexAlignItemsMap[alignItems],
           justifyContent && flexJustifyContentMap[justifyContent],
+          flexWrap && flexWrapMap[flexWrap],
         ]}
         data-testid={testId}
         ref={ref}
@@ -95,24 +122,24 @@ export default Inline;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @codegen <<SignedSource::7a985afa5e15ffd4f6f9c0db0e99ceb6>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["gap"]
+ * @codegenParams ["columnGap"]
  */
-const gapMap = {
-  'sp-0': css({ gap: SPACING_SCALE['sp-0'] }),
-  'sp-25': css({ gap: SPACING_SCALE['sp-25'] }),
-  'sp-50': css({ gap: SPACING_SCALE['sp-50'] }),
-  'sp-75': css({ gap: SPACING_SCALE['sp-75'] }),
-  'sp-100': css({ gap: SPACING_SCALE['sp-100'] }),
-  'sp-150': css({ gap: SPACING_SCALE['sp-150'] }),
-  'sp-200': css({ gap: SPACING_SCALE['sp-200'] }),
-  'sp-300': css({ gap: SPACING_SCALE['sp-300'] }),
-  'sp-400': css({ gap: SPACING_SCALE['sp-400'] }),
-  'sp-500': css({ gap: SPACING_SCALE['sp-500'] }),
-  'sp-600': css({ gap: SPACING_SCALE['sp-600'] }),
-  'sp-800': css({ gap: SPACING_SCALE['sp-800'] }),
+const columnGapMap = {
+  'sp-0': css({ columnGap: SPACING_SCALE['sp-0'] }),
+  'sp-25': css({ columnGap: SPACING_SCALE['sp-25'] }),
+  'sp-50': css({ columnGap: SPACING_SCALE['sp-50'] }),
+  'sp-75': css({ columnGap: SPACING_SCALE['sp-75'] }),
+  'sp-100': css({ columnGap: SPACING_SCALE['sp-100'] }),
+  'sp-150': css({ columnGap: SPACING_SCALE['sp-150'] }),
+  'sp-200': css({ columnGap: SPACING_SCALE['sp-200'] }),
+  'sp-300': css({ columnGap: SPACING_SCALE['sp-300'] }),
+  'sp-400': css({ columnGap: SPACING_SCALE['sp-400'] }),
+  'sp-500': css({ columnGap: SPACING_SCALE['sp-500'] }),
+  'sp-600': css({ columnGap: SPACING_SCALE['sp-600'] }),
+  'sp-800': css({ columnGap: SPACING_SCALE['sp-800'] }),
 };
 
 /**

package/src/components/interaction-surface.partial.tsx

@@ -21,7 +21,7 @@ const baseStyles = css({
 });
 
 interface InteractionSurfaceProps extends BasePrimitiveProps {
-  children?: ReactNode;
+  children: ReactNode;
   appearance?: InteractionBackgroundColor;
 }
 
@@ -31,8 +31,9 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
  * ```js
  * // a minimal icon button
  * <Box as="button">
- *   <InteractionSurface />
- *   <WarningIcon label="icon button" />
+ *   <InteractionSurface>
+ *    <WarningIcon label="icon button" />
+ *  </InteractionSurface>
  * </Box>
  * ```
  */
@@ -69,7 +70,7 @@ export default InteractionSurface;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::45000716488a9f41306a232c1f4c9f8d>>
+ * @codegen <<SignedSource::6d0e1f52b0e3002ea607eb6a00d90b03>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
@@ -151,6 +152,15 @@ const backgroundActiveColorMap = {
       backgroundColor: token('color.background.information.bold.pressed'),
     },
   }),
+  'elevation.surface': css({
+    ':active': { backgroundColor: token('elevation.surface.pressed') },
+  }),
+  'elevation.surface.raised': css({
+    ':active': { backgroundColor: token('elevation.surface.raised.pressed') },
+  }),
+  'elevation.surface.overlay': css({
+    ':active': { backgroundColor: token('elevation.surface.overlay.pressed') },
+  }),
 };
 
 const backgroundHoverColorMap = {
@@ -228,6 +238,15 @@ const backgroundHoverColorMap = {
       backgroundColor: token('color.background.information.bold.hovered'),
     },
   }),
+  'elevation.surface': css({
+    ':hover': { backgroundColor: token('elevation.surface.hovered') },
+  }),
+  'elevation.surface.raised': css({
+    ':hover': { backgroundColor: token('elevation.surface.raised.hovered') },
+  }),
+  'elevation.surface.overlay': css({
+    ':hover': { backgroundColor: token('elevation.surface.overlay.hovered') },
+  }),
 };
 
 type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;

package/src/components/stack.partial.tsx

@@ -1,11 +1,11 @@
 /** @jsx jsx */
-import { forwardRef, ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 import { css, jsx } from '@emotion/react';
 
 import { GlobalSpacingToken, SPACING_SCALE } from '../constants';
 
-import { BasePrimitiveProps } from './types';
+import { BasePrimitiveProps, NonTextChildren } from './types';
 
 interface StackProps extends BasePrimitiveProps {
   /**
@@ -16,6 +16,10 @@ interface StackProps extends BasePrimitiveProps {
    * Used to align children along the main axis.
    */
   justifyContent?: FlexJustifyContent;
+  /**
+   * Sets whether children are forced onto one line or can wrap onto multiple lines
+   */
+  flexWrap?: FlexWrap;
   /**
    * Token representing gap between children.
    */
@@ -23,7 +27,7 @@ interface StackProps extends BasePrimitiveProps {
   /**
    * Elements to be rendered inside the Stack.
    */
-  children: ReactNode;
+  children: NonTextChildren;
 }
 
 type FlexAlignItems = keyof typeof flexAlignItemsMap;
@@ -32,6 +36,8 @@ const flexAlignItemsMap = {
   baseline: css({ alignItems: 'baseline' }),
   flexStart: css({ alignItems: 'flex-start' }),
   flexEnd: css({ alignItems: 'flex-end' }),
+  start: css({ alignItems: 'start' }),
+  end: css({ alignItems: 'end' }),
 };
 
 type FlexJustifyContent = keyof typeof flexJustifyContentMap;
@@ -39,6 +45,13 @@ const flexJustifyContentMap = {
   center: css({ justifyContent: 'center' }),
   flexStart: css({ justifyContent: 'flex-start' }),
   flexEnd: css({ justifyContent: 'flex-end' }),
+  start: css({ justifyContent: 'start' }),
+  end: css({ justifyContent: 'end' }),
+};
+
+type FlexWrap = keyof typeof flexWrapMap;
+const flexWrapMap = {
+  wrap: css({ flexWrap: 'wrap' }),
 };
 
 const baseStyles = css({
@@ -55,14 +68,27 @@ const baseStyles = css({
  *
  */
 const Stack = forwardRef<HTMLDivElement, StackProps>(
-  ({ gap, alignItems, justifyContent, children, testId }, ref) => {
+  (
+    {
+      gap,
+      alignItems,
+      justifyContent,
+      flexWrap,
+      children,
+      UNSAFE_style,
+      testId,
+    },
+    ref,
+  ) => {
     return (
       <div
+        style={{ ...UNSAFE_style }}
         css={[
           baseStyles,
-          gap && gapMap[gap],
+          gap && rowGapMap[gap],
           alignItems && flexAlignItemsMap[alignItems],
           justifyContent && flexJustifyContentMap[justifyContent],
+          flexWrap && flexWrapMap[flexWrap],
         ]}
         data-testid={testId}
         ref={ref}
@@ -79,24 +105,24 @@ export default Stack;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @codegen <<SignedSource::13c9344cdb18845e176c0ca78b2972d3>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["gap"]
+ * @codegenParams ["rowGap"]
  */
-const gapMap = {
-  'sp-0': css({ gap: SPACING_SCALE['sp-0'] }),
-  'sp-25': css({ gap: SPACING_SCALE['sp-25'] }),
-  'sp-50': css({ gap: SPACING_SCALE['sp-50'] }),
-  'sp-75': css({ gap: SPACING_SCALE['sp-75'] }),
-  'sp-100': css({ gap: SPACING_SCALE['sp-100'] }),
-  'sp-150': css({ gap: SPACING_SCALE['sp-150'] }),
-  'sp-200': css({ gap: SPACING_SCALE['sp-200'] }),
-  'sp-300': css({ gap: SPACING_SCALE['sp-300'] }),
-  'sp-400': css({ gap: SPACING_SCALE['sp-400'] }),
-  'sp-500': css({ gap: SPACING_SCALE['sp-500'] }),
-  'sp-600': css({ gap: SPACING_SCALE['sp-600'] }),
-  'sp-800': css({ gap: SPACING_SCALE['sp-800'] }),
+const rowGapMap = {
+  'sp-0': css({ rowGap: SPACING_SCALE['sp-0'] }),
+  'sp-25': css({ rowGap: SPACING_SCALE['sp-25'] }),
+  'sp-50': css({ rowGap: SPACING_SCALE['sp-50'] }),
+  'sp-75': css({ rowGap: SPACING_SCALE['sp-75'] }),
+  'sp-100': css({ rowGap: SPACING_SCALE['sp-100'] }),
+  'sp-150': css({ rowGap: SPACING_SCALE['sp-150'] }),
+  'sp-200': css({ rowGap: SPACING_SCALE['sp-200'] }),
+  'sp-300': css({ rowGap: SPACING_SCALE['sp-300'] }),
+  'sp-400': css({ rowGap: SPACING_SCALE['sp-400'] }),
+  'sp-500': css({ rowGap: SPACING_SCALE['sp-500'] }),
+  'sp-600': css({ rowGap: SPACING_SCALE['sp-600'] }),
+  'sp-800': css({ rowGap: SPACING_SCALE['sp-800'] }),
 };
 
 /**

package/src/components/text.partial.tsx

@@ -108,6 +108,8 @@ const verticalAlignMap = {
 
 const baseStyles = css({
   boxSizing: 'border-box',
+  margin: '0px',
+  padding: '0px',
   fontFamily,
 });
 

package/src/components/types.tsx

@@ -13,3 +13,5 @@ export interface BasePrimitiveProps {
    */
   UNSAFE_style?: CSSProperties;
 }
+
+export type NonTextChildren = JSX.Element | (JSX.Element | null | false)[];