@atlaskit/textfield 5.2.0 → 5.2.2

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 (21) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/component-tokens.js +8 -8
  3. package/dist/cjs/styles.js +9 -2
  4. package/dist/cjs/text-field.js +1 -1
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/component-tokens.js +6 -6
  7. package/dist/es2019/styles.js +9 -2
  8. package/dist/es2019/text-field.js +1 -1
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/component-tokens.js +6 -6
  11. package/dist/esm/styles.js +9 -2
  12. package/dist/esm/text-field.js +1 -1
  13. package/dist/esm/version.json +1 -1
  14. package/dist/types/component-tokens.d.ts +6 -6
  15. package/dist/types/styles.d.ts +19 -4
  16. package/dist/types-ts4.0/component-tokens.d.ts +44 -0
  17. package/dist/types-ts4.0/index.d.ts +3 -0
  18. package/dist/types-ts4.0/styles.d.ts +223 -0
  19. package/dist/types-ts4.0/text-field.d.ts +14 -0
  20. package/dist/types-ts4.0/types.d.ts +71 -0
  21. package/package.json +11 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 5.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`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.
8
+
9
+ ## 5.2.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
14
+
3
15
  ## 5.2.0
4
16
 
5
17
  ### Minor Changes
package/dist/cjs/component-tokens.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.transparent = exports.textColor = exports.subtleBackgroundColorHover = exports.placeholderTextColor = exports.disabledTextColor = exports.disabledBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
6
+ exports.transparent = exports.textColor = exports.subtleBorderColorHover = exports.placeholderTextColor = exports.disabledTextColor = exports.disabledBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
7
7
 
8
8
  var _colors = require("@atlaskit/theme/colors");
9
9
 
@@ -27,14 +27,9 @@ var defaultBackgroundColorHover = {
27
27
  dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
28
28
  };
29
29
  exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
30
- var subtleBackgroundColorHover = {
31
- light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
32
- dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.DN30, ")")
33
- };
34
- exports.subtleBackgroundColorHover = subtleBackgroundColorHover;
35
30
  var defaultBorderColor = {
36
- light: "var(--ds-border, ".concat(_colors.N40, ")"),
37
- dark: "var(--ds-border, ".concat(_colors.DN40, ")")
31
+ light: "var(--ds-border-input, ".concat(_colors.N40, ")"),
32
+ dark: "var(--ds-border-input, ".concat(_colors.DN40, ")")
38
33
  };
39
34
  exports.defaultBorderColor = defaultBorderColor;
40
35
  var defaultBorderColorFocus = {
@@ -42,6 +37,11 @@ var defaultBorderColorFocus = {
42
37
  dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
43
38
  };
44
39
  exports.defaultBorderColorFocus = defaultBorderColorFocus;
40
+ var subtleBorderColorHover = {
41
+ light: "var(--ds-border-input, transparent)",
42
+ dark: "var(--ds-border-input, transparent)"
43
+ };
44
+ exports.subtleBorderColorHover = subtleBorderColorHover;
45
45
  var transparent = {
46
46
  light: 'transparent',
47
47
  dark: 'transparent'
package/dist/cjs/styles.js CHANGED
@@ -73,7 +73,7 @@ var backgroundColorFocus = {
73
73
  };
74
74
  var backgroundColorHover = {
75
75
  standard: componentTokens.defaultBackgroundColorHover,
76
- subtle: componentTokens.subtleBackgroundColorHover,
76
+ subtle: componentTokens.defaultBackgroundColorHover,
77
77
  none: componentTokens.transparent
78
78
  };
79
79
  var borderColor = {
@@ -86,6 +86,11 @@ var borderColorFocus = {
86
86
  subtle: componentTokens.defaultBorderColorFocus,
87
87
  none: componentTokens.transparent
88
88
  };
89
+ var borderColorHover = {
90
+ standard: componentTokens.defaultBorderColor,
91
+ subtle: componentTokens.subtleBorderColorHover,
92
+ none: componentTokens.transparent
93
+ };
89
94
 
90
95
  var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance, mode) {
91
96
  return {
@@ -94,7 +99,8 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
94
99
  color: componentTokens.textColor[mode],
95
100
  cursor: 'text',
96
101
  '&:hover': {
97
- backgroundColor: backgroundColorHover[appearance][mode]
102
+ backgroundColor: backgroundColorHover[appearance][mode],
103
+ borderColor: borderColorHover[appearance][mode]
98
104
  },
99
105
  '&:focus-within': {
100
106
  backgroundColor: backgroundColorFocus[appearance][mode],
@@ -221,6 +227,7 @@ var textFieldColors = {
221
227
  backgroundColorHover: backgroundColorHover,
222
228
  borderColor: borderColor,
223
229
  borderColorFocus: borderColorFocus,
230
+ borderColorHover: borderColorHover,
224
231
  placeholderTextColor: componentTokens.placeholderTextColor,
225
232
  textColor: componentTokens.textColor,
226
233
  invalidRules: invalidRules,
package/dist/cjs/text-field.js CHANGED
@@ -40,7 +40,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
40
40
  var analyticsParams = {
41
41
  componentName: 'textField',
42
42
  packageName: "@atlaskit/textfield",
43
- packageVersion: "5.2.0"
43
+ packageVersion: "5.2.2"
44
44
  };
45
45
  var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
46
46
  var _props$appearance = props.appearance,
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.2.0",
3
+ "version": "5.2.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/component-tokens.js CHANGED
@@ -15,18 +15,18 @@ export const defaultBackgroundColorHover = {
15
15
  light: `var(--ds-background-input-hovered, ${N30})`,
16
16
  dark: `var(--ds-background-input-hovered, ${DN30})`
17
17
  };
18
- export const subtleBackgroundColorHover = {
19
- light: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
20
- dark: `var(--ds-background-neutral-subtle-hovered, ${DN30})`
21
- };
22
18
  export const defaultBorderColor = {
23
- light: `var(--ds-border, ${N40})`,
24
- dark: `var(--ds-border, ${DN40})`
19
+ light: `var(--ds-border-input, ${N40})`,
20
+ dark: `var(--ds-border-input, ${DN40})`
25
21
  };
26
22
  export const defaultBorderColorFocus = {
27
23
  light: `var(--ds-border-focused, ${B100})`,
28
24
  dark: `var(--ds-border-focused, ${B75})`
29
25
  };
26
+ export const subtleBorderColorHover = {
27
+ light: "var(--ds-border-input, transparent)",
28
+ dark: "var(--ds-border-input, transparent)"
29
+ };
30
30
  export const transparent = {
31
31
  light: 'transparent',
32
32
  dark: 'transparent'
package/dist/es2019/styles.js CHANGED
@@ -49,7 +49,7 @@ const backgroundColorFocus = {
49
49
  };
50
50
  const backgroundColorHover = {
51
51
  standard: componentTokens.defaultBackgroundColorHover,
52
- subtle: componentTokens.subtleBackgroundColorHover,
52
+ subtle: componentTokens.defaultBackgroundColorHover,
53
53
  none: componentTokens.transparent
54
54
  };
55
55
  const borderColor = {
@@ -62,6 +62,11 @@ const borderColorFocus = {
62
62
  subtle: componentTokens.defaultBorderColorFocus,
63
63
  none: componentTokens.transparent
64
64
  };
65
+ const borderColorHover = {
66
+ standard: componentTokens.defaultBorderColor,
67
+ subtle: componentTokens.subtleBorderColorHover,
68
+ none: componentTokens.transparent
69
+ };
65
70
 
66
71
  const getContainerTextBgAndBorderColor = (appearance, mode) => ({
67
72
  backgroundColor: backgroundColor[appearance][mode],
@@ -69,7 +74,8 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
69
74
  color: componentTokens.textColor[mode],
70
75
  cursor: 'text',
71
76
  '&:hover': {
72
- backgroundColor: backgroundColorHover[appearance][mode]
77
+ backgroundColor: backgroundColorHover[appearance][mode],
78
+ borderColor: borderColorHover[appearance][mode]
73
79
  },
74
80
  '&:focus-within': {
75
81
  backgroundColor: backgroundColorFocus[appearance][mode],
@@ -184,6 +190,7 @@ export const textFieldColors = {
184
190
  backgroundColorHover,
185
191
  borderColor,
186
192
  borderColorFocus,
193
+ borderColorHover,
187
194
  placeholderTextColor: componentTokens.placeholderTextColor,
188
195
  textColor: componentTokens.textColor,
189
196
  invalidRules,
package/dist/es2019/text-field.js CHANGED
@@ -9,7 +9,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
9
9
  const analyticsParams = {
10
10
  componentName: 'textField',
11
11
  packageName: "@atlaskit/textfield",
12
- packageVersion: "5.2.0"
12
+ packageVersion: "5.2.2"
13
13
  };
14
14
  const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
15
15
  const {
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.2.0",
3
+ "version": "5.2.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/component-tokens.js CHANGED
@@ -15,18 +15,18 @@ export var defaultBackgroundColorHover = {
15
15
  light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
16
16
  dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
17
17
  };
18
- export var subtleBackgroundColorHover = {
19
- light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
20
- dark: "var(--ds-background-neutral-subtle-hovered, ".concat(DN30, ")")
21
- };
22
18
  export var defaultBorderColor = {
23
- light: "var(--ds-border, ".concat(N40, ")"),
24
- dark: "var(--ds-border, ".concat(DN40, ")")
19
+ light: "var(--ds-border-input, ".concat(N40, ")"),
20
+ dark: "var(--ds-border-input, ".concat(DN40, ")")
25
21
  };
26
22
  export var defaultBorderColorFocus = {
27
23
  light: "var(--ds-border-focused, ".concat(B100, ")"),
28
24
  dark: "var(--ds-border-focused, ".concat(B75, ")")
29
25
  };
26
+ export var subtleBorderColorHover = {
27
+ light: "var(--ds-border-input, transparent)",
28
+ dark: "var(--ds-border-input, transparent)"
29
+ };
30
30
  export var transparent = {
31
31
  light: 'transparent',
32
32
  dark: 'transparent'
package/dist/esm/styles.js CHANGED
@@ -55,7 +55,7 @@ var backgroundColorFocus = {
55
55
  };
56
56
  var backgroundColorHover = {
57
57
  standard: componentTokens.defaultBackgroundColorHover,
58
- subtle: componentTokens.subtleBackgroundColorHover,
58
+ subtle: componentTokens.defaultBackgroundColorHover,
59
59
  none: componentTokens.transparent
60
60
  };
61
61
  var borderColor = {
@@ -68,6 +68,11 @@ var borderColorFocus = {
68
68
  subtle: componentTokens.defaultBorderColorFocus,
69
69
  none: componentTokens.transparent
70
70
  };
71
+ var borderColorHover = {
72
+ standard: componentTokens.defaultBorderColor,
73
+ subtle: componentTokens.subtleBorderColorHover,
74
+ none: componentTokens.transparent
75
+ };
71
76
 
72
77
  var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance, mode) {
73
78
  return {
@@ -76,7 +81,8 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
76
81
  color: componentTokens.textColor[mode],
77
82
  cursor: 'text',
78
83
  '&:hover': {
79
- backgroundColor: backgroundColorHover[appearance][mode]
84
+ backgroundColor: backgroundColorHover[appearance][mode],
85
+ borderColor: borderColorHover[appearance][mode]
80
86
  },
81
87
  '&:focus-within': {
82
88
  backgroundColor: backgroundColorFocus[appearance][mode],
@@ -198,6 +204,7 @@ export var textFieldColors = {
198
204
  backgroundColorHover: backgroundColorHover,
199
205
  borderColor: borderColor,
200
206
  borderColorFocus: borderColorFocus,
207
+ borderColorHover: borderColorHover,
201
208
  placeholderTextColor: componentTokens.placeholderTextColor,
202
209
  textColor: componentTokens.textColor,
203
210
  invalidRules: invalidRules,
package/dist/esm/text-field.js CHANGED
@@ -17,7 +17,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
17
17
  var analyticsParams = {
18
18
  componentName: 'textField',
19
19
  packageName: "@atlaskit/textfield",
20
- packageVersion: "5.2.0"
20
+ packageVersion: "5.2.2"
21
21
  };
22
22
  var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
23
23
  var _props$appearance = props.appearance,
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.2.0",
3
+ "version": "5.2.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/component-tokens.d.ts CHANGED
@@ -14,18 +14,18 @@ export declare const defaultBackgroundColorHover: {
14
14
  light: "var(--ds-background-input-hovered)";
15
15
  dark: "var(--ds-background-input-hovered)";
16
16
  };
17
- export declare const subtleBackgroundColorHover: {
18
- light: "var(--ds-background-neutral-subtle-hovered)";
19
- dark: "var(--ds-background-neutral-subtle-hovered)";
20
- };
21
17
  export declare const defaultBorderColor: {
22
- light: "var(--ds-border)";
23
- dark: "var(--ds-border)";
18
+ light: "var(--ds-border-input)";
19
+ dark: "var(--ds-border-input)";
24
20
  };
25
21
  export declare const defaultBorderColorFocus: {
26
22
  light: "var(--ds-border-focused)";
27
23
  dark: "var(--ds-border-focused)";
28
24
  };
25
+ export declare const subtleBorderColorHover: {
26
+ light: "var(--ds-border-input)";
27
+ dark: "var(--ds-border-input)";
28
+ };
29
29
  export declare const transparent: {
30
30
  light: string;
31
31
  dark: string;
package/dist/types/styles.d.ts CHANGED
@@ -21,6 +21,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
21
21
  readonly cursor: string;
22
22
  readonly '&:hover': {
23
23
  backgroundColor: string;
24
+ borderColor: string;
24
25
  };
25
26
  readonly '&:focus-within': {
26
27
  backgroundColor: string;
@@ -131,8 +132,8 @@ export declare const textFieldColors: {
131
132
  dark: "var(--ds-background-input-hovered)";
132
133
  };
133
134
  subtle: {
134
- light: "var(--ds-background-neutral-subtle-hovered)";
135
- dark: "var(--ds-background-neutral-subtle-hovered)";
135
+ light: "var(--ds-background-input-hovered)";
136
+ dark: "var(--ds-background-input-hovered)";
136
137
  };
137
138
  none: {
138
139
  light: string;
@@ -141,8 +142,8 @@ export declare const textFieldColors: {
141
142
  };
142
143
  borderColor: {
143
144
  standard: {
144
- light: "var(--ds-border)";
145
- dark: "var(--ds-border)";
145
+ light: "var(--ds-border-input)";
146
+ dark: "var(--ds-border-input)";
146
147
  };
147
148
  subtle: {
148
149
  light: string;
@@ -167,6 +168,20 @@ export declare const textFieldColors: {
167
168
  dark: string;
168
169
  };
169
170
  };
171
+ borderColorHover: {
172
+ standard: {
173
+ light: "var(--ds-border-input)";
174
+ dark: "var(--ds-border-input)";
175
+ };
176
+ subtle: {
177
+ light: "var(--ds-border-input)";
178
+ dark: "var(--ds-border-input)";
179
+ };
180
+ none: {
181
+ light: string;
182
+ dark: string;
183
+ };
184
+ };
170
185
  placeholderTextColor: {
171
186
  light: "var(--ds-text-subtlest)";
172
187
  dark: "var(--ds-text-subtlest)";
package/dist/types-ts4.0/component-tokens.d.ts ADDED
@@ -0,0 +1,44 @@
1
+ export declare const disabledBackgroundColor: {
2
+ light: "var(--ds-background-disabled)";
3
+ dark: "var(--ds-background-disabled)";
4
+ };
5
+ export declare const defaultBackgroundColor: {
6
+ light: "var(--ds-background-input)";
7
+ dark: "var(--ds-background-input)";
8
+ };
9
+ export declare const defaultBackgroundColorFocus: {
10
+ light: "var(--ds-background-input-pressed)";
11
+ dark: "var(--ds-background-input-pressed)";
12
+ };
13
+ export declare const defaultBackgroundColorHover: {
14
+ light: "var(--ds-background-input-hovered)";
15
+ dark: "var(--ds-background-input-hovered)";
16
+ };
17
+ export declare const defaultBorderColor: {
18
+ light: "var(--ds-border-input)";
19
+ dark: "var(--ds-border-input)";
20
+ };
21
+ export declare const defaultBorderColorFocus: {
22
+ light: "var(--ds-border-focused)";
23
+ dark: "var(--ds-border-focused)";
24
+ };
25
+ export declare const subtleBorderColorHover: {
26
+ light: "var(--ds-border-input)";
27
+ dark: "var(--ds-border-input)";
28
+ };
29
+ export declare const transparent: {
30
+ light: string;
31
+ dark: string;
32
+ };
33
+ export declare const textColor: {
34
+ light: "var(--ds-text)";
35
+ dark: "var(--ds-text)";
36
+ };
37
+ export declare const disabledTextColor: {
38
+ light: "var(--ds-text-disabled)";
39
+ dark: "var(--ds-text-disabled)";
40
+ };
41
+ export declare const placeholderTextColor: {
42
+ light: "var(--ds-text-subtlest)";
43
+ dark: "var(--ds-text-subtlest)";
44
+ };
package/dist/types-ts4.0/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { default } from './text-field';
2
+ export { textFieldColors as TextFieldColors } from './styles';
3
+ export type { TextfieldProps as TextFieldProps, Appearance } from './types';
package/dist/types-ts4.0/styles.d.ts ADDED
@@ -0,0 +1,223 @@
1
+ import { ThemeModes } from '@atlaskit/theme/types';
2
+ import { Appearance } from './types';
3
+ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number | undefined) => {
4
+ readonly borderRadius: 3;
5
+ readonly borderWidth: 2;
6
+ readonly borderStyle: "none" | "solid";
7
+ readonly boxSizing: "border-box";
8
+ readonly display: "flex";
9
+ readonly flex: "1 1 100%";
10
+ readonly fontSize: number;
11
+ readonly justifyContent: "space-between";
12
+ readonly maxWidth: string | number;
13
+ readonly overflow: "hidden";
14
+ readonly transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out";
15
+ readonly wordWrap: "break-word";
16
+ readonly verticalAlign: "top";
17
+ readonly pointerEvents: "auto";
18
+ readonly backgroundColor: string;
19
+ readonly borderColor: string;
20
+ readonly color: "var(--ds-text)";
21
+ readonly cursor: string;
22
+ readonly '&:hover': {
23
+ backgroundColor: string;
24
+ borderColor: string;
25
+ };
26
+ readonly '&:focus-within': {
27
+ backgroundColor: string;
28
+ borderColor: string;
29
+ };
30
+ readonly '&[data-disabled]': {
31
+ backgroundColor: "var(--ds-background-disabled)";
32
+ borderColor: "var(--ds-background-disabled)";
33
+ color: "var(--ds-text-disabled)";
34
+ cursor: string;
35
+ };
36
+ readonly '&[data-invalid]': {
37
+ borderColor: "var(--ds-border-danger)";
38
+ };
39
+ readonly '&[data-invalid]:focus-within': {
40
+ backgroundColor: "var(--ds-background-input-pressed)";
41
+ borderColor: "var(--ds-border-focused)";
42
+ };
43
+ readonly '@media screen and (-ms-high-contrast: active)': {
44
+ '&[data-invalid]:focus-within': {
45
+ borderColor: string;
46
+ };
47
+ '&:focus-within': {
48
+ borderColor: string;
49
+ };
50
+ '&[data-disabled]': {
51
+ borderColor: string;
52
+ };
53
+ };
54
+ readonly alignItems: "center";
55
+ };
56
+ export declare const inputStyles: (mode: ThemeModes) => {
57
+ readonly backgroundColor: "transparent";
58
+ readonly border: 0;
59
+ readonly boxSizing: "border-box";
60
+ readonly color: "inherit";
61
+ readonly cursor: "inherit";
62
+ readonly fontSize: number;
63
+ readonly minWidth: "0";
64
+ readonly outline: "none";
65
+ readonly width: "100%";
66
+ readonly lineHeight: number;
67
+ readonly fontFamily: string;
68
+ readonly '&[data-monospaced]': {
69
+ readonly fontFamily: string;
70
+ };
71
+ readonly '&[data-compact]': {
72
+ readonly padding: `${number}px ${number}px`;
73
+ readonly height: `${string}em`;
74
+ };
75
+ readonly '&:not([data-compact])': {
76
+ readonly padding: `${number}px ${number}px`;
77
+ readonly height: `${string}em`;
78
+ };
79
+ readonly '&[disabled]': {
80
+ readonly WebkitTextFillColor: "var(--ds-text-disabled)";
81
+ };
82
+ readonly '&::-ms-clear': {
83
+ readonly display: "none";
84
+ };
85
+ readonly '&:invalid': {
86
+ readonly boxShadow: "none";
87
+ };
88
+ readonly '&::placeholder': {
89
+ readonly color: "var(--ds-text-subtlest)";
90
+ readonly '&:disabled': {
91
+ readonly color: "var(--ds-text-disabled)";
92
+ };
93
+ };
94
+ readonly '@media screen and (-ms-high-contrast: active)': {
95
+ readonly '&[disabled]': {
96
+ readonly color: "GrayText";
97
+ };
98
+ };
99
+ };
100
+ export declare const textFieldColors: {
101
+ backgroundColor: {
102
+ standard: {
103
+ light: "var(--ds-background-input)";
104
+ dark: "var(--ds-background-input)";
105
+ };
106
+ subtle: {
107
+ light: string;
108
+ dark: string;
109
+ };
110
+ none: {
111
+ light: string;
112
+ dark: string;
113
+ };
114
+ };
115
+ backgroundColorFocus: {
116
+ standard: {
117
+ light: "var(--ds-background-input-pressed)";
118
+ dark: "var(--ds-background-input-pressed)";
119
+ };
120
+ subtle: {
121
+ light: "var(--ds-background-input-pressed)";
122
+ dark: "var(--ds-background-input-pressed)";
123
+ };
124
+ none: {
125
+ light: string;
126
+ dark: string;
127
+ };
128
+ };
129
+ backgroundColorHover: {
130
+ standard: {
131
+ light: "var(--ds-background-input-hovered)";
132
+ dark: "var(--ds-background-input-hovered)";
133
+ };
134
+ subtle: {
135
+ light: "var(--ds-background-input-hovered)";
136
+ dark: "var(--ds-background-input-hovered)";
137
+ };
138
+ none: {
139
+ light: string;
140
+ dark: string;
141
+ };
142
+ };
143
+ borderColor: {
144
+ standard: {
145
+ light: "var(--ds-border-input)";
146
+ dark: "var(--ds-border-input)";
147
+ };
148
+ subtle: {
149
+ light: string;
150
+ dark: string;
151
+ };
152
+ none: {
153
+ light: string;
154
+ dark: string;
155
+ };
156
+ };
157
+ borderColorFocus: {
158
+ standard: {
159
+ light: "var(--ds-border-focused)";
160
+ dark: "var(--ds-border-focused)";
161
+ };
162
+ subtle: {
163
+ light: "var(--ds-border-focused)";
164
+ dark: "var(--ds-border-focused)";
165
+ };
166
+ none: {
167
+ light: string;
168
+ dark: string;
169
+ };
170
+ };
171
+ borderColorHover: {
172
+ standard: {
173
+ light: "var(--ds-border-input)";
174
+ dark: "var(--ds-border-input)";
175
+ };
176
+ subtle: {
177
+ light: "var(--ds-border-input)";
178
+ dark: "var(--ds-border-input)";
179
+ };
180
+ none: {
181
+ light: string;
182
+ dark: string;
183
+ };
184
+ };
185
+ placeholderTextColor: {
186
+ light: "var(--ds-text-subtlest)";
187
+ dark: "var(--ds-text-subtlest)";
188
+ };
189
+ textColor: {
190
+ light: "var(--ds-text)";
191
+ dark: "var(--ds-text)";
192
+ };
193
+ invalidRules: {
194
+ light: {
195
+ backgroundColor: "var(--ds-background-input)";
196
+ backgroundColorHover: "var(--ds-background-input-hovered)";
197
+ backgroundColorFocus: "var(--ds-background-input-pressed)";
198
+ borderColor: "var(--ds-border-danger)";
199
+ borderColorFocus: "var(--ds-border-focused)";
200
+ };
201
+ dark: {
202
+ backgroundColor: "var(--ds-background-input)";
203
+ backgroundColorHover: "var(--ds-background-input-hovered)";
204
+ backgroundColorFocus: "var(--ds-background-input-pressed)";
205
+ borderColor: "var(--ds-border-danger)";
206
+ borderColorFocus: "var(--ds-border-focused)";
207
+ };
208
+ };
209
+ disabledRules: {
210
+ light: {
211
+ backgroundColor: "var(--ds-background-disabled)";
212
+ backgroundColorHover: "var(--ds-background-disabled)";
213
+ borderColor: "var(--ds-background-disabled)";
214
+ textColor: "var(--ds-text-disabled)";
215
+ };
216
+ dark: {
217
+ backgroundColor: "var(--ds-background-disabled)";
218
+ backgroundColorHover: "var(--ds-background-disabled)";
219
+ borderColor: "var(--ds-background-disabled)";
220
+ textColor: "var(--ds-text-disabled)";
221
+ };
222
+ };
223
+ };
package/dist/types-ts4.0/text-field.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ /** @jsx jsx */
2
+ import React from 'react';
3
+ import { TextfieldProps } from './types';
4
+ declare const _default: React.NamedExoticComponent<TextfieldProps & React.RefAttributes<unknown>>;
5
+ /**
6
+ * __Textfield__
7
+ *
8
+ * A text field is an input that allows a user to write or edit text.
9
+ *
10
+ * - [Examples](https://atlassian.design/components/textfield/examples)
11
+ * - [Code](https://atlassian.design/components/textfield/code)
12
+ * - [Usage](https://atlassian.design/components/textfield/usage)
13
+ */
14
+ export default _default;
package/dist/types-ts4.0/types.d.ts ADDED
@@ -0,0 +1,71 @@
1
+ import React, { AllHTMLAttributes, FormEventHandler } from 'react';
2
+ export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
3
+ /**
4
+ * Affects the visual style of the text field.
5
+ */
6
+ appearance?: 'standard' | 'none' | 'subtle';
7
+ /**
8
+ * Applies compact styling, making the field smaller.
9
+ */
10
+ isCompact?: boolean;
11
+ /**
12
+ * Sets the field as to appear disabled,
13
+ * users will not be able to interact with the text field.
14
+ */
15
+ isDisabled?: boolean;
16
+ /**
17
+ * Changes the text field to have a border indicating that its value is invalid.
18
+ */
19
+ isInvalid?: boolean;
20
+ /**
21
+ * Sets content text value to appear monospaced.
22
+ */
23
+ isMonospaced?: boolean;
24
+ /**
25
+ * If true, prevents the value of the input from being edited.
26
+ */
27
+ isReadOnly?: boolean;
28
+ /**
29
+ * Set required for form that the field is part of.
30
+ */
31
+ isRequired?: boolean;
32
+ /**
33
+ * Element after input in text field.
34
+ */
35
+ elemAfterInput?: React.ReactNode;
36
+ /**
37
+ * Element before input in text field.
38
+ */
39
+ elemBeforeInput?: React.ReactNode;
40
+ /**
41
+ * Sets maximum width of input.
42
+ */
43
+ width?: string | number;
44
+ /**
45
+ * Handler called when the mouse down event is triggered on the input element.
46
+ */
47
+ onMouseDown?: React.MouseEventHandler<HTMLElement>;
48
+ /**
49
+ * A `testId` prop is provided for specified elements, which is a unique
50
+ * string that appears as a data attribute `data-testid` in the rendered code,
51
+ * serving as a hook for automated tests.
52
+ */
53
+ testId?: string;
54
+ /**
55
+ * Name of the input element.
56
+ */
57
+ name?: string;
58
+ /**
59
+ * Class name to apply to the input element.
60
+ */
61
+ className?: string;
62
+ /**
63
+ * Placeholder text to display in the text field whenever it is empty.
64
+ */
65
+ placeholder?: string;
66
+ /**
67
+ * Handler called when the inputs value changes.
68
+ */
69
+ onChange?: FormEventHandler<HTMLInputElement>;
70
+ }
71
+ export declare type Appearance = 'subtle' | 'standard' | 'none';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.2.0",
3
+ "version": "5.2.2",
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/"
@@ -12,6 +12,13 @@
12
12
  "module": "dist/esm/index.js",
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
+ "typesVersions": {
16
+ ">=4.0 <4.5": {
17
+ "*": [
18
+ "dist/types-ts4.0/*"
19
+ ]
20
+ }
21
+ },
15
22
  "sideEffects": false,
16
23
  "atlaskit:src": "src/index.tsx",
17
24
  "atlassian": {
@@ -48,12 +55,12 @@
48
55
  "@atlaskit/visual-regression": "*",
49
56
  "@atlaskit/webdriver-runner": "*",
50
57
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
51
- "@testing-library/dom": "^7.7.3",
52
- "@testing-library/react": "^8.0.1",
58
+ "@testing-library/dom": "^8.17.1",
59
+ "@testing-library/react": "^12.1.5",
53
60
  "jscodeshift": "^0.13.0",
54
61
  "react-dom": "^16.8.0",
55
62
  "storybook-addon-performance": "^0.16.0",
56
- "typescript": "4.3.5",
63
+ "typescript": "4.5.5",
57
64
  "wait-for-expect": "^1.2.0"
58
65
  },
59
66
  "keywords": [