Fluid inputs: TextInput

[tay1orjones]

This issue is for providing the first experimental fluid input variant, TextInput. This will span both design and development to lay the groundwork for additional fluid input components to be added to the system, #5416.

Checklist

• Fluid inputs: TextInput docs carbon-website#3091
  • Create website branch to house updates
  • Update "style" and "usage" tabs of component page to include Fluid variant
• Fluid inputs: Provide design tooling updates for TextInput
  • [Figma] Add "Fluid inputs: TextInput"  carbon-design-kit#557 (priority)
• Fluid inputs: Add TextInput experimental implementation
  • Determine if the existing FluidForm is needed, how it fits into the picture
    • FluidTextInput renders a FluidForm instead of it being behind the isFluid prop
  • Place implementation behind isFluid prop Place implementation within a new component, FluidComponentName
  • Add VRT tests via storybook story e2e setup
  • Add unit tests (likely simple, eg. "does the classname get added")
  • Add storybook example
  • Ensure styles are properly scoped to their own file
    • We could make a new fluid-text-input.scss that imports text-input.scss and just contains the fluid specific styles, sort of how we do MultiSelect and the other ListBox components. feat(FluidTextInput): create unstable__FluidTextInput component #11971 (comment)
• Fluid inputs: Add FluidTextInput to FluidForm story #12018
• Fluid inputs: TextInput - add skeleton state #12080
• Fluid inputs: TextInput - add password input #12081

Spec

Figma file | Sketch file

[aagonzales]

Additional missing features that need to be added to Fluid TextInput

• Fluid inputs: TextInput - add skeleton state #12080
• Fluid inputs: TextInput - add password input #12081