@atlaskit/textfield 5.2.1 → 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 (18) hide show
  1. package/CHANGELOG.md +6 -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 +6 -6
  17. package/dist/types-ts4.0/styles.d.ts +19 -4
  18. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
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
+
3
9
  ## 5.2.1
4
10
 
5
11
  ### 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 {
@@ -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.1"
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.1",
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.1"
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.1",
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.1"
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.1",
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 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
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "5.2.1",
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/"