Permalink
Browse files

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)
  • Loading branch information...
1 parent a1fdf12 commit 250888025824427bc90343139434efe656209fb5 @justinfrench committed Jun 2, 2011
@@ -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;
}
@@ -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
@@ -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
View
@@ -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>
@@ -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
@@ -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

0 comments on commit 2508880

Please sign in to comment.