feat: Ability to add custom colors for sticky notes. by deon-sanchez · Pull Request #10961 · langflow-ai/langflow (original) (raw)

Walkthrough

This PR enhances the NoteNode component with custom background color support. It introduces a color picker interface featuring preset colors and custom color input, adds contrast-aware text color rendering, refactors the toolbar component's action handling, and includes comprehensive unit and integration tests for the new functionality.

Changes

Cohort / File(s)	Summary
NoteNode Core Logic src/frontend/src/CustomNodes/NoteNode/index.tsx	Adds custom background color support, contrast-aware text color calculation via getContrastTextColor, resizable node dimensions with DEFAULT_NOTE_SIZE fallback, debounced resize handling, and dynamic text color class generation.
Toolbar Refactoring src/frontend/src/CustomNodes/NoteNode/NoteToolbarComponent/index.tsx	Introduces NoteToolbarProps interface, refactors action handlers (documentation, delete, copy, duplicate) with explicit cases and safeguards, improves color picker logic with computed isCustomColor and resolvedBgColor values, and adds explicit test ids for tooling triggers.
Color Picker Component src/frontend/src/CustomNodes/NoteNode/components/color-picker-buttons.tsx	Adds ColorPickerButtonsProps interface, implements hidden color input with custom color detection, preset color buttons with selection indication, and updateBackgroundColor callback to persist color changes via setNode.
Unit Tests src/frontend/src/CustomNodes/NoteNode/__tests__/color-picker-buttons.test.tsx, src/frontend/src/CustomNodes/NoteNode/__tests__/note-node-utils.test.ts	ColorPickerButtons component tests covering preset/custom color rendering and interactions; note-node-utils tests validating getContrastTextColor (hex/rgb/hsl formats, edge cases) and isCustomColor detection logic.
Integration Tests src/frontend/tests/core/features/note-color-picker.spec.ts	Playwright tests for color picker functionality, verifying preset color changes (amber, rose, blue, lime, transparent), custom color input availability, and color persistence on note elements.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Color contrast calculation logic (getContrastTextColor in tests and usage in NoteNode) — verify handling of hex, rgb, hsl formats and edge cases (empty, transparent, invalid inputs)
Color state propagation — ensure custom color updates via ColorPickerButtons correctly flow through setNode and persist in node data
Toolbar action refactoring — validate that copy/duplicate operations use the current node correctly and pane positioning is accurate

fix: add max note node width #8648 — Overlaps with NoteNode index.tsx modifications related to note sizing/resizer behavior (max width/height), may need conflict resolution or coordinated review.

Suggested reviewers

Cristhianzl
mfortman11

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Excessive Mock Usage Warning	⚠️ Warning	Test files use excessive mocking instead of testing actual implementations; utility functions are re-implemented in tests rather than imported from production code.	Extract utilities to shared module and import in both production and test files to eliminate duplication and ensure tests validate real production logic.

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: Ability to add custom colors for sticky notes' accurately summarizes the main change—adding custom color functionality for sticky notes, which is the primary objective of the PR.
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%.
Test Coverage For New Implementations	✅ Passed	The PR includes substantive test coverage for all new implementations with 6 unit tests for color-picker-buttons, 28 test blocks for note-node-utils, and 2 integration tests for note-color-picker, totaling 36+ assertions covering all new functionality.
Test Quality And Coverage	✅ Passed	Pull request includes comprehensive tests for ColorPickerButtons component and utilities with behavioral validation using testing-library and Playwright E2E tests.
Test File Naming And Structure	✅ Passed	Test files follow correct naming patterns (.test.ts, .test.tsx, .spec.ts) with proper directory structure (tests for units, tests/core/features for integration). Test names are descriptive and comprehensive coverage includes edge cases.

✨ 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 lfoss-3023

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