Link-style button in text area

[pguptaDS]

Hello! I am migrating some old designs to paste and was wondering if its possible to replicate this behavior using paste components? Essentially, the functionality we want is being able to collapse/expand text within a read-only text area.

Here's what the old designs look like:
Collapsed:

Expanded:

[richbachman]

Hi @pguptaDS I'm checking in with the team on this one. We'll be back in touch asap.

[pguptaDS]

Hello @richbachman! Just wanted to check in on this. Please let me know if you have any questions for me.

[richbachman]

Hi @pguptaDS

We've been discussing this as a team, and I mocked up a quick prototype to show how this might look using Paste components. This is purely presentational so none of the buttons actually work.

https://codesandbox.io/s/copy-cert-example-r6px2?file=/src/index.tsx

There's a couple things we'd need to work-through:

1. How important is the expand / collapse functionality? If its necessary, we'll have to add some for consumers to control the height of the text area. Right now the height is determined by the content, along with a max-height. I'm currently discussing options with team.
2. The copy button functionality is a work in progress as well. We should have a copy to clipboard library in the next Paste release.

We'll be back in touch as soon as we have more info. Thanks for your patience.

[richbachman]

Hi @pguptaDS. Quick clarifying question. Is the purpose of this to copy the certificate to the clipboard, or to just view the certificate?

[pguptaDS]

@richbachman The main purpose is to be able to view the certificate.

[richbachman]

@pguptaDS circling back here finally. Sorry for the delay. Since the main purpose is to be able to view the certificate, it'd be best to use a textarea like this example: https://codesandbox.io/s/cert-example-forked-16c0g?file=/src/index.tsx

We're throwing around the idea of having a variant of Textarea with an adjustable height. Once we land on a decision there, we'll let you know.

[pguptaDS]

Hi @richbachman! Can you please also help us understand WHY the link within the text area is not desirable?

[richbachman]

@pguptaDS semantically, there's no way to put a button inside of a textarea. You could absolutely position a button so it visually appears to be inside the textarea.

Something like: https://codesandbox.io/s/cert-example-forked-16c0g?file=/src/index.tsx (not perfect, just showing the concept). That way the button and textarea are both focusable elements.

A note on element order also. Ideally the expand/collapse button would be before the content it controls/reveals.