Refactor to use class_names helper

[joemasilotti]

I recently learned about the class_names helper from @swanson's blog post on Hotwire-related CSS tricks.

I'd love to leverage this to remove all string interpolation of class names across the codebase.

A PR addressing this issue should:

• Remove all stripe interpolated class name logic
• Replace said logic with the class_names helper
• See if there are any additional abstractions we can pull out.

[joshio1]

Hey @joemasilotti, can I take a look at this one?

[joemasilotti]

Sure thing - all yours!

[joshio1]

Hi @joemasilotti, while I' looking into this one, I'm not 100% sure which one you meant when you said "stripe interpolated class name logic".
I tried searching for classes in the app/views but couldn't find any interpolation for class names. Inside the app/components folder, there were a few places which had class name interpolation but I'm not sure if those were the ones you meant. These are the files I found which had class name interpolation:

1. toast_message_component.html.erb#13
2. avatar_component.html.erb#5
3. cover_image_component.html.erb#2
4. sort_button_component.html.erb#1
5. submit_button_component.html.erb#1
6. search_status_component.html.erb#4

[joemasilotti]

Yep! Those are exactly what I'm talking about. I think a perfect example is SortButtonComponent#dynamic_classes - ideally those classes live in the HTML, not the Ruby file. So app/components/sort_button_component.html.erb:1 could look like:

<%= button_tag title, form: form_id, name: name, value: value, type: :submit, class: class_names: "block w-full text-left px-4 py-2 text-sm cursor-pointer hover:bg-gray-100", "font-medium text-gray-900": active?, "font-normal text-gray-700": !active? %>

This wasn't checked, but I think we can pass multiple class names in like that. Let me know if that doesn't make sense (or doesn't work!).

[joshio1]

Hey @joemasilotti, so I've raised this PR: #593

I've used the new style in card_component.html.erb, search_status_component.html.erb, sort_button_component.html.erb but not in other files like toast_component.html.erb, avatar_component.html.erb, cover_image_component.html.erb submit_button_component.html.rb. Please let me know if it needs to be modified in any of the other files.

Also, do you think we should add any tests for this? If yes, which tests?

[joemasilotti]

Awesome, thanks! I'll check it out. I'll comment in the PR about tests and such.

[joemasilotti]

Closed via #593.