[Hold for payment Sept 8th] Workspace invite - "Add personal message" box in workspace looks very small

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Launch the app
2. Log in with expensifail account
3. Click on Plus button and select New Workspace
4. Select People
5. Click Invite
6. Put any email addresses or phone number
7. Start typing anything in "Add a personal message" box

Expected Result:

Add personal message" box in workspace should looks much bigger, so people can able to use scroller and see the all message.

Actual Result:

Add personal message" box in workspace looks very small. It's uncomfortable to edit a long message.

Workaround:

N/A

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.0.85-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5190631_Screen_Recording_20210811-195030_Expensifycash.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @AndrewGable (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[shawnborton]

It sounds like we didn't consider textareas when implementing the new text input styles. I could see us taking one of two paths here (cc @Expensify/design @kakajann )

Left: use a similar style where the label floats above the value, just make the input area taller
Right: move the label to be outside of the input

I think the left option is more aligned with the system we've created so far.

[parasharrajat]

This is going to be tricky. Textarea's are never meant to be fixed height. Also, we do have some inputs where, input height increases wrt input text.

[shawnborton]

Great points Rajat, but I think we can keep those in mind when building this. As in, I think the design above on the left can work in a textarea that grows or can have a flexible height.

[kakajann]

@shawnborton, currently expensiTextInputContainer has 52px of height. We can check the ExpensiTextInput has multiline prop and remove its height if its multiline.

Here's how

<View
    style={[
        !this.props.multiline && styles.componentHeightLarge,
        ...containerStyles,
    ]}
>
    ...
</View>

Result

Screen_Recording_20210813-205116_New.Expensify.mp4

[shawnborton]

Looks good to me - glad this is an easy one! I will let one of our engineers chime in from a technical perspective, but it seems reasonable.

[MelvinBot]

Triggered auto assignment to @Christinadobrzyn (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[AndrewGable]

@Christinadobrzyn can you please hire @kakajann via Upwork? Thanks

[kakajann]

@shawnborton Did you notice that placeholder doesn't show unless user focuses the input. Do you want me to always show the placeholder for the multiline ExpensiTextInputs?

[shawnborton]

Great point. I think we should treat the label like a placeholder to the best of our ability - otherwise we should just pre-fill the text input with the desired text that we might want the user to start off with. So I'd say let's continue to treat these like our text inputs where we basically don't use placeholder text - we just use labels. How does that sound?