carbon
carbon copied to clipboard
carbon-design-system
[Feature Request]: Include counter for TextInput
Summary
I would like to proposal adding a text counter to TextInput the same way TextArea has one
Justification
I feel like, that even thought text inputs dont exact large amounts of text as text areas do, theres still services (like ours) that have limits and would be awesome to show that so the styling of the page could match.
Here is a page for our service. the data for all fields has text limits that could extend outside the components view if screen is small enough and would be nice to let the user know of the length.
It is also nice to make it consistent across the page since we have multiple pages of mixture of text areas and text inputs where we use carbons text counter, our own, or mix them but that kind defeats the purpose
Desired UX and success metrics
I feel like the main thing of this is it will help more helpful than not, and consistent with the inputs
Required functionality
This would require some mimics code form the textarea component
Specific timeline issues / requests
N/A
Available extra resources
I dont mind doing a PR for this as I was the one who added it for text area I just need the go ahead
Code of Conduct
- [X] I agree to follow this project's Code of Conduct
@abbeyhrt @joshblack @jnm2377 @tay1orjones can I get some feedback? I am ready to put a PR in when ever you guys allow metoo if you think it is reasonable :)
@TannerS Sorry for the lack of movement here, we've been working to revisit the pipeline for how we evaluate and address enhancement requests so things like this happen less.
I'd like to make sure we loop in design to review the idea - @aagonzales what do you think for this request?
In general, I think it's a good idea to add. But I think it may need some design exploration (it's been a while since we've looked at it). Is this the best way to surface character count?
uk.gov does it as help text under the field and in more of a sentenced format.
Characters remaining vs characters used ... maybe there's a need for both
Seems like its pretty common to count down instead of up https://designsystem.digital.gov/components/character-count/
Material uses a ratio though ... like the original design. This is why some design research/exploration might be helpful before moving forward/
Spectrum has another approach that is similar to our Text fields or text areas. The only concern is if the label gets long, it may get into the character count.
I can do any design that is chosen I just feel both text input and text area should match
Get Outlook for Androidhttps://aka.ms/AAb9ysg
From: thyhmdo @.> Sent: Monday, July 25, 2022 10:56:48 AM To: carbon-design-system/carbon @.> Cc: Tanner Summers @.>; Mention @.> Subject: Re: [carbon-design-system/carbon] [Feature Request]: Include counter for TextInput (Issue #11179)
Spectrum has another approach https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fspectrum.adobe.com%2Fpage%2Ftext-field%2F&data=05%7C01%7C%7C907edef6dab94483b8ea08da6e5648e1%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637943614130588998%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=FlxPGnikaZ8%2FbXJO9PSrSLTZ3fvErM6TDYzby5jhioQ%3D&reserved=0 that is similar to our Text fields or text areas. The only concern is if the label gets long, it may get into the character count.
[https://camo.githubusercontent.com/b10e111fa022bece44b4cc6853dc7aa8ae8d881ebe15254a2bfa1c08884c45ce/68747470733a2f2f737065637472756d2e61646f62652e636f6d2f7374617469632f696d6167657331782f746578742d6669656c645f616e61746f6d795f313634353635333334393633382e706e67]https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcamo.githubusercontent.com%2Fb10e111fa022bece44b4cc6853dc7aa8ae8d881ebe15254a2bfa1c08884c45ce%2F68747470733a2f2f737065637472756d2e61646f62652e636f6d2f7374617469632f696d6167657331782f746578742d6669656c645f616e61746f6d795f313634353635333334393633382e706e67&data=05%7C01%7C%7C907edef6dab94483b8ea08da6e5648e1%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637943614130745901%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=098qLQajwaPvDQ%2FO3gNdS6uChy%2BlxNv45wza4uJm1VE%3D&reserved=0
— Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcarbon-design-system%2Fcarbon%2Fissues%2F11179%23issuecomment-1194272802&data=05%7C01%7C%7C907edef6dab94483b8ea08da6e5648e1%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637943614130745901%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=pRKeGjUSMWX0zQu48xBOlc3V3vpchF6ibKTTmpJrkuk%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FACDUUD5STP6F4TOSKLLQ6ODVV22MBANCNFSM5S2PEWVA&data=05%7C01%7C%7C907edef6dab94483b8ea08da6e5648e1%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637943614130745901%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=fofU1793PUs%2FOTJhsBdcSge4BJmkScUvRZhE2p6Ku2A%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.***>
Hey @TannerS, @jeanservaas will bring this idea to the DSAG and assess the appetite of this proposal to validate whether it's worth taking on. Please reach out to her for when that will be taking place. We'll also be looking for designers, that can spare some cycles to bring this over the line for you and harden the design spec, after which, it'll be back to you to contribute back to Carbon. We can help guide you through this process in dev office hours.
@sstrubberg just let me know, i added the code to the text area for the original idea anyways so the text area already has the text counter. I just thought it would be consistent to add it to the text input also. but since its coming up that the design is not ideal, then that would not make since to make text input look one way but text area have the code working the way it does now, so its either all or nothing (change none or change both) but either way i just wantedto continue the work to the other text component when one is already having this feature but ya let me know
Sweet. @TannerS Would you be open to coming to design office hours so we can hash this out? @aagonzales @jeanservaas
@sstrubberg sure (no access to that box note) feel free to invite me hahehe
For some reason that link above isn't working for me, here it is again.
https://ibm.ent.box.com/notes/660977053477?s=sr66djycn0u35a3yj34s3pse6wglya1q
Hey Anna, I'm just trying to piggy back off how the TextArea is currently doing it. I believe the TextArea has it on top with the label due to conflicting with the helper text but I could be wrong. With that said, if the design for the text input differs based off these suggestions, I feel the TextArea should follow so both should be consistent
Get Outlook for Androidhttps://aka.ms/AAb9ysg
From: Anna Gonzales @.> Sent: Monday, July 11, 2022 2:57:26 PM To: carbon-design-system/carbon @.> Cc: Tanner Summers @.>; Mention @.> Subject: Re: [carbon-design-system/carbon] [Feature Request]: Include counter for TextInput (Issue #11179)
Material uses a ratio though ... like the original design. This is why some design research/exploration might be helpful before moving forward/
— Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcarbon-design-system%2Fcarbon%2Fissues%2F11179%23issuecomment-1180808050&data=05%7C01%7C%7C2f166bd5528c4857981808da6377948b%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637931662487043608%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=zdmF0kVgIE3Po0ySm9gERExnnJs9uj2luYfvpJJUobY%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FACDUUD7I3ARXN7AYIHZP72LVTR4CNANCNFSM5S2PEWVA&data=05%7C01%7C%7C2f166bd5528c4857981808da6377948b%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637931662487043608%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=2xh3g%2F3uO0YIPvcajP%2BuaL8InYrHBnFsYxon3CZ16zw%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.***>