npm - @atlaskit/ds-explorations - Versions diffs - 0.1.4 → 1.0.0 - Mend

@atlaskit/ds-explorations 0.1.4 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/types/components/box.partial.d.ts CHANGED Viewed

@@ -1,18 +1,19 @@
 /** @jsx jsx */
-import { ElementType, HTMLAttributes, ReactNode } from 'react';
-import { GlobalSpacingToken } from '../constants';
-import { BasePrimitiveProps } from './types';
-export interface BoxProps<T extends HTMLElement = HTMLElement> extends Omit<HTMLAttributes<T>, 'style' | 'as' | 'className'>, BasePrimitiveProps {
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement } from 'react';
+import type { BasePrimitiveProps, NonTextChildren } from './types';
+declare type PropsToOmit = 'as' | 'className' | 'style';
+export declare type BoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, PropsToOmit> & BasePrimitiveProps & BoxPropsBase<T>;
+declare type BoxPropsBase<T extends ElementType> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.
      */
-    as?: ElementType;
+    as?: T;
     /**
      * Elements to be rendered inside the Box.
      */
-    children?: ReactNode;
+    children?: NonTextChildren | boolean | null;
     /**
-     * The html className attribute.
+     * The HTML className attribute.
      *
      * Before using this prop please ensure:
      * - The styles cannot otherwise be achieved through `Box` directly.
@@ -26,7 +27,7 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends Omit<HTML
     /**
      * Token representing background color with a fallback.
      */
-    backgroundColor?: [BackgroundColor, string];
+    backgroundColor?: BackgroundColor;
     /**
      * Defines border style.
      */
@@ -38,7 +39,7 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends Omit<HTML
     /**
      * Token representing border color with a fallback.
      */
-    borderColor?: [BorderColor, string];
+    borderColor?: BorderColor;
     /**
      * Defines border radius.
      */
@@ -55,29 +56,33 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends Omit<HTML
      * 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.
      *
      * @see paddingBlock
      * @see paddingInline
      */
-    padding?: GlobalSpacingToken;
+    padding?: Padding;
     /**
      * Token representing CSS `padding-block`.
      */
-    paddingBlock?: GlobalSpacingToken;
+    paddingBlock?: PaddingBlock;
     /**
      * Token representing CSS `padding-inline`.
      */
-    paddingInline?: GlobalSpacingToken;
+    paddingInline?: PaddingInline;
     /**
      * Token representing width.
      */
-    width?: GlobalSpacingToken;
+    width?: Width;
     /**
      * Token representing height.
      */
-    height?: GlobalSpacingToken;
+    height?: Height;
     /**
      * Defines display type and layout. Defaults to `flex`.
      */
@@ -85,8 +90,10 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends Omit<HTML
     /**
      * CSS position property.
      */
-    position?: keyof typeof positionMap;
-}
+    position?: Position;
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
 /**
  * __Box__
  *
@@ -95,7 +102,7 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends Omit<HTML
  *
  * @internal
  */
-declare const Box: import("react").ForwardRefExoticComponent<BoxProps<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export declare const Box: BoxComponent;
 export default Box;
 declare type BorderStyle = keyof typeof borderStyleMap;
 declare const borderStyleMap: {
@@ -142,20 +149,109 @@ declare const displayMap: {
     flex: import("@emotion/react").SerializedStyles;
     inlineFlex: import("@emotion/react").SerializedStyles;
 };
+declare type Position = keyof typeof positionMap;
 declare const positionMap: {
     absolute: import("@emotion/react").SerializedStyles;
     relative: import("@emotion/react").SerializedStyles;
     static: import("@emotion/react").SerializedStyles;
 };
+declare type Overflow = keyof typeof overflowMap;
+declare const overflowMap: {
+    auto: import("@emotion/react").SerializedStyles;
+};
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::620ef1f3b2d7a6f92e5052efb270b5eb>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ */
+declare const paddingMap: {
+    'scale.0': import("@emotion/react").SerializedStyles;
+    'scale.025': import("@emotion/react").SerializedStyles;
+    'scale.050': import("@emotion/react").SerializedStyles;
+    'scale.075': import("@emotion/react").SerializedStyles;
+    'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.150': import("@emotion/react").SerializedStyles;
+    'scale.200': import("@emotion/react").SerializedStyles;
+    'scale.250': import("@emotion/react").SerializedStyles;
+    'scale.300': import("@emotion/react").SerializedStyles;
+    'scale.400': import("@emotion/react").SerializedStyles;
+    'scale.500': import("@emotion/react").SerializedStyles;
+    'scale.600': import("@emotion/react").SerializedStyles;
+};
+export declare type Padding = keyof typeof paddingMap;
+declare const paddingBlockMap: {
+    'scale.0': import("@emotion/react").SerializedStyles;
+    'scale.025': import("@emotion/react").SerializedStyles;
+    'scale.050': import("@emotion/react").SerializedStyles;
+    'scale.075': import("@emotion/react").SerializedStyles;
+    'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.150': import("@emotion/react").SerializedStyles;
+    'scale.200': import("@emotion/react").SerializedStyles;
+    'scale.250': import("@emotion/react").SerializedStyles;
+    'scale.300': import("@emotion/react").SerializedStyles;
+    'scale.400': import("@emotion/react").SerializedStyles;
+    'scale.500': import("@emotion/react").SerializedStyles;
+    'scale.600': import("@emotion/react").SerializedStyles;
+};
+export declare type PaddingBlock = keyof typeof paddingBlockMap;
+declare const paddingInlineMap: {
+    'scale.0': import("@emotion/react").SerializedStyles;
+    'scale.025': import("@emotion/react").SerializedStyles;
+    'scale.050': import("@emotion/react").SerializedStyles;
+    'scale.075': import("@emotion/react").SerializedStyles;
+    'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.150': import("@emotion/react").SerializedStyles;
+    'scale.200': import("@emotion/react").SerializedStyles;
+    'scale.250': import("@emotion/react").SerializedStyles;
+    'scale.300': import("@emotion/react").SerializedStyles;
+    'scale.400': import("@emotion/react").SerializedStyles;
+    'scale.500': import("@emotion/react").SerializedStyles;
+    'scale.600': import("@emotion/react").SerializedStyles;
+};
+export declare type PaddingInline = keyof typeof paddingInlineMap;
+declare const widthMap: {
+    'scale.0': import("@emotion/react").SerializedStyles;
+    'scale.025': import("@emotion/react").SerializedStyles;
+    'scale.050': import("@emotion/react").SerializedStyles;
+    'scale.075': import("@emotion/react").SerializedStyles;
+    'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.150': import("@emotion/react").SerializedStyles;
+    'scale.200': import("@emotion/react").SerializedStyles;
+    'scale.250': import("@emotion/react").SerializedStyles;
+    'scale.300': import("@emotion/react").SerializedStyles;
+    'scale.400': import("@emotion/react").SerializedStyles;
+    'scale.500': import("@emotion/react").SerializedStyles;
+    'scale.600': import("@emotion/react").SerializedStyles;
+};
+export declare type Width = keyof typeof widthMap;
+declare const heightMap: {
+    'scale.0': import("@emotion/react").SerializedStyles;
+    'scale.025': import("@emotion/react").SerializedStyles;
+    'scale.050': import("@emotion/react").SerializedStyles;
+    'scale.075': import("@emotion/react").SerializedStyles;
+    'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.150': import("@emotion/react").SerializedStyles;
+    'scale.200': import("@emotion/react").SerializedStyles;
+    'scale.250': import("@emotion/react").SerializedStyles;
+    'scale.300': import("@emotion/react").SerializedStyles;
+    'scale.400': import("@emotion/react").SerializedStyles;
+    'scale.500': import("@emotion/react").SerializedStyles;
+    'scale.600': import("@emotion/react").SerializedStyles;
+};
+export declare type Height = keyof typeof heightMap;
 /**
  * @codegenEnd
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ebb55786a54803214357d0eef0cac448>>
+ * @codegen <<SignedSource::832d4f0a888302a4fd097946cd7c582c>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
 declare const borderColorMap: {
     'color.border': import("@emotion/react").SerializedStyles;

package/dist/types/components/inline.partial.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
-import { GlobalSpacingToken } from '../constants';
-import { BasePrimitiveProps } from './types';
+import type { BasePrimitiveProps, NonTextChildren } from './types';
 interface InlineProps extends BasePrimitiveProps {
     /**
      * Used to align children along the cross axis.
@@ -11,10 +10,14 @@ 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.
      */
-    gap: GlobalSpacingToken;
+    gap: ColumnGap;
     /**
      * Renders a divider between children.
      * If a string is provided it will automatically be wrapped in a `<Text>` component.
@@ -23,7 +26,7 @@ interface InlineProps extends BasePrimitiveProps {
     /**
      * Elements to be rendered inside the Inline.
      */
-    children: ReactNode;
+    children: NonTextChildren;
 }
 declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
 declare const flexAlignItemsMap: {
@@ -31,12 +34,20 @@ declare const flexAlignItemsMap: {
     baseline: import("@emotion/react").SerializedStyles;
     flexStart: import("@emotion/react").SerializedStyles;
     flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
 };
 declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
 declare const flexJustifyContentMap: {
     center: import("@emotion/react").SerializedStyles;
     flexStart: import("@emotion/react").SerializedStyles;
     flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
+};
+declare type FlexWrap = keyof typeof flexWrapMap;
+declare const flexWrapMap: {
+    wrap: import("@emotion/react").SerializedStyles;
 };
 /**
  * __Inline__
@@ -47,6 +58,29 @@ declare const flexJustifyContentMap: {
  */
 declare const Inline: import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Inline;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["columnGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ */
+declare const columnGapMap: {
+    'scale.0': import("@emotion/react").SerializedStyles;
+    'scale.025': import("@emotion/react").SerializedStyles;
+    'scale.050': import("@emotion/react").SerializedStyles;
+    'scale.075': import("@emotion/react").SerializedStyles;
+    'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.150': import("@emotion/react").SerializedStyles;
+    'scale.200': import("@emotion/react").SerializedStyles;
+    'scale.250': import("@emotion/react").SerializedStyles;
+    'scale.300': import("@emotion/react").SerializedStyles;
+    'scale.400': import("@emotion/react").SerializedStyles;
+    'scale.500': import("@emotion/react").SerializedStyles;
+    'scale.600': import("@emotion/react").SerializedStyles;
+};
+export declare type ColumnGap = keyof typeof columnGapMap;
 /**
  * @codegenEnd
  */

package/dist/types/components/interaction-surface.partial.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import { BasePrimitiveProps } from './types';
 interface InteractionSurfaceProps extends BasePrimitiveProps {
-    children?: ReactNode;
+    children: ReactNode;
     appearance?: InteractionBackgroundColor;
 }
 /**
@@ -12,8 +12,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>
  * ```
  */
@@ -38,6 +39,9 @@ declare const backgroundHoverColorMap: {
     'discovery.bold': import("@emotion/react").SerializedStyles;
     information: import("@emotion/react").SerializedStyles;
     'information.bold': import("@emotion/react").SerializedStyles;
+    'elevation.surface': import("@emotion/react").SerializedStyles;
+    'elevation.surface.raised': import("@emotion/react").SerializedStyles;
+    'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
 };
 declare type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
 /**

package/dist/types/components/stack.partial.d.ts CHANGED Viewed

@@ -1,7 +1,5 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-import { GlobalSpacingToken } from '../constants';
-import { BasePrimitiveProps } from './types';
+/// <reference types="react" />
+import { BasePrimitiveProps, NonTextChildren } from './types';
 interface StackProps extends BasePrimitiveProps {
     /**
      * Used to align children along the cross axis.
@@ -11,14 +9,18 @@ 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.
      */
-    gap: GlobalSpacingToken;
+    gap: RowGap;
     /**
      * Elements to be rendered inside the Stack.
      */
-    children: ReactNode;
+    children: NonTextChildren;
 }
 declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
 declare const flexAlignItemsMap: {
@@ -26,12 +28,20 @@ declare const flexAlignItemsMap: {
     baseline: import("@emotion/react").SerializedStyles;
     flexStart: import("@emotion/react").SerializedStyles;
     flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
 };
 declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
 declare const flexJustifyContentMap: {
     center: import("@emotion/react").SerializedStyles;
     flexStart: import("@emotion/react").SerializedStyles;
     flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
+};
+declare type FlexWrap = keyof typeof flexWrapMap;
+declare const flexWrapMap: {
+    wrap: import("@emotion/react").SerializedStyles;
 };
 /**
  * __Stack__
@@ -42,6 +52,29 @@ declare const flexJustifyContentMap: {
  */
 declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Stack;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["rowGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ */
+declare const rowGapMap: {
+    'scale.0': import("@emotion/react").SerializedStyles;
+    'scale.025': import("@emotion/react").SerializedStyles;
+    'scale.050': import("@emotion/react").SerializedStyles;
+    'scale.075': import("@emotion/react").SerializedStyles;
+    'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.150': import("@emotion/react").SerializedStyles;
+    'scale.200': import("@emotion/react").SerializedStyles;
+    'scale.250': import("@emotion/react").SerializedStyles;
+    'scale.300': import("@emotion/react").SerializedStyles;
+    'scale.400': import("@emotion/react").SerializedStyles;
+    'scale.500': import("@emotion/react").SerializedStyles;
+    'scale.600': import("@emotion/react").SerializedStyles;
+};
+export declare type RowGap = keyof typeof rowGapMap;
 /**
  * @codegenEnd
  */

package/dist/types/components/text.partial.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BasePrimitiveProps } from './types';
+import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly ["span", "div", "p"];
 declare type AsElement = typeof asAllowlist[number];
 export interface TextProps extends BasePrimitiveProps {
@@ -15,7 +15,7 @@ export interface TextProps extends BasePrimitiveProps {
     /**
      * Text color
      */
-    color?: [TextColor, string];
+    color?: TextColor;
     /**
      * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
      */
@@ -56,6 +56,7 @@ declare type FontWeight = keyof typeof fontWeightMap;
 declare const fontWeightMap: {
     '400': import("@emotion/react").SerializedStyles;
     '500': import("@emotion/react").SerializedStyles;
+    '600': import("@emotion/react").SerializedStyles;
     '700': import("@emotion/react").SerializedStyles;
 };
 declare type LineHeight = keyof typeof lineHeightMap;
@@ -99,10 +100,11 @@ declare const Text: FC<TextProps>;
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::140ffff6e1310c1c37e2067e2c232b92>>
+ * @codegen <<SignedSource::21771f01de3c37646642de03274f0738>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
 declare const textColorMap: {
     'color.text': import("@emotion/react").SerializedStyles;

package/dist/types/components/types.d.ts CHANGED Viewed

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

package/dist/types/index.d.ts CHANGED Viewed

@@ -5,4 +5,3 @@ export { default as UNSAFE_Stack } from './components/stack.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
 export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
 export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
-export { SPACING_SCALE as UNSAFE_SPACING_SCALE } from './constants';

package/dist/types/internal/color-map.d.ts CHANGED Viewed

@@ -1,12 +1,4 @@
-/**
- * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- *
- * Some artifact
- *
- * @codegen <<SignedSource::8f568e4f0837f7af4a10429e060ad059>>
- * @codegenCommand yarn codegen-styles
- */
-export declare const colorMap: {
+declare const _default: {
     readonly 'neutral.bold': "inverse";
     readonly 'neutral.bold.hovered': "inverse";
     readonly 'neutral.bold.pressed': "inverse";
@@ -32,3 +24,13 @@ export declare const colorMap: {
     readonly 'information.bold.hovered': "inverse";
     readonly 'information.bold.pressed': "inverse";
 };
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * The color map is used to map a background color token to a matching text color that will meet contrast.
+ *
+ * @codegen <<SignedSource::c9429c38d12f88de9f5be644bf5e704a>>
+ * @codegenCommand yarn codegen-styles
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
+ */
+export default _default;

package/dist/types/internal/spacing-scale.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Some artifact
+ *
+ * @codegen <<SignedSource::caecb926afa82b027fba396074de5c2c>>
+ * @codegenCommand yarn codegen-styles
+ */
+export declare const spacingScale: readonly ["scale.0", "scale.025", "scale.050", "scale.075", "scale.100", "scale.150", "scale.200", "scale.250", "scale.300", "scale.400", "scale.500", "scale.600"];