Last active
June 9, 2020 06:32
-
-
Save vlado/f217a19fb9e7682fe14e6bc8bf4f92fb to your computer and use it in GitHub Desktop.
Example how mdc form builder could be implemented
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<%= mdc_form_with model: @my_model do |f| %> | |
<%= f.mdc_text_field :last_name %> | |
<% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--fullwidth <%= 'mdc-text-field--invalid' if errors.any? %>"> | |
<%= f.text_field method, options %> | |
<span class="mdc-notched-outline"> | |
<span class="mdc-notched-outline__leading"></span> | |
<span class="mdc-notched-outline__notch"> | |
<span class="mdc-floating-label" id="<%= options["aria-labelledby"] %>"><%= label %></span> | |
</span> | |
<span class="mdc-notched-outline__trailing"></span> | |
</span> | |
</label> | |
<% if errors.any? %> | |
<div class="mdc-text-field-helper-line"> | |
<div id="<%= object_name %>-#{method}-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"> | |
<%= errors.to_sentence %> | |
</div> | |
</div> | |
<% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module ApplicationHelper < ActionView::Base | |
def mdc_form_with(model: nil, scope: nil, url: nil, format: nil, **options, &block) | |
options[:builder] = MdcFormBuilder | |
form_with(model: model, scope: scope, url: url, format: format, options, &block) | |
end | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class MdcFormBuilder < ActionView::Helpers::FormBuilder | |
def mdc_text_field(method, options = {}) | |
options[:class] = "mdc-text-field__input" # this does not handle case if custom class is already added | |
options["aria-labelledby"] = "#{object_name}_#{method}_label" | |
label = options.delete(:label) || label_for(method) | |
errors = errors_for(method) | |
render("mdc_text_field", method: method, options: options, label: label, errors: errors) | |
end | |
private | |
def label_for(method) | |
# Use `object_name` and `method` to build logic to get label from i18n files | |
# (optimal solution would be to use same logic as rails label helper) | |
end | |
def errors_for(method) | |
# Something similar to https://github.com/betterdoc-org/case-cs-medicalinformation/blob/master/app/helpers/mdc_form_helper.rb#L78-L84 | |
end | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment