@atlaskit/ds-explorations 0.1.4 → 0.1.5

package/examples/03-stack.tsx

@@ -11,6 +11,7 @@ import { GlobalSpacingToken, SPACING_SCALE } from '../src/constants';
 
 const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
 const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
+const flexWrap = ['wrap'];
 
 /**
  * Stack permutations
@@ -22,7 +23,7 @@ export default () => {
         <Heading level="h700">Spacing</Heading>
         <Inline gap="sp-400">
           {Object.keys(SPACING_SCALE).map((space) => (
-            <Stack gap="sp-300">
+            <Stack key={space} gap="sp-300">
               <Heading level="h500">{space}</Heading>
 
               <Box backgroundColor={['neutral', 'grey']}>
@@ -30,21 +31,15 @@ export default () => {
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                 </Stack>
               </Box>
             </Stack>
@@ -56,7 +51,7 @@ export default () => {
         <Heading level="h600">alignItems</Heading>
         <Inline gap="sp-400">
           {flexAlignItems.map((alignItemsValue) => (
-            <Stack gap="sp-300">
+            <Stack key={alignItemsValue} gap="sp-300">
               <Heading level="h500">{alignItemsValue}</Heading>
 
               <Box backgroundColor={['neutral', 'grey']} display="block">
@@ -64,21 +59,15 @@ export default () => {
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                 </Stack>
               </Box>
             </Stack>
@@ -88,7 +77,7 @@ export default () => {
         <Heading level="h600">justifyContent</Heading>
         <Inline gap="sp-400">
           {flexJustifyContent.map((justifyContentValue) => (
-            <Stack gap="sp-300">
+            <Stack key={justifyContentValue} gap="sp-300">
               <Heading level="h500">{justifyContentValue}</Heading>
 
               <Box
@@ -99,21 +88,45 @@ export default () => {
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
+                </Stack>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+
+        <Heading level="h700">Overflow</Heading>
+        <Heading level="h600">flexWrap</Heading>
+        <Inline gap="sp-400">
+          {flexWrap.map((flexWrapValue) => (
+            <Stack key={flexWrapValue} gap="sp-300">
+              <Heading level="h500">{flexWrapValue}</Heading>
+
+              <Box
+                backgroundColor={['neutral', 'grey']}
+                UNSAFE_style={{ height: '50px' }}
+              >
+                <Stack gap="sp-200" flexWrap={flexWrapValue as any}>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  />
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  />
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  />
                 </Stack>
               </Box>
             </Stack>

package/examples/04-inline.tsx

@@ -11,6 +11,7 @@ import { GlobalSpacingToken, SPACING_SCALE } from '../src/constants';
 
 const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
 const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
+const flexWrap = ['wrap'];
 
 /**
  * Inline permutations
@@ -22,7 +23,7 @@ export default () => {
         <Heading level="h700">Spacing</Heading>
         <Stack gap="sp-400">
           {Object.keys(SPACING_SCALE).map((space) => (
-            <Inline gap="sp-300">
+            <Inline key={space} gap="sp-300">
               <Box width="sp-800">
                 <Heading level="h500">{space}</Heading>
               </Box>
@@ -32,21 +33,15 @@ export default () => {
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                 </Inline>
               </Box>
             </Inline>
@@ -58,7 +53,7 @@ export default () => {
         <Heading level="h600">alignItems</Heading>
         <Inline gap="sp-400">
           {flexAlignItems.map((alignItemsValue) => (
-            <Stack gap="sp-300">
+            <Stack key={alignItemsValue} gap="sp-300">
               <Heading level="h500">{alignItemsValue}</Heading>
 
               <Box
@@ -69,21 +64,15 @@ export default () => {
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                 </Inline>
               </Box>
             </Stack>
@@ -93,7 +82,7 @@ export default () => {
         <Heading level="h600">justifyContent</Heading>
         <Inline gap="sp-400">
           {flexJustifyContent.map((justifyContentValue) => (
-            <Stack gap="sp-300">
+            <Stack key={justifyContentValue} gap="sp-300">
               <Heading level="h500">{justifyContentValue}</Heading>
 
               <Box
@@ -108,21 +97,45 @@ export default () => {
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
                   <Box
                     padding="sp-100"
                     backgroundColor={['success.bold', 'green']}
-                  >
-                    {' '}
-                  </Box>
+                  />
+                </Inline>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+
+        <Heading level="h700">Overflow</Heading>
+        <Heading level="h600">flexWrap</Heading>
+        <Inline gap="sp-400">
+          {flexWrap.map((flexWrapValue) => (
+            <Stack key={flexWrapValue} gap="sp-300">
+              <Heading level="h500">{flexWrapValue}</Heading>
+
+              <Box
+                backgroundColor={['neutral', 'grey']}
+                UNSAFE_style={{ width: '50px' }}
+              >
+                <Inline gap="sp-200" flexWrap={flexWrapValue as any}>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  />
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  />
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  />
                 </Inline>
               </Box>
             </Stack>

package/examples/06-section-message.tsx

@@ -40,7 +40,7 @@ export default () => {
               to assure my dear sister of my welfare and increasing confidence
               in the success of my undertaking.
             </Text>
-            <Inline divider="·" gap="sp-100">
+            <Inline divider="·" gap="sp-75">
               <Button
                 appearance="link"
                 spacing="none"

package/examples/99-interactions.tsx

@@ -1,4 +1,6 @@
 /** @jsx jsx */
+import { Fragment } from 'react';
+
 import { css, jsx } from '@emotion/react';
 
 import Button from '@atlaskit/button';
@@ -55,15 +57,16 @@ export default () => {
                 paddingInline="sp-150"
                 backgroundColor={[app, '']}
               >
-                <InteractionSurface />
-                <Text
-                  textAlign="center"
-                  fontSize="14px"
-                  lineHeight="32px"
-                  fontWeight="500"
-                >
-                  {app}
-                </Text>
+                <InteractionSurface>
+                  <Text
+                    textAlign="center"
+                    fontSize="14px"
+                    lineHeight="32px"
+                    fontWeight="500"
+                  >
+                    {app}
+                  </Text>
+                </InteractionSurface>
               </Box>
             </FocusRing>
           ))}
@@ -81,12 +84,13 @@ export default () => {
               position="relative"
               padding="sp-50"
             >
-              <InteractionSurface />
-              <WarningIcon
-                label="icon button"
-                primaryColor={token('color.icon.inverse')}
-                secondaryColor={token('color.background.brand.bold')}
-              />
+              <InteractionSurface>
+                <WarningIcon
+                  label="icon button"
+                  primaryColor={token('color.icon.inverse')}
+                  secondaryColor={token('color.background.brand.bold')}
+                />
+              </InteractionSurface>
             </Box>
           </FocusRing>
           <FocusRing>
@@ -98,9 +102,9 @@ export default () => {
               position="relative"
               padding="sp-50"
             >
-              <InteractionSurface />
-
-              <WarningIcon label="icon button" />
+              <InteractionSurface>
+                <WarningIcon label="icon button" />
+              </InteractionSurface>
             </Box>
           </FocusRing>
           <FocusRing>
@@ -112,12 +116,13 @@ export default () => {
               position="relative"
               padding="sp-50"
             >
-              <InteractionSurface />
-              <WarningIcon
-                label="icon button"
-                primaryColor={token('color.icon.warning.inverse')}
-                secondaryColor={token('color.background.warning.bold')}
-              />
+              <InteractionSurface>
+                <WarningIcon
+                  label="icon button"
+                  primaryColor={token('color.icon.warning.inverse')}
+                  secondaryColor={token('color.background.warning.bold')}
+                />
+              </InteractionSurface>
             </Box>
           </FocusRing>
         </Inline>
@@ -136,7 +141,9 @@ export default () => {
                 position="relative"
                 padding="sp-50"
               >
-                <InteractionSurface />
+                <InteractionSurface>
+                  <Fragment />
+                </InteractionSurface>
               </Box>
             </FocusRing>
           ))}
@@ -157,7 +164,7 @@ export default () => {
           >
             <input
               id="textfield"
-              pattern="[\d+]"
+              pattern="\d+"
               style={{
                 padding: 0,
                 border: 'none',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {

package/report.api.md

@@ -1,14 +1,21 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/ds-explorations"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
 
-<!--
-	Generated API Report version: 2.0
--->
+### Main Entry Types
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+<!--SECTION START: Main Entry Types-->
 
 ```ts
+/// <reference types="react" />
+
 import type { CSSProperties } from 'react';
 import { ElementType } from 'react';
 import { FC } from 'react';
@@ -172,6 +179,8 @@ const flexAlignItemsMap_2: {
   baseline: SerializedStyles;
   flexStart: SerializedStyles;
   flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -180,6 +189,8 @@ const flexAlignItemsMap_3: {
   baseline: SerializedStyles;
   flexStart: SerializedStyles;
   flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -212,6 +223,8 @@ const flexJustifyContentMap_2: {
   center: SerializedStyles;
   flexStart: SerializedStyles;
   flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -219,6 +232,24 @@ 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)
@@ -247,8 +278,9 @@ type GlobalSpacingToken = keyof typeof UNSAFE_SPACING_SCALE;
 // @public (undocumented)
 interface InlineProps extends BasePrimitiveProps {
   alignItems?: FlexAlignItems_2;
-  children: ReactNode;
+  children: NonTextChildren;
   divider?: ReactNode;
+  flexWrap?: FlexWrap;
   gap: GlobalSpacingToken;
   justifyContent?: FlexJustifyContent_2;
 }
@@ -261,7 +293,7 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
   // (undocumented)
   appearance?: InteractionBackgroundColor;
   // (undocumented)
-  children?: ReactNode;
+  children: ReactNode;
 }
 
 // @public (undocumented)
@@ -278,6 +310,17 @@ const lineHeightMap: {
   '40px': SerializedStyles;
 };
 
+// @public (undocumented)
+type NonTextChildren = (JSX.Element | false | null)[] | JSX.Element;
+
+// @public (undocumented)
+type Overflow = keyof typeof overflowMap;
+
+// @public (undocumented)
+const overflowMap: {
+  auto: SerializedStyles;
+};
+
 // @public (undocumented)
 const positionMap: {
   absolute: SerializedStyles;
@@ -288,7 +331,8 @@ const positionMap: {
 // @public (undocumented)
 interface StackProps extends BasePrimitiveProps {
   alignItems?: FlexAlignItems_3;
-  children: ReactNode;
+  children: NonTextChildren;
+  flexWrap?: FlexWrap_2;
   gap: GlobalSpacingToken;
   justifyContent?: FlexJustifyContent_3;
 }
@@ -340,7 +384,7 @@ export const UNSAFE_Box: ForwardRefExoticComponent<
 
 // @public (undocumented)
 export interface UNSAFE_BoxProps<T extends HTMLElement = HTMLElement>
-  extends Omit<HTMLAttributes<T>, 'style' | 'as' | 'className'>,
+  extends Omit<HTMLAttributes<T>, 'as' | 'className' | 'style'>,
     BasePrimitiveProps {
   alignItems?: FlexAlignItems;
   as?: ElementType;
@@ -349,12 +393,13 @@ export interface UNSAFE_BoxProps<T extends HTMLElement = HTMLElement>
   borderRadius?: BorderRadius;
   borderStyle?: BorderStyle;
   borderWidth?: BorderWidth;
-  children?: ReactNode;
+  children?: NonTextChildren | boolean | null | undefined;
   className?: string;
   display?: Display;
   flexDirection?: FlexDirection;
   height?: GlobalSpacingToken;
   justifyContent?: FlexJustifyContent;
+  overflow?: Overflow;
   padding?: GlobalSpacingToken;
   paddingBlock?: GlobalSpacingToken;
   paddingInline?: GlobalSpacingToken;
@@ -424,3 +469,5 @@ const verticalAlignMap: {
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

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);