Page MenuHomePhabricator

[web] Introduce `ColorSelector` component with basic styling
ClosedPublic

Authored by atul on Apr 7 2022, 3:43 PM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Nov 5, 8:43 PM
Unknown Object (File)
Oct 14 2024, 1:17 AM
Unknown Object (File)
Oct 14 2024, 1:17 AM
Unknown Object (File)
Oct 14 2024, 1:17 AM
Unknown Object (File)
Oct 14 2024, 1:17 AM
Unknown Object (File)
Oct 14 2024, 1:15 AM
Unknown Object (File)
Sep 24 2024, 7:49 PM
Unknown Object (File)
Sep 24 2024, 7:49 PM

Details

Summary

Introduce ColorSelector component with basic layout/styling.

Note: The actual functionality will be introduced in subsequent diffs.


Depends on D3660

Test Plan

Looks as expected:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

Harbormaster returned this revision to the author for changes because remote builds failed.Apr 7 2022, 3:45 PM
Harbormaster failed remote builds in B7999: Diff 11204!
atul requested review of this revision.Apr 7 2022, 4:09 PM
web/modals/threads/color-selector.react.js
12 ↗(On Diff #11204)

These hardcoded placeholder values are from lib/shared/thread-utils/selectedThreadColors

web/modals/threads/color-selector.react.js
12 ↗(On Diff #11204)

Maybe it's better not to hardcode color values and instead export the colors from thread-utils and map them into components?

Wouldn't it be better to use flex-wrap to wrap components to create rows that way?
If new colors were added or removed in the future (or the size of component changes), the component could display as many rows as it needs.
But it's just an idea - maybe the current approach is better

tomek requested changes to this revision.Apr 8 2022, 3:13 AM
tomek added inline comments.
web/modals/threads/color-selector.react.js
11 ↗(On Diff #11204)

We could achieve this with flex-wrap: wrap

12 ↗(On Diff #11204)

It's not ideal that we need to hardcode these values. Can we just iterate that table here? (we can change the order of elements in it)

This revision now requires changes to proceed.Apr 8 2022, 3:13 AM
web/modals/threads/color-selector.react.js
12 ↗(On Diff #11204)

@def-au1t you were slightly faster with the same ideas as mine - Nice!

The feedback about pulling the colors from thread-utils and using flex-wrap for the layout makes sense!

I was going to include some of those changes in this diff, but it got kind of large. I'll address those two points in subsequent diffs.

This diff was mostly just to get the design/layout right

Add me back if you need me

atul requested review of this revision.Apr 10 2022, 7:18 PM
In D3662#100907, @atul wrote:

The feedback about pulling the colors from thread-utils and using flex-wrap for the layout makes sense!

I was going to include some of those changes in this diff, but it got kind of large. I'll address those two points in subsequent diffs.

This diff was mostly just to get the design/layout right

Ok, that makes sense. Do you plan to create these diffs soon or are you going to create tasks for them?

This revision is now accepted and ready to land.Apr 11 2022, 4:23 AM

Ok, that makes sense. Do you plan to create these diffs soon or are you going to create tasks for them?

Yeah it's what I'm currently working on. I don't want to clutter up Linear with a new task, but I can add a note to the existing ThreadSettingsModal one.

Pulled colors from thread-utils in a local commit and everything worked without issue.

Little less confident on using flex-wrap and/or if it's necessary at this point when we have a fixed number of colors? I think it would be nice to have a ColorSelector component that "scales" to future needs, but also I don't want to spend too much time trying to figure out that "correct" approach. If it's quick, then I'll definitely make the change... but don't want to spend hours on something that would make no difference to the user in the immediate/medium term.

web/modals/threads/color-selector.css
9 ↗(On Diff #11204)

nit: flex-direction is row by default. We don't need it explicitly defined.

web/modals/threads/color-selector.react.js
23 ↗(On Diff #11204)

nit: could just make this prop optional, then active could be implicitly false by default and we wouldn't need to explicitly define them a bunch of times here.

atul marked an inline comment as done.Apr 11 2022, 9:10 AM
atul added inline comments.
web/modals/threads/color-selector.css
9 ↗(On Diff #11204)

Personally prefer being explicit about it and don't think it hurts to leave in, but can remove if there's a strong opinion

web/modals/threads/color-selector.react.js
23 ↗(On Diff #11204)

this prop gets removed altogether in later diff

atul marked an inline comment as done.

rebase before landing

This revision was landed with ongoing or failed builds.Apr 11 2022, 10:11 AM
This revision was automatically updated to reflect the committed changes.