@atlaskit/textfield 5.2.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/component-tokens.js +8 -8
  3. package/dist/cjs/styles.js +17 -9
  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 +19 -8
  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 +17 -9
  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 +24 -9
  16. package/dist/types/types.d.ts +1 -1
  17. package/dist/types-ts4.0/component-tokens.d.ts +6 -6
  18. package/dist/types-ts4.0/styles.d.ts +24 -9
  19. package/dist/types-ts4.0/types.d.ts +1 -1
  20. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 5.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`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.
8
+
9
+ ## 5.2.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`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.
14
+
3
15
  ## 5.2.1
4
16
 
5
17
  ### Patch 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 {
@@ -93,20 +98,22 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
93
98
  borderColor: borderColor[appearance][mode],
94
99
  color: componentTokens.textColor[mode],
95
100
  cursor: 'text',
96
- '&:hover': {
97
- backgroundColor: backgroundColorHover[appearance][mode]
101
+ '&:hover:not([data-disabled])': {
102
+ backgroundColor: backgroundColorHover[appearance][mode],
103
+ borderColor: borderColorHover[appearance][mode]
98
104
  },
99
- '&:focus-within': {
105
+ '&:focus-within:not([data-disabled])': {
100
106
  backgroundColor: backgroundColorFocus[appearance][mode],
101
107
  borderColor: borderColorFocus[appearance][mode]
102
108
  },
103
- '&[data-disabled]': {
104
- backgroundColor: disabledRules[mode].backgroundColor,
105
- borderColor: disabledRules[mode].borderColor,
109
+ '&[data-disabled]': _objectSpread({
106
110
  color: disabledRules[mode].textColor,
107
111
  cursor: 'not-allowed'
108
- },
109
- '&[data-invalid]': {
112
+ }, appearance === 'standard' && {
113
+ backgroundColor: disabledRules[mode].backgroundColor,
114
+ borderColor: disabledRules[mode].borderColor
115
+ }),
116
+ '&[data-invalid], &[data-invalid]:hover': {
110
117
  borderColor: invalidRules[mode].borderColor
111
118
  },
112
119
  '&[data-invalid]:focus-within': {
@@ -221,6 +228,7 @@ var textFieldColors = {
221
228
  backgroundColorHover: backgroundColorHover,
222
229
  borderColor: borderColor,
223
230
  borderColorFocus: borderColorFocus,
231
+ borderColorHover: borderColorHover,
224
232
  placeholderTextColor: componentTokens.placeholderTextColor,
225
233
  textColor: componentTokens.textColor,
226
234
  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.1"
43
+ packageVersion: "5.3.0"
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.1",
3
+ "version": "5.3.0",
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,26 +62,36 @@ 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],
68
73
  borderColor: borderColor[appearance][mode],
69
74
  color: componentTokens.textColor[mode],
70
75
  cursor: 'text',
71
- '&:hover': {
72
- backgroundColor: backgroundColorHover[appearance][mode]
76
+ '&:hover:not([data-disabled])': {
77
+ backgroundColor: backgroundColorHover[appearance][mode],
78
+ borderColor: borderColorHover[appearance][mode]
73
79
  },
74
- '&:focus-within': {
80
+ '&:focus-within:not([data-disabled])': {
75
81
  backgroundColor: backgroundColorFocus[appearance][mode],
76
82
  borderColor: borderColorFocus[appearance][mode]
77
83
  },
78
84
  '&[data-disabled]': {
79
- backgroundColor: disabledRules[mode].backgroundColor,
80
- borderColor: disabledRules[mode].borderColor,
81
85
  color: disabledRules[mode].textColor,
82
- cursor: 'not-allowed'
86
+ cursor: 'not-allowed',
87
+ // Disabled background and border styles should not be applied to components that
88
+ // have either no background or transparent background to begin with
89
+ ...(appearance === 'standard' && {
90
+ backgroundColor: disabledRules[mode].backgroundColor,
91
+ borderColor: disabledRules[mode].borderColor
92
+ })
83
93
  },
84
- '&[data-invalid]': {
94
+ '&[data-invalid], &[data-invalid]:hover': {
85
95
  borderColor: invalidRules[mode].borderColor
86
96
  },
87
97
  '&[data-invalid]:focus-within': {
@@ -184,6 +194,7 @@ export const textFieldColors = {
184
194
  backgroundColorHover,
185
195
  borderColor,
186
196
  borderColorFocus,
197
+ borderColorHover,
187
198
  placeholderTextColor: componentTokens.placeholderTextColor,
188
199
  textColor: componentTokens.textColor,
189
200
  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.1"
12
+ packageVersion: "5.3.0"
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.1",
3
+ "version": "5.3.0",
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 {
@@ -75,20 +80,22 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
75
80
  borderColor: borderColor[appearance][mode],
76
81
  color: componentTokens.textColor[mode],
77
82
  cursor: 'text',
78
- '&:hover': {
79
- backgroundColor: backgroundColorHover[appearance][mode]
83
+ '&:hover:not([data-disabled])': {
84
+ backgroundColor: backgroundColorHover[appearance][mode],
85
+ borderColor: borderColorHover[appearance][mode]
80
86
  },
81
- '&:focus-within': {
87
+ '&:focus-within:not([data-disabled])': {
82
88
  backgroundColor: backgroundColorFocus[appearance][mode],
83
89
  borderColor: borderColorFocus[appearance][mode]
84
90
  },
85
- '&[data-disabled]': {
86
- backgroundColor: disabledRules[mode].backgroundColor,
87
- borderColor: disabledRules[mode].borderColor,
91
+ '&[data-disabled]': _objectSpread({
88
92
  color: disabledRules[mode].textColor,
89
93
  cursor: 'not-allowed'
90
- },
91
- '&[data-invalid]': {
94
+ }, appearance === 'standard' && {
95
+ backgroundColor: disabledRules[mode].backgroundColor,
96
+ borderColor: disabledRules[mode].borderColor
97
+ }),
98
+ '&[data-invalid], &[data-invalid]:hover': {
92
99
  borderColor: invalidRules[mode].borderColor
93
100
  },
94
101
  '&[data-invalid]:focus-within': {
@@ -198,6 +205,7 @@ export var textFieldColors = {
198
205
  backgroundColorHover: backgroundColorHover,
199
206
  borderColor: borderColor,
200
207
  borderColorFocus: borderColorFocus,
208
+ borderColorHover: borderColorHover,
201
209
  placeholderTextColor: componentTokens.placeholderTextColor,
202
210
  textColor: componentTokens.textColor,
203
211
  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.1"
20
+ packageVersion: "5.3.0"
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.1",
3
+ "version": "5.3.0",
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
@@ -19,20 +19,21 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
19
19
  readonly borderColor: string;
20
20
  readonly color: "var(--ds-text)";
21
21
  readonly cursor: string;
22
- readonly '&:hover': {
22
+ readonly '&:hover:not([data-disabled])': {
23
23
  backgroundColor: string;
24
+ borderColor: string;
24
25
  };
25
- readonly '&:focus-within': {
26
+ readonly '&:focus-within:not([data-disabled])': {
26
27
  backgroundColor: string;
27
28
  borderColor: string;
28
29
  };
29
30
  readonly '&[data-disabled]': {
30
- backgroundColor: "var(--ds-background-disabled)";
31
- borderColor: "var(--ds-background-disabled)";
31
+ backgroundColor?: "var(--ds-background-disabled)" | undefined;
32
+ borderColor?: "var(--ds-background-disabled)" | undefined;
32
33
  color: "var(--ds-text-disabled)";
33
34
  cursor: string;
34
35
  };
35
- readonly '&[data-invalid]': {
36
+ readonly '&[data-invalid], &[data-invalid]:hover': {
36
37
  borderColor: "var(--ds-border-danger)";
37
38
  };
38
39
  readonly '&[data-invalid]:focus-within': {
@@ -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/types.d.ts CHANGED
@@ -3,7 +3,7 @@ export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
3
3
  /**
4
4
  * Affects the visual style of the text field.
5
5
  */
6
- appearance?: 'standard' | 'none' | 'subtle';
6
+ appearance?: Appearance;
7
7
  /**
8
8
  * Applies compact styling, making the field smaller.
9
9
  */
package/dist/types-ts4.0/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-ts4.0/styles.d.ts CHANGED
@@ -19,20 +19,21 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
19
19
  readonly borderColor: string;
20
20
  readonly color: "var(--ds-text)";
21
21
  readonly cursor: string;
22
- readonly '&:hover': {
22
+ readonly '&:hover:not([data-disabled])': {
23
23
  backgroundColor: string;
24
+ borderColor: string;
24
25
  };
25
- readonly '&:focus-within': {
26
+ readonly '&:focus-within:not([data-disabled])': {
26
27
  backgroundColor: string;
27
28
  borderColor: string;
28
29
  };
29
30
  readonly '&[data-disabled]': {
30
- backgroundColor: "var(--ds-background-disabled)";
31
- borderColor: "var(--ds-background-disabled)";
31
+ backgroundColor?: "var(--ds-background-disabled)" | undefined;
32
+ borderColor?: "var(--ds-background-disabled)" | undefined;
32
33
  color: "var(--ds-text-disabled)";
33
34
  cursor: string;
34
35
  };
35
- readonly '&[data-invalid]': {
36
+ readonly '&[data-invalid], &[data-invalid]:hover': {
36
37
  borderColor: "var(--ds-border-danger)";
37
38
  };
38
39
  readonly '&[data-invalid]:focus-within': {
@@ -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/types.d.ts CHANGED
@@ -3,7 +3,7 @@ export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
3
3
  /**
4
4
  * Affects the visual style of the text field.
5
5
  */
6
- appearance?: 'standard' | 'none' | 'subtle';
6
+ appearance?: Appearance;
7
7
  /**
8
8
  * Applies compact styling, making the field smaller.
9
9
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.2.1",
3
+ "version": "5.3.0",
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/"