@atlaskit/ds-explorations 0.1.1 → 0.1.2

package/src/components/box.partial.tsx

@@ -7,16 +7,17 @@ import {
   ReactNode,
 } from 'react';
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 import { token } from '@atlaskit/tokens';
 
 import { GlobalSpacingToken, SPACING_SCALE } from '../constants';
 
+import { SurfaceContext } from './surface-provider';
 import { BasePrimitiveProps } from './types';
 
-export interface BoxProps
-  extends Omit<HTMLAttributes<HTMLElement>, 'style'>,
+export interface BoxProps<T extends HTMLElement = HTMLElement>
+  extends Omit<HTMLAttributes<T>, 'style' | 'as' | 'className'>,
     BasePrimitiveProps {
   /**
    * The DOM element to render as the Box. Defaults to `div`.
@@ -25,7 +26,19 @@ export interface BoxProps
   /**
    * Elements to be rendered inside the Box.
    */
-  children: ReactNode;
+  children?: ReactNode;
+  /**
+   * 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`
+   */
+  className?: string;
   /**
    * Token representing background color with a fallback.
    */
@@ -85,64 +98,12 @@ export interface BoxProps
    * Defines display type and layout. Defaults to `flex`.
    */
   display?: Display;
+  /**
+   * CSS position property.
+   */
+  position?: keyof typeof positionMap;
 }
 
-type BorderStyle = keyof typeof borderStyleMap;
-const borderStyleMap = {
-  none: css({ borderStyle: 'none' }),
-  solid: css({ borderStyle: 'solid' }),
-  dashed: css({ borderStyle: 'dashed' }),
-  dotted: css({ borderStyle: 'dotted' }),
-};
-
-type BorderWidth = keyof typeof borderWidthMap;
-const borderWidthMap = {
-  '0px': css({ borderWidth: '0px' }),
-  '1px': css({ borderWidth: '1px' }),
-  '2px': css({ borderWidth: '2px' }),
-  '3px': css({ borderWidth: '3px' }),
-};
-
-type BorderRadius = keyof typeof borderRadiusMap;
-const borderRadiusMap = {
-  normal: css({ borderRadius: '3px' }),
-  rounded: css({ borderRadius: '50%' }),
-  badge: css({ borderRadius: '8px' }),
-};
-
-type FlexDirection = keyof typeof flexDirectionMap;
-const flexDirectionMap = {
-  column: css({ flexDirection: 'column' }),
-  row: css({ flexDirection: 'row' }),
-};
-
-type FlexAlignItems = keyof typeof flexAlignItemsMap;
-const flexAlignItemsMap = {
-  center: css({ alignItems: 'center' }),
-  baseline: css({ alignItems: 'baseline' }),
-  flexStart: css({ alignItems: 'flex-start' }),
-  flexEnd: css({ alignItems: 'flex-end' }),
-};
-
-type FlexJustifyContent = keyof typeof flexJustifyContentMap;
-const flexJustifyContentMap = {
-  center: css({ justifyContent: 'center' }),
-  flexStart: css({ justifyContent: 'flex-start' }),
-  flexEnd: css({ justifyContent: 'flex-end' }),
-};
-
-type Display = keyof typeof displayMap;
-const displayMap = {
-  block: css({ display: 'block' }),
-  inline: css({ display: 'inline' }),
-  flex: css({ display: 'flex' }),
-  inlineFlex: css({ display: 'inline-flex' }),
-};
-
-const baseStyles = css({
-  boxSizing: 'border-box',
-});
-
 /**
  * __Box__
  *
@@ -156,6 +117,7 @@ const Box = forwardRef<HTMLElement, BoxProps>(
     {
       children,
       as: Component = 'div',
+      className,
       display = 'flex',
       flexDirection,
       alignItems,
@@ -168,16 +130,11 @@ const Box = forwardRef<HTMLElement, BoxProps>(
       padding,
       paddingBlock,
       paddingInline,
+      position = 'relative',
       height,
       width,
       UNSAFE_style,
       testId,
-      /**
-       * Pull this out to prevent accidentaly spread
-       */
-      // @ts-ignore
-      // @eslint-disbale-next-line no-unused-vars
-      className: dontUseThisProperty,
       ...htmlAttributes
     },
     ref,
@@ -185,7 +142,8 @@ const Box = forwardRef<HTMLElement, BoxProps>(
     const [backgroundColor, backgroundColorFallback] =
       backgroundColorTuple || [];
     const [borderColor, borderColorFallback] = borderColorTuple || [];
-    return (
+
+    const node = (
       <Component
         style={{
           ...UNSAFE_style,
@@ -194,13 +152,16 @@ const Box = forwardRef<HTMLElement, BoxProps>(
           ...(borderColorFallback &&
             ({ '--ds-bo-fb': borderColorFallback } as CSSProperties)),
         }}
+        // @ts-ignore
         ref={ref}
         // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
         {...htmlAttributes}
+        className={className}
         css={[
           baseStyles,
           display && displayMap[display],
           padding && paddingMap[padding],
+          position && positionMap[position],
           paddingBlock && paddingBlockMap[paddingBlock],
           paddingInline && paddingInlineMap[paddingInline],
           alignItems && flexAlignItemsMap[alignItems],
@@ -219,14 +180,89 @@ const Box = forwardRef<HTMLElement, BoxProps>(
         {children}
       </Component>
     );
+
+    return backgroundColor ? (
+      <SurfaceContext.Provider value={backgroundColor}>
+        {node}
+      </SurfaceContext.Provider>
+    ) : (
+      node
+    );
   },
 );
 
+Box.displayName = 'Box';
+
 export default Box;
 
+// <<< STYLES GO HERE >>>
+type BorderStyle = keyof typeof borderStyleMap;
+const borderStyleMap = {
+  none: css({ borderStyle: 'none' }),
+  solid: css({ borderStyle: 'solid' }),
+  dashed: css({ borderStyle: 'dashed' }),
+  dotted: css({ borderStyle: 'dotted' }),
+};
+
+type BorderWidth = keyof typeof borderWidthMap;
+const borderWidthMap = {
+  '0px': css({ borderWidth: '0px' }),
+  '1px': css({ borderWidth: '1px' }),
+  '2px': css({ borderWidth: '2px' }),
+  '3px': css({ borderWidth: '3px' }),
+};
+
+type BorderRadius = keyof typeof borderRadiusMap;
+const borderRadiusMap = {
+  normal: css({ borderRadius: '3px' }),
+  rounded: css({ borderRadius: '50%' }),
+  badge: css({ borderRadius: '8px' }),
+};
+
+type FlexDirection = keyof typeof flexDirectionMap;
+const flexDirectionMap = {
+  column: css({ flexDirection: 'column' }),
+  row: css({ flexDirection: 'row' }),
+};
+
+type FlexAlignItems = keyof typeof flexAlignItemsMap;
+const flexAlignItemsMap = {
+  center: css({ alignItems: 'center' }),
+  baseline: css({ alignItems: 'baseline' }),
+  flexStart: css({ alignItems: 'flex-start' }),
+  flexEnd: css({ alignItems: 'flex-end' }),
+};
+
+type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+const flexJustifyContentMap = {
+  center: css({ justifyContent: 'center' }),
+  flexStart: css({ justifyContent: 'flex-start' }),
+  flexEnd: css({ justifyContent: 'flex-end' }),
+};
+
+type Display = keyof typeof displayMap;
+const displayMap = {
+  block: css({ display: 'block' }),
+  inline: css({ display: 'inline' }),
+  flex: css({ display: 'flex' }),
+  inlineFlex: css({ display: 'inline-flex' }),
+};
+
+const baseStyles = css({
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none',
+});
+
+const positionMap = {
+  absolute: css({ position: 'absolute' }),
+  relative: css({ position: 'relative' }),
+  static: css({ position: 'static' }),
+};
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c20a27ff33adec8c016044959564409d>>
+ * @codegen <<SignedSource::57b4c7c177fdfae3f7cd4f00287fd30e>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
@@ -237,6 +273,7 @@ const paddingMap = {
   'sp-50': css({ padding: SPACING_SCALE['sp-50'] }),
   'sp-75': css({ padding: SPACING_SCALE['sp-75'] }),
   'sp-100': css({ padding: SPACING_SCALE['sp-100'] }),
+  'sp-150': css({ padding: SPACING_SCALE['sp-150'] }),
   'sp-200': css({ padding: SPACING_SCALE['sp-200'] }),
   'sp-300': css({ padding: SPACING_SCALE['sp-300'] }),
   'sp-400': css({ padding: SPACING_SCALE['sp-400'] }),
@@ -251,6 +288,7 @@ const paddingBlockMap = {
   'sp-50': css({ paddingBlock: SPACING_SCALE['sp-50'] }),
   'sp-75': css({ paddingBlock: SPACING_SCALE['sp-75'] }),
   'sp-100': css({ paddingBlock: SPACING_SCALE['sp-100'] }),
+  'sp-150': css({ paddingBlock: SPACING_SCALE['sp-150'] }),
   'sp-200': css({ paddingBlock: SPACING_SCALE['sp-200'] }),
   'sp-300': css({ paddingBlock: SPACING_SCALE['sp-300'] }),
   'sp-400': css({ paddingBlock: SPACING_SCALE['sp-400'] }),
@@ -265,6 +303,7 @@ const paddingInlineMap = {
   'sp-50': css({ paddingInline: SPACING_SCALE['sp-50'] }),
   'sp-75': css({ paddingInline: SPACING_SCALE['sp-75'] }),
   'sp-100': css({ paddingInline: SPACING_SCALE['sp-100'] }),
+  'sp-150': css({ paddingInline: SPACING_SCALE['sp-150'] }),
   'sp-200': css({ paddingInline: SPACING_SCALE['sp-200'] }),
   'sp-300': css({ paddingInline: SPACING_SCALE['sp-300'] }),
   'sp-400': css({ paddingInline: SPACING_SCALE['sp-400'] }),
@@ -279,6 +318,7 @@ const widthMap = {
   'sp-50': css({ width: SPACING_SCALE['sp-50'] }),
   'sp-75': css({ width: SPACING_SCALE['sp-75'] }),
   'sp-100': css({ width: SPACING_SCALE['sp-100'] }),
+  'sp-150': css({ width: SPACING_SCALE['sp-150'] }),
   'sp-200': css({ width: SPACING_SCALE['sp-200'] }),
   'sp-300': css({ width: SPACING_SCALE['sp-300'] }),
   'sp-400': css({ width: SPACING_SCALE['sp-400'] }),
@@ -293,6 +333,7 @@ const heightMap = {
   'sp-50': css({ height: SPACING_SCALE['sp-50'] }),
   'sp-75': css({ height: SPACING_SCALE['sp-75'] }),
   'sp-100': css({ height: SPACING_SCALE['sp-100'] }),
+  'sp-150': css({ height: SPACING_SCALE['sp-150'] }),
   'sp-200': css({ height: SPACING_SCALE['sp-200'] }),
   'sp-300': css({ height: SPACING_SCALE['sp-300'] }),
   'sp-400': css({ height: SPACING_SCALE['sp-400'] }),
@@ -307,7 +348,7 @@ const heightMap = {
 
 /**
  * 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"]
@@ -354,7 +395,7 @@ const borderColorMap = {
   }),
 };
 
-type BorderColor = keyof typeof borderColorMap;
+export type BorderColor = keyof typeof borderColorMap;
 
 const backgroundColorMap = {
   disabled: css({
@@ -449,7 +490,7 @@ const backgroundColorMap = {
   }),
 };
 
-type BackgroundColor = keyof typeof backgroundColorMap;
+export type BackgroundColor = keyof typeof backgroundColorMap;
 
 /**
  * @codegenEnd

package/src/components/inline.partial.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { Children, forwardRef, Fragment, ReactNode } from 'react';
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 import { GlobalSpacingToken, SPACING_SCALE } from '../constants';
 
@@ -89,11 +89,13 @@ const Inline = forwardRef<HTMLDivElement, InlineProps>(
   },
 );
 
+Inline.displayName = 'Inline';
+
 export default Inline;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ac3192fbc453a94ab5e720d0273556ef>>
+ * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["gap"]
@@ -104,6 +106,7 @@ const gapMap = {
   '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'] }),

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

@@ -0,0 +1,237 @@
+/** @jsx jsx */
+import { Fragment, ReactNode, useContext } from 'react';
+
+import { css, jsx } from '@emotion/react';
+
+import { token } from '@atlaskit/tokens';
+
+import { SurfaceContext } from './surface-provider';
+import { BasePrimitiveProps } from './types';
+
+const baseStyles = css({
+  position: 'absolute',
+  borderRadius: 'inherit',
+  cursor: 'pointer',
+  inset: 0,
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '~ *': {
+    position: 'relative',
+    pointerEvents: 'none',
+  },
+});
+
+interface InteractionSurfaceProps extends BasePrimitiveProps {
+  children?: ReactNode;
+  appearance?: InteractionBackgroundColor;
+}
+
+/**
+ *
+ * @example
+ * ```js
+ * // a minimal icon button
+ * <Box as="button">
+ *   <InteractionSurface />
+ *   <WarningIcon label="icon button" />
+ * </Box>
+ * ```
+ */
+const InteractionSurface = ({
+  appearance,
+  children,
+  testId,
+}: InteractionSurfaceProps) => {
+  const defaultSurface = useContext(SurfaceContext);
+  let surface = (appearance || defaultSurface) as InteractionBackgroundColor;
+
+  // This case will occur if the Box has not set a bg color and the ancestor surface
+  // is an elevation. An alternative would be to throw an error here as it may be better
+  // to ensure correct predictable behaviour based on user specification.
+  if (!(surface in backgroundActiveColorMap)) {
+    surface = 'neutral';
+  }
+  return (
+    <Fragment>
+      <span
+        data-testid={testId}
+        css={[
+          baseStyles,
+          surface && backgroundHoverColorMap[surface],
+          surface && backgroundActiveColorMap[surface],
+        ]}
+      />
+      {children}
+    </Fragment>
+  );
+};
+
+export default InteractionSurface;
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::45000716488a9f41306a232c1f4c9f8d>>
+ * @codegenId interactions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["background"]
+ */
+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;
+
+/**
+ * @codegenEnd
+ */

package/src/components/stack.partial.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { forwardRef, ReactNode } from 'react';
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 import { GlobalSpacingToken, SPACING_SCALE } from '../constants';
 
@@ -73,11 +73,13 @@ const Stack = forwardRef<HTMLDivElement, StackProps>(
   },
 );
 
+Stack.displayName = 'Stack';
+
 export default Stack;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ac3192fbc453a94ab5e720d0273556ef>>
+ * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["gap"]
@@ -88,6 +90,7 @@ const gapMap = {
   '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'] }),

package/src/components/surface-provider.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+
+import type { BackgroundColor } from './box.partial';
+
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export const SurfaceContext = createContext<BackgroundColor>(
+  'elevation.surface',
+);
+
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+export const useSurface = () => {
+  return useContext(SurfaceContext);
+};
+
+SurfaceContext.displayName = 'SurfaceProvider';