@atlaskit/ds-explorations 5.0.6 → 5.0.7

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 (8) hide show
  1. package/CHANGELOG.md +6 -1
  2. package/dist/cjs/components/interaction-surface.partial.js +1 -1
  3. package/dist/es2019/components/interaction-surface.partial.js +2 -1
  4. package/dist/esm/components/interaction-surface.partial.js +2 -1
  5. package/dist/types/components/interaction-surface.partial.d.ts +9 -66
  6. package/dist/types-ts4.5/components/interaction-surface.partial.d.ts +9 -66
  7. package/package.json +3 -3
  8. package/scripts/interaction-codegen.tsx +16 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/ds-explorations
2
2
 
3
+ ## 5.0.7
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
3
9
  ## 5.0.6
4
10
 
5
11
  ### Patch Changes
@@ -838,7 +844,6 @@ tokens.
838
844
  package in downstream dependencies is correctly resolved.
839
845
 
840
846
  This update also includes changes to the way the `Text` component behaves with `Box`:
841
-
842
847
  - Text will now remove redundant DOM elements if it detects that it is already in the context of a
843
848
  `Text` element. This will only occur if the Text element that is a candidate for removal does
844
849
  not apply any custom property.
package/dist/cjs/components/interaction-surface.partial.js CHANGED
@@ -58,7 +58,7 @@ var InteractionSurface = function InteractionSurface(_ref) {
58
58
  var _default = exports.default = InteractionSurface;
59
59
  /**
60
60
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
61
- * @codegen <<SignedSource::453eef65c0cbbdc7c9d2b70817a1c852>>
61
+ * @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
62
62
  * @codegenId interactions
63
63
  * @codegenCommand yarn codegen-styles
64
64
  * @codegenParams ["background"]
package/dist/es2019/components/interaction-surface.partial.js CHANGED
@@ -53,12 +53,13 @@ export default InteractionSurface;
53
53
 
54
54
  /**
55
55
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
56
- * @codegen <<SignedSource::453eef65c0cbbdc7c9d2b70817a1c852>>
56
+ * @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
57
57
  * @codegenId interactions
58
58
  * @codegenCommand yarn codegen-styles
59
59
  * @codegenParams ["background"]
60
60
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
61
61
  */
62
+
62
63
  const backgroundActiveColorMap = {
63
64
  'accent.lime.subtlest': css({
64
65
  '&:active': {
package/dist/esm/components/interaction-surface.partial.js CHANGED
@@ -52,12 +52,13 @@ export default InteractionSurface;
52
52
 
53
53
  /**
54
54
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
55
- * @codegen <<SignedSource::453eef65c0cbbdc7c9d2b70817a1c852>>
55
+ * @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
56
56
  * @codegenId interactions
57
57
  * @codegenCommand yarn codegen-styles
58
58
  * @codegenParams ["background"]
59
59
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
60
60
  */
61
+
61
62
  var backgroundActiveColorMap = {
62
63
  'accent.lime.subtlest': css({
63
64
  '&:active': {
package/dist/types/components/interaction-surface.partial.d.ts CHANGED
@@ -23,72 +23,15 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
23
23
  */
24
24
  declare const InteractionSurface: ({ appearance, children, testId }: InteractionSurfaceProps) => jsx.JSX.Element;
25
25
  export default InteractionSurface;
26
- declare const backgroundHoverColorMap: {
27
- 'accent.lime.subtlest': import("@emotion/react").SerializedStyles;
28
- 'accent.lime.subtler': import("@emotion/react").SerializedStyles;
29
- 'accent.lime.subtle': import("@emotion/react").SerializedStyles;
30
- 'accent.lime.bolder': import("@emotion/react").SerializedStyles;
31
- 'accent.red.subtlest': import("@emotion/react").SerializedStyles;
32
- 'accent.red.subtler': import("@emotion/react").SerializedStyles;
33
- 'accent.red.subtle': import("@emotion/react").SerializedStyles;
34
- 'accent.red.bolder': import("@emotion/react").SerializedStyles;
35
- 'accent.orange.subtlest': import("@emotion/react").SerializedStyles;
36
- 'accent.orange.subtler': import("@emotion/react").SerializedStyles;
37
- 'accent.orange.subtle': import("@emotion/react").SerializedStyles;
38
- 'accent.orange.bolder': import("@emotion/react").SerializedStyles;
39
- 'accent.yellow.subtlest': import("@emotion/react").SerializedStyles;
40
- 'accent.yellow.subtler': import("@emotion/react").SerializedStyles;
41
- 'accent.yellow.subtle': import("@emotion/react").SerializedStyles;
42
- 'accent.yellow.bolder': import("@emotion/react").SerializedStyles;
43
- 'accent.green.subtlest': import("@emotion/react").SerializedStyles;
44
- 'accent.green.subtler': import("@emotion/react").SerializedStyles;
45
- 'accent.green.subtle': import("@emotion/react").SerializedStyles;
46
- 'accent.green.bolder': import("@emotion/react").SerializedStyles;
47
- 'accent.teal.subtlest': import("@emotion/react").SerializedStyles;
48
- 'accent.teal.subtler': import("@emotion/react").SerializedStyles;
49
- 'accent.teal.subtle': import("@emotion/react").SerializedStyles;
50
- 'accent.teal.bolder': import("@emotion/react").SerializedStyles;
51
- 'accent.blue.subtlest': import("@emotion/react").SerializedStyles;
52
- 'accent.blue.subtler': import("@emotion/react").SerializedStyles;
53
- 'accent.blue.subtle': import("@emotion/react").SerializedStyles;
54
- 'accent.blue.bolder': import("@emotion/react").SerializedStyles;
55
- 'accent.purple.subtlest': import("@emotion/react").SerializedStyles;
56
- 'accent.purple.subtler': import("@emotion/react").SerializedStyles;
57
- 'accent.purple.subtle': import("@emotion/react").SerializedStyles;
58
- 'accent.purple.bolder': import("@emotion/react").SerializedStyles;
59
- 'accent.magenta.subtlest': import("@emotion/react").SerializedStyles;
60
- 'accent.magenta.subtler': import("@emotion/react").SerializedStyles;
61
- 'accent.magenta.subtle': import("@emotion/react").SerializedStyles;
62
- 'accent.magenta.bolder': import("@emotion/react").SerializedStyles;
63
- 'accent.gray.subtlest': import("@emotion/react").SerializedStyles;
64
- 'accent.gray.subtler': import("@emotion/react").SerializedStyles;
65
- 'accent.gray.subtle': import("@emotion/react").SerializedStyles;
66
- 'accent.gray.bolder': import("@emotion/react").SerializedStyles;
67
- input: import("@emotion/react").SerializedStyles;
68
- 'inverse.subtle': import("@emotion/react").SerializedStyles;
69
- neutral: import("@emotion/react").SerializedStyles;
70
- 'neutral.subtle': import("@emotion/react").SerializedStyles;
71
- 'neutral.bold': import("@emotion/react").SerializedStyles;
72
- selected: import("@emotion/react").SerializedStyles;
73
- 'selected.bold': import("@emotion/react").SerializedStyles;
74
- 'brand.subtlest': import("@emotion/react").SerializedStyles;
75
- 'brand.bold': import("@emotion/react").SerializedStyles;
76
- 'brand.boldest': import("@emotion/react").SerializedStyles;
77
- danger: import("@emotion/react").SerializedStyles;
78
- 'danger.bold': import("@emotion/react").SerializedStyles;
79
- warning: import("@emotion/react").SerializedStyles;
80
- 'warning.bold': import("@emotion/react").SerializedStyles;
81
- success: import("@emotion/react").SerializedStyles;
82
- 'success.bold': import("@emotion/react").SerializedStyles;
83
- discovery: import("@emotion/react").SerializedStyles;
84
- 'discovery.bold': import("@emotion/react").SerializedStyles;
85
- information: import("@emotion/react").SerializedStyles;
86
- 'information.bold': import("@emotion/react").SerializedStyles;
87
- 'elevation.surface': import("@emotion/react").SerializedStyles;
88
- 'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
89
- 'elevation.surface.raised': import("@emotion/react").SerializedStyles;
90
- };
91
- type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
26
+ /**
27
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
28
+ * @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
29
+ * @codegenId interactions
30
+ * @codegenCommand yarn codegen-styles
31
+ * @codegenParams ["background"]
32
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
33
+ */
34
+ type InteractionBackgroundColor = 'accent.lime.subtlest' | 'accent.lime.subtler' | 'accent.lime.subtle' | 'accent.lime.bolder' | 'accent.red.subtlest' | 'accent.red.subtler' | 'accent.red.subtle' | 'accent.red.bolder' | 'accent.orange.subtlest' | 'accent.orange.subtler' | 'accent.orange.subtle' | 'accent.orange.bolder' | 'accent.yellow.subtlest' | 'accent.yellow.subtler' | 'accent.yellow.subtle' | 'accent.yellow.bolder' | 'accent.green.subtlest' | 'accent.green.subtler' | 'accent.green.subtle' | 'accent.green.bolder' | 'accent.teal.subtlest' | 'accent.teal.subtler' | 'accent.teal.subtle' | 'accent.teal.bolder' | 'accent.blue.subtlest' | 'accent.blue.subtler' | 'accent.blue.subtle' | 'accent.blue.bolder' | 'accent.purple.subtlest' | 'accent.purple.subtler' | 'accent.purple.subtle' | 'accent.purple.bolder' | 'accent.magenta.subtlest' | 'accent.magenta.subtler' | 'accent.magenta.subtle' | 'accent.magenta.bolder' | 'accent.gray.subtlest' | 'accent.gray.subtler' | 'accent.gray.subtle' | 'accent.gray.bolder' | 'input' | 'inverse.subtle' | 'neutral' | 'neutral.subtle' | 'neutral.bold' | 'selected' | 'selected.bold' | 'brand.subtlest' | 'brand.bold' | 'brand.boldest' | 'danger' | 'danger.bold' | 'warning' | 'warning.bold' | 'success' | 'success.bold' | 'discovery' | 'discovery.bold' | 'information' | 'information.bold' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised';
92
35
  /**
93
36
  * @codegenEnd
94
37
  */
package/dist/types-ts4.5/components/interaction-surface.partial.d.ts CHANGED
@@ -23,72 +23,15 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
23
23
  */
24
24
  declare const InteractionSurface: ({ appearance, children, testId }: InteractionSurfaceProps) => jsx.JSX.Element;
25
25
  export default InteractionSurface;
26
- declare const backgroundHoverColorMap: {
27
- 'accent.lime.subtlest': import("@emotion/react").SerializedStyles;
28
- 'accent.lime.subtler': import("@emotion/react").SerializedStyles;
29
- 'accent.lime.subtle': import("@emotion/react").SerializedStyles;
30
- 'accent.lime.bolder': import("@emotion/react").SerializedStyles;
31
- 'accent.red.subtlest': import("@emotion/react").SerializedStyles;
32
- 'accent.red.subtler': import("@emotion/react").SerializedStyles;
33
- 'accent.red.subtle': import("@emotion/react").SerializedStyles;
34
- 'accent.red.bolder': import("@emotion/react").SerializedStyles;
35
- 'accent.orange.subtlest': import("@emotion/react").SerializedStyles;
36
- 'accent.orange.subtler': import("@emotion/react").SerializedStyles;
37
- 'accent.orange.subtle': import("@emotion/react").SerializedStyles;
38
- 'accent.orange.bolder': import("@emotion/react").SerializedStyles;
39
- 'accent.yellow.subtlest': import("@emotion/react").SerializedStyles;
40
- 'accent.yellow.subtler': import("@emotion/react").SerializedStyles;
41
- 'accent.yellow.subtle': import("@emotion/react").SerializedStyles;
42
- 'accent.yellow.bolder': import("@emotion/react").SerializedStyles;
43
- 'accent.green.subtlest': import("@emotion/react").SerializedStyles;
44
- 'accent.green.subtler': import("@emotion/react").SerializedStyles;
45
- 'accent.green.subtle': import("@emotion/react").SerializedStyles;
46
- 'accent.green.bolder': import("@emotion/react").SerializedStyles;
47
- 'accent.teal.subtlest': import("@emotion/react").SerializedStyles;
48
- 'accent.teal.subtler': import("@emotion/react").SerializedStyles;
49
- 'accent.teal.subtle': import("@emotion/react").SerializedStyles;
50
- 'accent.teal.bolder': import("@emotion/react").SerializedStyles;
51
- 'accent.blue.subtlest': import("@emotion/react").SerializedStyles;
52
- 'accent.blue.subtler': import("@emotion/react").SerializedStyles;
53
- 'accent.blue.subtle': import("@emotion/react").SerializedStyles;
54
- 'accent.blue.bolder': import("@emotion/react").SerializedStyles;
55
- 'accent.purple.subtlest': import("@emotion/react").SerializedStyles;
56
- 'accent.purple.subtler': import("@emotion/react").SerializedStyles;
57
- 'accent.purple.subtle': import("@emotion/react").SerializedStyles;
58
- 'accent.purple.bolder': import("@emotion/react").SerializedStyles;
59
- 'accent.magenta.subtlest': import("@emotion/react").SerializedStyles;
60
- 'accent.magenta.subtler': import("@emotion/react").SerializedStyles;
61
- 'accent.magenta.subtle': import("@emotion/react").SerializedStyles;
62
- 'accent.magenta.bolder': import("@emotion/react").SerializedStyles;
63
- 'accent.gray.subtlest': import("@emotion/react").SerializedStyles;
64
- 'accent.gray.subtler': import("@emotion/react").SerializedStyles;
65
- 'accent.gray.subtle': import("@emotion/react").SerializedStyles;
66
- 'accent.gray.bolder': import("@emotion/react").SerializedStyles;
67
- input: import("@emotion/react").SerializedStyles;
68
- 'inverse.subtle': import("@emotion/react").SerializedStyles;
69
- neutral: import("@emotion/react").SerializedStyles;
70
- 'neutral.subtle': import("@emotion/react").SerializedStyles;
71
- 'neutral.bold': import("@emotion/react").SerializedStyles;
72
- selected: import("@emotion/react").SerializedStyles;
73
- 'selected.bold': import("@emotion/react").SerializedStyles;
74
- 'brand.subtlest': import("@emotion/react").SerializedStyles;
75
- 'brand.bold': import("@emotion/react").SerializedStyles;
76
- 'brand.boldest': import("@emotion/react").SerializedStyles;
77
- danger: import("@emotion/react").SerializedStyles;
78
- 'danger.bold': import("@emotion/react").SerializedStyles;
79
- warning: import("@emotion/react").SerializedStyles;
80
- 'warning.bold': import("@emotion/react").SerializedStyles;
81
- success: import("@emotion/react").SerializedStyles;
82
- 'success.bold': import("@emotion/react").SerializedStyles;
83
- discovery: import("@emotion/react").SerializedStyles;
84
- 'discovery.bold': import("@emotion/react").SerializedStyles;
85
- information: import("@emotion/react").SerializedStyles;
86
- 'information.bold': import("@emotion/react").SerializedStyles;
87
- 'elevation.surface': import("@emotion/react").SerializedStyles;
88
- 'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
89
- 'elevation.surface.raised': import("@emotion/react").SerializedStyles;
90
- };
91
- type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
26
+ /**
27
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
28
+ * @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
29
+ * @codegenId interactions
30
+ * @codegenCommand yarn codegen-styles
31
+ * @codegenParams ["background"]
32
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
33
+ */
34
+ type InteractionBackgroundColor = 'accent.lime.subtlest' | 'accent.lime.subtler' | 'accent.lime.subtle' | 'accent.lime.bolder' | 'accent.red.subtlest' | 'accent.red.subtler' | 'accent.red.subtle' | 'accent.red.bolder' | 'accent.orange.subtlest' | 'accent.orange.subtler' | 'accent.orange.subtle' | 'accent.orange.bolder' | 'accent.yellow.subtlest' | 'accent.yellow.subtler' | 'accent.yellow.subtle' | 'accent.yellow.bolder' | 'accent.green.subtlest' | 'accent.green.subtler' | 'accent.green.subtle' | 'accent.green.bolder' | 'accent.teal.subtlest' | 'accent.teal.subtler' | 'accent.teal.subtle' | 'accent.teal.bolder' | 'accent.blue.subtlest' | 'accent.blue.subtler' | 'accent.blue.subtle' | 'accent.blue.bolder' | 'accent.purple.subtlest' | 'accent.purple.subtler' | 'accent.purple.subtle' | 'accent.purple.bolder' | 'accent.magenta.subtlest' | 'accent.magenta.subtler' | 'accent.magenta.subtle' | 'accent.magenta.bolder' | 'accent.gray.subtlest' | 'accent.gray.subtler' | 'accent.gray.subtle' | 'accent.gray.bolder' | 'input' | 'inverse.subtle' | 'neutral' | 'neutral.subtle' | 'neutral.bold' | 'selected' | 'selected.bold' | 'brand.subtlest' | 'brand.bold' | 'brand.boldest' | 'danger' | 'danger.bold' | 'warning' | 'warning.bold' | 'success' | 'success.bold' | 'discovery' | 'discovery.bold' | 'information' | 'information.bold' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised';
92
35
  /**
93
36
  * @codegenEnd
94
37
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "5.0.6",
3
+ "version": "5.0.7",
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/"
@@ -25,7 +25,7 @@
25
25
  "prepare": "yarn ak-postbuild"
26
26
  },
27
27
  "dependencies": {
28
- "@atlaskit/tokens": "^6.3.0",
28
+ "@atlaskit/tokens": "^7.0.0",
29
29
  "@babel/runtime": "^7.0.0",
30
30
  "@emotion/react": "^11.7.1"
31
31
  },
@@ -35,7 +35,7 @@
35
35
  "devDependencies": {
36
36
  "@af/formatting": "workspace:^",
37
37
  "@atlaskit/ds-lib": "^5.1.0",
38
- "@atlaskit/primitives": "^14.15.0",
38
+ "@atlaskit/primitives": "^15.0.0",
39
39
  "@atlaskit/textfield": "^8.0.0",
40
40
  "@atlassian/codegen": "^0.1.0",
41
41
  "@testing-library/react": "^13.4.0",
package/scripts/interaction-codegen.tsx CHANGED
@@ -50,10 +50,20 @@ export const createInteractionStylesFromTemplate = (colorProperty: keyof typeof
50
50
 
51
51
  const { prefix, cssProperty, filterFn } = colors[colorProperty];
52
52
 
53
- return (
54
- format(
55
- `
56
- const ${colorProperty}ActiveColorMap = {
53
+ return format(
54
+ `
55
+ type Interaction${capitalize(colorProperty)}Color = ${hoveredTokens
56
+ .filter(filterFn)
57
+ // @ts-ignore
58
+ .map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
59
+ .map((t) => {
60
+ // handle the default case eg color.border or color.text
61
+ const propName = t.token.replace(prefix, '').replace('.hovered', '');
62
+ return `'${propName}'`;
63
+ })
64
+ .join('|')};
65
+
66
+ const ${colorProperty}ActiveColorMap: Record<Interaction${capitalize(colorProperty)}Color, SerializedStyles> = {
57
67
  ${pressedTokens
58
68
  .filter(filterFn)
59
69
  // @ts-ignore
@@ -66,7 +76,7 @@ const ${colorProperty}ActiveColorMap = {
66
76
  .join(',\n\t')}
67
77
  };
68
78
 
69
- const ${colorProperty}HoverColorMap = {
79
+ const ${colorProperty}HoverColorMap: Record<Interaction${capitalize(colorProperty)}Color, SerializedStyles> = {
70
80
  ${hoveredTokens
71
81
  .filter(filterFn)
72
82
  // @ts-ignore
@@ -78,10 +88,6 @@ const ${colorProperty}HoverColorMap = {
78
88
  })
79
89
  .join(',\n\t')}
80
90
  };`,
81
- 'typescript',
82
- ) +
83
- `\ntype Interaction${capitalize(
84
- colorProperty,
85
- )}Color = keyof typeof ${colorProperty}HoverColorMap;\n`
91
+ 'typescript',
86
92
  );
87
93
  };