[WEB-5614] chore: package and layout enhancements #8403
Conversation
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
WalkthroughThis PR updates styling utility classes across multiple UI components, introducing a new color scheme for disabled button states and adjusting background and spacing properties in layout components. All changes are visual styling only with no functional modifications. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Areas for attention:
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (5)
🧰 Additional context used📓 Path-based instructions (4)**/*.{ts,tsx,mts,cts}📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{js,jsx,ts,tsx,json,css}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (16)📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
📚 Learning: 2025-12-17T10:58:59.591ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (6)
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 |
There was a problem hiding this comment.
Pull request overview
This PR updates button styling tokens and layout background colors across multiple packages. The changes focus on standardizing disabled button text colors and migrating from layer-* to surface-* background color tokens in layout components.
- Updated disabled button text color from
text-disabled/text-placeholdertotext-on-color-disabledfor primary button variants - Added background styling, padding, and border radius to filter row components
- Migrated layout background colors from
bg-layer-2tobg-surface-1
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/src/button/helper.tsx | Updates disabled text color for primary button variant to use new token |
| packages/propel/src/icon-button/helper.tsx | Updates disabled text color for primary icon button variant to use new token |
| packages/propel/src/button/helper.tsx | Updates disabled text color for primary button variant to use new token |
| apps/web/core/components/rich-filters/filters-row.tsx | Adds background, padding, and border radius to main content; updates header padding and background color |
| apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx | Changes background color from layer-2 to surface-1 for consistency |
Comments suppressed due to low confidence (2)
packages/propel/src/icon-button/helper.tsx:21
- The disabled text color has been updated to
text-on-color-disabledfor the primary variant, but the other variants (error-fill, error-outline, secondary, tertiary, ghost) still use the olddisabled:text-disabledclass. This creates an inconsistency in how disabled button states appear across different variants.
"bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active focus:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
"error-outline":
"bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover focus:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
secondary:
"bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active focus:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
tertiary:
"bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active focus:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
ghost:
"bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
packages/propel/src/button/helper.tsx:21
- The disabled text color has been updated to
text-on-color-disabledfor the primary variant, but the other variants (error-fill, error-outline, secondary, tertiary, ghost, link) still use the olddisabled:text-disabledclass. This creates an inconsistency in how disabled button states appear across different variants.
"bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
"error-outline":
"bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
secondary:
"bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
tertiary:
"bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
ghost:
"bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
link: "px-0 underline text-link-primary hover:text-link-primary-hover active:text-link-primary-hover focus:text-link-primary-hover disabled:text-disabled",
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.