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

Update Copyable UI #1656

Merged
merged 4 commits into from
Oct 2, 2023
Merged

Update Copyable UI #1656

merged 4 commits into from
Oct 2, 2023

Conversation

laurakwhit
Copy link
Contributor

@laurakwhit laurakwhit commented Sep 29, 2023

Description & motivation 💭

  • Updates Copyable component to look more like the copy button in the CodeBlock component so that it doesn't take up as much height and isn't clipped.
    Screenshot 2023-09-29 at 4 16 37 PM

  • Fixes truncation on links without an icon.

  • Creates reusable /copyable/button.svelte used in the Copyable and CodeBlock component.

Screenshots (if applicable) 📸

Before After
Screenshot 2023-10-02 at 12 32 38 PM Screenshot 2023-10-02 at 12 28 43 PM
Screenshot 2023-10-02 at 12 32 52 PM Screenshot 2023-10-02 at 12 28 53 PM
Screenshot 2023-09-29 at 1 54 26 PM Screenshot 2023-09-29 at 4 06 49 PM
Screenshot 2023-09-29 at 3 02 40 PM Screenshot 2023-09-29 at 3 34 14 PM
Screenshot 2023-09-29 at 3 01 29 PM Screenshot 2023-09-29 at 3 33 52 PM
Screenshot 2023-09-29 at 4 04 51 PM Screenshot 2023-09-29 at 4 04 28 PM

Design Considerations 🎨

Testing 🧪

How was this tested 👻

  • Manual testing
  • E2E tests added
  • Unit tests added

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

@vercel
Copy link

vercel bot commented Sep 29, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
holocene ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 2, 2023 6:38pm

on:click={(e) => copy(e, content)}
>
<slot>
<span class={$$props.class} class:select-all={!$$slots.default}
>{content}</span
>
</slot>
<IconButton
<button
on:click={(e) => copy(e, content)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we just have a CopyButton component?

Copy link
Contributor Author

@laurakwhit laurakwhit Oct 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, was just talking with @tigernaut about this. I think probably? Added ✅ But we likely need to have a bigger discussion of if we want this and IconButton to be variants of the Button component.

@laurakwhit laurakwhit merged commit 404db9c into main Oct 2, 2023
10 checks passed
@laurakwhit laurakwhit deleted the update-copyable branch October 2, 2023 20:18
Alex-Tideman pushed a commit that referenced this pull request Oct 4, 2023
* Make copyable UI similar to copy button in CodeBlock

* Fix truncation in links without icons

* Update snap

* Create CopyButton component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants