feat(many): rework TextArea and dependent FormField components #2273

ToMESSKa · 2025-11-28T10:37:28Z

INSTUI-4812

ISSUE:

this PR:

updates the texArea tokens
collapses 'newError' and 'error' type in FormField and both types have functionality of 'newError'
migrates the asterisk logic from components using FormField into FormFieldLayout
updates FormField tokens
disables 'success' and 'success' messages when the component using FormField is 'disabled' or 'readOnly'

TEST PLAN:

check the figma: https://www.figma.com/design/5WFqF3HVlNdfcJooCaiFoh/InstUI-Component-Library?node-id=3437-9532&p=f&m=dev
test the TexArea focus outline, it should have no errors even when the TextAre is getting resized
open the example on Form Errors page and replace the type: 'error' with type: 'newError' (see the code below) and test if the 'error' and the 'newError' type has no visual differences when it comes to form errors

const messages = showError
    ? [{type: 'error', text: showLongError ? 'Long error....

on Form Errors page the asterisk should appear when the isRequired is true
open the FormField and FormFieldGroup pages, and test the examples, the layout should be the same as on the latest version (except the success state having an icon and the new error style should be applied instead of the old one)
check TextInput, NumberInput, RadioInputGroup and TextArea, 'error' and 'success' messages should not appear when the component is 'disabled' or 'readOnly', but 'hint' type should
check TextArea, the border's color should not be green/red, when it is in a success/error state and 'disabled' or 'readOnly' at the same time. In case of readOnly, the focus outline should not be green/red either

github-actions · 2025-11-28T12:15:10Z

PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2025-12-03 13:29 UTC

ToMESSKa · 2025-11-28T13:54:04Z

packages/ui-form-field/src/FormFieldLayout/index.tsx

+              css={invalid ? styles?.requiredAsterisk : {}}
+              aria-hidden={true}
+            >
+              {' '}
+              *


The logic rendering the asterisk has been moved to FormFieldLayout for the other components to here.

ToMESSKa · 2025-11-28T13:55:38Z

packages/ui-form-field/src/FormFieldMessage/index.tsx

+        {shouldShowIcon && (
+          <span css={styles?.icon}>
+            {isErrorVariant ? (
+              <AlertCircleInstUIIcon size="sm" color="errorColor" />
+            ) : (
+              <CheckCircle2InstUIIcon size="sm" color="successColor" />
+            )}


now in the case of success and error (and newError), an icon is rendered

ToMESSKa · 2025-11-28T13:57:41Z

packages/ui-radio-input/src/RadioInputGroup/styles.ts

-const generateStyle = (componentTheme: RadioInputGroupTheme): RadioInputGroupStyle => {
-  const { invalidAsteriskColor } = componentTheme
-
-  return {
-    invalidAsterisk: {
-      color: invalidAsteriskColor


as the only theme variable invalidAsteriskColor has been removed, I removed the styles.ts too

ToMESSKa · 2025-11-28T14:20:51Z

packages/ui-text-area/src/TextArea/index.tsx

-            <span
-              css={this.props.styles?.textAreaOutline}
-              aria-hidden="true"
-              ref={(e) => {
-                this._highlightRef = e
-              }}
-            />
-          ) : null}


As applying the focus outline was delegated to calcFocusOutlineStyles even when the TextArea is resized, this span was no loner needed was removed

ToMESSKa · 2025-11-28T14:30:11Z

packages/ui-text-area/src/TextArea/index.tsx

-  componentDidMount() {
-    this.myObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (this._highlightRef) {
-          const entryStyle = window.getComputedStyle(entry.target)
-          this._highlightRef.style.transition = 'none'
-          this._highlightRef.style.width = `calc(${entryStyle.width} + 0.5rem)`
-          this._highlightRef.style.height = `calc(${entryStyle.height} + 0.5rem)`
-          clearTimeout(this.resizeTimeout)
-
-          this.resizeTimeout = setTimeout(() => {
-            if (this._highlightRef) {
-              this._highlightRef.style.transition = 'all 0.2s'
-            }
-          }, 500)
-        }
-      }
-    })
+  }, [])

-    this.autoGrow()
-    this.props.makeStyles?.()
-  }


this logic was deleted as calcFocusOutlineStyles is used for focus outline even when the TextArea is getting resized

ToMESSKa · 2025-11-28T14:31:32Z

packages/ui-text-area/src/TextArea/styles.ts

-    textAreaOutline: {
-      label: 'textArea__outline',
-      pointerEvents: 'none',
-      position: 'absolute',
-      display: 'block',
-      boxSizing: 'border-box',
-      top: '-0.25rem',
-      bottom: '-0.25rem',
-      left: '-0.25rem',
-      right: '-0.25rem',
-      border: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`,
-      borderRadius: `calc(${componentTheme.borderRadius} * 1.5)`,
-      transition: 'all 0.2s',
-      // properties to transition on :focus
-      opacity: 0,
-      transform: 'scale(0.95)'


This is also not needed anymore as calcFocusOutlineStyles is used

packages/ui-form-field/src/FormFieldLayout/styles.ts

packages/ui-form-field/src/FormFieldMessage/index.tsx

matyasf

FYI: The focus ring does not animate because of a bug in the focus outline calculation, its fixed in the NumberInput PR.

Very nice work, see my comments for changes

packages/ui-text-area/src/TextArea/index.tsx

packages/ui-text-area/src/TextArea/styles.ts

INSTUI-4812

joyenjoyer · 2025-12-03T08:51:14Z

packages/ui-radio-input/src/RadioInputGroup/index.tsx

 **/
 @withDeterministicId()
-@withStyle(generateStyle, generateComponentTheme)
 class RadioInputGroup extends Component<


Why didn't you change this to functional component?

@joyenjoyer I only changed those components to functional which needed their tokens rewired as a part of this PR and needed the useStyle hook to make it work. But as we agreed, the conversion to functional components is not a priority anymore.

joyenjoyer · 2025-12-03T08:54:56Z

packages/ui-text-input/src/TextInput/index.tsx

-    ) : (
-      rawLabel
-    )
+    const label = callRenderProp(renderLabel)


You may consider using React.createElement here instead of callRenderProp. We would like to deprecate it soon.

hmm we should check that this is not a breaking change, e.g. make 100% sure that React.createElement can handle everything that callRenderProp can (e.g. just a string, a JSX, a React class component,...)

@joyenjoyer I talked to @matyasf about this and he suggested to leave it as it is for now.

joyenjoyer · 2025-12-03T08:55:18Z

packages/ui-number-input/src/NumberInput/index.tsx

-    ) : (
-      rawLabel
-    )
+    const label = callRenderProp(renderLabel)


You may consider React.createElement here instead of callRenderProp. We would like to deprecate it soon.

@joyenjoyer see above

joyenjoyer

I checked the design and went through the code. Very nice job! Left some minor comments/questions. I see that you changed some components to functional but not all of them. Why?

matyasf

nice work, I just found 1 issue

ToMESSKa self-assigned this Nov 28, 2025

ToMESSKa force-pushed the INSTUI-4812-text-area-rework branch 2 times, most recently from 6a10c93 to 1049f95 Compare November 28, 2025 12:10

ToMESSKa closed this Nov 28, 2025

ToMESSKa force-pushed the INSTUI-4812-text-area-rework branch from 1049f95 to e010ea4 Compare November 28, 2025 13:05

ToMESSKa reopened this Nov 28, 2025

ToMESSKa force-pushed the INSTUI-4812-text-area-rework branch from 0d24a0d to 03b756d Compare November 28, 2025 13:50

ToMESSKa commented Nov 28, 2025

View reviewed changes

ToMESSKa requested a review from matyasf November 28, 2025 15:46

ToMESSKa marked this pull request as ready for review November 28, 2025 15:46

ToMESSKa requested a review from balzss November 28, 2025 15:47

matyasf requested review from joyenjoyer and removed request for balzss December 1, 2025 09:44

matyasf reviewed Dec 1, 2025

View reviewed changes

packages/ui-form-field/src/FormFieldLayout/styles.ts Show resolved Hide resolved

matyasf reviewed Dec 1, 2025

View reviewed changes

packages/ui-form-field/src/FormFieldMessage/index.tsx Show resolved Hide resolved

matyasf requested changes Dec 1, 2025

View reviewed changes

feat(many): rework TextArea and dependent FormField components

87a2aa6

INSTUI-4812

ToMESSKa force-pushed the INSTUI-4812-text-area-rework branch from 03b756d to 87a2aa6 Compare December 2, 2025 15:08

ToMESSKa requested a review from matyasf December 2, 2025 15:32

joyenjoyer reviewed Dec 3, 2025

View reviewed changes

ToMESSKa requested a review from joyenjoyer December 3, 2025 10:15

matyasf requested changes Dec 3, 2025

View reviewed changes

ToMESSKa requested a review from matyasf December 3, 2025 11:07

matyasf approved these changes Dec 3, 2025

View reviewed changes

joyenjoyer approved these changes Dec 3, 2025

View reviewed changes

ToMESSKa merged commit 167222f into v12 Dec 3, 2025
8 of 9 checks passed

ToMESSKa deleted the INSTUI-4812-text-area-rework branch December 3, 2025 13:29

feat(many): rework TextArea and dependent FormField components #2273

feat(many): rework TextArea and dependent FormField components #2273

Conversation

ToMESSKa commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ToMESSKa Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

matyasf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joyenjoyer Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joyenjoyer left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matyasf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ToMESSKa commented Nov 28, 2025 •

edited

Loading

github-actions bot commented Nov 28, 2025 •

edited

Loading

ToMESSKa Nov 28, 2025 •

edited

Loading

joyenjoyer Dec 3, 2025 •

edited

Loading

joyenjoyer left a comment •

edited

Loading