@spark-web/text-input 5.1.0 → 5.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
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# @spark-web/text-input
|
|
2
2
|
|
|
3
|
+
## 5.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#627](https://github.com/brighte-labs/spark-web/pull/627)
|
|
8
|
+
[`80504dc`](https://github.com/brighte-labs/spark-web/commit/80504dc3f57aa1f7ed8235c8fb4ca61587d17977)
|
|
9
|
+
Thanks [@mkt-brighte](https://github.com/mkt-brighte)! - Update readonly text
|
|
10
|
+
color to meet min contrast requirement
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
[[`80504dc`](https://github.com/brighte-labs/spark-web/commit/80504dc3f57aa1f7ed8235c8fb4ca61587d17977)]:
|
|
14
|
+
- @spark-web/field@5.1.1
|
|
15
|
+
- @spark-web/theme@5.10.6
|
|
16
|
+
|
|
17
|
+
## 5.1.1
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [#621](https://github.com/brighte-labs/spark-web/pull/621)
|
|
22
|
+
[`bc2f972`](https://github.com/brighte-labs/spark-web/commit/bc2f97209f7207bb993aee971e9407d6fdd83751)
|
|
23
|
+
Thanks [@mkt-brighte](https://github.com/mkt-brighte)! - Update form field
|
|
24
|
+
border to meet minimum contrast requirement
|
|
25
|
+
|
|
26
|
+
- Updated dependencies
|
|
27
|
+
[[`bc2f972`](https://github.com/brighte-labs/spark-web/commit/bc2f97209f7207bb993aee971e9407d6fdd83751)]:
|
|
28
|
+
- @spark-web/theme@5.10.5
|
|
29
|
+
|
|
3
30
|
## 5.1.0
|
|
4
31
|
|
|
5
32
|
### Minor Changes
|
|
@@ -45,7 +45,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<{
|
|
|
45
45
|
*/
|
|
46
46
|
children?: AdornmentsAsChildren;
|
|
47
47
|
/** Manage how text behaves with regard to overflow. */
|
|
48
|
-
overflowStrategy?: "
|
|
48
|
+
overflowStrategy?: "nowrap" | "truncate" | "breakword" | undefined;
|
|
49
49
|
} & NativeInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
50
50
|
export declare type UseInputStylesProps = FieldState & {
|
|
51
51
|
startAdornment?: boolean;
|
|
@@ -62,8 +62,8 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
|
|
|
62
62
|
readonly flex: 1;
|
|
63
63
|
readonly position: "relative";
|
|
64
64
|
readonly height: "medium";
|
|
65
|
-
readonly paddingLeft: "
|
|
66
|
-
readonly paddingRight: "
|
|
65
|
+
readonly paddingLeft: "medium" | "none";
|
|
66
|
+
readonly paddingRight: "medium" | "none";
|
|
67
67
|
readonly width: "full";
|
|
68
68
|
}, {
|
|
69
69
|
readonly ':enabled': {
|
|
@@ -114,11 +114,12 @@ var InputContainer = function InputContainer(_ref) {
|
|
|
114
114
|
_useFieldContext2 = _slicedToArray(_useFieldContext, 1),
|
|
115
115
|
_useFieldContext2$ = _useFieldContext2[0],
|
|
116
116
|
disabled = _useFieldContext2$.disabled,
|
|
117
|
-
invalid = _useFieldContext2$.invalid
|
|
117
|
+
invalid = _useFieldContext2$.invalid,
|
|
118
|
+
readOnly = _useFieldContext2$.readOnly;
|
|
118
119
|
return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
|
|
119
120
|
borderRadius: "small",
|
|
120
121
|
position: "relative",
|
|
121
|
-
background: disabled ? 'inputDisabled' : 'input'
|
|
122
|
+
background: disabled || readOnly ? 'inputDisabled' : 'input'
|
|
122
123
|
}, boxProps), {}, {
|
|
123
124
|
children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
|
|
124
125
|
invalid: invalid
|
|
@@ -127,6 +128,7 @@ var InputContainer = function InputContainer(_ref) {
|
|
|
127
128
|
};
|
|
128
129
|
var FocusIndicator = function FocusIndicator(_ref2) {
|
|
129
130
|
var invalid = _ref2.invalid;
|
|
131
|
+
var theme$1 = theme.useTheme();
|
|
130
132
|
return jsxRuntime.jsx(box.Box, {
|
|
131
133
|
"aria-hidden": "true",
|
|
132
134
|
as: "span",
|
|
@@ -135,7 +137,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
|
|
|
135
137
|
}
|
|
136
138
|
// Styles
|
|
137
139
|
,
|
|
138
|
-
border: invalid ? 'critical' :
|
|
140
|
+
border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
|
|
139
141
|
borderRadius: "small",
|
|
140
142
|
position: "absolute",
|
|
141
143
|
bottom: 0,
|
|
@@ -243,7 +245,7 @@ var useInputStyles = function useInputStyles(_ref2) {
|
|
|
243
245
|
});
|
|
244
246
|
var textStyles = text.useText({
|
|
245
247
|
baseline: false,
|
|
246
|
-
tone: disabled || readOnly ? '
|
|
248
|
+
tone: disabled || readOnly ? 'field' : 'neutral',
|
|
247
249
|
size: 'standard',
|
|
248
250
|
weight: 'regular'
|
|
249
251
|
});
|
|
@@ -114,11 +114,12 @@ var InputContainer = function InputContainer(_ref) {
|
|
|
114
114
|
_useFieldContext2 = _slicedToArray(_useFieldContext, 1),
|
|
115
115
|
_useFieldContext2$ = _useFieldContext2[0],
|
|
116
116
|
disabled = _useFieldContext2$.disabled,
|
|
117
|
-
invalid = _useFieldContext2$.invalid
|
|
117
|
+
invalid = _useFieldContext2$.invalid,
|
|
118
|
+
readOnly = _useFieldContext2$.readOnly;
|
|
118
119
|
return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
|
|
119
120
|
borderRadius: "small",
|
|
120
121
|
position: "relative",
|
|
121
|
-
background: disabled ? 'inputDisabled' : 'input'
|
|
122
|
+
background: disabled || readOnly ? 'inputDisabled' : 'input'
|
|
122
123
|
}, boxProps), {}, {
|
|
123
124
|
children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
|
|
124
125
|
invalid: invalid
|
|
@@ -127,6 +128,7 @@ var InputContainer = function InputContainer(_ref) {
|
|
|
127
128
|
};
|
|
128
129
|
var FocusIndicator = function FocusIndicator(_ref2) {
|
|
129
130
|
var invalid = _ref2.invalid;
|
|
131
|
+
var theme$1 = theme.useTheme();
|
|
130
132
|
return jsxRuntime.jsx(box.Box, {
|
|
131
133
|
"aria-hidden": "true",
|
|
132
134
|
as: "span",
|
|
@@ -135,7 +137,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
|
|
|
135
137
|
}
|
|
136
138
|
// Styles
|
|
137
139
|
,
|
|
138
|
-
border: invalid ? 'critical' :
|
|
140
|
+
border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
|
|
139
141
|
borderRadius: "small",
|
|
140
142
|
position: "absolute",
|
|
141
143
|
bottom: 0,
|
|
@@ -243,7 +245,7 @@ var useInputStyles = function useInputStyles(_ref2) {
|
|
|
243
245
|
});
|
|
244
246
|
var textStyles = text.useText({
|
|
245
247
|
baseline: false,
|
|
246
|
-
tone: disabled || readOnly ? '
|
|
248
|
+
tone: disabled || readOnly ? 'field' : 'neutral',
|
|
247
249
|
size: 'standard',
|
|
248
250
|
weight: 'regular'
|
|
249
251
|
});
|
|
@@ -110,11 +110,12 @@ var InputContainer = function InputContainer(_ref) {
|
|
|
110
110
|
_useFieldContext2 = _slicedToArray(_useFieldContext, 1),
|
|
111
111
|
_useFieldContext2$ = _useFieldContext2[0],
|
|
112
112
|
disabled = _useFieldContext2$.disabled,
|
|
113
|
-
invalid = _useFieldContext2$.invalid
|
|
113
|
+
invalid = _useFieldContext2$.invalid,
|
|
114
|
+
readOnly = _useFieldContext2$.readOnly;
|
|
114
115
|
return jsxs(Box, _objectSpread(_objectSpread({
|
|
115
116
|
borderRadius: "small",
|
|
116
117
|
position: "relative",
|
|
117
|
-
background: disabled ? 'inputDisabled' : 'input'
|
|
118
|
+
background: disabled || readOnly ? 'inputDisabled' : 'input'
|
|
118
119
|
}, boxProps), {}, {
|
|
119
120
|
children: [startAdornment, children, jsx(FocusIndicator, {
|
|
120
121
|
invalid: invalid
|
|
@@ -123,6 +124,7 @@ var InputContainer = function InputContainer(_ref) {
|
|
|
123
124
|
};
|
|
124
125
|
var FocusIndicator = function FocusIndicator(_ref2) {
|
|
125
126
|
var invalid = _ref2.invalid;
|
|
127
|
+
var theme = useTheme();
|
|
126
128
|
return jsx(Box, {
|
|
127
129
|
"aria-hidden": "true",
|
|
128
130
|
as: "span",
|
|
@@ -131,7 +133,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
|
|
|
131
133
|
}
|
|
132
134
|
// Styles
|
|
133
135
|
,
|
|
134
|
-
border: invalid ? 'critical' :
|
|
136
|
+
border: invalid ? 'critical' : theme.components.textInput.borderColor,
|
|
135
137
|
borderRadius: "small",
|
|
136
138
|
position: "absolute",
|
|
137
139
|
bottom: 0,
|
|
@@ -239,7 +241,7 @@ var useInputStyles = function useInputStyles(_ref2) {
|
|
|
239
241
|
});
|
|
240
242
|
var textStyles = useText({
|
|
241
243
|
baseline: false,
|
|
242
|
-
tone: disabled || readOnly ? '
|
|
244
|
+
tone: disabled || readOnly ? 'field' : 'neutral',
|
|
243
245
|
size: 'standard',
|
|
244
246
|
weight: 'regular'
|
|
245
247
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/text-input",
|
|
3
|
-
"version": "5.1.
|
|
3
|
+
"version": "5.1.2",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -20,16 +20,16 @@
|
|
|
20
20
|
"@spark-web/a11y": "^5.0.0",
|
|
21
21
|
"@spark-web/box": "^5.0.0",
|
|
22
22
|
"@spark-web/text": "^5.0.0",
|
|
23
|
-
"@spark-web/theme": "^5.
|
|
23
|
+
"@spark-web/theme": "^5.10.6",
|
|
24
24
|
"@spark-web/utils": "^5.0.0"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@spark-web/field": "^5.1.
|
|
27
|
+
"@spark-web/field": "^5.1.1",
|
|
28
28
|
"@types/react": "^18.2.0",
|
|
29
29
|
"react": "^18.2.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
|
-
"@spark-web/field": "^5.1.
|
|
32
|
+
"@spark-web/field": "^5.1.1",
|
|
33
33
|
"react": ">=17.0.2"
|
|
34
34
|
},
|
|
35
35
|
"engines": {
|