fix(dropdown-other): other input alignement/markup

This commit is contained in:
Colin Darie 2023-10-30 10:50:54 +01:00
parent 0daeca14e4
commit c4272e3bac
No known key found for this signature in database
GPG key ID: 8C76CADD40253590
2 changed files with 37 additions and 29 deletions

View file

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

View file

@ -1,33 +1,33 @@
- if @champ.options?
- if @champ.render_as_radios?
.fr-fieldset__content
- @champ.enabled_non_empty_options.each_with_index do |option, index|
.fr-radio-group
= @form.radio_button :value, option, id: "#{@champ.id}_radio_option_#{index}"
%label.fr-label{ for: "#{@champ.id}_radio_option_#{index}" }
= option
- if @champ.render_as_radios?
.fr-fieldset__content
- @champ.enabled_non_empty_options.each_with_index do |option, index|
.fr-radio-group
= @form.radio_button :value, option, id: "#{@champ.id}_radio_option_#{index}"
%label.fr-label{ for: "#{@champ.id}_radio_option_#{index}" }
= option
- if !@champ.mandatory?
.fr-radio-group
= @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" }
Non renseigné
- if !@champ.mandatory?
.fr-radio-group
= @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" }
Non renseigné
- if @champ.drop_down_other?
.fr-radio-group
= @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" }
= t('shared.champs.drop_down_list.other')
- 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
- else
= @form.select :value,
@champ.enabled_non_empty_options(other: true),
{ selected: @champ.selected, include_blank: true },
required: @champ.required?,
id: @champ.input_id,
class: select_class_names,
aria: { describedby: @champ.describedby_id }
- if @champ.drop_down_other?
.fr-radio-group
= @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" }
= t('shared.champs.drop_down_list.other')
- 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
- else
= @form.select :value,
@champ.enabled_non_empty_options(other: true),
{ selected: @champ.selected, include_blank: true },
required: @champ.required?,
id: @champ.input_id,
class: select_class_names,
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)