@spark-web/field 5.1.3 → 5.2.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,14 @@
1
1
  # @spark-web/field
2
2
 
3
+ ## 5.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#741](https://github.com/brighte-labs/spark-web/pull/741)
8
+ [`3a5ee14`](https://github.com/brighte-labs/spark-web/pull/741/changes/3a5ee146fef8fb3a3e46f6873099438bcffd59d2)
9
+ Thanks [@raivenlopez](https://github.com/raivenlopez)! - Allow both component
10
+ and text in Field description
11
+
3
12
  ## 5.1.3
4
13
 
5
14
  ### Patch Changes
@@ -16,7 +16,7 @@ export declare type FieldProps = {
16
16
  */
17
17
  disabled?: boolean;
18
18
  /** Provide additional information that will aid user input. */
19
- description?: string;
19
+ description?: string | ReactNode;
20
20
  /** Concisely label the field. */
21
21
  label: string;
22
22
  /**
@@ -57,7 +57,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
57
57
  invalid: invalid,
58
58
  readOnly: readOnly
59
59
  }, {
60
- 'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
60
+ 'aria-describedby': a11y.mergeIds(message && messageId, description ? descriptionId : undefined),
61
61
  'aria-invalid': invalid || undefined,
62
62
  id: inputId
63
63
  }];
@@ -101,12 +101,16 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
101
101
  gap: "medium",
102
102
  children: [jsxRuntime.jsxs(LabelWrapper, {
103
103
  children: [labelElement[labelVisibility], adornment]
104
- }), description && jsxRuntime.jsx(text.Text, {
104
+ }), description && (typeof description === 'string' ? jsxRuntime.jsx(text.Text, {
105
105
  tone: "muted",
106
106
  size: "small",
107
107
  id: descriptionId,
108
108
  children: description
109
- }), children, message && jsxRuntime.jsx(FieldMessage, {
109
+ }) : jsxRuntime.jsx(box.Box, {
110
+ as: "label",
111
+ htmlFor: descriptionId,
112
+ children: description
113
+ })), children, message && jsxRuntime.jsx(FieldMessage, {
110
114
  tone: tone,
111
115
  id: messageId,
112
116
  message: message
@@ -57,7 +57,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
57
57
  invalid: invalid,
58
58
  readOnly: readOnly
59
59
  }, {
60
- 'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
60
+ 'aria-describedby': a11y.mergeIds(message && messageId, description ? descriptionId : undefined),
61
61
  'aria-invalid': invalid || undefined,
62
62
  id: inputId
63
63
  }];
@@ -101,12 +101,16 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
101
101
  gap: "medium",
102
102
  children: [jsxRuntime.jsxs(LabelWrapper, {
103
103
  children: [labelElement[labelVisibility], adornment]
104
- }), description && jsxRuntime.jsx(text.Text, {
104
+ }), description && (typeof description === 'string' ? jsxRuntime.jsx(text.Text, {
105
105
  tone: "muted",
106
106
  size: "small",
107
107
  id: descriptionId,
108
108
  children: description
109
- }), children, message && jsxRuntime.jsx(FieldMessage, {
109
+ }) : jsxRuntime.jsx(box.Box, {
110
+ as: "label",
111
+ htmlFor: descriptionId,
112
+ children: description
113
+ })), children, message && jsxRuntime.jsx(FieldMessage, {
110
114
  tone: tone,
111
115
  id: messageId,
112
116
  message: message
@@ -53,7 +53,7 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
53
53
  invalid: invalid,
54
54
  readOnly: readOnly
55
55
  }, {
56
- 'aria-describedby': mergeIds(message && messageId, description && descriptionId),
56
+ 'aria-describedby': mergeIds(message && messageId, description ? descriptionId : undefined),
57
57
  'aria-invalid': invalid || undefined,
58
58
  id: inputId
59
59
  }];
@@ -97,12 +97,16 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
97
97
  gap: "medium",
98
98
  children: [jsxs(LabelWrapper, {
99
99
  children: [labelElement[labelVisibility], adornment]
100
- }), description && jsx(Text, {
100
+ }), description && (typeof description === 'string' ? jsx(Text, {
101
101
  tone: "muted",
102
102
  size: "small",
103
103
  id: descriptionId,
104
104
  children: description
105
- }), children, message && jsx(FieldMessage, {
105
+ }) : jsx(Box, {
106
+ as: "label",
107
+ htmlFor: descriptionId,
108
+ children: description
109
+ })), children, message && jsx(FieldMessage, {
106
110
  tone: tone,
107
111
  id: messageId,
108
112
  message: message
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/field",
3
- "version": "5.1.3",
3
+ "version": "5.2.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",