@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
@@ -2,6 +2,7 @@
2
2
  export declare type FieldState = {
3
3
  disabled: boolean;
4
4
  invalid: boolean;
5
+ readOnly?: boolean;
5
6
  };
6
7
  export declare type InputPropsDerivedFromField = {
7
8
  'aria-describedby'?: string;
@@ -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 ? 'field' : '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 ? '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 ? 'disabled' : 'neutral',
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 ? 'disabled' : 'muted',
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 ? 'disabled' : 'neutral',
74
+ tone: disabled || readOnly ? 'field' : '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 ? '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.0.0",
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.0.0",
25
+ "@spark-web/theme": "^5.10.6",
26
26
  "@spark-web/utils": "^5.0.0"
27
27
  },
28
28
  "devDependencies": {