Skip to content

feat(FeatureShimmer): New FeatureShimmer component#3005

Merged
codecademydev merged 28 commits intomainfrom
ajr-shimmer-GM-903
Mar 10, 2025
Merged

feat(FeatureShimmer): New FeatureShimmer component#3005
codecademydev merged 28 commits intomainfrom
ajr-shimmer-GM-903

Conversation

@aresnik11
Copy link
Contributor

@aresnik11 aresnik11 commented Jan 15, 2025 •
edited
Loading

Overview

Adds new FeatureShimmer component

PR Checklist

Testing Instructions

  1. Go to FeatureShimmer story
  2. See the lovely shimmer!
  3. Change to dark mode
  4. See the lovely shimmer!
  5. Reload and don't scroll down for a few seconds
  6. Scroll down and see the lovely shimmer!
  7. Update your settings to reduce motion via System Preferences > Accessibility > Display > Reduce motion
  8. Go to FeatureShimmer story
  9. Confirm there is no animation

PR Links and Envs

Repository PR Link PR Env
Monolith Monolith PR Monolith Env
Mono Mono Link Portal Env

@nx-cloud
Copy link

nx-cloud bot commented Jan 15, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 2667cce.

☁️ Nx Cloud last updated this comment at 2025-03-06 15:14:58 UTC

@aresnik11 aresnik11 marked this pull request as ready for review February 12, 2025 20:19
@aresnik11 aresnik11 requested a review from a team as a code owner February 12, 2025 20:19
LinKCoding
LinKCoding reviewed Feb 12, 2025
View reviewed changes
Copy link
Contributor

@LinKCoding LinKCoding left a comment

Choose a reason for hiding this comment

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

Just put down some initial thoughts :)
The animation itself looks really cool!

dreamwasp
dreamwasp reviewed Feb 21, 2025
View reviewed changes
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

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

so far so good! border fade out still needs to be built out and need to sort some things with Stacey but headed in the right direction

@aresnik11 aresnik11 marked this pull request as draft February 21, 2025 18:07
@aresnik11 aresnik11 changed the title feat(FeatureShimmer) feat(FeatureShimmer): New FeatureShimmer component Feb 26, 2025
@aresnik11 aresnik11 marked this pull request as ready for review February 26, 2025 18:54
dreamwasp
dreamwasp reviewed Feb 27, 2025
View reviewed changes
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

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

looks great!!! just one small note about border radius but this looks awesome

packages/gamut/src/FeatureShimmer/index.tsx
{shouldReduceMotion || !isInView ? (
children
) : (
<BaseContainer
Copy link
Contributor

@dreamwasp dreamwasp Feb 27, 2025

Choose a reason for hiding this comment

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

i think the only styling prop we might want to be able to forward here is borderRadius (i say that knowing the catalog shimmer has a diff border radius and if we want to wrap an interactive component it'll be a diff border radius)

Copy link
Contributor Author

@aresnik11 aresnik11 Mar 3, 2025

Choose a reason for hiding this comment

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

done!

Copy link
Contributor Author

@aresnik11 aresnik11 Mar 3, 2025

Choose a reason for hiding this comment

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

i didnt add it to the story permanently but i tested with it and it does work

@aresnik11 aresnik11 requested a review from dreamwasp March 3, 2025 15:04
dreamwasp
dreamwasp approved these changes Mar 3, 2025
View reviewed changes
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

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

✨

@aresnik11 aresnik11 requested a review from dreamwasp March 6, 2025 14:44
dreamwasp
dreamwasp reviewed Mar 6, 2025
View reviewed changes
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

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

looks great, tiny comments on fade oyt animation

@codecademydev
Copy link
Collaborator

codecademydev commented Mar 6, 2025

📬Published Alpha Packages:

@codecademy/gamut@59.0.11-alpha.2667cc.0
@codecademy/gamut-kit@0.6.480-alpha.2667cc.0
@codecademy/styleguide@70.1.2-alpha.2667cc.0

@codecademydev
Copy link
Collaborator

codecademydev commented Mar 6, 2025

🚀 Styleguide deploy preview ready!

https://67c9bc0f798e17178f68b39f--gamut-preview.netlify.app

Deploy Logs

@aresnik11 aresnik11 requested a review from dreamwasp March 6, 2025 15:16
dreamwasp
dreamwasp approved these changes Mar 6, 2025
View reviewed changes
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

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

smooooooth

@aresnik11 aresnik11 added the Ship It :shipit: Automerge this PR when possible label Mar 10, 2025
@codecademydev codecademydev merged commit 6c2b47f into main Mar 10, 2025
18 of 19 checks passed
@codecademydev codecademydev removed the Ship It :shipit: Automerge this PR when possible label Mar 10, 2025
@codecademydev codecademydev deleted the ajr-shimmer-GM-903 branch March 10, 2025 14:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dreamwasp dreamwasp dreamwasp approved these changes

@LinKCoding LinKCoding Awaiting requested review from LinKCoding

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@aresnik11 @codecademydev @LinKCoding @dreamwasp