@atlaskit/textfield 5.2.2 → 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 (15) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/styles.js +8 -7
  3. package/dist/cjs/text-field.js +1 -1
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/styles.js +10 -6
  6. package/dist/es2019/text-field.js +1 -1
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/styles.js +8 -7
  9. package/dist/esm/text-field.js +1 -1
  10. package/dist/esm/version.json +1 -1
  11. package/dist/types/styles.d.ts +5 -5
  12. package/dist/types/types.d.ts +1 -1
  13. package/dist/types-ts4.0/styles.d.ts +5 -5
  14. package/dist/types-ts4.0/types.d.ts +1 -1
  15. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
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
+
3
9
  ## 5.2.2
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/styles.js CHANGED
@@ -98,21 +98,22 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
98
98
  borderColor: borderColor[appearance][mode],
99
99
  color: componentTokens.textColor[mode],
100
100
  cursor: 'text',
101
- '&:hover': {
101
+ '&:hover:not([data-disabled])': {
102
102
  backgroundColor: backgroundColorHover[appearance][mode],
103
103
  borderColor: borderColorHover[appearance][mode]
104
104
  },
105
- '&:focus-within': {
105
+ '&:focus-within:not([data-disabled])': {
106
106
  backgroundColor: backgroundColorFocus[appearance][mode],
107
107
  borderColor: borderColorFocus[appearance][mode]
108
108
  },
109
- '&[data-disabled]': {
110
- backgroundColor: disabledRules[mode].backgroundColor,
111
- borderColor: disabledRules[mode].borderColor,
109
+ '&[data-disabled]': _objectSpread({
112
110
  color: disabledRules[mode].textColor,
113
111
  cursor: 'not-allowed'
114
- },
115
- '&[data-invalid]': {
112
+ }, appearance === 'standard' && {
113
+ backgroundColor: disabledRules[mode].backgroundColor,
114
+ borderColor: disabledRules[mode].borderColor
115
+ }),
116
+ '&[data-invalid], &[data-invalid]:hover': {
116
117
  borderColor: invalidRules[mode].borderColor
117
118
  },
118
119
  '&[data-invalid]:focus-within': {
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.2"
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.2",
3
+ "version": "5.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/styles.js CHANGED
@@ -73,21 +73,25 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
73
73
  borderColor: borderColor[appearance][mode],
74
74
  color: componentTokens.textColor[mode],
75
75
  cursor: 'text',
76
- '&:hover': {
76
+ '&:hover:not([data-disabled])': {
77
77
  backgroundColor: backgroundColorHover[appearance][mode],
78
78
  borderColor: borderColorHover[appearance][mode]
79
79
  },
80
- '&:focus-within': {
80
+ '&:focus-within:not([data-disabled])': {
81
81
  backgroundColor: backgroundColorFocus[appearance][mode],
82
82
  borderColor: borderColorFocus[appearance][mode]
83
83
  },
84
84
  '&[data-disabled]': {
85
- backgroundColor: disabledRules[mode].backgroundColor,
86
- borderColor: disabledRules[mode].borderColor,
87
85
  color: disabledRules[mode].textColor,
88
- 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
+ })
89
93
  },
90
- '&[data-invalid]': {
94
+ '&[data-invalid], &[data-invalid]:hover': {
91
95
  borderColor: invalidRules[mode].borderColor
92
96
  },
93
97
  '&[data-invalid]:focus-within': {
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.2"
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.2",
3
+ "version": "5.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/styles.js CHANGED
@@ -80,21 +80,22 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
80
80
  borderColor: borderColor[appearance][mode],
81
81
  color: componentTokens.textColor[mode],
82
82
  cursor: 'text',
83
- '&:hover': {
83
+ '&:hover:not([data-disabled])': {
84
84
  backgroundColor: backgroundColorHover[appearance][mode],
85
85
  borderColor: borderColorHover[appearance][mode]
86
86
  },
87
- '&:focus-within': {
87
+ '&:focus-within:not([data-disabled])': {
88
88
  backgroundColor: backgroundColorFocus[appearance][mode],
89
89
  borderColor: borderColorFocus[appearance][mode]
90
90
  },
91
- '&[data-disabled]': {
92
- backgroundColor: disabledRules[mode].backgroundColor,
93
- borderColor: disabledRules[mode].borderColor,
91
+ '&[data-disabled]': _objectSpread({
94
92
  color: disabledRules[mode].textColor,
95
93
  cursor: 'not-allowed'
96
- },
97
- '&[data-invalid]': {
94
+ }, appearance === 'standard' && {
95
+ backgroundColor: disabledRules[mode].backgroundColor,
96
+ borderColor: disabledRules[mode].borderColor
97
+ }),
98
+ '&[data-invalid], &[data-invalid]:hover': {
98
99
  borderColor: invalidRules[mode].borderColor
99
100
  },
100
101
  '&[data-invalid]:focus-within': {
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.2"
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.2",
3
+ "version": "5.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/styles.d.ts CHANGED
@@ -19,21 +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
24
  borderColor: string;
25
25
  };
26
- readonly '&:focus-within': {
26
+ readonly '&:focus-within:not([data-disabled])': {
27
27
  backgroundColor: string;
28
28
  borderColor: string;
29
29
  };
30
30
  readonly '&[data-disabled]': {
31
- backgroundColor: "var(--ds-background-disabled)";
32
- borderColor: "var(--ds-background-disabled)";
31
+ backgroundColor?: "var(--ds-background-disabled)" | undefined;
32
+ borderColor?: "var(--ds-background-disabled)" | undefined;
33
33
  color: "var(--ds-text-disabled)";
34
34
  cursor: string;
35
35
  };
36
- readonly '&[data-invalid]': {
36
+ readonly '&[data-invalid], &[data-invalid]:hover': {
37
37
  borderColor: "var(--ds-border-danger)";
38
38
  };
39
39
  readonly '&[data-invalid]:focus-within': {
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/styles.d.ts CHANGED
@@ -19,21 +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
24
  borderColor: string;
25
25
  };
26
- readonly '&:focus-within': {
26
+ readonly '&:focus-within:not([data-disabled])': {
27
27
  backgroundColor: string;
28
28
  borderColor: string;
29
29
  };
30
30
  readonly '&[data-disabled]': {
31
- backgroundColor: "var(--ds-background-disabled)";
32
- borderColor: "var(--ds-background-disabled)";
31
+ backgroundColor?: "var(--ds-background-disabled)" | undefined;
32
+ borderColor?: "var(--ds-background-disabled)" | undefined;
33
33
  color: "var(--ds-text-disabled)";
34
34
  cursor: string;
35
35
  };
36
- readonly '&[data-invalid]': {
36
+ readonly '&[data-invalid], &[data-invalid]:hover': {
37
37
  borderColor: "var(--ds-border-danger)";
38
38
  };
39
39
  readonly '&[data-invalid]:focus-within': {
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.2",
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/"