[WEB-5614] fix: new design system consistency#8351
Conversation
…/new-design-system-consistency
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
WalkthroughThis pull request applies comprehensive UI styling and component updates across the web application and package libraries. Changes include Tailwind class modifications, background and border styling adjustments, icon sizing updates, default prop value changes, and minor structural DOM updates. No business logic or control flow modifications are introduced. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Biome (2.1.2)packages/tailwind-config/variables.cssThe --json option is unstable/experimental and its output might change between patches/minor releases. ... [truncated 99999690 characters] ... h(0.3142 0.0586 82.21);\n\n /* indigo colors */\n --extended-color-indigo-25: oklch(0.9813 0.0074 260.73);\n --extended-color-indigo-50: oklch(0.9415 0.022 263.19);\n --extendedBiome encountered an unexpected error This is a bug in Biome, not an error in your code, and we would appreciate it if you could report it to https://github.com/biomejs/biome/issues/ along with the following information to help us fixing the issue. When opening the issue, please provide a minimal reproduction, or identify and share the file/code that triggers it. Without a way to reproduce the error, the error can't be fixed: Source Location: crates/biome_console/src/lib.rs:151:14 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 implements design system consistency improvements across the application by standardizing colors, spacing, borders, shadows, and other visual properties to align with a new design system.
Key changes:
- Updated design tokens including backdrop colors, border colors, and background colors across light and dark themes
- Enhanced UI component styling with consistent shadows, borders, and hover states
- Improved semantic HTML structure in tooltips and added responsive icon sizing in tabs
- Refined form inputs, buttons, and interactive elements with consistent styling patterns
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
packages/ui/src/tabs/tab-list.tsx |
Added autoWrap prop for optional Tab.Group wrapper and responsive icon sizing based on tab size |
packages/ui/src/progress/circular-progress-indicator.tsx |
Changed default stroke color from accent-primary to success |
packages/ui/src/form-fields/input.tsx |
Updated input background to layer-1, changed placeholder color to tertiary, and border to subtle-1 |
packages/tailwind-config/variables.css |
Increased backdrop opacity for both light and dark themes |
packages/propel/src/tooltip/root.tsx |
Replaced div elements with semantic p tags and added conditional margin |
packages/propel/src/tabs/tabs.tsx |
Changed default TabsList background from layer-1 to layer-2 |
packages/propel/src/input/input.tsx |
Updated input styling and changed focus ring color from custom-primary to accent-strong |
packages/propel/src/dialog/root.tsx |
Added border-subtle to dialog base styling |
packages/editor/src/styles/editor.css |
Increased checkbox border opacity from 20% to 100% |
apps/web/core/layouts/auth-layout/workspace-wrapper.tsx |
Removed bg-surface-1 and changed image object-fit from cover to contain |
apps/web/core/components/workspace/sidebar/dropdown-item.tsx |
Enhanced button styling with stronger borders, shadows, and improved interaction states |
apps/web/core/components/workspace/create-workspace-form.tsx |
Updated form field styling with consistent backgrounds and reduced font sizes |
apps/web/core/components/project/create/header.tsx |
Removed bg-layer-1 background |
apps/web/core/components/project/card.tsx |
Updated card styling with new shadow system and border colors |
apps/web/core/components/modules/quick-actions.tsx |
Added flex-shrink-0 to icons |
apps/web/core/components/modules/module-status-dropdown.tsx |
Changed border radius from rounded-xs to rounded-sm |
apps/web/core/components/issues/issue-layouts/kanban/block.tsx |
Updated kanban card borders and shadow system for consistency |
apps/web/core/components/issues/issue-detail/label/label-list-item.tsx |
Simplified label hover states and added group class |
apps/web/core/components/cycles/list/cycles-list-item.tsx |
Removed explicit color class from check icon |
apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx |
Increased button size and updated icon styling |
apps/web/core/components/comments/card/edit-form.tsx |
Redesigned action buttons with consistent sizing, improved disabled states |
apps/web/app/(all)/invitations/page.tsx |
Removed bg-surface-1 from logo container |
apps/web/app/(all)/create-workspace/page.tsx |
Added bg-surface-1 to parent container and removed from nested element |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| }} | ||
| data-prevent-progress={!isMemberOfProject || isArchived} | ||
| className="flex flex-col rounded-sm border border-subtle bg-layer-1 hover:bg-layer-1-hover rounded-xl overflow-hidden" | ||
| className="flex flex-col border border-subtle bg-layer-2 hover:shadow-raised-2x00 rounded-lg overflow-hidden duration-300 transition-all" |
There was a problem hiding this comment.
There is extra whitespace after "flex-col" and before "border". This should be cleaned up to maintain consistency with the codebase formatting.
| ); | ||
| } | ||
|
|
||
| function TabListInner({ tabs, tabListClassName, tabClassName, size = "md", selectedTab, onTabChange }: TTabListProps) { |
There was a problem hiding this comment.
The TabListInner function receives the full TTabListProps including the autoWrap property, but autoWrap is not used within this function. The props type should exclude autoWrap since it's only used in the parent TabList component. Consider using Omit to exclude it from the props.
| {tooltipContent && ( | ||
| <p | ||
| className={cn("text-caption-sm-regular text-secondary", { | ||
| "mt-1": tooltipHeading && tooltipHeading !== "", |
There was a problem hiding this comment.
The condition checks if tooltipHeading is truthy AND not an empty string, but if tooltipHeading is truthy, checking for empty string is redundant. An empty string is already falsy, so the condition can be simplified to just check for the existence of tooltipHeading.
| "h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary", | ||
| { | ||
| "cursor-pointer hover:border-danger-strong hover:bg-danger-subtle": !disabled, | ||
| "cursor-pointer": !disabled, |
There was a problem hiding this comment.
The hover styles have been removed from the label item. The old code had "hover:bg-layer-transparent-hover" which has been removed, and the "hover:border-danger-strong hover:bg-danger-subtle" styles for non-disabled items have also been removed. While a "group" class was added, there's no visible group-hover styling applied to child elements. This may result in reduced user feedback when interacting with labels.
| }} | ||
| data-prevent-progress={!isMemberOfProject || isArchived} | ||
| className="flex flex-col rounded-sm border border-subtle bg-layer-1 hover:bg-layer-1-hover rounded-xl overflow-hidden" | ||
| className="flex flex-col border border-subtle bg-layer-2 hover:shadow-raised-2x00 rounded-lg overflow-hidden duration-300 transition-all" |
There was a problem hiding this comment.
There's a typo in the class name. "shadow-raised-2x00" should be "shadow-raised-200". The extra 'x' appears to be a typo.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (23)
apps/web/app/(all)/create-workspace/page.tsx(1 hunks)apps/web/app/(all)/invitations/page.tsx(1 hunks)apps/web/core/components/comments/card/edit-form.tsx(3 hunks)apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx(2 hunks)apps/web/core/components/cycles/list/cycles-list-item.tsx(1 hunks)apps/web/core/components/issues/issue-detail/label/label-list-item.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/kanban/block.tsx(1 hunks)apps/web/core/components/modules/module-status-dropdown.tsx(1 hunks)apps/web/core/components/modules/quick-actions.tsx(1 hunks)apps/web/core/components/project/card.tsx(1 hunks)apps/web/core/components/project/create/header.tsx(1 hunks)apps/web/core/components/workspace/create-workspace-form.tsx(3 hunks)apps/web/core/components/workspace/sidebar/dropdown-item.tsx(1 hunks)apps/web/core/layouts/auth-layout/workspace-wrapper.tsx(2 hunks)packages/editor/src/styles/editor.css(1 hunks)packages/propel/src/dialog/root.tsx(1 hunks)packages/propel/src/input/input.tsx(1 hunks)packages/propel/src/tabs/tabs.tsx(1 hunks)packages/propel/src/tooltip/root.tsx(1 hunks)packages/tailwind-config/variables.css(2 hunks)packages/ui/src/form-fields/input.tsx(1 hunks)packages/ui/src/progress/circular-progress-indicator.tsx(1 hunks)packages/ui/src/tabs/tab-list.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,mts,cts}
📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)
**/*.{ts,tsx,mts,cts}: Useconsttype parameters for more precise literal inference in TypeScript 5.0+
Use thesatisfiesoperator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicitisreturn types in filter/check functions
UseNoInfer<T>utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing inswitch(true)blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacyexperimentalDecorators
Useusingdeclarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Usewith { type: "json" }for import attributes; avoid deprecatedassertsyntax (TypeScript 5.3/5.8+)
Useimport typeexplicitly when importing types to ensure they are erased during compilation, respectingverbatimModuleSyntaxflag
Use.ts,.mts,.ctsextensions inimport typestatements (TypeScript 5.2+)
Useimport type { Type } from "mod" with { "resolution-mode": "import" }for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize newSetmethods likeunion,intersection, etc., when available (TypeScript 5.5+)
UseObject.groupBy/Map.groupBystandard methods for grouping instead of external libraries (TypeScript 5.4+)
UsePromise.withResolvers()for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted,toSpliced,with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields viasuperin classes (TypeScript 5....
Files:
apps/web/core/components/cycles/list/cycles-list-item.tsxapps/web/app/(all)/create-workspace/page.tsxpackages/ui/src/progress/circular-progress-indicator.tsxpackages/propel/src/dialog/root.tsxapps/web/core/components/project/card.tsxapps/web/core/components/issues/issue-layouts/kanban/block.tsxapps/web/core/layouts/auth-layout/workspace-wrapper.tsxpackages/propel/src/tabs/tabs.tsxapps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/project/create/header.tsxapps/web/core/components/modules/module-status-dropdown.tsxapps/web/core/components/workspace/sidebar/dropdown-item.tsxpackages/propel/src/tooltip/root.tsxapps/web/core/components/comments/card/edit-form.tsxapps/web/app/(all)/invitations/page.tsxpackages/ui/src/form-fields/input.tsxapps/web/core/components/modules/quick-actions.tsxpackages/propel/src/input/input.tsxapps/web/core/components/workspace/create-workspace-form.tsxpackages/ui/src/tabs/tab-list.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Enable TypeScript strict mode and ensure all files are fully typed
Files:
apps/web/core/components/cycles/list/cycles-list-item.tsxapps/web/app/(all)/create-workspace/page.tsxpackages/ui/src/progress/circular-progress-indicator.tsxpackages/propel/src/dialog/root.tsxapps/web/core/components/project/card.tsxapps/web/core/components/issues/issue-layouts/kanban/block.tsxapps/web/core/layouts/auth-layout/workspace-wrapper.tsxpackages/propel/src/tabs/tabs.tsxapps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/project/create/header.tsxapps/web/core/components/modules/module-status-dropdown.tsxapps/web/core/components/workspace/sidebar/dropdown-item.tsxpackages/propel/src/tooltip/root.tsxapps/web/core/components/comments/card/edit-form.tsxapps/web/app/(all)/invitations/page.tsxpackages/ui/src/form-fields/input.tsxapps/web/core/components/modules/quick-actions.tsxpackages/propel/src/input/input.tsxapps/web/core/components/workspace/create-workspace-form.tsxpackages/ui/src/tabs/tab-list.tsx
**/*.{js,jsx,ts,tsx,json,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier with Tailwind plugin for code formatting, run
pnpm fix:format
Files:
apps/web/core/components/cycles/list/cycles-list-item.tsxapps/web/app/(all)/create-workspace/page.tsxpackages/ui/src/progress/circular-progress-indicator.tsxpackages/propel/src/dialog/root.tsxapps/web/core/components/project/card.tsxapps/web/core/components/issues/issue-layouts/kanban/block.tsxapps/web/core/layouts/auth-layout/workspace-wrapper.tsxpackages/editor/src/styles/editor.csspackages/propel/src/tabs/tabs.tsxpackages/tailwind-config/variables.cssapps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/project/create/header.tsxapps/web/core/components/modules/module-status-dropdown.tsxapps/web/core/components/workspace/sidebar/dropdown-item.tsxpackages/propel/src/tooltip/root.tsxapps/web/core/components/comments/card/edit-form.tsxapps/web/app/(all)/invitations/page.tsxpackages/ui/src/form-fields/input.tsxapps/web/core/components/modules/quick-actions.tsxpackages/propel/src/input/input.tsxapps/web/core/components/workspace/create-workspace-form.tsxpackages/ui/src/tabs/tab-list.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,jsx,ts,tsx}: Use ESLint with shared config across packages, adhering to max warnings limits per package
Use camelCase for variable and function names, PascalCase for components and types
Use try-catch with proper error types and log errors appropriately
Files:
apps/web/core/components/cycles/list/cycles-list-item.tsxapps/web/app/(all)/create-workspace/page.tsxpackages/ui/src/progress/circular-progress-indicator.tsxpackages/propel/src/dialog/root.tsxapps/web/core/components/project/card.tsxapps/web/core/components/issues/issue-layouts/kanban/block.tsxapps/web/core/layouts/auth-layout/workspace-wrapper.tsxpackages/propel/src/tabs/tabs.tsxapps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/project/create/header.tsxapps/web/core/components/modules/module-status-dropdown.tsxapps/web/core/components/workspace/sidebar/dropdown-item.tsxpackages/propel/src/tooltip/root.tsxapps/web/core/components/comments/card/edit-form.tsxapps/web/app/(all)/invitations/page.tsxpackages/ui/src/form-fields/input.tsxapps/web/core/components/modules/quick-actions.tsxpackages/propel/src/input/input.tsxapps/web/core/components/workspace/create-workspace-form.tsxpackages/ui/src/tabs/tab-list.tsx
🧠 Learnings (17)
📓 Common learnings
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Use semantic border colors: `border-subtle` for subtle borders and dividers, `border-subtle-1` for slightly more visible borders, `border-strong` for emphasis, `border-strong-1` for very strong borders
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Use `-active` state variants for elements in pressed/active states and `-selected` state variants only when actual selection logic exists
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : In rare cases, form elements (inputs, buttons, switches) in modals or surfaces may use one layer level above for visual separation (e.g., `bg-layer-2` with `bg-surface-1`), but this should not be used for content boxes or cards
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Use semantic text colors: `text-primary` for main text and headings, `text-secondary` for descriptions, `text-tertiary` for labels and metadata, `text-placeholder` for placeholder text
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Do not use Canvas (`bg-canvas`) for page-level backgrounds, nested containers, cards, modals, dropdowns, sidebars, panels, or anywhere other than the application root
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Use Layer (`bg-layer-1`, `bg-layer-2`, `bg-layer-3`) for nested elements within a surface, including cards, group headers, nested containers, dropdowns, modals, and any element appearing on top of a surface
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Stack layers properly in order: surface → layer-1 → layer-2 → layer-3, using each layer level for progressive depth nesting, and keep most components at layer-1 complexity
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Use Surface (`bg-surface-1`, `bg-surface-2`, `bg-surface-3`) for top-level containers that sit directly on the canvas and serve as main content areas, page sections, or primary containers
Applied to files:
apps/web/app/(all)/create-workspace/page.tsxapps/web/core/layouts/auth-layout/workspace-wrapper.tsxpackages/propel/src/tabs/tabs.tsxpackages/tailwind-config/variables.cssapps/web/core/components/project/create/header.tsxapps/web/app/(all)/invitations/page.tsxapps/web/core/components/workspace/create-workspace-form.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Use Layer (`bg-layer-1`, `bg-layer-2`, `bg-layer-3`) for nested elements within a surface, including cards, group headers, nested containers, dropdowns, modals, and any element appearing on top of a surface
Applied to files:
apps/web/app/(all)/create-workspace/page.tsxapps/web/core/components/project/card.tsxpackages/propel/src/tabs/tabs.tsxpackages/tailwind-config/variables.cssapps/web/core/components/project/create/header.tsxapps/web/app/(all)/invitations/page.tsxpackages/ui/src/form-fields/input.tsxpackages/propel/src/input/input.tsxapps/web/core/components/workspace/create-workspace-form.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : In rare cases, form elements (inputs, buttons, switches) in modals or surfaces may use one layer level above for visual separation (e.g., `bg-layer-2` with `bg-surface-1`), but this should not be used for content boxes or cards
Applied to files:
apps/web/app/(all)/create-workspace/page.tsxpackages/propel/src/dialog/root.tsxapps/web/core/components/project/card.tsxpackages/editor/src/styles/editor.csspackages/propel/src/tabs/tabs.tsxpackages/tailwind-config/variables.cssapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/project/create/header.tsxapps/web/app/(all)/invitations/page.tsxpackages/ui/src/form-fields/input.tsxpackages/propel/src/input/input.tsxapps/web/core/components/workspace/create-workspace-form.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Do not use Canvas (`bg-canvas`) for page-level backgrounds, nested containers, cards, modals, dropdowns, sidebars, panels, or anywhere other than the application root
Applied to files:
apps/web/app/(all)/create-workspace/page.tsxapps/web/core/layouts/auth-layout/workspace-wrapper.tsxpackages/editor/src/styles/editor.csspackages/propel/src/tabs/tabs.tsxpackages/tailwind-config/variables.cssapps/web/core/components/project/create/header.tsxapps/web/app/(all)/invitations/page.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Match layer numbers to surface numbers: `bg-surface-1` uses `bg-layer-1`, `bg-surface-2` uses `bg-layer-2`, `bg-surface-3` uses `bg-layer-3`
Applied to files:
apps/web/app/(all)/create-workspace/page.tsxpackages/propel/src/tabs/tabs.tsxpackages/tailwind-config/variables.cssapps/web/core/components/project/create/header.tsxapps/web/core/components/workspace/create-workspace-form.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Use semantic border colors: `border-subtle` for subtle borders and dividers, `border-subtle-1` for slightly more visible borders, `border-strong` for emphasis, `border-strong-1` for very strong borders
Applied to files:
apps/web/app/(all)/create-workspace/page.tsxpackages/propel/src/dialog/root.tsxapps/web/core/components/project/card.tsxapps/web/core/components/issues/issue-layouts/kanban/block.tsxpackages/editor/src/styles/editor.csspackages/propel/src/tabs/tabs.tsxpackages/tailwind-config/variables.cssapps/web/core/components/project/create/header.tsxapps/web/core/components/workspace/sidebar/dropdown-item.tsxpackages/ui/src/form-fields/input.tsxpackages/propel/src/input/input.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Surfaces must be siblings, not nested within each other in the same plane (exception: modals, overlays, and popovers on different z-index planes can use surfaces even when a surface exists below)
Applied to files:
apps/web/app/(all)/create-workspace/page.tsxapps/web/app/(all)/invitations/page.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Never use hover states without the base background class; always apply hover as `hover:bg-layer-X-hover` in addition to `bg-layer-X`, not standalone
Applied to files:
apps/web/app/(all)/create-workspace/page.tsxpackages/propel/src/dialog/root.tsxapps/web/core/components/project/card.tsxpackages/editor/src/styles/editor.csspackages/propel/src/tabs/tabs.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/project/create/header.tsxapps/web/app/(all)/invitations/page.tsxpackages/ui/src/form-fields/input.tsxpackages/propel/src/input/input.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Stack layers properly in order: surface → layer-1 → layer-2 → layer-3, using each layer level for progressive depth nesting, and keep most components at layer-1 complexity
Applied to files:
apps/web/app/(all)/create-workspace/page.tsxpackages/propel/src/tabs/tabs.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Hover states must always match the base background layer: use `bg-layer-X hover:bg-layer-X-hover` pattern, never mix hover states between different layers
Applied to files:
apps/web/core/components/project/card.tsxpackages/editor/src/styles/editor.csspackages/propel/src/tabs/tabs.tsxpackages/tailwind-config/variables.cssapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/project/create/header.tsxpackages/ui/src/form-fields/input.tsxpackages/propel/src/input/input.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Use `-active` state variants for elements in pressed/active states and `-selected` state variants only when actual selection logic exists
Applied to files:
apps/web/core/components/project/card.tsxpackages/editor/src/styles/editor.csspackages/tailwind-config/variables.cssapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/workspace/sidebar/dropdown-item.tsxpackages/ui/src/form-fields/input.tsxpackages/propel/src/input/input.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*[Ss]idebar* **/*[Nn]av* **/*[Mm]enu* : In sidebar layouts, use transparent backgrounds for menu items with `hover:bg-layer-1-hover` state, rather than applying a base background color
Applied to files:
packages/editor/src/styles/editor.csspackages/propel/src/tabs/tabs.tsxpackages/tailwind-config/variables.cssapps/web/core/components/issues/issue-detail/label/label-list-item.tsx
📚 Learning: 2025-12-12T15:20:52.636Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:52.636Z
Learning: Applies to packages/tailwind-config/**/*.{tsx,ts,jsx,js} : Use semantic text colors: `text-primary` for main text and headings, `text-secondary` for descriptions, `text-tertiary` for labels and metadata, `text-placeholder` for placeholder text
Applied to files:
packages/editor/src/styles/editor.csspackages/tailwind-config/variables.csspackages/ui/src/form-fields/input.tsxpackages/propel/src/input/input.tsx
📚 Learning: 2025-10-01T15:30:17.605Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.
Applied to files:
apps/web/core/components/comments/card/edit-form.tsx
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
apps/web/core/components/comments/card/edit-form.tsx
📚 Learning: 2025-10-21T17:22:05.204Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.
Applied to files:
apps/web/app/(all)/invitations/page.tsx
🧬 Code graph analysis (4)
apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx (1)
packages/propel/src/icons/arrows/chevron-right.tsx (1)
ChevronRightIcon(6-15)
apps/web/core/components/workspace/sidebar/dropdown-item.tsx (1)
packages/i18n/src/store/index.ts (1)
t(222-243)
packages/propel/src/tooltip/root.tsx (1)
packages/propel/src/utils/classname.tsx (1)
cn(63-63)
apps/web/core/components/comments/card/edit-form.tsx (1)
packages/utils/src/string.ts (1)
isCommentEmpty(218-238)
⏰ 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). (5)
- GitHub Check: Agent
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Build packages
- GitHub Check: Analyze (python)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (31)
apps/web/core/layouts/auth-layout/workspace-wrapper.tsx (2)
129-129: Verify the visual appearance without background.The removal of
bg-surface-1leaves the spinner container with only a border and no background fill. This creates a transparent loading state that depends solely on the border for visual definition. Please verify that this provides sufficient visual distinction and matches the intended design, especially when rendered on various parent backgrounds.
160-160: LGTM! Improved image rendering for the illustration.Changing from
object-covertoobject-containensures the entire "workspace not available" illustration is visible without cropping, which is appropriate for an informational graphic.apps/web/core/components/modules/quick-actions.tsx (1)
169-169: Good addition for icon stability!Adding
flex-shrink-0ensures the icon maintains its dimensions when the adjacent text content is lengthy. This is a best practice for icons in flex containers.apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx (2)
162-162: LGTM! Icon sizing and color updated consistently.The size increase to
size-4and addition oftext-secondaryalign with design system consistency. The semantic text color is appropriate for a functional navigation icon.
171-171: LGTM! Status badge truncation improves visual consistency.Adding
whitespace-nowrapandtruncateensures the status badge maintains compact dimensions and handles overflow gracefully.apps/web/core/components/modules/module-status-dropdown.tsx (1)
28-28: Verify border radius values in context of Tailwind v4.The change to
rounded-smis correct and aligns with the design system update. However, the stated pixel values require correction: in Tailwind CSS v4,rounded-smrepresents 0.25rem (4px) androunded-xsrepresents 0.125rem (2px), not 1px → 2px as described. The actual update increases border radius from 2px to 4px, providing more visible rounding appropriate for a small button (h-6 w-20).Ensure consistency by verifying other status indicators and badge components use
rounded-smfor coherent visual hierarchy across the module system.Likely an incorrect or invalid review comment.
packages/tailwind-config/variables.css (2)
354-354: LGTM: Improved backdrop contrast in light mode.The increased opacity (20% → 30%) provides better visual separation for modals and overlays.
677-677: Correct the backdrop color change description.The change is from
alpha-black-500(30% black) toalpha-black-1000(80% black) in dark mode only, not from white to black as stated. Both use black opacity — the modification increases opacity from 30% to 80% for stronger dark mode backdrop separation. Verify the visibility impact is intentional as part of the new design system update.Likely an incorrect or invalid review comment.
apps/web/app/(all)/invitations/page.tsx (1)
134-134: LGTM! Correct removal of surface background from Link.Removing
bg-surface-1from the Link element aligns with the design system guidelines. Surface backgrounds should only be used for top-level containers, not nested interactive elements like links.Based on learnings: Use Surface (
bg-surface-1,bg-surface-2,bg-surface-3) for top-level containers that sit directly on the canvas, not for nested elements.packages/propel/src/dialog/root.tsx (1)
39-39: LGTM! Appropriate use of semantic border color.Adding
border border-subtleto the dialog panel enhances the visual definition while following the design system's semantic border color guidelines.Based on learnings: Use semantic border colors -
border-subtlefor subtle borders and dividers.packages/propel/src/tooltip/root.tsx (1)
64-73: LGTM! Improved semantic HTML structure.Converting the tooltip content from
div-based to paragraph-based structure enhances semantic correctness. The conditionalmt-1spacing when a heading is present provides better visual hierarchy.apps/web/core/components/project/create/header.tsx (1)
35-35: LGTM! Simplified background hierarchy.Removing
bg-layer-1from the outer container simplifies the visual hierarchy. The inner elements (like the logo container at line 78) maintain their appropriate layer backgrounds, ensuring proper visual separation where needed.Based on learnings: Use Layer backgrounds for nested elements within a surface, avoiding unnecessary background layers on purely structural containers.
apps/web/core/components/cycles/list/cycles-list-item.tsx (1)
85-85: LGTM! Coordinated styling with CircularProgressIndicator update.Removing
text-accent-primaryfrom the Check icon aligns with the updated defaultstrokeColorinCircularProgressIndicator(changed tostroke-successin packages/ui/src/progress/circular-progress-indicator.tsx). This ensures consistent visual treatment for the 100% progress state.apps/web/core/components/workspace/create-workspace-form.tsx (3)
173-173: LGTM! Appropriate background layer for form elements.Adding
bg-layer-1to the URL input container provides visual separation for the form field, which is appropriate for form elements within a surface.Based on learnings: Form elements (inputs, buttons, switches) in modals or surfaces may use one layer level above for visual separation.
174-174: LGTM! Consistent text sizing refinement.Reducing text size from
text-13totext-12for the host suffix (line 174) and input text (line 198) provides consistent typography sizing across form elements.Also applies to: 198-198
232-232: LGTM! Coordinated styling for CustomSelect.Adding
bg-layer-1andtext-12to the CustomSelect aligns with the form input styling refinements throughout this component, ensuring visual consistency.packages/ui/src/progress/circular-progress-indicator.tsx (1)
12-12: Verify the impact of the default stroke color change across all CircularProgressIndicator usages.The default
strokeColorchanged from"stroke-accent-primary"to"stroke-success". Five existing usages rely on this default: module progress indicators, sub-issue progress, file upload progress, and cycle progress indicators. Confirm with design that the semantic shift from accent to success color aligns with the intended visual appearance across these components.apps/web/core/components/project/card.tsx (1)
201-201: LGTM! Design system consistency applied correctly.The card styling properly uses
bg-layer-2for a nested card element andborder-subtlefor subtle borders, with appropriate hover shadow feedback. This aligns with the design system guidelines.Based on learnings: Cards should use Layer backgrounds for nested elements within a surface, and semantic border colors should be used for consistency.
apps/web/app/(all)/create-workspace/page.tsx (2)
55-55: LGTM! Correct surface layer application.Adding
bg-surface-1to the outer container is correct, as Surface should be used for top-level containers that sit directly on the canvas.Based on learnings: Use Surface for top-level containers that serve as main content areas.
59-59: LGTM! Correctly removed background from navigational element.Removing
bg-surface-1from the Link element is appropriate, as this is a navigational element rather than a content container that requires a background layer.packages/ui/src/form-fields/input.tsx (1)
33-43: LGTM! Semantic design tokens applied correctly.The input styling properly uses:
bg-layer-1for form elements (appropriate for inputs within surfaces)placeholder-tertiaryfor semantic placeholder text colorborder-subtle-1for slightly more visible bordersThis aligns with the design system's semantic color tokens.
Based on learnings: Form elements may use one layer level above for visual separation, and semantic text/border colors should be used consistently.
apps/web/core/components/issues/issue-layouts/kanban/block.tsx (1)
272-276: LGTM! Kanban card styling follows design system.The card properly uses:
bg-layer-2for nested card elementsborder-subtlewithhover:border-strongfor semantic border progression- Shadow effects for depth without layer conflicts
The hover states correctly maintain the base background layer.
Based on learnings: Use Layer for cards within a surface, semantic border colors for emphasis, and ensure hover states match the base background layer.
packages/propel/src/input/input.tsx (1)
32-43: LGTM! Input styling consistently updated with semantic tokens.The Propel input component correctly applies:
bg-layer-1for form element backgroundsplaceholder-tertiaryfor semantic placeholder textborder-subtle-1for consistent bordersring-accent-strongfor focus states in transparent modeThis maintains consistency with the design system across both UI packages.
Based on learnings: Form elements should use appropriate layer backgrounds and semantic text/border colors.
apps/web/core/components/workspace/sidebar/dropdown-item.tsx (2)
90-93: LGTM! Proper event propagation handling.Adding
stopPropagation()prevents the parent Link click handler from triggering when clicking the nested Settings/Invite links, and callinghandleClose()properly dismisses the dropdown. This is the correct pattern for nested interactive elements.Also applies to: 103-106
94-98: LGTM! Improved button styling and layout stability.The updates correctly apply:
border-strongfor emphasis on action buttonsbg-layer-2appropriate for button elements within the dropdownhover:shadow-raised-100for visual feedbackflex-shrink-0on icons andwhitespace-nowrapon text prevent layout shiftsThese changes enhance both visual consistency and UX stability.
Based on learnings: Use semantic border colors for emphasis and appropriate layer backgrounds for nested elements.
Also applies to: 107-112
packages/ui/src/tabs/tab-list.tsx (2)
22-34: LGTM! Good API enhancement with autoWrap prop.Adding the
autoWrapprop provides flexibility to useTabListin contexts whereTab.Groupis already provided by a parent component. The conditional rendering pattern is clean and maintains backward compatibility with the defaultautoWrap = true.
72-74: LGTM! Dynamic icon sizing improvement.Replacing the fixed
size-4with dynamic sizing based on thesizeprop (size-3for sm,size-4for md,size-5for lg) provides better visual consistency across different tab sizes.apps/web/core/components/comments/card/edit-form.tsx (4)
9-9: LGTM: Clean import addition.The
cnutility import is properly added and consistently used throughout the file for conditional className composition.
49-49: LGTM: Simplified redundant nullish coalescing.The
?? undefinedwas unnecessary sinceisCommentEmptyalready accepts and handlesundefinedvalues.
108-108: LGTM: Improved button spacing.The increased gap provides better visual separation between action buttons, aligning with design system spacing standards.
114-149: LGTM: Excellent button styling refactor.The changes successfully:
- Unify styling with the
cnutility for better maintainability- Implement proper disabled states with reduced opacity
- Add smooth hover transitions with
duration-300- Correctly disable the close button during submission to prevent race conditions
- Use semantic color tokens (
text-on-color) for icon statesThe consistent pattern applied to both action buttons improves code quality and user experience.
| }} | ||
| projectId={projectId} | ||
| parentClassName="p-2" | ||
| parentClassName="p-2 bg-surface-1" |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for the edit-form.tsx file and examine LiteTextEditor usage
fd -t f "edit-form.tsx" | head -5Repository: makeplane/plane
Length of output: 111
🏁 Script executed:
#!/bin/bash
# Find all LiteTextEditor usages with parentClassName
rg -B2 -A2 "parentClassName" --type=tsx --type=ts | head -100Repository: makeplane/plane
Length of output: 86
🏁 Script executed:
#!/bin/bash
# Read the edit-form.tsx file to see the context
cat -n apps/web/core/components/comments/card/edit-form.tsx | head -120Repository: makeplane/plane
Length of output: 4804
🏁 Script executed:
#!/bin/bash
# Search for parentClassName usage across codebase
rg "parentClassName" -A 1 -B 1 | head -150Repository: makeplane/plane
Length of output: 2484
🏁 Script executed:
#!/bin/bash
# Check the parent component structure to understand nesting hierarchy
cat -n apps/web/core/components/comments/card/index.tsx | head -80Repository: makeplane/plane
Length of output: 139
🏁 Script executed:
#!/bin/bash
# Look for other Surface backgrounds used in similar form/editor contexts
rg "bg-surface" --type=ts --type=tsx | grep -E "(Editor|editor|input|form)" | head -20Repository: makeplane/plane
Length of output: 86
🏁 Script executed:
#!/bin/bash
# Find the correct file name in the comments/card directory
ls -la apps/web/core/components/comments/card/Repository: makeplane/plane
Length of output: 352
🏁 Script executed:
#!/bin/bash
# Search for bg-surface usage in editor/form contexts
rg "bg-surface" | grep -i "editor\|form\|input" | head -20Repository: makeplane/plane
Length of output: 4112
🏁 Script executed:
#!/bin/bash
# Check the root.tsx to understand the parent component structure
cat -n apps/web/core/components/comments/card/root.tsxRepository: makeplane/plane
Length of output: 3132
🏁 Script executed:
#!/bin/bash
# Look at comment-create.tsx to compare how it uses parentClassName
cat -n apps/web/core/components/comments/comment-create.tsx | head -150Repository: makeplane/plane
Length of output: 6055
🏁 Script executed:
#!/bin/bash
# Check the display.tsx to see the comment card structure
cat -n apps/web/core/components/comments/card/display.tsxRepository: makeplane/plane
Length of output: 3333
🏁 Script executed:
#!/antml:function_calls
# Look for CommentBlock component to understand parent hierarchy
rg "CommentBlock" -B5 -A10 | head -50Repository: makeplane/plane
Length of output: 3851
🏁 Script executed:
#!/bin/bash
# Find and examine the CommentBlock component definition
find . -path "*/plane-web/components/comments*" -name "*.tsx" -type fRepository: makeplane/plane
Length of output: 41
🏁 Script executed:
#!/antml:function_calls
# Check the design system documentation for form elements in the AGENTS.md
cat packages/tailwind-config/AGENTS.md | head -200Repository: makeplane/plane
Length of output: 6077
🏁 Script executed:
#!/bin/bash
# Continue reading the AGENTS.md file for more guidance
tail -n +200 packages/tailwind-config/AGENTS.md | head -200Repository: makeplane/plane
Length of output: 5005
🏁 Script executed:
#!/antml:function_calls
# Check what bg-surface-1 context means in comment-create vs edit-form
rg "parentClassName" -B5 -A5 | grep -E "(comment-create|edit-form|parentClassName)" | head -30Repository: makeplane/plane
Length of output: 2685
Use bg-layer-1 or remove the background color to match design system semantics.
The editor is a nested form element within a comment card, not a top-level container. Per the design system, nested elements must use Layer classes (bg-layer-1, bg-layer-2, bg-layer-3) or no background, never Surface classes. The established pattern in comment-create.tsx shows the editor using only padding (p-2) when wrapped in a surface.
🤖 Prompt for AI Agents
In apps/web/core/components/comments/card/edit-form.tsx around line 102, the
editor is using a Surface background class ("bg-surface-1") which violates the
design system for nested elements; change parentClassName to use a Layer class
(e.g., "p-2 bg-layer-1") or remove the background entirely and keep only "p-2"
to match the established pattern in comment-create.tsx when the editor is
wrapped by a surface container.
| <div className="flex items-center justify-center size-5"> | ||
| <button | ||
| className="flex size-4 items-center justify-center rounded-full bg-layer-3" | ||
| className="flex size-6 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover flex-shrink-0" |
There was a problem hiding this comment.
Verify layer level: should be bg-layer-1 or bg-layer-2, not bg-layer-3.
The button is directly nested within a bg-surface-1 container (Line 156). According to the design system guidelines, layers should stack progressively (surface → layer-1 → layer-2 → layer-3), and most components should remain at layer-1 complexity. For buttons on surfaces, bg-layer-1 is appropriate, or bg-layer-2 at most for visual separation. Using bg-layer-3 skips intermediate layers and violates the stacking hierarchy.
Based on learnings, design system layer stacking guidelines.
Apply this diff to use the correct layer level:
- className="flex size-6 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover flex-shrink-0"
+ className="flex size-6 items-center justify-center rounded-full bg-layer-1 hover:bg-layer-1-hover flex-shrink-0"📝 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.
| className="flex size-6 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover flex-shrink-0" | |
| className="flex size-6 items-center justify-center rounded-full bg-layer-1 hover:bg-layer-1-hover flex-shrink-0" |
🤖 Prompt for AI Agents
In apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx around
line 159, the button uses bg-layer-3 which breaks the design-system stacking
(it's inside a bg-surface-1 container); change the class to use bg-layer-1 (or
bg-layer-2 if slightly stronger contrast is required) instead of bg-layer-3,
update any corresponding hover class to the matching layer hover variant (e.g.,
bg-layer-1-hover), and verify visually that contrast and spacing remain correct
against the surrounding surface.
| "h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary", | ||
| { | ||
| "cursor-pointer hover:border-danger-strong hover:bg-danger-subtle": !disabled, | ||
| "cursor-pointer": !disabled, | ||
| } | ||
| )} |
There was a problem hiding this comment.
Incorrect usage of -active state variant as base background.
The button is using bg-layer-transparent-active as the base background, but -active state variants should only be used for elements in pressed/active states, not as a permanent base style. Additionally, removing hover feedback (hover:bg-layer-transparent-hover) from an interactive button reduces discoverability.
Apply this diff to use the correct base background with hover state:
className={cn(
- "h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
+ "h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent hover:bg-layer-transparent-hover group text-body-xs-regular text-tertiary",
{
- "cursor-pointer": !disabled,
+ "cursor-pointer hover:border-danger-strong": !disabled,
}
)}Based on learnings: Use -active state variants only for elements in pressed/active states, and always include hover states for interactive elements to match the base background layer.
📝 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.
| "h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary", | |
| { | |
| "cursor-pointer hover:border-danger-strong hover:bg-danger-subtle": !disabled, | |
| "cursor-pointer": !disabled, | |
| } | |
| )} | |
| "h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent hover:bg-layer-transparent-hover group text-body-xs-regular text-tertiary", | |
| { | |
| "cursor-pointer hover:border-danger-strong": !disabled, | |
| } | |
| )} |
🤖 Prompt for AI Agents
In apps/web/core/components/issues/issue-detail/label/label-list-item.tsx around
lines 38 to 42, the class uses bg-layer-transparent-active as a permanent base
background and omits hover feedback; change the base background to
bg-layer-transparent, add hover:bg-layer-transparent-hover for interactive hover
feedback, and keep bg-layer-transparent-active only in the active/pressed state
(or via an active state class) while preserving the conditional "cursor-pointer"
when not disabled.
|
|
||
| ul[data-type="taskList"] li > label input[type="checkbox"] { | ||
| @apply border! border-strong/20!; | ||
| @apply border! border-strong!; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, let's see the file structure around line 108
head -n 160 packages/editor/src/styles/editor.css | tail -n 60Repository: makeplane/plane
Length of output: 1629
🏁 Script executed:
#!/bin/bash
# Search for all rules targeting the checkbox selector
rg -n "ul\[data-type=\"taskList\"\].*input\[type=\"checkbox\"\]" packages/editor/src/styles/editor.cssRepository: makeplane/plane
Length of output: 340
🏁 Script executed:
#!/bin/bash
# Get the full CSS rules at lines 107-112 and 144-180 to see the complete duplicate
sed -n '107,115p' packages/editor/src/styles/editor.css
echo "---SEPARATOR---"
sed -n '144,165p' packages/editor/src/styles/editor.cssRepository: makeplane/plane
Length of output: 872
🏁 Script executed:
#!/bin/bash
# Check if the file has been properly formatted with Prettier
# Also check the entire structure to understand if this is part of a nested rule or separate rules
wc -l packages/editor/src/styles/editor.css
echo "---Checking for SCSS nesting syntax---"
sed -n '144,160p' packages/editor/src/styles/editor.cssRepository: makeplane/plane
Length of output: 548
🏁 Script executed:
#!/bin/bash
# Let's see the full context - check if this is SCSS with proper nesting
# Look for the opening brace before line 107 to understand structure
sed -n '100,180p' packages/editor/src/styles/editor.css | cat -nRepository: makeplane/plane
Length of output: 2646
🏁 Script executed:
#!/bin/bash
# Check the git history to understand what changed
git log --oneline -20 packages/editor/src/styles/editor.css
echo "---Now let's see the diff for this file---"
git diff HEAD packages/editor/src/styles/editor.css | head -100Repository: makeplane/plane
Length of output: 211
🏁 Script executed:
#!/bin/bash
# Check the file type and if it's properly formatted
file packages/editor/src/styles/editor.css
echo "---Check if prettier/tailwind has been run---"
head -20 packages/editor/src/styles/editor.cssRepository: makeplane/plane
Length of output: 657
🏁 Script executed:
#!/bin/bash
# Let's check the git diff to see what actually changed in this PR
git show HEAD:packages/editor/src/styles/editor.css | sed -n '107,112p'Repository: makeplane/plane
Length of output: 219
🏁 Script executed:
#!/bin/bash
# Check the previous commit to see the original state
git show HEAD~1:packages/editor/src/styles/editor.css | sed -n '107,112p'Repository: makeplane/plane
Length of output: 95
🏁 Script executed:
#!/bin/bash
# Check the git status to see what's staged or modified
git status packages/editor/src/styles/editor.css
echo "---Check git log for any recent changes---"
git log --all --oneline packages/editor/src/styles/editor.css | head -5Repository: makeplane/plane
Length of output: 540
🏁 Script executed:
#!/bin/bash
# Let's check if there's a design system or tailwind config that documents border-strong vs border-subtle-1
find packages/tailwind-config -name "*.md" -o -name "*.js" -o -name "*.ts" | head -20Repository: makeplane/plane
Length of output: 136
🏁 Script executed:
#!/bin/bash
# Check the AGENTS.md file for border color definitions
cat packages/tailwind-config/AGENTS.mdRepository: makeplane/plane
Length of output: 19006
🏁 Script executed:
#!/bin/bash
# Verify if the file follows formatting standards by checking for similar patterns
# Search for other duplicate selectors in the file
rg -n "^[a-z].*\{$" packages/editor/src/styles/editor.css | head -30Repository: makeplane/plane
Length of output: 905
🏁 Script executed:
#!/bin/bash
# Let's look at what's between line 107 and 144 to understand the full context
sed -n '100,148p' packages/editor/src/styles/editor.css | nl -v 100Repository: makeplane/plane
Length of output: 101
🏁 Script executed:
#!/bin/bash
# Use cat -n to show line numbers
sed -n '100,180p' packages/editor/src/styles/editor.css | cat -n -v 100Repository: makeplane/plane
Length of output: 94
🏁 Script executed:
#!/bin/bash
# Show lines 100-180 with line numbers
awk 'NR>=100 && NR<=180 {print NR": "$0}' packages/editor/src/styles/editor.cssRepository: makeplane/plane
Length of output: 2484
Consolidate the duplicate checkbox selector rules to improve maintainability.
The change from border-strong/20 to border-strong correctly removes the opacity modifier, making the checkbox border fully opaque and aligned with design system emphasis semantics. However, the same selector ul[data-type="taskList"] li > label input[type="checkbox"] appears twice: a simple rule at lines 107–112 with border-strong! and a comprehensive rule at lines 144–180 with border-md border-subtle-1. The first rule's !important override cascades correctly, but maintaining duplicate selectors with conflicting border properties is a code maintenance risk. Consolidate these rules into a single definition.
🤖 Prompt for AI Agents
In packages/editor/src/styles/editor.css around lines 107–112 and 144–180, there
are duplicate rules for the same selector (ul[data-type="taskList"] li > label
input[type="checkbox"]) with conflicting border properties; consolidate them
into a single rule by removing the duplicate simple rule and updating the
remaining comprehensive block to use the intended fully-opaque border
(border-strong) instead of border-md/border-subtle-1, remove any conflicting
border declarations, and keep or add the !important only if necessary for
specificity so the checkbox border is defined in one place.
| { | ||
| className, | ||
| background = "layer-1", | ||
| background = "layer-2", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find the tabs.tsx file and examine it
fd -t f "tabs.tsx" packages/propel/src/ | head -5
# Also check for TabsList usage patterns
rg -n "TabsList|Tabs\.List" packages/ -t ts -t tsx -C 3 | head -100Repository: makeplane/plane
Length of output: 137
🏁 Script executed:
# First, find tabs.tsx and examine its content
cat packages/propel/src/tabs/tabs.tsxRepository: makeplane/plane
Length of output: 4455
🏁 Script executed:
# Search for actual usage of TabsList/Tabs.List in the codebase
rg "Tabs\.List|TabsList" packages/ -t ts -t tsx -B 2 -A 2Repository: makeplane/plane
Length of output: 86
🏁 Script executed:
# Also search for usage of "background.*layer" in tabs-related files to understand context
rg -i "background.*layer|layer.*background" packages/propel/src/tabs/ -t ts -t tsxRepository: makeplane/plane
Length of output: 86
🏁 Script executed:
# Try finding Tabs.List or TabsList usage without -t flag
rg "Tabs\.List|TabsList|<Tabs" packages/ --include="*.ts" --include="*.tsx" -B 2 -A 2 | head -150Repository: makeplane/plane
Length of output: 500
🏁 Script executed:
# Search for imports of Tabs from tabs.tsx
rg "from.*tabs/tabs|import.*Tabs.*from" packages/ --include="*.ts" --include="*.tsx" -B 1 -A 1Repository: makeplane/plane
Length of output: 500
🏁 Script executed:
# Find all files that import Tabs
fd -e tsx -e ts . packages/ | xargs grep -l "from.*tabs/tabs\|import.*Tabs" 2>/dev/null | head -20Repository: makeplane/plane
Length of output: 232
🏁 Script executed:
# Search for usage patterns of Tabs component
fd -e tsx . packages/ -exec grep -l "Tabs\.List\|<Tabs" {} \; | head -10Repository: makeplane/plane
Length of output: 1405
🏁 Script executed:
# Look at the AGENTS.md to understand layer guidance
cat packages/tailwind-config/AGENTS.md 2>/dev/null || find packages -name "AGENTS.md" -exec cat {} \;Repository: makeplane/plane
Length of output: 19006
🏁 Script executed:
# Check the tabs stories to see how TabsList is used
cat packages/propel/src/tabs/tabs.stories.tsxRepository: makeplane/plane
Length of output: 11419
🏁 Script executed:
# Search for any usage in emoji-picker which was found to use tabs
cat packages/propel/src/emoji-icon-picker/emoji-picker.tsx | head -100Repository: makeplane/plane
Length of output: 2926
Default TabsList background should be "layer-1", not "layer-2".
The default background = "layer-2" violates the design system principles. According to the learnings: "keep most components at layer-1 complexity" and "match layer numbers to surface numbers." TabsList is a navigation/interactive component that typically appears as the first level of nesting within a surface. Using layer-2 as the default assumes all tabs exist in layer-1 contexts, which breaks the established hierarchy and creates a breaking change for existing implementations.
Additionally, TabsIndicator uses bg-surface-1, which is incorrect. The indicator should match the TabsList background layer (e.g., if TabsList is layer-2, indicator should be layer-2 or a matching state variant, not surface-1).
🤖 Prompt for AI Agents
In packages/propel/src/tabs/tabs.tsx around line 43, the TabsList default
background is set to "layer-2" which violates the design system; change the
default to "layer-1". Also update TabsIndicator so its background matches the
TabsList background layer (use the same layer value or a corresponding state
variant instead of hardcoding "surface-1") — ensure the indicator reads the
TabsList background prop or shared variable so both remain in sync.
Description
This PR fixes new design system inconsistency across the application.
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.