@spark-web/field 5.0.0 → 5.1.1
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,27 @@
|
|
|
1
1
|
# @spark-web/field
|
|
2
2
|
|
|
3
|
+
## 5.1.1
|
|
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/theme@5.10.6
|
|
15
|
+
|
|
16
|
+
## 5.1.0
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- [#600](https://github.com/brighte-labs/spark-web/pull/600)
|
|
21
|
+
[`8e0bb68`](https://github.com/brighte-labs/spark-web/commit/8e0bb683181ee4f56f9fdcf378e48d9adae9475e)
|
|
22
|
+
Thanks [@chrischua-brighte](https://github.com/chrischua-brighte)! - add
|
|
23
|
+
readonly and overflowstrategy
|
|
24
|
+
|
|
3
25
|
## 5.0.0
|
|
4
26
|
|
|
5
27
|
### Major Changes
|
|
@@ -30,6 +30,8 @@ export declare type FieldProps = {
|
|
|
30
30
|
secondaryLabel?: string;
|
|
31
31
|
/** Provide a tone to influence elements of the field, and its input. */
|
|
32
32
|
tone?: Tone;
|
|
33
|
+
/** Sets input to readonly, which is focusable. */
|
|
34
|
+
readOnly?: boolean;
|
|
33
35
|
};
|
|
34
36
|
/**
|
|
35
37
|
* Using a [context](https://reactjs.org/docs/context.html), the field
|
|
@@ -41,7 +41,9 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
41
41
|
message = _ref.message,
|
|
42
42
|
secondaryLabel = _ref.secondaryLabel,
|
|
43
43
|
_ref$tone = _ref.tone,
|
|
44
|
-
tone = _ref$tone === void 0 ? 'neutral' : _ref$tone
|
|
44
|
+
tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
|
|
45
|
+
_ref$readOnly = _ref.readOnly,
|
|
46
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
|
|
45
47
|
var _useFieldIds = useFieldIds(idProp),
|
|
46
48
|
descriptionId = _useFieldIds.descriptionId,
|
|
47
49
|
inputId = _useFieldIds.inputId,
|
|
@@ -52,13 +54,14 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
52
54
|
var fieldContext = react.useMemo(function () {
|
|
53
55
|
return [{
|
|
54
56
|
disabled: disabled,
|
|
55
|
-
invalid: invalid
|
|
57
|
+
invalid: invalid,
|
|
58
|
+
readOnly: readOnly
|
|
56
59
|
}, {
|
|
57
60
|
'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
|
|
58
61
|
'aria-invalid': invalid || undefined,
|
|
59
62
|
id: inputId
|
|
60
63
|
}];
|
|
61
|
-
}, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
|
|
64
|
+
}, [description, descriptionId, disabled, inputId, invalid, message, messageId, readOnly]);
|
|
62
65
|
|
|
63
66
|
// label prep
|
|
64
67
|
var hiddenLabel = jsxRuntime.jsxs(a11y.VisuallyHidden, {
|
|
@@ -72,11 +75,11 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
72
75
|
as: "label",
|
|
73
76
|
htmlFor: inputId,
|
|
74
77
|
children: jsxRuntime.jsxs(text.Text, {
|
|
75
|
-
tone: disabled ? '
|
|
78
|
+
tone: disabled || readOnly ? 'field' : 'neutral',
|
|
76
79
|
weight: "semibold",
|
|
77
80
|
children: [label, ' ', secondaryLabel && jsxRuntime.jsx(text.Text, {
|
|
78
81
|
inline: true,
|
|
79
|
-
tone: disabled ? '
|
|
82
|
+
tone: disabled || readOnly ? 'field' : 'muted',
|
|
80
83
|
weight: "regular",
|
|
81
84
|
children: secondaryLabel
|
|
82
85
|
})]
|
|
@@ -41,7 +41,9 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
41
41
|
message = _ref.message,
|
|
42
42
|
secondaryLabel = _ref.secondaryLabel,
|
|
43
43
|
_ref$tone = _ref.tone,
|
|
44
|
-
tone = _ref$tone === void 0 ? 'neutral' : _ref$tone
|
|
44
|
+
tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
|
|
45
|
+
_ref$readOnly = _ref.readOnly,
|
|
46
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
|
|
45
47
|
var _useFieldIds = useFieldIds(idProp),
|
|
46
48
|
descriptionId = _useFieldIds.descriptionId,
|
|
47
49
|
inputId = _useFieldIds.inputId,
|
|
@@ -52,13 +54,14 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
52
54
|
var fieldContext = react.useMemo(function () {
|
|
53
55
|
return [{
|
|
54
56
|
disabled: disabled,
|
|
55
|
-
invalid: invalid
|
|
57
|
+
invalid: invalid,
|
|
58
|
+
readOnly: readOnly
|
|
56
59
|
}, {
|
|
57
60
|
'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
|
|
58
61
|
'aria-invalid': invalid || undefined,
|
|
59
62
|
id: inputId
|
|
60
63
|
}];
|
|
61
|
-
}, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
|
|
64
|
+
}, [description, descriptionId, disabled, inputId, invalid, message, messageId, readOnly]);
|
|
62
65
|
|
|
63
66
|
// label prep
|
|
64
67
|
var hiddenLabel = jsxRuntime.jsxs(a11y.VisuallyHidden, {
|
|
@@ -72,11 +75,11 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
72
75
|
as: "label",
|
|
73
76
|
htmlFor: inputId,
|
|
74
77
|
children: jsxRuntime.jsxs(text.Text, {
|
|
75
|
-
tone: disabled ? '
|
|
78
|
+
tone: disabled || readOnly ? 'field' : 'neutral',
|
|
76
79
|
weight: "semibold",
|
|
77
80
|
children: [label, ' ', secondaryLabel && jsxRuntime.jsx(text.Text, {
|
|
78
81
|
inline: true,
|
|
79
|
-
tone: disabled ? '
|
|
82
|
+
tone: disabled || readOnly ? 'field' : 'muted',
|
|
80
83
|
weight: "regular",
|
|
81
84
|
children: secondaryLabel
|
|
82
85
|
})]
|
|
@@ -37,7 +37,9 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
37
37
|
message = _ref.message,
|
|
38
38
|
secondaryLabel = _ref.secondaryLabel,
|
|
39
39
|
_ref$tone = _ref.tone,
|
|
40
|
-
tone = _ref$tone === void 0 ? 'neutral' : _ref$tone
|
|
40
|
+
tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
|
|
41
|
+
_ref$readOnly = _ref.readOnly,
|
|
42
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
|
|
41
43
|
var _useFieldIds = useFieldIds(idProp),
|
|
42
44
|
descriptionId = _useFieldIds.descriptionId,
|
|
43
45
|
inputId = _useFieldIds.inputId,
|
|
@@ -48,13 +50,14 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
48
50
|
var fieldContext = useMemo(function () {
|
|
49
51
|
return [{
|
|
50
52
|
disabled: disabled,
|
|
51
|
-
invalid: invalid
|
|
53
|
+
invalid: invalid,
|
|
54
|
+
readOnly: readOnly
|
|
52
55
|
}, {
|
|
53
56
|
'aria-describedby': mergeIds(message && messageId, description && descriptionId),
|
|
54
57
|
'aria-invalid': invalid || undefined,
|
|
55
58
|
id: inputId
|
|
56
59
|
}];
|
|
57
|
-
}, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
|
|
60
|
+
}, [description, descriptionId, disabled, inputId, invalid, message, messageId, readOnly]);
|
|
58
61
|
|
|
59
62
|
// label prep
|
|
60
63
|
var hiddenLabel = jsxs(VisuallyHidden, {
|
|
@@ -68,11 +71,11 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
68
71
|
as: "label",
|
|
69
72
|
htmlFor: inputId,
|
|
70
73
|
children: jsxs(Text, {
|
|
71
|
-
tone: disabled ? '
|
|
74
|
+
tone: disabled || readOnly ? 'field' : 'neutral',
|
|
72
75
|
weight: "semibold",
|
|
73
76
|
children: [label, ' ', secondaryLabel && jsx(Text, {
|
|
74
77
|
inline: true,
|
|
75
|
-
tone: disabled ? '
|
|
78
|
+
tone: disabled || readOnly ? 'field' : 'muted',
|
|
76
79
|
weight: "regular",
|
|
77
80
|
children: secondaryLabel
|
|
78
81
|
})]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/field",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.1.1",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"@spark-web/icon": "^5.0.0",
|
|
23
23
|
"@spark-web/stack": "^5.0.0",
|
|
24
24
|
"@spark-web/text": "^5.0.0",
|
|
25
|
-
"@spark-web/theme": "^5.
|
|
25
|
+
"@spark-web/theme": "^5.10.6",
|
|
26
26
|
"@spark-web/utils": "^5.0.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|