Refactor labels CSS, add classes.

Add .label class to all labels intended to be displayed on the left of an input, refactor CSS.

* legends are already marked as .label
* add .label to all labels intended to be displayed on the left of an input as well
* .label lets us address any tag with that class, and style them together
* lets us merge duplicated styles going forward
* exposed a bug where boolean label_html_options wasn't calling super to get the default stuff in Labelling module (fixed)

app/assets/stylesheets/formtastic.css

@@ -109,7 +109,7 @@ This stylesheet forms part of the Formtastic Rails Plugin
 
 /* LABELS
 --------------------------------------------------------------------------------------------------*/
-.formtastic .input label {
+.formtastic .input .label {
   display:block;
   width:25%;
   float:left;
@@ -123,17 +123,13 @@ This stylesheet forms part of the Formtastic Rails Plugin
   position:relative;
 }
 
-.formtastic .choices legend {
+.formtastic .choices .label {
   position:absolute;
   width:95%;
   left:0px;
 }
 
-.formtastic .choices legend span {
-  position:absolute;
-}
-
-.formtastic .choices legend.label label {
+.formtastic .choices .label label {
   position:absolute;
 }
 
@@ -251,17 +247,13 @@ This stylesheet forms part of the Formtastic Rails Plugin
   position:relative;
 }
 
-.formtastic .fragments legend {
+.formtastic .fragments .label {
   position:absolute;
   width:95%;
   left:0px;
 }
 
-.formtastic .fragments legend span {
-  position:absolute;
-}
-
-.formtastic .fragments legend.label label {
+.formtastic .fragments .label label {
   position:absolute;
 }
 

lib/formtastic/inputs/base/labelling.rb

@@ -13,6 +13,8 @@ def label_html_options
           # opts = options_for_label(options) # TODO
           opts = {}
           opts[:for] ||= input_html_options[:id]
+          opts[:class] = [opts[:class]]
+          opts[:class] << 'label'
 
           opts
         end

lib/formtastic/inputs/boolean_input.rb

@@ -52,9 +52,14 @@ def label_with_nested_checkbox
       end
 
       def label_html_options
+        prev = super
+        prev[:class] = prev[:class] - ['label']
+
         input_html_options.merge(
-          :id => nil,
-          :for => input_html_options[:id]
+          prev.merge(
+            :id => nil,
+            :for => input_html_options[:id]
+          )
         )
       end
 

sample/basic_inputs.html

@@ -20,55 +20,55 @@ <h1>Formtastic</h1>
     <fieldset class="inputs">
       <ol>
         <li class="input string stringish optional" id="gem_summary_input">
-          <label for="gem_summary">Summary</label>
+          <label class="label" for="gem_summary">Summary</label>
           <input id="gem_summary" name="gem[summary]" type="text" value="A Rails form builder plugin/gem with semantically rich and accessible markup" maxlength="255">
         </li>
 
         <li class="input text optional" id="gem_description_input">
-          <label for="gem_description">Description</label>
+          <label class="label" for="gem_description">Description</label>
           <textarea id="gem_description" rows="5">A Rails form builder plugin/gem with semantically rich and accessible markup</textarea>
         </li>
 
         <li class="input url stringish optional" id="gem_url_input">
-          <label for="gem_url">URL</label>
+          <label class="label" for="gem_url">URL</label>
           <input id="gem_url" name="gem[url]" type="url">
           <p class="inline-hints">Example: https://github.com/justinfrench/formtastic</p>
         </li>
 
         <li class="input password stringish required" id="gem_password_input">
-          <label for="gem_password">Password<abbr title="required">*</abbr></label>
+          <label class="label" for="gem_password">Password<abbr title="required">*</abbr></label>
           <input id="gem_password" name="gem[password]" type="password">
           <p class="inline-errors">can't be blank</p>
         </li>
 
         <li class="input password stringish required" id="gem_password_input">
-          <label for="gem_password_confirmation">Password confirmation<abbr title="required">*</abbr></label>
+          <label class="label" for="gem_password_confirmation">Password confirmation<abbr title="required">*</abbr></label>
           <input id="gem_password_confirmation" name="gem[password_confirmation]" type="password">
           <p class="inline-errors">can't be blank</p>
         </li>
 
         <li class="input numeric stringish optional" id="gem_downloads_input">
-          <label for="gem_downloads">Downloads</label>
+          <label class="label" for="gem_downloads">Downloads</label>
           <input id="gem_downloads" name="gem[downloads]" type="numeric" value="209,354">
         </li>
 
         <li class="input file optional" id="gem_file_input">
-          <label for="gem_file">File</label>
+          <label class="label" for="gem_file">File</label>
           <input id="gem_file" name="gem[file]" type="file" value="value">
         </li>
 
         <li class="input email stringish optional" id="gem_email_input">
-          <label for="gem_email">Email</label>
+          <label class="label" for="gem_email">Email</label>
           <input id="gem_email" name="gem[email]" type="email">
         </li>
 
         <li class="input phone stringish optional" id="gem_phone_input">
-          <label for="gem_phone">Phone</label>
+          <label class="label" for="gem_phone">Phone</label>
           <input id="gem_phone" name="gem[phone]" type="phone">
         </li>
 
         <li class="input search stringish optional" id="gem_search_input">
-          <label for="gem_search">Search</label>
+          <label class="label" for="gem_search">Search</label>
           <input id="gem_search" name="gem[search]" type="search">
         </li>
 
@@ -99,7 +99,7 @@ <h1>Formtastic</h1>
         </li>
 
         <li class="input string stringish optional autofocus" id="gem_autofocus_input">
-          <label for="gem_autofocus">Autofocus</label>
+          <label class="label" for="gem_autofocus">Autofocus</label>
           <input id="gem_autofocus" name="gem[autofocus]" type="text" value="The focus is set to this field" autofocus="autofocus">
         </li>
 
@@ -111,7 +111,7 @@ <h1>Formtastic</h1>
         </li>
 
         <li class="input select optional" id="gem_awesomeness_input">
-          <label for="gem_awesomeness">Select</label>
+          <label class="label" for="gem_awesomeness">Select</label>
           <select id="gem_awesomeness" name="gem[awesomeness]">
             <option value="5">First choice</option>
             <option value="4">Second choice</option>

spec/inputs/boolean_input_spec.rb

@@ -20,6 +20,9 @@
   it_should_apply_error_logic_for_input_type(:boolean)
 
   it 'should generate a label containing the input' do
+    output_buffer.should_not have_tag('label.label')
+
+
     output_buffer.should have_tag('form li label', :count => 1)
     output_buffer.should have_tag('form li label[@for="post_allow_comments"]')
     output_buffer.should have_tag('form li label', /Allow comments/)
@@ -174,7 +177,7 @@
     end
 
     it_should_have_input_wrapper_with_id("context2_post_allow_comments_input")
-    it_should_have_label_for("context2_post_allow_comments")
+    it_should_have_an_inline_label_for("context2_post_allow_comments")
 
   end
 

spec/support/custom_macros.rb

@@ -51,6 +51,12 @@ def it_should_have_label_with_text(string_or_regex)
     end
 
     def it_should_have_label_for(element_id)
+      it "should have a label for ##{element_id}" do
+        output_buffer.should have_tag("form li label.label[@for='#{element_id}']")
+      end
+    end
+
+    def it_should_have_an_inline_label_for(element_id)
       it "should have a label for ##{element_id}" do
         output_buffer.should have_tag("form li label[@for='#{element_id}']")
       end