feat(text-input): add inline option for TextInput (#5915)

[lucasmccomb]

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

• TextInput React component (packages/react/src/components/TextInput/TextInput.js)
• TextInput styles (packages/components/src/components/text-input/_text-input.scss)
• TextInput Storybook page (packages/react/src/components/TextInput/TextInput-story.js)

Testing / Reviewing

1. fetch/checkout branch and run storybook locally
2. open Storybook in browser and navigate to TextInput > Default page
3. click on Knobs tab
4. scroll to bottom of Knobs and toggle on Inline variant (inline)
5. observe the inline variant of input
6. toggle on Show form validation UI (invalid) to see invalid state of input

[netlify]

Deploy preview for carbon-elements ready!

Built with commit cb943e5

https://deploy-preview-6252--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit cb943e5

https://deploy-preview-6252--carbon-components-react.netlify.app

[emyarod]

just a heads up, snapshots need to be updated to pass CI

yarn test -u

[lucasmccomb]

Thanks for the heads up @emyarod 🙌

[laurenmrice]

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:

[lucasmccomb]

Thanks for the feedback @laurenmrice! Do you know if the 128px max-width of the helper text also applies to the label?

[laurenmrice]

Yes it would apply to the label too 👍🏻 @lucasmccomb

[lucasmccomb]

Requested changes have been made @laurenmrice — ready for re-review.

[laurenmrice]

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]

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

[janchild]

@laurenmrice Just some minor content things on the images...

• Where you have the label "Text input label", the word "input" should be lower case to keep it sentence case.
• Use "help text" instead of "helper text".
• Where you have "Optional helper text", you don't need a period.

That's it! Thank you.

[lucasmccomb]

@laurenmrice addressed the size variant alignment issues 👍

[laurenmrice]

@lucasmccomb looks good to me from a design perspective! we just need to update the story content with Jans fixes above ^

[tw15egan]

LGTM, thanks for the contribution! 👍 ✅

[laurenmrice]

looks awesome! thanks so much for doing this 🙌🏻

[lucasmccomb]

Thanks all!