feat(ClipboardCopy): 9712 allow alternative title

[gitdallas]

Closes #9712

https://patternfly-react-pr-9713.surge.sh/components/clipboard-copy#expanded-with-alternate-title

unsure if my verbiage/naming was the best.

setting a title will force the title itself to be readOnly (disabled textinput), but a user can still edit the text that gets copied if there is expandable content for them to do it in the text area, unless isReadOnly is specified in which case they wouldn't be able to edit either place.

[patternfly-build]

Preview: https://patternfly-react-pr-9713.surge.sh

A11y report: https://patternfly-react-pr-9713-a11y.surge.sh

[thatblindgeye]

I have the same reservations as Austin noted in the issue, in that it becomes a little unclear what will actually get copied (unless it's explicitly stated in the title text something like "Yadda yadda (copyable content below)". Right now it's a little apparent since this new example doesn't have any truncation vs the other examples truncating the input content, making it clear the expanded content is the full text, but we may not be able to rely on that depending what title is passed in:

Something like a "label" above the clipboard copy could maybe work (just bold and some bottom padding to illustrate):

Using a span instead of input could be another option, though not sure if it's really distinct enough still, even with toying with the background color to remove the read only styling (possible plus is this won't truncate, it'll just wrap the title text so at least then it's more distinct from a expanded readonly variant):

Something possibly along the lines of what Austin mention in the issue (more GitHub-like), basically just removing the bottom border and the readonly styling:

[gitdallas]

@thatblindgeye - seems like we need some design input here? Personally I think the "label above" example you showed makes a lot of sense, and wouldn't even require any change from us. I'd want to make sure and run that idea across the product that brought up this issue though.

[kmcfaul]

@andrew-ronaldson @mmenestr Pinging for the design question above

Also needs a rebase

[mmenestr]

Just to make sure I understand correctly, the suggestion is that instead of showing a truncated version of what you want to copy, you'd want to have some sort of label to say "hey, expand this to see what would be copied"?

[gitdallas]

Eric's example that I liked was this one:

It provides a label that describes what the text to copy is, and also a truncated version of what is being copied (that can be expanded).

this is basically default functionality of the clipboardcopy tool, adding a normal label above. so if design agrees this looks good, we could just say "do it this way" and close this PR without merging it.

the PR would allow for the top part (that gets truncated) to be something that is completely different than what gets copied, essentially replacing the label with something that becomes part of the clipboardcopy component:

note that both examples can be expanded and collapsed to show that large text underneath.

[thatblindgeye]

@mmenestr That was the original suggestion in the issue, yeah, which Dallas' second image above shows. There was some comments in the original issue with some worries about going that route (confusion as to what is actually getting copied). Dallas' first screenshot was one alternative mentioned in the original issue (there's also another alternative in there that would look similar to GitHub code blocks).

[mmenestr]

I think this option makes the most sense to me:

Personally, in the input field (pre-expansion), I would rather see a truncated version of what I will be copying rather than "this is what will be copied". I think that not seeing what you'll be copying at all unless you expand would be more confusing. We can add that added label if you think it would help, but I would hope that the context in which the copy to clipboard is placed would make that clear already

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[andrew-ronaldson]

If we are adding the input label version for alternate text as an variation to this component I think this is good to go.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.