@spark-web/field 5.0.0-rc.31 → 5.1.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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,60 @@
|
|
|
1
1
|
# @spark-web/field
|
|
2
2
|
|
|
3
|
+
## 5.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#600](https://github.com/brighte-labs/spark-web/pull/600)
|
|
8
|
+
[`8e0bb68`](https://github.com/brighte-labs/spark-web/commit/8e0bb683181ee4f56f9fdcf378e48d9adae9475e)
|
|
9
|
+
Thanks [@chrischua-brighte](https://github.com/chrischua-brighte)! - add
|
|
10
|
+
readonly and overflowstrategy
|
|
11
|
+
|
|
12
|
+
## 5.0.0
|
|
13
|
+
|
|
14
|
+
### Major Changes
|
|
15
|
+
|
|
16
|
+
- This release of spark-web standardises the version across all packages to be
|
|
17
|
+
**`v5`**, primarily signifying the switch from `@emotion/css` to
|
|
18
|
+
`@emotion/react` as one of the key dependencies of the entire library, in
|
|
19
|
+
order to support server-side rendering / SSR.
|
|
20
|
+
|
|
21
|
+
This release also introduces support for theming, to allow for more co-branded
|
|
22
|
+
experiences across our web applications. It also supports component-level
|
|
23
|
+
theming for `<Button />`, `<ButtonLink />`, and `<Checkbox />`, which provides
|
|
24
|
+
the capability to override the global theme available inside an application.
|
|
25
|
+
|
|
26
|
+
To use this in an application, you can wrap the affected areas with a
|
|
27
|
+
`ThemeProvider`:
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
<ThemeProvider theme="pantheon">
|
|
31
|
+
<Input type="text" />
|
|
32
|
+
<Button type="submit" />
|
|
33
|
+
</ThemeProvider>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Part of the theming capabilities includes a new theme for `spark-web` called
|
|
37
|
+
"pantheon", which should map with our co-branding efforts in the Pantheon
|
|
38
|
+
project. It currently includes a small set of colors and its corresponding
|
|
39
|
+
font family.
|
|
40
|
+
|
|
41
|
+
### Patch Changes
|
|
42
|
+
|
|
43
|
+
- [#532](https://github.com/brighte-labs/spark-web/pull/532)
|
|
44
|
+
[`631573c`](https://github.com/brighte-labs/spark-web/commit/631573cb72981d99b9afa4ad559123f44e47b2a9)
|
|
45
|
+
Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Fix
|
|
46
|
+
type-related issues
|
|
47
|
+
|
|
48
|
+
- Updated dependencies
|
|
49
|
+
[[`631573c`](https://github.com/brighte-labs/spark-web/commit/631573cb72981d99b9afa4ad559123f44e47b2a9)]:
|
|
50
|
+
- @spark-web/stack@5.0.0
|
|
51
|
+
- @spark-web/theme@5.0.0
|
|
52
|
+
- @spark-web/utils@5.0.0
|
|
53
|
+
- @spark-web/a11y@5.0.0
|
|
54
|
+
- @spark-web/icon@5.0.0
|
|
55
|
+
- @spark-web/text@5.0.0
|
|
56
|
+
- @spark-web/box@5.0.0
|
|
57
|
+
|
|
3
58
|
## 5.0.0-rc.31
|
|
4
59
|
|
|
5
60
|
### Patch 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 ? 'disabled' : 'neutral',
|
|
78
|
+
tone: disabled || readOnly ? 'disabled' : 'neutral',
|
|
76
79
|
weight: "semibold",
|
|
77
80
|
children: [label, ' ', secondaryLabel && jsxRuntime.jsx(text.Text, {
|
|
78
81
|
inline: true,
|
|
79
|
-
tone: disabled ? 'disabled' : 'muted',
|
|
82
|
+
tone: disabled || readOnly ? 'disabled' : '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 ? 'disabled' : 'neutral',
|
|
78
|
+
tone: disabled || readOnly ? 'disabled' : 'neutral',
|
|
76
79
|
weight: "semibold",
|
|
77
80
|
children: [label, ' ', secondaryLabel && jsxRuntime.jsx(text.Text, {
|
|
78
81
|
inline: true,
|
|
79
|
-
tone: disabled ? 'disabled' : 'muted',
|
|
82
|
+
tone: disabled || readOnly ? 'disabled' : '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 ? 'disabled' : 'neutral',
|
|
74
|
+
tone: disabled || readOnly ? 'disabled' : 'neutral',
|
|
72
75
|
weight: "semibold",
|
|
73
76
|
children: [label, ' ', secondaryLabel && jsx(Text, {
|
|
74
77
|
inline: true,
|
|
75
|
-
tone: disabled ? 'disabled' : 'muted',
|
|
78
|
+
tone: disabled || readOnly ? 'disabled' : '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.0",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -17,13 +17,13 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime": "^7.25.0",
|
|
19
19
|
"@emotion/react": "^11.14.0",
|
|
20
|
-
"@spark-web/a11y": "^5.0.0
|
|
21
|
-
"@spark-web/box": "^5.0.0
|
|
22
|
-
"@spark-web/icon": "^5.0.0
|
|
23
|
-
"@spark-web/stack": "^5.0.0
|
|
24
|
-
"@spark-web/text": "^5.0.0
|
|
25
|
-
"@spark-web/theme": "^5.0.0
|
|
26
|
-
"@spark-web/utils": "^5.0.0
|
|
20
|
+
"@spark-web/a11y": "^5.0.0",
|
|
21
|
+
"@spark-web/box": "^5.0.0",
|
|
22
|
+
"@spark-web/icon": "^5.0.0",
|
|
23
|
+
"@spark-web/stack": "^5.0.0",
|
|
24
|
+
"@spark-web/text": "^5.0.0",
|
|
25
|
+
"@spark-web/theme": "^5.0.0",
|
|
26
|
+
"@spark-web/utils": "^5.0.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "^18.2.0",
|