Replace uses of "dropdown" with respective ViewComponent #5907

iamronakgupta · 2024-07-12T09:15:06Z

What github issue is this PR for, if any?

Resolves #5845

What changed, and why?

How is this tested? (please write tests!) 💖💪

Note: if you see a flake in your test build in github actions, please post in slack #casa "Flaky test: " :) 💪
Note: We love capybara tests! If you are writing both haml/js and ruby, please try to test your work with tests at every level including system tests like https://github.com/rubyforgood/casa/tree/main/spec/system

Screenshots please :)

Run your local server and take a screenshot of your work! Try to include the URL of the page as well as the contents of the page.

Feelings gif (optional)

What gif best describes your feeling working on this issue? https://giphy.com/
How to embed:
![alt text](https://media.giphy.com/media/1nP7ThJFes5pgXKUNf/giphy.gif)

Only one dropdown button were using three dots icons hence it is better to put it on block of component from html.erb.

display: flex and align-items: center added to style to align items of button horizontally. button_class variable added to dropdown component to dynamically change css properties of button like background color

…component

…own component

…ponent

elasticspoon

Looks pretty solid overall but I think the actually using the dropdown component exposes some of the issues with it. I think we can improve the component a bit.

The replacements themselves look good to me though.

elasticspoon · 2024-07-13T22:36:57Z

app/components/dropdown_menu_component.html.erb

@@ -1,12 +1,7 @@
 <div class="dropdown <%= @class %>">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-secondary dropdown-toggle <%= @button_class %>" style="display: flex; align-items: center;" type="button" data-bs-toggle="dropdown" aria-expanded="false">


Can this be done with bootstrap styles? d-flex and align-items-center? I would prefer to avoid combining styling via classes and via style attributes.

elasticspoon · 2024-07-13T22:42:16Z

app/components/dropdown_menu_component.html.erb

-    <% else %>
-      <svg width="5" height="20" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <title><%= @menu_title %></title>
-        <path d="M2.5 0.9375C1.82292 0.9375 1.23698 1.17188 0.742187 1.64063C0.247396 2.10938 -7.68364e-08 2.69531 -1.07571e-07 3.39844C-1.38306e-07 4.10156 0.247396 4.70052 0.742187 5.19531C1.23698 5.6901 1.82292 5.9375 2.5 5.9375C3.17708 5.9375 3.76302 5.6901 4.25781 5.19531C4.7526 4.70052 5 4.10156 5 3.39844C5 2.69531 4.7526 2.10938 4.25781 1.64063C3.76302 1.17188 3.17708 0.9375 2.5 0.9375ZM2.5 7.5C1.82292 7.5 1.23698 7.7474 0.742187 8.24219C0.247395 8.73698 -3.66538e-07 9.32292 -3.96134e-07 10C-4.25731e-07 10.6771 0.247395 11.263 0.742187 11.7578C1.23698 12.2526 1.82292 12.5 2.5 12.5C3.17708 12.5 3.76302 12.2526 4.25781 11.7578C4.7526 11.263 5 10.6771 5 10C5 9.32292 4.7526 8.73698 4.25781 8.24219C3.76302 7.7474 3.17708 7.5 2.5 7.5ZM2.5 14.0625C1.82292 14.0625 1.23698 14.3099 0.742187 14.8047C0.247395 15.2995 -6.53963e-07 15.8984 -6.84698e-07 16.6016C-7.15432e-07 17.3047 0.247395 17.8906 0.742187 18.3594C1.23698 18.8281 1.82292 19.0625 2.5 19.0625C3.17708 19.0625 3.76302 18.8281 4.25781 18.3594C4.7526 17.8906 5 17.3047 5 16.6016C5 15.8984 4.7526 15.2995 4.25781 14.8047C3.76302 14.3099 3.17708 14.0625 2.5 14.0625Z" fill="#5D657B" />
-      </svg>


What was the logic for moving this out?

The three dots is a bit of a weird default but I believe we should have a default icon so it is more in line with most of our buttons (such as a chevron-down)

There were two reasons of it.

There are some dropdowns which are not using any icons so having default icons making no sense in that case. eg filters dropdowns in supervisor#index volunteers#index

Only one dropdown button was using this three dots icons.

If keeping this as default, we have to add one more variable in component to not render icons for 1st case.

That makes sense. Moving it out is a good idea, I didn't realize that dropdown-toggle adds a ::after element that is a chevron by default.

elasticspoon · 2024-07-13T22:47:08Z

app/views/casa_cases/_filter.html.erb

-          </div>
+      <% end %>
+      <%= render(DropdownMenuComponent.new(menu_title: "Assigned to Volunteer", klass: "pull-left mx-2 my-1 assigned-to-volunteer-options")) do %>
+        <div class="dropdown-item form-check checkbox-style">


All the outer elements within the dropdowns should be li instead of div.

elasticspoon · 2024-07-13T23:01:27Z

app/components/dropdown_menu_component.rb

    @class = klass
+    @button_class = button_klass


button_class makes sense. Lets take that 1 step further and lets make klass container_class

elasticspoon · 2024-07-13T23:05:08Z

app/views/volunteers/index.html.erb

-            </div>
-          <% end %>
+      <%= render(DropdownMenuComponent.new(menu_title: "Supervisor", klass: "pull-left mx-2 my-1 supervisor-options")) do %>
+        <div class="dropdown-item form-check checkbox-style">


would it make sense to make the dropdown items into components? Just have them be a

<li class="dropdown-item <%= @class_vars %>"></li>

that held whatever content you gave it?

It can work out in separate component but not in this menu dropdown component.

elasticspoon · 2024-07-13T23:16:45Z

app/components/dropdown_menu_component.rb

@@ -26,6 +27,6 @@ def render?
  end

  def button_label
-    content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : nil)
+    content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : "mr-5")


Suggested change

content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : "mr-5")

content_tag(:span, @menu_title, class: ["mr-5", {"sr-only" => @hide_label}])

could do this via https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-token_list

elasticspoon

Hey thanks for the work. This is super close but just minor find and replace text changes.

Since the dropdown menu wraps its contents in a ul the elements ought to be li

elasticspoon · 2024-07-29T19:31:10Z

app/components/dropdown_menu_component.rb

@@ -3,12 +3,13 @@
 class DropdownMenuComponent < ViewComponent::Base
  renders_one :icon

-  def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, klass: nil)
+  def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, container_klass: nil, button_klass: nil)


Suggested change

def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, container_klass: nil, button_klass: nil)

def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, container_class: nil, button_class: nil)

super minor nit

elasticspoon · 2024-07-29T19:36:07Z

app/views/casa_cases/_filter.html.erb

These div wrappers should be li for accessibility reasons.

elasticspoon · 2024-07-29T19:36:37Z

app/views/volunteers/index.html.erb

same with these divs

iamronakgupta added 18 commits June 29, 2024 11:40

moved three dots icon from component to html.erb

f6cba70

Only one dropdown button were using three dots icons hence it is better to put it on block of component from html.erb.

updated: button css classes added to dropdown as variable

5db3caf

display: flex and align-items: center added to style to align items of button horizontally. button_class variable added to dropdown component to dynamically change css properties of button like background color

dropdown component added to filter status button

9fef6a2

action menu dropdown button replaced with component

130bbc8

status options class added to make filters work

da11c46

supervisor dropdown button in volunteer index replaced with dropdown …

f488c1a

…component

assigned to transition aged youth dropdown button replaced with dropd…

4b85dae

…own component

'has extra language' dropdown button replaced with dropdown component

23ba785

minor fix

957dc23

status dropdown button replaced with component in casa case

c9c5124

'assigned to volunteer' button replaced with dropdown component

937f1c7

'assigned to more than 1 volunteer' button replaced with dropdown com…

4d5736f

…ponent

'transition aged youth' button replaced with dropdown component

d0ef511

'casa case prefix' button replaced with dropdown component

5792d22

header profile dropdown replaced with dropdown component

bd439b3

'occurred at' dropdown button replaced with component

9511292

margin right added to span

68aff5a

spec fixed for dropdown menu component

8fb7d62

iamronakgupta requested review from compwron, FireLemons, littleforest and elasticspoon as code owners July 12, 2024 09:15

github-actions bot added ruby Pull requests that update Ruby code Tests! 🎉💖👏 erb labels Jul 12, 2024

elasticspoon requested changes Jul 13, 2024

View reviewed changes

elasticspoon reviewed Jul 13, 2024

View reviewed changes

iamronakgupta added 3 commits July 22, 2024 19:00

bootsrap style added

c0045a8

button_label function optimized

1ef8ed2

klass replaced with container_klass for dropdown component parameter

fce7d90

elasticspoon requested changes Jul 29, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace uses of "dropdown" with respective ViewComponent #5907

Replace uses of "dropdown" with respective ViewComponent #5907

iamronakgupta commented Jul 12, 2024

elasticspoon left a comment

elasticspoon Jul 13, 2024

elasticspoon Jul 13, 2024

iamronakgupta Jul 14, 2024

elasticspoon Jul 16, 2024

elasticspoon Jul 13, 2024

elasticspoon Jul 13, 2024

elasticspoon Jul 13, 2024

iamronakgupta Jul 14, 2024

elasticspoon Jul 13, 2024

elasticspoon left a comment

elasticspoon Jul 29, 2024

elasticspoon Jul 29, 2024

elasticspoon Jul 29, 2024

	content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : "mr-5")
	content_tag(:span, @menu_title, class: ["mr-5", {"sr-only" => @hide_label}])

	def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, container_klass: nil, button_klass: nil)
	def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, container_class: nil, button_class: nil)

Replace uses of "dropdown" with respective ViewComponent #5907

Are you sure you want to change the base?

Replace uses of "dropdown" with respective ViewComponent #5907

Conversation

iamronakgupta commented Jul 12, 2024

What github issue is this PR for, if any?

What changed, and why?

How is this tested? (please write tests!) 💖💪

Screenshots please :)

Feelings gif (optional)

elasticspoon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticspoon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment