feat: default transition (for colors) to `0.3s` #6726

RedYetiDev · 2024-05-18T13:49:27Z

Description

This PR sets the default transition to 0.3s

Validation

To validate whether a transition exists, hover over some elements, and verify a 0.3s fade from their properties.

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run npm run format to ensure the code follows the style guide.
I have run npm run test to check if all tests are passing.

Note: SyntaxError: Unexpected identifier 'assert', might be a local Node.js issue
I have run npx turbo build to check if the website builds without errors.

Note: SyntaxError: Unexpected identifier 'assert', might be a local Node.js issue
I've covered new added functionality with unit tests if necessary.

vercel · 2024-05-18T13:49:30Z

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	May 21, 2024 8:09pm

RedYetiDev · 2024-05-18T13:52:10Z

The only visual issue I am seeing is with the language selector.

AugustinMauroy · 2024-05-18T13:54:29Z

Note: SyntaxError: Unexpected identifier 'assert', might be a local Node.js issue

Nodejs website use V20 so the error should come from you node version

RedYetiDev · 2024-05-18T13:56:38Z

Note: SyntaxError: Unexpected identifier 'assert', might be a local Node.js issue

Nodejs website use V20 so the error should come from you node version

Good to note, thanks

Signed-off-by: Aviv Keller <38299977+RedYetiDev@users.noreply.github.com>

ovflowd · 2024-05-18T17:55:58Z

Why is this a fix? What is it fixing? Could you please attach screenshots?

RedYetiDev · 2024-05-18T18:08:18Z

Why is this a fix?

It's a feature (feat)

What is it fixing?

N/A

Could you please attach screenshots?

Because it's a transitional effect, screenshots aren't possible, would you like a little video recording?

ovflowd · 2024-05-19T13:30:13Z

Why is this a fix?

It's a feature (feat)

What is it fixing?

N/A

Could you please attach screenshots?

Because it's a transitional effect, screenshots aren't possible, would you like a little video recording?

Sure; Please add more details explaining why is this needed, what is this improving and before/after videos of what is affecting.

AugustinMauroy · 2024-05-20T20:38:17Z

If I've understood correctly @RedYetiDev you're trying to avoid the flash between the ligh/dark theme?

RedYetiDev · 2024-05-20T20:55:09Z

If I've understood correctly @RedYetiDev you're trying to avoid the flash between the ligh/dark theme?

Sorry for the delay in my response, yes that is part of the reason, but also other things (like hover effects). I’ll make a video difference soon

RedYetiDev · 2024-05-20T21:24:35Z

New

screen-capture.webm

Old

screen-capture.1.webm

ovflowd · 2024-05-21T11:10:03Z

I see, I like the changes. But since this changes every page; Please ensure to test every page for inconsistencies or visual bugs this change might introduce.

github-actions · 2024-05-21T11:10:33Z

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 97	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 94	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 99	🟢 100	🟢 100	🟢 92	🔗

ovflowd

LGTM; I understand the purpose of the changes now. But I'd recommend the author to discretionarily test the website (and all its pages, buttons, etc) to ensure that this change does not introduce issues.

github-actions · 2024-05-21T11:11:55Z

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.06% (589/654)	76.08% (175/230)	92.24% (119/129)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
128	0 💤	0 ❌	0 🔥	6.695s ⏱️

RedYetiDev · 2024-05-21T11:51:48Z

LGTM; I understand the purpose of the changes now. But I'd recommend the author to discretionarily test the website (and all its pages, buttons, etc) to ensure that this change does not introduce issues.

Currently, it introduces one issue (with a weird transition for the language selector), but I'll look for more, than fix what needs to be done

AugustinMauroy

Pleas use tailwindcss !transition-none and duration-300

AugustinMauroy · 2024-05-21T12:18:42Z

Enregistrement.de.l.ecran.2024-05-21.a.14.18.11.mov

Also there this strange behavior

RedYetiDev · 2024-05-21T12:30:56Z

The dropdowns are experiencing strange behavior, I need to fix that.

Once I do that I'll also move to tailwind

ovflowd · 2024-05-22T08:11:04Z

The dropdowns are experiencing strange behavior, I need to fix that.

Once I do that I'll also move to tailwind

I appreciate your thoroughness!

AugustinMauroy

LGTM !

canerakdas · 2024-05-25T12:59:08Z

styles/base.css

@@ -1,5 +1,6 @@
 * {
-  @apply subpixel-antialiased;
+  @apply subpixel-antialiased
+    transition-colors;


Looks good, nice touch! @RedYetiDev I have one concern for users sensitive to this type of interaction, it may be better to use motion-safe:transition-colors. This feature allows us to control it via the OS settings

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion

Nice note, seeing as this already landed, a second PR can always change it if needed

feat: set default transition to 0.3s

4f708af

RedYetiDev requested a review from a team as a code owner May 18, 2024 13:49

vercel bot deployed to Preview May 18, 2024 13:51 View deployment

Update index.module.css

3ba2330

Signed-off-by: Aviv Keller <38299977+RedYetiDev@users.noreply.github.com>

vercel bot deployed to Preview May 18, 2024 13:59 View deployment

Update index.module.css

69f28eb

Signed-off-by: Aviv Keller <38299977+RedYetiDev@users.noreply.github.com>

vercel bot deployed to Preview May 18, 2024 14:13 View deployment

vercel bot deployed to Preview May 18, 2024 17:52 View deployment

ovflowd added the github_actions:pull-request Trigger Pull Request Checks label May 21, 2024

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label May 21, 2024

ovflowd deployed to Storybook May 21, 2024 11:10 — with GitHub Actions View deployment

ovflowd approved these changes May 21, 2024

View reviewed changes

AugustinMauroy requested changes May 21, 2024

View reviewed changes

Only transition colors

647e73e

RedYetiDev force-pushed the patch-1 branch from 294591c to 647e73e Compare May 21, 2024 20:08

RedYetiDev requested a review from AugustinMauroy May 21, 2024 20:08

RedYetiDev changed the title ~~feat: default transition to 0.3s~~ feat: default transition (for colors) to 0.3s May 21, 2024

vercel bot deployed to Preview May 21, 2024 20:09 View deployment

ovflowd added the github_actions:pull-request Trigger Pull Request Checks label May 22, 2024

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label May 22, 2024

ovflowd deployed to Storybook May 22, 2024 08:11 — with GitHub Actions View deployment

AugustinMauroy approved these changes May 22, 2024

View reviewed changes

ovflowd added this pull request to the merge queue May 25, 2024

canerakdas reviewed May 25, 2024

View reviewed changes

Merged via the queue into nodejs:main with commit 5d23642 May 25, 2024
15 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: default transition (for colors) to `0.3s` #6726

feat: default transition (for colors) to `0.3s` #6726

RedYetiDev commented May 18, 2024 •

edited

vercel bot commented May 18, 2024 •

edited

RedYetiDev commented May 18, 2024

AugustinMauroy commented May 18, 2024

RedYetiDev commented May 18, 2024 •

edited

ovflowd commented May 18, 2024

RedYetiDev commented May 18, 2024

ovflowd commented May 19, 2024

AugustinMauroy commented May 20, 2024

RedYetiDev commented May 20, 2024

RedYetiDev commented May 20, 2024

ovflowd commented May 21, 2024

github-actions bot commented May 21, 2024 •

edited

ovflowd left a comment

github-actions bot commented May 21, 2024 •

edited

RedYetiDev commented May 21, 2024

AugustinMauroy left a comment

AugustinMauroy commented May 21, 2024

RedYetiDev commented May 21, 2024

ovflowd commented May 22, 2024

AugustinMauroy left a comment

canerakdas May 25, 2024 •

edited

RedYetiDev May 25, 2024

feat: default transition (for colors) to 0.3s #6726

feat: default transition (for colors) to 0.3s #6726

Conversation

RedYetiDev commented May 18, 2024 • edited

Description

Validation

Check List

vercel bot commented May 18, 2024 • edited

RedYetiDev commented May 18, 2024

AugustinMauroy commented May 18, 2024

RedYetiDev commented May 18, 2024 • edited

ovflowd commented May 18, 2024

RedYetiDev commented May 18, 2024

ovflowd commented May 19, 2024

AugustinMauroy commented May 20, 2024

RedYetiDev commented May 20, 2024

RedYetiDev commented May 20, 2024

New

Old

ovflowd commented May 21, 2024

github-actions bot commented May 21, 2024 • edited

ovflowd left a comment

Choose a reason for hiding this comment

github-actions bot commented May 21, 2024 • edited

Unit Test Coverage Report

Unit Test Report

RedYetiDev commented May 21, 2024

AugustinMauroy left a comment

Choose a reason for hiding this comment

AugustinMauroy commented May 21, 2024

RedYetiDev commented May 21, 2024

ovflowd commented May 22, 2024

AugustinMauroy left a comment

Choose a reason for hiding this comment

canerakdas May 25, 2024 • edited

Choose a reason for hiding this comment

RedYetiDev May 25, 2024

Choose a reason for hiding this comment

feat: default transition (for colors) to `0.3s` #6726

feat: default transition (for colors) to `0.3s` #6726

RedYetiDev commented May 18, 2024 •

edited

vercel bot commented May 18, 2024 •

edited

RedYetiDev commented May 18, 2024 •

edited

github-actions bot commented May 21, 2024 •

edited

github-actions bot commented May 21, 2024 •

edited

canerakdas May 25, 2024 •

edited