feat: text input and textarea character limit counter #2745

emyarod · 2019-05-15T21:44:27Z

This PR adds a character counter for <TextInput> and <TextArea> components in both React and vanilla Carbon. The character counter markup can be customized with the renderCharCount render prop

Changelog

New

<TextInput> and <TextArea> character counter

Testing / Reviewing

Ensure the text inputs and textareas function as expected without any regressions (with and without character counters)

netlify · 2019-05-15T21:51:20Z

Deploy preview for the-carbon-components ready!

Built with commit f38e21f

https://deploy-preview-2745--the-carbon-components.netlify.com

netlify · 2019-05-15T21:55:32Z

Deploy preview for carbon-components-react ready!

Built with commit f38e21f

https://deploy-preview-2745--carbon-components-react.netlify.com

netlify · 2019-05-15T21:57:16Z

Deploy preview for the-carbon-components ready!

Built with commit 6690dcd

https://deploy-preview-2745--the-carbon-components.netlify.com

netlify · 2019-05-15T22:07:15Z

Deploy preview for carbon-components-react ready!

Built with commit 6690dcd

https://deploy-preview-2745--carbon-components-react.netlify.com

asudoh

LGTM 👍 - Thanks @emyarod! One question BTW - Can vanilla text area be used without JavaScript if character counter is not there?

emyarod · 2019-05-15T22:30:42Z

@asudoh yes textarea without character counter can be used without JS

also not sure why CI output differs from running vanilla test suite locally

asudoh · 2019-05-15T22:38:19Z

Cool, BTW the unit test issue seems with FF - Would you want to try it locally (--browser Firefox) @emyarod?

emyarod · 2019-05-15T22:49:54Z

no errors when testing locally on Firefox Nightly (Firefox 68) @asudoh. on Firefox stable (Firefox 66) though, I get the same errors and the spec files are not accessible through dev tools sources either

asudoh · 2019-05-15T23:03:33Z

@emyarod I think you can put a debugger statement - Browser debuggers tend to show source as it breaks.

emyarod · 2019-05-15T23:32:19Z

@asudoh it appears that in FF66 InputEvent object data was not being assigned despite being in the InputEventInitdictionary

34e290d

shixiedesign

This got done FAST! 🚤 A few small styling fixes:

Label got an extra margin bottom when Char count knob is turned on
When label text is long, warp to second line before intersecting with Char count. There should be a 16px gap between label and Char count text.
When label is hidden, long helper text should push charCount out, but not this far. Should be only a 16px gap between helper text and charCount.
CharCount knob visible for Password Input but doesn't do anything. Maybe password input shouldn't have this knob in the first place.

shixiedesign

For text area, a lot of the similar issues:

Extra margin bottom on label when charCount is turned on
Long label intersecting charCount
Large gap between helper text and charCount when label hidden

Accidental

emyarod · 2019-05-21T13:41:27Z

@shixiedesign regarding these points:

Helper text currently occupies 75% of full width. This is not specified in the original design. I think we should allow helper text to take up full width of the text area width, and allow 16px margin right when there is a charCount.

Distance between helper text and charCount looks like a percentage. Should just be a fixed 1 rem padding-right.

the 75% max width was the result of a previous ticket, do we want to modify that? #1997 #2000

shixiedesign · 2019-05-21T15:08:49Z

@emyarod Thanks double checking! I see, that make sense then. I will strike out that item.

shixiedesign

Love it! 🎉 Great work. Thank you!

asudoh

LGTM 🎉 - Thanks @emyarod!

This reverts commit 919ba2e.

…l state" (#3106) * Revert "fix: pass `defaultValue` in to textarea and text input initial state (#3015)" This reverts commit d563edf. * Revert "feat: text input and textarea character limit counter (#2745)" This reverts commit 919ba2e.

…l state" (carbon-design-system#3106) * Revert "fix: pass `defaultValue` in to textarea and text input initial state (carbon-design-system#3015)" This reverts commit d563edf. * Revert "feat: text input and textarea character limit counter (carbon-design-system#2745)" This reverts commit 919ba2e.

emyarod added status: ready for review 👀 status: visual review 🔍 labels May 15, 2019

emyarod added this to the v10.3 milestone May 15, 2019

emyarod force-pushed the 1672-text-input-character-limit-counter branch from f38e21f to ae08721 Compare May 15, 2019 21:46

asudoh approved these changes May 15, 2019

View reviewed changes

asudoh added the status: one more review 👀 label May 15, 2019

emyarod force-pushed the 1672-text-input-character-limit-counter branch 3 times, most recently from a5481ba to 34e290d Compare May 15, 2019 23:31

shixiedesign previously approved these changes May 16, 2019

View reviewed changes

shixiedesign reviewed May 16, 2019

View reviewed changes

emyarod added the status: waiting for author's response 💬 label May 16, 2019

emyarod force-pushed the 1672-text-input-character-limit-counter branch 2 times, most recently from fc3d300 to 5d044bb Compare May 17, 2019 21:26

emyarod requested a review from shixiedesign May 17, 2019 21:26

emyarod added 5 commits May 21, 2019 08:34

chore: prettier

5ef06b7

test: manually assign event object data for FF66

0e3ebbc

fix: resolve character counter margin and overlap

47375cb

docs(PasswordInput): remove char counter knob

516dc9a

fix: reduce helper text and char counter gap

8a717dc

emyarod added 2 commits May 21, 2019 08:42

fix(text-input): make input wrapper div full width

e042a1f

fix(text-area): add right margin to textarea charcounter

3aa014c

emyarod force-pushed the 1672-text-input-character-limit-counter branch from 1dbc2c2 to 3aa014c Compare May 21, 2019 13:53

shixiedesign approved these changes May 21, 2019

View reviewed changes

Merge branch 'master' into 1672-text-input-character-limit-counter

e592c22

emyarod removed status: one more review 👀 status: visual review 🔍 labels May 21, 2019

asudoh approved these changes May 22, 2019

View reviewed changes

Merge branch 'master' into 1672-text-input-character-limit-counter

6690dcd

asudoh merged commit 919ba2e into carbon-design-system:master May 22, 2019

emyarod deleted the 1672-text-input-character-limit-counter branch May 22, 2019 14:38

shixiedesign mentioned this pull request May 23, 2019

Add character count feature for Text input component in kit #2750

Closed

emyarod mentioned this pull request Jun 18, 2019

fix: set default defaultValue for TextInput and TextArea #3097

Closed

emyarod added a commit that referenced this pull request Jun 18, 2019

Revert "feat: text input and textarea character limit counter (#2745)"

30ba7c2

This reverts commit 919ba2e.

emyarod mentioned this pull request Jun 18, 2019

Revert "fix: pass defaultValue in to textarea and text input initial state" #3106

Merged

emyarod mentioned this pull request Jul 18, 2019

feat(text-input): add read-only variant #3054

Closed

emyarod mentioned this pull request Mar 25, 2020

Add optional character count to text input #5702

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: text input and textarea character limit counter #2745

feat: text input and textarea character limit counter #2745

emyarod commented May 15, 2019

netlify bot commented May 15, 2019

netlify bot commented May 15, 2019

netlify bot commented May 15, 2019 •

edited

Loading

netlify bot commented May 15, 2019 •

edited

Loading

asudoh left a comment

emyarod commented May 15, 2019

asudoh commented May 15, 2019

emyarod commented May 15, 2019

asudoh commented May 15, 2019

emyarod commented May 15, 2019 •

edited

Loading

shixiedesign left a comment •

edited by emyarod

Loading

shixiedesign left a comment •

edited by emyarod

Loading

emyarod commented May 21, 2019 •

edited

Loading

shixiedesign commented May 21, 2019 •

edited

Loading

shixiedesign left a comment

asudoh left a comment

feat: text input and textarea character limit counter #2745

feat: text input and textarea character limit counter #2745

Conversation

emyarod commented May 15, 2019

Changelog

Testing / Reviewing

netlify bot commented May 15, 2019

netlify bot commented May 15, 2019

netlify bot commented May 15, 2019 • edited Loading

netlify bot commented May 15, 2019 • edited Loading

asudoh left a comment

Choose a reason for hiding this comment

emyarod commented May 15, 2019

asudoh commented May 15, 2019

emyarod commented May 15, 2019

asudoh commented May 15, 2019

emyarod commented May 15, 2019 • edited Loading

shixiedesign left a comment • edited by emyarod Loading

Choose a reason for hiding this comment

shixiedesign left a comment • edited by emyarod Loading

Choose a reason for hiding this comment

emyarod commented May 21, 2019 • edited Loading

shixiedesign commented May 21, 2019 • edited Loading

shixiedesign left a comment

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

netlify bot commented May 15, 2019 •

edited

Loading

netlify bot commented May 15, 2019 •

edited

Loading

emyarod commented May 15, 2019 •

edited

Loading

shixiedesign left a comment •

edited by emyarod

Loading

shixiedesign left a comment •

edited by emyarod

Loading

emyarod commented May 21, 2019 •

edited

Loading

shixiedesign commented May 21, 2019 •

edited

Loading