@instructure/ui-text-input 10.4.2-snapshot-9 → 10.4.2-snapshot-11

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.
Files changed (18) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/TextInput/index.js +5 -2
  3. package/es/TextInput/styles.js +3 -0
  4. package/es/TextInput/theme.js +6 -5
  5. package/lib/TextInput/index.js +5 -2
  6. package/lib/TextInput/styles.js +3 -0
  7. package/lib/TextInput/theme.js +6 -5
  8. package/package.json +16 -16
  9. package/src/TextInput/index.tsx +10 -2
  10. package/src/TextInput/props.ts +1 -0
  11. package/src/TextInput/styles.ts +3 -0
  12. package/src/TextInput/theme.ts +2 -0
  13. package/tsconfig.build.tsbuildinfo +1 -1
  14. package/types/TextInput/index.d.ts.map +1 -1
  15. package/types/TextInput/props.d.ts +1 -1
  16. package/types/TextInput/props.d.ts.map +1 -1
  17. package/types/TextInput/styles.d.ts.map +1 -1
  18. package/types/TextInput/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.4.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-snapshot-9) (2024-11-05)
6
+ ## [10.4.2-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-snapshot-11) (2024-11-06)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-text-input
8
+
9
+ ### Features
10
+
11
+ * **many:** add new form field error msg style + add asterisk for required fields ([9b03683](https://github.com/instructure/instructure-ui/commit/9b03683dadeef4c5deae2c60bea10686f143ff5d))
9
12
 
10
13
 
11
14
 
package/es/TextInput/index.js CHANGED
@@ -161,7 +161,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
161
161
  }
162
162
  get invalid() {
163
163
  return !!this.props.messages && this.props.messages.findIndex(message => {
164
- return message.type === 'error';
164
+ return message.type === 'error' || message.type === 'newError';
165
165
  }) >= 0;
166
166
  }
167
167
  get focused() {
@@ -242,13 +242,16 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
242
242
  renderAfterInput = _this$props4.renderAfterInput,
243
243
  messages = _this$props4.messages,
244
244
  inputContainerRef = _this$props4.inputContainerRef,
245
+ isRequired = _this$props4.isRequired,
245
246
  styles = _this$props4.styles;
246
247
  const beforeElement = renderBeforeInput ? callRenderProp(renderBeforeInput) : null;
247
248
  const afterElement = renderAfterInput ? callRenderProp(renderAfterInput) : null;
248
249
  const renderBeforeOrAfter = !!beforeElement || !!afterElement;
249
250
  return jsx(FormField, {
250
251
  id: this.id,
251
- label: callRenderProp(renderLabel),
252
+ label: jsx(React.Fragment, null, callRenderProp(renderLabel), isRequired && jsx("span", {
253
+ css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
254
+ }, " *")),
252
255
  messagesId: this._messagesId,
253
256
  messages: messages,
254
257
  inline: display === 'inline-block',
package/es/TextInput/styles.js CHANGED
@@ -127,6 +127,9 @@ const generateStyle = (componentTheme, props, state) => {
127
127
  flexShrink: 0
128
128
  };
129
129
  return {
130
+ requiredInvalid: {
131
+ color: componentTheme.requiredInvalidColor
132
+ },
130
133
  textInput: {
131
134
  label: 'textInput',
132
135
  ...inputStyle,
package/es/TextInput/theme.js CHANGED
@@ -28,7 +28,7 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;
32
32
  const colors = theme.colors,
33
33
  typography = theme.typography,
34
34
  borders = theme.borders,
@@ -50,13 +50,14 @@ const generateComponentTheme = theme => {
50
50
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
51
51
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
52
52
  background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
53
+ requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
53
54
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
54
55
  focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
55
56
  focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
56
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
57
- errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.red4570,
58
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.red4570,
59
- placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey4570,
57
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
58
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.red4570,
59
+ errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.red4570,
60
+ placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey4570,
60
61
  smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
61
62
  smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
62
63
  mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
package/lib/TextInput/index.js CHANGED
@@ -171,7 +171,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
171
171
  }
172
172
  get invalid() {
173
173
  return !!this.props.messages && this.props.messages.findIndex(message => {
174
- return message.type === 'error';
174
+ return message.type === 'error' || message.type === 'newError';
175
175
  }) >= 0;
176
176
  }
177
177
  get focused() {
@@ -252,13 +252,16 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
252
252
  renderAfterInput = _this$props4.renderAfterInput,
253
253
  messages = _this$props4.messages,
254
254
  inputContainerRef = _this$props4.inputContainerRef,
255
+ isRequired = _this$props4.isRequired,
255
256
  styles = _this$props4.styles;
256
257
  const beforeElement = renderBeforeInput ? (0, _callRenderProp.callRenderProp)(renderBeforeInput) : null;
257
258
  const afterElement = renderAfterInput ? (0, _callRenderProp.callRenderProp)(renderAfterInput) : null;
258
259
  const renderBeforeOrAfter = !!beforeElement || !!afterElement;
259
260
  return (0, _emotion.jsx)(_FormField.FormField, {
260
261
  id: this.id,
261
- label: (0, _callRenderProp.callRenderProp)(renderLabel),
262
+ label: (0, _emotion.jsx)(_react.default.Fragment, null, (0, _callRenderProp.callRenderProp)(renderLabel), isRequired && (0, _emotion.jsx)("span", {
263
+ css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
264
+ }, " *")),
262
265
  messagesId: this._messagesId,
263
266
  messages: messages,
264
267
  inline: display === 'inline-block',
package/lib/TextInput/styles.js CHANGED
@@ -133,6 +133,9 @@ const generateStyle = (componentTheme, props, state) => {
133
133
  flexShrink: 0
134
134
  };
135
135
  return {
136
+ requiredInvalid: {
137
+ color: componentTheme.requiredInvalidColor
138
+ },
136
139
  textInput: {
137
140
  label: 'textInput',
138
141
  ...inputStyle,
package/lib/TextInput/theme.js CHANGED
@@ -34,7 +34,7 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;
38
38
  const colors = theme.colors,
39
39
  typography = theme.typography,
40
40
  borders = theme.borders,
@@ -56,13 +56,14 @@ const generateComponentTheme = theme => {
56
56
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
57
57
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
58
58
  background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
59
+ requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
59
60
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
60
61
  focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
61
62
  focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
62
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
63
- errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.red4570,
64
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.red4570,
65
- placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey4570,
63
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
64
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.red4570,
65
+ errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.red4570,
66
+ placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey4570,
66
67
  smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
67
68
  smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
68
69
  mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-text-input",
3
- "version": "10.4.2-snapshot-9",
3
+ "version": "10.4.2-snapshot-11",
4
4
  "description": "A styled HTML text input component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,12 +23,12 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.4.2-snapshot-9",
27
- "@instructure/ui-babel-preset": "10.4.2-snapshot-9",
28
- "@instructure/ui-badge": "10.4.2-snapshot-9",
29
- "@instructure/ui-color-utils": "10.4.2-snapshot-9",
30
- "@instructure/ui-test-utils": "10.4.2-snapshot-9",
31
- "@instructure/ui-themes": "10.4.2-snapshot-9",
26
+ "@instructure/ui-axe-check": "10.4.2-snapshot-11",
27
+ "@instructure/ui-babel-preset": "10.4.2-snapshot-11",
28
+ "@instructure/ui-badge": "10.4.2-snapshot-11",
29
+ "@instructure/ui-color-utils": "10.4.2-snapshot-11",
30
+ "@instructure/ui-test-utils": "10.4.2-snapshot-11",
31
+ "@instructure/ui-themes": "10.4.2-snapshot-11",
32
32
  "@testing-library/jest-dom": "^6.4.6",
33
33
  "@testing-library/react": "^16.0.1",
34
34
  "@testing-library/user-event": "^14.5.2",
@@ -36,15 +36,15 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@babel/runtime": "^7.25.6",
39
- "@instructure/emotion": "10.4.2-snapshot-9",
40
- "@instructure/shared-types": "10.4.2-snapshot-9",
41
- "@instructure/ui-dom-utils": "10.4.2-snapshot-9",
42
- "@instructure/ui-form-field": "10.4.2-snapshot-9",
43
- "@instructure/ui-icons": "10.4.2-snapshot-9",
44
- "@instructure/ui-prop-types": "10.4.2-snapshot-9",
45
- "@instructure/ui-react-utils": "10.4.2-snapshot-9",
46
- "@instructure/ui-tag": "10.4.2-snapshot-9",
47
- "@instructure/ui-testable": "10.4.2-snapshot-9",
39
+ "@instructure/emotion": "10.4.2-snapshot-11",
40
+ "@instructure/shared-types": "10.4.2-snapshot-11",
41
+ "@instructure/ui-dom-utils": "10.4.2-snapshot-11",
42
+ "@instructure/ui-form-field": "10.4.2-snapshot-11",
43
+ "@instructure/ui-icons": "10.4.2-snapshot-11",
44
+ "@instructure/ui-prop-types": "10.4.2-snapshot-11",
45
+ "@instructure/ui-react-utils": "10.4.2-snapshot-11",
46
+ "@instructure/ui-tag": "10.4.2-snapshot-11",
47
+ "@instructure/ui-testable": "10.4.2-snapshot-11",
48
48
  "prop-types": "^15.8.1"
49
49
  },
50
50
  "peerDependencies": {
package/src/TextInput/index.tsx CHANGED
@@ -179,7 +179,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
179
179
  return (
180
180
  !!this.props.messages &&
181
181
  this.props.messages.findIndex((message) => {
182
- return message.type === 'error'
182
+ return message.type === 'error' || message.type === 'newError'
183
183
  }) >= 0
184
184
  )
185
185
  }
@@ -314,6 +314,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
314
314
  renderAfterInput,
315
315
  messages,
316
316
  inputContainerRef,
317
+ isRequired,
317
318
  styles
318
319
  } = this.props
319
320
 
@@ -329,7 +330,14 @@ class TextInput extends Component<TextInputProps, TextInputState> {
329
330
  return (
330
331
  <FormField
331
332
  id={this.id}
332
- label={callRenderProp(renderLabel)}
333
+ label={
334
+ <React.Fragment>
335
+ {callRenderProp(renderLabel)}
336
+ {isRequired && (
337
+ <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
338
+ )}
339
+ </React.Fragment>
340
+ }
333
341
  messagesId={this._messagesId}
334
342
  messages={messages}
335
343
  inline={display === 'inline-block'}
package/src/TextInput/props.ts CHANGED
@@ -197,6 +197,7 @@ type TextInputStyle = ComponentStyle<
197
197
  | 'innerWrapper'
198
198
  | 'inputLayout'
199
199
  | 'afterElement'
200
+ | 'requiredInvalid'
200
201
  >
201
202
 
202
203
  const propTypes: PropValidators<PropKeys> = {
package/src/TextInput/styles.ts CHANGED
@@ -157,6 +157,9 @@ const generateStyle = (
157
157
  }
158
158
 
159
159
  return {
160
+ requiredInvalid: {
161
+ color: componentTheme.requiredInvalidColor
162
+ },
160
163
  textInput: {
161
164
  label: 'textInput',
162
165
  ...inputStyle,
package/src/TextInput/theme.ts CHANGED
@@ -52,6 +52,8 @@ const generateComponentTheme = (theme: Theme): TextInputTheme => {
52
52
  color: colors?.contrasts?.grey125125,
53
53
  background: colors?.contrasts?.white1010,
54
54
 
55
+ requiredInvalidColor: colors?.contrasts?.red5782,
56
+
55
57
  padding: spacing?.small,
56
58
 
57
59
  focusOutlineWidth: borders?.widthMedium,