feat(text-input): add readonly variant #8806

janhassel · 2021-05-31T15:47:21Z

Ref #2177, #3018, #3054

Adds a readonly variant to the TextInput component.

Intentional differences from the original design spec:

No tooltip on the EditOff16 icon
- Looking at the planned changes of the tooltip component in v11, adding full support for that at this time seems inefficient. It would require the addition of multiple props that aren't really in the scope of the text input but rather of the tooltip (tooltipAlignment, tooltipPosition) and might introduce accessiblity issues that are to be addressed with the tooltip changes in v11.
- In the meantime, teams can still inform their users about the reason why a field is read-only with a couple of options:
  - Use the helper text as explaination
  - Include a tooltip in the form label (quick poc with disabled field: https://jfckr.csb.app/)
No tooltip on the entire input to show overflow text
- Same as above
- Users have the ability to "scroll" inside the field with both their mouse or their keyboard (arrow keys) to reveal overflowing text (native browser behaviour)

Changelog

New

props.readonly on TextInput

Testing / Reviewing

Ensure readonly attribute is set to <input> accordingly
Ensure no visual regressions appear with any combination of invalid, warn, readonly on both the TextInput and the PasswordInput component
Ensure that no error states are shown when a field is marked as readonly

Side note: this PR also adds a helper useNormalizedInputProps which aims to reduce some of the many conditional renderings that were introduced over time (e.g. {!invalid && !warn && !isFluid && !inline && helper}) by outsourcing them and providing a single entry for the icons and validation messages.
The intent is to add readonly support to other inputs as well (like NumberInput). This utility should help there as well and streamline the inputs. Let me know what you think!

netlify · 2021-05-31T15:56:26Z

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: f2d8a50

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

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

netlify · 2021-05-31T16:06:16Z

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 64b2ccb

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

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

netlify · 2021-05-31T16:08:12Z

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

🔨 Explore the source changes: f2d8a50

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

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

netlify · 2021-05-31T16:29:13Z

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

🔨 Explore the source changes: 64b2ccb

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

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

sstrubberg

Read-only appears to take precedence over warn and invalid. Was that the intended outcome?

Also, the stuff below.

packages/react/src/components/TextInput/TextInput.js

Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com>

janhassel · 2021-06-02T07:26:05Z

@sstrubberg Yes, when readonly is passed, both invalid and warn should be ignored. I based this on @shixiedesign's comment from two years ago:

Is it possible to disable "error state" on read-only? This situ shouldn't arise. It doesn't give user a way forward since field cannot be edited.

tay1orjones

When disabled, I think the icon should probably be modified to match text color?

Also how should we treat it with the light prop? Selecting between the readonly and light knobs there is no visual difference other than the icon. @carbon-design-system/design

light-readonly-toggle.mov

tay1orjones · 2021-06-02T19:11:27Z

packages/react/src/internal/useNormalizedInputProps.js

+
+const { prefix } = settings;
+
+export function useNormalizedInputProps({


I think this is a good point of abstraction. Could you add a jsdoc-type comment for it so we have some context on what this hook accomplishes, when it should be used, expected param types, etc?

Pushed an update adding some guidance aorund it. Let me know what you think of it!

janhassel · 2021-06-07T08:23:48Z

@tay1orjones Actually, now that you bring it up: readonly should probably take precedence over disabled / block disabled from being applied. Or can you think of a use case where a disabled read-only field would make sense?

johnbister

If read only takes precedence over disabled being applied, it looks fine visually. But if you think of a use case where a disabled read-only would be used, I would make the icon the same color as the disabled text like Taylor said. Let me know what you decide and I’ll approve.

johnbister · 2021-06-14T15:17:24Z

readonly taking precedence over disabled looks good for textinput!

@janhassel I don't see the readonly variant for the passwordinput. Is this PR still adding the readonly variant to both textinput and passwordinput? I apologize if I'm just missing something.

janhassel · 2021-06-14T15:24:47Z

@johnbister My plan would be to add support for readonly step by step to more components. I think building out the ground work in this one and then apply it to others can help keep the PRs manageable.

johnbister

lgtm!

johnbister

lgtm!

janhassel · 2021-06-17T13:53:35Z

@tay1orjones Regarding the light prop question: Afaik the design intent is to not have any background when the input is readonly, so I set it to transparent. Therefore there is no visual differenation between light and regular.

tay1orjones

Thanks for the follow up @janhassel , sounds good 👍

janhassel added 2 commits May 31, 2021 17:14

feat(text-input): add readonly variant

f2d8a50

fix(text-input): correct padding-right when in readonly mode

93b08f5

janhassel requested review from a team as code owners May 31, 2021 15:47

janhassel requested review from tay1orjones and sstrubberg May 31, 2021 15:47

sstrubberg requested changes Jun 1, 2021

View reviewed changes

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

Update packages/react/src/components/TextInput/TextInput.js

6ae7fb2

Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com>

fix: update public api snapshot

700fcfe

sstrubberg self-requested a review June 2, 2021 14:58

sstrubberg approved these changes Jun 2, 2021

View reviewed changes

tay1orjones requested changes Jun 2, 2021

View reviewed changes

tay1orjones added status: ready for review 👀 status: visual review 🔍 labels Jun 2, 2021

tay1orjones requested review from a team and johnbister and removed request for a team June 2, 2021 19:29

docs(use-normalized-props): add guidance to useNormalizedProps hook

a25cf81

johnbister reviewed Jun 11, 2021

View reviewed changes

feat(text-input): ensure readonly takes precedence over disabled

be40825

johnbister self-requested a review June 14, 2021 15:29

johnbister approved these changes Jun 14, 2021

View reviewed changes

janhassel requested a review from tay1orjones June 17, 2021 13:51

tay1orjones approved these changes Jun 17, 2021

View reviewed changes

tay1orjones added status: ready to merge 🎉 and removed status: ready for review 👀 status: visual review 🔍 labels Jun 17, 2021

Merge branch 'main' into readonly-text-input

64b2ccb

kodiakhq bot merged commit 8f6ba79 into carbon-design-system:main Jun 17, 2021

janhassel deleted the readonly-text-input branch June 18, 2021 07:43

This was referenced Jun 18, 2021

fix(text-input): align "readOnly" prop capitalization #8949

Merged

feat(number-input): match readonly variant #8992

Merged

jnm2377 mentioned this pull request Jun 22, 2021

v10.38.0 #8989

Closed

22 tasks

tay1orjones mentioned this pull request Dec 7, 2021

[Question]: Should TextInput inline invalidMessage appear somewhere in the DOM? #10234

Closed

1 task

jnm2377 mentioned this pull request Feb 17, 2022

fix(styles): add readonly text-input styles #10778

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(text-input): add readonly variant #8806

feat(text-input): add readonly variant #8806

janhassel commented May 31, 2021

netlify bot commented May 31, 2021

netlify bot commented May 31, 2021 •

edited

Loading

netlify bot commented May 31, 2021

netlify bot commented May 31, 2021 •

edited

Loading

sstrubberg left a comment •

edited

Loading

janhassel commented Jun 2, 2021

tay1orjones left a comment •

edited

Loading

tay1orjones Jun 2, 2021

janhassel Jun 7, 2021

janhassel commented Jun 7, 2021

johnbister left a comment

johnbister commented Jun 14, 2021 •

edited

Loading

janhassel commented Jun 14, 2021

johnbister left a comment

johnbister left a comment

janhassel commented Jun 17, 2021

tay1orjones left a comment


		const { prefix } = settings;

		export function useNormalizedInputProps({

feat(text-input): add readonly variant #8806

feat(text-input): add readonly variant #8806

Conversation

janhassel commented May 31, 2021

Changelog

Testing / Reviewing

netlify bot commented May 31, 2021

netlify bot commented May 31, 2021 • edited Loading

netlify bot commented May 31, 2021

netlify bot commented May 31, 2021 • edited Loading

sstrubberg left a comment • edited Loading

Choose a reason for hiding this comment

janhassel commented Jun 2, 2021

tay1orjones left a comment • edited Loading

Choose a reason for hiding this comment

tay1orjones Jun 2, 2021

Choose a reason for hiding this comment

janhassel Jun 7, 2021

Choose a reason for hiding this comment

janhassel commented Jun 7, 2021

johnbister left a comment

Choose a reason for hiding this comment

johnbister commented Jun 14, 2021 • edited Loading

janhassel commented Jun 14, 2021

johnbister left a comment

Choose a reason for hiding this comment

johnbister left a comment

Choose a reason for hiding this comment

janhassel commented Jun 17, 2021

tay1orjones left a comment

Choose a reason for hiding this comment

netlify bot commented May 31, 2021 •

edited

Loading

netlify bot commented May 31, 2021 •

edited

Loading

sstrubberg left a comment •

edited

Loading

tay1orjones left a comment •

edited

Loading

johnbister commented Jun 14, 2021 •

edited

Loading