Larger Multiline Input Elements

Problem

• Rocket.Chat Apps developers run into use cases where the need larger input boxes inside a modal.
• Example : In GitHub Rocket.Chat App we want to fetch code and display it inside a MultilineInput Component, but the input box is to small to read code snippets. Please Go through this Discussion -> (https://github.com/RocketChat/fuselage/discussions/744)

Available Component

• The Fuselage UI Kit offers Rocket.Chat App Developers a MultilineInput Element to take user input inside a multiline input box.
• This component works well with small user inputs but it becomes inconvenient for larger user input cases. Example : 1) Adding a code snippet as input as seen below. 2) Taking Journal Entries as input in a potential RC Journal App

https://user-images.githubusercontent.com/70485812/178166149-7a567e28-8e7e-437e-9318-c538498e5926.mp4

Describe the behavior of New Component

• Adding a new MediumMultilineInput Component and a LargeMultilineInput Component.
• The Existing MultilineInput Component will be used as a SmallMultilineInputComponent

Insert an image

• Medium Multiline Input Component

  • Modal
    

  • Banner
    

• Medium Multiline Input Component

  • Modal
    

  • Banner
    

Start with packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx and review the linked discussion for the proposed input sizes and contexts. Compare the existing MultilineInput behavior with the requested medium and large variants. Done means the new components support the described modal and banner use cases while the existing component remains available as the small variant.