@atlaskit/ds-explorations 4.1.0 → 4.3.0

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 (11) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/afm-jira/tsconfig.json +2 -3
  3. package/dist/cjs/components/interaction-surface.partial.js +8 -3
  4. package/dist/es2019/components/interaction-surface.partial.js +8 -3
  5. package/dist/esm/components/interaction-surface.partial.js +8 -3
  6. package/dist/types/components/interaction-surface.partial.d.ts +6 -3
  7. package/dist/types-ts4.5/components/interaction-surface.partial.d.ts +6 -3
  8. package/examples/99-interactions.tsx +69 -80
  9. package/package.json +13 -7
  10. package/src/components/interaction-surface.partial.tsx +7 -3
  11. package/tsconfig.dev.json +0 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/ds-explorations
2
2
 
3
+ ## 4.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#127511](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127511)
8
+ [`db30e29344013`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/db30e29344013) -
9
+ Widening range of `react` and `react-dom` peer dependencies from `^16.8.0 || ^17.0.0 || ~18.2.0`
10
+ to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
11
+
12
+ This change has been done to enable usage of `react@18.3` as well as to have a consistent peer
13
+ dependency range for `react` and `react-dom` for `/platform` packages.
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
19
+ ## 4.2.0
20
+
21
+ ### Minor Changes
22
+
23
+ - [#111878](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111878)
24
+ [`223959ef57c80`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/223959ef57c80) -
25
+ Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
26
+ is implicitly set to automatic.
27
+
3
28
  ## 4.1.0
4
29
 
5
30
  ### Minor Changes
package/afm-jira/tsconfig.json CHANGED
@@ -1,11 +1,10 @@
1
1
  {
2
- "extends": "../../../../tsconfig.products.json",
2
+ "extends": "../../../../tsconfig.entry-points.jira.json",
3
3
  "compilerOptions": {
4
4
  "target": "es5",
5
5
  "outDir": "../../../../../tsDist/@atlaskit__ds-explorations/app",
6
6
  "composite": true,
7
- "rootDir": "../",
8
- "baseUrl": "../"
7
+ "rootDir": "../"
9
8
  },
10
9
  "include": [
11
10
  "../src/**/*.tsx"
package/dist/cjs/components/interaction-surface.partial.js CHANGED
@@ -7,7 +7,12 @@ exports.default = void 0;
7
7
  var _react = require("react");
8
8
  var _react2 = require("@emotion/react");
9
9
  var _surfaceProvider = require("./surface-provider");
10
- /** @jsx jsx */
10
+ /**
11
+ * @jsxRuntime classic
12
+ * @jsx jsx
13
+ */
14
+
15
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
11
16
 
12
17
  var baseStyles = (0, _react2.css)({
13
18
  position: 'absolute',
@@ -25,11 +30,11 @@ var baseStyles = (0, _react2.css)({
25
30
  * @example
26
31
  * ```js
27
32
  * // a minimal icon button
28
- * <Box as="button">
33
+ * <Pressable>
29
34
  * <InteractionSurface>
30
35
  * <WarningIcon label="icon button" />
31
36
  * </InteractionSurface>
32
- * </Box>
37
+ * </Pressable>
33
38
  * ```
34
39
  */
35
40
  var InteractionSurface = function InteractionSurface(_ref) {
package/dist/es2019/components/interaction-surface.partial.js CHANGED
@@ -1,5 +1,10 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { Fragment, useContext } from 'react';
6
+
7
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
3
8
  import { css, jsx } from '@emotion/react';
4
9
  import { SurfaceContext } from './surface-provider';
5
10
  const baseStyles = css({
@@ -18,11 +23,11 @@ const baseStyles = css({
18
23
  * @example
19
24
  * ```js
20
25
  * // a minimal icon button
21
- * <Box as="button">
26
+ * <Pressable>
22
27
  * <InteractionSurface>
23
28
  * <WarningIcon label="icon button" />
24
29
  * </InteractionSurface>
25
- * </Box>
30
+ * </Pressable>
26
31
  * ```
27
32
  */
28
33
  const InteractionSurface = ({
package/dist/esm/components/interaction-surface.partial.js CHANGED
@@ -1,5 +1,10 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { Fragment, useContext } from 'react';
6
+
7
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
3
8
  import { css, jsx } from '@emotion/react';
4
9
  import { SurfaceContext } from './surface-provider';
5
10
  var baseStyles = css({
@@ -18,11 +23,11 @@ var baseStyles = css({
18
23
  * @example
19
24
  * ```js
20
25
  * // a minimal icon button
21
- * <Box as="button">
26
+ * <Pressable>
22
27
  * <InteractionSurface>
23
28
  * <WarningIcon label="icon button" />
24
29
  * </InteractionSurface>
25
- * </Box>
30
+ * </Pressable>
26
31
  * ```
27
32
  */
28
33
  var InteractionSurface = function InteractionSurface(_ref) {
package/dist/types/components/interaction-surface.partial.d.ts CHANGED
@@ -1,4 +1,7 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { type ReactNode } from 'react';
3
6
  import { jsx } from '@emotion/react';
4
7
  import { type BasePrimitiveProps } from './types';
@@ -11,11 +14,11 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
11
14
  * @example
12
15
  * ```js
13
16
  * // a minimal icon button
14
- * <Box as="button">
17
+ * <Pressable>
15
18
  * <InteractionSurface>
16
19
  * <WarningIcon label="icon button" />
17
20
  * </InteractionSurface>
18
- * </Box>
21
+ * </Pressable>
19
22
  * ```
20
23
  */
21
24
  declare const InteractionSurface: ({ appearance, children, testId }: InteractionSurfaceProps) => jsx.JSX.Element;
package/dist/types-ts4.5/components/interaction-surface.partial.d.ts CHANGED
@@ -1,4 +1,7 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { type ReactNode } from 'react';
3
6
  import { jsx } from '@emotion/react';
4
7
  import { type BasePrimitiveProps } from './types';
@@ -11,11 +14,11 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
11
14
  * @example
12
15
  * ```js
13
16
  * // a minimal icon button
14
- * <Box as="button">
17
+ * <Pressable>
15
18
  * <InteractionSurface>
16
19
  * <WarningIcon label="icon button" />
17
20
  * </InteractionSurface>
18
- * </Box>
21
+ * </Pressable>
19
22
  * ```
20
23
  */
21
24
  declare const InteractionSurface: ({ appearance, children, testId }: InteractionSurfaceProps) => jsx.JSX.Element;
package/examples/99-interactions.tsx CHANGED
@@ -1,14 +1,17 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { Fragment } from 'react';
3
6
 
7
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
8
  import { jsx } from '@emotion/react';
5
9
 
6
10
  import Button from '@atlaskit/button/new';
7
11
  import { Code } from '@atlaskit/code';
8
- import FocusRing from '@atlaskit/focus-ring';
9
12
  import Heading from '@atlaskit/heading';
10
13
  import WarningIcon from '@atlaskit/icon/glyph/warning';
11
- import { Box, Inline, Stack, Text, xcss } from '@atlaskit/primitives';
14
+ import { Box, Inline, Pressable, Stack, Text, xcss } from '@atlaskit/primitives';
12
15
  import Textfield from '@atlaskit/textfield';
13
16
  import { token } from '@atlaskit/tokens';
14
17
 
@@ -61,74 +64,63 @@ export default () => {
61
64
  'color.background.warning.bold',
62
65
  ] as const
63
66
  ).map((app) => (
64
- <FocusRing key={app}>
65
- <Box
66
- as="button"
67
- onClick={() => console.log('hello')}
68
- xcss={focusRingBoxStyles}
69
- paddingInline="space.150"
70
- backgroundColor={app}
71
- >
72
- <InteractionSurface>
73
- <Text align="center" weight="medium">
74
- {app}
75
- </Text>
76
- </InteractionSurface>
77
- </Box>
78
- </FocusRing>
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>
79
80
  ))}
80
81
  </Inline>
81
82
  <Heading level="h400">
82
83
  Icon Buttons with <Code>InteractionSurface</Code>
83
84
  </Heading>
84
85
  <Inline space="space.200" testId="icon-buttons">
85
- <FocusRing>
86
- <Box
87
- as="button"
88
- backgroundColor="color.background.brand.bold"
89
- onClick={() => console.log('hello')}
90
- padding="space.050"
91
- xcss={focusRingBoxStyles}
92
- >
93
- <InteractionSurface>
94
- <WarningIcon
95
- label="icon button"
96
- primaryColor={token('color.icon.inverse')}
97
- secondaryColor={token('color.background.brand.bold')}
98
- />
99
- </InteractionSurface>
100
- </Box>
101
- </FocusRing>
102
- <FocusRing>
103
- <Box
104
- as="button"
105
- backgroundColor="color.background.neutral"
106
- onClick={() => console.log('hello')}
107
- xcss={focusRingBoxStyles}
108
- padding="space.050"
109
- >
110
- <InteractionSurface>
111
- <WarningIcon label="icon button" />
112
- </InteractionSurface>
113
- </Box>
114
- </FocusRing>
115
- <FocusRing>
116
- <Box
117
- as="button"
118
- backgroundColor="color.background.warning.bold"
119
- onClick={() => console.log('hello')}
120
- xcss={focusRingBoxStyles}
121
- padding="space.050"
122
- >
123
- <InteractionSurface>
124
- <WarningIcon
125
- label="icon button"
126
- primaryColor={token('color.icon.warning.inverse')}
127
- secondaryColor={token('color.background.warning.bold')}
128
- />
129
- </InteractionSurface>
130
- </Box>
131
- </FocusRing>
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>
132
124
  </Inline>
133
125
  <Heading level="h400">
134
126
  Progress Indicator with <Code>InteractionSurface</Code>
@@ -141,21 +133,18 @@ export default () => {
141
133
  'color.background.warning.bold',
142
134
  ] as const
143
135
  ).map((app) => (
144
- <FocusRing>
145
- <Box
146
- key={app}
147
- as="button"
148
- backgroundColor={app}
149
- onClick={() => console.log('hello')}
150
- xcss={focusRingBoxStyles}
151
- padding="space.050"
152
- aria-label="progress indicator"
153
- >
154
- <InteractionSurface>
155
- <Fragment />
156
- </InteractionSurface>
157
- </Box>
158
- </FocusRing>
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>
159
148
  ))}
160
149
  </Inline>
161
150
  <Heading level="h400">Textfield / input spikes</Heading>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "4.1.0",
3
+ "version": "4.3.0",
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/"
@@ -26,18 +26,18 @@
26
26
  "prepare": "yarn ak-postbuild"
27
27
  },
28
28
  "dependencies": {
29
- "@atlaskit/tokens": "^1.50.0",
29
+ "@atlaskit/tokens": "^1.58.0",
30
30
  "@babel/runtime": "^7.0.0",
31
31
  "@emotion/react": "^11.7.1"
32
32
  },
33
33
  "peerDependencies": {
34
- "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
34
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@af/formatting": "*",
38
38
  "@atlaskit/ds-lib": "*",
39
- "@atlaskit/primitives": "^7.2.0",
40
- "@atlaskit/textfield": "^6.3.0",
39
+ "@atlaskit/primitives": "^12.0.0",
40
+ "@atlaskit/textfield": "^6.5.0",
41
41
  "@atlaskit/visual-regression": "*",
42
42
  "@atlassian/codegen": "^0.1.0",
43
43
  "@testing-library/react": "^12.1.5",
@@ -55,7 +55,10 @@
55
55
  "@repo/internal": {
56
56
  "dom-events": "use-bind-event-listener",
57
57
  "design-system": "v1",
58
- "styling": ["static", "emotion"],
58
+ "styling": [
59
+ "static",
60
+ "emotion"
61
+ ],
59
62
  "ui-components": "lite-mode",
60
63
  "analytics": "analytics-next",
61
64
  "deprecation": "no-deprecated-imports"
@@ -63,7 +66,10 @@
63
66
  },
64
67
  "typesVersions": {
65
68
  ">=4.5 <4.9": {
66
- "*": ["dist/types-ts4.5/*", "dist/types-ts4.5/index.d.ts"]
69
+ "*": [
70
+ "dist/types-ts4.5/*",
71
+ "dist/types-ts4.5/index.d.ts"
72
+ ]
67
73
  }
68
74
  },
69
75
  "af:exports": {
package/src/components/interaction-surface.partial.tsx CHANGED
@@ -1,6 +1,10 @@
1
- /** @jsx jsx */
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
2
5
  import { Fragment, type ReactNode, useContext } from 'react';
3
6
 
7
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
8
  import { css, jsx } from '@emotion/react';
5
9
 
6
10
  import { token } from '@atlaskit/tokens';
@@ -30,11 +34,11 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
30
34
  * @example
31
35
  * ```js
32
36
  * // a minimal icon button
33
- * <Box as="button">
37
+ * <Pressable>
34
38
  * <InteractionSurface>
35
39
  * <WarningIcon label="icon button" />
36
40
  * </InteractionSurface>
37
- * </Box>
41
+ * </Pressable>
38
42
  * ```
39
43
  */
40
44
  const InteractionSurface = ({ appearance, children, testId }: InteractionSurfaceProps) => {
package/tsconfig.dev.json CHANGED
@@ -48,9 +48,6 @@
48
48
  {
49
49
  "path": "../../../build/website/docs/tsconfig.app.json"
50
50
  },
51
- {
52
- "path": "../focus-ring/tsconfig.app.json"
53
- },
54
51
  {
55
52
  "path": "../heading/tsconfig.app.json"
56
53
  },