Merge pull request #9652 from colinux/fix-dropdown-other-markup

Usager: fix alignement du champ "autre" des listes de choix
This commit is contained in:
Colin Darie 2023-10-30 10:19:40 +00:00 committed by GitHub
commit 8c6489fae2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 29 deletions

View file

@ -1,4 +1,8 @@
class EditableChamp::DropDownListComponent < EditableChamp::EditableChampBaseComponent class EditableChamp::DropDownListComponent < EditableChamp::EditableChampBaseComponent
def render?
@champ.options?
end
def select_class_names def select_class_names
class_names('width-100': contains_long_option?, 'fr-select': true) class_names('width-100': contains_long_option?, 'fr-select': true)
end end
@ -11,6 +15,10 @@ class EditableChamp::DropDownListComponent < EditableChamp::EditableChampBaseCom
@champ.render_as_radios? ? :fieldset : :div @champ.render_as_radios? ? :fieldset : :div
end end
def other_element_class_names
class_names("fr-fieldset__element" => dsfr_champ_container == :fieldset)
end
def contains_long_option? def contains_long_option?
max_length = 100 max_length = 100
@champ.enabled_non_empty_options.any? { _1.size > max_length } @champ.enabled_non_empty_options.any? { _1.size > max_length }

View file

@ -1,33 +1,33 @@
- if @champ.options? - if @champ.render_as_radios?
- if @champ.render_as_radios? .fr-fieldset__content
.fr-fieldset__content - @champ.enabled_non_empty_options.each_with_index do |option, index|
- @champ.enabled_non_empty_options.each_with_index do |option, index| .fr-radio-group
.fr-radio-group = @form.radio_button :value, option, id: "#{@champ.id}_radio_option_#{index}"
= @form.radio_button :value, option, id: "#{@champ.id}_radio_option_#{index}" %label.fr-label{ for: "#{@champ.id}_radio_option_#{index}" }
%label.fr-label{ for: "#{@champ.id}_radio_option_#{index}" } = option
= option
- if !@champ.mandatory? - if !@champ.mandatory?
.fr-radio-group .fr-radio-group
= @form.radio_button :value, '', checked: @champ.value.blank? && !@champ.other?, id: "#{@champ.id}_radio_option_blank" = @form.radio_button :value, '', checked: @champ.value.blank? && !@champ.other?, id: "#{@champ.id}_radio_option_blank"
%label.fr-label{ for: "#{@champ.id}_radio_option_blank" } %label.fr-label{ for: "#{@champ.id}_radio_option_blank" }
Non renseigné Non renseigné
- if @champ.drop_down_other? - if @champ.drop_down_other?
.fr-radio-group .fr-radio-group
= @form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: @champ.other?, id: "#{@champ.id}_radio_option_other" = @form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: @champ.other?, id: "#{@champ.id}_radio_option_other"
%label.fr-label{ for: "#{@champ.id}_radio_option_other" } %label.fr-label{ for: "#{@champ.id}_radio_option_other" }
= t('shared.champs.drop_down_list.other') = t('shared.champs.drop_down_list.other')
- elsif @champ.render_as_combobox? - elsif @champ.render_as_combobox?
= render Dsfr::ComboboxComponent.new form: @form, name: :value, options: @champ.enabled_non_empty_options(other: true), selected: @champ.selected, id: @champ.input_id, class: select_class_names, describedby: @champ.describedby_id = render Dsfr::ComboboxComponent.new form: @form, name: :value, options: @champ.enabled_non_empty_options(other: true), selected: @champ.selected, id: @champ.input_id, class: select_class_names, describedby: @champ.describedby_id
- else - else
= @form.select :value, = @form.select :value,
@champ.enabled_non_empty_options(other: true), @champ.enabled_non_empty_options(other: true),
{ selected: @champ.selected, include_blank: true }, { selected: @champ.selected, include_blank: true },
required: @champ.required?, required: @champ.required?,
id: @champ.input_id, id: @champ.input_id,
class: select_class_names, class: select_class_names,
aria: { describedby: @champ.describedby_id } aria: { describedby: @champ.describedby_id }
- if @champ.drop_down_other? - if @champ.drop_down_other?
%div{ class: other_element_class_names }
= render EditableChamp::DropDownOtherInputComponent.new(form: @form, champ: @champ) = render EditableChamp::DropDownOtherInputComponent.new(form: @form, champ: @champ)