Simple_form: Radio buttons custom wrapper inside label not taking custom class

[mur-wtag]

Hello,

I don't know is it issue or not (maybe I couldn't find the proper solution). I've trying to add a custom class on label which is inside a custom wrapper.

1. HTML generating code

  <div class="form-group">
    <%= f.input :pagination,
                as: :radio_buttons,
                wrapper: :custom_collection_inline,
                collection: some_method_returns_collection,
                item_wrapper_class: 'custom-control custom-control-inline custom-radio',
                label: false,
                checked: some_method_returns_true_or_false %>
  </div>

1. :custom_collection_inline wrapper looks like:

config.wrappers :custom_collection_inline, item_wrapper_class: 'custom-control custom-control-inline', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid-borealis' do |b|
    b.use :html5
    b.optional :readonly
    b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
      ba.use :label_text
    end
    b.use :input, class: 'custom-control-input', error_class: 'is-invalid', valid_class: 'is-valid-borealis'
    b.use :label, class: 'custom-control-label'
    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

1. Output HTML

<div class="form-group">
  <fieldset class="form-group radio_buttons optional gallery_embed_pagination form-group-valid-borealis">
    <legend class="col-form-label pt-0">Pagination</legend>
    <input type="hidden" name="gallery_embed[pagination]" value="">
    <div class="custom-control custom-control-inline custom-radio">
      <input class="custom-control-input is-valid-borealis radio_buttons optional" type="radio" value="none" name="someting[pagination]" id="something_none">
      <label class="collection_radio_buttons" for="something_none">None</label>
    </div>
    <div class="custom-control custom-control-inline custom-radio">
      <input class="custom-control-input is-valid-borealis radio_buttons optional" type="radio" value="button" checked="checked" name="someting[pagination]" id="someting_button">
      <label class="collection_radio_buttons" for="someting_button">Button</label>
    </div>
  </fieldset>
</div>

Please let me know, if any info required, any help would be appreciable. Thanks!

[feliperenan]

Hi @mur-wtag, thanks for the issue.

Unfortunately, Simple Form doesn't support custom styles for labels when boolean fields (checkboxes and radios buttons) are inline. I'm assuming that you are using config.boolean_style = :inline given your HTML output.

If you change the boolean style to be nested config.boolean_style = :nested, you can pass the item_label_class option, like that:

f.input :pagination,
        as: :radio_buttons,
        wrapper: :custom_collection_inline,
        collection: some_method_returns_collection,
        item_wrapper_class: 'custom-control custom-control-inline custom-radio',
        label: false,
        item_label_class: "my-custom_class",
        checked: some_method_returns_true_or_false

You can see this issue case you want to implement it: https://github.com/plataformatec/simple_form/issues/1174. I know that isn't the best approach since you need to override Simple Form internals, but I think that is the only approach today.

We could accept the item_label_class for booleans inline as well, I would appreciate a PR for that :).