@atlaskit/ds-explorations 2.3.1 → 2.4.0

package/examples/00-basic.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Box from '../src/components/box.partial';
+import Text from '../src/components/text.partial';
+
+export default () => {
+  return (
+    <Box>
+      <Box
+        paddingBlock="space.400"
+        paddingInline="space.400"
+        alignItems="center"
+        backgroundColor="brand.bold"
+        UNSAFE_style={{ aspectRatio: '1/1' }}
+      >
+        <Text fontWeight="medium" color="inverse">
+          A basic box
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/examples/01-box.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+
+import Heading from '@atlaskit/heading';
+import Inline from '@atlaskit/primitives/inline';
+import Stack from '@atlaskit/primitives/stack';
+
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
+import { spacingScale } from '../src/internal/spacing-scale';
+
+/**
+ * Box permutations
+ */
+export default () => {
+  return (
+    <Stack space="space.400" alignInline="start">
+      <Stack space="space.200" testId="box-with-background-and-paddingBlock">
+        <Heading level="h600">paddingBlock</Heading>
+        <Inline space="space.200" alignBlock="center">
+          {spacingScale.map((space) => (
+            <Box
+              key={space}
+              backgroundColor="discovery.bold"
+              paddingBlock={space}
+            >
+              <Box backgroundColor="elevation.surface" justifyContent="center">
+                <Text>{space}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-background-and-paddingInline">
+        <Heading level="h600">paddingInline</Heading>
+        <Stack space="space.200" alignInline="center">
+          {spacingScale.map((space) => (
+            <Box
+              key={space}
+              backgroundColor="discovery.bold"
+              paddingInline={space}
+            >
+              <Box backgroundColor="elevation.surface" justifyContent="center">
+                <Text>{space}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Stack>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-background-and-padding">
+        <Heading level="h600">padding</Heading>
+        <Inline space="space.200" alignBlock="center">
+          {spacingScale.map((space) => (
+            <Box key={space} backgroundColor="discovery.bold" padding={space}>
+              <Box backgroundColor="elevation.surface" justifyContent="center">
+                <Text>{space}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-backgroundColor">
+        <Heading level="h600">backgroundColor</Heading>
+        <Inline space="space.200" alignBlock="center">
+          {(
+            [
+              'discovery.bold',
+              'success.bold',
+              'warning.bold',
+              'danger.bold',
+              'information.bold',
+              'brand.bold',
+            ] as const
+          ).map((bgColor) => (
+            <Box key={bgColor} backgroundColor={bgColor} padding="space.400">
+              <Box justifyContent="center">
+                <Text>{bgColor}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-borderColor">
+        <Heading level="h600">borderColor</Heading>
+        <Inline space="space.200" alignBlock="center">
+          {(
+            [
+              'discovery',
+              'success',
+              'warning',
+              'danger',
+              'information',
+              'brand',
+            ] as const
+          ).map((borderColor) => (
+            <Box
+              key={borderColor}
+              backgroundColor="neutral"
+              borderColor={borderColor}
+              borderStyle="solid"
+              borderWidth="2px"
+              padding="space.400"
+            >
+              <Box justifyContent="center">
+                <Text color="color.text">{borderColor}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-shadow">
+        <Heading level="h600">shadow</Heading>
+        <Inline space="space.200" alignBlock="center">
+          {(['raised', 'overflow', 'overlay'] as const).map((shadow) => (
+            <Box
+              key={shadow}
+              backgroundColor="elevation.surface"
+              shadow={shadow}
+              padding="space.400"
+            >
+              <Box justifyContent="center">
+                <Text color="color.text">{shadow}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack space="space.200" testId="box-with-layer">
+        <Heading level="h600">layer</Heading>
+        <Box alignItems="center" UNSAFE_style={{ width: 800, height: 650 }}>
+          {(
+            [
+              'card',
+              'navigation',
+              'dialog',
+              'layer',
+              'blanket',
+              'modal',
+              'flag',
+              'spotlight',
+              'tooltip',
+            ] as const
+          ).map((layer, index) => (
+            <Box
+              key={layer}
+              backgroundColor="elevation.surface"
+              layer={layer}
+              shadow="overlay"
+              padding="space.400"
+              position="absolute"
+              UNSAFE_style={{
+                // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+                top: index * 64,
+                // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+                left: index * 64,
+              }}
+            >
+              <Box justifyContent="center">
+                <Text color="color.text">{layer}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Stack>
+    </Stack>
+  );
+};

package/examples/02-text-advanced.tsx

@@ -1,28 +1,37 @@
 import React from 'react';
 
-import { Box, Inline, xcss } from '@atlaskit/primitives';
+import Inline from '@atlaskit/primitives/inline';
 
+import Box from '../src/components/box.partial';
 import Text from '../src/components/text.partial';
 
-const boxStyles = xcss({
-  display: 'flex',
-  paddingBlock: 'space.400',
-  paddingInline: 'space.400',
-  alignItems: 'center',
-});
-
 export default () => {
   return (
     <Inline space="space.100">
-      <Box xcss={boxStyles} backgroundColor="color.background.information">
+      <Box
+        paddingBlock="space.400"
+        paddingInline="space.400"
+        alignItems="center"
+        backgroundColor="information"
+      >
         <Text>
           <Text>Text that deletes its redundant wrapping</Text>
         </Text>
       </Box>
-      <Box xcss={boxStyles} backgroundColor="color.background.information">
+      <Box
+        paddingBlock="space.400"
+        paddingInline="space.400"
+        alignItems="center"
+        backgroundColor="information"
+      >
         <Text fontWeight="semibold">Text on information</Text>
       </Box>
-      <Box xcss={boxStyles} backgroundColor="color.background.brand.bold">
+      <Box
+        paddingBlock="space.400"
+        paddingInline="space.400"
+        alignItems="center"
+        backgroundColor="brand.bold"
+      >
         <Text fontWeight="semibold">Text on brand bold</Text>
       </Box>
     </Inline>

package/examples/02-text.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
 
 import Heading from '@atlaskit/heading';
-import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import Inline from '@atlaskit/primitives/inline';
+import Stack from '@atlaskit/primitives/stack';
 
-import { UNSAFE_Text as Text } from '../src';
-
-const fixedWidthStyles = xcss({ display: 'flex', width: '200px' });
-
-const lineHeightContainerStyles = xcss({
-  display: 'inline-flex',
-});
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
 
 export default () => {
   return (
@@ -18,7 +13,7 @@ export default () => {
         Text examples
       </Heading>
       <Stack space="space.200">
-        <Box>
+        <Box display="block">
           <Heading level="h300">Font size</Heading>
           <Inline space="space.200" testId="font-sizes">
             {(
@@ -39,7 +34,7 @@ export default () => {
             ))}
           </Inline>
         </Box>
-        <Box>
+        <Box display="block">
           <Heading level="h300" as="h4">
             Font weight
           </Heading>
@@ -53,7 +48,7 @@ export default () => {
             )}
           </Inline>
         </Box>
-        <Box>
+        <Box display="block">
           <Heading level="h300" as="h4">
             Line height
           </Heading>
@@ -70,15 +65,15 @@ export default () => {
             ).map((lineHeight) => (
               <Box
                 key={lineHeight}
-                xcss={lineHeightContainerStyles}
-                backgroundColor="color.background.neutral"
+                display="inlineFlex"
+                backgroundColor="neutral"
               >
                 <Text lineHeight={lineHeight}>lineHeight {lineHeight}</Text>
               </Box>
             ))}
           </Inline>
         </Box>
-        <Box>
+        <Box display="block">
           <Heading level="h300" as="h4">
             Testing
           </Heading>
@@ -97,7 +92,7 @@ export default () => {
             >
               Text with various props
             </Text>
-            <Box xcss={fixedWidthStyles}>
+            <Box UNSAFE_style={{ width: '200px' }}>
               <Text shouldTruncate>Long truncated text that is cut off.</Text>
             </Box>
           </Stack>

package/examples/03-stack.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+
+import Heading from '@atlaskit/heading';
+
+import {
+  UNSAFE_Box as Box,
+  UNSAFE_Inline as Inline,
+  UNSAFE_Stack as Stack,
+} from '../src';
+import { spacingScale } from '../src/internal/spacing-scale';
+
+const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
+const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
+const flexWrap = ['wrap'];
+
+/**
+ * Stack permutations
+ */
+export default () => {
+  return (
+    <Stack gap="space.300">
+      <Stack gap="space.300" testId="stack-spacing">
+        <Heading level="h700">Spacing</Heading>
+        <Inline gap="space.400">
+          {spacingScale.map((space) => (
+            <Stack key={space} gap="space.300">
+              <Heading level="h500">{space}</Heading>
+
+              <Box backgroundColor="neutral">
+                <Stack gap={space} alignItems="center">
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                </Stack>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+      </Stack>
+      <Stack gap="space.300" testId="stack-alignment">
+        <Heading level="h700">Alignment</Heading>
+        <Heading level="h600">alignItems</Heading>
+        <Inline gap="space.400">
+          {flexAlignItems.map((alignItemsValue) => (
+            <Stack key={alignItemsValue} gap="space.300">
+              <Heading level="h500">{alignItemsValue}</Heading>
+
+              <Box backgroundColor="neutral" display="block">
+                <Stack gap="space.200" alignItems={alignItemsValue as any}>
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                </Stack>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+
+        <Heading level="h600">justifyContent</Heading>
+        <Inline gap="space.400">
+          {flexJustifyContent.map((justifyContentValue) => (
+            <Stack key={justifyContentValue} gap="space.300">
+              <Heading level="h500">{justifyContentValue}</Heading>
+
+              <Box backgroundColor="neutral" UNSAFE_style={{ height: '200px' }}>
+                <Stack
+                  gap="space.200"
+                  justifyContent={justifyContentValue as any}
+                >
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                </Stack>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+
+        <Heading level="h700">Overflow</Heading>
+        <Heading level="h600">flexWrap</Heading>
+        <Inline gap="space.400">
+          {flexWrap.map((flexWrapValue) => (
+            <Stack key={flexWrapValue} gap="space.300">
+              <Heading level="h500">{flexWrapValue}</Heading>
+
+              <Box backgroundColor="neutral" UNSAFE_style={{ height: '50px' }}>
+                <Stack gap="space.200" flexWrap={flexWrapValue as any}>
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                </Stack>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+      </Stack>
+    </Stack>
+  );
+};

package/examples/04-inline.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+
+import Heading from '@atlaskit/heading';
+
+import {
+  UNSAFE_Box as Box,
+  UNSAFE_Inline as Inline,
+  UNSAFE_Stack as Stack,
+} from '../src';
+import { spacingScale } from '../src/internal/spacing-scale';
+
+const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'] as const;
+const flexJustifyContent = ['center', 'flexStart', 'flexEnd'] as const;
+const flexWrap = ['wrap'] as const;
+
+/**
+ * Inline permutations
+ */
+export default () => {
+  return (
+    <Stack gap="space.300">
+      <Stack gap="space.300" testId="inline-spacing">
+        <Heading level="h700">Spacing</Heading>
+        <Stack gap="space.400">
+          {spacingScale.map((space) => (
+            <Inline key={space} gap="space.300">
+              <Box UNSAFE_style={{ width: 140 }}>
+                <Heading level="h500">{space}</Heading>
+              </Box>
+
+              <Box backgroundColor="neutral">
+                <Inline gap={space} alignItems="center">
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                </Inline>
+              </Box>
+            </Inline>
+          ))}
+        </Stack>
+      </Stack>
+      <Stack gap="space.300" testId="inline-alignment">
+        <Heading level="h700">Alignment</Heading>
+        <Heading level="h600">alignItems</Heading>
+        <Inline gap="space.400">
+          {flexAlignItems.map((alignItemsValue) => (
+            <Stack key={alignItemsValue} gap="space.300">
+              <Heading level="h500">{alignItemsValue}</Heading>
+              <Box backgroundColor="neutral" UNSAFE_style={{ height: '100px' }}>
+                <Inline gap="space.200" alignItems={alignItemsValue}>
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                </Inline>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+        <Heading level="h600">justifyContent</Heading>
+        <Inline gap="space.400">
+          {flexJustifyContent.map((justifyContentValue) => (
+            <Stack key={justifyContentValue} gap="space.300">
+              <Heading level="h500">{justifyContentValue}</Heading>
+
+              <Box
+                display="block"
+                backgroundColor="neutral"
+                UNSAFE_style={{ width: '140px' }}
+              >
+                <Inline gap="space.200" justifyContent={justifyContentValue}>
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                </Inline>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+
+        <Heading level="h700">Overflow</Heading>
+        <Heading level="h600">flexWrap</Heading>
+        <Inline gap="space.400">
+          {flexWrap.map((flexWrapValue) => (
+            <Stack key={flexWrapValue} gap="space.300">
+              <Heading level="h500">{flexWrapValue}</Heading>
+              <Box backgroundColor="neutral" UNSAFE_style={{ width: '50px' }}>
+                <Inline gap="space.200" flexWrap={flexWrapValue as any}>
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                </Inline>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+      </Stack>
+    </Stack>
+  );
+};

package/examples/05-badge.tsx

@@ -1,24 +1,20 @@
 import React from 'react';
 
 import Badge from '@atlaskit/badge';
-import { Box, xcss } from '@atlaskit/primitives';
 
+import { UNSAFE_Box as Box } from '../src';
 import Text from '../src/components/text.partial';
 
-const containerStyles = xcss({
-  borderRadius: 'border.radius.200',
-  display: 'inlineFlex',
-  lineHeight: '16px',
-});
-
 export default () => {
   return (
     <>
       <Badge>{8}</Badge>
       <Box
-        xcss={containerStyles}
-        backgroundColor="color.background.neutral"
+        borderRadius="badge"
+        backgroundColor="neutral"
+        display="inlineFlex"
         paddingInline="space.075"
+        UNSAFE_style={{ lineHeight: '16px' }}
       >
         <Text fontSize="size.075">8</Text>
       </Box>

package/examples/06-section-message.tsx

@@ -6,12 +6,14 @@ import Button from '@atlaskit/button';
 import __noop from '@atlaskit/ds-lib/noop';
 import Heading from '@atlaskit/heading';
 import InfoIcon from '@atlaskit/icon/glyph/info';
-import { Box, Inline, Stack } from '@atlaskit/primitives';
+import Inline from '@atlaskit/primitives/inline';
+import Stack from '@atlaskit/primitives/stack';
 import SectionMessage, {
   SectionMessageAction,
 } from '@atlaskit/section-message';
 import { token } from '@atlaskit/tokens';
 
+import { UNSAFE_Box as Box } from '../src';
 import Text from '../src/components/text.partial';
 
 export default () => {
@@ -20,7 +22,7 @@ export default () => {
       <Box
         paddingBlock="space.200"
         paddingInline="space.200"
-        backgroundColor="color.background.information"
+        backgroundColor="information"
       >
         <Inline space="space.200">
           <InfoIcon

package/examples/07-comment.tsx

@@ -2,8 +2,10 @@
 import { jsx } from '@emotion/react';
 
 import Lozenge from '@atlaskit/lozenge';
-import { Box, Inline, Stack } from '@atlaskit/primitives';
+import Inline from '@atlaskit/primitives/inline';
+import Stack from '@atlaskit/primitives/stack';
 
+import { UNSAFE_Box as Box } from '../src';
 import Text from '../src/components/text.partial';
 
 const Author = ({ children }: any) => {

package/examples/08-lozenge.tsx

@@ -2,22 +2,18 @@
 import { jsx } from '@emotion/react';
 
 import Lozenge from '@atlaskit/lozenge';
-import { Box, Inline, xcss } from '@atlaskit/primitives';
+import Inline from '@atlaskit/primitives/inline';
 
-import { UNSAFE_Text as Text } from '../src';
-
-const boxStyles = xcss({
-  borderRadius: 'border.radius',
-});
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
 
 export default () => {
   return (
     <Inline space="space.200">
       <Lozenge>Default</Lozenge>
       <Box
+        backgroundColor="neutral"
+        borderRadius="normal"
         as="span"
-        xcss={boxStyles}
-        backgroundColor="color.background.neutral"
         paddingInline="space.050"
       >
         <Text