@atlaskit/ds-explorations 3.5.2 → 4.0.1

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 (65) hide show
  1. package/CHANGELOG.md +370 -358
  2. package/README.md +4 -3
  3. package/afm-jira/tsconfig.json +24 -0
  4. package/dist/cjs/components/interaction-surface.partial.js +1 -1
  5. package/dist/cjs/index.js +0 -7
  6. package/dist/cjs/internal/color-map.js +1 -1
  7. package/dist/es2019/components/interaction-surface.partial.js +1 -1
  8. package/dist/es2019/index.js +0 -1
  9. package/dist/es2019/internal/color-map.js +1 -1
  10. package/dist/esm/components/interaction-surface.partial.js +1 -1
  11. package/dist/esm/index.js +0 -1
  12. package/dist/esm/internal/color-map.js +1 -1
  13. package/dist/types/components/interaction-surface.partial.d.ts +1 -1
  14. package/dist/types/index.d.ts +0 -2
  15. package/dist/types/internal/color-map.d.ts +1 -1
  16. package/dist/types-ts4.5/components/interaction-surface.partial.d.ts +1 -1
  17. package/dist/types-ts4.5/index.d.ts +0 -2
  18. package/dist/types-ts4.5/internal/color-map.d.ts +1 -1
  19. package/docs/01-basic.tsx +11 -13
  20. package/examples/99-interactions.tsx +174 -176
  21. package/package.json +6 -10
  22. package/report.api.md +127 -126
  23. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +540 -540
  24. package/scripts/__tests__/codegen.test.tsx +15 -17
  25. package/scripts/codegen-styles.tsx +25 -92
  26. package/scripts/color-codegen-template.tsx +69 -82
  27. package/scripts/color-map-template.tsx +24 -29
  28. package/scripts/dimension-codegen-template.tsx +32 -35
  29. package/scripts/interaction-codegen.tsx +61 -74
  30. package/scripts/misc-codegen-template.tsx +23 -25
  31. package/scripts/utils.tsx +30 -34
  32. package/src/components/__tests__/unit/interaction-suface.test.tsx +61 -62
  33. package/src/components/interaction-surface.partial.tsx +412 -416
  34. package/src/components/surface-provider.tsx +1 -1
  35. package/src/components/types.tsx +10 -10
  36. package/src/constants.tsx +9 -9
  37. package/src/index.tsx +0 -2
  38. package/src/internal/color-map.tsx +28 -28
  39. package/src/internal/role-to-element.tsx +21 -21
  40. package/tsconfig.app.json +44 -44
  41. package/tsconfig.dev.json +71 -83
  42. package/dist/cjs/components/text.partial.js +0 -280
  43. package/dist/cjs/internal/spacing-scale.js +0 -15
  44. package/dist/es2019/components/text.partial.js +0 -271
  45. package/dist/es2019/internal/spacing-scale.js +0 -9
  46. package/dist/esm/components/text.partial.js +0 -274
  47. package/dist/esm/internal/spacing-scale.js +0 -9
  48. package/dist/types/components/text.partial.d.ts +0 -157
  49. package/dist/types/internal/spacing-scale.d.ts +0 -9
  50. package/dist/types-ts4.5/components/text.partial.d.ts +0 -162
  51. package/dist/types-ts4.5/internal/spacing-scale.d.ts +0 -24
  52. package/examples/02-text-advanced.tsx +0 -30
  53. package/examples/02-text.tsx +0 -110
  54. package/examples/06-section-message.tsx +0 -82
  55. package/examples/07-comment.tsx +0 -51
  56. package/examples/08-lozenge.tsx +0 -34
  57. package/scripts/spacing-codegen-template.tsx +0 -66
  58. package/scripts/spacing-scale-template.tsx +0 -24
  59. package/scripts/typography-codegen-template.tsx +0 -72
  60. package/src/components/__tests__/unit/text.test.tsx +0 -64
  61. package/src/components/__tests__/vr-tests/__snapshots__/text-snapshot-test/text--default.png +0 -0
  62. package/src/components/__tests__/vr-tests/text-snapshot-test.vr.tsx +0 -6
  63. package/src/components/text.partial.tsx +0 -375
  64. package/src/internal/spacing-scale.tsx +0 -24
  65. package/text/package.json +0 -15
package/report.api.md CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  ## API Report File for "@atlaskit/ds-explorations"
4
4
 
5
- > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
5
+ > Do not edit this file. This report is auto-generated using
6
+ > [API Extractor](https://api-extractor.com/).
6
7
  > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
8
 
8
9
  ### Table of contents
@@ -29,75 +30,75 @@ type AsElement = (typeof asAllowlist)[number];
29
30
 
30
31
  // @public (undocumented)
31
32
  const backgroundHoverColorMap: {
32
- 'accent.lime.subtlest': SerializedStyles;
33
- 'accent.lime.subtler': SerializedStyles;
34
- 'accent.lime.subtle': SerializedStyles;
35
- 'accent.lime.bolder': SerializedStyles;
36
- 'accent.red.subtlest': SerializedStyles;
37
- 'accent.red.subtler': SerializedStyles;
38
- 'accent.red.subtle': SerializedStyles;
39
- 'accent.red.bolder': SerializedStyles;
40
- 'accent.orange.subtlest': SerializedStyles;
41
- 'accent.orange.subtler': SerializedStyles;
42
- 'accent.orange.subtle': SerializedStyles;
43
- 'accent.orange.bolder': SerializedStyles;
44
- 'accent.yellow.subtlest': SerializedStyles;
45
- 'accent.yellow.subtler': SerializedStyles;
46
- 'accent.yellow.subtle': SerializedStyles;
47
- 'accent.yellow.bolder': SerializedStyles;
48
- 'accent.green.subtlest': SerializedStyles;
49
- 'accent.green.subtler': SerializedStyles;
50
- 'accent.green.subtle': SerializedStyles;
51
- 'accent.green.bolder': SerializedStyles;
52
- 'accent.teal.subtlest': SerializedStyles;
53
- 'accent.teal.subtler': SerializedStyles;
54
- 'accent.teal.subtle': SerializedStyles;
55
- 'accent.teal.bolder': SerializedStyles;
56
- 'accent.blue.subtlest': SerializedStyles;
57
- 'accent.blue.subtler': SerializedStyles;
58
- 'accent.blue.subtle': SerializedStyles;
59
- 'accent.blue.bolder': SerializedStyles;
60
- 'accent.purple.subtlest': SerializedStyles;
61
- 'accent.purple.subtler': SerializedStyles;
62
- 'accent.purple.subtle': SerializedStyles;
63
- 'accent.purple.bolder': SerializedStyles;
64
- 'accent.magenta.subtlest': SerializedStyles;
65
- 'accent.magenta.subtler': SerializedStyles;
66
- 'accent.magenta.subtle': SerializedStyles;
67
- 'accent.magenta.bolder': SerializedStyles;
68
- 'accent.gray.subtlest': SerializedStyles;
69
- 'accent.gray.subtler': SerializedStyles;
70
- 'accent.gray.subtle': SerializedStyles;
71
- 'accent.gray.bolder': SerializedStyles;
72
- input: SerializedStyles;
73
- 'inverse.subtle': SerializedStyles;
74
- neutral: SerializedStyles;
75
- 'neutral.subtle': SerializedStyles;
76
- 'neutral.bold': SerializedStyles;
77
- selected: SerializedStyles;
78
- 'selected.bold': SerializedStyles;
79
- 'brand.subtlest': SerializedStyles;
80
- 'brand.bold': SerializedStyles;
81
- 'brand.boldest': SerializedStyles;
82
- danger: SerializedStyles;
83
- 'danger.bold': SerializedStyles;
84
- warning: SerializedStyles;
85
- 'warning.bold': SerializedStyles;
86
- success: SerializedStyles;
87
- 'success.bold': SerializedStyles;
88
- discovery: SerializedStyles;
89
- 'discovery.bold': SerializedStyles;
90
- information: SerializedStyles;
91
- 'information.bold': SerializedStyles;
92
- 'elevation.surface': SerializedStyles;
93
- 'elevation.surface.overlay': SerializedStyles;
94
- 'elevation.surface.raised': SerializedStyles;
33
+ 'accent.lime.subtlest': SerializedStyles;
34
+ 'accent.lime.subtler': SerializedStyles;
35
+ 'accent.lime.subtle': SerializedStyles;
36
+ 'accent.lime.bolder': SerializedStyles;
37
+ 'accent.red.subtlest': SerializedStyles;
38
+ 'accent.red.subtler': SerializedStyles;
39
+ 'accent.red.subtle': SerializedStyles;
40
+ 'accent.red.bolder': SerializedStyles;
41
+ 'accent.orange.subtlest': SerializedStyles;
42
+ 'accent.orange.subtler': SerializedStyles;
43
+ 'accent.orange.subtle': SerializedStyles;
44
+ 'accent.orange.bolder': SerializedStyles;
45
+ 'accent.yellow.subtlest': SerializedStyles;
46
+ 'accent.yellow.subtler': SerializedStyles;
47
+ 'accent.yellow.subtle': SerializedStyles;
48
+ 'accent.yellow.bolder': SerializedStyles;
49
+ 'accent.green.subtlest': SerializedStyles;
50
+ 'accent.green.subtler': SerializedStyles;
51
+ 'accent.green.subtle': SerializedStyles;
52
+ 'accent.green.bolder': SerializedStyles;
53
+ 'accent.teal.subtlest': SerializedStyles;
54
+ 'accent.teal.subtler': SerializedStyles;
55
+ 'accent.teal.subtle': SerializedStyles;
56
+ 'accent.teal.bolder': SerializedStyles;
57
+ 'accent.blue.subtlest': SerializedStyles;
58
+ 'accent.blue.subtler': SerializedStyles;
59
+ 'accent.blue.subtle': SerializedStyles;
60
+ 'accent.blue.bolder': SerializedStyles;
61
+ 'accent.purple.subtlest': SerializedStyles;
62
+ 'accent.purple.subtler': SerializedStyles;
63
+ 'accent.purple.subtle': SerializedStyles;
64
+ 'accent.purple.bolder': SerializedStyles;
65
+ 'accent.magenta.subtlest': SerializedStyles;
66
+ 'accent.magenta.subtler': SerializedStyles;
67
+ 'accent.magenta.subtle': SerializedStyles;
68
+ 'accent.magenta.bolder': SerializedStyles;
69
+ 'accent.gray.subtlest': SerializedStyles;
70
+ 'accent.gray.subtler': SerializedStyles;
71
+ 'accent.gray.subtle': SerializedStyles;
72
+ 'accent.gray.bolder': SerializedStyles;
73
+ input: SerializedStyles;
74
+ 'inverse.subtle': SerializedStyles;
75
+ neutral: SerializedStyles;
76
+ 'neutral.subtle': SerializedStyles;
77
+ 'neutral.bold': SerializedStyles;
78
+ selected: SerializedStyles;
79
+ 'selected.bold': SerializedStyles;
80
+ 'brand.subtlest': SerializedStyles;
81
+ 'brand.bold': SerializedStyles;
82
+ 'brand.boldest': SerializedStyles;
83
+ danger: SerializedStyles;
84
+ 'danger.bold': SerializedStyles;
85
+ warning: SerializedStyles;
86
+ 'warning.bold': SerializedStyles;
87
+ success: SerializedStyles;
88
+ 'success.bold': SerializedStyles;
89
+ discovery: SerializedStyles;
90
+ 'discovery.bold': SerializedStyles;
91
+ information: SerializedStyles;
92
+ 'information.bold': SerializedStyles;
93
+ 'elevation.surface': SerializedStyles;
94
+ 'elevation.surface.overlay': SerializedStyles;
95
+ 'elevation.surface.raised': SerializedStyles;
95
96
  };
96
97
 
97
98
  // @public (undocumented)
98
99
  interface BasePrimitiveProps {
99
- testId?: string;
100
- UNSAFE_style?: CSSProperties;
100
+ testId?: string;
101
+ UNSAFE_style?: CSSProperties;
101
102
  }
102
103
 
103
104
  // @public (undocumented)
@@ -105,14 +106,14 @@ type FontSize = keyof typeof fontSizeMap;
105
106
 
106
107
  // @public
107
108
  const fontSizeMap: {
108
- 'size.050': SerializedStyles;
109
- 'size.075': SerializedStyles;
110
- 'size.100': SerializedStyles;
111
- 'size.200': SerializedStyles;
112
- 'size.300': SerializedStyles;
113
- 'size.400': SerializedStyles;
114
- 'size.500': SerializedStyles;
115
- 'size.600': SerializedStyles;
109
+ 'size.050': SerializedStyles;
110
+ 'size.075': SerializedStyles;
111
+ 'size.100': SerializedStyles;
112
+ 'size.200': SerializedStyles;
113
+ 'size.300': SerializedStyles;
114
+ 'size.400': SerializedStyles;
115
+ 'size.500': SerializedStyles;
116
+ 'size.600': SerializedStyles;
116
117
  };
117
118
 
118
119
  // @public (undocumented)
@@ -120,10 +121,10 @@ type FontWeight = keyof typeof fontWeightMap;
120
121
 
121
122
  // @public (undocumented)
122
123
  const fontWeightMap: {
123
- bold: SerializedStyles;
124
- medium: SerializedStyles;
125
- regular: SerializedStyles;
126
- semibold: SerializedStyles;
124
+ bold: SerializedStyles;
125
+ medium: SerializedStyles;
126
+ regular: SerializedStyles;
127
+ semibold: SerializedStyles;
127
128
  };
128
129
 
129
130
  // @public (undocumented)
@@ -131,10 +132,10 @@ type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
131
132
 
132
133
  // @public (undocumented)
133
134
  interface InteractionSurfaceProps extends BasePrimitiveProps {
134
- // (undocumented)
135
- appearance?: InteractionBackgroundColor;
136
- // (undocumented)
137
- children: ReactNode;
135
+ // (undocumented)
136
+ appearance?: InteractionBackgroundColor;
137
+ // (undocumented)
138
+ children: ReactNode;
138
139
  }
139
140
 
140
141
  // @public (undocumented)
@@ -142,13 +143,13 @@ type LineHeight = keyof typeof lineHeightMap;
142
143
 
143
144
  // @public (undocumented)
144
145
  const lineHeightMap: {
145
- 'lineHeight.1': SerializedStyles;
146
- 'lineHeight.100': SerializedStyles;
147
- 'lineHeight.200': SerializedStyles;
148
- 'lineHeight.300': SerializedStyles;
149
- 'lineHeight.400': SerializedStyles;
150
- 'lineHeight.500': SerializedStyles;
151
- 'lineHeight.600': SerializedStyles;
146
+ 'lineHeight.1': SerializedStyles;
147
+ 'lineHeight.100': SerializedStyles;
148
+ 'lineHeight.200': SerializedStyles;
149
+ 'lineHeight.300': SerializedStyles;
150
+ 'lineHeight.400': SerializedStyles;
151
+ 'lineHeight.500': SerializedStyles;
152
+ 'lineHeight.600': SerializedStyles;
152
153
  };
153
154
 
154
155
  // @public (undocumented)
@@ -156,9 +157,9 @@ type TextAlign = keyof typeof textAlignMap;
156
157
 
157
158
  // @public (undocumented)
158
159
  const textAlignMap: {
159
- center: SerializedStyles;
160
- end: SerializedStyles;
161
- start: SerializedStyles;
160
+ center: SerializedStyles;
161
+ end: SerializedStyles;
162
+ start: SerializedStyles;
162
163
  };
163
164
 
164
165
  // @public (undocumented)
@@ -166,19 +167,19 @@ type TextColor = keyof typeof textColorMap;
166
167
 
167
168
  // @public
168
169
  const textColorMap: {
169
- readonly 'color.text': SerializedStyles;
170
- readonly disabled: SerializedStyles;
171
- readonly inverse: SerializedStyles;
172
- readonly selected: SerializedStyles;
173
- readonly brand: SerializedStyles;
174
- readonly danger: SerializedStyles;
175
- readonly warning: SerializedStyles;
176
- readonly 'warning.inverse': SerializedStyles;
177
- readonly success: SerializedStyles;
178
- readonly discovery: SerializedStyles;
179
- readonly information: SerializedStyles;
180
- readonly subtlest: SerializedStyles;
181
- readonly subtle: SerializedStyles;
170
+ readonly 'color.text': SerializedStyles;
171
+ readonly disabled: SerializedStyles;
172
+ readonly inverse: SerializedStyles;
173
+ readonly selected: SerializedStyles;
174
+ readonly brand: SerializedStyles;
175
+ readonly danger: SerializedStyles;
176
+ readonly warning: SerializedStyles;
177
+ readonly 'warning.inverse': SerializedStyles;
178
+ readonly success: SerializedStyles;
179
+ readonly discovery: SerializedStyles;
180
+ readonly information: SerializedStyles;
181
+ readonly subtlest: SerializedStyles;
182
+ readonly subtle: SerializedStyles;
182
183
  };
183
184
 
184
185
  // @public (undocumented)
@@ -186,16 +187,16 @@ type TextTransform = keyof typeof textTransformMap;
186
187
 
187
188
  // @public (undocumented)
188
189
  const textTransformMap: {
189
- none: SerializedStyles;
190
- lowercase: SerializedStyles;
191
- uppercase: SerializedStyles;
190
+ none: SerializedStyles;
191
+ lowercase: SerializedStyles;
192
+ uppercase: SerializedStyles;
192
193
  };
193
194
 
194
195
  // @public (undocumented)
195
196
  export const UNSAFE_InteractionSurface: ({
196
- appearance,
197
- children,
198
- testId,
197
+ appearance,
198
+ children,
199
+ testId,
199
200
  }: InteractionSurfaceProps) => jsx.JSX.Element;
200
201
 
201
202
  // @internal
@@ -203,17 +204,17 @@ export const UNSAFE_Text: FC<UNSAFE_TextProps>;
203
204
 
204
205
  // @public (undocumented)
205
206
  export interface UNSAFE_TextProps extends BasePrimitiveProps {
206
- as?: AsElement;
207
- children: ReactNode;
208
- color?: TextColor;
209
- fontSize?: FontSize;
210
- fontWeight?: FontWeight;
211
- id?: string;
212
- lineHeight?: LineHeight;
213
- shouldTruncate?: boolean;
214
- textAlign?: TextAlign;
215
- textTransform?: TextTransform;
216
- verticalAlign?: VerticalAlign;
207
+ as?: AsElement;
208
+ children: ReactNode;
209
+ color?: TextColor;
210
+ fontSize?: FontSize;
211
+ fontWeight?: FontWeight;
212
+ id?: string;
213
+ lineHeight?: LineHeight;
214
+ shouldTruncate?: boolean;
215
+ textAlign?: TextAlign;
216
+ textTransform?: TextTransform;
217
+ verticalAlign?: VerticalAlign;
217
218
  }
218
219
 
219
220
  // @public (undocumented)
@@ -221,9 +222,9 @@ type VerticalAlign = keyof typeof verticalAlignMap;
221
222
 
222
223
  // @public (undocumented)
223
224
  const verticalAlignMap: {
224
- top: SerializedStyles;
225
- middle: SerializedStyles;
226
- bottom: SerializedStyles;
225
+ top: SerializedStyles;
226
+ middle: SerializedStyles;
227
+ bottom: SerializedStyles;
227
228
  };
228
229
 
229
230
  // (No @packageDocumentation comment for this package)
@@ -237,7 +238,7 @@ const verticalAlignMap: {
237
238
 
238
239
  ```json
239
240
  {
240
- "react": "^16.8.0"
241
+ "react": "^16.8.0"
241
242
  }
242
243
  ```
243
244