amelioration(design): ETQ usager la cohabitation du design d'un form …

…mi-DSFR, mi-DS n'est pas trop moche

amelioration(design): ETQ usager la cohabitation du design d'un form mi-DSFR, mi-DS n'est pas trop moche

app/assets/stylesheets/forms.scss

@@ -107,7 +107,6 @@
     }
 
     &.editable-champ-checkbox {
-      p,
       label {
         padding-left: 28px;
         font-weight: normal;
@@ -157,7 +156,7 @@
       user-select: none;
 
       &:last-of-type {
-        margin-bottom: $default-fields-spacer;
+        margin-bottom: 0;
       }
 
       &:hover {
@@ -193,6 +192,7 @@
       font-weight: normal;
     }
   }
+
   .fr-label {
     // la description d'un champ peut contenir du markup (markdown->html),
     // on herite donc la fontsize/mrgin/padding du fr-hint-text
@@ -202,10 +202,12 @@
       padding: inherit;
     }
   }
+
   input[type=password],
   select {
     display: block;
     margin-bottom: $default-fields-spacer;
+    margin-bottom: 0;
 
     &.small-margin {
       margin-bottom: $default-spacer;
@@ -330,7 +332,7 @@
 
     margin-left: 5px;
     margin-right: 4px;
-    margin-bottom: $default-fields-spacer;
+    margin-bottom: 0;
   }
 
   select {
@@ -542,12 +544,6 @@
   }
 }
 
-[data-react-component-value]:not([data-react-component-value^="ComboMultiple"]) {
-  [data-reach-combobox-input]:not(.no-margin) {
-    margin-bottom: $default-fields-spacer;
-  }
-}
-
 [data-react-component-value^="ComboMultiple"] {
   margin-bottom: $default-fields-spacer;
 

app/components/attachment/edit_component/edit_component.html.haml

@@ -1,4 +1,4 @@
-.attachment.fr-upload-group{ { id: attachment ? dom_id(attachment, :edit) : nil, class: class_names("fr-mb-2w": !(as_multiple? && downloadable?)) }.compact, **replace_controller_attributes }
+.attachment.fr-upload-group{ { id: attachment ? dom_id(attachment, :edit) : nil, class: class_names("fr-mb-1w": !(as_multiple? && downloadable?)) }.compact, **replace_controller_attributes }
   - if persisted?
     %div{ id: dom_id(attachment, :persisted_row) }
       .flex.flex-gap-2{ class: class_names("attachment-error": attachment.virus_scanner_error?) }

app/components/attachment/multiple_component/multiple_component.html.haml

@@ -1,10 +1,11 @@
-.fr-mb-4w.attachment-multiple{ class: class_names("fr-downloads-group": view_as == :download, "destroyable": user_can_destroy?), **replace_controller_attributes }
+.attachment-multiple{ class: class_names("fr-downloads-group": view_as == :download, "destroyable": user_can_destroy?), **replace_controller_attributes }
   = template
 
-  %ul
-    - each_attachment do |attachment, index|
-      %li{ id: dom_id(attachment) }
-        = render Attachment::EditComponent.new(champ:, attached_file:, attachment:, index:, as_multiple: true, view_as:, user_can_destroy:, user_can_replace:, form_object_name:)
+  - if @attachments.size >= 1
+    %ul.fr-my-1v
+      - each_attachment do |attachment, index|
+        %li{ id: dom_id(attachment) }
+          = render Attachment::EditComponent.new(champ:, attached_file:, attachment:, index:, as_multiple: true, view_as:, user_can_destroy:, user_can_replace:, form_object_name:)
 
   %div{ id: empty_component_id, class: class_names("hidden": !can_attach_next?) }
     = render Attachment::EditComponent.new(champ:, attached_file:, attachment: nil, index: attachments_count, user_can_destroy:, user_can_replace:, form_object_name:)

app/components/dsfr/input_component.rb

@@ -49,7 +49,6 @@ def label
     object.class.human_attribute_name(@attribute)
   end
 
-
   # kind of input helpers
   def password?
     @input_type == :password_field
@@ -64,6 +63,4 @@ def show_password_id
   end
 
   private
-
-
 end

app/components/dsfr/input_errorable.rb

@@ -66,7 +66,7 @@ def input_opts(other_opts = {})
       end
 
       def describedby_id
-        dom_id(@champ, :error_messages)
+        dom_id(@champ, :error_full_messages)
       end
 
       def errors_on_another_attribute?
@@ -78,7 +78,7 @@ def errors_on_attribute?
       end
 
       # errors helpers
-      def error_messages
+      def error_full_messages
         errors.full_messages_for(attribute_or_rich_body)
       end
 

app/components/editable_champ/editable_champ_component.rb

@@ -28,7 +28,7 @@ def html_options
           'editable-champ': true,
           "editable-champ-#{@champ.type_champ}": true,
           "hidden": !@champ.visible?,
-          "fr-input-group": true,
+          "fr-input-group": true
         }.merge(input_group_error_class_names)
       ),
       id: @champ.input_group_id,

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

@@ -4,12 +4,12 @@
   = render component_class.new(form: @form, champ: @champ, seen_at: @seen_at)
 
   - if errors_on_attribute?
-    - if error_messages.size == 1
-      %p.fr-error-text{ id: describedby_id }= error_messages.first
+    - if error_full_messages.size == 1
+      %p.fr-error-text{ id: describedby_id }= error_full_messages.first
     - else
       .fr-error-text{ id: describedby_id }
         %ul.list-style-type-none.fr-pl-0
-          - error_messages.map do |error_message|
+          - error_full_messages.each do |error_message|
             %li= error_message
 
   = @form.hidden_field :id, value: @champ.id

app/views/users/dossiers/update.turbo_stream.haml

@@ -9,7 +9,7 @@
         = render EditableChamp::EditableChampComponent.new champ:, form:
     - else
       = turbo_stream.update champ.labelledby_id do
-        = render EditableChamp::ChampLabelContentComponent.new champ:
+        = render EditableChamp::ChampLabelContentComponent.new champ:, form:
 
 = turbo_stream.remove_all(".editable-champ .spinner-removable");
 = turbo_stream.hide_all(".editable-champ .spinner");