feat(TextArea): add warning state #13293

alisonjoseph · 2023-03-06T19:31:54Z

This PR adds warning states to TexArea and FluidTextArea, it also fixes a bug where the invalid error state wasn't showing for FluidTextArea

Changelog

Add warn and warnText props for TextArea component
Fix css specificity so that invalid styles show correctly for FluidTextArea

Testing / Reviewing

Test that the warning states for TextArea and FluidTextArea match the spec.
Test that invalid states are showing for FluidTextArea
Test that helper text only shows up if warn and invalid are false.

https://deploy-preview-13293--carbon-components-react.netlify.app/?path=/story/components-textarea--playground&args=warn:true
https://deploy-preview-13293--carbon-components-react.netlify.app/?path=/story/experimental-unstable-fluidtextarea--playground&args=warn:true

netlify · 2023-03-06T19:36:34Z

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`906fae7`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/640f267a25428a000864f7d7
😎 Deploy Preview	https://deploy-preview-13293--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2023-03-06T19:37:02Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`906fae7`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/640f267a9df7b500083c9a9d
😎 Deploy Preview	https://deploy-preview-13293--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

tay1orjones

LGTM!

tw15egan

Looks awesome! Thanks for fixing the FluidTextArea issues 🔥 ❤️

laurenmrice

Just a couple of things:

Fluid

The Invalid and Warning state resizer icon should be in the lower right corner instead of on top of the message.

You should not be able to see the bottom-border line when the invalid state border is active. Currently you can still see it here.

Fixed

I know the Fixed invalid state wasn't part of this PR, but I did notice it also isn't showing the error message below the input.

tay1orjones · 2023-03-09T17:17:28Z

@alisonjoseph does this also close #10910?

alisonjoseph · 2023-03-09T19:50:04Z

Yep @tay1orjones it does

alisonjoseph · 2023-03-09T20:03:19Z

@tw15egan is what @laurenmrice is asking for possible with the fluid textarea? I don't think so since we don't know how long the error/warning messages will be, and the resizer has to be attached the actual textarea component. We wouldn't want to put the error message inside the textarea.

The Invalid and Warning state resizer icon should be in the lower right corner instead of on top of the message.

tw15egan · 2023-03-09T20:04:26Z

@alisonjoseph yeah, I don't think it would be possible. @laurenmrice would it be okay to hide the resizer when the TextInput is in invalid or warn state?

alisonjoseph · 2023-03-09T20:08:08Z

@laurenmrice I fixed the extra bottom border issue and added a default error message to Storybook to it shows up automatically.

laurenmrice · 2023-03-10T17:44:15Z

@tw15egan @alisonjoseph If we hide the resizer for fluid text area during the invalid and warning state, would the user still be able to scroll internally within the field to see the text area content? If yes, then we can remove the resizer during those states.

alisonjoseph · 2023-03-10T17:46:00Z

@laurenmrice yes they would still be able to scroll, I'll remove it

laurenmrice

Looks good to me! ✅

* refactor(Dropdown): ariaLabel to aria-label * fix(menu): fix arrow key navigation when onClose is called but not closed (#13195) * fix(menu): only clear registered items when root is closing * fix(menu): auto-cleanup registered items --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(theme): add $icon-interactive token (#13219) * feat(theme): add $icon-interactive token * Update packages/themes/src/tokens/v11TokenGroup.js Co-authored-by: Alison Joseph <[email protected]> * Update packages/themes/src/tokens/__tests__/metadata-test.js Co-authored-by: Alison Joseph <[email protected]> * Update packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap * Update packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap * chore(snapshot): update snapshots --------- Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Francine Lucca <[email protected]> * feat(TextInput): add typescript types (#13142) * feat(TextInput): add typescript types * fix(Text Input): submcompnent workaround + add helperID prop * chore(format): format `Popover`, `Listbox` files (#13284) * chore(format): format Popover file * chore(format): format ListBox files * chore(format): update format command * chore(release): v11.24.0 (#13282) Co-authored-by: tay1orjones <[email protected]> * fix(toggle): make props.labelText optional (#13196) * fix(toggle): make props.labelText optional * docs(toggle): add 'with accessible labels' story * test(toggle): update public api snapshot --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(ListBox): a11y - move filter tag as sibling of menu trigger, esc key improvements (#13173) * fix(MultiSelect): a11y - move filter tag as sibling of menu trigger * fix(Multiselect): remove tag from tab order * fix(FilterableMultiselect): remove clear, tag from tab order * fix(ComboBox): retain input value when menu is open and esc is pressed * fix(FilterableMultiSelect): a few more UX tweaks * style(MultiSelect): update styles to fix invalid issues when focused * style(FluidMultiselect): adjust focus styles when invalid * chore(log): remove console log --------- Co-authored-by: Andrea N. Cardona <[email protected]> * docs(style): add section on authoring inline styles (#13289) * docs(style): add section on authoring inline styles * docs(style): rephrase inline style docs * docs(style): typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(ComboBox): ariaLabel to aria-label (#13273) * refactor(ComboBox): ariaLabel to aria-label * fix: formatting --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Andrea N. Cardona <[email protected]> * fix(tabs): remove max-width (#13247) * fix(tabs): remove max-width * docs(tabs): add max width guidance * docs(tabs): format --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(ListBox): Standardize `ListBox` menu open behavior (#13268) * style(MultiSelect): update styles to fix invalid issues when focused * style(FluidMultiselect): adjust focus styles when invalid * chore(log): remove console log * fix(ListBox): align open behaviors across ListBox components --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Add Typescript annotations to Select, SelectItem and SelectItemGroup (#13235) * refactor(typescript): type annotations on Select* Add Typescript annotations to Select, SelectItem and SelectItemGroup. * fix(lint): removed unused imports Left SelectItem and SelectItemGroup in the imports after using them for testing. Removed. * fix(Select-test): update label to labelText Previously removed label as it was not a property of Select. On recommendation of maintainers reintroduced using labelText. * Apply suggestions from code review Co-authored-by: Andrea N. Cardona <[email protected]> * Follow up to change suggestions --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(FilterableMultiSelect): ariaLabel to aria-label (#13276) Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <[email protected]> * fix(SkeletonText): prevent negative px width values (#13270) Co-authored-by: Alessandra Davila <[email protected]> * feat(Popover): add `isTabTip` prop to `Popover` (#13283) * feat(tabTipPopover): add tabTip to Popover * feat(tabTipPopover): add tab-tip styles, story * test(Popover): add e2e tests * style(Popover): adjust storybook styles * fix(Popover): add new prop to proptypes * chore(snapshot): update snapshots * docs(Popover): add close on esc to story * docs(Popover): fix typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(deps): bump minimist in /packages/react/examples/react-router (#13254) Bumps [minimist](https://github.com/minimistjs/minimist) from 1.2.5 to 1.2.8. - [Release notes](https://github.com/minimistjs/minimist/releases) - [Changelog](https://github.com/minimistjs/minimist/blob/main/CHANGELOG.md) - [Commits](minimistjs/minimist@v1.2.5...v1.2.8) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(StructuredList): ariaLabel to aria-label (#13261) * refactor(StructuredListWrapper): ariaLabel to aria-label * fix(StructuredList test): use 'aria-label' --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(DataTable): add rowIds to the sortRows extra params list (#13236) Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(typescript): add various typescript typings (#13234) * feat(TableToolbar): add typescript typings * feat(TableToolbarAction): add typescript typings * feat(TableToolbarContent): change to `tsx` * feat(TableToolbarMenu): add typescript typings * feat(OverflowMenuItem): add typescript typings * fix: format --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: Francine Lucca <[email protected]> * fix(RadioTile): forward ref to input node (#13130) Forward ref to input node of RadioTile, such that it behaves the same as other form inputs. Co-authored-by: Francine Lucca <[email protected]> * feat: migration examples prefix selectors (#13264) * feat(ContentSwitcher): preliminary unstable refactor * feat: added prefix and id prefix examples * fix: delete content switcher directory * feat: update demos * Update examples/id-prefix/src/App.jsx Co-authored-by: Francine Lucca <[email protected]> * Update packages/react/src/components/IdPrefix/index.js * feat: added docs * fix: update context * fix: yarn install * fix: update context 2 * chore: update yarn packages * chore: udpate yarn carbon/react --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(DataTableSkeleton): 12513 - Add TS types for props (#13245) * feat(DataTableSkeleton): 12513 - Add TS types for props * fix: yarn run format --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: Francine Lucca <[email protected]> * test(datatable): refactor to use RTL (#13294) * chore: wip * chore: wip * test(datatable): refactor to use RTL * chore: typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(modal): aria-label a11y bug (#13242) Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * test(HeaderSideNavItems): add tests (#13303) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * docs(Storybook): update storybook config so actions display properly (#13302) * docs(Storybook): update storybook config so actions display properly * fix(DatePicker): change action names --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(tabs): deprecate light prop (#13262) Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(menu): focus first item when opened (#13277) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(CodeSnippet): a11y tabstop + attributes (#13310) * fix(CodeSnippet): a11y tabstop + attributes * fix(CSS): add Carbon CSS to focus outline * refactor(CodeSnippet): relocate parens * refactor(OverflowMenu): ariaLabel to aria-label (NEW) (#13280) * fix(CodeSnippet): a11y tabstop + attributes * fix(CSS): add Carbon CSS to focus outline * refactor(OverflowMenu): ariaLabel to aria-label NEW * Delete CodeSnippet.js error from a rebase/merge * Delete _code-snippet.scss error from rebase/merge * revert(missingFiles): they'll be ignored on merge --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(test): remove enzyme (#13316) * test(accordion): refactor from enzyme to RTL * chore(test): remove enzyme --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(CodeSnippet): ariaLabel to aria-label (#13274) Co-authored-by: Taylor Jones <[email protected]> * feat(TextArea): add warning state (#13293) * feat(TextArea): add warning state * chore: update snapshots * fix: textarea error bottom border and default value in story * chore: hide resize fluid textarea invalid and warn --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor: convert TextAreaSkeleton to TypeScript (#13275) * refactor: convert TextAreaSkeleton to TypeScript * chore: remove unneeded omit * chore: remove unneeded omit --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(batchToolTips): make tooltips on batch visible (#13328) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(Notification): ariaLabel to aria-label (#13281) * refactor(Notification): ariaLabel to aria-label * fix(Notification): rm stories default dupes * fix(InlineNotification): rm deprecated prop --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(format): tsx formatting --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Jan Hassel <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: Bianca Sparxs <[email protected]> Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com> Co-authored-by: tay1orjones <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: jpsorensen <[email protected]> Co-authored-by: andrew <[email protected]> Co-authored-by: Alessandra Davila <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Chris Knabe <[email protected]> Co-authored-by: GalvinGao <[email protected]> Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: remolueoend <[email protected]> Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Sierra Wetmore <[email protected]> Co-authored-by: Austin <[email protected]>

feat(TextArea): add warning state

fe663bf

alisonjoseph added 2 commits March 7, 2023 13:36

chore: update snapshots

9c58c5c

Merge branch 'main' into 12746-textarea-warning-state

0fd4850

alisonjoseph marked this pull request as ready for review March 8, 2023 14:06

alisonjoseph requested review from a team as code owners March 8, 2023 14:06

alisonjoseph requested review from tay1orjones, tw15egan, aledavila and andreancardona March 8, 2023 14:06

alisonjoseph added the status: ready for review 👀 label Mar 8, 2023

tay1orjones approved these changes Mar 8, 2023

View reviewed changes

tw15egan approved these changes Mar 8, 2023

View reviewed changes

tw15egan requested a review from laurenmrice March 8, 2023 18:27

tw15egan added status: one more review 👀 status: visual review 🔍 labels Mar 8, 2023

Merge branch 'main' into 12746-textarea-warning-state

1e83f11

laurenmrice requested changes Mar 9, 2023

View reviewed changes

fix: textarea error bottom border and default value in story

cbf3e97

alisonjoseph requested a review from laurenmrice March 10, 2023 16:00

chore: hide resize fluid textarea invalid and warn

0256205

laurenmrice approved these changes Mar 10, 2023

View reviewed changes

alisonjoseph added status: ready to merge 🎉 and removed status: ready for review 👀 status: one more review 👀 status: visual review 🔍 labels Mar 13, 2023

Merge branch 'main' into 12746-textarea-warning-state

906fae7

kodiakhq bot merged commit 242256a into carbon-design-system:main Mar 13, 2023

tay1orjones mentioned this pull request Apr 26, 2023

[Feature Request]: text area component - masking #9889

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(TextArea): add warning state #13293

feat(TextArea): add warning state #13293

alisonjoseph commented Mar 6, 2023 •

edited

Loading

netlify bot commented Mar 6, 2023 •

edited

Loading

netlify bot commented Mar 6, 2023 •

edited

Loading

tay1orjones left a comment

tw15egan left a comment

laurenmrice left a comment •

edited

Loading

tay1orjones commented Mar 9, 2023

alisonjoseph commented Mar 9, 2023

alisonjoseph commented Mar 9, 2023

tw15egan commented Mar 9, 2023

alisonjoseph commented Mar 9, 2023

laurenmrice commented Mar 10, 2023 •

edited

Loading

alisonjoseph commented Mar 10, 2023

laurenmrice left a comment

feat(TextArea): add warning state #13293

feat(TextArea): add warning state #13293

Conversation

alisonjoseph commented Mar 6, 2023 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Mar 6, 2023 • edited Loading

✅ Deploy Preview for carbon-components-react ready!

netlify bot commented Mar 6, 2023 • edited Loading

✅ Deploy Preview for carbon-elements ready!

tay1orjones left a comment

Choose a reason for hiding this comment

tw15egan left a comment

Choose a reason for hiding this comment

laurenmrice left a comment • edited Loading

Choose a reason for hiding this comment

tay1orjones commented Mar 9, 2023

alisonjoseph commented Mar 9, 2023

alisonjoseph commented Mar 9, 2023

tw15egan commented Mar 9, 2023

alisonjoseph commented Mar 9, 2023

laurenmrice commented Mar 10, 2023 • edited Loading

alisonjoseph commented Mar 10, 2023

laurenmrice left a comment

Choose a reason for hiding this comment

alisonjoseph commented Mar 6, 2023 •

edited

Loading

netlify bot commented Mar 6, 2023 •

edited

Loading

netlify bot commented Mar 6, 2023 •

edited

Loading

laurenmrice left a comment •

edited

Loading

laurenmrice commented Mar 10, 2023 •

edited

Loading