From 458f4dd805a03e73d6dee906f808ea32c742a0b9 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Wed, 30 Oct 2024 15:08:19 +0100 Subject: [PATCH] Update style (following 6bad191) --- app/assets/stylesheets/forms.scss | 36 ++++++++++++------- .../champ_label_component.html.haml | 2 +- .../checkbox_component.html.haml | 9 ++--- .../repetition_component.html.haml | 2 +- app/javascript/components/ComboBox.tsx | 14 +++++--- 5 files changed, 40 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 8bd435b452e..c61e5090d45 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -120,6 +120,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; @@ -221,21 +226,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'], @@ -400,10 +416,6 @@ } } - .editable-champ-titre_identite { - 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 99f662e4663..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 @@ -8,4 +8,4 @@ - elsif @champ.legend_label? %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) + .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 ? ( - - {description} - + {label ? ( + ) : null}