Passe les champs select au DSFR

app/assets/stylesheets/buttons.scss

@@ -316,13 +316,12 @@ ul.dropdown-items {
     margin-bottom: 2 * $default-spacer;
   }
 
-  input:not(.fr-btn),
-  select {
+  input:not(.fr-btn) {
     width: 200px;
     display: inline-block;
     background-color: $light-grey;
     border: 1px solid $border-grey;
-  }
+   }
 
   [disabled] {
     display: none;

app/assets/stylesheets/forms.scss

@@ -246,8 +246,7 @@
     }
   }
 
-  input[type=text]:not([data-address='true']),
-  select {
+  input[type=text]:not([data-address='true']) {
     border-radius: 4px;
     border: solid 1px $border-grey;
     padding: $default-padding;

app/components/editable_champ/departements_component/departements_component.html.haml

@@ -1 +1 @@
-= @form.select :value, options, select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile"
+= @form.select :value, options, select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "fr-select"

app/components/editable_champ/drop_down_list_component.rb

@@ -1,6 +1,6 @@
 class EditableChamp::DropDownListComponent < EditableChamp::EditableChampBaseComponent
   def select_class_names
-    class_names('width-100': contains_long_option?)
+    class_names('width-100': contains_long_option?, 'fr-select': true)
   end
 
   def contains_long_option?

app/components/editable_champ/editable_champ_component.rb

@@ -21,6 +21,40 @@ class EditableChamp::EditableChampComponent < ApplicationComponent
     "EditableChamp::#{@champ.type_champ.camelcase}Component".constantize
   end
 
+  def select_group
+    [
+      'departements',
+      'drop_down_list',
+      'epci',
+      'pays',
+      'regions'
+    ]
+  end
+
+  def input_group
+    [
+      'annuaire_education',
+      'date',
+      'datetime',
+      'decimal_number',
+      'dgfip',
+      'dossier_link',
+      'email',
+      'iban',
+      'integer_number',
+      'mesri',
+      'number',
+      'phone',
+      'piece_justificative',
+      'pole_emploi',
+      'rna',
+      'siret',
+      'text',
+      'textarea',
+      'titre_identite'
+    ]
+  end
+
   def html_options
     {
       class: class_names(
@@ -28,7 +62,8 @@ class EditableChamp::EditableChampComponent < ApplicationComponent
           'editable-champ': true,
           "editable-champ-#{@champ.type_champ}": true,
           "hidden": !@champ.visible?,
-          "fr-input-group": true
+          "fr-input-group": input_group.include?(@champ.type_champ),
+          "fr-select-group": select_group.include?(@champ.type_champ)
         }.merge(input_group_error_class_names)
       ),
       id: @champ.input_group_id,

app/components/editable_champ/epci_component/epci_component.html.haml

@@ -1,5 +1,5 @@
 %label.notice{ for: @champ.code_departement_input_id } Le département de l’EPCI
-= @form.select :code_departement, departement_options, departement_select_options, required: @champ.required?, id: @champ.code_departement_input_id, class: "width-33-desktop width-100-mobile"
+= @form.select :code_departement, departement_options, departement_select_options, required: @champ.required?, id: @champ.code_departement_input_id, class: "width-33-desktop width-100-mobile fr-select"
 - if @champ.departement?
   = @form.label "EPCI", for: @champ.epci_input_id
-  = @form.select :value, epci_options, epci_select_options, required: @champ.required?, id: @champ.epci_input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile"
+  = @form.select :value, epci_options, epci_select_options, required: @champ.required?, id: @champ.epci_input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile fr-select"

app/components/editable_champ/pays_component/pays_component.html.haml

@@ -1 +1 @@
-= @form.select :value, options, select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile"
+= @form.select :value, options, select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile fr-select"

app/components/editable_champ/regions_component/regions_component.html.haml

@@ -1 +1 @@
-= @form.select :value, options, select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile"
+= @form.select :value, options, select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile fr-select"

app/components/types_de_champ_editor/champ_component/champ_component.html.haml

@@ -32,6 +32,7 @@
             .cell.flex.justify-start.column.flex-grow
               = form.label :type_champ, "Type de champ", for: dom_id(type_de_champ, :type_champ)
               = form.select :type_champ, grouped_options_for_select(types_of_type_de_champ, type_de_champ.type_champ), {}, class: 'fr-select small-margin small inline width-100', id: dom_id(type_de_champ, :type_champ), disabled: coordinate.used_by_routing_rules?
+
           .flex.column.justify-start.flex-grow
             .cell
               .flex.align-center