@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?: "truncate" | "nowrap" | "breakword" | undefined;
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: "none" | "medium";
66
- readonly paddingRight: "none" | "medium";
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' : 'field',
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 ? 'disabled' : 'neutral',
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' : 'field',
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 ? 'disabled' : 'neutral',
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' : 'field',
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 ? 'disabled' : 'neutral',
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.0",
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.0.0",
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.0",
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.0",
32
+ "@spark-web/field": "^5.1.1",
33
33
  "react": ">=17.0.2"
34
34
  },
35
35
  "engines": {