TextArea default height

[HartiganHM]

Hey, all!

We're running the latests @twilio-paste/core which is 9.6.1 and have a couple of question about the default height/minHeight of the TextArea component. In the docs, it looks like this is set to 76px:

However, when we go to implement it, it defaults to 36px:

I've double-checked any cascading styles, tried it outside of our current page, and copy-pasted code snippets directly from the docs and it stays at 36px.

Is this expected? If so, how do we visually distinguish a "text area" form field from an "input" form field, especially when the height: never is set on the TextAreaProps?

Happy to share more details as needed, thanks!

[richbachman]

Hi @HartiganHM. That looks like a tricky one. Sorry for the troubles. I just setup a CodeSandbox using TextArea and it looks like its showing the height as expected: https://codesandbox.io/s/solitary-microservice-7tv7l?file=/src/index.tsx.

Can you share any other information about your implementation so we can help troubleshoot. Thanks!

[richbachman]

Yeah. That would be great. Thanks!

[SiTaggart]

@HartiganHM Curious what the plan or need is for CSS Modules? Are you going all in on Paste?

[HartiganHM]

@richbachman Sent!

Hey, @SiTaggart! CSS Modules is a team adopted practice for styling. I've been with the team since August and it was cemented before I joined. I don't think we have any plans to change, but I do know that we're going as all in on Paste as is possible.

Would CSS Modules provide any issues? Do you have another recommendation?

[SiTaggart]

It wouldn't necessarily cause any direct conflicts with Paste, but you might run into situations where you have a less than ideal customer experience if you build some custom UI using CSS modules, but also want to take advantage of something like a dark mode.

The CSS modules part of the UI wouldn't respond to the theme change in the same way as the other Paste components, leading to a sub-optimal customer experience. We're hoping you get everything you need from Paste and don't need to use something like CSS modules, that way your custom UI will also respond to the same theme and design language updates, just like out of the box component would.

We have produced a short guide on this https://paste.twilio.design/tokens/how-to-compose-custom-ui-with-tokens

[HartiganHM]

Yeah, that all makes sense. We do have some need for custom components outside of what Paste currently provides. For instance, I'm working on a FileInput right now that we need in the next few days. However, it's using a Paste Button and the native input is hidden, so we don't anticipate any cascading side-effects.

Additionally, for some of our devs (myself included) it's easier to some styling (e.g. layouts) in CSS/SCSS. We're aware of things like Flex/Grid and have tried them out, but CSS gives us a bit more flexibility (though we have divergent opinions about this on our team, so I'm just speaking for myself).

The guide you provided should be helpful, so I'll make sure to reference it for any custom component we build. Happy to discuss things more offline if you're curious about our approach/have suggestions!