diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index 87feaeeedfe..f9e823f70ed 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -117,6 +117,11 @@
visibility: hidden;
}
+ &.editable-champ-checkbox .updated-at {
+ // les champs editable-champ-checkbox ont un rendu de type flex
+ margin-left: auto;
+ }
+
&:hover .updated-at,
.updated-at.highlighted {
visibility: visible;
@@ -217,21 +222,32 @@
.fr-label + .fr-hint-text > *,
.fr-fieldset__legend + .fr-hint-text > * {
// la description d'un champ peut contenir du markup (markdown->html),
- // on herite donc la fontsize/margin/padding du fr-hint-text
+ // on herite donc la taille de police, la couleur et l'interlignage de fr-hint-text
+ // on réinitialise les marges des éléments
font-size: inherit;
line-height: inherit;
- margin: inherit;
- padding: inherit;
+ color: inherit;
+ margin: 0;
+ padding: 0;
}
- .fr-label + .fr-hint-text {
- // les messages d'aide se trouvant juste après un label prennent le même style que ceux se trouvant dans un label
- margin-top: .25rem;
+ .fr-fieldset .fr-hint-text ul {
+ margin-left: 0.75rem;
}
+ .fr-fieldset .fr-hint-text ol {
+ margin-left: 1.25rem;
+ }
+
+
.fr-hint-text + .fr-input {
- // les champs se trouvant juste après un message d'aide prennent le même syle que ceux se trouvant juste après un label
- margin-top: .5rem;
+ // les champs se trouvant juste après un message d'aide ont le même espacement que ceux se trouvant juste après un label
+ margin-top: 0.5rem;
+ }
+
+ .fr-fieldset__legend .fr-hint-text {
+ // les messages d'aide se trouvant dans une légende ont le même espacement que ceux se trouvant dans un label
+ margin-top: 0.25rem;
}
input[type=password],
@@ -395,10 +411,6 @@
}
}
- .editable-champ-titre_identite { // scss-lint:disable SelectorFormat
- margin-bottom: 2 * $default-padding;
- }
-
.cnaf-inputs,
.dgfip-inputs,
.pole-emploi-inputs,
diff --git a/app/components/editable_champ/champ_label_component/champ_label_component.html.haml b/app/components/editable_champ/champ_label_component/champ_label_component.html.haml
index a14397a52ac..e887c833885 100644
--- a/app/components/editable_champ/champ_label_component/champ_label_component.html.haml
+++ b/app/components/editable_champ/champ_label_component/champ_label_component.html.haml
@@ -6,9 +6,6 @@
- if @champ.description.present?
.fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
- elsif @champ.legend_label?
- %legend.fr-fieldset__legend.fr-text--regular{ id: @champ.labelledby_id }= render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
+ %legend.fr-fieldset__legend.fr-text--regular.fr-pb-1w{ id: @champ.labelledby_id }= render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
- if @champ.description.present?
- .fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
-- elsif @champ.single_checkbox?
- - if @champ.description.present?
- .fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
+ .fr-hint-text.fr-mt-n1w.fr-mb-1w.fr-pl-1w.width-100{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
diff --git a/app/components/editable_champ/checkbox_component/checkbox_component.html.haml b/app/components/editable_champ/checkbox_component/checkbox_component.html.haml
index 509759e058a..82867893c2e 100644
--- a/app/components/editable_champ/checkbox_component/checkbox_component.html.haml
+++ b/app/components/editable_champ/checkbox_component/checkbox_component.html.haml
@@ -1,8 +1,9 @@
-.fr-checkbox-group
+.fr-input-group
= @form.check_box :value,
- { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: "#{@champ.describedby_id} #{@champ.error_id}" }, class: class_names('required' => @champ.required?)},
+ { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: "#{@champ.describedby_id} #{@champ.error_id}" } },
'true',
'false'
%label.fr-label{ for: @champ.input_id, id: @champ.labelledby_id }
- %span
- = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
+ = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
+ - if @champ.description.present?
+ .fr-hint-text.fr-mt-1v.fr-ml-4w{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
diff --git a/app/components/editable_champ/repetition_component/repetition_component.html.haml b/app/components/editable_champ/repetition_component/repetition_component.html.haml
index 620f5194b24..d3862515ce3 100644
--- a/app/components/editable_champ/repetition_component/repetition_component.html.haml
+++ b/app/components/editable_champ/repetition_component/repetition_component.html.haml
@@ -1,7 +1,7 @@
%fieldset
%legend.fr-h5{ legend_params }= @champ.libelle
- if @champ.description.present?
- .notice{ notice_params }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
+ .notice.fr-mt-n2w{ notice_params }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
.repetition{ id: dom_id(@champ, :rows), class: class_names('utils-repetition-required' => @champ.mandatory?) }
diff --git a/app/javascript/components/ComboBox.tsx b/app/javascript/components/ComboBox.tsx
index d4384325505..7fe18b80b21 100644
--- a/app/javascript/components/ComboBox.tsx
+++ b/app/javascript/components/ComboBox.tsx
@@ -50,11 +50,15 @@ export function ComboBox({
className={`fr-ds-combobox ${className ?? ''}`}
shouldFocusWrap={true}
>
- {label ? : null}
- {description ? (
-