@instructure/ui-text-area 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 (19) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/TextArea/index.js +7 -4
  3. package/es/TextArea/styles.js +3 -0
  4. package/es/TextArea/theme.js +10 -9
  5. package/lib/TextArea/index.js +8 -4
  6. package/lib/TextArea/styles.js +3 -0
  7. package/lib/TextArea/theme.js +10 -9
  8. package/package.json +16 -16
  9. package/src/TextArea/index.tsx +12 -4
  10. package/src/TextArea/props.ts +1 -1
  11. package/src/TextArea/styles.ts +3 -0
  12. package/src/TextArea/theme.ts +2 -0
  13. package/tsconfig.build.tsbuildinfo +1 -1
  14. package/types/TextArea/index.d.ts +1 -1
  15. package/types/TextArea/index.d.ts.map +1 -1
  16. package/types/TextArea/props.d.ts +1 -1
  17. package/types/TextArea/props.d.ts.map +1 -1
  18. package/types/TextArea/styles.d.ts.map +1 -1
  19. package/types/TextArea/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-area
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/TextArea/index.js CHANGED
@@ -24,7 +24,7 @@ var _dec, _dec2, _dec3, _class, _TextArea;
24
24
  */
25
25
 
26
26
  /** @jsx jsx */
27
- import { Component } from 'react';
27
+ import React, { Component } from 'react';
28
28
  import { FormField } from '@instructure/ui-form-field';
29
29
  import { addEventListener, isActiveElement, requestAnimationFrame, getBoundingClientRect } from '@instructure/ui-dom-utils';
30
30
  import { debounce } from '@instructure/debounce';
@@ -217,7 +217,7 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
217
217
  }
218
218
  get invalid() {
219
219
  return this.props.messages && this.props.messages.findIndex(message => {
220
- return message.type === 'error';
220
+ return message.type === 'error' || message.type === 'newError';
221
221
  }) >= 0;
222
222
  }
223
223
  get id() {
@@ -243,7 +243,8 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
243
243
  height = _this$props4.height,
244
244
  maxHeight = _this$props4.maxHeight,
245
245
  textareaRef = _this$props4.textareaRef,
246
- resize = _this$props4.resize;
246
+ resize = _this$props4.resize,
247
+ styles = _this$props4.styles;
247
248
  const props = omitProps(this.props, TextArea.allowedProps);
248
249
  const style = {
249
250
  width,
@@ -275,7 +276,9 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
275
276
  onChange: this.handleChange
276
277
  }));
277
278
  return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.allowedProps), {
278
- label: this.props.label,
279
+ label: jsx(React.Fragment, null, this.props.label, required && jsx("span", {
280
+ css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
281
+ }, " *")),
279
282
  vAlign: "top",
280
283
  id: this.id,
281
284
  elementRef: el => {
package/es/TextArea/styles.js CHANGED
@@ -47,6 +47,9 @@ const generateStyle = (componentTheme, props) => {
47
47
  }
48
48
  };
49
49
  return {
50
+ requiredInvalid: {
51
+ color: componentTheme.requiredInvalidColor
52
+ },
50
53
  textArea: {
51
54
  label: 'textArea',
52
55
  all: 'initial',
package/es/TextArea/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, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11;
32
32
  const colors = theme.colors,
33
33
  typography = theme.typography,
34
34
  borders = theme.borders,
@@ -46,20 +46,21 @@ const generateComponentTheme = theme => {
46
46
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
47
47
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
48
48
  background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
49
+ requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.red5782,
49
50
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
50
51
  borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
51
- borderTopColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1214,
52
- borderRightColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1214,
53
- borderBottomColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214,
54
- borderLeftColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1214,
52
+ borderTopColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1214,
53
+ borderRightColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214,
54
+ borderBottomColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1214,
55
+ borderLeftColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey1214,
55
56
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
56
57
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
57
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
58
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
58
59
  focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
59
60
  focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
60
- errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.red4570,
61
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.red4570,
62
- placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey4570,
61
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.red4570,
62
+ errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.red4570,
63
+ placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey4570,
63
64
  smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
64
65
  smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
65
66
  mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
package/lib/TextArea/index.js CHANGED
@@ -1,11 +1,12 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.TextArea = void 0;
8
- var _react = require("react");
9
+ var _react = _interopRequireWildcard(require("react"));
9
10
  var _FormField = require("@instructure/ui-form-field/lib/FormField");
10
11
  var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
11
12
  var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
@@ -227,7 +228,7 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
227
228
  }
228
229
  get invalid() {
229
230
  return this.props.messages && this.props.messages.findIndex(message => {
230
- return message.type === 'error';
231
+ return message.type === 'error' || message.type === 'newError';
231
232
  }) >= 0;
232
233
  }
233
234
  get id() {
@@ -253,7 +254,8 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
253
254
  height = _this$props4.height,
254
255
  maxHeight = _this$props4.maxHeight,
255
256
  textareaRef = _this$props4.textareaRef,
256
- resize = _this$props4.resize;
257
+ resize = _this$props4.resize,
258
+ styles = _this$props4.styles;
257
259
  const props = (0, _omitProps.omitProps)(this.props, TextArea.allowedProps);
258
260
  const style = {
259
261
  width,
@@ -285,7 +287,9 @@ let TextArea = exports.TextArea = (_dec = (0, _withDeterministicId.withDetermini
285
287
  onChange: this.handleChange
286
288
  }));
287
289
  return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps), {
288
- label: this.props.label,
290
+ label: (0, _emotion.jsx)(_react.default.Fragment, null, this.props.label, required && (0, _emotion.jsx)("span", {
291
+ css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
292
+ }, " *")),
289
293
  vAlign: "top",
290
294
  id: this.id,
291
295
  elementRef: el => {
package/lib/TextArea/styles.js CHANGED
@@ -53,6 +53,9 @@ const generateStyle = (componentTheme, props) => {
53
53
  }
54
54
  };
55
55
  return {
56
+ requiredInvalid: {
57
+ color: componentTheme.requiredInvalidColor
58
+ },
56
59
  textArea: {
57
60
  label: 'textArea',
58
61
  all: 'initial',
package/lib/TextArea/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, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11;
38
38
  const colors = theme.colors,
39
39
  typography = theme.typography,
40
40
  borders = theme.borders,
@@ -52,20 +52,21 @@ const generateComponentTheme = theme => {
52
52
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
53
53
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
54
54
  background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
55
+ requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.red5782,
55
56
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
56
57
  borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
57
- borderTopColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1214,
58
- borderRightColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1214,
59
- borderBottomColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214,
60
- borderLeftColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1214,
58
+ borderTopColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1214,
59
+ borderRightColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214,
60
+ borderBottomColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1214,
61
+ borderLeftColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey1214,
61
62
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
62
63
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
63
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
64
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
64
65
  focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
65
66
  focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
66
- errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.red4570,
67
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.red4570,
68
- placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey4570,
67
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.red4570,
68
+ errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.red4570,
69
+ placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey4570,
69
70
  smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
70
71
  smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
71
72
  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-area",
3
- "version": "10.4.2-snapshot-9",
3
+ "version": "10.4.2-snapshot-11",
4
4
  "description": "A styled HTML text area component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,24 +24,24 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.25.6",
27
- "@instructure/debounce": "10.4.2-snapshot-9",
28
- "@instructure/emotion": "10.4.2-snapshot-9",
29
- "@instructure/shared-types": "10.4.2-snapshot-9",
30
- "@instructure/ui-dom-utils": "10.4.2-snapshot-9",
31
- "@instructure/ui-form-field": "10.4.2-snapshot-9",
32
- "@instructure/ui-prop-types": "10.4.2-snapshot-9",
33
- "@instructure/ui-react-utils": "10.4.2-snapshot-9",
34
- "@instructure/ui-testable": "10.4.2-snapshot-9",
35
- "@instructure/ui-utils": "10.4.2-snapshot-9",
36
- "@instructure/uid": "10.4.2-snapshot-9",
27
+ "@instructure/debounce": "10.4.2-snapshot-11",
28
+ "@instructure/emotion": "10.4.2-snapshot-11",
29
+ "@instructure/shared-types": "10.4.2-snapshot-11",
30
+ "@instructure/ui-dom-utils": "10.4.2-snapshot-11",
31
+ "@instructure/ui-form-field": "10.4.2-snapshot-11",
32
+ "@instructure/ui-prop-types": "10.4.2-snapshot-11",
33
+ "@instructure/ui-react-utils": "10.4.2-snapshot-11",
34
+ "@instructure/ui-testable": "10.4.2-snapshot-11",
35
+ "@instructure/ui-utils": "10.4.2-snapshot-11",
36
+ "@instructure/uid": "10.4.2-snapshot-11",
37
37
  "prop-types": "^15.8.1"
38
38
  },
39
39
  "devDependencies": {
40
- "@instructure/ui-axe-check": "10.4.2-snapshot-9",
41
- "@instructure/ui-babel-preset": "10.4.2-snapshot-9",
42
- "@instructure/ui-color-utils": "10.4.2-snapshot-9",
43
- "@instructure/ui-test-utils": "10.4.2-snapshot-9",
44
- "@instructure/ui-themes": "10.4.2-snapshot-9",
40
+ "@instructure/ui-axe-check": "10.4.2-snapshot-11",
41
+ "@instructure/ui-babel-preset": "10.4.2-snapshot-11",
42
+ "@instructure/ui-color-utils": "10.4.2-snapshot-11",
43
+ "@instructure/ui-test-utils": "10.4.2-snapshot-11",
44
+ "@instructure/ui-themes": "10.4.2-snapshot-11",
45
45
  "@testing-library/jest-dom": "^6.4.6",
46
46
  "@testing-library/react": "^16.0.1",
47
47
  "@testing-library/user-event": "^14.5.2",
package/src/TextArea/index.tsx CHANGED
@@ -23,7 +23,7 @@
23
23
  */
24
24
 
25
25
  /** @jsx jsx */
26
- import { Component } from 'react'
26
+ import React, { Component } from 'react'
27
27
  import { FormField } from '@instructure/ui-form-field'
28
28
  import {
29
29
  addEventListener,
@@ -283,7 +283,7 @@ class TextArea extends Component<TextAreaProps> {
283
283
  return (
284
284
  this.props.messages &&
285
285
  this.props.messages.findIndex((message) => {
286
- return message.type === 'error'
286
+ return message.type === 'error' || message.type === 'newError'
287
287
  }) >= 0
288
288
  )
289
289
  }
@@ -313,7 +313,8 @@ class TextArea extends Component<TextAreaProps> {
313
313
  height,
314
314
  maxHeight,
315
315
  textareaRef,
316
- resize
316
+ resize,
317
+ styles,
317
318
  } = this.props
318
319
 
319
320
  const props = omitProps(this.props, TextArea.allowedProps)
@@ -355,7 +356,14 @@ class TextArea extends Component<TextAreaProps> {
355
356
  return (
356
357
  <FormField
357
358
  {...pickProps(this.props, FormField.allowedProps)}
358
- label={this.props.label}
359
+ label={
360
+ <React.Fragment>
361
+ {this.props.label}
362
+ {required && (
363
+ <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
364
+ )}
365
+ </React.Fragment>
366
+ }
359
367
  vAlign="top"
360
368
  id={this.id}
361
369
  elementRef={(el) => {
package/src/TextArea/props.ts CHANGED
@@ -131,7 +131,7 @@ type TextAreaProps =
131
131
  WithDeterministicIdProps
132
132
 
133
133
  type TextAreaStyle = ComponentStyle<
134
- 'textArea' | 'textAreaLayout' | 'textAreaOutline'
134
+ 'textArea' | 'textAreaLayout' | 'textAreaOutline' | 'requiredInvalid'
135
135
  >
136
136
 
137
137
  const propTypes: PropValidators<PropKeys> = {
package/src/TextArea/styles.ts CHANGED
@@ -54,6 +54,9 @@ const generateStyle = (
54
54
  }
55
55
 
56
56
  return {
57
+ requiredInvalid: {
58
+ color: componentTheme.requiredInvalidColor
59
+ },
57
60
  textArea: {
58
61
  label: 'textArea',
59
62
  all: 'initial',
package/src/TextArea/theme.ts CHANGED
@@ -47,6 +47,8 @@ const generateComponentTheme = (theme: Theme): TextAreaTheme => {
47
47
 
48
48
  background: colors?.contrasts?.white1010,
49
49
 
50
+ requiredInvalidColor: colors?.contrasts?.red5782,
51
+
50
52
  borderWidth: borders?.widthSmall,
51
53
  borderStyle: borders?.style,
52
54
  borderTopColor: colors?.contrasts?.grey1214,