Add ability to add prefix and postfix

[djkz]

Foundation gives you a number of options to add prefix and postfix to your form inputs with a <span>

It would be nice if that functionality transferred over to the form helper through an option.

[dsandstrom]

Good idea, however, I feel it might be a mess to have to deal with column classes.

One of their examples:

<div class="row collapse">
  <div class="small-3 large-2 columns">
    <span class="prefix">http://</span>
  </div>
  <div class="small-9 large-10 columns">
    <input type="text" placeholder="Enter your URL...">
  </div>
</div>

The erb might be:

<%= f.text_field :url, label: "URL", placeholder: "Enter your URL...", prefix: "http://", prefix_column_class: "small-3 large-2", input_column_class: "small-9 large-10" %>

[dsandstrom]

Or maybe

<%= f.text_field :url, label: "URL", placeholder: "Enter your URL...", prefix: "http://", prefix_small_columns: 3, prefix_large_columns: 10 %>

Then, subtract 12 from each to get the input's columns classes.

[dsandstrom]

Actually, it would be better to keep the prefix settings separate:

<%= f.text_field :url, label: "URL", placeholder: "Enter your URL...", prefix: { value: "http://", small: 3, large: 10 } %>

@djkz, If you want to work on a pull request, we can merge it.

[djkz]

It gets a bit complicated if you want to support buttons and mixed prefixes and postfixes. I wonder if using flex would be a cleaner solution? http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/

[dsandstrom]

That looks nice. However, does foundation have any flexbox built into their styles? I don't think we should add css to this gem.

[djkz]

Looks like not yet, it's planned for the next version: http://zurb.com/article/1333/foundation-a-new-grid

Wrapping everything into a row and calculating main element's size from the 12 - prefix - postfix is the way to go for now, not sure if it's possible to also support buttons and other elements that they showed in their example. Maybe by passing the content_tag for the element directly into the prefix: property but that can get pretty complicated really fast.

[dsandstrom]

As you say, anything more complicated than a span is probably a bad idea. The user can always fallback to making the row/columns themselves. And if they only need to support IE 10+, they can use flexbox.

[dsandstrom]

Fix merged.