Parkreiner/etrian-character-customizer

Client – Create ColorHueWheel component

Closed this issue · 1 comments

Parkreiner commented

The ColorHueWheel component is how users adjust the hue values for their character's colors. It feels like this needs to take some extra steps to be approachable, because while HSV colorspaces aren't that complicated, most people don't know them, and could find themselves intimidated.

Requirements:

  • The entire component should be keyboard-accessible and should follow as many best practices as possible for accessibility.
  • The user should be able to drag a cursor/knob around with the mouse to rotate the color. There should be logic in place to "clamp" the mouse input, so that the user doesn't have to follow the circle perfectly to make changes happen
  • There should be an "escape hatch" input for letting the user type their hue value directly into the component, just in case they want to make their changes even faster than the mouse-based input would be able to allow
  • The dimensions of the component should always be a perfect square, regardless of how the layout changes via responsive design
    • Pretty sure that not making this a square would actually throw off the calculations for translating hue degrees into UI state. This is something that might also need a test in place, even though it would normally just be cosmetic.
  • The external component API should be as minimal as possible, and should be able to call callbacks provided by parent components
Parkreiner commented

Component may need some visual adjustments in the future, but is basically feature-complete. Ultimately decided to roll it into the ColorPicker component's sub-directory, for two reasons:

  1. ColorHueWheel is only designed to be used from ColorPicker
  2. There were some color helpers that ColorHueWheel needed that were defined locally for ColorPicker's sub-directory. The app is designed so that the vast majority of the client components do not need to be aware of anything other than hex strings. The color helpers could be extracted out into the utils folder, but it felt like the abstraction would start to leak out.