Skip to content

Comments

feat: Add Color Picker#1738

Merged
camielvs merged 1 commit intomasterfrom
02-02-feat_add_color_picker
Feb 19, 2026
Merged

feat: Add Color Picker#1738
camielvs merged 1 commit intomasterfrom
02-02-feat_add_color_picker

Conversation

@camielvs
Copy link
Collaborator

@camielvs camielvs commented Feb 3, 2026 •
edited
Loading

Description

Uses react-colorful to add a (debounced) colorpicker for sticky notes. This applies to sticky note background color only.

https://www.npmjs.com/package/react-colorful

If the sticky note has no background color and no text content it will have an orange dashed border around it so it doesn't get permanently lost.

Related Issue and Pull requests

Progresses https://github.com/Shopify/oasis-frontend/issues/118

Type of Change

  • New feature

Checklist

  • I have tested this does not break current pipelines / runs functionality
  • I have tested the changes on staging

Screenshots (if applicable)

image.png

image.png

Test Instructions

Confirm:

  • The color circle in the flex node context panel is clickable
  • When clicked the color circle opens a popover with color selection options
  • A preset color can be selected
  • A color can be typed
  • A custom color can be picked from the color picker, activated by the pallete icon in the right of the input box
  • When a color is selected the sticky note updates on-canvas
  • Transparent color can be selected
  • If a sticky note has transparent background and no text content it shows an orange border

Additional Comments

Don't forget to npm i before testing.

This was referenced Feb 3, 2026
Merged
Merged
Merged
Merged
Closed
@camielvs Graphite App
Copy link
Collaborator Author

camielvs commented Feb 3, 2026 •
edited
Loading

This stack of pull requests is managed by Graphite. Learn more about stacking.

@camielvs camielvs mentioned this pull request Feb 3, 2026
Merged
3 tasks
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from 937cb09 to 31509da Compare February 3, 2026 18:13
@camielvs camielvs mentioned this pull request Feb 3, 2026
Merged
3 tasks
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from 9e0caa7 to 5fe6635 Compare February 3, 2026 22:36
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from 31509da to 189a843 Compare February 3, 2026 22:36
@camielvs camielvs mentioned this pull request Feb 3, 2026
Closed
8 tasks
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from 5fe6635 to d81789d Compare February 3, 2026 22:44
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch 2 times, most recently from 3444f97 to 8617343 Compare February 3, 2026 22:50
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from d81789d to 73ad7a6 Compare February 3, 2026 22:50
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from 8617343 to 0d590df Compare February 3, 2026 23:23
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from 73ad7a6 to 1594ca2 Compare February 3, 2026 23:23
@camielvs camielvs mentioned this pull request Feb 3, 2026
Closed
8 tasks
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from 0d590df to 0d571e8 Compare February 3, 2026 23:27
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch 2 times, most recently from 0f83f47 to fb1ae8e Compare February 3, 2026 23:32
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from 0d571e8 to d7ce573 Compare February 3, 2026 23:32
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from fb1ae8e to c508724 Compare February 3, 2026 23:57
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch 2 times, most recently from 3debe53 to 29baff2 Compare February 4, 2026 00:05
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from c508724 to 06ef2a3 Compare February 4, 2026 00:05
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from 29baff2 to c8c1584 Compare February 4, 2026 01:07
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch 2 times, most recently from 75a25b2 to c653ad6 Compare February 4, 2026 01:15
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from 4d0cab7 to f67e5f6 Compare February 19, 2026 17:59
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from e4b6f22 to f3a6823 Compare February 19, 2026 19:53
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch 2 times, most recently from bce3b0a to dcdc419 Compare February 19, 2026 20:04
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from f3a6823 to 98b3290 Compare February 19, 2026 20:04
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from dcdc419 to 586aeea Compare February 19, 2026 20:07
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from 98b3290 to 0fd3f63 Compare February 19, 2026 20:07
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from 586aeea to d45505b Compare February 19, 2026 20:15
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from 0fd3f63 to 39946b3 Compare February 19, 2026 20:15
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from d45505b to 84d06ea Compare February 19, 2026 20:22
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from 39946b3 to c11cb15 Compare February 19, 2026 20:22
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from 84d06ea to f3bbde9 Compare February 19, 2026 20:35
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from 0b6fbee to 856f364 Compare February 19, 2026 20:43
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch 2 times, most recently from a0ac092 to 5bb0dd0 Compare February 19, 2026 20:44
@camielvs camielvs force-pushed the 02-02-feat_edit_sticky_note_content branch from 856f364 to 7146fbc Compare February 19, 2026 20:44
@camielvs camielvs changed the base branch from 02-02-feat_edit_sticky_note_content to graphite-base/1738 February 19, 2026 20:46
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from 5bb0dd0 to e6795e9 Compare February 19, 2026 20:47
@graphite-app graphite-app bot changed the base branch from graphite-base/1738 to master February 19, 2026 20:47
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch 2 times, most recently from dc1421f to d38eada Compare February 19, 2026 20:49
@camielvs camielvs force-pushed the 02-02-feat_add_color_picker branch from d38eada to 317713e Compare February 19, 2026 20:51
@camielvs Graphite App
Copy link
Collaborator Author

camielvs commented Feb 19, 2026 •
edited
Loading

Merge activity

  • Feb 19, 8:52 PM UTC: A user started a stack merge that includes this pull request via Graphite.
  • Feb 19, 8:52 PM UTC: @camielvs merged this pull request with Graphite.

@camielvs camielvs merged commit 154ef49 into master Feb 19, 2026
7 of 8 checks passed
@camielvs camielvs deleted the 02-02-feat_add_color_picker branch February 19, 2026 20:52
This was referenced Feb 20, 2026
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@maxy-shpfy maxy-shpfy maxy-shpfy approved these changes

@Mbeaulne Mbeaulne Awaiting requested review from Mbeaulne

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@camielvs @maxy-shpfy