@atlaskit/ds-explorations 0.1.3 → 0.1.5

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 (56) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/components/box.partial.js +7 -1
  3. package/dist/cjs/components/inline.partial.js +42 -17
  4. package/dist/cjs/components/interaction-surface.partial.js +3 -2
  5. package/dist/cjs/components/stack.partial.js +44 -17
  6. package/dist/cjs/components/text.partial.js +2 -0
  7. package/dist/cjs/version.json +1 -1
  8. package/dist/es2019/components/box.partial.js +6 -0
  9. package/dist/es2019/components/inline.partial.js +37 -16
  10. package/dist/es2019/components/interaction-surface.partial.js +3 -2
  11. package/dist/es2019/components/stack.partial.js +37 -16
  12. package/dist/es2019/components/text.partial.js +2 -0
  13. package/dist/es2019/version.json +1 -1
  14. package/dist/esm/components/box.partial.js +7 -1
  15. package/dist/esm/components/inline.partial.js +42 -16
  16. package/dist/esm/components/interaction-surface.partial.js +3 -2
  17. package/dist/esm/components/stack.partial.js +42 -16
  18. package/dist/esm/components/text.partial.js +2 -0
  19. package/dist/esm/version.json +1 -1
  20. package/dist/types/components/box.partial.d.ts +11 -3
  21. package/dist/types/components/inline.partial.d.ts +14 -2
  22. package/dist/types/components/interaction-surface.partial.d.ts +4 -3
  23. package/dist/types/components/stack.partial.d.ts +15 -4
  24. package/dist/types/components/types.d.ts +1 -0
  25. package/dist/types-ts4.0/components/box.partial.d.ts +221 -0
  26. package/dist/types-ts4.0/components/inline.partial.d.ts +64 -0
  27. package/dist/types-ts4.0/components/interaction-surface.partial.d.ts +46 -0
  28. package/dist/types-ts4.0/components/stack.partial.d.ts +58 -0
  29. package/dist/types-ts4.0/components/surface-provider.d.ts +15 -0
  30. package/dist/types-ts4.0/components/text.partial.d.ts +132 -0
  31. package/dist/types-ts4.0/components/types.d.ts +14 -0
  32. package/dist/types-ts4.0/constants.d.ts +15 -0
  33. package/dist/types-ts4.0/index.d.ts +8 -0
  34. package/dist/types-ts4.0/internal/color-map.d.ts +34 -0
  35. package/dist/types-ts4.0/internal/role-to-element.d.ts +32 -0
  36. package/examples/03-stack.tsx +43 -30
  37. package/examples/04-inline.tsx +43 -30
  38. package/examples/06-section-message.tsx +1 -1
  39. package/examples/99-interactions.tsx +33 -26
  40. package/package.json +10 -3
  41. package/report.api.md +191 -268
  42. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +18 -0
  43. package/scripts/spacing-codegen-template.tsx +6 -0
  44. package/src/components/__tests__/unit/box.test.tsx +10 -2
  45. package/src/components/__tests__/unit/inline.test.tsx +7 -7
  46. package/src/components/__tests__/unit/interaction-suface.test.tsx +13 -7
  47. package/src/components/__tests__/unit/stack.test.tsx +5 -5
  48. package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-alignment-example-should-match-snapshot-1-snap.png +2 -2
  49. package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-alignment-example-should-match-snapshot-1-snap.png +2 -2
  50. package/src/components/box.partial.tsx +13 -9
  51. package/src/components/inline.partial.tsx +46 -19
  52. package/src/components/interaction-surface.partial.tsx +23 -4
  53. package/src/components/stack.partial.tsx +46 -20
  54. package/src/components/text.partial.tsx +2 -0
  55. package/src/components/types.tsx +2 -0
  56. package/tmp/api-report-tmp.d.ts +450 -0
package/examples/04-inline.tsx CHANGED
@@ -11,6 +11,7 @@ import { GlobalSpacingToken, SPACING_SCALE } from '../src/constants';
11
11
 
12
12
  const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
13
13
  const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
14
+ const flexWrap = ['wrap'];
14
15
 
15
16
  /**
16
17
  * Inline permutations
@@ -22,7 +23,7 @@ export default () => {
22
23
  <Heading level="h700">Spacing</Heading>
23
24
  <Stack gap="sp-400">
24
25
  {Object.keys(SPACING_SCALE).map((space) => (
25
- <Inline gap="sp-300">
26
+ <Inline key={space} gap="sp-300">
26
27
  <Box width="sp-800">
27
28
  <Heading level="h500">{space}</Heading>
28
29
  </Box>
@@ -32,21 +33,15 @@ export default () => {
32
33
  <Box
33
34
  padding="sp-100"
34
35
  backgroundColor={['success.bold', 'green']}
35
- >
36
- {' '}
37
- </Box>
36
+ />
38
37
  <Box
39
38
  padding="sp-100"
40
39
  backgroundColor={['success.bold', 'green']}
41
- >
42
- {' '}
43
- </Box>
40
+ />
44
41
  <Box
45
42
  padding="sp-100"
46
43
  backgroundColor={['success.bold', 'green']}
47
- >
48
- {' '}
49
- </Box>
44
+ />
50
45
  </Inline>
51
46
  </Box>
52
47
  </Inline>
@@ -58,7 +53,7 @@ export default () => {
58
53
  <Heading level="h600">alignItems</Heading>
59
54
  <Inline gap="sp-400">
60
55
  {flexAlignItems.map((alignItemsValue) => (
61
- <Stack gap="sp-300">
56
+ <Stack key={alignItemsValue} gap="sp-300">
62
57
  <Heading level="h500">{alignItemsValue}</Heading>
63
58
 
64
59
  <Box
@@ -69,21 +64,15 @@ export default () => {
69
64
  <Box
70
65
  padding="sp-100"
71
66
  backgroundColor={['success.bold', 'green']}
72
- >
73
- {' '}
74
- </Box>
67
+ />
75
68
  <Box
76
69
  padding="sp-100"
77
70
  backgroundColor={['success.bold', 'green']}
78
- >
79
- {' '}
80
- </Box>
71
+ />
81
72
  <Box
82
73
  padding="sp-100"
83
74
  backgroundColor={['success.bold', 'green']}
84
- >
85
- {' '}
86
- </Box>
75
+ />
87
76
  </Inline>
88
77
  </Box>
89
78
  </Stack>
@@ -93,7 +82,7 @@ export default () => {
93
82
  <Heading level="h600">justifyContent</Heading>
94
83
  <Inline gap="sp-400">
95
84
  {flexJustifyContent.map((justifyContentValue) => (
96
- <Stack gap="sp-300">
85
+ <Stack key={justifyContentValue} gap="sp-300">
97
86
  <Heading level="h500">{justifyContentValue}</Heading>
98
87
 
99
88
  <Box
@@ -108,21 +97,45 @@ export default () => {
108
97
  <Box
109
98
  padding="sp-100"
110
99
  backgroundColor={['success.bold', 'green']}
111
- >
112
- {' '}
113
- </Box>
100
+ />
114
101
  <Box
115
102
  padding="sp-100"
116
103
  backgroundColor={['success.bold', 'green']}
117
- >
118
- {' '}
119
- </Box>
104
+ />
120
105
  <Box
121
106
  padding="sp-100"
122
107
  backgroundColor={['success.bold', 'green']}
123
- >
124
- {' '}
125
- </Box>
108
+ />
109
+ </Inline>
110
+ </Box>
111
+ </Stack>
112
+ ))}
113
+ </Inline>
114
+
115
+ <Heading level="h700">Overflow</Heading>
116
+ <Heading level="h600">flexWrap</Heading>
117
+ <Inline gap="sp-400">
118
+ {flexWrap.map((flexWrapValue) => (
119
+ <Stack key={flexWrapValue} gap="sp-300">
120
+ <Heading level="h500">{flexWrapValue}</Heading>
121
+
122
+ <Box
123
+ backgroundColor={['neutral', 'grey']}
124
+ UNSAFE_style={{ width: '50px' }}
125
+ >
126
+ <Inline gap="sp-200" flexWrap={flexWrapValue as any}>
127
+ <Box
128
+ padding="sp-100"
129
+ backgroundColor={['success.bold', 'green']}
130
+ />
131
+ <Box
132
+ padding="sp-100"
133
+ backgroundColor={['success.bold', 'green']}
134
+ />
135
+ <Box
136
+ padding="sp-100"
137
+ backgroundColor={['success.bold', 'green']}
138
+ />
126
139
  </Inline>
127
140
  </Box>
128
141
  </Stack>
package/examples/06-section-message.tsx CHANGED
@@ -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="sp-100">
43
+ <Inline divider="·" gap="sp-75">
44
44
  <Button
45
45
  appearance="link"
46
46
  spacing="none"
package/examples/99-interactions.tsx CHANGED
@@ -1,4 +1,6 @@
1
1
  /** @jsx jsx */
2
+ import { Fragment } from 'react';
3
+
2
4
  import { css, jsx } from '@emotion/react';
3
5
 
4
6
  import Button from '@atlaskit/button';
@@ -55,15 +57,16 @@ export default () => {
55
57
  paddingInline="sp-150"
56
58
  backgroundColor={[app, '']}
57
59
  >
58
- <InteractionSurface />
59
- <Text
60
- textAlign="center"
61
- fontSize="14px"
62
- lineHeight="32px"
63
- fontWeight="500"
64
- >
65
- {app}
66
- </Text>
60
+ <InteractionSurface>
61
+ <Text
62
+ textAlign="center"
63
+ fontSize="14px"
64
+ lineHeight="32px"
65
+ fontWeight="500"
66
+ >
67
+ {app}
68
+ </Text>
69
+ </InteractionSurface>
67
70
  </Box>
68
71
  </FocusRing>
69
72
  ))}
@@ -81,12 +84,13 @@ export default () => {
81
84
  position="relative"
82
85
  padding="sp-50"
83
86
  >
84
- <InteractionSurface />
85
- <WarningIcon
86
- label="icon button"
87
- primaryColor={token('color.icon.inverse')}
88
- secondaryColor={token('color.background.brand.bold')}
89
- />
87
+ <InteractionSurface>
88
+ <WarningIcon
89
+ label="icon button"
90
+ primaryColor={token('color.icon.inverse')}
91
+ secondaryColor={token('color.background.brand.bold')}
92
+ />
93
+ </InteractionSurface>
90
94
  </Box>
91
95
  </FocusRing>
92
96
  <FocusRing>
@@ -98,9 +102,9 @@ export default () => {
98
102
  position="relative"
99
103
  padding="sp-50"
100
104
  >
101
- <InteractionSurface />
102
-
103
- <WarningIcon label="icon button" />
105
+ <InteractionSurface>
106
+ <WarningIcon label="icon button" />
107
+ </InteractionSurface>
104
108
  </Box>
105
109
  </FocusRing>
106
110
  <FocusRing>
@@ -112,12 +116,13 @@ export default () => {
112
116
  position="relative"
113
117
  padding="sp-50"
114
118
  >
115
- <InteractionSurface />
116
- <WarningIcon
117
- label="icon button"
118
- primaryColor={token('color.icon.warning.inverse')}
119
- secondaryColor={token('color.background.warning.bold')}
120
- />
119
+ <InteractionSurface>
120
+ <WarningIcon
121
+ label="icon button"
122
+ primaryColor={token('color.icon.warning.inverse')}
123
+ secondaryColor={token('color.background.warning.bold')}
124
+ />
125
+ </InteractionSurface>
121
126
  </Box>
122
127
  </FocusRing>
123
128
  </Inline>
@@ -136,7 +141,9 @@ export default () => {
136
141
  position="relative"
137
142
  padding="sp-50"
138
143
  >
139
- <InteractionSurface />
144
+ <InteractionSurface>
145
+ <Fragment />
146
+ </InteractionSurface>
140
147
  </Box>
141
148
  </FocusRing>
142
149
  ))}
@@ -157,7 +164,7 @@ export default () => {
157
164
  >
158
165
  <input
159
166
  id="textfield"
160
- pattern="[\d+]"
167
+ pattern="\d+"
161
168
  style={{
162
169
  padding: 0,
163
170
  border: 'none',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "description": "An experimental package for exploration and validation of spacing / typography foundations.",
5
5
  "license": "Apache-2.0",
6
6
  "atlassian": {
@@ -21,6 +21,13 @@
21
21
  "module": "dist/esm/index.js",
22
22
  "module:es2019": "dist/es2019/index.js",
23
23
  "types": "dist/types/index.d.ts",
24
+ "typesVersions": {
25
+ ">=4.0 <4.5": {
26
+ "*": [
27
+ "dist/types-ts4.0/*"
28
+ ]
29
+ }
30
+ },
24
31
  "sideEffects": false,
25
32
  "atlaskit:src": "src/index.tsx",
26
33
  "af:exports": {
@@ -56,8 +63,8 @@
56
63
  "fs-extra": "^4.0.2",
57
64
  "prettier": "^2.1.1",
58
65
  "react-dom": "^16.8.0",
59
- "ts-node": "^10.0.0",
60
- "typescript": "4.3.5",
66
+ "ts-node": "^10.9.1",
67
+ "typescript": "4.5.5",
61
68
  "wait-for-expect": "^1.2.0"
62
69
  },
63
70
  "techstack": {