@atlaskit/textfield 6.1.0 → 6.1.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.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/styles.js +5 -5
- package/dist/cjs/text-field.js +1 -1
- package/dist/es2019/styles.js +5 -5
- package/dist/es2019/text-field.js +1 -1
- package/dist/esm/styles.js +5 -5
- package/dist/esm/text-field.js +1 -1
- package/dist/types/styles.d.ts +4 -4
- package/dist/types-ts4.5/styles.d.ts +4 -4
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/textfield
|
|
2
2
|
|
|
3
|
+
## 6.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
|
|
8
|
+
|
|
9
|
+
## 6.1.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#81644](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81644) [`8ab7a816dca7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8ab7a816dca7) - Revert input border change from the previous version
|
|
14
|
+
|
|
3
15
|
## 6.1.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/dist/cjs/styles.js
CHANGED
|
@@ -56,7 +56,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
|
|
|
56
56
|
'&:focus-within:not([data-disabled])': {
|
|
57
57
|
backgroundColor: backgroundColorFocus[appearance],
|
|
58
58
|
borderColor: borderColorFocus[appearance],
|
|
59
|
-
boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
|
|
59
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
|
|
60
60
|
},
|
|
61
61
|
'&[data-disabled]': _objectSpread({
|
|
62
62
|
color: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
|
|
@@ -67,12 +67,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
|
|
|
67
67
|
}),
|
|
68
68
|
'&[data-invalid], &[data-invalid]:hover': {
|
|
69
69
|
borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
|
|
70
|
-
boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")"))
|
|
70
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")")) : undefined
|
|
71
71
|
},
|
|
72
72
|
'&[data-invalid]:focus-within': {
|
|
73
73
|
backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
|
|
74
74
|
borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
|
|
75
|
-
boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))
|
|
75
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")")) : undefined
|
|
76
76
|
},
|
|
77
77
|
'@media screen and (-ms-high-contrast: active)': {
|
|
78
78
|
'&[data-invalid]:focus-within': {
|
|
@@ -102,8 +102,8 @@ var containerStyles = exports.containerStyles = function containerStyles(appeara
|
|
|
102
102
|
alignItems: 'center'
|
|
103
103
|
}, getContainerTextBgAndBorderColor(appearance)), {}, {
|
|
104
104
|
borderRadius: 3,
|
|
105
|
-
borderWidth: "var(--ds-border-width, 1px)"
|
|
106
|
-
}, appearance !== 'none' ? {
|
|
105
|
+
borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2
|
|
106
|
+
}, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') && appearance !== 'none' ? {
|
|
107
107
|
padding: "var(--ds-border-width, 1px)".concat(" 0")
|
|
108
108
|
} : {}), {}, {
|
|
109
109
|
borderStyle: appearance === 'none' ? 'none' : 'solid',
|
package/dist/cjs/text-field.js
CHANGED
|
@@ -23,7 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
23
23
|
var analyticsParams = {
|
|
24
24
|
componentName: 'textField',
|
|
25
25
|
packageName: "@atlaskit/textfield",
|
|
26
|
-
packageVersion: "6.1.
|
|
26
|
+
packageVersion: "6.1.2"
|
|
27
27
|
};
|
|
28
28
|
var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
29
29
|
var _props$appearance = props.appearance,
|
package/dist/es2019/styles.js
CHANGED
|
@@ -47,7 +47,7 @@ const getContainerTextBgAndBorderColor = appearance => ({
|
|
|
47
47
|
'&:focus-within:not([data-disabled])': {
|
|
48
48
|
backgroundColor: backgroundColorFocus[appearance],
|
|
49
49
|
borderColor: borderColorFocus[appearance],
|
|
50
|
-
boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}`
|
|
50
|
+
boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}` : undefined
|
|
51
51
|
},
|
|
52
52
|
'&[data-disabled]': {
|
|
53
53
|
color: `var(--ds-text-disabled, ${N70})`,
|
|
@@ -61,12 +61,12 @@ const getContainerTextBgAndBorderColor = appearance => ({
|
|
|
61
61
|
},
|
|
62
62
|
'&[data-invalid], &[data-invalid]:hover': {
|
|
63
63
|
borderColor: `var(--ds-border-danger, ${R400})`,
|
|
64
|
-
boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}`
|
|
64
|
+
boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}` : undefined
|
|
65
65
|
},
|
|
66
66
|
'&[data-invalid]:focus-within': {
|
|
67
67
|
backgroundColor: `var(--ds-background-input-pressed, ${N0})`,
|
|
68
68
|
borderColor: `var(--ds-border-focused, ${B200})`,
|
|
69
|
-
boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}`
|
|
69
|
+
boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}` : undefined
|
|
70
70
|
},
|
|
71
71
|
'@media screen and (-ms-high-contrast: active)': {
|
|
72
72
|
'&[data-invalid]:focus-within': {
|
|
@@ -92,9 +92,9 @@ export const containerStyles = (appearance, width) => ({
|
|
|
92
92
|
alignItems: 'center',
|
|
93
93
|
...getContainerTextBgAndBorderColor(appearance),
|
|
94
94
|
borderRadius: 3,
|
|
95
|
-
borderWidth: "var(--ds-border-width, 1px)",
|
|
95
|
+
borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2,
|
|
96
96
|
// add 1px padding on both top and bottom to keep the same overall height after border reduced from 2px to 1px under feature flag
|
|
97
|
-
...(appearance !== 'none' ? {
|
|
97
|
+
...(getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && appearance !== 'none' ? {
|
|
98
98
|
padding: `${"var(--ds-border-width, 1px)"} 0`
|
|
99
99
|
} : {}),
|
|
100
100
|
borderStyle: appearance === 'none' ? 'none' : 'solid',
|
|
@@ -7,7 +7,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
|
|
|
7
7
|
const analyticsParams = {
|
|
8
8
|
componentName: 'textField',
|
|
9
9
|
packageName: "@atlaskit/textfield",
|
|
10
|
-
packageVersion: "6.1.
|
|
10
|
+
packageVersion: "6.1.2"
|
|
11
11
|
};
|
|
12
12
|
const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
|
|
13
13
|
const {
|
package/dist/esm/styles.js
CHANGED
|
@@ -51,7 +51,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
|
|
|
51
51
|
'&:focus-within:not([data-disabled])': {
|
|
52
52
|
backgroundColor: backgroundColorFocus[appearance],
|
|
53
53
|
borderColor: borderColorFocus[appearance],
|
|
54
|
-
boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
|
|
54
|
+
boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
|
|
55
55
|
},
|
|
56
56
|
'&[data-disabled]': _objectSpread({
|
|
57
57
|
color: "var(--ds-text-disabled, ".concat(N70, ")"),
|
|
@@ -62,12 +62,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
|
|
|
62
62
|
}),
|
|
63
63
|
'&[data-invalid], &[data-invalid]:hover': {
|
|
64
64
|
borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
|
|
65
|
-
boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))
|
|
65
|
+
boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")")) : undefined
|
|
66
66
|
},
|
|
67
67
|
'&[data-invalid]:focus-within': {
|
|
68
68
|
backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")"),
|
|
69
69
|
borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
|
|
70
|
-
boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")"))
|
|
70
|
+
boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")")) : undefined
|
|
71
71
|
},
|
|
72
72
|
'@media screen and (-ms-high-contrast: active)': {
|
|
73
73
|
'&[data-invalid]:focus-within': {
|
|
@@ -97,8 +97,8 @@ export var containerStyles = function containerStyles(appearance, width) {
|
|
|
97
97
|
alignItems: 'center'
|
|
98
98
|
}, getContainerTextBgAndBorderColor(appearance)), {}, {
|
|
99
99
|
borderRadius: 3,
|
|
100
|
-
borderWidth: "var(--ds-border-width, 1px)"
|
|
101
|
-
}, appearance !== 'none' ? {
|
|
100
|
+
borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2
|
|
101
|
+
}, getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && appearance !== 'none' ? {
|
|
102
102
|
padding: "var(--ds-border-width, 1px)".concat(" 0")
|
|
103
103
|
} : {}), {}, {
|
|
104
104
|
borderStyle: appearance === 'none' ? 'none' : 'solid',
|
package/dist/esm/text-field.js
CHANGED
|
@@ -13,7 +13,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
|
|
|
13
13
|
var analyticsParams = {
|
|
14
14
|
componentName: 'textField',
|
|
15
15
|
packageName: "@atlaskit/textfield",
|
|
16
|
-
packageVersion: "6.1.
|
|
16
|
+
packageVersion: "6.1.2"
|
|
17
17
|
};
|
|
18
18
|
var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
19
19
|
var _props$appearance = props.appearance,
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
|
|
|
14
14
|
readonly pointerEvents: "auto";
|
|
15
15
|
readonly padding?: string | undefined;
|
|
16
16
|
readonly borderRadius: 3;
|
|
17
|
-
readonly borderWidth: "var(--ds-border-width)";
|
|
17
|
+
readonly borderWidth: "var(--ds-border-width)" | 2;
|
|
18
18
|
readonly backgroundColor: string;
|
|
19
19
|
readonly borderColor: string;
|
|
20
20
|
readonly color: "var(--ds-text)";
|
|
@@ -26,7 +26,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
|
|
|
26
26
|
readonly '&:focus-within:not([data-disabled])': {
|
|
27
27
|
backgroundColor: string;
|
|
28
28
|
borderColor: string;
|
|
29
|
-
boxShadow: string;
|
|
29
|
+
boxShadow: string | undefined;
|
|
30
30
|
};
|
|
31
31
|
readonly '&[data-disabled]': {
|
|
32
32
|
backgroundColor?: "var(--ds-background-disabled)" | undefined;
|
|
@@ -36,12 +36,12 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
|
|
|
36
36
|
};
|
|
37
37
|
readonly '&[data-invalid], &[data-invalid]:hover': {
|
|
38
38
|
borderColor: "var(--ds-border-danger)";
|
|
39
|
-
boxShadow: string;
|
|
39
|
+
boxShadow: string | undefined;
|
|
40
40
|
};
|
|
41
41
|
readonly '&[data-invalid]:focus-within': {
|
|
42
42
|
backgroundColor: "var(--ds-background-input-pressed)";
|
|
43
43
|
borderColor: "var(--ds-border-focused)";
|
|
44
|
-
boxShadow: string;
|
|
44
|
+
boxShadow: string | undefined;
|
|
45
45
|
};
|
|
46
46
|
readonly '@media screen and (-ms-high-contrast: active)': {
|
|
47
47
|
'&[data-invalid]:focus-within': {
|
|
@@ -14,7 +14,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
|
|
|
14
14
|
readonly pointerEvents: "auto";
|
|
15
15
|
readonly padding?: string | undefined;
|
|
16
16
|
readonly borderRadius: 3;
|
|
17
|
-
readonly borderWidth: "var(--ds-border-width)";
|
|
17
|
+
readonly borderWidth: "var(--ds-border-width)" | 2;
|
|
18
18
|
readonly backgroundColor: string;
|
|
19
19
|
readonly borderColor: string;
|
|
20
20
|
readonly color: "var(--ds-text)";
|
|
@@ -26,7 +26,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
|
|
|
26
26
|
readonly '&:focus-within:not([data-disabled])': {
|
|
27
27
|
backgroundColor: string;
|
|
28
28
|
borderColor: string;
|
|
29
|
-
boxShadow: string;
|
|
29
|
+
boxShadow: string | undefined;
|
|
30
30
|
};
|
|
31
31
|
readonly '&[data-disabled]': {
|
|
32
32
|
backgroundColor?: "var(--ds-background-disabled)" | undefined;
|
|
@@ -36,12 +36,12 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
|
|
|
36
36
|
};
|
|
37
37
|
readonly '&[data-invalid], &[data-invalid]:hover': {
|
|
38
38
|
borderColor: "var(--ds-border-danger)";
|
|
39
|
-
boxShadow: string;
|
|
39
|
+
boxShadow: string | undefined;
|
|
40
40
|
};
|
|
41
41
|
readonly '&[data-invalid]:focus-within': {
|
|
42
42
|
backgroundColor: "var(--ds-background-input-pressed)";
|
|
43
43
|
borderColor: "var(--ds-border-focused)";
|
|
44
|
-
boxShadow: string;
|
|
44
|
+
boxShadow: string | undefined;
|
|
45
45
|
};
|
|
46
46
|
readonly '@media screen and (-ms-high-contrast: active)': {
|
|
47
47
|
'&[data-invalid]:focus-within': {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/textfield",
|
|
3
|
-
"version": "6.1.
|
|
3
|
+
"version": "6.1.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/"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@atlaskit/analytics-next": "^9.2.0",
|
|
30
30
|
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
31
31
|
"@atlaskit/theme": "^12.6.0",
|
|
32
|
-
"@atlaskit/tokens": "^1.
|
|
32
|
+
"@atlaskit/tokens": "^1.42.0",
|
|
33
33
|
"@babel/runtime": "^7.0.0",
|
|
34
34
|
"@emotion/react": "^11.7.1"
|
|
35
35
|
},
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"jscodeshift": "^0.13.0",
|
|
52
52
|
"react-dom": "^16.8.0",
|
|
53
53
|
"storybook-addon-performance": "^0.16.0",
|
|
54
|
-
"typescript": "~4.
|
|
54
|
+
"typescript": "~5.4.2",
|
|
55
55
|
"wait-for-expect": "^1.2.0"
|
|
56
56
|
},
|
|
57
57
|
"keywords": [
|
|
@@ -93,8 +93,11 @@
|
|
|
93
93
|
"platform-feature-flags": {
|
|
94
94
|
"platform.design-system-team.border-checkbox_nyoiu": {
|
|
95
95
|
"type": "boolean"
|
|
96
|
+
},
|
|
97
|
+
"platform.design-system-team.update-input-border-wdith_5abwv": {
|
|
98
|
+
"type": "boolean"
|
|
96
99
|
}
|
|
97
100
|
},
|
|
98
101
|
"homepage": "https://atlassian.design/components/textfield/",
|
|
99
102
|
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
100
|
-
}
|
|
103
|
+
}
|