Merge Blaise's css_class patches from https://bitbucket.org/blaf/deform:

$ hg diff -r 2d51adca838f > 1.patch
$ cd /path/to/deform/trunk
$ patch -p1 < /wherever/1.patch

- The ``deform.widget.Widget`` class now accepts an extra keyword
  argument in its constructor: ``css_class``.

  All widgets now inherit a ``css_class`` attribute from the base
  ``deform.widget.Widget`` class.  If `css_class`` contains a value,
  the primary element in the rendered widget will get a CSS ``class``
  attribute equal to the value.

Also add a CONTRIBUTORS.txt and fix a couple minor documentation bugs and 
remove a missing import.

.hgignore

@@ -6,4 +6,6 @@ env
 dist
 .coverage
 .build
+*.pyc
+.svn
 

CHANGES.txt

@@ -30,6 +30,13 @@ Features
   a text input that can be supplied a URL or iterable of choices to
   ease the search and selection of a finite set of choices.
 
+- The ``deform.widget.Widget`` class now accepts an extra keyword
+  argument in its constructor: ``css_class``.
+
+  All widgets now inherit a ``css_class`` attribute from the base
+  ``deform.widget.Widget`` class.  If `css_class`` contains a value,
+  the primary element in the rendered widget will get a CSS ``class``
+  attribute equal to the value.
 
 0.3
 ---

CONTRIBUTORS.txt

@@ -0,0 +1,4 @@
+Chris McDonough
+Tres Seaver
+Reed O'Brien
+Blaise Laflamme

deform/form.py

@@ -28,14 +28,15 @@ class Form(field.Field):
 
     formid
         The identifier for this form.  This value will be used as the
-        value of a hidden form input control (``__formid__``) which
-        will be placed in this form's rendering.  You should pass a
-        string value for ``formid`` when more than one Deform form is
-        placed into a single page and both share the same action.
-        When one of the forms on the page is posted, your code will to
-        be able to decide which of those forms was posted based on the
-        differing values of ``__formid__``.  By default, ``formid`` is
-        ``deform``.
+        HTML ``id`` attribute of the rendered HTML form.  It will also
+        be used as the value of a hidden form input control
+        (``__formid__``) which will be placed in this form's
+        rendering.  You should pass a string value for ``formid`` when
+        more than one Deform form is placed into a single page and
+        both share the same action.  When one of the forms on the page
+        is posted, your code will to be able to decide which of those
+        forms was posted based on the differing values of
+        ``__formid__``.  By default, ``formid`` is ``deform``.
 
     use_ajax
        If this option is ``True``, the form will use AJAX (actually

deform/static/css/form.css

@@ -931,3 +931,14 @@ a.deformSeqAdd:visited {
 div.deformReplaces {
     float: left;
 }
+
+/* css_class test */
+form .deformWidgetWithStyle{
+	width:100px;
+	margin:0;
+	padding: 10px;
+	border: 2px solid #71a23c;
+	background-color: #fff7c0;
+	font-weight: bold;
+}
+

deform/templates/autocomplete_input.pt

@@ -1,6 +1,6 @@
 <span tal:omit-tag="">
     <input type="text" name="${field.name}" value="${cstruct}" 
-           tal:attributes="size field.widget.size"
+           tal:attributes="size field.widget.size; class field.widget.css_class;"
            id="${field.oid}"/>
     <script tal:condition="field.widget.values" type="text/javascript">
       jQuery(function($) {

deform/templates/checkbox.pt

@@ -1,5 +1,5 @@
 <input type="checkbox"
        name="${field.name}" value="${field.widget.true_val}"
        id="${field.oid}"
-       tal:attributes="checked cstruct == field.widget.true_val"/>
+       tal:attributes="checked cstruct == field.widget.true_val; class field.widget.css_class;"/>
 

deform/templates/checkbox_choice.pt

@@ -3,7 +3,7 @@
     <tal:loop tal:repeat="choice field.widget.values">
      <tal:def tal:define="(value, description) choice">
       <label for="${field.oid}-${repeat.choice.index}">${description}</label>
-        <input tal:attributes="checked value in cstruct"
+        <input tal:attributes="checked value in cstruct; class field.widget.css_class;"
                type="checkbox"
                name="checkbox"
                value="${value}"

deform/templates/checked_input.pt

@@ -5,12 +5,12 @@
   <div>
     <label for="${field.oid}">${subject}</label>
     <input type="text" name="value" value="${cstruct}"
-           tal:attributes="size field.widget.size" id="${field.oid}"/>
+           tal:attributes="size field.widget.size; class field.widget.css_class;" id="${field.oid}"/>
   </div>
   <div>
     <label for="${field.oid}-confirm">${confirm_subject}</label>
     <input type="text" name="confirm" value="${confirm}"
-           tal:attributes="size field.widget.size" id="${field.oid}-confirm"/>
+           tal:attributes="size field.widget.size; class field.widget.css_class;" id="${field.oid}-confirm"/>
   </div>
 
   <script tal:condition="field.widget.mask" type="text/javascript">

deform/templates/checked_password.pt

@@ -8,7 +8,7 @@
   <div>
     <label for="${field.oid}-confirm">Confirm Password</label>
     <input type="password" name="confirm" value="${confirm}"
-           tal:attributes="size field.widget.size" id="${field.oid}-confirm"/>
+           tal:attributes="size field.widget.size; class field.widget.css_class;" id="${field.oid}-confirm"/>
   </div>
   <input type="hidden" name="__end__" value="${field.name}:mapping"/>
 </div>

deform/templates/dateinput.pt

@@ -1,6 +1,6 @@
 <span tal:omit-tag="">
     <input type="date" name="${field.name}" value="${cstruct}" 
-           tal:attributes="size field.widget.size"
+           tal:attributes="size field.widget.size; class field.widget.css_class;"
            id="${field.oid}"/>
     <script type="text/javascript">
       jQuery(function($) {

deform/templates/dateparts.pt

@@ -2,13 +2,13 @@
   <input type="hidden" name="__start__" value="${field.name}:mapping"/>
   <label for="${field.oid}">Year</label>
   <input type="text" name="year" value="${year}" 
-         tal:attributes="size field.widget.size" id="${field.oid}"/>
+         tal:attributes="size field.widget.size; class field.widget.css_class;" id="${field.oid}"/>
   <label for="${field.oid}-month">Month</label>
   <input type="text" name="month" value="${month}" 
-         tal:attributes="size field.widget.size" id="${field.oid}-month"/>
+         tal:attributes="size field.widget.size; class field.widget.css_class;" id="${field.oid}-month"/>
   <label for="${field.oid}-day">Day</label>
   <input type="text" name="day" value="${day}" 
-         tal:attributes="size field.widget.size" id="${field.oid}-day"/>
+         tal:attributes="size field.widget.size; class field.widget.css_class;" id="${field.oid}-day"/>
   <input type="hidden" name="__end__" value="${field.name}:mapping"/>
 </div>
 

deform/templates/file_upload.pt

@@ -11,7 +11,7 @@
 
   </div>
 
-  <input type="file" name="upload" tal:attributes="size field.widget.size"
+  <input type="file" name="upload" tal:attributes="size field.widget.size; class field.widget.css_class;"
          id="${field.oid}"/>
 
   <input type="hidden" name="__end__" value="${field.name}:mapping"/>

deform/templates/password.pt

@@ -1,3 +1,3 @@
 <input type="password" name="${field.name}" value="${cstruct}" 
-       tal:attributes="size field.widget.size" id="${field.oid}"/>
+       tal:attributes="size field.widget.size; class field.widget.css_class;" id="${field.oid}"/>
 

deform/templates/radio_choice.pt

@@ -1,6 +1,6 @@
 <span tal:repeat="choice field.widget.values" tal:omit-tag="">
   <label for="${field.oid}-${repeat.choice.index}">${choice[1]}</label>
-  <input tal:attributes="checked choice[0] == cstruct"
+  <input tal:attributes="checked choice[0] == cstruct; class field.widget.css_class;"
          type="radio"
          name="${field.name}"
          value="${choice[0]}"

deform/templates/readonly/autocomplete_input.pt

@@ -1,6 +1,6 @@
 <span tal:omit-tag="">
     <input type="text" name="${field.name}" value="${cstruct}" 
-           tal:attributes="size field.widget.size"
+           tal:attributes="size field.widget.size; class field.widget.css_class;"
            id="${field.oid}"/>
     <script tal:condition="field.widget.values" type="text/javascript">
       jQuery(function($) {

deform/templates/select.pt

@@ -1,6 +1,6 @@
 <select name="${field.name}"
         id="${field.oid}">
  <option tal:repeat="(value, description) field.widget.values"
-         tal:attributes="selected value == cstruct"
+         tal:attributes="selected value == cstruct; class field.widget.css_class;"
          value="${value}">${description}</option>
 </select>

deform/templates/textarea.pt

@@ -1,4 +1,5 @@
 <textarea tal:attributes="rows field.widget.rows;
-                          cols field.widget.cols;"
+                          cols field.widget.cols;
+						  class field.widget.css_class;"
           id="${field.oid}"
           name="${field.name}">${cstruct}</textarea>

deform/templates/textinput.pt

@@ -1,6 +1,6 @@
 <span tal:omit-tag="">
     <input type="text" name="${field.name}" value="${cstruct}" 
-           tal:attributes="size field.widget.size"
+           tal:attributes="size field.widget.size; class field.widget.css_class;"
            id="${field.oid}"/>
     <script tal:condition="field.widget.mask" type="text/javascript">
       jQuery(function($) {

deform/tests/test_template.py

@@ -110,6 +110,7 @@ class DummyWidget(object):
     name = 'name'
     true_val = 'true'
     false_val = 'false'
+    css_class = None
 
 class DummyField(object):
     widget = DummyWidget()

deform/widget.py

@@ -1,4 +1,3 @@
-import colander
 import csv
 import random
 import string
@@ -63,6 +62,11 @@ class Widget(object):
         The name of the CSS class attached to various tags in the form
         renderering indicating an error condition for the field
         associated with this widget.  Default: ``error``.
+    
+    css_class
+        The name of the CSS class attached to various tags in
+        the form renderering specifying a new class for the field
+        associated with this widget.  Default: ``None`` (no class).
 
     These attributes are also accepted as keyword arguments to all
     widget constructors; if they are passed, they will override the
@@ -77,6 +81,7 @@ class Widget(object):
     hidden = False
     category = 'default'
     error_class = 'error'
+    css_class = None
 
     def __init__(self, **kw):
         self.__dict__.update(kw)

deformdemo/app.py

@@ -159,6 +159,18 @@ class Schema(colander.Schema):
         form = deform.Form(schema, buttons=('submit',))
         form['text'].widget = deform.widget.TextInputWidget(size=60)
         return self.render_form(form)
+
+    @bfg_view(renderer='templates/form.pt', name='textinput_with_css_class')
+    @demonstrate('Text Input Widget with CSS Class')
+    def textinput_with_css_class(self):
+        class Schema(colander.Schema):
+            text = colander.SchemaNode(colander.String(),
+                                     validator=colander.Length(max=100),
+                                     description='Enter some text')
+        schema = Schema()
+        form = deform.Form(schema, buttons=('submit',))
+        form['text'].widget = deform.widget.TextInputWidget(size=60, css_class='deformWidgetWithStyle')
+        return self.render_form(form)
 
     @bfg_view(renderer='templates/form.pt', name='autocomplete_input')
     @demonstrate('Autocomplete Input Widget')

deformdemo/tests/test_demo.py

@@ -1547,6 +1547,13 @@ def test_submit_filled(self):
         captured = browser.get_text('css=#captured')
         self.assertEqual(captured, "{'text': u'hello'}")
 
+class TextInputWithCssClassWidgetTests(unittest.TestCase):
+    url = "/textinput_with_css_class/"
+    def test_render_default(self):
+        browser.open(self.url)
+        browser.wait_for_page_to_load("30000")
+        self.assertTrue(browser.is_element_present('css=.deformWidgetWithStyle'))
+
 class AutocompleteInputWidgetTests(unittest.TestCase):
     url = "/autocomplete_input/"
     def test_render_default(self):