@atlaskit/ds-explorations 2.0.8 → 2.0.10

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 (13) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/version.json +1 -1
  3. package/dist/es2019/version.json +1 -1
  4. package/dist/esm/version.json +1 -1
  5. package/examples/01-box.tsx +17 -20
  6. package/examples/02-text-advanced.tsx +3 -2
  7. package/examples/02-text.tsx +9 -12
  8. package/examples/06-section-message.tsx +6 -6
  9. package/examples/07-comment.tsx +5 -5
  10. package/examples/08-lozenge.tsx +3 -6
  11. package/examples/99-interactions.tsx +8 -8
  12. package/package.json +2 -1
  13. package/src/components/inline.partial.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/ds-explorations
2
2
 
3
+ ## 2.0.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [`9fb52345e8d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9fb52345e8d) - Update some examples to use Inline and Stack from `@atlaskit/primitives`.
8
+
9
+ ## 2.0.9
10
+
11
+ ### Patch Changes
12
+
13
+ - [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
14
+
3
15
  ## 2.0.8
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "2.0.8",
3
+ "version": "2.0.10",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "2.0.8",
3
+ "version": "2.0.10",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "2.0.8",
3
+ "version": "2.0.10",
4
4
  "sideEffects": false
5
5
  }
package/examples/01-box.tsx CHANGED
@@ -1,13 +1,10 @@
1
1
  import React from 'react';
2
2
 
3
3
  import Heading from '@atlaskit/heading';
4
+ import Inline from '@atlaskit/primitives/inline';
5
+ import Stack from '@atlaskit/primitives/stack';
4
6
 
5
- import {
6
- UNSAFE_Box as Box,
7
- UNSAFE_Inline as Inline,
8
- UNSAFE_Stack as Stack,
9
- UNSAFE_Text as Text,
10
- } from '../src';
7
+ import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
11
8
  import { spacingScale } from '../src/internal/spacing-scale';
12
9
 
13
10
  /**
@@ -15,10 +12,10 @@ import { spacingScale } from '../src/internal/spacing-scale';
15
12
  */
16
13
  export default () => {
17
14
  return (
18
- <Stack gap="space.400" alignItems="flexStart">
19
- <Stack gap="space.200" testId="box-with-background-and-paddingBlock">
15
+ <Stack space="400" alignInline="start">
16
+ <Stack space="200" testId="box-with-background-and-paddingBlock">
20
17
  <Heading level="h600">paddingBlock</Heading>
21
- <Inline gap="space.200" alignItems="center">
18
+ <Inline space="200" alignBlock="center">
22
19
  {spacingScale.map((space) => (
23
20
  <Box
24
21
  key={space}
@@ -33,9 +30,9 @@ export default () => {
33
30
  </Inline>
34
31
  </Stack>
35
32
 
36
- <Stack gap="space.200" testId="box-with-background-and-paddingInline">
33
+ <Stack space="200" testId="box-with-background-and-paddingInline">
37
34
  <Heading level="h600">paddingInline</Heading>
38
- <Stack gap="space.200" alignItems="center">
35
+ <Stack space="200" alignInline="center">
39
36
  {spacingScale.map((space) => (
40
37
  <Box
41
38
  key={space}
@@ -50,9 +47,9 @@ export default () => {
50
47
  </Stack>
51
48
  </Stack>
52
49
 
53
- <Stack gap="space.200" testId="box-with-background-and-padding">
50
+ <Stack space="200" testId="box-with-background-and-padding">
54
51
  <Heading level="h600">padding</Heading>
55
- <Inline gap="space.200" alignItems="center">
52
+ <Inline space="200" alignBlock="center">
56
53
  {spacingScale.map((space) => (
57
54
  <Box key={space} backgroundColor="discovery.bold" padding={space}>
58
55
  <Box backgroundColor="elevation.surface" justifyContent="center">
@@ -63,9 +60,9 @@ export default () => {
63
60
  </Inline>
64
61
  </Stack>
65
62
 
66
- <Stack gap="space.200" testId="box-with-backgroundColor">
63
+ <Stack space="200" testId="box-with-backgroundColor">
67
64
  <Heading level="h600">backgroundColor</Heading>
68
- <Inline gap="space.200" alignItems="center">
65
+ <Inline space="200" alignBlock="center">
69
66
  {(
70
67
  [
71
68
  'discovery.bold',
@@ -85,9 +82,9 @@ export default () => {
85
82
  </Inline>
86
83
  </Stack>
87
84
 
88
- <Stack gap="space.200" testId="box-with-borderColor">
85
+ <Stack space="200" testId="box-with-borderColor">
89
86
  <Heading level="h600">borderColor</Heading>
90
- <Inline gap="space.200" alignItems="center">
87
+ <Inline space="200" alignBlock="center">
91
88
  {(
92
89
  [
93
90
  'discovery',
@@ -114,9 +111,9 @@ export default () => {
114
111
  </Inline>
115
112
  </Stack>
116
113
 
117
- <Stack gap="space.200" testId="box-with-shadow">
114
+ <Stack space="200" testId="box-with-shadow">
118
115
  <Heading level="h600">shadow</Heading>
119
- <Inline gap="space.200" alignItems="center">
116
+ <Inline space="200" alignBlock="center">
120
117
  {(['raised', 'overflow', 'overlay'] as const).map((shadow) => (
121
118
  <Box
122
119
  key={shadow}
@@ -132,7 +129,7 @@ export default () => {
132
129
  </Inline>
133
130
  </Stack>
134
131
 
135
- <Stack gap="space.200" testId="box-with-layer">
132
+ <Stack space="200" testId="box-with-layer">
136
133
  <Heading level="h600">layer</Heading>
137
134
  <Box alignItems="center" UNSAFE_style={{ width: 800, height: 650 }}>
138
135
  {(
package/examples/02-text-advanced.tsx CHANGED
@@ -1,12 +1,13 @@
1
1
  import React from 'react';
2
2
 
3
+ import Inline from '@atlaskit/primitives/inline';
4
+
3
5
  import Box from '../src/components/box.partial';
4
- import Inline from '../src/components/inline.partial';
5
6
  import Text from '../src/components/text.partial';
6
7
 
7
8
  export default () => {
8
9
  return (
9
- <Inline gap="space.100">
10
+ <Inline space="100">
10
11
  <Box
11
12
  paddingBlock="space.400"
12
13
  paddingInline="space.400"
package/examples/02-text.tsx CHANGED
@@ -1,24 +1,21 @@
1
1
  import React from 'react';
2
2
 
3
3
  import Heading from '@atlaskit/heading';
4
+ import Inline from '@atlaskit/primitives/inline';
5
+ import Stack from '@atlaskit/primitives/stack';
4
6
 
5
- import {
6
- UNSAFE_Box as Box,
7
- UNSAFE_Inline as Inline,
8
- UNSAFE_Stack as Stack,
9
- UNSAFE_Text as Text,
10
- } from '../src';
7
+ import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
11
8
 
12
9
  export default () => {
13
10
  return (
14
- <Stack gap="space.300">
11
+ <Stack space="300">
15
12
  <Heading level="h400" as="h3">
16
13
  Text examples
17
14
  </Heading>
18
- <Stack gap="space.200">
15
+ <Stack space="200">
19
16
  <Box display="block">
20
17
  <Heading level="h300">Font size</Heading>
21
- <Inline gap="space.200" testId="font-sizes">
18
+ <Inline space="200" testId="font-sizes">
22
19
  {(
23
20
  [
24
21
  'size.050',
@@ -41,7 +38,7 @@ export default () => {
41
38
  <Heading level="h300" as="h4">
42
39
  Font weight
43
40
  </Heading>
44
- <Inline gap="space.200" testId="font-weights">
41
+ <Inline space="200" testId="font-weights">
45
42
  {(['regular', 'medium', 'semibold', 'bold'] as const).map(
46
43
  (fontWeight) => (
47
44
  <Text key={fontWeight} fontWeight={fontWeight}>
@@ -55,7 +52,7 @@ export default () => {
55
52
  <Heading level="h300" as="h4">
56
53
  Line height
57
54
  </Heading>
58
- <Inline gap="space.200" testId="line-heights" alignItems="center">
55
+ <Inline space="200" testId="line-heights" alignBlock="center">
59
56
  {(
60
57
  [
61
58
  'lineHeight.100',
@@ -80,7 +77,7 @@ export default () => {
80
77
  <Heading level="h300" as="h4">
81
78
  Testing
82
79
  </Heading>
83
- <Stack gap="space.050" testId="testing">
80
+ <Stack space="050" testId="testing">
84
81
  <Text as="p">Paragraph</Text>
85
82
  <Text as="div">A div</Text>
86
83
  <Text>
package/examples/06-section-message.tsx CHANGED
@@ -6,30 +6,30 @@ import Button from '@atlaskit/button';
6
6
  import __noop from '@atlaskit/ds-lib/noop';
7
7
  import Heading from '@atlaskit/heading';
8
8
  import InfoIcon from '@atlaskit/icon/glyph/info';
9
+ import Inline from '@atlaskit/primitives/inline';
10
+ import Stack from '@atlaskit/primitives/stack';
9
11
  import SectionMessage, {
10
12
  SectionMessageAction,
11
13
  } from '@atlaskit/section-message';
12
14
  import { token } from '@atlaskit/tokens';
13
15
 
14
16
  import { UNSAFE_Box as Box } from '../src';
15
- import Inline from '../src/components/inline.partial';
16
- import Stack from '../src/components/stack.partial';
17
17
  import Text from '../src/components/text.partial';
18
18
 
19
19
  export default () => {
20
20
  return (
21
- <Stack gap="space.100">
21
+ <Stack space="100">
22
22
  <Box
23
23
  paddingBlock="space.200"
24
24
  paddingInline="space.200"
25
25
  backgroundColor="information"
26
26
  >
27
- <Inline gap="space.200">
27
+ <Inline space="200">
28
28
  <InfoIcon
29
29
  primaryColor={token('color.icon.information')}
30
30
  label="info"
31
31
  />
32
- <Stack gap="space.100">
32
+ <Stack space="100">
33
33
  <Heading as="h1" level="h500">
34
34
  The Modern Prometheus
35
35
  </Heading>
@@ -40,7 +40,7 @@ export default () => {
40
40
  to assure my dear sister of my welfare and increasing confidence
41
41
  in the success of my undertaking.
42
42
  </Text>
43
- <Inline divider="·" gap="space.075">
43
+ <Inline separator="·" space="075">
44
44
  <Button
45
45
  appearance="link"
46
46
  spacing="none"
package/examples/07-comment.tsx CHANGED
@@ -2,10 +2,10 @@
2
2
  import { jsx } from '@emotion/react';
3
3
 
4
4
  import Lozenge from '@atlaskit/lozenge';
5
+ import Inline from '@atlaskit/primitives/inline';
6
+ import Stack from '@atlaskit/primitives/stack';
5
7
 
6
8
  import { UNSAFE_Box as Box } from '../src';
7
- import Inline from '../src/components/inline.partial';
8
- import Stack from '../src/components/stack.partial';
9
9
  import Text from '../src/components/text.partial';
10
10
 
11
11
  const Author = ({ children }: any) => {
@@ -27,8 +27,8 @@ const CommentAction = ({ children }: any) => {
27
27
  export default () => {
28
28
  return (
29
29
  <Box>
30
- <Stack gap="space.050">
31
- <Inline gap="space.100" alignItems="center">
30
+ <Stack space="050">
31
+ <Inline space="100" alignBlock="center">
32
32
  <Author>Jane Citizen</Author>
33
33
  <Lozenge>Author</Lozenge>
34
34
  <Date>Jun 15, 2022</Date>
@@ -41,7 +41,7 @@ export default () => {
41
41
  aliquip ex ea commodo consequat.
42
42
  </Text>
43
43
  <Box color="subtle">
44
- <Inline gap="space.100" divider="·">
44
+ <Inline space="100" separator="·">
45
45
  <CommentAction>Reply</CommentAction>
46
46
  <CommentAction>Edit</CommentAction>
47
47
  <CommentAction>Like</CommentAction>
package/examples/08-lozenge.tsx CHANGED
@@ -2,16 +2,13 @@
2
2
  import { jsx } from '@emotion/react';
3
3
 
4
4
  import Lozenge from '@atlaskit/lozenge';
5
+ import Inline from '@atlaskit/primitives/inline';
5
6
 
6
- import {
7
- UNSAFE_Box as Box,
8
- UNSAFE_Inline as Inline,
9
- UNSAFE_Text as Text,
10
- } from '../src';
7
+ import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
11
8
 
12
9
  export default () => {
13
10
  return (
14
- <Inline gap="space.200">
11
+ <Inline space="200">
15
12
  <Lozenge>Default</Lozenge>
16
13
  <Box
17
14
  backgroundColor="neutral"
package/examples/99-interactions.tsx CHANGED
@@ -8,14 +8,14 @@ import { Code } from '@atlaskit/code';
8
8
  import FocusRing from '@atlaskit/focus-ring';
9
9
  import Heading from '@atlaskit/heading';
10
10
  import WarningIcon from '@atlaskit/icon/glyph/warning';
11
+ import Inline from '@atlaskit/primitives/inline';
12
+ import Stack from '@atlaskit/primitives/stack';
11
13
  import Textfield from '@atlaskit/textfield';
12
14
  import { token } from '@atlaskit/tokens';
13
15
 
14
16
  import {
15
17
  UNSAFE_Box as Box,
16
- UNSAFE_Inline as Inline,
17
18
  UNSAFE_InteractionSurface as InteractionSurface,
18
- UNSAFE_Stack as Stack,
19
19
  UNSAFE_Text as Text,
20
20
  } from '../src';
21
21
 
@@ -36,9 +36,9 @@ const fieldsetStyles = css({
36
36
  export default () => {
37
37
  return (
38
38
  <Box width="size.500" padding="space.100" testId="all">
39
- <Stack gap="space.200">
39
+ <Stack space="200">
40
40
  <Heading level="h400">Current ADS Buttons</Heading>
41
- <Inline gap="space.200">
41
+ <Inline space="200">
42
42
  <Button appearance="primary">brand.bold</Button>
43
43
  <Button appearance="default">neutral</Button>
44
44
  <Button appearance="warning">warning.bold</Button>
@@ -46,7 +46,7 @@ export default () => {
46
46
  <Heading level="h400">
47
47
  Buttons with <Code>InteractionSurface</Code>
48
48
  </Heading>
49
- <Inline gap="space.200" testId="buttons">
49
+ <Inline space="200" testId="buttons">
50
50
  {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
51
51
  <FocusRing key={app}>
52
52
  <Box
@@ -74,7 +74,7 @@ export default () => {
74
74
  <Heading level="h400">
75
75
  Icon Buttons with <Code>InteractionSurface</Code>
76
76
  </Heading>
77
- <Inline gap="space.200" testId="icon-buttons">
77
+ <Inline space="200" testId="icon-buttons">
78
78
  <FocusRing>
79
79
  <Box
80
80
  as="button"
@@ -129,7 +129,7 @@ export default () => {
129
129
  <Heading level="h400">
130
130
  Progress Indicator with <Code>InteractionSurface</Code>
131
131
  </Heading>
132
- <Inline gap="space.200" testId="progress-indicators">
132
+ <Inline space="200" testId="progress-indicators">
133
133
  {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
134
134
  <FocusRing>
135
135
  <Box
@@ -149,7 +149,7 @@ export default () => {
149
149
  ))}
150
150
  </Inline>
151
151
  <Heading level="h400">Textfield / input spikes</Heading>
152
- <Inline gap="space.200">
152
+ <Inline space="200">
153
153
  <Textfield />
154
154
  <Box
155
155
  as="fieldset"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "2.0.8",
3
+ "version": "2.0.10",
4
4
  "description": "An experimental package for exploration and validation of spacing / typography foundations.",
5
5
  "license": "Apache-2.0",
6
6
  "atlassian": {
@@ -57,6 +57,7 @@
57
57
  "@atlaskit/heading": "*",
58
58
  "@atlaskit/icon": "*",
59
59
  "@atlaskit/lozenge": "*",
60
+ "@atlaskit/primitives": "^0.4.0",
60
61
  "@atlaskit/section-message": "*",
61
62
  "@atlaskit/ssr": "*",
62
63
  "@atlaskit/textfield": "*",
package/src/components/inline.partial.tsx CHANGED
@@ -79,7 +79,7 @@ const dividerStyles = css({
79
79
  userSelect: 'none',
80
80
  });
81
81
 
82
- const Divider: FC = ({ children }) => (
82
+ const Divider: FC<{ children: string }> = ({ children }) => (
83
83
  <span css={dividerStyles}>{children}</span>
84
84
  );
85
85