@atlaskit/ds-explorations 2.3.2 → 2.4.0

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

package/examples/99-interactions.tsx

@@ -1,55 +1,42 @@
 /** @jsx jsx */
 import { Fragment } from 'react';
 
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 
 import Button from '@atlaskit/button';
 import { Code } from '@atlaskit/code';
 import FocusRing from '@atlaskit/focus-ring';
 import Heading from '@atlaskit/heading';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import Inline from '@atlaskit/primitives/inline';
+import Stack from '@atlaskit/primitives/stack';
 import Textfield from '@atlaskit/textfield';
+import { B200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import {
+  UNSAFE_Box as Box,
   UNSAFE_InteractionSurface as InteractionSurface,
   UNSAFE_Text as Text,
 } from '../src';
 
-const containerStyles = xcss({
-  width: 'size.500',
-});
-
-const fieldsetStyles = xcss({
+const fieldsetStyles = css({
   flex: '1 1 100%',
-  borderStyle: 'solid',
-  borderWidth: 'border.width',
-  borderColor: 'color.border',
   ':hover': {
-    backgroundColor: 'color.background.input.hovered',
+    backgroundColor: token('color.background.input.hovered', '#bbb'),
   },
   ':invalid': {
-    borderColor: 'color.border.danger',
-  },
-  ':focus': {
-    backgroundColor: 'color.background.input',
-    borderColor: 'color.border.focused',
+    borderColor: token('color.border.danger', 'red'),
   },
-  ':focus-within': {
-    backgroundColor: 'color.background.input',
-    borderColor: 'color.border.focused',
+  ':focus, :focus-within': {
+    backgroundColor: token('color.background.input', '#FAFBFC'),
+    borderColor: token('color.border.focused', B200),
   },
 });
 
-const focusRingBoxStyles = xcss({
-  borderRadius: 'border.radius',
-  position: 'relative',
-});
-
 export default () => {
   return (
-    <Box xcss={containerStyles} padding="space.100" testId="all">
+    <Box width="size.500" padding="space.100" testId="all">
       <Stack space="space.200">
         <Heading level="h400">Current ADS Buttons</Heading>
         <Inline space="space.200">
@@ -61,18 +48,13 @@ export default () => {
           Buttons with <Code>InteractionSurface</Code>
         </Heading>
         <Inline space="space.200" testId="buttons">
-          {(
-            [
-              'color.background.brand.bold',
-              'color.background.neutral',
-              'color.background.warning.bold',
-            ] as const
-          ).map((app) => (
+          {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
             <FocusRing key={app}>
               <Box
                 as="button"
                 onClick={() => console.log('hello')}
-                xcss={focusRingBoxStyles}
+                borderRadius="normal"
+                position="relative"
                 paddingInline="space.150"
                 backgroundColor={app}
               >
@@ -97,10 +79,11 @@ export default () => {
           <FocusRing>
             <Box
               as="button"
-              backgroundColor="color.background.brand.bold"
+              backgroundColor="brand.bold"
               onClick={() => console.log('hello')}
+              borderRadius="normal"
+              position="relative"
               padding="space.050"
-              xcss={focusRingBoxStyles}
             >
               <InteractionSurface>
                 <WarningIcon
@@ -114,9 +97,10 @@ export default () => {
           <FocusRing>
             <Box
               as="button"
-              backgroundColor="color.background.neutral"
+              backgroundColor="neutral"
               onClick={() => console.log('hello')}
-              xcss={focusRingBoxStyles}
+              borderRadius="normal"
+              position="relative"
               padding="space.050"
             >
               <InteractionSurface>
@@ -127,9 +111,10 @@ export default () => {
           <FocusRing>
             <Box
               as="button"
-              backgroundColor="color.background.warning.bold"
+              backgroundColor="warning.bold"
               onClick={() => console.log('hello')}
-              xcss={focusRingBoxStyles}
+              borderRadius="normal"
+              position="relative"
               padding="space.050"
             >
               <InteractionSurface>
@@ -146,20 +131,15 @@ export default () => {
           Progress Indicator with <Code>InteractionSurface</Code>
         </Heading>
         <Inline space="space.200" testId="progress-indicators">
-          {(
-            [
-              'color.background.brand.bold',
-              'color.background.neutral',
-              'color.background.warning.bold',
-            ] as const
-          ).map((app) => (
+          {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
             <FocusRing>
               <Box
                 key={app}
                 as="button"
                 backgroundColor={app}
                 onClick={() => console.log('hello')}
-                xcss={focusRingBoxStyles}
+                borderRadius="rounded"
+                position="relative"
                 padding="space.050"
               >
                 <InteractionSurface>
@@ -174,10 +154,14 @@ export default () => {
           <Textfield />
           <Box
             as="fieldset"
+            borderRadius="normal"
+            borderStyle="solid"
+            borderWidth="2px"
             padding="space.100"
             tabIndex={-1}
-            backgroundColor="color.background.input"
-            xcss={fieldsetStyles}
+            borderColor="color.border"
+            backgroundColor="input"
+            css={fieldsetStyles}
           >
             <input
               id="textfield"

package/inline/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/ds-explorations/inline",
+  "main": "../dist/cjs/components/inline.partial.js",
+  "module": "../dist/esm/components/inline.partial.js",
+  "module:es2019": "../dist/es2019/components/inline.partial.js",
+  "sideEffects": false,
+  "types": "../dist/types/components/inline.partial.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/components/inline.partial.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,6 @@
     "prepare": "yarn ak-postbuild"
   },
   "dependencies": {
-    "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -74,7 +73,10 @@
   },
   "af:exports": {
     ".": "./src/index.tsx",
-    "./text": "./src/components/text.partial.tsx"
+    "./box": "./src/components/box.partial.tsx",
+    "./text": "./src/components/text.partial.tsx",
+    "./stack": "./src/components/stack.partial.tsx",
+    "./inline": "./src/components/inline.partial.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "homepage": "https://atlaskit.atlassian.com"