feat(text-input): adds fluid variation of text input

[aledavila]

References #5416

Adds fluid form component
Fluid form will handle fluid for all of the components in form

Changelog

New

• fluid text input variation
• add new FluidForm component

Check text inputs work and look as intended. Check fluid text input matches.

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 13b93d9

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

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 13b93d9

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

[asudoh]

Wondering if we can we make this a prop... I imagine usage of context may stem from design guide dictating that fluid is per-form basis. OTOH software designs tend to go further, which is, setting API in different levels (layers). So we can break down "per-form fluid mode" for component implementation, one is a pure mean to change fluid/regular modes (e.g. <TextInput layout="fluid">), another is app-level mean to ensure all form items is the desired mode, e.g.:

const AppTextInput = props => {
  const { useFluid } = useContext(FormContext);
  return <TextInput {...props} layout={useFluid ? 'fluid' : 'regular'} />;
};

[tw15egan]

@asudoh we decided to use context because we wanted to avoid having the user set a fluid prop for each individual form element. Since they can only be used in the context of a FluidForm, we wanted to make it as easy as possible for users to create a fluid form, while not allowing much deviation from design.

[asudoh]

I see, thank you for the background @tw15egan. I tend to avoid making "syntactic sugar" thing affect system design (UX-level requirement and system design are often different animals), but I at least now see where it came from.

Another approach to achieve such syntactic sugar is introducing <FluidTextInput>.

[aledavila]

@aagonzales hey I removed the margin but also removed the button for now. We are slowly building the fluid form since more things need to be added in, which will happen in a separate PR. For now this mainly for the text input.

[aagonzales]

The preview link isn't working but since this PR is just about text input I'll go ahead and 👍

[dakahn]

Looks good. Thanks and sorry for getting to this so late 🏄