Merge pull request #9576 from colinux/fix-sections-conditional

ETQ usager le form n'accumule pas l'espacement vertical des champs conditionnés consécutifs

app/assets/stylesheets/forms.scss

@@ -49,6 +49,11 @@
     margin-top: 0 !important;
   }
 
+  // Don't cumulate margin-bottoms for inlined elements (radio...), because .fr-fieldset has already its own
+  .fr-fieldset__element > .fr-fieldset > .fr-fieldset__element.fr-fieldset__element--inline {
+    margin-bottom: 0;
+  }
+
   legend {
     width: 100%;
   }

app/components/editable_champ/champ_label_component/champ_label_component.html.haml

@@ -8,5 +8,6 @@
 - elsif @champ.single_checkbox?
   -# no label to add
 - else
-  .fr-label.mb-4{ id: @champ.labelledby_id }
+  -# champ civilite (and other?)
+  .fr-label.fr-mb-1w{ id: @champ.labelledby_id }
     = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at

app/components/editable_champ/editable_champ_component.rb

@@ -30,15 +30,20 @@ class EditableChamp::EditableChampComponent < ApplicationComponent
         {
           'editable-champ': true,
           "editable-champ-#{@champ.type_champ}": true,
-          "hidden": !@champ.visible?,
           champ_component.dsfr_group_classname => true
         }.merge(champ_component.input_group_error_class_names)
       ),
-      id: @champ.input_group_id,
       data: { controller: stimulus_controller, **data_dependent_conditions, **stimulus_values }
     }
   end
 
+  def fieldset_element_attributes
+    {
+      id: @champ.input_group_id,
+      "hidden": !@champ.visible?
+    }
+  end
+
   def stimulus_values
     if @champ.fetch_external_data_pending?
       { turbo_poll_url_value: }

app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml

@@ -1,9 +1,10 @@
-= content_tag((champ_component.dsfr_champ_container), html_options) do
-  - if has_label?(@champ)
-    = render EditableChamp::ChampLabelComponent.new form: @form, champ: @champ, seen_at: @seen_at
+.fr-fieldset__element{ **fieldset_element_attributes }
+  = content_tag((champ_component.dsfr_champ_container), html_options) do
+    - if has_label?(@champ)
+      = render EditableChamp::ChampLabelComponent.new form: @form, champ: @champ, seen_at: @seen_at
 
-  = render champ_component
+    = render champ_component
 
-  = render Dsfr::InputStatusMessageComponent.new(errors_on_attribute: champ_component.errors_on_attribute?, error_full_messages: champ_component.error_full_messages, described_by: @champ.describedby_id)
+    = render Dsfr::InputStatusMessageComponent.new(errors_on_attribute: champ_component.errors_on_attribute?, error_full_messages: champ_component.error_full_messages, described_by: @champ.describedby_id)
 
-  = @form.hidden_field :id, value: @champ.id
+    = @form.hidden_field :id, value: @champ.id

app/components/editable_champ/section_component/section_component.html.haml

@@ -8,8 +8,7 @@
           = render section
         - else
           = fields_for champ.input_name, champ do |form|
-            .fr-fieldset__element
-              = render EditableChamp::EditableChampComponent.new form:, champ:
+            = render EditableChamp::EditableChampComponent.new form:, champ:
 - else
   %fieldset.fr-fieldset.fr-my-0
     - if header_section
@@ -20,5 +19,4 @@
         = render section
       - else
         = fields_for champ.input_name, champ do |form|
-          .fr-fieldset__element
-            = render EditableChamp::EditableChampComponent.new form:, champ:
+          = render EditableChamp::EditableChampComponent.new form:, champ: