Conversation
…ross various dropdowns and lists
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis PR applies presentational updates across many frontend components: replaces some native wrappers with a shared Button component, standardizes typography to text-body-xs-medium, tweaks spacing/layout in several lists, and modifies one Tailwind color token (background-color-surface-2). Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
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 (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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). (2)
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] ... : var(--color-alpha-white-400);\n --text-color-icon-inverse: var(--color-neutral-black);\n\n /* Link colors */\n --text-color-link-primary: var(--color-brand-default)Biome 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 |
…/workitem-detail-sidebar-properties-design-consistency
JayashTripathy
changed the title
There was a problem hiding this comment.
Pull request overview
This PR refactors the workitem detail sidebar properties to improve design consistency across the application. The changes focus on typography, spacing, and visual alignment to create a more uniform user experience.
- Updated font weights from
text-body-xs-regulartotext-body-xs-mediumfor better readability and consistency - Standardized spacing between property items (from
space-y-2tospace-y-3and gap changes) - Replaced custom styled elements with Plane's propel Button components for consistency
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/tailwind-config/variables.css | Fixed CSS syntax error in scrollbar utility, updated font family to "Inter Variable", changed surface-2 color, and added material-symbols-rounded utility |
| apps/web/core/components/rich-filters/filters-toggle.tsx | Refactored filter button styling with better organization of active/hover states and added iconClassName prop |
| apps/web/core/components/issues/peek-overview/properties.tsx | Updated typography from regular to medium weight, adjusted spacing, and added childrenClassName for created_by field |
| apps/web/core/components/issues/issue-detail/parent-select.tsx | Changed parent issue identifier variant from success to secondary and updated placeholder font weight |
| apps/web/core/components/issues/issue-detail/module-select.tsx | Standardized button container height and typography to match other dropdowns |
| apps/web/core/components/issues/issue-detail/label/select/label-select.tsx | Converted custom button to propel Button component with Plus icon and simplified label rendering |
| apps/web/core/components/issues/issue-detail/label/root.tsx | Added horizontal padding to label container |
| apps/web/core/components/issues/issue-detail/label/label-list-item.tsx | Replaced custom button with propel Button component and removed cn utility import |
| apps/web/core/components/issues/issue-detail/cycle-select.tsx | Standardized button container height and typography |
| apps/web/core/components/dropdowns/priority.tsx | Updated all priority buttons to use medium font weight with conditional text colors |
| apps/web/core/components/dropdowns/member/base.tsx | Added text-left and typography classes to member display |
| apps/web/core/components/dropdowns/date.tsx | Added text-left and typography classes to date display |
| apps/web/core/components/dropdowns/buttons.tsx | Replaced custom divs with propel Button components for all dropdown button variants |
| apps/web/core/components/common/layout/sidebar/property-list-item.tsx | Updated gap from 2 to 3, changed items-center to items-start, added font-medium, and reduced children gap |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| onClick={handleLabel} | ||
| disabled={disabled} | ||
| > | ||
| <Button key={labelId} type="button" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}> |
There was a problem hiding this comment.
The onClick handler wraps the async function handleLabel with void operator, but handleLabel can be passed directly. The current pattern onClick={() => void handleLabel()} is unnecessarily verbose. Consider using onClick={handleLabel} instead for better readability and consistency.
| <Button key={labelId} type="button" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}> | |
| <Button key={labelId} type="button" variant="tertiary" onClick={handleLabel} disabled={disabled}> |
| onClick={handleLabel} | ||
| disabled={disabled} | ||
| > | ||
| <Button key={labelId} type="button" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}> |
There was a problem hiding this comment.
The Button component is missing a size prop. For consistency with the label-select.tsx file (line 127), consider adding size="sm" to ensure uniform button sizing across label components.
| <Button key={labelId} type="button" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}> | |
| <Button key={labelId} type="button" size="sm" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}> |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/core/components/dropdowns/date.tsx (1)
141-143: Typography update looks good for design consistency.The addition of
text-body-xs-mediumandtext-leftclasses aligns well with the PR's design consistency objective.For improved semantic clarity, consider adding conditional text colors to make the intent more explicit:
<span className={cn( "flex-grow truncate text-left text-body-xs-medium", value ? "text-primary" : "text-placeholder" )}> {value ? renderFormattedDate(value, formatToken) : placeholder} </span>Based on learnings, using
text-primaryfor main content (the date value) andtext-placeholderfor placeholder text provides better visual hierarchy and makes the styling intent explicit rather than relying on inheritance.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
apps/web/core/components/common/layout/sidebar/property-list-item.tsx(1 hunks)apps/web/core/components/dropdowns/buttons.tsx(4 hunks)apps/web/core/components/dropdowns/date.tsx(1 hunks)apps/web/core/components/dropdowns/member/base.tsx(1 hunks)apps/web/core/components/dropdowns/priority.tsx(4 hunks)apps/web/core/components/issues/issue-detail/cycle-select.tsx(1 hunks)apps/web/core/components/issues/issue-detail/label/label-list-item.tsx(2 hunks)apps/web/core/components/issues/issue-detail/label/root.tsx(1 hunks)apps/web/core/components/issues/issue-detail/label/select/label-select.tsx(3 hunks)apps/web/core/components/issues/issue-detail/module-select.tsx(1 hunks)apps/web/core/components/issues/issue-detail/parent-select.tsx(3 hunks)apps/web/core/components/issues/peek-overview/properties.tsx(7 hunks)apps/web/core/components/rich-filters/filters-toggle.tsx(2 hunks)packages/tailwind-config/variables.css(3 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/dropdowns/date.tsxapps/web/core/components/issues/issue-detail/label/root.tsxapps/web/core/components/rich-filters/filters-toggle.tsxapps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/issue-detail/cycle-select.tsxapps/web/core/components/issues/issue-detail/label/select/label-select.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/dropdowns/member/base.tsxapps/web/core/components/issues/issue-detail/module-select.tsxapps/web/core/components/issues/peek-overview/properties.tsxapps/web/core/components/common/layout/sidebar/property-list-item.tsxapps/web/core/components/issues/issue-detail/parent-select.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Enable TypeScript strict mode and ensure all files are fully typed
Files:
apps/web/core/components/dropdowns/date.tsxapps/web/core/components/issues/issue-detail/label/root.tsxapps/web/core/components/rich-filters/filters-toggle.tsxapps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/issue-detail/cycle-select.tsxapps/web/core/components/issues/issue-detail/label/select/label-select.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/dropdowns/member/base.tsxapps/web/core/components/issues/issue-detail/module-select.tsxapps/web/core/components/issues/peek-overview/properties.tsxapps/web/core/components/common/layout/sidebar/property-list-item.tsxapps/web/core/components/issues/issue-detail/parent-select.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/dropdowns/date.tsxapps/web/core/components/issues/issue-detail/label/root.tsxapps/web/core/components/rich-filters/filters-toggle.tsxapps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/issue-detail/cycle-select.tsxapps/web/core/components/issues/issue-detail/label/select/label-select.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/dropdowns/member/base.tsxapps/web/core/components/issues/issue-detail/module-select.tsxpackages/tailwind-config/variables.cssapps/web/core/components/issues/peek-overview/properties.tsxapps/web/core/components/common/layout/sidebar/property-list-item.tsxapps/web/core/components/issues/issue-detail/parent-select.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/dropdowns/date.tsxapps/web/core/components/issues/issue-detail/label/root.tsxapps/web/core/components/rich-filters/filters-toggle.tsxapps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/issue-detail/cycle-select.tsxapps/web/core/components/issues/issue-detail/label/select/label-select.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/dropdowns/member/base.tsxapps/web/core/components/issues/issue-detail/module-select.tsxapps/web/core/components/issues/peek-overview/properties.tsxapps/web/core/components/common/layout/sidebar/property-list-item.tsxapps/web/core/components/issues/issue-detail/parent-select.tsx
🧠 Learnings (20)
📓 Common learnings
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use semantic text colors that match the visual hierarchy: `text-primary` for main text and headings, `text-secondary` for descriptions, `text-tertiary` for labels and metadata, and `text-placeholder` for placeholder text and hints
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.
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `-active` state variants (e.g., `bg-layer-1-active`) when an element is in a pressed or active state
📚 Learning: 2025-01-17T05:17:51.953Z
Learnt from: vineetk13
Repo: makeplane/plane PR: 6391
File: web/styles/react-day-picker.css:249-282
Timestamp: 2025-01-17T05:17:51.953Z
Learning: In the date range picker's CSS, left/right positioning for cell background effects (like in `.rdp-range_start::before`, `.rdp-range_middle::before`, `.rdp-range_end::before`) should use physical properties instead of logical properties, as these create visual effects that should remain consistent regardless of text direction.
Applied to files:
apps/web/core/components/dropdowns/date.tsx
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `-active` state variants (e.g., `bg-layer-1-active`) when an element is in a pressed or active state
Applied to files:
apps/web/core/components/rich-filters/filters-toggle.tsxapps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsxpackages/tailwind-config/variables.css
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Do not use hover state classes (e.g., `bg-layer-1-hover`) as base backgrounds - hover states should only be applied with the `hover:` prefix alongside the base background class
Applied to files:
apps/web/core/components/rich-filters/filters-toggle.tsxapps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsx
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Sidebar menu items should use transparent backgrounds with hover states like `hover:bg-layer-1-hover` rather than base layer backgrounds, maintaining visual lightness while providing hover feedback
Applied to files:
apps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsxpackages/tailwind-config/variables.cssapps/web/core/components/common/layout/sidebar/property-list-item.tsxapps/web/core/components/issues/issue-detail/parent-select.tsx
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use semantic border colors: `border-subtle` for subtle borders and dividers, `border-subtle-1` for slightly more visible borders, `border-strong` for strong emphasis borders, and `border-strong-1` for very strong borders
Applied to files:
apps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsxpackages/tailwind-config/variables.css
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `-selected` state variants (e.g., `bg-layer-1-selected`) only when there is actual selection logic implemented, or use data attributes like `data-[selected]:bg-layer-1-selected`
Applied to files:
apps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/issue-detail/module-select.tsxpackages/tailwind-config/variables.cssapps/web/core/components/issues/issue-detail/parent-select.tsx
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Never use `bg-layer-2` or higher for content boxes and cards - always use the matching layer number; the exception for going one level above applies only to interactive form elements
Applied to files:
apps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsxpackages/tailwind-config/variables.css
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use the rare exception to go one level above for visual separation only in interactive form elements (inputs, buttons, switches) within modals - for example, a modal with `bg-surface-1` can use `bg-layer-2` for form inputs to achieve visual distinction
Applied to files:
apps/web/core/components/dropdowns/buttons.tsxapps/web/core/components/dropdowns/priority.tsxpackages/tailwind-config/variables.cssapps/web/core/components/issues/issue-detail/parent-select.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/dropdowns/buttons.tsxapps/web/core/components/issues/issue-detail/label/select/label-select.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.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/core/components/dropdowns/buttons.tsxapps/web/core/components/issues/issue-detail/label/select/label-select.tsx
📚 Learning: 2025-10-09T22:12:26.424Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T22:12:26.424Z
Learning: When `types/react` is installed in a TypeScript project (which is standard for React + TypeScript codebases), React types (React.FC, React.ReactNode, React.ComponentProps, etc.) are globally available by design. These type annotations can and should be used without explicitly importing the React namespace. This is a TypeScript/DefinitelyTyped feature, not codebase-specific configuration.
Applied to files:
apps/web/core/components/dropdowns/buttons.tsx
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use semantic text colors that match the visual hierarchy: `text-primary` for main text and headings, `text-secondary` for descriptions, `text-tertiary` for labels and metadata, and `text-placeholder` for placeholder text and hints
Applied to files:
apps/web/core/components/dropdowns/priority.tsxpackages/tailwind-config/variables.cssapps/web/core/components/issues/issue-detail/parent-select.tsx
📚 Learning: 2025-11-25T10:18:05.172Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: .github/instructions/typescript.instructions.md:0-0
Timestamp: 2025-11-25T10:18:05.172Z
Learning: Prioritize using modern features and best practices introduced in TypeScript versions 5.0 through 5.8
Applied to files:
apps/web/core/components/dropdowns/priority.tsx
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `bg-surface-1`, `bg-surface-2`, or `bg-surface-3` for top-level containers that sit directly on the canvas, such as main content areas, page sections, or primary containers
Applied to files:
packages/tailwind-config/variables.css
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Do not use `bg-canvas` for page-level backgrounds, nested containers, cards, components, modals, dropdowns, sidebars, or panels
Applied to files:
packages/tailwind-config/variables.css
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `bg-layer-1`, `bg-layer-2`, and `bg-layer-3` for nested elements within a surface to create depth, with layer-1 being the closest to the surface, layer-2 on top of layer-1, and layer-3 on top of layer-2
Applied to files:
packages/tailwind-config/variables.css
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Always pair hover states with matching base backgrounds: use `hover:bg-layer-X-hover` only with `bg-layer-X`, use `hover:bg-surface-X-hover` only with `bg-surface-X`, never use mismatched combinations like `bg-layer-1 hover:bg-layer-2-hover`
Applied to files:
packages/tailwind-config/variables.css
📚 Learning: 2025-12-17T10:58:59.591Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.591Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Pages and routes should use `bg-surface-1` (or appropriate surface variant) as their root container, not `bg-canvas`
Applied to files:
packages/tailwind-config/variables.css
📚 Learning: 2025-10-10T13:25:14.810Z
Learnt from: gakshita
Repo: makeplane/plane PR: 7949
File: apps/web/core/components/issues/issue-modal/form.tsx:183-189
Timestamp: 2025-10-10T13:25:14.810Z
Learning: In `apps/web/core/components/issues/issue-modal/form.tsx`, the form reset effect uses a `dataResetProperties` dependency array prop (default: []) to give parent components explicit control over when the form resets. Do not suggest adding the `data` prop itself to the dependency array, as this would cause unwanted resets on every render when the data object reference changes, disrupting user input. The current pattern is intentional and allows the parent to trigger resets only when specific conditions are met.
Applied to files:
apps/web/core/components/issues/peek-overview/properties.tsxapps/web/core/components/issues/issue-detail/parent-select.tsx
🧬 Code graph analysis (6)
apps/web/core/components/dropdowns/date.tsx (1)
packages/utils/src/datetime.ts (1)
renderFormattedDate(13-32)
apps/web/core/components/issues/issue-detail/label/select/label-select.tsx (2)
packages/i18n/src/store/index.ts (1)
t(222-243)apps/web/core/store/label.store.ts (1)
projectLabels(93-101)
apps/web/core/components/issues/issue-detail/label/label-list-item.tsx (1)
packages/propel/src/icons/actions/close-icon.tsx (1)
CloseIcon(6-15)
apps/web/core/components/issues/peek-overview/properties.tsx (2)
apps/web/core/components/common/layout/sidebar/property-list-item.tsx (1)
SidebarPropertyListItem(12-25)packages/propel/src/icons/properties/user-circle-icon.tsx (1)
UserCirclePropertyIcon(6-17)
apps/web/core/components/common/layout/sidebar/property-list-item.tsx (1)
packages/propel/src/icons/icon.tsx (1)
Icon(11-14)
apps/web/core/components/issues/issue-detail/parent-select.tsx (1)
packages/i18n/src/store/index.ts (1)
t(222-243)
⏰ 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). (2)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Agent
🔇 Additional comments (27)
apps/web/core/components/issues/issue-detail/label/root.tsx (1)
95-95: Padding change is consistent with existing label component patterns.The addition of
px-2to the root container at line 95 aligns with the padding already applied across related label subcomponents (label-select.tsx,create-label.tsx). Child components likelabel-list-item.tsxandlabel-list.tsxcorrectly rely on the parent container's padding, confirming proper separation of concerns and no visual regressions.apps/web/core/components/issues/issue-detail/module-select.tsx (1)
67-68: LGTM! Typography and sizing standardization.The migration from custom
text-13to the semantictext-body-xs-mediumtoken and explicit heighth-7.5improves design consistency across the sidebar properties. The placeholder text logic is correctly preserved.apps/web/core/components/issues/issue-detail/cycle-select.tsx (1)
53-54: LGTM! Consistent with module-select refactor.The same design system improvements applied here: semantic typography (
text-body-xs-medium) and standardized height (h-7.5). Placeholder text conditional logic remains intact.apps/web/core/components/issues/issue-detail/parent-select.tsx (2)
87-87: Verify the visual treatment change aligns with design intent.The parent issue display has been simplified from a
successvariant (typically green-tinted, emphasizing positive state) to asecondaryvariant (neutral styling). This removes the visual distinction that previously highlighted the parent-child relationship.While this appears intentional for design consistency, please confirm this change aligns with your design system's intent for representing parent issues—users may perceive the parent issue as less prominent with the neutral treatment.
Also applies to: 97-97
118-118: LGTM! Typography standardization complete.The placeholder text now uses
text-body-xs-medium, matching the typography pattern applied across all sidebar property selectors in this PR.apps/web/core/components/dropdowns/member/base.tsx (1)
147-147: LGTM! Styling consistency improvement.The addition of
text-leftandtext-body-xs-mediumclasses aligns with the PR's objective of standardizing typography across workitem detail sidebar properties. The change maintains existing layout behavior while improving design consistency.packages/tailwind-config/variables.css (3)
1137-1137: LGTM! Good catch on the CSS syntax error.Correctly removed the extra colon before the opening brace in the webkit-scrollbar selector.
1142-1156: Material Symbols Rounded font is properly loaded. The @Utility correctly references the font already defined via @font-face inpackages/propel/src/styles/fonts/index.csswith appropriatefont-display: swapto prevent FOIT. The utility implementation follows Google's recommended settings for Material Symbols.
833-837: Inter Variable font usage looks good.The font values are correctly declared. Ensure the font file is loaded via @font-face or equivalent CSS configuration, as with any custom font. Test rendering in your application to confirm the font loads and displays properly.
apps/web/core/components/common/layout/sidebar/property-list-item.tsx (2)
16-21: Verify vertical alignment with multi-line content.The change from
items-centertoitems-startwith increased gap (gap-3) will align labels to the top when children wrap to multiple lines. This appears intentional for better handling of wrapped content like multiple labels or assignees.The addition of
font-mediumto the label improves visual hierarchy, which is consistent with the design system's approach for labels and metadata.
22-22: LGTM: Flexible styling pattern.The reduced gap (
gap-1) provides tighter spacing for inline children, and thechildrenClassNameprop enables callers to add custom padding (e.g.,px-2as seen inproperties.tsx). This is a good composition pattern.apps/web/core/components/issues/issue-detail/label/label-list-item.tsx (1)
34-42: LGTM: Consistent Button migration.The migration from a native
buttonto theButtoncomponent withvariant="tertiary"standardizes styling and aligns with the broader refactor across the codebase. Thevoidkeyword correctly handles the asynchandleLabel()return value.apps/web/core/components/rich-filters/filters-toggle.tsx (1)
37-57: Verify intended hover behavior.The constructed classes suppress interactive state changes by explicitly setting
hover:,active:, andfocus:variants to the same values as the base state. This prevents visual feedback on user interaction.For example:
- Lines 39, 42, 46-47: All states forced to identical values
This is unusual and goes against typical UX patterns where hover states provide visual feedback. If this is intentional to maintain a consistent appearance when filters are active, consider documenting this design decision. Otherwise, consider allowing hover states to provide feedback as expected.
Based on learnings, hover states should typically be applied with the
hover:prefix alongside a base class, not used to suppress feedback.apps/web/core/components/issues/issue-detail/label/select/label-select.tsx (2)
88-88: LGTM: Consistent typography.The label now uses
text-body-xs-mediumandtext-placeholder, which aligns with the design consistency improvements across the PR and follows the coding guidelines for semantic text colors.
123-132: LGTM: Proper Button integration with Combobox.The Button component is correctly integrated with Headless UI's
Combobox.Buttonusing the Fragment pattern. TheprependIcon={<Plus />}adds clear visual affordance, and thevariant="tertiary"withsize="sm"is appropriate for this action.apps/web/core/components/dropdowns/priority.tsx (3)
123-130: LGTM: Consistent semantic colors.The dynamic className application correctly uses
text-body-xs-mediumas the base, withtext-secondaryfor actual priority values andtext-placeholderfor empty states. This follows the learned semantic color guidelines.
214-221: LGTM: Consistent with BorderButton.The typography and color patterns match the BorderButton implementation, maintaining consistency across priority dropdown variants.
261-261: LGTM: Completed typography consistency.The
px-2padding addition and typography updates complete the consistency pattern across all three priority button variants (Border, Background, Transparent). All now properly use semantic text colors.Also applies to: 298-305
apps/web/core/components/dropdowns/buttons.tsx (3)
75-87: LGTM: Proper state variant usage.The Button component with
variant="ghost"and the conditionalbg-layer-transparent-activefor active states follows the learned guidelines for state variants.
103-112: Verify bg-layer-3 usage context.The
bg-layer-3background is used here, but based on learned guidelines, layer-3 should typically be reserved for specific contexts. The exception for going one level above applies to interactive form elements within modals.Verify that this button is rendered in the appropriate context (e.g., within a modal with
bg-surface-1or similar) to justify the layer-3 usage. If this is a standard dropdown button, consider usingbg-layer-2instead.Based on learnings, layer numbers should match the component's context depth.
128-140: LGTM: Proper transparent button implementation.The transparent button correctly uses no base background and applies
bg-layer-transparent-activeonly when active, following the learned state variant patterns.apps/web/core/components/issues/peek-overview/properties.tsx (6)
78-78: LGTM: Consistent spacing increase.The change from
space-y-2tospace-y-3aligns with the increasedgap-3inproperty-list-item.tsxand improves visual breathing room between properties.
88-88: LGTM: Consistent typography across dropdowns.All dropdown button classes now use
text-body-xs-mediumas the base with appropriate conditionaltext-placeholderfor empty states. The logic correctly identifies when to show placeholder text:
- State: when no
state_id- Assignees: when empty array
- Priority: when undefined or "none"
Also applies to: 105-105, 119-121
125-138: LGTM: Proper use of new childrenClassName prop.The
childrenClassName="px-2"correctly uses the new prop fromSidebarPropertyListItem, and the typography (text-body-xs-medium text-secondary) follows semantic color guidelines for descriptive content.
154-154: LGTM: Consistent date field typography.The start date follows the same typography pattern as other date fields with appropriate placeholder handling.
175-178: LGTM: Proper danger state handling.The due date correctly uses
cn()for conditional class merging and appliestext-dangerwhen the date should be highlighted (overdue). This provides clear visual feedback to users.
196-196: LGTM: Proper undefined check for estimate.The condition correctly uses
!== undefinedrather than a falsy check, which is important since estimate points can be0(a valid value).
| --background-color-canvas: var(--color-neutral-black); | ||
| --background-color-surface-1: var(--color-neutral-100); | ||
| --background-color-surface-2: var(--color-neutral-100); | ||
| --background-color-surface-2: var(--color-neutral-200); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check the file exists and read around line 622
echo "=== Examining variables.css around line 622 ==="
head -n 630 packages/tailwind-config/variables.css | tail -n 20
echo ""
echo "=== Context of the change (lines 618-626) ==="
sed -n '618,626p' packages/tailwind-config/variables.css
echo ""
echo "=== Searching for bg-surface-2 usage in TypeScript/TSX files ==="
rg -n --type=ts --type=tsx 'bg-surface-2' --max-count=20
echo ""
echo "=== Searching for --background-color-surface-2 usage ==="
rg -n --type=ts --type=tsx 'background-color-surface-2' --max-count=20
echo ""
echo "=== Checking file size ==="
wc -l packages/tailwind-config/variables.cssRepository: makeplane/plane
Length of output: 2098
🏁 Script executed:
#!/bin/bash
# Search for surface-2 and surface-1 to see the pattern
echo "=== Light mode surface tokens ==="
head -n 400 packages/tailwind-config/variables.css | grep -A 5 'Light mode derived colors'
echo ""
echo "=== Dark mode surface tokens ==="
sed -n '618,630p' packages/tailwind-config/variables.css
echo ""
echo "=== Searching for surface-2 in all files (not just tsx) ==="
rg -n 'surface-2|surface-1' packages/ --max-count=30 | head -n 40
echo ""
echo "=== Check the GitHub diff or git log for this file ==="
cd packages/tailwind-config && git log --oneline -n 20 variables.css 2>/dev/null || echo "Git not available"Repository: makeplane/plane
Length of output: 7253
🏁 Script executed:
#!/bin/bash
# Get more context - check what surface tokens should be
echo "=== Full light and dark mode comparison ==="
echo "--- Light mode section ---"
sed -n '290,310p' packages/tailwind-config/variables.css
echo ""
echo "--- Dark mode section ---"
sed -n '618,635p' packages/tailwind-config/variables.css
echo ""
echo "=== Verify the pattern in neutral colors ==="
echo "Checking if neutral-100 and neutral-200 are distinct:"
grep -n "color-neutral-100\|color-neutral-200" packages/tailwind-config/variables.css | head -n 10Repository: makeplane/plane
Length of output: 3235
🏁 Script executed:
#!/bin/bash
# Double-check the exact current state and identify the discrepancy
echo "=== Verifying line 622 current content ==="
sed -n '622p' packages/tailwind-config/variables.css
echo ""
echo "=== Review comment claims line 622 shows neutral-200 but file shows: ==="
sed -n '622p' packages/tailwind-config/variables.css | cat -A
echo ""
echo "=== Check if surface-1 and surface-2 should be different ==="
echo "Light mode: surface-1 is neutral-white, surface-2 is neutral-200 (DIFFERENT)"
echo "Dark mode: surface-1 is neutral-100, surface-2 is neutral-100 (SAME) <-- BUG"
echo ""
echo "=== Components currently using bg-surface-2 (samples) ==="
grep -l "bg-surface-2" packages/ui/src/**/*.tsx 2>/dev/null | head -5
echo ""
echo "=== File status ==="
git diff packages/tailwind-config/variables.css 2>/dev/null | head -50 || echo "No git diff available"Repository: makeplane/plane
Length of output: 809
Change --background-color-surface-2 to var(--color-neutral-200) in dark mode.
In light mode, bg-surface-2 is set to neutral-200, creating visual hierarchy between surface tokens. Dark mode currently has both surface-1 and surface-2 as neutral-100, which breaks the design system pattern. Updating surface-2 to neutral-200 maintains consistent layering across light and dark modes and ensures components using this token have proper visual separation.
🤖 Prompt for AI Agents
In packages/tailwind-config/variables.css around line 622, the dark-mode value
for --background-color-surface-2 is currently matching surface-1 (neutral-100);
change the dark-mode assignment so --background-color-surface-2 is set to
var(--color-neutral-200) instead of var(--color-neutral-100). Update the
dark-mode CSS block where surface tokens are defined, ensure no other references
override it, and run the Tailwind build or visual checks to confirm surface-2
now provides the intended layer separation.
pushya22
deleted the
fix/workitem-detail-sidebar-properties-design-consistency
branch
Description
This PR fixes workitem detail sidebar properties design consistency
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Summary by CodeRabbit
Style
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.