@atlaskit/textfield 5.6.6 → 5.6.8

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 +58 -46
  2. package/codemods/migrations/utils.tsx +2 -1
  3. package/dist/cjs/styles.js +5 -7
  4. package/dist/cjs/text-field.js +37 -25
  5. package/dist/es2019/styles.js +3 -5
  6. package/dist/es2019/text-field.js +32 -20
  7. package/dist/esm/styles.js +5 -7
  8. package/dist/esm/text-field.js +37 -25
  9. package/dist/types/styles.d.ts +2 -2
  10. package/dist/types-ts4.5/styles.d.ts +2 -2
  11. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,46 +1,58 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 5.6.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [#40987](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40987) [`3039d60a810`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3039d60a810) - Make spread props present in types explicit.
8
+
9
+ ## 5.6.7
10
+
11
+ ### Patch Changes
12
+
13
+ - [#39787](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39787) [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
14
+
3
15
  ## 5.6.6
4
16
 
5
17
  ### Patch Changes
6
18
 
7
- - [`29941aaea33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/29941aaea33) - update focused fallback color to meet contrast requirement
19
+ - [#37613](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37613) [`29941aaea33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/29941aaea33) - update focused fallback color to meet contrast requirement
8
20
 
9
21
  ## 5.6.5
10
22
 
11
23
  ### Patch Changes
12
24
 
13
- - [`3c114ea4257`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c114ea4257) - Update type definitions to conform to inherited changes from `@types/react@16.14.15`.
25
+ - [#39128](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39128) [`3c114ea4257`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c114ea4257) - Update type definitions to conform to inherited changes from `@types/react@16.14.15`.
14
26
 
15
27
  ## 5.6.4
16
28
 
17
29
  ### Patch Changes
18
30
 
19
- - [`356d6ebed05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/356d6ebed05) - This package is now onboarded onto the product push model.
31
+ - [#38201](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38201) [`356d6ebed05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/356d6ebed05) - This package is now onboarded onto the product push model.
20
32
 
21
33
  ## 5.6.3
22
34
 
23
35
  ### Patch Changes
24
36
 
25
- - [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
37
+ - [#36754](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36754) [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
26
38
 
27
39
  ## 5.6.2
28
40
 
29
41
  ### Patch Changes
30
42
 
31
- - [`a01cf0168b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a01cf0168b8) - update border width with border spacing token
43
+ - [#36661](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36661) [`a01cf0168b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a01cf0168b8) - update border width with border spacing token
32
44
 
33
45
  ## 5.6.1
34
46
 
35
47
  ### Patch Changes
36
48
 
37
- - [`3a8d6f61240`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a8d6f61240) - [ux] Adds `text-overflow: ellipsis` to placeholder text.
49
+ - [#36066](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36066) [`3a8d6f61240`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a8d6f61240) - [ux] Adds `text-overflow: ellipsis` to placeholder text.
38
50
 
39
51
  ## 5.6.0
40
52
 
41
53
  ### Minor Changes
42
54
 
43
- - [`a90730ddb33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a90730ddb33) - Disallow use of unused prop `disabled`. Disabled textfields should use
55
+ - [#35766](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35766) [`a90730ddb33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a90730ddb33) - Disallow use of unused prop `disabled`. Disabled textfields should use
44
56
  `isDisabled`. This change includes a codemod for transitioning existing code
45
57
  over to the proper usage.
46
58
 
@@ -48,43 +60,43 @@
48
60
 
49
61
  ### Patch Changes
50
62
 
51
- - [`8f436f0c301`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f436f0c301) - extend border contrast feature flag to support confluence
63
+ - [#35111](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35111) [`8f436f0c301`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f436f0c301) - extend border contrast feature flag to support confluence
52
64
 
53
65
  ## 5.5.1
54
66
 
55
67
  ### Patch Changes
56
68
 
57
- - [`774ed69ecef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/774ed69ecef) - Internal changes to use space tokens for spacing values. There is no visual change.
69
+ - [#34881](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34881) [`774ed69ecef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/774ed69ecef) - Internal changes to use space tokens for spacing values. There is no visual change.
58
70
 
59
71
  ## 5.5.0
60
72
 
61
73
  ### Minor Changes
62
74
 
63
- - [`c9c3a3f43af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c9c3a3f43af) - [ux] reduce border width to 1px and update fallback color of border
75
+ - [#33167](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33167) [`c9c3a3f43af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c9c3a3f43af) - [ux] reduce border width to 1px and update fallback color of border
64
76
 
65
77
  ## 5.4.3
66
78
 
67
79
  ### Patch Changes
68
80
 
69
- - [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
81
+ - [#34051](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34051) [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
70
82
 
71
83
  ## 5.4.2
72
84
 
73
85
  ### Patch Changes
74
86
 
75
- - [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
87
+ - [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
76
88
 
77
89
  ## 5.4.1
78
90
 
79
91
  ### Patch Changes
80
92
 
81
- - [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
93
+ - [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
82
94
 
83
95
  ## 5.4.0
84
96
 
85
97
  ### Minor Changes
86
98
 
87
- - [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
99
+ - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
88
100
 
89
101
  ### Patch Changes
90
102
 
@@ -94,7 +106,7 @@
94
106
 
95
107
  ### Patch Changes
96
108
 
97
- - [`e028bee17df`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e028bee17df) - [ux] fix(style): update fallback color of placeholder to meet contrast requirement
109
+ - [#33004](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33004) [`e028bee17df`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e028bee17df) - [ux] fix(style): update fallback color of placeholder to meet contrast requirement
98
110
 
99
111
  ## 5.3.6
100
112
 
@@ -130,31 +142,31 @@
130
142
 
131
143
  ### Patch Changes
132
144
 
133
- - [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
145
+ - [#26303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26303) [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
134
146
 
135
147
  ## 5.3.0
136
148
 
137
149
  ### Minor Changes
138
150
 
139
- - [`b8841384da6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8841384da6) - Disabled background and border styles should not be applied to components that have either no background or transparent background to begin with. Textfield and textarea variants that do not have backgrounds (sublte or none) have no backgrounds or borders applied when disabled. As such, any comopnents that consume these will also be affected.
151
+ - [#24968](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24968) [`b8841384da6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8841384da6) - Disabled background and border styles should not be applied to components that have either no background or transparent background to begin with. Textfield and textarea variants that do not have backgrounds (sublte or none) have no backgrounds or borders applied when disabled. As such, any comopnents that consume these will also be affected.
140
152
 
141
153
  ## 5.2.2
142
154
 
143
155
  ### Patch Changes
144
156
 
145
- - [`bedbdec0e82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bedbdec0e82) - Update hover state appearance of subtle Textarea, Textfield and Select components to match the hover states of their default counterparts.
157
+ - [#25314](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/25314) [`bedbdec0e82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bedbdec0e82) - Update hover state appearance of subtle Textarea, Textfield and Select components to match the hover states of their default counterparts.
146
158
 
147
159
  ## 5.2.1
148
160
 
149
161
  ### Patch Changes
150
162
 
151
- - [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
163
+ - [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
152
164
 
153
165
  ## 5.2.0
154
166
 
155
167
  ### Minor Changes
156
168
 
157
- - [`acf974e717c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/acf974e717c) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
169
+ - [#24004](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24004) [`acf974e717c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/acf974e717c) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
158
170
 
159
171
  ### Patch Changes
160
172
 
@@ -164,13 +176,13 @@
164
176
 
165
177
  ### Patch Changes
166
178
 
167
- - [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
179
+ - [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
168
180
 
169
181
  ## 5.1.12
170
182
 
171
183
  ### Patch Changes
172
184
 
173
- - [`7c14ea36248`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c14ea36248) - [ux] Updated input tokens within `@atlaskit/textfield`.
185
+ - [#21570](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21570) [`7c14ea36248`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c14ea36248) - [ux] Updated input tokens within `@atlaskit/textfield`.
174
186
 
175
187
  ## 5.1.11
176
188
 
@@ -182,7 +194,7 @@
182
194
 
183
195
  ### Patch Changes
184
196
 
185
- - [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
197
+ - [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
186
198
 
187
199
  ## 5.1.9
188
200
 
@@ -194,7 +206,7 @@
194
206
 
195
207
  ### Patch Changes
196
208
 
197
- - [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
209
+ - [#19618](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/19618) [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
198
210
  - Updated dependencies
199
211
 
200
212
  ## 5.1.7
@@ -207,7 +219,7 @@
207
219
 
208
220
  ### Patch Changes
209
221
 
210
- - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
222
+ - [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752) [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
211
223
  - Updated dependencies
212
224
 
213
225
  ## 5.1.5
@@ -220,7 +232,7 @@
220
232
 
221
233
  ### Patch Changes
222
234
 
223
- - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
235
+ - [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998) [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
224
236
  - Updated dependencies
225
237
 
226
238
  ## 5.1.3
@@ -245,7 +257,7 @@
245
257
 
246
258
  ### Minor Changes
247
259
 
248
- - [`78ba9e045b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78ba9e045b8) - Internal refactor to align to the design system techstack.
260
+ - [#13302](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13302) [`78ba9e045b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78ba9e045b8) - Internal refactor to align to the design system techstack.
249
261
  - [`4d34d35270e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4d34d35270e) - Instrumented text field with the new theming package, `@atlaskit/tokens`.
250
262
 
251
263
  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
@@ -262,38 +274,38 @@
262
274
 
263
275
  ### Patch Changes
264
276
 
265
- - [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
277
+ - [#12880](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12880) [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
266
278
 
267
279
  ## 5.0.4
268
280
 
269
281
  ### Patch Changes
270
282
 
271
- - [`a7d1415e5e6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a7d1415e5e6) - [ux] add high contrast mode supporting for Textfield
283
+ - [#12328](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12328) [`a7d1415e5e6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a7d1415e5e6) - [ux] add high contrast mode supporting for Textfield
272
284
  - Updated dependencies
273
285
 
274
286
  ## 5.0.3
275
287
 
276
288
  ### Patch Changes
277
289
 
278
- - [`6f0bbf09744`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f0bbf09744) - [ux] Fix disabled TextField text contrast on Safari/WebKit browsers
290
+ - [#11649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11649) [`6f0bbf09744`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f0bbf09744) - [ux] Fix disabled TextField text contrast on Safari/WebKit browsers
279
291
 
280
292
  ## 5.0.2
281
293
 
282
294
  ### Patch Changes
283
295
 
284
- - [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
296
+ - [#12167](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12167) [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
285
297
 
286
298
  ## 5.0.1
287
299
 
288
300
  ### Patch Changes
289
301
 
290
- - [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
302
+ - [#8644](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8644) [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
291
303
 
292
304
  ## 5.0.0
293
305
 
294
306
  ### Major Changes
295
307
 
296
- - [`9d0f54a809`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d0f54a809)
308
+ - [#7170](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/7170) [`9d0f54a809`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d0f54a809)
297
309
 
298
310
  **Summary**
299
311
 
@@ -393,13 +405,13 @@
393
405
 
394
406
  ### Patch Changes
395
407
 
396
- - [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
408
+ - [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857) [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
397
409
 
398
410
  ## 4.0.9
399
411
 
400
412
  ### Patch Changes
401
413
 
402
- - [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
414
+ - [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
403
415
  This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
404
416
  Also add `typescript` to `devDependencies` to denote version that the package was built with.
405
417
 
@@ -413,26 +425,26 @@
413
425
 
414
426
  ### Patch Changes
415
427
 
416
- - [`2ac834240e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ac834240e) - Undo analytics-next file restructure to allow external ts definitions to continue working
428
+ - [#5164](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5164) [`2ac834240e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ac834240e) - Undo analytics-next file restructure to allow external ts definitions to continue working
417
429
 
418
430
  ## 4.0.6
419
431
 
420
432
  ### Patch Changes
421
433
 
422
- - [`6529a49064`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6529a49064) - Removed IE11 and outdated browser-prefixed styles targeting the placeholder attribute
434
+ - [#4749](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4749) [`6529a49064`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6529a49064) - Removed IE11 and outdated browser-prefixed styles targeting the placeholder attribute
423
435
  - Updated dependencies
424
436
 
425
437
  ## 4.0.5
426
438
 
427
439
  ### Patch Changes
428
440
 
429
- - [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
441
+ - [#4707](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4707) [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
430
442
 
431
443
  ## 4.0.4
432
444
 
433
445
  ### Patch Changes
434
446
 
435
- - [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
447
+ - [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
436
448
 
437
449
  Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
438
450
  to prevent duplicates of tslib being bundled.
@@ -441,25 +453,25 @@
441
453
 
442
454
  ### Patch Changes
443
455
 
444
- - [`76165ad82f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/76165ad82f) - Bump required because of conflicts on wadmal release
456
+ - [#4393](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4393) [`76165ad82f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/76165ad82f) - Bump required because of conflicts on wadmal release
445
457
 
446
458
  ## 4.0.2
447
459
 
448
460
  ### Patch Changes
449
461
 
450
- - [`e99262c6f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e99262c6f0) - All form elements now have a default font explicitly set
462
+ - [#3823](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3823) [`e99262c6f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e99262c6f0) - All form elements now have a default font explicitly set
451
463
 
452
464
  ## 4.0.1
453
465
 
454
466
  ### Patch Changes
455
467
 
456
- - [`954cc87b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/954cc87b62) - The readme and package information has been updated to point to the new design system website.
468
+ - [#3293](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3293) [`954cc87b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/954cc87b62) - The readme and package information has been updated to point to the new design system website.
457
469
 
458
470
  ## 4.0.0
459
471
 
460
472
  ### Major Changes
461
473
 
462
- - [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
474
+ - [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
463
475
  For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
464
476
 
465
477
  ### Patch Changes
@@ -470,13 +482,13 @@
470
482
 
471
483
  ### Patch Changes
472
484
 
473
- - [`088c636cbd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/088c636cbd) - Updated disabled state border-color to match the ADG spec. It now appears as if there is no border on a disabled textfield.
485
+ - [#2763](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2763) [`088c636cbd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/088c636cbd) - Updated disabled state border-color to match the ADG spec. It now appears as if there is no border on a disabled textfield.
474
486
 
475
487
  ## 3.1.12
476
488
 
477
489
  ### Patch Changes
478
490
 
479
- - [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
491
+ - [#2866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2866) [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
480
492
 
481
493
  ## 3.1.11
482
494
 
@@ -488,7 +500,7 @@
488
500
 
489
501
  ### Patch Changes
490
502
 
491
- - [`83f4f94df3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/83f4f94df3) - Change imports to comply with Atlassian conventions- Updated dependencies
503
+ - [#1868](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/1868) [`83f4f94df3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/83f4f94df3) - Change imports to comply with Atlassian conventions- Updated dependencies
492
504
 
493
505
  ## 3.1.9
494
506
 
package/codemods/migrations/utils.tsx CHANGED
@@ -5,6 +5,7 @@ import core, {
5
5
  Identifier,
6
6
  ImportDeclaration,
7
7
  ImportSpecifier,
8
+ JSXAttribute,
8
9
  Options,
9
10
  Program,
10
11
  } from 'jscodeshift';
@@ -58,7 +59,7 @@ export function getJSXAttributesByName(
58
59
  j: core.JSCodeshift,
59
60
  element: ASTPath<any>,
60
61
  attributeName: string,
61
- ) {
62
+ ): Collection<JSXAttribute> {
62
63
  return j(element)
63
64
  .find(j.JSXOpeningElement)
64
65
  .find(j.JSXAttribute)
package/dist/cjs/styles.js CHANGED
@@ -13,8 +13,8 @@ var _constants = require("@atlaskit/theme/constants");
13
13
  var componentTokens = _interopRequireWildcard(require("./component-tokens"));
14
14
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
15
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
16
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
17
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
16
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
17
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
18
18
  var fontSize = (0, _constants.fontSize)();
19
19
  var gridSize = (0, _constants.gridSize)();
20
20
  var disabledRules = {
@@ -141,9 +141,7 @@ var containerStyles = function containerStyles(appearance, mode, width) {
141
141
  }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
142
142
  borderRadius: 3,
143
143
  borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2
144
- }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
145
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
146
- {
144
+ }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? {
147
145
  padding: "var(--ds-border-width, 1px)".concat(" 0")
148
146
  } : {}), {}, {
149
147
  borderStyle: appearance === 'none' ? 'none' : 'solid',
@@ -178,11 +176,11 @@ var inputStyles = function inputStyles(mode) {
178
176
  fontFamily: (0, _constants.codeFontFamily)()
179
177
  },
180
178
  '&[data-compact]': {
181
- padding: "".concat(gridSize / 2, "px ").concat(gridSize - 2, "px"),
179
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)"),
182
180
  height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
183
181
  },
184
182
  '&:not([data-compact])': {
185
- padding: "".concat(gridSize, "px ").concat(gridSize - 2, "px"),
183
+ padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
186
184
  height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
187
185
  },
188
186
  '&[disabled]': {
package/dist/cjs/text-field.js CHANGED
@@ -15,40 +15,43 @@ var _react2 = require("@emotion/react");
15
15
  var _analyticsNext = require("@atlaskit/analytics-next");
16
16
  var _components = require("@atlaskit/theme/components");
17
17
  var _styles = require("./styles");
18
- var _excluded = ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"];
18
+ var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
19
19
  /** @jsx jsx */
20
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
21
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
22
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
23
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
22
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
23
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
24
24
  var analyticsParams = {
25
25
  componentName: 'textField',
26
26
  packageName: "@atlaskit/textfield",
27
- packageVersion: "5.6.6"
27
+ packageVersion: "5.6.8"
28
28
  };
29
29
  var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
30
30
  var _props$appearance = props.appearance,
31
31
  appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
32
+ className = props.className,
33
+ elemAfterInput = props.elemAfterInput,
34
+ elemBeforeInput = props.elemBeforeInput,
32
35
  _props$isCompact = props.isCompact,
33
36
  isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
34
37
  _props$isDisabled = props.isDisabled,
35
38
  isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
36
39
  _props$isInvalid = props.isInvalid,
37
40
  isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
38
- _props$isRequired = props.isRequired,
39
- isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
40
- _props$isReadOnly = props.isReadOnly,
41
- isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
42
41
  _props$isMonospaced = props.isMonospaced,
43
42
  isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
44
- width = props.width,
45
- elemAfterInput = props.elemAfterInput,
46
- elemBeforeInput = props.elemBeforeInput,
47
- testId = props.testId,
48
- onFocus = props.onFocus,
43
+ _props$isReadOnly = props.isReadOnly,
44
+ isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
45
+ _props$isRequired = props.isRequired,
46
+ isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
47
+ name = props.name,
49
48
  onBlur = props.onBlur,
49
+ onChange = props.onChange,
50
+ onFocus = props.onFocus,
50
51
  onMouseDown = props.onMouseDown,
51
- className = props.className,
52
+ placeholder = props.placeholder,
53
+ testId = props.testId,
54
+ width = props.width,
52
55
  spreadProps = (0, _objectWithoutProperties2.default)(props, _excluded);
53
56
  var inputRef = (0, _react.useRef)(null);
54
57
  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
@@ -96,9 +99,15 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
96
99
  return (0, _styles.inputStyles)(mode);
97
100
  }, [mode]);
98
101
  return (
99
- // We use event bubbling here to listen to any child element mouse down event.
100
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
102
+ /**
103
+ * It is not normally acceptable to add click and key handlers to
104
+ * non-interactive elements as this is an accessibility anti-pattern.
105
+ * However, because this instance is to handle events on all children that
106
+ * should be associated with the input, we can add role="presentation" so
107
+ * that there are no negative impacts to assistive technologies.
108
+ */
101
109
  (0, _react2.jsx)("div", {
110
+ role: "presentation",
102
111
  "data-disabled": isDisabled ? isDisabled : undefined,
103
112
  "data-invalid": isInvalid ? isInvalid : undefined,
104
113
  "data-ds--text-field--container": true,
@@ -110,21 +119,24 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
110
119
  css: containerStyles,
111
120
  className: className
112
121
  }, elemBeforeInput, (0, _react2.jsx)("input", (0, _extends2.default)({}, spreadProps, {
122
+ "aria-invalid": isInvalid ? isInvalid : undefined
123
+ // TODO: When removing legacy theming fix this.
124
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
125
+ ,
126
+ css: inputStyle,
113
127
  "data-compact": isCompact ? isCompact : undefined,
114
- "data-monospaced": isMonospaced ? isMonospaced : undefined,
115
128
  "data-ds--text-field--input": true,
129
+ "data-monospaced": isMonospaced ? isMonospaced : undefined,
116
130
  "data-testid": testId,
117
- "aria-invalid": isInvalid ? isInvalid : undefined,
118
131
  disabled: isDisabled,
119
- readOnly: isReadOnly,
120
- required: isRequired,
132
+ name: name,
121
133
  onBlur: handleOnBlur,
134
+ onChange: onChange,
122
135
  onFocus: handleOnFocus,
123
- ref: setInputRef
124
- // TODO: When removing legacy theming fix this.
125
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
126
- ,
127
- css: inputStyle
136
+ placeholder: placeholder,
137
+ readOnly: isReadOnly,
138
+ ref: setInputRef,
139
+ required: isRequired
128
140
  })), elemAfterInput)
129
141
  );
130
142
  });
package/dist/es2019/styles.js CHANGED
@@ -129,9 +129,7 @@ export const containerStyles = (appearance, mode, width) => ({
129
129
  borderRadius: 3,
130
130
  borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
131
131
  // add 1px padding on both top and bottom to keep the same overall height after border reduced from 2px to 1px under feature flag
132
- ...(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
133
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
134
- {
132
+ ...(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? {
135
133
  padding: `${"var(--ds-border-width, 1px)"} 0`
136
134
  } : {}),
137
135
  borderStyle: appearance === 'none' ? 'none' : 'solid',
@@ -163,11 +161,11 @@ export const inputStyles = mode => ({
163
161
  fontFamily: codeFontFamily()
164
162
  },
165
163
  '&[data-compact]': {
166
- padding: `${gridSize / 2}px ${gridSize - 2}px`,
164
+ padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`,
167
165
  height: `${(gridSize * 3.5 / fontSize).toFixed(2)}em`
168
166
  },
169
167
  '&:not([data-compact])': {
170
- padding: `${gridSize}px ${gridSize - 2}px`,
168
+ padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`,
171
169
  height: `${(gridSize * 4.5 / fontSize).toFixed(2)}em`
172
170
  },
173
171
  '&[disabled]': {
package/dist/es2019/text-field.js CHANGED
@@ -8,25 +8,28 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
8
8
  const analyticsParams = {
9
9
  componentName: 'textField',
10
10
  packageName: "@atlaskit/textfield",
11
- packageVersion: "5.6.6"
11
+ packageVersion: "5.6.8"
12
12
  };
13
13
  const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
14
14
  const {
15
15
  appearance = 'standard',
16
+ className,
17
+ elemAfterInput,
18
+ elemBeforeInput,
16
19
  isCompact = false,
17
20
  isDisabled = false,
18
21
  isInvalid = false,
19
- isRequired = false,
20
- isReadOnly = false,
21
22
  isMonospaced = false,
22
- width,
23
- elemAfterInput,
24
- elemBeforeInput,
25
- testId,
26
- onFocus,
23
+ isReadOnly = false,
24
+ isRequired = false,
25
+ name,
27
26
  onBlur,
27
+ onChange,
28
+ onFocus,
28
29
  onMouseDown,
29
- className,
30
+ placeholder,
31
+ testId,
32
+ width,
30
33
  ...spreadProps
31
34
  } = props;
32
35
  const inputRef = useRef(null);
@@ -74,9 +77,15 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
74
77
  const containerStyles = useMemo(() => getContainerStyles(appearance, mode, width), [appearance, mode, width]);
75
78
  const inputStyle = useMemo(() => getInputStyles(mode), [mode]);
76
79
  return (
77
- // We use event bubbling here to listen to any child element mouse down event.
78
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
80
+ /**
81
+ * It is not normally acceptable to add click and key handlers to
82
+ * non-interactive elements as this is an accessibility anti-pattern.
83
+ * However, because this instance is to handle events on all children that
84
+ * should be associated with the input, we can add role="presentation" so
85
+ * that there are no negative impacts to assistive technologies.
86
+ */
79
87
  jsx("div", {
88
+ role: "presentation",
80
89
  "data-disabled": isDisabled ? isDisabled : undefined,
81
90
  "data-invalid": isInvalid ? isInvalid : undefined,
82
91
  "data-ds--text-field--container": true,
@@ -88,21 +97,24 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
88
97
  css: containerStyles,
89
98
  className: className
90
99
  }, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
100
+ "aria-invalid": isInvalid ? isInvalid : undefined
101
+ // TODO: When removing legacy theming fix this.
102
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
103
+ ,
104
+ css: inputStyle,
91
105
  "data-compact": isCompact ? isCompact : undefined,
92
- "data-monospaced": isMonospaced ? isMonospaced : undefined,
93
106
  "data-ds--text-field--input": true,
107
+ "data-monospaced": isMonospaced ? isMonospaced : undefined,
94
108
  "data-testid": testId,
95
- "aria-invalid": isInvalid ? isInvalid : undefined,
96
109
  disabled: isDisabled,
97
- readOnly: isReadOnly,
98
- required: isRequired,
110
+ name: name,
99
111
  onBlur: handleOnBlur,
112
+ onChange: onChange,
100
113
  onFocus: handleOnFocus,
101
- ref: setInputRef
102
- // TODO: When removing legacy theming fix this.
103
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
104
- ,
105
- css: inputStyle
114
+ placeholder: placeholder,
115
+ readOnly: isReadOnly,
116
+ ref: setInputRef,
117
+ required: isRequired
106
118
  })), elemAfterInput)
107
119
  );
108
120
  });
package/dist/esm/styles.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
3
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
5
5
  import { R400 } from '@atlaskit/theme/colors';
6
6
  import { codeFontFamily, fontFamily, fontSize as getFontSize,
@@ -133,9 +133,7 @@ export var containerStyles = function containerStyles(appearance, mode, width) {
133
133
  }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
134
134
  borderRadius: 3,
135
135
  borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2
136
- }, getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
137
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
138
- {
136
+ }, getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? {
139
137
  padding: "var(--ds-border-width, 1px)".concat(" 0")
140
138
  } : {}), {}, {
141
139
  borderStyle: appearance === 'none' ? 'none' : 'solid',
@@ -169,11 +167,11 @@ export var inputStyles = function inputStyles(mode) {
169
167
  fontFamily: codeFontFamily()
170
168
  },
171
169
  '&[data-compact]': {
172
- padding: "".concat(gridSize / 2, "px ").concat(gridSize - 2, "px"),
170
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)"),
173
171
  height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
174
172
  },
175
173
  '&:not([data-compact])': {
176
- padding: "".concat(gridSize, "px ").concat(gridSize - 2, "px"),
174
+ padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
177
175
  height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
178
176
  },
179
177
  '&[disabled]': {
package/dist/esm/text-field.js CHANGED
@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _typeof from "@babel/runtime/helpers/typeof";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"];
6
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
7
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
5
+ var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
6
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
8
8
  /** @jsx jsx */
9
9
  import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
10
10
  import { jsx } from '@emotion/react';
@@ -14,31 +14,34 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
14
14
  var analyticsParams = {
15
15
  componentName: 'textField',
16
16
  packageName: "@atlaskit/textfield",
17
- packageVersion: "5.6.6"
17
+ packageVersion: "5.6.8"
18
18
  };
19
19
  var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
20
20
  var _props$appearance = props.appearance,
21
21
  appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
22
+ className = props.className,
23
+ elemAfterInput = props.elemAfterInput,
24
+ elemBeforeInput = props.elemBeforeInput,
22
25
  _props$isCompact = props.isCompact,
23
26
  isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
24
27
  _props$isDisabled = props.isDisabled,
25
28
  isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
26
29
  _props$isInvalid = props.isInvalid,
27
30
  isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
28
- _props$isRequired = props.isRequired,
29
- isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
30
- _props$isReadOnly = props.isReadOnly,
31
- isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
32
31
  _props$isMonospaced = props.isMonospaced,
33
32
  isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
34
- width = props.width,
35
- elemAfterInput = props.elemAfterInput,
36
- elemBeforeInput = props.elemBeforeInput,
37
- testId = props.testId,
38
- onFocus = props.onFocus,
33
+ _props$isReadOnly = props.isReadOnly,
34
+ isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
35
+ _props$isRequired = props.isRequired,
36
+ isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
37
+ name = props.name,
39
38
  onBlur = props.onBlur,
39
+ onChange = props.onChange,
40
+ onFocus = props.onFocus,
40
41
  onMouseDown = props.onMouseDown,
41
- className = props.className,
42
+ placeholder = props.placeholder,
43
+ testId = props.testId,
44
+ width = props.width,
42
45
  spreadProps = _objectWithoutProperties(props, _excluded);
43
46
  var inputRef = useRef(null);
44
47
  var _useGlobalTheme = useGlobalTheme(),
@@ -86,9 +89,15 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
86
89
  return getInputStyles(mode);
87
90
  }, [mode]);
88
91
  return (
89
- // We use event bubbling here to listen to any child element mouse down event.
90
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
92
+ /**
93
+ * It is not normally acceptable to add click and key handlers to
94
+ * non-interactive elements as this is an accessibility anti-pattern.
95
+ * However, because this instance is to handle events on all children that
96
+ * should be associated with the input, we can add role="presentation" so
97
+ * that there are no negative impacts to assistive technologies.
98
+ */
91
99
  jsx("div", {
100
+ role: "presentation",
92
101
  "data-disabled": isDisabled ? isDisabled : undefined,
93
102
  "data-invalid": isInvalid ? isInvalid : undefined,
94
103
  "data-ds--text-field--container": true,
@@ -100,21 +109,24 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
100
109
  css: containerStyles,
101
110
  className: className
102
111
  }, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
112
+ "aria-invalid": isInvalid ? isInvalid : undefined
113
+ // TODO: When removing legacy theming fix this.
114
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
115
+ ,
116
+ css: inputStyle,
103
117
  "data-compact": isCompact ? isCompact : undefined,
104
- "data-monospaced": isMonospaced ? isMonospaced : undefined,
105
118
  "data-ds--text-field--input": true,
119
+ "data-monospaced": isMonospaced ? isMonospaced : undefined,
106
120
  "data-testid": testId,
107
- "aria-invalid": isInvalid ? isInvalid : undefined,
108
121
  disabled: isDisabled,
109
- readOnly: isReadOnly,
110
- required: isRequired,
122
+ name: name,
111
123
  onBlur: handleOnBlur,
124
+ onChange: onChange,
112
125
  onFocus: handleOnFocus,
113
- ref: setInputRef
114
- // TODO: When removing legacy theming fix this.
115
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
116
- ,
117
- css: inputStyle
126
+ placeholder: placeholder,
127
+ readOnly: isReadOnly,
128
+ ref: setInputRef,
129
+ required: isRequired
118
130
  })), elemAfterInput)
119
131
  );
120
132
  });
package/dist/types/styles.d.ts CHANGED
@@ -73,11 +73,11 @@ export declare const inputStyles: (mode: ThemeModes) => {
73
73
  readonly fontFamily: string;
74
74
  };
75
75
  readonly '&[data-compact]': {
76
- readonly padding: `${number}px ${number}px`;
76
+ readonly padding: "var(--ds-space-050) var(--ds-space-075)";
77
77
  readonly height: `${string}em`;
78
78
  };
79
79
  readonly '&:not([data-compact])': {
80
- readonly padding: `${number}px ${number}px`;
80
+ readonly padding: "var(--ds-space-100) var(--ds-space-075)";
81
81
  readonly height: `${string}em`;
82
82
  };
83
83
  readonly '&[disabled]': {
package/dist/types-ts4.5/styles.d.ts CHANGED
@@ -73,11 +73,11 @@ export declare const inputStyles: (mode: ThemeModes) => {
73
73
  readonly fontFamily: string;
74
74
  };
75
75
  readonly '&[data-compact]': {
76
- readonly padding: `${number}px ${number}px`;
76
+ readonly padding: "var(--ds-space-050) var(--ds-space-075)";
77
77
  readonly height: `${string}em`;
78
78
  };
79
79
  readonly '&:not([data-compact])': {
80
- readonly padding: `${number}px ${number}px`;
80
+ readonly padding: "var(--ds-space-100) var(--ds-space-075)";
81
81
  readonly height: `${string}em`;
82
82
  };
83
83
  readonly '&[disabled]': {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.6.6",
3
+ "version": "5.6.8",
4
4
  "description": "A text field is an input that allows a user to write or edit text.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,8 +28,8 @@
28
28
  "dependencies": {
29
29
  "@atlaskit/analytics-next": "^9.1.0",
30
30
  "@atlaskit/platform-feature-flags": "^0.2.0",
31
- "@atlaskit/theme": "^12.5.0",
32
- "@atlaskit/tokens": "^1.17.0",
31
+ "@atlaskit/theme": "^12.6.0",
32
+ "@atlaskit/tokens": "^1.25.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@emotion/react": "^11.7.1"
35
35
  },