@atlaskit/ds-explorations 5.0.2 → 5.0.4
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.
- package/CHANGELOG.md +13 -0
- package/dist/types/components/surface-provider.d.ts +0 -1
- package/dist/types/internal/role-to-element.d.ts +0 -1
- package/dist/types-ts4.5/components/surface-provider.d.ts +0 -1
- package/dist/types-ts4.5/internal/role-to-element.d.ts +0 -1
- package/package.json +6 -8
- package/afm-cc/tsconfig.json +0 -23
- package/afm-jira/tsconfig.json +0 -23
- package/build/tsconfig.json +0 -16
- package/docs/01-basic.tsx +0 -18
- package/examples/99-interactions.tsx +0 -185
- package/examples/config.jsonc +0 -13
- package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +0 -576
- package/scripts/__tests__/codegen.test.tsx +0 -23
- package/src/components/__tests__/unit/interaction-suface.test.tsx +0 -71
- package/src/components/interaction-surface.partial.tsx +0 -467
- package/src/components/surface-provider.tsx +0 -21
- package/src/components/types.tsx +0 -15
- package/src/constants.tsx +0 -13
- package/src/index.tsx +0 -1
- package/src/internal/color-map.tsx +0 -38
- package/src/internal/role-to-element.tsx +0 -34
- package/tsconfig.app.json +0 -45
- package/tsconfig.dev.json +0 -69
- package/tsconfig.json +0 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/ds-explorations
|
|
2
2
|
|
|
3
|
+
## 5.0.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`098cfbb01dc36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/098cfbb01dc36) -
|
|
8
|
+
Add missing npmignore files to remove unnecessary files from published package
|
|
9
|
+
|
|
10
|
+
## 5.0.3
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 5.0.2
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/ds-explorations",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.4",
|
|
4
4
|
"description": "DEPRECATED. Use @atlaskit/primitives. An experimental package for exploration and validation of spacing / typography foundations.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
],
|
|
18
18
|
"atlaskit:src": "src/index.tsx",
|
|
19
19
|
"atlassian": {
|
|
20
|
-
"team": "Design System Team"
|
|
21
|
-
"runReact18": true
|
|
20
|
+
"team": "Design System Team"
|
|
22
21
|
},
|
|
23
22
|
"scripts": {
|
|
24
23
|
"ak-postbuild": "cd ../../../ && yarn build --includeDependencies @atlaskit/tokens && cd packages/design-system/ds-explorations && yarn codegen-styles",
|
|
@@ -26,7 +25,7 @@
|
|
|
26
25
|
"prepare": "yarn ak-postbuild"
|
|
27
26
|
},
|
|
28
27
|
"dependencies": {
|
|
29
|
-
"@atlaskit/tokens": "^
|
|
28
|
+
"@atlaskit/tokens": "^6.0.0",
|
|
30
29
|
"@babel/runtime": "^7.0.0",
|
|
31
30
|
"@emotion/react": "^11.7.1"
|
|
32
31
|
},
|
|
@@ -35,16 +34,15 @@
|
|
|
35
34
|
},
|
|
36
35
|
"devDependencies": {
|
|
37
36
|
"@af/formatting": "workspace:^",
|
|
38
|
-
"@atlaskit/ds-lib": "^
|
|
39
|
-
"@atlaskit/primitives": "^14.
|
|
37
|
+
"@atlaskit/ds-lib": "^5.0.0",
|
|
38
|
+
"@atlaskit/primitives": "^14.11.0",
|
|
40
39
|
"@atlaskit/textfield": "^8.0.0",
|
|
41
40
|
"@atlaskit/visual-regression": "workspace:^",
|
|
42
41
|
"@atlassian/codegen": "^0.1.0",
|
|
43
42
|
"@testing-library/react": "^13.4.0",
|
|
44
43
|
"fs-extra": "^4.0.2",
|
|
45
44
|
"react-dom": "^18.2.0",
|
|
46
|
-
"ts-node": "^10.9.1"
|
|
47
|
-
"typescript": "~5.4.2"
|
|
45
|
+
"ts-node": "^10.9.1"
|
|
48
46
|
},
|
|
49
47
|
"techstack": {
|
|
50
48
|
"@atlassian/frontend": {
|
package/afm-cc/tsconfig.json
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../../../../tsconfig.entry-points.confluence.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"target": "es5",
|
|
5
|
-
"composite": true,
|
|
6
|
-
"outDir": "../dist",
|
|
7
|
-
"rootDir": "../"
|
|
8
|
-
},
|
|
9
|
-
"include": [
|
|
10
|
-
"../src/**/*.tsx"
|
|
11
|
-
],
|
|
12
|
-
"exclude": [
|
|
13
|
-
"../src/**/__tests__/*",
|
|
14
|
-
"../src/**/*.test.*",
|
|
15
|
-
"../src/**/test.*",
|
|
16
|
-
"../src/**/examples.*"
|
|
17
|
-
],
|
|
18
|
-
"references": [
|
|
19
|
-
{
|
|
20
|
-
"path": "../../tokens/afm-cc/tsconfig.json"
|
|
21
|
-
}
|
|
22
|
-
]
|
|
23
|
-
}
|
package/afm-jira/tsconfig.json
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../../../../tsconfig.entry-points.jira.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"target": "es5",
|
|
5
|
-
"outDir": "../../../../../tsDist/@atlaskit__ds-explorations/app",
|
|
6
|
-
"rootDir": "../",
|
|
7
|
-
"composite": true
|
|
8
|
-
},
|
|
9
|
-
"include": [
|
|
10
|
-
"../src/**/*.tsx"
|
|
11
|
-
],
|
|
12
|
-
"exclude": [
|
|
13
|
-
"../src/**/__tests__/*",
|
|
14
|
-
"../src/**/*.test.*",
|
|
15
|
-
"../src/**/test.*",
|
|
16
|
-
"../src/**/examples.*"
|
|
17
|
-
],
|
|
18
|
-
"references": [
|
|
19
|
-
{
|
|
20
|
-
"path": "../../tokens/afm-jira/tsconfig.json"
|
|
21
|
-
}
|
|
22
|
-
]
|
|
23
|
-
}
|
package/build/tsconfig.json
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../tsconfig",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"target": "es5",
|
|
5
|
-
"paths": {}
|
|
6
|
-
},
|
|
7
|
-
"include": [
|
|
8
|
-
"../src/**/*.tsx"
|
|
9
|
-
],
|
|
10
|
-
"exclude": [
|
|
11
|
-
"../src/**/__tests__/*",
|
|
12
|
-
"../src/**/*.test.*",
|
|
13
|
-
"../src/**/test.*",
|
|
14
|
-
"../src/**/examples.*"
|
|
15
|
-
]
|
|
16
|
-
}
|
package/docs/01-basic.tsx
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import { AtlassianInternalWarning, DevPreviewWarning, md } from '@atlaskit/docs';
|
|
4
|
-
import { token } from '@atlaskit/tokens';
|
|
5
|
-
|
|
6
|
-
export default md`
|
|
7
|
-
${(
|
|
8
|
-
<>
|
|
9
|
-
{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
|
|
10
|
-
<div style={{ marginBottom: token('space.100', '8px') }}>
|
|
11
|
-
<AtlassianInternalWarning />
|
|
12
|
-
</div>
|
|
13
|
-
{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
|
|
14
|
-
<div style={{ marginTop: token('space.100', '8px') }}>
|
|
15
|
-
<DevPreviewWarning />
|
|
16
|
-
</div>
|
|
17
|
-
</>
|
|
18
|
-
)}`;
|
|
@@ -1,185 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { Fragment } from 'react';
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { jsx } from '@emotion/react';
|
|
9
|
-
|
|
10
|
-
import Button from '@atlaskit/button/new';
|
|
11
|
-
import { Code } from '@atlaskit/code';
|
|
12
|
-
import Heading from '@atlaskit/heading';
|
|
13
|
-
import WarningIcon from '@atlaskit/icon/glyph/warning';
|
|
14
|
-
import { Box, Inline, Pressable, Stack, Text, xcss } from '@atlaskit/primitives';
|
|
15
|
-
import Textfield from '@atlaskit/textfield';
|
|
16
|
-
import { token } from '@atlaskit/tokens';
|
|
17
|
-
|
|
18
|
-
import { UNSAFE_InteractionSurface as InteractionSurface } from '../src';
|
|
19
|
-
|
|
20
|
-
const fieldsetStyles = xcss({
|
|
21
|
-
flex: '1 1 100%',
|
|
22
|
-
borderStyle: 'solid',
|
|
23
|
-
borderWidth: 'border.width',
|
|
24
|
-
borderColor: 'color.border',
|
|
25
|
-
':hover': {
|
|
26
|
-
backgroundColor: 'color.background.input.hovered',
|
|
27
|
-
},
|
|
28
|
-
':invalid': {
|
|
29
|
-
borderColor: 'color.border.danger',
|
|
30
|
-
},
|
|
31
|
-
':focus': {
|
|
32
|
-
backgroundColor: 'color.background.input',
|
|
33
|
-
borderColor: 'color.border.focused',
|
|
34
|
-
},
|
|
35
|
-
':focus-within': {
|
|
36
|
-
backgroundColor: 'color.background.input',
|
|
37
|
-
borderColor: 'color.border.focused',
|
|
38
|
-
},
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
const focusRingBoxStyles = xcss({
|
|
42
|
-
borderRadius: 'border.radius',
|
|
43
|
-
position: 'relative',
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
export default () => {
|
|
47
|
-
return (
|
|
48
|
-
<Box padding="space.100" testId="all">
|
|
49
|
-
<Stack space="space.200">
|
|
50
|
-
<Heading size="xsmall">Current ADS Buttons</Heading>
|
|
51
|
-
<Inline space="space.200">
|
|
52
|
-
<Button appearance="primary">brand.bold</Button>
|
|
53
|
-
<Button appearance="default">neutral</Button>
|
|
54
|
-
<Button appearance="warning">warning.bold</Button>
|
|
55
|
-
</Inline>
|
|
56
|
-
<Heading size="xsmall">
|
|
57
|
-
Buttons with <Code>InteractionSurface</Code>
|
|
58
|
-
</Heading>
|
|
59
|
-
<Inline space="space.200" testId="buttons">
|
|
60
|
-
{(
|
|
61
|
-
[
|
|
62
|
-
'color.background.brand.bold',
|
|
63
|
-
'color.background.neutral',
|
|
64
|
-
'color.background.warning.bold',
|
|
65
|
-
] as const
|
|
66
|
-
).map((app) => (
|
|
67
|
-
<Pressable
|
|
68
|
-
key={app}
|
|
69
|
-
onClick={() => console.log('hello')}
|
|
70
|
-
xcss={focusRingBoxStyles}
|
|
71
|
-
paddingInline="space.150"
|
|
72
|
-
backgroundColor={app}
|
|
73
|
-
>
|
|
74
|
-
<InteractionSurface>
|
|
75
|
-
<Text align="center" weight="medium">
|
|
76
|
-
{app}
|
|
77
|
-
</Text>
|
|
78
|
-
</InteractionSurface>
|
|
79
|
-
</Pressable>
|
|
80
|
-
))}
|
|
81
|
-
</Inline>
|
|
82
|
-
<Heading size="xsmall">
|
|
83
|
-
Icon Buttons with <Code>InteractionSurface</Code>
|
|
84
|
-
</Heading>
|
|
85
|
-
<Inline space="space.200" testId="icon-buttons">
|
|
86
|
-
<Pressable
|
|
87
|
-
backgroundColor="color.background.brand.bold"
|
|
88
|
-
onClick={() => console.log('hello')}
|
|
89
|
-
padding="space.050"
|
|
90
|
-
xcss={focusRingBoxStyles}
|
|
91
|
-
>
|
|
92
|
-
<InteractionSurface>
|
|
93
|
-
<WarningIcon
|
|
94
|
-
label="icon button"
|
|
95
|
-
primaryColor={token('color.icon.inverse')}
|
|
96
|
-
secondaryColor={token('color.background.brand.bold')}
|
|
97
|
-
/>
|
|
98
|
-
</InteractionSurface>
|
|
99
|
-
</Pressable>
|
|
100
|
-
<Pressable
|
|
101
|
-
backgroundColor="color.background.neutral"
|
|
102
|
-
onClick={() => console.log('hello')}
|
|
103
|
-
xcss={focusRingBoxStyles}
|
|
104
|
-
padding="space.050"
|
|
105
|
-
>
|
|
106
|
-
<InteractionSurface>
|
|
107
|
-
<WarningIcon label="icon button" />
|
|
108
|
-
</InteractionSurface>
|
|
109
|
-
</Pressable>
|
|
110
|
-
<Pressable
|
|
111
|
-
backgroundColor="color.background.warning.bold"
|
|
112
|
-
onClick={() => console.log('hello')}
|
|
113
|
-
xcss={focusRingBoxStyles}
|
|
114
|
-
padding="space.050"
|
|
115
|
-
>
|
|
116
|
-
<InteractionSurface>
|
|
117
|
-
<WarningIcon
|
|
118
|
-
label="icon button"
|
|
119
|
-
primaryColor={token('color.icon.warning.inverse')}
|
|
120
|
-
secondaryColor={token('color.background.warning.bold')}
|
|
121
|
-
/>
|
|
122
|
-
</InteractionSurface>
|
|
123
|
-
</Pressable>
|
|
124
|
-
</Inline>
|
|
125
|
-
<Heading size="xsmall">
|
|
126
|
-
Progress Indicator with <Code>InteractionSurface</Code>
|
|
127
|
-
</Heading>
|
|
128
|
-
<Inline space="space.200" testId="progress-indicators">
|
|
129
|
-
{(
|
|
130
|
-
[
|
|
131
|
-
'color.background.brand.bold',
|
|
132
|
-
'color.background.neutral',
|
|
133
|
-
'color.background.warning.bold',
|
|
134
|
-
] as const
|
|
135
|
-
).map((app) => (
|
|
136
|
-
<Pressable
|
|
137
|
-
key={app}
|
|
138
|
-
backgroundColor={app}
|
|
139
|
-
onClick={() => console.log('hello')}
|
|
140
|
-
xcss={focusRingBoxStyles}
|
|
141
|
-
padding="space.050"
|
|
142
|
-
aria-label="progress indicator"
|
|
143
|
-
>
|
|
144
|
-
<InteractionSurface>
|
|
145
|
-
<Fragment />
|
|
146
|
-
</InteractionSurface>
|
|
147
|
-
</Pressable>
|
|
148
|
-
))}
|
|
149
|
-
</Inline>
|
|
150
|
-
<Heading size="xsmall">Textfield / input spikes</Heading>
|
|
151
|
-
<Stack space="space.200">
|
|
152
|
-
<label htmlFor="textfield">Textfield</label>
|
|
153
|
-
<Textfield id="textfield" />
|
|
154
|
-
<label htmlFor="input">Input</label>
|
|
155
|
-
<Box
|
|
156
|
-
as="fieldset"
|
|
157
|
-
padding="space.100"
|
|
158
|
-
tabIndex={-1}
|
|
159
|
-
backgroundColor="color.background.input"
|
|
160
|
-
xcss={fieldsetStyles}
|
|
161
|
-
>
|
|
162
|
-
<input
|
|
163
|
-
id="input"
|
|
164
|
-
pattern="\d+"
|
|
165
|
-
style={{
|
|
166
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
167
|
-
padding: 0,
|
|
168
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
169
|
-
border: 'none',
|
|
170
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
171
|
-
fontSize: 14,
|
|
172
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
173
|
-
background: 'transparent',
|
|
174
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
175
|
-
appearance: 'none',
|
|
176
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
177
|
-
outline: 'none',
|
|
178
|
-
}}
|
|
179
|
-
/>
|
|
180
|
-
</Box>
|
|
181
|
-
</Stack>
|
|
182
|
-
</Stack>
|
|
183
|
-
</Box>
|
|
184
|
-
);
|
|
185
|
-
};
|
package/examples/config.jsonc
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This file is used by the test scaling project to optimise test result caching
|
|
3
|
-
* Examples that are used by tests affect the outcome of tests so must be included when hashing
|
|
4
|
-
* They are defined here so the hashing algorithm doesn't need to search test files for example usage each time
|
|
5
|
-
*/
|
|
6
|
-
{
|
|
7
|
-
"testExamples": [
|
|
8
|
-
"02-text.tsx"
|
|
9
|
-
],
|
|
10
|
-
"exampleDependencies": [
|
|
11
|
-
"@atlaskit/ds-lib"
|
|
12
|
-
]
|
|
13
|
-
}
|