Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
✅ Files skipped from review due to trivial changes (3)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThis PR moves component animations and transitions behind the Sequence Diagram(s)(omitted) Possibly related issues
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
4 tasks
4 tasks
rohanchkrabrty
requested changes
Mar 26, 2026
Contributor
rohanchkrabrty
left a comment
rohanchkrabrty
left a comment
There was a problem hiding this comment.
I think a better model would be to have no animations by default and then add animations to users whose reduced motion is turned off
@media (prefers-reduced-motion: no-preference) {
.dialog {
transition: transform 300ms;
}
}
Let's follow this approach for the components. This would also prevent cascading issues and !important usages.
Also I think there are other components that have not been modified like dialog, menu etc, even tho the docs are updated. Please check this once
…fers-reduced-motion: no-preference`
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/raystack/components/drawer/drawer.module.css`:
- Around line 200-206: The reduced-motion media query currently only wraps the
primary open transitions (.drawerPopup-right, .drawerPopup-left,
.drawerPopup-top, .drawerPopup-bottom) but leaves backdrop transitions and the
close-state duration rules active; update the CSS so that all transition
properties for the drawer and backdrop are either removed or set to zero inside
the prefers-reduced-motion media query: move or duplicate the backdrop selector
(backdrop) and the close-state rules (the selectors handling the close-state
durations referenced around Line 84/100/116/132) into the `@media`
(prefers-reduced-motion: reduce) block and set transition: none or
transition-duration: 0ms for those selectors to fully disable animations for
reduced-motion users.
In `@packages/raystack/components/preview-card/preview-card.module.css`:
- Line 29: Remove the blank line immediately before the transition declaration
inside the .popup rule in preview-card.module.css so the `transition: opacity
var(--animation-duration) var(--easing);` declaration is directly contiguous
with the previous property (fixing the declaration-empty-line-before Stylelint
violation); locate the .popup selector and collapse the extra empty line above
the transition property.
In `@packages/raystack/components/toast/toast.module.css`:
- Line 69: There is an extra blank line before the CSS declaration "transition:
opacity 500ms;" causing a declaration-empty-line-before stylelint error; remove
the empty line so the "transition" declaration sits directly after the previous
declaration within the same rule (in toast.module.css) and re-run stylelint to
confirm the violation is resolved.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 29a6d80f-e312-489b-9bf7-d3db2b0902ae
📒 Files selected for processing (38)
apps/www/src/content/docs/components/accordion/index.mdxapps/www/src/content/docs/components/alert-dialog/index.mdxapps/www/src/content/docs/components/button/index.mdxapps/www/src/content/docs/components/collapsible/index.mdxapps/www/src/content/docs/components/dialog/index.mdxapps/www/src/content/docs/components/drawer/index.mdxapps/www/src/content/docs/components/link/index.mdxapps/www/src/content/docs/components/popover/index.mdxapps/www/src/content/docs/components/preview-card/index.mdxapps/www/src/content/docs/components/sidebar/index.mdxapps/www/src/content/docs/components/skeleton/index.mdxapps/www/src/content/docs/components/spinner/index.mdxapps/www/src/content/docs/components/tabs/index.mdxapps/www/src/content/docs/components/toast/index.mdxapps/www/src/content/docs/components/tooltip/index.mdxpackages/raystack/components/accordion/accordion.module.csspackages/raystack/components/button/button.module.csspackages/raystack/components/chip/chip.module.csspackages/raystack/components/collapsible/collapsible.module.csspackages/raystack/components/dialog/dialog.module.csspackages/raystack/components/drawer/drawer.module.csspackages/raystack/components/icon-button/icon-button.module.csspackages/raystack/components/input-field/input-field.module.csspackages/raystack/components/meter/meter.module.csspackages/raystack/components/navbar/navbar.module.csspackages/raystack/components/popover/popover.module.csspackages/raystack/components/preview-card/preview-card.module.csspackages/raystack/components/progress/progress.module.csspackages/raystack/components/scroll-area/scroll-area.module.csspackages/raystack/components/select/select.module.csspackages/raystack/components/sidebar/sidebar.module.csspackages/raystack/components/skeleton/skeleton.module.csspackages/raystack/components/spinner/spinner.module.csspackages/raystack/components/switch/switch.module.csspackages/raystack/components/tabs/tabs.module.csspackages/raystack/components/text-area/text-area.module.csspackages/raystack/components/toast/toast.module.csspackages/raystack/components/tooltip/tooltip.module.css
✅ Files skipped from review due to trivial changes (24)
- apps/www/src/content/docs/components/link/index.mdx
- apps/www/src/content/docs/components/skeleton/index.mdx
- apps/www/src/content/docs/components/toast/index.mdx
- apps/www/src/content/docs/components/alert-dialog/index.mdx
- apps/www/src/content/docs/components/button/index.mdx
- apps/www/src/content/docs/components/sidebar/index.mdx
- apps/www/src/content/docs/components/accordion/index.mdx
- apps/www/src/content/docs/components/collapsible/index.mdx
- apps/www/src/content/docs/components/preview-card/index.mdx
- apps/www/src/content/docs/components/dialog/index.mdx
- apps/www/src/content/docs/components/popover/index.mdx
- packages/raystack/components/chip/chip.module.css
- apps/www/src/content/docs/components/tabs/index.mdx
- apps/www/src/content/docs/components/drawer/index.mdx
- apps/www/src/content/docs/components/tooltip/index.mdx
- packages/raystack/components/icon-button/icon-button.module.css
- packages/raystack/components/switch/switch.module.css
- packages/raystack/components/input-field/input-field.module.css
- packages/raystack/components/accordion/accordion.module.css
- packages/raystack/components/select/select.module.css
- packages/raystack/components/progress/progress.module.css
- packages/raystack/components/tooltip/tooltip.module.css
- packages/raystack/components/text-area/text-area.module.css
- packages/raystack/components/navbar/navbar.module.css
🚧 Files skipped from review as they are similar to previous changes (6)
- apps/www/src/content/docs/components/spinner/index.mdx
- packages/raystack/components/collapsible/collapsible.module.css
- packages/raystack/components/button/button.module.css
- packages/raystack/components/spinner/spinner.module.css
- packages/raystack/components/skeleton/skeleton.module.css
- packages/raystack/components/popover/popover.module.css
Comment on lines
+200
to
206
| @media (prefers-reduced-motion: no-preference) { | ||
| .drawerPopup-right, | ||
| .drawerPopup-left, | ||
| .drawerPopup-top, | ||
| .drawerPopup-bottom { | ||
| transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1); | ||
| } |
Contributor
There was a problem hiding this comment.
Reduced-motion path still allows drawer/backdrop animation.
Nice inversion to no-preference, but reduced-motion is not fully enforced because close-state duration rules (Line 84, Line 100, Line 116, Line 132) and backdrop transition (Line 8) remain active outside media gating. In reduce, this can still animate closing/fade.
Suggested fix
`@media` (prefers-reduced-motion: no-preference) {
+ .backdrop {
+ transition: opacity 450ms cubic-bezier(0.32, 0.72, 0, 1);
+ }
+
.drawerPopup-right,
.drawerPopup-left,
.drawerPopup-top,
.drawerPopup-bottom {
transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
}
+
+ .backdrop[data-ending-style] {
+ transition-duration: calc(var(--drawer-swipe-strength, 1) * 400ms);
+ }
+
+ .drawerPopup-right[data-ending-style],
+ .drawerPopup-left[data-ending-style],
+ .drawerPopup-top[data-ending-style],
+ .drawerPopup-bottom[data-ending-style] {
+ transition-duration: calc(var(--drawer-swipe-strength, 1) * 400ms);
+ }
}
+
+@media (prefers-reduced-motion: reduce) {
+ .backdrop,
+ .drawerPopup-right,
+ .drawerPopup-left,
+ .drawerPopup-top,
+ .drawerPopup-bottom {
+ transition: none;
+ }
+}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/drawer/drawer.module.css` around lines 200 -
206, The reduced-motion media query currently only wraps the primary open
transitions (.drawerPopup-right, .drawerPopup-left, .drawerPopup-top,
.drawerPopup-bottom) but leaves backdrop transitions and the close-state
duration rules active; update the CSS so that all transition properties for the
drawer and backdrop are either removed or set to zero inside the
prefers-reduced-motion media query: move or duplicate the backdrop selector
(backdrop) and the close-state rules (the selectors handling the close-state
durations referenced around Line 84/100/116/132) into the `@media`
(prefers-reduced-motion: reduce) block and set transition: none or
transition-duration: 0ms for those selectors to fully disable animations for
reduced-motion users.
| transition-property: width, height, opacity, transform; | ||
| transition-timing-function: var(--easing); | ||
| transition-duration: var(--animation-duration); | ||
| transition: opacity var(--animation-duration) var(--easing); |
Contributor
There was a problem hiding this comment.
Fix Stylelint violation in .popup transition block.
Line 29 is currently flagged by Stylelint (declaration-empty-line-before) and may fail CI checks. Remove the empty line before transition.
Suggested fix
.popup {
position: relative;
box-sizing: border-box;
padding: var(--rs-space-3);
background-color: var(--rs-color-background-base-primary);
border-radius: var(--rs-radius-2);
border: 0.5px solid var(--rs-color-border-base-primary);
box-shadow:
0 1px 1px 0 rgba(0, 0, 0, 0.07),
0 2px 5px 0 rgba(0, 0, 0, 0.07),
0 3px 8px 0 rgba(0, 0, 0, 0.07);
color: var(--rs-color-foreground-base-primary);
transform-origin: var(--transform-origin);
width: var(--popup-width, auto);
height: var(--popup-height, auto);
-
transition: opacity var(--animation-duration) var(--easing);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| transition: opacity var(--animation-duration) var(--easing); | |
| .popup { | |
| position: relative; | |
| box-sizing: border-box; | |
| padding: var(--rs-space-3); | |
| background-color: var(--rs-color-background-base-primary); | |
| border-radius: var(--rs-radius-2); | |
| border: 0.5px solid var(--rs-color-border-base-primary); | |
| box-shadow: | |
| 0 1px 1px 0 rgba(0, 0, 0, 0.07), | |
| 0 2px 5px 0 rgba(0, 0, 0, 0.07), | |
| 0 3px 8px 0 rgba(0, 0, 0, 0.07); | |
| color: var(--rs-color-foreground-base-primary); | |
| transform-origin: var(--transform-origin); | |
| width: var(--popup-width, auto); | |
| height: var(--popup-height, auto); | |
| transition: opacity var(--animation-duration) var(--easing); | |
| } |
🧰 Tools
🪛 Stylelint (17.6.0)
[error] 29-29: Unexpected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/preview-card/preview-card.module.css` at line
29, Remove the blank line immediately before the transition declaration inside
the .popup rule in preview-card.module.css so the `transition: opacity
var(--animation-duration) var(--easing);` declaration is directly contiguous
with the previous property (fixing the declaration-empty-line-before Stylelint
violation); locate the .popup selector and collapse the extra empty line above
the transition property.
| transform 500ms cubic-bezier(0.22, 1, 0.36, 1), | ||
| opacity 500ms, | ||
| height 150ms; | ||
| transition: opacity 500ms; |
Contributor
There was a problem hiding this comment.
Remove the extra blank line before transition to satisfy stylelint.
Line 69 currently violates declaration-empty-line-before due to the empty line before the declaration.
Proposed fix
user-select: none;
cursor: default;
z-index: calc(1000 - var(--toast-index));
-
transition: opacity 500ms;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| transition: opacity 500ms; | |
| user-select: none; | |
| cursor: default; | |
| z-index: calc(1000 - var(--toast-index)); | |
| transition: opacity 500ms; | |
| } |
🧰 Tools
🪛 Stylelint (17.6.0)
[error] 69-69: Unexpected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/toast/toast.module.css` at line 69, There is an
extra blank line before the CSS declaration "transition: opacity 500ms;" causing
a declaration-empty-line-before stylelint error; remove the empty line so the
"transition" declaration sits directly after the previous declaration within the
same rule (in toast.module.css) and re-run stylelint to confirm the violation is
resolved.
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
packages/raystack/components/preview-card/preview-card.module.css (1)
26-26:⚠️ Potential issue | 🟡 MinorRemove the extra blank line before
transitionin.popup.Line 26 still has a
declaration-empty-line-beforeviolation, which can fail stylelint in CI.Suggested fix
.popup { width: var(--popup-width, auto); height: var(--popup-height, auto); - transition: opacity var(--animation-duration) var(--easing); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/preview-card/preview-card.module.css` at line 26, Remove the extra blank line inside the .popup rule in preview-card.module.css so the transition declaration directly follows the previous declaration (eliminating the declaration-empty-line-before stylelint violation); open the .popup CSS rule and delete the blank line immediately above the line containing "transition: opacity var(--animation-duration) var(--easing);" so the declarations are contiguous.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@packages/raystack/components/preview-card/preview-card.module.css`:
- Line 26: Remove the extra blank line inside the .popup rule in
preview-card.module.css so the transition declaration directly follows the
previous declaration (eliminating the declaration-empty-line-before stylelint
violation); open the .popup CSS rule and delete the blank line immediately above
the line containing "transition: opacity var(--animation-duration)
var(--easing);" so the declarations are contiguous.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 51e9986c-cc81-47e7-84bf-343540fe9069
📒 Files selected for processing (19)
apps/www/src/content/docs/components/tabs/index.mdxpackages/raystack/components/accordion/accordion.module.csspackages/raystack/components/button/button.module.csspackages/raystack/components/chip/chip.module.csspackages/raystack/components/dialog/dialog.module.csspackages/raystack/components/icon-button/icon-button.module.csspackages/raystack/components/input-field/input-field.module.csspackages/raystack/components/meter/meter.module.csspackages/raystack/components/navbar/navbar.module.csspackages/raystack/components/popover/popover.module.csspackages/raystack/components/preview-card/preview-card.module.csspackages/raystack/components/progress/progress.module.csspackages/raystack/components/scroll-area/scroll-area.module.csspackages/raystack/components/select/select.module.csspackages/raystack/components/sidebar/sidebar.module.csspackages/raystack/components/switch/switch.module.csspackages/raystack/components/tabs/tabs.module.csspackages/raystack/components/text-area/text-area.module.csspackages/raystack/components/tooltip/tooltip.module.css
✅ Files skipped from review due to trivial changes (9)
- apps/www/src/content/docs/components/tabs/index.mdx
- packages/raystack/components/input-field/input-field.module.css
- packages/raystack/components/switch/switch.module.css
- packages/raystack/components/accordion/accordion.module.css
- packages/raystack/components/chip/chip.module.css
- packages/raystack/components/icon-button/icon-button.module.css
- packages/raystack/components/navbar/navbar.module.css
- packages/raystack/components/progress/progress.module.css
- packages/raystack/components/tooltip/tooltip.module.css
🚧 Files skipped from review as they are similar to previous changes (8)
- packages/raystack/components/button/button.module.css
- packages/raystack/components/text-area/text-area.module.css
- packages/raystack/components/scroll-area/scroll-area.module.css
- packages/raystack/components/popover/popover.module.css
- packages/raystack/components/select/select.module.css
- packages/raystack/components/tabs/tabs.module.css
- packages/raystack/components/dialog/dialog.module.css
- packages/raystack/components/sidebar/sidebar.module.css
rohanchkrabrty
approved these changes
Apr 7, 2026
Contributor
rohanchkrabrty
left a comment
rohanchkrabrty
left a comment
There was a problem hiding this comment.
Let's create a css var for transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; and reuse that
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR updates the Apsara component library so key animated components respect the
prefers-reduced-motion: reducemedia query. When reduced motion is enabled, we disable/simplify the primary animation effects (shimmer, open/close transitions, overlay/panel transitions, icon/content transitions, loader/spinner rotations, and similar motion).Video demonstrates the animation changes after enabling "Reduce Motion" in OS settings (Macbook in this case):
Screen.Recording.2026-03-20.at.5.35.08.PM.mov
Note:
We’re avoiding a global reduced-motion rule because it risks affecting the host app’s own animations as well. In frontier, Apsara’s ThemeProvider is mounted near the app root, so a “scoped global” would still have high blast radius. Per-component overrides keep changes limited to Apsara components and are easier to verify
Changes
@media (prefers-reduced-motion: reduce)overrides in the relevant Raystack component CSS modules for:Skeleton,Link,Popover,Tooltip,Collapsible,Accordion,Spinner,Button(loader),PreviewCard,Toast,Sidebar,Tabs,Drawer(Sheet),DialogTesting / Validation