[New] MediumMultilineInput and LargeMultilineInput Elements

[samad-yar-khan]

feat: New MediumMultilineInput and LargeMultilineInput Elements

• I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
• I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
• Lint and unit tests pass locally with my changes
• I have labeled the PR correctly with the related package
• I have run visual regression tests (if applicable)
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Why Do We need this ?

• Larger Multiline Input Elements will open new possibilities for Rocket.Chat App Developers.

• Larger input components can be used in future apps which include a Code Editing App where the developers pair program inside Rocket.Chat.

• Or a Journal App/Notes App where journal Entries or more extensive notes can be made in RC

• Or a Future GitLab integrations where a code Review and Edit feature will be desirable.

• Larger can even be used in the main chat input component to edit and send a larger message to the Rocket.Chat channel, which may not be possible with the current input component.

• Our use case and motivation to add this component to fuselage was to enable users display and merge PRs right from RocketChat channels through the GitHub App. This will be an exclusive feature which is not available in any GitHub x Messaging app intigration.

• We currently use the SectionBlock as the InputBlock is too small, but the SectionBlock looses the indentation.

• 2022-07-15.20-13-48.mp4

• A Larger Input component can help us take fix this as it preserves indentation. This would improve community collaboration over Rocket.Chat and push Messaging x Developer Collaboration to the limits

• The Same component can also be extended to add new Issues to GitHub or A Rocket.Chat app which parses and display markdown. The possibilities can be endless.

• Updating the Multi-Line InputBlock #744

Proposed changes (including videos or screenshots)

• Added New MediumMultilineInput and LargeMultilineInput elements to fuselage-ui-kit.

• Added the new elements to the storybook.

• Input With Medium Multiline Plane Text Input

  • Banner

2022-07-11.05-33-07.mp4

• Modal

2022-07-11.05-33-33.mp4

• Input With Large Multiline Plane Text Input

  • Banner

2022-07-11.05-34-02.mp4

• Modal

2022-07-11.05-34-29.mp4

Issue(s)

closes #765

[samad-yar-khan]

@MartinSchoeler @ggazzo can you guys please take a look at this PR and suggest any changes

[samad-yar-khan]

@dougfabris @tassoevan Can you guys please take a look and suggest any changes ?

[samad-yar-khan]

@gabriellsh @yash-rajpal Can you please take a look and guide me with this PR. Feel free to message me over Rocket.Chat Open Server samad.khan whenever you find time :)

[ggazzo]

is this some part of other protocol? if there is no standard or compatibility I would stay with something like
multilineSize: 'large' | 'medium' | 'small'

[samad-yar-khan]

@ggazzo Thanks a lot for the review ! Yes, seems like a better option to have it that way. We can stick tomultilineSize: 'large' | 'medium' | 'small' . I will make the required changes.

[samad-yar-khan]

@ggazzo I have updated the parameters for PlainInputTextElement and have replaced the previous parameters by multilineSize. Can you please take a look 😅 ?

[samad-yar-khan]

@ggazzo can you please take a look at this again ? I have made changes according to review comments.

[CLAassistant]

All committers have signed the CLA.