feat(text-input): add inline option for TextInput (#5915)#6252
Conversation
|
Deploy preview for carbon-elements ready! Built with commit cb943e5 |
|
Deploy preview for carbon-components-react ready! Built without sensitive environment variables with commit cb943e5 https://deploy-preview-6252--carbon-components-react.netlify.app |
|
Thanks for the heads up @emyarod 🙌 |
laurenmrice
left a comment
There was a problem hiding this comment.
Hey @lucasmccomb , thanks for taking the time to work on this !
Instead of doing percentage based spacing, we should follow this specs spacing for these scenarios as a default:
|
Thanks for the feedback @laurenmrice! Do you know if the |
|
Yes it would apply to the label too 👍🏻 @lucasmccomb |
|
Requested changes have been made @laurenmrice — ready for re-review. |
laurenmrice
left a comment
There was a problem hiding this comment.
Looking great! Just one more thing, we need to adjust the label type token and bring it down so it is aligned with the text in the input (there might not always be helper text since it is optional, so we want to always align the label). And also make sure the spacing is 2px between the label and helper text .
Here is a spec for those changes:
laurenmrice
left a comment
There was a problem hiding this comment.
Okay alignment looks great at the default size, but needs to also align when changed to the xl or sm sizes. then we should be good
|
@laurenmrice Just some minor content things on the images...
That's it! Thank you. |
|
@laurenmrice addressed the size variant alignment issues 👍 |
|
@lucasmccomb looks good to me from a design perspective! we just need to update the story content with Jans fixes above ^ |
Changes TextInput react component to allow for inline variant and adds required styles. Updates TextInput Storybook page to include inline variant in Knobs tab.
tw15egan
left a comment
There was a problem hiding this comment.
LGTM, thanks for the contribution! 👍 ✅
laurenmrice
left a comment
There was a problem hiding this comment.
looks awesome! thanks so much for doing this 🙌🏻
|
Thanks all! |
Closes #5915
Changes TextInput react component to allow for inline variant
and adds required styles. Updates TextInput Storybook page
to include inline variant in Knobs tab.
Changelog
Changed
Testing / Reviewing
storybooklocallyInline variant (inline)Show form validation UI (invalid)to see invalid state of input