Improvement: New Add Category Flow

[justinfar]

The category modal has been slightly redesigned with a focus on improving the selection process for colors and icons.

• Colors & icons are now in a submenu/secondary modal that appears when clicking the edit icon
• This brings up preset colors + icons that users can select.
• On selection, the icon preview updates in both the primary and secondary modals.
• Users can also use a color picker to manually select a HEX value.
• If the user enters an invalid HEX code, it defaults to #000 (open to better validation suggestions).
• If a new category has a parent category, its color will be inherited for consistency.

Handling low contrast icon colors

Since we’re introducing custom colors, there’s a high chance that users will pick a low-contrast color (e.g., white on a light background), making icons hard to see

• It'd be great if we detect when an icon’s color is too close to the background color.
• If detected, automatically darken the icon (e.g., switch to dark gray or black) to maintain contrast.

Please let me know if you have any questions as you're building this out

Link to the Figma page

[zachgoll]

Important Note for Devs:

The main thing that we'll have to introduce for this issue is a "stacked menu". I won't be working on this in the near term, so if anyone wants to take it, let me know. Just to keep in mind as we work through the solution here:

• Let's try to keep new dependencies to a bare minimum (if not zero). This should be possible with Stimulus controllers. A small JS dependency is fine, but a best attempt to avoid this should be made.
• For the color picker, it is okay if we skip "drag" functionality for now. If it's easy, fine. Otherwise, we should skip it for simplicity and just let the user type the hex code and see the updated indicator reposition itself.
• For the color/icon menu picker, this should be handled by a Stimulus controller that chooses values and then populates the form (that's in the modal) with the selected values. That way, we can keep this to a single form we're submitting.

I'm not entirely sure what the final solution here looks like, so if you do decide to work on this, be sure to share your thought process as you go to increase the chances we're able to accept a PR!

[JLambertazzo]

The contrast can be automated without too much trouble. WebAIM's ratio details set out pretty straightforward rules for contrast ratio. There's a formula on the scripts of their Contrast Checker page that could be reused here (see contrast.js in sources)

[zachgoll]

@JLambertazzo agreed, definitely the right path for validating contrast of manual colors.

Adding some solution notes (H/T @robzolkos for the ideas!):

• We should aim to keep the color picker all within the modal form, and use summary/disclosure (or popover) for the absolute positioned "picker menu"
• Icons are labels + hidden radio buttons (similar to existing category form)

In other words, something along these lines (rough sketch):

<%= styled_form_with url: "#" do |f| %>
  <details>
    <summary>Render collapsed icon/color here</summary>
    
    <div class="absolute">
      <div>Color picker goes here (likely need a basic Stimulus controller to sync with the :hex field below)</div>
      
      <%= f.text_field :hex %>
      
      <div class="flex flex-wrap gap-2 justify-center mb-4">
        <% Category.icon_codes.each do |icon| %>
          <label class="relative">
            <%= f.radio_button :lucide_icon, icon, class: "sr-only peer" %>
            <div class="p-1 rounded cursor-pointer hover:bg-gray-100 peer-checked:bg-gray-100 border-1 border-transparent peer-checked:border-gray-500">
              <%= lucide_icon icon, class: "w-5 h-5" %>
            </div>
          </label>
        <% end %>
      </div>
    </div>
  </details>
<% end %>