From 64dcd2b0d26317017cb2808b09ffdf7019cd1cb2 Mon Sep 17 00:00:00 2001 From: mfo Date: Thu, 11 Apr 2024 11:56:42 +0200 Subject: [PATCH 1/2] fix(repetition): useless fieldset --- .../section_component.html.haml | 4 ++-- .../editable_champ/section_component_spec.rb | 16 +++++++++------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/app/components/editable_champ/section_component/section_component.html.haml b/app/components/editable_champ/section_component/section_component.html.haml index f7a718781..8ec44c63c 100644 --- a/app/components/editable_champ/section_component/section_component.html.haml +++ b/app/components/editable_champ/section_component/section_component.html.haml @@ -10,9 +10,9 @@ = fields_for champ.input_name, champ do |form| = render EditableChamp::EditableChampComponent.new form:, champ: - else - %fieldset.fr-fieldset.fr-my-0 + .fr-fieldset__element.fr-my-0 - if header_section - %legend.fr-fieldset__legend.fr-my-0{ class: "reset-#{tag_for_depth}" } + .fr-fieldset__legend.fr-my-0{ class: "reset-#{tag_for_depth}" } = render EditableChamp::HeaderSectionComponent.new(champ: header_section) - splitted_tail.each do |section, champ| - if section.present? diff --git a/spec/components/editable_champ/section_component_spec.rb b/spec/components/editable_champ/section_component_spec.rb index df65f5d45..7ca892679 100644 --- a/spec/components/editable_champ/section_component_spec.rb +++ b/spec/components/editable_champ/section_component_spec.rb @@ -10,8 +10,8 @@ describe EditableChamp::SectionComponent, type: :component do context 'list of champs without an header_section' do let(:types_de_champ_public) { [{ type: :text }, { type: :textarea }] } - it 'render in a fieldset' do - expect(page).to have_selector("fieldset", count: 1) + it 'does not renders within a fieldset' do + expect(page).to have_selector("fieldset", count: 0) end it 'renders champs' do @@ -37,14 +37,16 @@ describe EditableChamp::SectionComponent, type: :component do context 'list of champs without section and an header_section having champs' do let(:types_de_champ_public) { [{ type: :text }, { type: :header_section, level: 1 }, { type: :text }] } - it 'renders fieldset' do - expect(page).to have_selector("fieldset", count: 2) - expect(page).to have_selector("legend h2") + it 'renders nested champs (after an header section) within a fieldset' do + expect(page).to have_selector("fieldset", count: 1) + expect(page).to have_selector("fieldset legend h2") + expect(page).to have_selector("input[type=text]", count: 2) + expect(page).to have_selector("fieldset input[type=text]", count: 1) end - it 'renders all champs, each in its fieldset' do + it 'renders nested within its fieldset' do expect(page).to have_selector("input[type=text]", count: 2) - expect(page).to have_selector("fieldset > .fr-fieldset__element input[type=text]", count: 2) + expect(page).to have_selector("fieldset > .fr-fieldset__element input[type=text]", count: 1) end end From 91f07f86e4f04a9936363afb4e9554f168068d27 Mon Sep 17 00:00:00 2001 From: mfo Date: Tue, 9 Apr 2024 17:02:08 +0200 Subject: [PATCH 2/2] fix(Champ.checkbox): single checkbox should not be wrapped in `fieldset`. single checkbox uses `fr-checkbox` not `fr-radio` Co-authored-by: Corinne Durrmeyer --- .../editable_champ/checkbox_component.rb | 6 +----- .../checkbox_component.html.haml | 17 ++++++++--------- .../section_component.html.haml | 19 +++++++++---------- app/views/shared/dossiers/_edit.html.haml | 2 +- .../dossiers/_edit_annotations.html.haml | 2 +- 5 files changed, 20 insertions(+), 26 deletions(-) diff --git a/app/components/editable_champ/checkbox_component.rb b/app/components/editable_champ/checkbox_component.rb index af649c013..0e9ce577b 100644 --- a/app/components/editable_champ/checkbox_component.rb +++ b/app/components/editable_champ/checkbox_component.rb @@ -1,9 +1,5 @@ class EditableChamp::CheckboxComponent < EditableChamp::EditableChampBaseComponent - def dsfr_champ_container - :fieldset - end - def dsfr_input_classname - 'fr-radio' + 'fr-checkbox' end end 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 998e25d8a..44e1afae3 100644 --- a/app/components/editable_champ/checkbox_component/checkbox_component.html.haml +++ b/app/components/editable_champ/checkbox_component/checkbox_component.html.haml @@ -1,9 +1,8 @@ -.fr-fieldset__element - .fr-checkbox-group - = @form.check_box :value, - { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id }, class: class_names('required' => @champ.required?)}, - '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 +.fr-checkbox-group + = @form.check_box :value, + { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id }, class: class_names('required' => @champ.required?)}, + '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 diff --git a/app/components/editable_champ/section_component/section_component.html.haml b/app/components/editable_champ/section_component/section_component.html.haml index 8ec44c63c..285f3db39 100644 --- a/app/components/editable_champ/section_component/section_component.html.haml +++ b/app/components/editable_champ/section_component/section_component.html.haml @@ -10,13 +10,12 @@ = fields_for champ.input_name, champ do |form| = render EditableChamp::EditableChampComponent.new form:, champ: - else - .fr-fieldset__element.fr-my-0 - - if header_section - .fr-fieldset__legend.fr-my-0{ class: "reset-#{tag_for_depth}" } - = render EditableChamp::HeaderSectionComponent.new(champ: header_section) - - splitted_tail.each do |section, champ| - - if section.present? - = render section - - else - = fields_for champ.input_name, champ do |form| - = render EditableChamp::EditableChampComponent.new form:, champ: + - if header_section + .fr-fieldset__legend.fr-my-0{ class: "reset-#{tag_for_depth}" } + = render EditableChamp::HeaderSectionComponent.new(champ: header_section) + - splitted_tail.each do |section, champ| + - if section.present? + = render section + - else + = fields_for champ.input_name, champ do |form| + = render EditableChamp::EditableChampComponent.new form:, champ: diff --git a/app/views/shared/dossiers/_edit.html.haml b/app/views/shared/dossiers/_edit.html.haml index 8a24a008f..d5fff3262 100644 --- a/app/views/shared/dossiers/_edit.html.haml +++ b/app/views/shared/dossiers/_edit.html.haml @@ -21,7 +21,7 @@ = render Procedure::NoticeComponent.new(procedure: dossier.procedure) - = render EditableChamp::SectionComponent.new(dossier: dossier_for_editing, types_de_champ: dossier_for_editing.revision.types_de_champ_public) + %fieldset.fr-fieldset= render EditableChamp::SectionComponent.new(dossier: dossier_for_editing, types_de_champ: dossier_for_editing.revision.types_de_champ_public) = render Dossiers::PendingCorrectionCheckboxComponent.new(dossier: dossier) diff --git a/app/views/shared/dossiers/_edit_annotations.html.haml b/app/views/shared/dossiers/_edit_annotations.html.haml index 5457cd0c7..653b75cd2 100644 --- a/app/views/shared/dossiers/_edit_annotations.html.haml +++ b/app/views/shared/dossiers/_edit_annotations.html.haml @@ -3,7 +3,7 @@ %section.counter-start-header-section = render NestedForms::FormOwnerComponent.new = form_for dossier, url: annotations_instructeur_dossier_path(dossier.procedure, dossier), html: { class: 'form', multipart: true } do |f| - = render EditableChamp::SectionComponent.new(dossier:, types_de_champ: dossier.revision.types_de_champ_private) + %fieldset.fr-fieldset= render EditableChamp::SectionComponent.new(dossier:, types_de_champ: dossier.revision.types_de_champ_private) = render Dossiers::EditFooterComponent.new(dossier: dossier, annotation: true) - else