Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ClipboardCopy - Allow truncate flexibility #10890

Open
gitdallas opened this issue Aug 28, 2024 · 3 comments
Open

ClipboardCopy - Allow truncate flexibility #10890

gitdallas opened this issue Aug 28, 2024 · 3 comments
Labels
Feature end user feature that requires design to define this, i.e. changes or augments the user experience.

Comments

@gitdallas
Copy link
Contributor

gitdallas commented Aug 28, 2024

ClipboardCopy currently truncates at the end. It may be nice in some cases to truncate at the start or middle (similar to how Truncate component works).

A workaround could currently work with inline-compact with some hacking, see https://codesandbox.io/p/sandbox/red-wind-zdgyqf

    <ClipboardCopy
      variant={"inline-compact"}
      style={{ display: "inline-flex" }}
      clickTip="Copied"
      onCopy={() => {
        navigator.clipboard.writeText(textToCopy);
      }}
    >
      <Truncate
        content={textToCopy}
        trailingNumChars={10}
        position={"middle"}
      />
    </ClipboardCopy>

However, this wouldn't work with other variants. They all use TextInput, as part of this feature I believe TextInput would also have to be updated to work with middle truncate (currently it only has start/end).

Could use props like truncatePosition, and truncateTrailingNumChars for middle.

This came up in a slack conversation with Vince Consola and @christianvogt

It would also be nice if inline-compact supported truncate by itself as well.

@gitdallas gitdallas added the Feature end user feature that requires design to define this, i.e. changes or augments the user experience. label Aug 28, 2024
@tlabaj tlabaj added this to the Prioritized Backlog milestone Sep 19, 2024
@tlabaj
Copy link
Contributor

tlabaj commented Sep 19, 2024

@mattnolting would we need css support for this?

@Griffin-Sullivan
Copy link

Would like to note here that in PF5 ClipboardCopy expects children of type React.ReactNode so the above example can be done without any issues. In PF6, ClipboardCopy expects children of type string. It seems to still work when passing the Truncate component but my IDE is upset about it.

@mattnolting
Copy link
Contributor

@mattnolting would we need css support for this?

@tlabaj Doesn't appear to need any additional CSS support. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature end user feature that requires design to define this, i.e. changes or augments the user experience.
Projects
Status: Backlog
Development

No branches or pull requests

4 participants