Skip to content

Conversation

@Coooder-Crypto
Copy link

Description

Fixes #5445 — adds per-tag color picking so project tags can share consistent, user-defined colors across the dashboard (dialog, cards, filter pills).

Steps for reproduction

  1. Open Dashboard → Projects → “Tags”.
  2. Create/edit a tag, pick a color, assign it to a project, and confirm the color
    propagates everywhere that tag appears.

Code Review

  • hi @kof, I need you to do
    • conceptual review (architecture, feature-correctness)
    • detailed review (read every line)
    • test it on preview

Before requesting a review

  • made a self-review
  • added inline comments where things may be not obvious (the "why", not "what")

Before merging

  • tested locally and on preview environment (preview dev login: 0000)
  • updated test cases document
  • added tests
  • if any new env variables are added, added them to .env file

@Coooder-Crypto Coooder-Crypto changed the title Add Tag Color Picker feat: Add Tag Color Picker Nov 9, 2025
@kof
Copy link
Member

kof commented Nov 12, 2025

Hi, great start, here is a few things that I would change:

  1. By default there should be still no need to pick the color, default color should look great and use the predefined list we already have, choosing a custom color should be optional
  2. I think a full color picker UI is a bit inconvinent for this use case, because you want to choose colors that look good, here is the UI github has made for creating labels:
Screenshot 2025-11-12 at 12 08 16

So essentially I would avoid adding a color picker, but instead add the input where user can either type a color or pick one from a list of 16 great colors.

Default color is still chosen automatically like it is now, user shouldn't have to choose the color always.

@kof
Copy link
Member

kof commented Nov 12, 2025

In terms of implementation I would use a Popover component (pls search in the code base how it is used) and combine it with InputField component

@kof
Copy link
Member

kof commented Nov 12, 2025

In terms of layout I would do the same thing as in style panel:
image

Check out ColorPicker component for example, here instead of CssValueInput you can use InputField, create a SimpleColorPicker component using Popover and ColorThumb as a trigger. When using InputField, pass SimpleColorPicker as a "prefix" property. I think it makes sense to move ColorThumb to the style-system package and reuse it between style-pane/shared/color-picker and this SimpleColorPicker

@kof
Copy link
Member

kof commented Nov 12, 2025

honestly even both ColorPicker from style panel and SimpleColorPicker for dashboard can be both in style-system package

@Coooder-Crypto
Copy link
Author

Thanks a lot for the feedback! I'll update the code

@Coooder-Crypto
Copy link
Author

hey, @kof , I've update according to your feedback. But I didn’t move ColorPicker into design-system because it’s welded to builder-only plumbing (CssValueInput, StyleValue conversions, undo/abort state).Dropping it there would drag all those dependencies along. If we need a shared version, I can follow up by splitting it into a pure UI ColorPicker in design-system plus a thin builder wrapper that adapts to our style model—just let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Color picker for project tags

2 participants