[WEB-5699] refactor: update styling and classnames of charts according to new design system by JayashTripathy · Pull Request #8345 · makeplane/plane

JayashTripathy · 2025-12-15T14:38:20Z

Description

This PR updates styling and classnames according to new design system

Type of Change

Improvement (change that would cause existing functionality to not work as expected)
Code refactoring

Screenshots and Media (if applicable)

Test Scenarios

References

Summary by CodeRabbit

New Features
- Tabs component now supports customizable background styling with multiple layer options.
Style
- Updated chart visualizations with refined color schemes and typography for consistency.
- Enhanced tab and tooltip styling across analytics and chart components.
- Improved grid and cursor appearances for better visual clarity.

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

…em in charts

coderabbitai · 2025-12-15T14:38:36Z

Note

Other AI code review bot(s) detected

CodeRabbit 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.

Walkthrough

Multiple chart components and tabs styling updates unified across the design system. Bar chart constant extracted for reuse, Tabs.List API extended to support background variants, analytics page converted to use new tab styling, and chart tooltip/text styling harmonized with updated color palette.

Changes

Cohort / File(s)	Summary
Chart styling updates `apps/web/core/components/analytics/overview/project-insights.tsx`, `packages/propel/src/charts/bar-chart/root.tsx`, `packages/propel/src/charts/pie-chart/root.tsx`, `packages/propel/src/charts/tree-map/root.tsx`	Font sizes normalized (text-13 → text-sm), grid stroke colors updated, tooltip cursor styling unified to `bg-layer-1-hover` or `bg-layer-1 cursor-pointer`, and TreeMap background changed from `text-custom-background-100 bg-surface-1` to `bg-layer-1 cursor-pointer`.
Bar chart constant extraction `packages/propel/src/charts/bar-chart/bar.tsx`, `packages/propel/src/charts/bar-chart/root.tsx`	New `DEFAULT_BAR_FILL_COLOR` constant introduced in bar.tsx and exported; root.tsx now imports it instead of defining locally. PercentageText font size adjusted (text-11 → text-xs), CustomBar transition logic refactored.
Tabs component API extension `packages/propel/src/tabs/tabs.tsx`	Added `BackgroundVariant` type and optional `background?` prop to `Tabs.List`, enabling dynamic background class selection (layer-1, layer-2, layer-3, layer-transparent) with default layer-1.
Analytics page styling `apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx`	Removed `bg-surface-1` from outer container, added `background="layer-2"` to `Tabs.List`, and augmented `Tabs.Trigger` with explicit `onClick` handler for tab change propagation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Chart styling consistency: Review alignment of color palette changes across four chart components; verify all color references use updated variables consistently.
Tabs API change: Validate BackgroundVariant type usage, confirm default behavior (layer-1) doesn't break existing consumers, and ensure new background prop is backward compatible.
Bar chart constant extraction: Confirm DEFAULT_BAR_FILL_COLOR export from bar.tsx is used correctly in root.tsx and no other usages remain in root.tsx.
Analytics page integration: Verify new background="layer-2" and onClick handler on Tabs.Trigger work correctly with existing onValueChange navigation logic.

Poem

🐰 The colors shift, the styles align,
Charts now shimmer, bright and fine!
Tabs grow dynamic, layer by layer,
Analytics page's debut—we couldn't spare her! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description includes required sections but lacks detail on test scenarios and related issue references. The description is minimal but addresses the core purpose.
Title check	✅ Passed	The title clearly and specifically describes the main change: updating styling and classnames of charts according to a new design system, which directly aligns with the changes across multiple chart components and design tokens throughout the changeset.

✨ 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 refactor/analytics-dashboard-design-migration

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 9

🧹 Nitpick comments (7)

packages/propel/src/charts/tree-map/root.tsx (1)

20-32: Styling tokens & pointer cursor semantics – verify intent

Using bg-layer-1 cursor-pointer on both the <Treemap> (line 20) and tooltip cursor (line 32) looks consistent with the new design system, but there are two small things to double‑check:

The tooltip cursor sets fill: "currentColor", which follows the CSS color, not background-color. If the previous class was a text color token, switching to a bg-* token may mean the cursor rectangle’s fill now continues to use whatever text color it inherits rather than the new layer token. If the goal was to change the actual highlight color, consider applying an appropriate text/fill token instead of (or in addition to) bg-layer-1.

Applying cursor-pointer to the entire treemap and its hover cursor suggests clickability. If there’s no click interaction on the chart or segments, you may want to drop cursor-pointer or only add it conditionally when a click handler is present.

These are minor/optional, but worth aligning with UX and token semantics.

packages/propel/src/charts/pie-chart/root.tsx (1)

123-127: Double‑check bg-layer-1-hover interaction with fill: "currentColor" on cursor

The cursor still uses fill: "currentColor", but the class was changed from a text color token to bg-layer-1-hover, which typically sets background-color, not color. That may mean the SVG cursor rectangle no longer picks up the intended token via currentColor. Consider either using a token that affects color or setting the fill directly to the new design token, and keep cursor-pointer as a separate concern.
packages/ui/src/badge/helper.tsx (1)
28-43: Address TODO: Convert enums to const objects.

The TODO comments indicate that these enums should be converted to objects. Per TypeScript best practices and the coding guidelines (which prefer erasable syntax over enums), consider refactoring these to const objects with as const assertions.

Do you want me to generate a refactored implementation using const objects, or open a new issue to track this task?

Example refactor:
const badgeSizeStyling = {
  sm: `px-2.5 py-1 font-medium text-11 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
  md: `px-4 py-1.5 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
  lg: `px-4 py-2 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
  xl: `px-5 py-3 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
} as const;
packages/propel/src/charts/bar-chart/bar.tsx (2)
13-13: Consider using a theme token instead of hard-coded #000000 for DEFAULT_BAR_FILL_COLOR.

The shared DEFAULT_BAR_FILL_COLOR is now a top-level export and used as a generic fallback. A literal #000000 may not match themed chart palettes (light/dark, custom themes). If the design system exposes a semantic “default bar” or neutral token, consider wiring this constant to that instead of a fixed hex.

Also applies to: 179-180

111-118: Avoid duplicating fill and overlapping transition definitions on the <path>.

The path now has:

fill={fill} prop and style={{ fill: fill }} (duplicated),

Inline transition: "opacity 200ms" while the parent <Bar> already applies Tailwind transition utilities to &_path.

You can simplify and reduce confusion by, for example:
-      <path
-        d={getBarPath(x, y, width, height, topBorderRadius, bottomBorderRadius)}
-        fill={fill}
-        opacity={opacity}
-        style={{
-          transition: "opacity 200ms",
-          fill: fill,
-        }}
-      />
+      <path
+        d={getBarPath(x, y, width, height, topBorderRadius, bottomBorderRadius)}
+        fill={fill}
+        opacity={opacity}
+        style={{
+          transition: "opacity 200ms",
+        }}
+      />
Or, if the Tailwind transition-opacity utilities on the <Bar> are sufficient, consider dropping the inline transition entirely.
packages/propel/src/charts/bar-chart/root.tsx (1)

175-179: Tooltip cursor styling aligns with new design tokens; confirm SVG utility behavior.

Switching the tooltip cursor to fill: "var(--color-alpha-black-300)" with className: "bg-layer-1 cursor-pointer" matches the layered surface/alpha token pattern. Just ensure your Tailwind config applies bg-layer-1 meaningfully to the underlying SVG cursor element (if not, you might prefer a fill-* utility instead).

packages/propel/src/tabs/tabs.tsx (1)

5-6: BackgroundVariant and Tabs.List background prop are well-typed and flexible

The BackgroundVariant union and background prop on TabsList give a clear, type-safe way to control tab-list backgrounds, and the conditional bg-layer-* mapping keeps invalid tokens out of consumers.

If you expect callers to reference the variant type directly, consider exporting BackgroundVariant or a TabsListProps alias; otherwise this looks good as-is.

Also applies to: 41-60

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 22339b9 and 4f5d0ae.

📒 Files selected for processing (8)

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx (1 hunks)
apps/web/core/components/analytics/overview/project-insights.tsx (2 hunks)
packages/propel/src/charts/bar-chart/bar.tsx (4 hunks)
packages/propel/src/charts/bar-chart/root.tsx (3 hunks)
packages/propel/src/charts/pie-chart/root.tsx (2 hunks)
packages/propel/src/charts/tree-map/root.tsx (2 hunks)
packages/propel/src/tabs/tabs.tsx (4 hunks)
packages/ui/src/badge/helper.tsx (4 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:

packages/propel/src/charts/pie-chart/root.tsx
apps/web/core/components/analytics/overview/project-insights.tsx
apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
packages/propel/src/charts/tree-map/root.tsx
packages/propel/src/tabs/tabs.tsx
packages/propel/src/charts/bar-chart/bar.tsx
packages/ui/src/badge/helper.tsx
packages/propel/src/charts/bar-chart/root.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Enable TypeScript strict mode and ensure all files are fully typed

Files:

packages/propel/src/charts/pie-chart/root.tsx
apps/web/core/components/analytics/overview/project-insights.tsx
apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
packages/propel/src/charts/tree-map/root.tsx
packages/propel/src/tabs/tabs.tsx
packages/propel/src/charts/bar-chart/bar.tsx
packages/ui/src/badge/helper.tsx
packages/propel/src/charts/bar-chart/root.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:

packages/propel/src/charts/pie-chart/root.tsx
apps/web/core/components/analytics/overview/project-insights.tsx
apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
packages/propel/src/charts/tree-map/root.tsx
packages/propel/src/tabs/tabs.tsx
packages/propel/src/charts/bar-chart/bar.tsx
packages/ui/src/badge/helper.tsx
packages/propel/src/charts/bar-chart/root.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:

packages/propel/src/charts/pie-chart/root.tsx
apps/web/core/components/analytics/overview/project-insights.tsx
apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
packages/propel/src/charts/tree-map/root.tsx
packages/propel/src/tabs/tabs.tsx
packages/propel/src/charts/bar-chart/bar.tsx
packages/ui/src/badge/helper.tsx
packages/propel/src/charts/bar-chart/root.tsx

🧠 Learnings (11)