@atlaskit/ds-explorations 1.2.1 → 1.3.0

package/scripts/spacing-scale-template.tsx

@@ -1,21 +1,14 @@
 import prettier from 'prettier';
 import parserTypeScript from 'prettier/parser-typescript';
 
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-spacing';
+import tokens from '@atlaskit/tokens/spacing-raw';
 
 const onlyScaleTokens = tokens.filter((token) =>
   token.name.startsWith('spacing.scale.'),
 );
 
-type Token = {
-  name: string;
-};
-
 const activeTokens = onlyScaleTokens.map(
-  (t): Token => ({
-    name: t.name,
-  }),
+  (t) => `'${t.name.replace('spacing.', '')}'`,
 );
 
 export const createSpacingScaleTemplate = () => {
@@ -23,10 +16,10 @@ export const createSpacingScaleTemplate = () => {
     `
 export const spacingScale = [
   ${activeTokens
-    .sort((a, b) => (a.name < b.name ? -1 : 1))
-    .map((token) => {
-      const propName = token.name.replace('spacing.', '');
-      return `'${propName}'`;
+    .sort((a, b) => {
+      const spaceValueA = Number(a.match(/(\d+)/)![0]);
+      const spaceValueB = Number(b.match(/(\d+)/)![0]);
+      return spaceValueA < spaceValueB ? -1 : 1;
     })
     .join(',\n\t')}
 ] as const;`,

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-block-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e3938c3eead13468b7dc2cacb8d06e3ebbf75b0f23b3b18f58d0aa97551d68c6
-size 9791
+oid sha256:b334cf257241e9d363e5766654784144f199f517de15854538613938b10c0170
+size 11785

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-inline-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:033f4d148e97f471a60577958670488c656b924542aecd6bc0ae05d64b31505e
-size 10406
+oid sha256:03408bfaadb8361d2ae76af2f5b7df4b3ed05d620319820c977150a113e69ece
+size 23901

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:188a241edc2128e4c9e4cd60257a291527f299594bf3abfe630444733358c1cb
-size 9554
+oid sha256:c8a8d044a2a68d47ada4fcf7979eed79b16ead8c56e2dda48a3686b768f04297
+size 12063

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

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6fe1a7a68e8903aca9f0ea6aad8ac74da225d76784fb4cb041f80fde57a553cc
-size 30391
+oid sha256:8e40b6523964f6547d9a5ce9cc870e98846b74eb7ee5bdb4173dcaa110635254
+size 35276

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

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:75afc824514d0d9bc9514d73c019fcc37d8188250ccf2e6e81735b397e70ee2f
-size 12243
+oid sha256:773445bdd4fceab46cc30012359833933fb2438dee81c378e1316b93aff8e2a5
+size 12715

package/src/components/box.partial.tsx

@@ -68,14 +68,17 @@ type BoxPropsBase<T extends ElementType> = {
   borderRadius?: BorderRadius;
   /**
    * Defines the main axis direction.
+   * @deprecated
    */
   flexDirection?: FlexDirection;
   /**
    * Used to align children along the cross axis.
+   * @deprecated
    */
   alignItems?: FlexAlignItems;
   /**
    * Used to align children along the main axis.
+   * @deprecated
    */
   justifyContent?: FlexJustifyContent;
   /**
@@ -99,10 +102,12 @@ type BoxPropsBase<T extends ElementType> = {
   paddingInline?: PaddingInline;
   /**
    * Token representing width.
+   * @experimental The existing tokens will be replaced to better reflect dimensions.
    */
   width?: Width;
   /**
    * Token representing height.
+   * @experimental The existing tokens will be replaced to better reflect dimensions.
    */
   height?: Height;
   /**
@@ -231,12 +236,18 @@ const borderRadiusMap = {
   badge: css({ borderRadius: '8px' }),
 };
 
+/**
+ * @experimental - this is likely to be removed
+ */
 type FlexDirection = keyof typeof flexDirectionMap;
 const flexDirectionMap = {
   column: css({ flexDirection: 'column' }),
   row: css({ flexDirection: 'row' }),
 };
 
+/**
+ * @experimental - this is likely to be removed
+ */
 type FlexAlignItems = keyof typeof flexAlignItemsMap;
 const flexAlignItemsMap = {
   center: css({ alignItems: 'center' }),
@@ -245,6 +256,9 @@ const flexAlignItemsMap = {
   flexEnd: css({ alignItems: 'flex-end' }),
 };
 
+/**
+ * @experimental - this is likely to be removed
+ */
 type FlexJustifyContent = keyof typeof flexJustifyContentMap;
 const flexJustifyContentMap = {
   center: css({ justifyContent: 'center' }),
@@ -280,48 +294,91 @@ const baseStyles = css({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::af3861211bc952f699f2ee08458af9a1>>
+ * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
+ * @codegenId dimensions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["width", "height"]
+ */
+const widthMap = {
+  '100%': css({ width: '100%' }),
+  'size.100': css({ width: '16px' }),
+  'size.1000': css({ width: '192px' }),
+  'size.200': css({ width: '24px' }),
+  'size.300': css({ width: '32px' }),
+  'size.400': css({ width: '40px' }),
+  'size.500': css({ width: '48px' }),
+  'size.600': css({ width: '96px' }),
+};
+
+export type Width = keyof typeof widthMap;
+
+const heightMap = {
+  '100%': css({ height: '100%' }),
+  'size.100': css({ height: '16px' }),
+  'size.1000': css({ height: '192px' }),
+  'size.200': css({ height: '24px' }),
+  'size.300': css({ height: '32px' }),
+  'size.400': css({ height: '40px' }),
+  'size.500': css({ height: '48px' }),
+  'size.600': css({ height: '96px' }),
+};
+
+export type Height = keyof typeof heightMap;
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::41980a62e387c13a99802814a0f33d26>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
+ * @codegenParams ["padding", "paddingBlock", "paddingInline"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const paddingMap = {
   'scale.0': css({
-    padding: token('spacing.scale.0', '0'),
+    padding: token('space.0', '0px'),
   }),
   'scale.025': css({
-    padding: token('spacing.scale.025', '0.125rem'),
+    padding: token('space.025', '2px'),
   }),
   'scale.050': css({
-    padding: token('spacing.scale.050', '0.25rem'),
+    padding: token('space.050', '4px'),
   }),
   'scale.075': css({
-    padding: token('spacing.scale.075', '0.375rem'),
+    padding: token('space.075', '6px'),
   }),
   'scale.100': css({
-    padding: token('spacing.scale.100', '0.5rem'),
+    padding: token('space.100', '8px'),
+  }),
+  'scale.1000': css({
+    padding: token('space.1000', '80px'),
   }),
   'scale.150': css({
-    padding: token('spacing.scale.150', '0.75rem'),
+    padding: token('space.150', '12px'),
   }),
   'scale.200': css({
-    padding: token('spacing.scale.200', '1rem'),
+    padding: token('space.200', '16px'),
   }),
   'scale.250': css({
-    padding: token('spacing.scale.250', '1.25rem'),
+    padding: token('space.250', '20px'),
   }),
   'scale.300': css({
-    padding: token('spacing.scale.300', '1.5rem'),
+    padding: token('space.300', '24px'),
   }),
   'scale.400': css({
-    padding: token('spacing.scale.400', '2rem'),
+    padding: token('space.400', '32px'),
   }),
   'scale.500': css({
-    padding: token('spacing.scale.500', '2.5rem'),
+    padding: token('space.500', '40px'),
   }),
   'scale.600': css({
-    padding: token('spacing.scale.600', '3rem'),
+    padding: token('space.600', '48px'),
+  }),
+  'scale.800': css({
+    padding: token('space.800', '64px'),
   }),
 };
 
@@ -329,40 +386,46 @@ export type Padding = keyof typeof paddingMap;
 
 const paddingBlockMap = {
   'scale.0': css({
-    paddingBlock: token('spacing.scale.0', '0'),
+    paddingBlock: token('space.0', '0px'),
   }),
   'scale.025': css({
-    paddingBlock: token('spacing.scale.025', '0.125rem'),
+    paddingBlock: token('space.025', '2px'),
   }),
   'scale.050': css({
-    paddingBlock: token('spacing.scale.050', '0.25rem'),
+    paddingBlock: token('space.050', '4px'),
   }),
   'scale.075': css({
-    paddingBlock: token('spacing.scale.075', '0.375rem'),
+    paddingBlock: token('space.075', '6px'),
   }),
   'scale.100': css({
-    paddingBlock: token('spacing.scale.100', '0.5rem'),
+    paddingBlock: token('space.100', '8px'),
+  }),
+  'scale.1000': css({
+    paddingBlock: token('space.1000', '80px'),
   }),
   'scale.150': css({
-    paddingBlock: token('spacing.scale.150', '0.75rem'),
+    paddingBlock: token('space.150', '12px'),
   }),
   'scale.200': css({
-    paddingBlock: token('spacing.scale.200', '1rem'),
+    paddingBlock: token('space.200', '16px'),
   }),
   'scale.250': css({
-    paddingBlock: token('spacing.scale.250', '1.25rem'),
+    paddingBlock: token('space.250', '20px'),
   }),
   'scale.300': css({
-    paddingBlock: token('spacing.scale.300', '1.5rem'),
+    paddingBlock: token('space.300', '24px'),
   }),
   'scale.400': css({
-    paddingBlock: token('spacing.scale.400', '2rem'),
+    paddingBlock: token('space.400', '32px'),
   }),
   'scale.500': css({
-    paddingBlock: token('spacing.scale.500', '2.5rem'),
+    paddingBlock: token('space.500', '40px'),
   }),
   'scale.600': css({
-    paddingBlock: token('spacing.scale.600', '3rem'),
+    paddingBlock: token('space.600', '48px'),
+  }),
+  'scale.800': css({
+    paddingBlock: token('space.800', '64px'),
   }),
 };
 
@@ -370,126 +433,50 @@ export type PaddingBlock = keyof typeof paddingBlockMap;
 
 const paddingInlineMap = {
   'scale.0': css({
-    paddingInline: token('spacing.scale.0', '0'),
+    paddingInline: token('space.0', '0px'),
   }),
   'scale.025': css({
-    paddingInline: token('spacing.scale.025', '0.125rem'),
+    paddingInline: token('space.025', '2px'),
   }),
   'scale.050': css({
-    paddingInline: token('spacing.scale.050', '0.25rem'),
+    paddingInline: token('space.050', '4px'),
   }),
   'scale.075': css({
-    paddingInline: token('spacing.scale.075', '0.375rem'),
+    paddingInline: token('space.075', '6px'),
   }),
   'scale.100': css({
-    paddingInline: token('spacing.scale.100', '0.5rem'),
-  }),
-  'scale.150': css({
-    paddingInline: token('spacing.scale.150', '0.75rem'),
-  }),
-  'scale.200': css({
-    paddingInline: token('spacing.scale.200', '1rem'),
-  }),
-  'scale.250': css({
-    paddingInline: token('spacing.scale.250', '1.25rem'),
-  }),
-  'scale.300': css({
-    paddingInline: token('spacing.scale.300', '1.5rem'),
-  }),
-  'scale.400': css({
-    paddingInline: token('spacing.scale.400', '2rem'),
-  }),
-  'scale.500': css({
-    paddingInline: token('spacing.scale.500', '2.5rem'),
-  }),
-  'scale.600': css({
-    paddingInline: token('spacing.scale.600', '3rem'),
-  }),
-};
-
-export type PaddingInline = keyof typeof paddingInlineMap;
-
-const widthMap = {
-  'scale.0': css({
-    width: token('spacing.scale.0', '0'),
-  }),
-  'scale.025': css({
-    width: token('spacing.scale.025', '0.125rem'),
-  }),
-  'scale.050': css({
-    width: token('spacing.scale.050', '0.25rem'),
-  }),
-  'scale.075': css({
-    width: token('spacing.scale.075', '0.375rem'),
+    paddingInline: token('space.100', '8px'),
   }),
-  'scale.100': css({
-    width: token('spacing.scale.100', '0.5rem'),
+  'scale.1000': css({
+    paddingInline: token('space.1000', '80px'),
   }),
   'scale.150': css({
-    width: token('spacing.scale.150', '0.75rem'),
+    paddingInline: token('space.150', '12px'),
   }),
   'scale.200': css({
-    width: token('spacing.scale.200', '1rem'),
+    paddingInline: token('space.200', '16px'),
   }),
   'scale.250': css({
-    width: token('spacing.scale.250', '1.25rem'),
+    paddingInline: token('space.250', '20px'),
   }),
   'scale.300': css({
-    width: token('spacing.scale.300', '1.5rem'),
+    paddingInline: token('space.300', '24px'),
   }),
   'scale.400': css({
-    width: token('spacing.scale.400', '2rem'),
+    paddingInline: token('space.400', '32px'),
   }),
   'scale.500': css({
-    width: token('spacing.scale.500', '2.5rem'),
+    paddingInline: token('space.500', '40px'),
   }),
   'scale.600': css({
-    width: token('spacing.scale.600', '3rem'),
+    paddingInline: token('space.600', '48px'),
   }),
-};
-
-export type Width = keyof typeof widthMap;
-
-const heightMap = {
-  'scale.0': css({
-    height: token('spacing.scale.0', '0'),
-  }),
-  'scale.025': css({
-    height: token('spacing.scale.025', '0.125rem'),
-  }),
-  'scale.050': css({
-    height: token('spacing.scale.050', '0.25rem'),
-  }),
-  'scale.075': css({
-    height: token('spacing.scale.075', '0.375rem'),
-  }),
-  'scale.100': css({
-    height: token('spacing.scale.100', '0.5rem'),
-  }),
-  'scale.150': css({
-    height: token('spacing.scale.150', '0.75rem'),
-  }),
-  'scale.200': css({
-    height: token('spacing.scale.200', '1rem'),
-  }),
-  'scale.250': css({
-    height: token('spacing.scale.250', '1.25rem'),
-  }),
-  'scale.300': css({
-    height: token('spacing.scale.300', '1.5rem'),
-  }),
-  'scale.400': css({
-    height: token('spacing.scale.400', '2rem'),
-  }),
-  'scale.500': css({
-    height: token('spacing.scale.500', '2.5rem'),
-  }),
-  'scale.600': css({
-    height: token('spacing.scale.600', '3rem'),
+  'scale.800': css({
+    paddingInline: token('space.800', '64px'),
   }),
 };
 
-export type Height = keyof typeof heightMap;
+export type PaddingInline = keyof typeof paddingInlineMap;
 
 /**
  * @codegenEnd

package/src/components/inline.partial.tsx

@@ -69,6 +69,7 @@ const dividerStyles = css({
   margin: '0 -2px',
   color: token('color.text.subtle', '#42526E'),
   pointerEvents: 'none',
+  userSelect: 'none',
 });
 
 const Divider: FC = ({ children }) => (
@@ -101,14 +102,26 @@ const Inline = memo(
         flexWrap,
         divider,
         UNSAFE_style,
-        children,
+        children: rawChildren,
         testId,
       },
       ref,
     ) => {
       const dividerComponent =
         typeof divider === 'string' ? <Divider>{divider}</Divider> : divider;
-      const childrenArray = Children.toArray(children).filter(Boolean);
+
+      const children = divider
+        ? Children.toArray(rawChildren)
+            .filter(Boolean)
+            .map((child, index) => {
+              return (
+                <Fragment key={index}>
+                  {divider && index > 0 ? dividerComponent : null}
+                  {child}
+                </Fragment>
+              );
+            })
+        : rawChildren;
 
       return (
         <div
@@ -123,14 +136,7 @@ const Inline = memo(
           data-testid={testId}
           ref={ref}
         >
-          {childrenArray.map((child, index) => {
-            return (
-              <Fragment key={index}>
-                {divider && index > 0 ? dividerComponent : null}
-                {child}
-              </Fragment>
-            );
-          })}
+          {children}
         </div>
       );
     },
@@ -143,7 +149,7 @@ export default Inline;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a3c9f0528d75060e7cf9617878520e18>>
+ * @codegen <<SignedSource::76168a57c8f10c9f325865d2189aa0ff>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
@@ -151,40 +157,46 @@ export default Inline;
  */
 const columnGapMap = {
   'scale.0': css({
-    columnGap: token('spacing.scale.0', '0'),
+    columnGap: token('space.0', '0px'),
   }),
   'scale.025': css({
-    columnGap: token('spacing.scale.025', '0.125rem'),
+    columnGap: token('space.025', '2px'),
   }),
   'scale.050': css({
-    columnGap: token('spacing.scale.050', '0.25rem'),
+    columnGap: token('space.050', '4px'),
   }),
   'scale.075': css({
-    columnGap: token('spacing.scale.075', '0.375rem'),
+    columnGap: token('space.075', '6px'),
   }),
   'scale.100': css({
-    columnGap: token('spacing.scale.100', '0.5rem'),
+    columnGap: token('space.100', '8px'),
+  }),
+  'scale.1000': css({
+    columnGap: token('space.1000', '80px'),
   }),
   'scale.150': css({
-    columnGap: token('spacing.scale.150', '0.75rem'),
+    columnGap: token('space.150', '12px'),
   }),
   'scale.200': css({
-    columnGap: token('spacing.scale.200', '1rem'),
+    columnGap: token('space.200', '16px'),
   }),
   'scale.250': css({
-    columnGap: token('spacing.scale.250', '1.25rem'),
+    columnGap: token('space.250', '20px'),
   }),
   'scale.300': css({
-    columnGap: token('spacing.scale.300', '1.5rem'),
+    columnGap: token('space.300', '24px'),
   }),
   'scale.400': css({
-    columnGap: token('spacing.scale.400', '2rem'),
+    columnGap: token('space.400', '32px'),
   }),
   'scale.500': css({
-    columnGap: token('spacing.scale.500', '2.5rem'),
+    columnGap: token('space.500', '40px'),
   }),
   'scale.600': css({
-    columnGap: token('spacing.scale.600', '3rem'),
+    columnGap: token('space.600', '48px'),
+  }),
+  'scale.800': css({
+    columnGap: token('space.800', '64px'),
   }),
 };
 

package/src/components/stack.partial.tsx

@@ -107,7 +107,7 @@ export default Stack;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cdcf4cb57de0e4673d92627810e3e095>>
+ * @codegen <<SignedSource::2b10240c217de584b627a7e2f56d11a0>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
@@ -115,40 +115,46 @@ export default Stack;
  */
 const rowGapMap = {
   'scale.0': css({
-    rowGap: token('spacing.scale.0', '0'),
+    rowGap: token('space.0', '0px'),
   }),
   'scale.025': css({
-    rowGap: token('spacing.scale.025', '0.125rem'),
+    rowGap: token('space.025', '2px'),
   }),
   'scale.050': css({
-    rowGap: token('spacing.scale.050', '0.25rem'),
+    rowGap: token('space.050', '4px'),
   }),
   'scale.075': css({
-    rowGap: token('spacing.scale.075', '0.375rem'),
+    rowGap: token('space.075', '6px'),
   }),
   'scale.100': css({
-    rowGap: token('spacing.scale.100', '0.5rem'),
+    rowGap: token('space.100', '8px'),
+  }),
+  'scale.1000': css({
+    rowGap: token('space.1000', '80px'),
   }),
   'scale.150': css({
-    rowGap: token('spacing.scale.150', '0.75rem'),
+    rowGap: token('space.150', '12px'),
   }),
   'scale.200': css({
-    rowGap: token('spacing.scale.200', '1rem'),
+    rowGap: token('space.200', '16px'),
   }),
   'scale.250': css({
-    rowGap: token('spacing.scale.250', '1.25rem'),
+    rowGap: token('space.250', '20px'),
   }),
   'scale.300': css({
-    rowGap: token('spacing.scale.300', '1.5rem'),
+    rowGap: token('space.300', '24px'),
   }),
   'scale.400': css({
-    rowGap: token('spacing.scale.400', '2rem'),
+    rowGap: token('space.400', '32px'),
   }),
   'scale.500': css({
-    rowGap: token('spacing.scale.500', '2.5rem'),
+    rowGap: token('space.500', '40px'),
   }),
   'scale.600': css({
-    rowGap: token('spacing.scale.600', '3rem'),
+    rowGap: token('space.600', '48px'),
+  }),
+  'scale.800': css({
+    rowGap: token('space.800', '64px'),
   }),
 };
 

package/src/internal/spacing-scale.tsx

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Some artifact
+ * Internal codegen of the spacing scale values. Only used for internal examples.
  *
- * @codegen <<SignedSource::caecb926afa82b027fba396074de5c2c>>
+ * @codegen <<SignedSource::d351e41acd06f256fb46554409694f31>>
  * @codegenCommand yarn codegen-styles
  */
 export const spacingScale = [
@@ -19,4 +19,6 @@ export const spacingScale = [
   'scale.400',
   'scale.500',
   'scale.600',
+  'scale.800',
+  'scale.1000',
 ] as const;