fix(dropdown-other): other input alignement/markup
This commit is contained in:
parent
0daeca14e4
commit
c4272e3bac
2 changed files with 37 additions and 29 deletions
|
@ -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 }
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue