[WEB-5614] chore: package and layout enhancements by anmolsinghbhatia · Pull Request #8403 · makeplane/plane

anmolsinghbhatia · 2025-12-19T15:38:59Z

Summary by CodeRabbit

Style
- Updated background color styling across project layouts and filter components for improved visual consistency.
- Enhanced button components with refined disabled state styling for better visual clarity.
- Improved visual presentation with adjusted padding and rounded corners on filter interfaces.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

makeplane · 2025-12-19T15:39:10Z

Linked to Plane Work Item(s)

[WEB-5614] Design System Consistency Implementation

This comment was auto-generated by Plane

coderabbitai · 2025-12-19T15:39:14Z

Walkthrough

This PR updates styling utility classes across multiple UI components, introducing a new color scheme for disabled button states and adjusting background and spacing properties in layout components. All changes are visual styling only with no functional modifications.

Changes

Cohort / File(s)	Summary
Layout component styling `apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx`	Background utility class updated from `bg-layer-2` to `bg-surface-1` in the main content container.
Rich filters styling `apps/web/core/components/rich-filters/filters-row.tsx`	Added background, horizontal padding, and rounded corners to main container. Updated HeaderVariant styling with modified padding and `bg-surface-1` background class.
Button disabled state styling `packages/propel/src/button/helper.tsx`, `packages/propel/src/icon-button/helper.tsx`, `packages/ui/src/button/helper.tsx`	Primary variant disabled text color changed from `disabled:text-disabled` / `text-placeholder` to `disabled:text-on-color-disabled` across button component libraries.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Areas for attention:

Verify the new bg-surface-1 and disabled:text-on-color-disabled utility classes exist and render correctly across the design system
Confirm visual consistency of disabled button states after the color change

Poem

🐰 With colors fresh and surfaces bright,
We paint the buttons in disabled light,
Background swaps make layouts sing,
A styling refresh—what joy we bring! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	No pull request description was provided; all required template sections are missing.	Add a comprehensive description including: detailed explanation of changes, type of change selection, test scenarios, and any relevant issue references.
Title check	❓ Inconclusive	The title is generic and vague, using broad terms like 'enhancements' without specifying what changes are actually made.	Revise the title to be more specific about the primary change, such as 'Update disabled button text colors and layout styling' or similar.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch chore-package-and-layout-enhancement

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 409a3e8 and 4dd57e4.

📒 Files selected for processing (5)

apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx (1 hunks)
apps/web/core/components/rich-filters/filters-row.tsx (2 hunks)
packages/propel/src/button/helper.tsx (1 hunks)
packages/propel/src/icon-button/helper.tsx (1 hunks)
packages/ui/src/button/helper.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(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 legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import 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 new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.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 via super in classes (TypeScript 5....

Files:

apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
packages/propel/src/icon-button/helper.tsx
packages/propel/src/button/helper.tsx
packages/ui/src/button/helper.tsx
apps/web/core/components/rich-filters/filters-row.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Enable TypeScript strict mode and ensure all files are fully typed

Files:

apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
packages/propel/src/icon-button/helper.tsx
packages/propel/src/button/helper.tsx
packages/ui/src/button/helper.tsx
apps/web/core/components/rich-filters/filters-row.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/issues/issue-layouts/roots/project-layout-root.tsx
packages/propel/src/icon-button/helper.tsx
packages/propel/src/button/helper.tsx
packages/ui/src/button/helper.tsx
apps/web/core/components/rich-filters/filters-row.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/issues/issue-layouts/roots/project-layout-root.tsx
packages/propel/src/icon-button/helper.tsx
packages/propel/src/button/helper.tsx
packages/ui/src/button/helper.tsx
apps/web/core/components/rich-filters/filters-row.tsx

🧠 Learnings (16)