refactor(menu-button): use menu button controller

app/views/administrateurs/procedures/_procedures_list.html.haml

@@ -33,10 +33,10 @@
           = link_to admin_procedure_path(procedure), class: 'button mr-1 edit-procedure' do
             %span.icon.edit
             Modifier
-        .dropdown
-          .button.dropdown-button.procedures-actions-btn{ 'aria-expanded' => 'false', 'aria-controls' => 'actions-menu' }
+        .dropdown{ data: { controller: 'menu-button' } }
+          .button.dropdown-button.procedures-actions-btn{ data: { menu_button_target: 'button' } }
             Actions
-          #actions-menu.dropdown-content.fade-in-down
+          #actions-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
             %ul.dropdown-items.pl-0
               - if !procedure.close? && !procedure.discarded?
                 %li

app/views/experts/avis/_header.html.haml

@@ -7,10 +7,10 @@
         %li= link_to("Dossier nº #{dossier.id}", expert_avis_path(avis.procedure, avis))
 
       .header-actions
-        %span.dropdown.print-menu-opener
-          %button.button.dropdown-button.icon-only{ 'aria-expanded' => 'false', 'aria-controls' => 'print-pj-menu' }
+        %span.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
+          %button.button.dropdown-button.icon-only{ data: { menu_button_target: 'button' } }
             %span.icon.attached
-          %ul.print-menu.dropdown-content
+          %ul.print-menu.dropdown-content#print-pj-menu{ data: { menu_button_target: 'menu' } }
             %li= link_to "Télécharger le dossier et toutes ses pièces jointes", telecharger_pjs_expert_avis_path(avis.procedure, avis), target: "_blank", rel: "noopener", class: "menu-item menu-link"
 
     %nav.tabs

app/views/instructeurs/dossiers/_header_actions.html.haml

@@ -1,7 +1,7 @@
-%span.dropdown.print-menu-opener
-  %button.button.dropdown-button.icon-only{ title: 'imprimer', 'aria-label': 'imprimer', 'aria-expanded' => 'false', 'aria-controls' => 'print-menu' }
+%span.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
+  %button.button.dropdown-button.icon-only{ title: 'imprimer', 'aria-label': 'imprimer', data: { menu_button_target: 'button' } }
     %span.icon.printer
-  %ul#print-menu.print-menu.dropdown-content
+  %ul#print-menu.print-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
     %li
       = link_to "Tout le dossier", print_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
     %li
@@ -12,10 +12,10 @@
       %li
         = link_to "Export GeoJSON", geo_data_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
 
-%span.dropdown.print-menu-opener
-  %button.button.dropdown-button.icon-only{ 'aria-expanded' => 'false', 'aria-controls' => 'print-pj-menu' }
+%span.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
+  %button.button.dropdown-button.icon-only{ data: { menu_button_target: 'button' } }
     %span.icon.attached
-  %ul#print-pj-menu.print-menu.dropdown-content
+  %ul#print-pj-menu.print-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
     %li= link_to "Télécharger le dossier et toutes ses pièces jointes", telecharger_pjs_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
 
 = render partial: "instructeurs/procedures/dossier_actions",

app/views/instructeurs/dossiers/_state_button.html.haml

@@ -1,10 +1,10 @@
-.dropdown
+.dropdown{ data: { controller: 'menu-button', popover: 'true' } }
   -# Dropdown button title
-  %button.button.primary.dropdown-button{ class: button_or_label_class(dossier), 'aria-expanded' => 'false', 'aria-controls' => 'state-menu' }
+  %button.button.primary.dropdown-button{ class: button_or_label_class(dossier), data: { menu_button_target: 'button' } }
     = dossier_display_state dossier
 
   -# Dropdown content
-  #state-menu.dropdown-content.fade-in-down
+  #state-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
 
     - if dossier.en_construction?
       -# ------------------------------------------------------

app/views/instructeurs/procedures/_dossier_actions.html.haml

@@ -2,10 +2,10 @@
   = link_to restore_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: "button" do
     = t('views.instructeurs.dossiers.restore')
 - elsif close_to_expiration || Dossier::TERMINE.include?(state)
-  .dropdown.user-dossier-actions
-    %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'actions-menu' }
+  .dropdown.user-dossier-actions{ data: { controller: 'menu-button' } }
+    %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
       Actions
-    #actions-menu.dropdown-content.fade-in-down
+    #actions-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
       %ul.dropdown-items
         - if close_to_expiration
           %li

app/views/instructeurs/procedures/_dossiers_export.html.haml

@@ -1,7 +1,7 @@
-%span.dropdown
-  %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'download-menu' }
+%span.dropdown{ data: { controller: 'menu-button' } }
+  %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
     = t(".download", count: count)
-  #download-menu.dropdown-content.fade-in-down{ style: 'width: 450px' }
+  #download-menu.dropdown-content.fade-in-down{ style: 'width: 450px', data: { menu_button_target: 'menu' } }
     %ul.dropdown-items
       - exports_list(exports, statut).each do |item|
         - format = item[:format]

app/views/instructeurs/procedures/_dossiers_filter.html.haml

@@ -1,7 +1,7 @@
-%span.dropdown
-  %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'filter-menu' }
+%span.dropdown{ data: { controller: 'menu-button', popover: 'true' } }
+  %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
     = t('views.instructeurs.dossiers.filters.title')
-  #filter-menu.dropdown-content.left-aligned.fade-in-down
+  #filter-menu.dropdown-content.left-aligned.fade-in-down{ data: { menu_button_target: 'menu' } }
     = form_tag add_filter_instructeur_procedure_path(procedure), method: :post, class: 'dropdown-form large' do
       = label_tag :field,  t('views.instructeurs.dossiers.filters.column')
       = select_tag :field, options_for_select(displayed_fields_options)

app/views/instructeurs/procedures/show.html.haml

@@ -77,10 +77,10 @@
               = render partial: "header_field", locals: { field: field, classname: field['classname'] }
 
             %th.action-col.follow-col
-              %span.dropdown
-                %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'custom-menu' }
+              %span.dropdown{ data: { controller: 'menu-button', popover: 'true' } }
+                %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
                   = t('views.instructeurs.dossiers.personalize')
-                #custom-menu.dropdown-content.fade-in-down
+                #custom-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
                   = form_tag update_displayed_fields_instructeur_procedure_path(@procedure), method: :patch, class: 'dropdown-form large columns-form' do
                     = hidden_field_tag :values, nil
                     = react_component("ComboMultiple",

app/views/invites/_dropdown.html.haml

@@ -1,5 +1,5 @@
-.dropdown.invite-user-action
-  %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'invite-content' }
+.dropdown.invite-user-action{ data: { controller: 'menu-button', popover: 'true' } }
+  %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
     %span.icon.person
     - if dossier.invites.count > 0
       = t('views.invites.dropdown.view_invited_people')
@@ -10,5 +10,5 @@
       - else
         = t('views.invites.dropdown.invite_to_edit')
 
-  #invite-content.dropdown-content.fade-in-down
+  #invite-content.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
     = render partial: "invites/form", locals: { dossier: dossier }

app/views/layouts/_account_dropdown.haml

@@ -1,8 +1,8 @@
-.dropdown.header-menu-opener
-  %button.button.dropdown-button.icon-only.header-menu-button{ title: "Mon compte", 'aria-expanded' => 'false', 'aria-controls' => 'mon_compte_menu' }
+.dropdown.header-menu-opener{ data: { controller: 'menu-button' } }
+  %button.button.dropdown-button.icon-only.header-menu-button{ title: "Mon compte", data: { menu_button_target: 'button' } }
     .hidden Mon compte
     = image_tag "icons/account-circle.svg", alt: 'Mon compte', width: 24, height: 24, loading: 'lazy'
-  %ul.header-menu.dropdown-content#mon_compte_menu
+  %ul.header-menu.dropdown-content#mon_compte_menu{ data: { menu_button_target: 'menu' } }
     %li
       .menu-item{ title: current_email }
         = current_email

app/views/layouts/_locale_dropdown.html.haml

@@ -1,8 +1,8 @@
-.dropdown.locale-dropdown.header-menu-opener
-  %button.button.dropdown-button.icon-only.header-menu-button{ title: t('.languages'), aria: { expanded: 'false', controls: 'locale_menu' } }
+.dropdown.locale-dropdown.header-menu-opener{ data: { controller: 'menu-button' } }
+  %button.button.dropdown-button.icon-only.header-menu-button{ title: t('.languages'), data: { menu_button_target: 'button' } }
     .hidden t('.languages')
     = image_tag "icons/translate-icon.svg", alt: t('.languages'), width: 24, height: 24, lazy: true, aria: { hidden: true }
-  %ul.header-menu.dropdown-content
+  %ul.header-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
     %li
       = active_link_to save_locale_path(locale: :fr), method: :post, class: "menu-item menu-link", active: I18n.locale == :fr do
         Français

app/views/shared/help/_help_dropdown_dossier.html.haml

@@ -1,7 +1,7 @@
-.dropdown.help-dropdown
-  %button.button.primary.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'help-menu' }
+.dropdown.help-dropdown{ data: { controller: 'menu-button' } }
+  %button.button.primary.dropdown-button{ data: { menu_button_target: 'button' } }
     = t('help')
-  #help-menu.dropdown-content.fade-in-down
+  #help-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
     %ul.dropdown-items
       - title = dossier.brouillon? ? "Besoin d’aide pour remplir votre dossier ?" : "Une question sur votre dossier ?"
 

app/views/shared/help/_help_dropdown_instructeur.html.haml

@@ -1,7 +1,7 @@
-.dropdown.help-dropdown
-  %button.button.primary.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'help-menu' }
+.dropdown.help-dropdown{ data: { controller: 'menu-button' } }
+  %button.button.primary.dropdown-button{ data: { menu_button_target: 'button' } }
     = t('help')
-  #help-menu.dropdown-content.fade-in-down
+  #help-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
     %ul.dropdown-items
       = render partial: 'shared/help/dropdown_items/faq_item'
       = render partial: 'shared/help/dropdown_items/email_item'

app/views/shared/help/_help_dropdown_procedure.html.haml

@@ -1,7 +1,7 @@
-.dropdown.help-dropdown
-  %button.button.primary.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'help-menu' }
+.dropdown.help-dropdown{ data: { controller: 'menu-button' } }
+  %button.button.primary.dropdown-button{ data: { menu_button_target: 'button' } }
     = t('help')
-  #help-menu.dropdown-content.fade-in-down
+  #help-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
     %ul.dropdown-items
       - if procedure.service.present?
         = render partial: 'shared/help/dropdown_items/service_item',

app/views/users/dossiers/_dossier_actions.html.haml

@@ -5,10 +5,10 @@
 - has_actions = has_edit_action || has_delete_action || has_new_dossier_action || has_transfer_action
 
 - if has_actions
-  .dropdown.user-dossier-actions
-    %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'actions-menu' }
+  .dropdown.user-dossier-actions{ data: { controller: 'menu-button' } }
+    %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
       = t('views.users.dossiers.dossier_action.actions')
-    #actions-menu.dropdown-content.fade-in-down
+    #actions-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
       %ul.dropdown-items
         - if has_edit_action
           - if dossier.brouillon?

app/views/users/dossiers/show/_print_dossier.html.haml

@@ -1,6 +1,6 @@
-%span.dropdown.print-menu-opener
-  %button.button.dropdown-button.icon-only{ title: t('views.users.dossiers.show.header.print'), 'aria-label': 'imprimer', 'aria-expanded' => 'false', 'aria-controls' => 'print-menu' }
+%span.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
+  %button.button.dropdown-button.icon-only{ title: t('views.users.dossiers.show.header.print'), 'aria-label': 'imprimer', data: { menu_button_target: 'button' } }
     %span.icon.printer
-  %ul#print-menu.print-menu.dropdown-content
+  %ul#print-menu.print-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
     %li
       = link_to t('views.users.dossiers.show.header.print_dossier'), dossier_path(dossier, format: :pdf), target: "_blank", rel: "noopener", class: "menu-item menu-link"