feat(textarea): added char counter #10442

TannerS · 2022-01-13T21:28:38Z

Closes #

Changelog

New

Adds two new props to enable a textarea counter, and an actually max counter limit. Added some styles too.

Testing / Reviewing

Added functionality to test live changes in storybook and added unit test. I am all for people helping me look over my unit test for feedback

{{ Add descriptions, steps or a checklist for how reviewers can verify this PR works or not }}

Added

Styles
Coded changes (2 props)

Behavior

Ability to enable and disable the counter and re-render
Follows the text areas maxlength attribute so the user can only type up until it hits the max then does not allow anymore (no error validation option)
both props have to be enabled for this to work. I originally thought of just adding a counter prop which will turn on the counter but I then thought to give the user the ability to turn it off and on without having to erase the counter data BUT this can be discussed in this PR
The counter should use the same styles as the label to look the same

Test

Added unit test. I did have issues finding a way to write a test to grab the value after adding text. Even after looking at many ways online so my test may be limited.

this includes ui changes, test, and styles

netlify · 2022-01-13T21:28:45Z

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: dbe11e4

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/6201646d3fa84f00085e6ab3

😎 Browse the preview: https://deploy-preview-10442--carbon-react-next.netlify.app

TannerS · 2022-01-13T21:28:50Z

@abbeyhrt fyi

netlify · 2022-01-13T21:50:46Z

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: dbe11e4

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/6201646df159090008365293

😎 Browse the preview: https://deploy-preview-10442--carbon-elements.netlify.app

netlify · 2022-01-13T21:57:23Z

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: dbe11e4

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/6201646d2e28bb00072ee931

😎 Browse the preview: https://deploy-preview-10442--carbon-components-react.netlify.app

packages/components/src/components/text-area/_text-area.scss

packages/react/src/components/TextArea/TextArea.js

packages/styles/scss/components/text-area/_text-area.scss

packages/react/src/components/TextArea/TextArea.js

TannerS · 2022-01-25T21:03:48Z

@tw15egan updated

TannerS · 2022-02-02T02:22:37Z

@tw15egan @abbeyhrt my PR failed a unit test unrelated to my code, some timeout error, how do re-run the test check?

tw15egan · 2022-02-02T15:51:26Z

@TannerS can you try running yarn test -u at the root, add any changes, and push it up?

TannerS · 2022-02-02T16:04:26Z

@tw15egan thanks! ya that updated a file.

I am a big confused, what does that command do? it seemed to update by adding the prop autoOrientation to this file packages/react/src/components/Tooltip/Tooltip.js

which is part of an active PR https://github.com/carbon-design-system/carbon/pull/10611/files

so I am a bit confused on what that commands does and why did it add that prop that was added to a PR not yet merged?

tw15egan · 2022-02-02T16:06:58Z

yarn test -u just updates the snapshot tests, not sure why it would pull in code from a different PR

TannerS · 2022-02-02T16:18:22Z

yarn test -u just updates the snapshot tests, not sure why it would pull in code from a different PR

@tw15egan I thought maybe I messed up a merge or something but it added that prop without the eslint comment like in the PR above, so I am not sure...

either way, it may been what I needed to fix it, so thank you!

TannerS · 2022-02-02T16:38:26Z

yarn test -u just updates the snapshot tests, not sure why it would pull in code from a different PR

ok, maybe i just messed up and the merge i did left out a file, either way, it should be fixed, so thanks!

abbeyhrt · 2022-02-03T17:10:09Z

@TannerS This looks great so far! One thing I noticed, messing around with the story, is that you can set a maxCount when enableCounter is false and it does prevent the user from typing passed that maxCount. Is that intended? It seems a bit weird to have a limit that isn't communicated to the user but there definitely could be a use case you have in mind that I don't :)

laurenmrice · 2022-02-03T18:00:47Z

Visually it looks good to me. Thank you! 👍. But I also have the same question as Abbey above^

TannerS · 2022-02-03T18:12:28Z

Hey guys that might be a bug let me test it out in just a bit here thank you for pointing that out

…

On Thu, Feb 3, 2022, 12:00 PM Lauren Rice ***@***.***> wrote: Visually it looks good to me. Thank you! 👍. But I also have the same question as Abbey above^ — Reply to this email directly, view it on GitHub <#10442 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACDUUD6NJV7DNGRWGDTVR7TUZK7FTANCNFSM5L47XOMA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

TannerS · 2022-02-03T19:04:40Z

@abbeyhrt @laurenmrice hey guys, ya it was a bug, I pushed a fix, let me know if the way I fixed it is acceptable / carbon standards !

packages/react/src/components/TextArea/TextArea.js

TannerS · 2022-02-04T19:37:57Z

packages/react/src/components/TextArea/TextArea.js

+  if (enableCounter) {
+    textareaProps.maxLength = maxCount;
+  }
+


abbeyhrt

🎉 🎉 Looks great to me! Thank you for the contribution 😃

laurenmrice

Looks great! Thank you for contributing this! ✅ ⭐️

packages/components/src/components/text-area/_text-area.scss

TannerS and others added 3 commits January 6, 2022 16:38

feat(textarea): added char counter

6670f90

this includes ui changes, test, and styles

feat(textarea): added value prop into consideration with count

0f55482

Merge branch 'main' into tanner_textAreaCounter

8bf2116

TannerS requested review from a team as code owners January 13, 2022 21:28

TannerS requested review from tw15egan and aledavila January 13, 2022 21:28

TannerS and others added 5 commits January 13, 2022 18:09

Merge branch 'main' into tanner_textAreaCounter

e86bb81

Merge branch 'main' into tanner_textAreaCounter

52cab86

Merge branch 'main' into tanner_textAreaCounter

16e5a35

Merge branch 'main' into tanner_textAreaCounter

8453e94

Merge branch 'main' into tanner_textAreaCounter

7c98273

abbeyhrt suggested changes Jan 24, 2022

View reviewed changes

packages/components/src/components/text-area/_text-area.scss Outdated Show resolved Hide resolved

feat(textarea): updated styles to use text area

b3ac185

TannerS requested a review from abbeyhrt January 25, 2022 05:29

TannerS changed the title ~~Tanner text area counter~~ Add counter to TextArea Jan 25, 2022

feat(textarea): updated unit test

2481afd

tw15egan reviewed Jan 25, 2022

View reviewed changes

packages/react/src/components/TextArea/TextArea.js Outdated Show resolved Hide resolved

tw15egan reviewed Jan 25, 2022

View reviewed changes

packages/styles/scss/components/text-area/_text-area.scss Outdated Show resolved Hide resolved

tw15egan reviewed Jan 25, 2022

View reviewed changes

packages/styles/scss/components/text-area/_text-area.scss Show resolved Hide resolved

tw15egan reviewed Jan 25, 2022

View reviewed changes

packages/react/src/components/TextArea/TextArea.js Show resolved Hide resolved

TannerS requested a review from tw15egan January 25, 2022 16:51

TannerS and others added 2 commits January 25, 2022 14:57

feat(textarea): updated styles

bccf667

Merge branch 'main' into tanner_textAreaCounter

62dc9a9

Merge branch 'main' into tanner_textAreaCounter

014b6fd

chore(react): updated file after running yarn test -u after main merge

a9a4d0f

Merge branch 'main' into tanner_textAreaCounter

92cb652

abbeyhrt requested review from a team and laurenmrice and removed request for a team February 3, 2022 17:00

TannerS and others added 2 commits February 3, 2022 13:03

fix(react): fixed textarea counter limit still limiting when not enabled

8d10cf3

Merge branch 'main' into tanner_textAreaCounter

9ab7860

TannerS commented Feb 3, 2022

View reviewed changes

packages/react/src/components/TextArea/TextArea.js Outdated Show resolved Hide resolved

Tanner Summers and others added 2 commits February 3, 2022 14:06

Merge branch 'main' into tanner_textAreaCounter

4a30986

chore(react): edited how textarea maxCount prop is set

2982cf8

TannerS commented Feb 4, 2022

View reviewed changes

abbeyhrt approved these changes Feb 4, 2022

View reviewed changes

laurenmrice approved these changes Feb 4, 2022

View reviewed changes

tw15egan reviewed Feb 7, 2022

View reviewed changes

packages/components/src/components/text-area/_text-area.scss Show resolved Hide resolved

tw15egan approved these changes Feb 7, 2022

View reviewed changes

tw15egan added the status: ready to merge 🎉 label Feb 7, 2022

Merge branch 'main' into tanner_textAreaCounter

dbe11e4

kodiakhq bot merged commit 2fa6584 into carbon-design-system:main Feb 7, 2022

tay1orjones mentioned this pull request Feb 8, 2022

Add optional character count to text input #5702

Closed

TannerS changed the title ~~Add counter to TextArea~~ feat(textarea): added char counter Feb 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(textarea): added char counter #10442

feat(textarea): added char counter #10442

TannerS commented Jan 13, 2022

netlify bot commented Jan 13, 2022 •

edited

Loading

TannerS commented Jan 13, 2022

netlify bot commented Jan 13, 2022 •

edited

Loading

netlify bot commented Jan 13, 2022 •

edited

Loading

TannerS commented Jan 25, 2022

TannerS commented Feb 2, 2022

tw15egan commented Feb 2, 2022

TannerS commented Feb 2, 2022

tw15egan commented Feb 2, 2022

TannerS commented Feb 2, 2022

TannerS commented Feb 2, 2022

abbeyhrt commented Feb 3, 2022

laurenmrice commented Feb 3, 2022

TannerS commented Feb 3, 2022 via email

TannerS commented Feb 3, 2022

TannerS Feb 4, 2022

abbeyhrt left a comment

laurenmrice left a comment

feat(textarea): added char counter #10442

feat(textarea): added char counter #10442

Conversation

TannerS commented Jan 13, 2022

Changelog

Testing / Reviewing

netlify bot commented Jan 13, 2022 • edited Loading

TannerS commented Jan 13, 2022

netlify bot commented Jan 13, 2022 • edited Loading

netlify bot commented Jan 13, 2022 • edited Loading

TannerS commented Jan 25, 2022

TannerS commented Feb 2, 2022

tw15egan commented Feb 2, 2022

TannerS commented Feb 2, 2022

tw15egan commented Feb 2, 2022

TannerS commented Feb 2, 2022

TannerS commented Feb 2, 2022

abbeyhrt commented Feb 3, 2022

laurenmrice commented Feb 3, 2022

TannerS commented Feb 3, 2022 via email

TannerS commented Feb 3, 2022

TannerS Feb 4, 2022

Choose a reason for hiding this comment

abbeyhrt left a comment

Choose a reason for hiding this comment

laurenmrice left a comment

Choose a reason for hiding this comment

netlify bot commented Jan 13, 2022 •

edited

Loading

netlify bot commented Jan 13, 2022 •

edited

Loading

netlify bot commented Jan 13, 2022 •

edited

Loading