feat(react): enable textarea to limit text input to set amount of words #12906

matejoslav · 2022-12-31T11:23:41Z

Co-authored-by: SamChinellato [email protected]
Co-authored-by: stevenpatrick009 [email protected]

Added functionality to textArea component to limit the number of words the user can type. Also updated the useAnouncer to handle new wording by allowing it to either display "x characters left" or "x words left" based on args passed in.

Changelog

New

textArea component has now word counter mode and can now limit the amount of words user types
added more tests for the textArea component

Changed

useAnouncer can now take the entityName and use that to display the "x left"
added tests for useAnnouncer

Testing / Reviewing

run the storybook for react components
navigate to the textArea component
select the "WithWordCounter" textArea type
type in few words and observe the counter increase
try to type in more words than the limit and observe that user can not add more words
try to paste in text with more words than the limit and observe that the text has been cut to match the word limit

Co-authored-by: SamChinellato <[email protected]> Co-authored-by: stevenpatrick009 <[email protected]>

github-actions · 2022-12-31T11:23:57Z

DCO Assistant Lite bot All contributors have signed the DCO.

matejoslav · 2022-12-31T11:26:07Z

I have read the DCO document and I hereby sign the DCO.

matejoslav · 2022-12-31T11:26:24Z

recheck

netlify · 2022-12-31T11:27:14Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`42a0616`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/656b6274f66c480008a56501
😎 Deploy Preview	https://deploy-preview-12906--v11-carbon-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 configuration.

netlify · 2022-12-31T11:28:21Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`71ee273`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6531acbcd755c3000840dd52
😎 Deploy Preview	https://deploy-preview-12906--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 configuration.

sstrubberg · 2023-01-06T18:51:18Z

@matejoslav thank you so much for the PR. Two things as you're building this out.

Have you considered any error message handling for when a user reaches their limit?
Updates to the documentation on the website reflecting this enhancement.

Fix tests affected by the merge to properly use the selected testing library. Change TextArea component to remove duplicated use of the useRef hook.

matejoslav · 2023-01-09T21:41:01Z

@sstrubberg Good points.

For point number 2, will make relevant doc updates and push them.

For point number 1, wanted to make the component behave in similar way to having a maximum character limit, at the moment the user cannot exceed the amount of words if they have reached the limit, the announcer message is also displayed showing 0 words left. Not sure if a more visual error handling is needed but happy to add one if you think it would benefit the user experience.

matejoslav · 2023-01-09T21:54:25Z

Just checked the website repo, is it okay to assume that this change would have to be merged first and then we would add the feature description there or would you want them to be done at the same time?

sstrubberg · 2023-01-10T15:10:31Z

Just checked the website repo, is it okay to assume that this change would have to be merged first and then we would add the feature description there or would you want them to be done at the same time?

correct, merge first, then document. Just didn't want that part to get lost :)

tay1orjones · 2023-01-17T15:00:26Z

@matejoslav Looks like all-contributors needs to be ran again to resolve the conflict with main

aledavila · 2023-01-19T14:14:46Z

Bump @matejoslav

matejoslav · 2023-01-19T17:15:04Z

Hello, I am looking into it now 👍

matejoslav · 2023-01-29T17:15:14Z

For some reason I am getting test failure for "Simple date picker › should initialize a calendar when using react.lazy"
I did a clean clone of the carbon repository and getting the same issue.

matejoslav · 2023-11-20T21:58:37Z

@francinelucca check please if it now works as expected

matejoslav · 2023-11-27T22:15:48Z

The contributorsrc and Readme seem to have been altered and the order of the people was changed, could you please check and advise what to do?

francinelucca

Storybook issue seems to be fixed now, LGTM!

francinelucca · 2023-11-28T21:49:30Z

The contributorsrc and Readme seem to have been altered and the order of the people was changed, could you please check and advise what to do?

Might be worth to copy/paste the file from main, add your changes and commit to solve conflicts, your call though!

alisonjoseph

LGTM!

…ds (carbon-design-system#12906) * feat(react): enable textarea to limit text input to set amount of words Co-authored-by: SamChinellato <[email protected]> Co-authored-by: stevenpatrick009 <[email protected]> * test(textArea): fix tests and component Fix tests affected by the merge to properly use the selected testing library. Change TextArea component to remove duplicated use of the useRef hook. * docs(developer handbook): change max characters for line in commit body * fix(docs): regenerated contributors to resolve merge conflict * revert sync file changes * fix(TextArea): fixed eslint complaints * refactor(TextArea): changes to counterMode and storybook changed wording for counterMode to be character or word removed storybook entry * refactor(TextArea): removed unused test * docs(README): added contributors * revert(package.json & developer-handbook.md): reverted 90 limit to 80 * chore(format): run yarn format * fix(README): fixed the contributors formatting * refactor(TextArea): function to get initial text count * refactor(useAnnouncer): made entityName have default value * refactor(TextArea): use function to calculate text count in useEffect * fix(TextArea): ignore max count limit when counter is disabled * fix: fixed contributors list * chore(TextArea): trim words on paste and add missing tests * chore(TextArea): remove console log * chore: Update packages/react/src/components/TextArea/__tests__/TextArea-test.js Co-authored-by: Francine Lucca <[email protected]> * chore: remove redundant event definition in test * fix(TextArea): fix count not updating when switching mode * fix(TextArea): fix onPaste function * fix(TextArea): fix lint errors and tests logic * fix(contributors): revert list to what is on main * fix: add contributors --------- Co-authored-by: SamChinellato <[email protected]> Co-authored-by: stevenpatrick009 <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: Francine Lucca <[email protected]>

feat(react): enable textarea to limit text input to set amount of words

afa51ee

Co-authored-by: SamChinellato <[email protected]> Co-authored-by: stevenpatrick009 <[email protected]>

matejoslav requested review from a team as code owners December 31, 2022 11:23

matejoslav requested review from alisonjoseph and tw15egan December 31, 2022 11:23

matejoslav and others added 2 commits December 31, 2022 13:36

Merge branch 'main' into text-area-word-limit

16b39e5

Merge branch 'main' into text-area-word-limit

82bdf82

tw15egan and others added 2 commits January 9, 2023 08:54

Merge branch 'main' into text-area-word-limit

69ea92e

test(textArea): fix tests and component

1c4badc

Fix tests affected by the merge to properly use the selected testing library. Change TextArea component to remove duplicated use of the useRef hook.

docs(developer handbook): change max characters for line in commit body

434e1bd

alisonjoseph added the status: merge conflict 🚫 label Jan 17, 2023

matejoslav added 2 commits January 19, 2023 17:22

Merge remote-tracking branch 'upstream/main' into text-area-word-limit

9336819

fix(docs): regenerated contributors to resolve merge conflict

ed98158

sstrubberg added status: ready for review 👀 and removed status: merge conflict 🚫 labels Jan 19, 2023

matejoslav and others added 2 commits January 20, 2023 22:28

Merge branch 'main' into text-area-word-limit

435d969

Merge remote-tracking branch 'upstream/main' into text-area-word-limit

51b005f

matejoslav added 2 commits November 20, 2023 21:53

fix(TextArea): fix count not updating when switching mode

8c67185

fix(TextArea): fix onPaste function

09a9003

matejoslav requested a review from francinelucca November 20, 2023 21:58

matejoslav and others added 5 commits November 27, 2023 19:54

fix(TextArea): fix lint errors and tests logic

b05553a

Merge remote-tracking branch 'upstream/main' into text-area-word-limit

8e71458

fix(contributors): revert list to what is on main

27263c4

fix: add contributors

748459c

Merge branch 'main' into text-area-word-limit

573fdf5

francinelucca added the status: merge conflict 🚫 label Nov 28, 2023

francinelucca approved these changes Nov 28, 2023

View reviewed changes

francinelucca requested review from tay1orjones and tw15egan November 28, 2023 21:49

tay1orjones assigned alisonjoseph Nov 29, 2023

Merge branch 'main' into text-area-word-limit

42a0616

alisonjoseph added status: one more review 👀 and removed status: merge conflict 🚫 status: waiting for author's response 💬 labels Dec 4, 2023

alisonjoseph approved these changes Dec 4, 2023

View reviewed changes

alisonjoseph added status: ready to merge 🎉 and removed status: one more review 👀 labels Dec 4, 2023

github-actions bot added this pull request to the merge queue Dec 4, 2023

tay1orjones removed request for tay1orjones, tw15egan and aubrey-oneal December 4, 2023 20:02

github-merge-queue bot removed this pull request from the merge queue due to no response for status checks Dec 4, 2023

tay1orjones merged commit 01b1009 into carbon-design-system:main Dec 4, 2023
21 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): enable textarea to limit text input to set amount of words #12906

feat(react): enable textarea to limit text input to set amount of words #12906

matejoslav commented Dec 31, 2022 •

edited by sstrubberg

Loading

github-actions bot commented Dec 31, 2022 •

edited

Loading

matejoslav commented Dec 31, 2022

matejoslav commented Dec 31, 2022

netlify bot commented Dec 31, 2022 •

edited

Loading

netlify bot commented Dec 31, 2022 •

edited

Loading

sstrubberg commented Jan 6, 2023

matejoslav commented Jan 9, 2023

matejoslav commented Jan 9, 2023

sstrubberg commented Jan 10, 2023

tay1orjones commented Jan 17, 2023

aledavila commented Jan 19, 2023

matejoslav commented Jan 19, 2023

matejoslav commented Jan 29, 2023

matejoslav commented Nov 20, 2023

matejoslav commented Nov 27, 2023

francinelucca left a comment

francinelucca commented Nov 28, 2023 •

edited

Loading

alisonjoseph left a comment

feat(react): enable textarea to limit text input to set amount of words #12906

feat(react): enable textarea to limit text input to set amount of words #12906

Conversation

matejoslav commented Dec 31, 2022 • edited by sstrubberg Loading

Changelog

Testing / Reviewing

github-actions bot commented Dec 31, 2022 • edited Loading

matejoslav commented Dec 31, 2022

matejoslav commented Dec 31, 2022

netlify bot commented Dec 31, 2022 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented Dec 31, 2022 • edited Loading

✅ Deploy Preview for carbon-elements ready!

sstrubberg commented Jan 6, 2023

matejoslav commented Jan 9, 2023

matejoslav commented Jan 9, 2023

sstrubberg commented Jan 10, 2023

tay1orjones commented Jan 17, 2023

aledavila commented Jan 19, 2023

matejoslav commented Jan 19, 2023

matejoslav commented Jan 29, 2023

matejoslav commented Nov 20, 2023

matejoslav commented Nov 27, 2023

francinelucca left a comment

Choose a reason for hiding this comment

francinelucca commented Nov 28, 2023 • edited Loading

alisonjoseph left a comment

Choose a reason for hiding this comment

matejoslav commented Dec 31, 2022 •

edited by sstrubberg

Loading

github-actions bot commented Dec 31, 2022 •

edited

Loading

netlify bot commented Dec 31, 2022 •

edited

Loading

netlify bot commented Dec 31, 2022 •

edited

Loading

francinelucca commented Nov 28, 2023 •

edited

Loading