@atlaskit/ds-explorations 4.1.0 → 4.2.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 (10) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/components/interaction-surface.partial.js +7 -2
  3. package/dist/es2019/components/interaction-surface.partial.js +7 -2
  4. package/dist/esm/components/interaction-surface.partial.js +7 -2
  5. package/dist/types/components/interaction-surface.partial.d.ts +5 -2
  6. package/dist/types-ts4.5/components/interaction-surface.partial.d.ts +5 -2
  7. package/examples/99-interactions.tsx +68 -79
  8. package/package.json +12 -6
  9. package/src/components/interaction-surface.partial.tsx +6 -2
  10. package/tsconfig.dev.json +0 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/ds-explorations
2
2
 
3
+ ## 4.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#111878](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111878)
8
+ [`223959ef57c80`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/223959ef57c80) -
9
+ Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
10
+ is implicitly set to automatic.
11
+
3
12
  ## 4.1.0
4
13
 
5
14
  ### Minor Changes
package/dist/cjs/components/interaction-surface.partial.js CHANGED
@@ -7,8 +7,13 @@ 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
+ /**
11
+ * @jsxRuntime classic
12
+ */
10
13
  /** @jsx jsx */
11
14
 
15
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
16
+
12
17
  var baseStyles = (0, _react2.css)({
13
18
  position: 'absolute',
14
19
  inset: 0,
@@ -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
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
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
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
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,3 +1,6 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
5
  import { type ReactNode } from 'react';
3
6
  import { jsx } from '@emotion/react';
@@ -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,3 +1,6 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
5
  import { type ReactNode } from 'react';
3
6
  import { jsx } from '@emotion/react';
@@ -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
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
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.2.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,7 +26,7 @@
26
26
  "prepare": "yarn ak-postbuild"
27
27
  },
28
28
  "dependencies": {
29
- "@atlaskit/tokens": "^1.50.0",
29
+ "@atlaskit/tokens": "^1.51.0",
30
30
  "@babel/runtime": "^7.0.0",
31
31
  "@emotion/react": "^11.7.1"
32
32
  },
@@ -36,8 +36,8 @@
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": "^7.4.0",
40
+ "@atlaskit/textfield": "^6.4.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
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
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
  },