Add click to copy behavior #119

jamesnw · 2023-08-15T18:09:25Z

Description

Adds Click to Copy behavior on each output format and on the fg and bg colors.

I used navigator.clipboard.writeText, as it appears to have sufficient cross-browser support. Our content is all plain text, and our use case is driven directly by user interaction, so I don't think we need to complicate things.

Steps to test/reproduce

Verify that clicking the button copies the correct value.

netlify · 2023-08-15T18:51:13Z

✅ Deploy Preview for oddcontrast ready!

Name	Link
🔨 Latest commit	`392d049`
🔍 Latest deploy log	https://app.netlify.com/sites/oddcontrast/deploys/6516e647a9ae510008832f7b
😎 Deploy Preview	https://deploy-preview-119--oddcontrast.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

src/lib/components/colors/Output.svelte

…bird/oddcontrast into 100-copy-colors-to-clipboard

src/sass/config/animation/_index.scss

* main: Automated dependency upgrades Automated dependency upgrades Bump actions/checkout from 3 to 4 Automated dependency upgrades only one version of vite at a time Automated dependency upgrades Pin back vitest Automated dependency upgrades pin back vitest for now Automated dependency upgrades review add linkedin and color js links Automated dependency upgrades

stacyk · 2023-09-26T18:23:23Z

src/sass/config/scale/_layout.scss

@@ -8,6 +8,6 @@

 $page: 60rem;
 $sm-column-break: 30em;
-$sm-page-break: 40em;
+$sm-page-break: 42em;


had to move this up since we added the icon for longer formats like p3 to fit

stacyk · 2023-09-26T18:24:27Z

src/sass/initial/_type.scss

+  @container tool (min-width: 15rem) {
+    --tool-font-size: 5cqi;
+  }


cqi ok to use?? I only added this new in-between size since it is only between 15 and 21 rem and p3 can be really long.

Seems like cqi has good support. Nice to see it in use.

If we're using container queries, the units should have the same support.

stacyk · 2023-09-26T18:25:38Z

src/sass/patterns/_animation.scss

+// Animation Patterns
+// ------------------
+
+@keyframes grow-in {


I am growing the copied icon in, but since it doesn't exist after the timer I can't animate it out. I think it would be weird to animate all the copy icons in on page load. It doesn't really bother me that these switch as it might bring a bit more attention to the action you just took.

I think the way this animation works looks good.

@stacyk It would be possible to have it exist longer, if that would be helpful. Or maybe that's part of the story where the arrow morphs into the checkmark?

@jamesnw I don't think having it there longer would fix it as the issue unless we add a class to the clipboard icon so I can fade it in only once it has been toggled (since I wouldn't want all clipboards to fade in on page load). Is that possible? It doesn't really bother me as it currently is but I think it could be a tiny bit improved (maybe not "worth it" at this time though).

@stacyk My sense is that there is a way to add/remove classes and DOM elements in a way that would allow us to do what we want here, but agree it's probably not worth it as part of this PR.

dvdherron

(And my approval was for both the layout-shift issue and the click-to-copy styles)

This looks good to me @stacyk. One thing I noticed that doesn't necessarily need to be addressed here is that the focus outlines are super faint. Especially on Firefox:

Do the buttons look like this for you when in focus?

dvdherron · 2023-09-27T11:18:55Z

src/sass/patterns/_animation.scss

+// Animation Patterns
+// ------------------
+
+@keyframes grow-in {


I think the way this animation works looks good.

dvdherron · 2023-09-27T11:27:05Z

src/sass/initial/_type.scss

+  @container tool (min-width: 15rem) {
+    --tool-font-size: 5cqi;
+  }


Seems like cqi has good support. Nice to see it in use.

…bird/oddcontrast into 100-copy-colors-to-clipboard

stacyk · 2023-09-27T19:26:48Z

@dvdherron I reworked this a bit to add some specific focus styles for icon-only links and buttons so when you get a chance, take another look. Not sure if @mirisuzanne wants to review this as well. I switched to use focus-visible more often to give mouse users a bit of a break.

dvdherron · 2023-09-28T11:58:33Z

I reworked this a bit to add some specific focus styles for icon-only links and buttons

These new focus styles for the icon-only links look great 👍🏽

mirisuzanne

It all works great for me. But the copy buttons are very prominent visually. Maybe they could get a bit lighter icon color or something?

src/lib/components/ratio/index.svelte

mirisuzanne · 2023-09-28T16:04:07Z

src/sass/initial/_type.scss

+  @container tool (min-width: 15rem) {
+    --tool-font-size: 5cqi;
+  }


If we're using container queries, the units should have the same support.

src/lib/components/ratio/index.svelte

stacyk · 2023-09-29T15:02:43Z

It all works great for me. But the copy buttons are very prominent visually. Maybe they could get a bit lighter icon color or something?

@mirisuzanne I lightened all icon-only btw/links in the main and footer areas (so clipboards and social icon links) and also made the clipboards next to the input a tad smaller. I think this works better so thanks for that suggestion.

mirisuzanne · 2023-09-29T15:39:06Z

@stacyk looks great!

Add click to copy behavior

188906b

jamesnw linked an issue Aug 15, 2023 that may be closed by this pull request

Copy colors to clipboard #100

Closed

jamesnw requested a review from stacyk August 15, 2023 18:34

add clipboard icon and styles for copy

affb40c

stacyk reviewed Aug 21, 2023

View reviewed changes

src/lib/components/colors/Output.svelte Outdated Show resolved Hide resolved

jamesnw and others added 9 commits August 22, 2023 14:15

Add copy component, switch icon after copy

c55d070

Lint

ff3d931

copied icon

e0ae972

Merge branch '100-copy-colors-to-clipboard' of https://github.com/odd…

e391e31

…bird/oddcontrast into 100-copy-colors-to-clipboard

add new copy(copied) button

195a0c3

adjust grid track size for icons

6752d13

add icon documentation and color option for success icon

ec4f273

add animation documentation

b23230b

update test

22db19f

stacyk reviewed Sep 26, 2023

View reviewed changes

src/sass/config/animation/_index.scss Show resolved Hide resolved

stacyk and others added 3 commits September 25, 2023 21:26

update easing variable name

b6f7af2

Allow importing from node_modules in Herman examples.

916eac5

jamesnw marked this pull request as ready for review September 26, 2023 15:20

stacyk added 5 commits September 26, 2023 10:40

change css to sass comments

cde9f03

remove less helpful keyframe animation documentation

609b5ff

remove heading from sassdoc comments

e5fea47

adjust type and breakpoints to accomodate new clipboard icon

63738d3

add fixed ratio width to prevent jumping in results

74e172e

stacyk mentioned this pull request Sep 26, 2023

layout shift on certain widths when sliding #123

Closed

lint

b3da1cb

stacyk requested review from dvdherron and jgerigmeyer September 26, 2023 16:48

jgerigmeyer linked an issue Sep 26, 2023 that may be closed by this pull request

layout shift on certain widths when sliding #123

Closed

review

e54b914

jgerigmeyer approved these changes Sep 26, 2023

View reviewed changes

stacyk reviewed Sep 26, 2023

View reviewed changes

jgerigmeyer requested a review from mirisuzanne September 26, 2023 19:09

dvdherron approved these changes Sep 27, 2023

View reviewed changes

stacyk added 11 commits September 27, 2023 14:17

clean up alpha order

27b6376

add transform to button transition

98dd933

move input styles to global pattern

7fa832c

remove unused

7624868

update range thumb focus color

caa6a9d

switch to using focus-visible

b62fd12

add link transform, move social nav to component

be37579

add icon-only button focus styles

dc9cf67

update focus mixin

776a54b

align warning text with input

4a16883

Merge branch '100-copy-colors-to-clipboard' of https://github.com/odd…

be56d59

…bird/oddcontrast into 100-copy-colors-to-clipboard

lint

91575ef

mirisuzanne approved these changes Sep 28, 2023

View reviewed changes

stacyk reviewed Sep 29, 2023

View reviewed changes

src/lib/components/ratio/index.svelte Show resolved Hide resolved

stacyk approved these changes Sep 29, 2023

View reviewed changes

stacyk self-requested a review September 29, 2023 14:37

lighten icon actions

392d049

jgerigmeyer merged commit 446b065 into main Sep 29, 2023
6 checks passed

jgerigmeyer deleted the 100-copy-colors-to-clipboard branch September 29, 2023 15:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add click to copy behavior #119

Add click to copy behavior #119

jamesnw commented Aug 15, 2023 •

edited

Loading

netlify bot commented Aug 15, 2023 •

edited

Loading

stacyk Sep 26, 2023

stacyk Sep 26, 2023

dvdherron Sep 27, 2023

mirisuzanne Sep 28, 2023

stacyk Sep 26, 2023

dvdherron Sep 27, 2023

jamesnw Sep 27, 2023

stacyk Sep 27, 2023

jamesnw Sep 27, 2023 •

edited

Loading

dvdherron left a comment •

edited

Loading

dvdherron Sep 27, 2023

dvdherron Sep 27, 2023

stacyk commented Sep 27, 2023

dvdherron commented Sep 28, 2023

mirisuzanne left a comment

mirisuzanne Sep 28, 2023

stacyk commented Sep 29, 2023

mirisuzanne commented Sep 29, 2023

Add click to copy behavior #119

Add click to copy behavior #119

Conversation

jamesnw commented Aug 15, 2023 • edited Loading

Description

Steps to test/reproduce

netlify bot commented Aug 15, 2023 • edited Loading

✅ Deploy Preview for oddcontrast ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamesnw Sep 27, 2023 • edited Loading

Choose a reason for hiding this comment

dvdherron left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stacyk commented Sep 27, 2023

dvdherron commented Sep 28, 2023

mirisuzanne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stacyk commented Sep 29, 2023

mirisuzanne commented Sep 29, 2023

jamesnw commented Aug 15, 2023 •

edited

Loading

netlify bot commented Aug 15, 2023 •

edited

Loading

jamesnw Sep 27, 2023 •

edited

Loading

dvdherron left a comment •

edited

Loading