Y.Button can render as non-submit

src/button/HISTORY.md

@@ -4,7 +4,10 @@ Button Change History
 @VERSION@
 ------
 
-* No changes.
+* Added type ATTR to ButtonCore to enable Button nodes to be rendered with "type" attribute
+  The default `type` for `<button>`s `submit`, which is not always desired, especially for ToggleButton.
+  * `Button` now supports `submit` (backwards-compatible default), `button` and `reset`
+  * `ToggleButton` is always rendered with `type="button"`
 
 3.10.3
 ------

src/button/js/button.js

@@ -60,6 +60,10 @@ Y.extend(Button, Y.Widget,  {
         }
     },
 
+    renderUI: function () {
+        this.getNode().set('type', this.get('type'));
+    },
+
     /**
      * bindUI implementation
      *
@@ -136,6 +140,17 @@ Y.extend(Button, Y.Widget,  {
          */
         label: {
             value: Y.ButtonCore.ATTRS.label.value
+        },
+
+        /**
+         * Type of button: 'submit', 'button' or 'reset'
+         */
+        type: {
+            value: 'submit',
+            validator: function (val) {
+                return val === 'submit' || val === 'button' || val === 'reset';
+            },
+            getter: null    // don't get type from node
         }
     },
 
@@ -153,6 +168,10 @@ Y.extend(Button, Y.Widget,  {
 
         disabled: function(node) {
             return node.getDOMNode().disabled;
+        },
+
+        type: function (node) {
+            return node.get('type');
         }
     },
 
@@ -208,8 +227,7 @@ Y.extend(ToggleButton, Button,  {
      */
     initializer: function (config) {
         var button = this,
-            type = button.get('type'),
-            selectedAttrName = (type === "checkbox" ? 'checked' : 'pressed'),
+            selectedAttrName = (config.type === "checkbox" ? 'checked' : 'pressed'),
             selectedState = config[selectedAttrName] || false;
 
         // Create the checked/pressed attribute
@@ -228,6 +246,10 @@ Y.extend(ToggleButton, Button,  {
         delete this.selectedAttrName;
     },
 
+    renderUI: function () {
+         this.getNode().set('type', 'button');  // toggles are buttons
+    },
+
     /**
      * @method bindUI
      * @description Hooks up events for the widget
@@ -319,14 +341,13 @@ Y.extend(ToggleButton, Button,  {
     ATTRS: {
 
        /**
-        *
-        *
-        * @attribute type
-        * @type String
+        * 'toggle' (default) or 'checkbox'
         */
         type: {
             value: 'toggle',
-            writeOnce: 'initOnly'
+            validator: function (val) {
+                return val === 'toggle' || val === 'checkbox';
+            }
         }
     },
 

src/button/js/core.js

@@ -83,7 +83,7 @@ ButtonCore.prototype = {
      * @param config {Object} Config object.
      * @private
      */
-    _renderUI: function() {
+    _renderUI: function(config) {
         var node = this.getNode(),
             tagName = node.get('tagName').toLowerCase();
 
@@ -92,6 +92,8 @@ ButtonCore.prototype = {
 
         if (tagName !== 'button' && tagName !== 'input') {
             node.set('role', 'button');
+        } else if (config.type) {
+            node.set('type', config.type);
         }
     },
 
@@ -142,6 +144,10 @@ ButtonCore.prototype = {
         return label;
     },
 
+    _getType: function () {
+        return this.getNode().get('type');
+    },
+
     /**
      * @method _uiSetLabel
      * @description Setter for a button's 'label' ATTR
@@ -212,6 +218,22 @@ ButtonCore.ATTRS = {
         value: false,
         setter: '_uiSetDisabled',
         lazyAdd: false
+    },
+
+    /**
+     * The host node's type
+     * 
+     * If instantiated without a host, defaults 'submit', but can be set to 'button' or 'reset'
+     * Else, type is the host's type
+     * 
+     * @attribute
+     * @type String
+     */
+    type: {
+        value: 'submit',
+        getter: '_getType',
+        writeOnce: 'initOnly',
+        lazyAdd: false
     }
 };
 
@@ -242,7 +264,7 @@ ButtonCore.CLASS_NAMES = {
 /**
  * Array of static constants used to for applying ARIA states
  *
- * @property CLASS_NAMES
+ * @property ARIA_STATES
  * @type {Object}
  * @private
  * @static
@@ -255,7 +277,7 @@ ButtonCore.ARIA_STATES = {
 /**
  * Array of static constants used to for applying ARIA roles
  *
- * @property CLASS_NAMES
+ * @property ARIA_ROLES
  * @type {Object}
  * @private
  * @static
@@ -267,4 +289,4 @@ ButtonCore.ARIA_ROLES = {
 };
 
 // Export Button
-Y.ButtonCore = ButtonCore;
+Y.ButtonCore = ButtonCore;

src/button/tests/unit/assets/button-core-test.js

@@ -116,6 +116,41 @@ YUI.add('button-core-test', function (Y) {
             Assert.areEqual(button.get('label'), 'foo');
             Assert.isInstanceOf(Y.ButtonCore, button);
         },
+
+        'New ButtonCores nodes should get proper type attribute': function () {
+            Assert.areEqual('submit', new Y.ButtonCore({}).get('type'));
+            Assert.areEqual('submit', new Y.ButtonCore({type: 'submit'}).get('type'));
+            Assert.areEqual('submit', new Y.ButtonCore({type: 'submit'}).get('type'));
+
+            Assert.areEqual('button', new Y.ButtonCore({type: 'button'}).get('type'));   // sensible
+            Assert.areEqual('reset', new Y.ButtonCore({type: 'reset'}).get('type'));   // sensible
+
+            Assert.areEqual('submit', new Y.ButtonCore({type: 'foo'}).get('type'));      // ridiculous value, fall back to default
+        },
+
+        'ButtonCore should respect host node\'s type': function () {
+            function getButtonType () {
+                return new Y.ButtonCore({
+                    host: Y.one("#testButton")
+                }).get('type');
+            }
+
+            Y.one("#container").setContent('<button id="testButton">Hoi</button>');
+            Assert.areEqual('submit', getButtonType());
+            Y.one("#container").setContent('<button id="testButton" type="submit">Hoi</button>');
+            Assert.areEqual('submit', getButtonType());
+
+            Y.one("#container").setContent('<button id="testButton" type="button">Hoi</button>');
+            Assert.areEqual('button', getButtonType());
+
+            Y.one("#container").setContent('<button id="testButton" type="reset">Hoi</button>');
+            Assert.areEqual('reset', getButtonType());
+
+            Y.one("#container").setContent('<input id="testButton" type="submit">Hoi</button>');
+            Assert.areEqual('submit', getButtonType());
+            Y.one("#container").setContent('<input id="testButton" type="button">Hoi</button>');
+            Assert.areEqual('button', getButtonType());
+        },
 
         'Modifying the label of a nested button structure should not modify the non-label elements': function () {
             Y.one("#container").setContent('<button id="testButton">**<span class="yui3-button-label">Hello</span>**</button>');

src/button/tests/unit/assets/button-test.js

@@ -57,6 +57,11 @@ suite.add(new Y.Test.Case({
         Assert.areEqual('toggle', role);
     },
 
+    'ToggleButton node should always be type="button"': function () {
+        Assert.areEqual('button', this.toggleButton.getNode().get('type'));
+        Assert.areEqual('button', this.checkButton.getNode().get('type'));
+    },
+
     'Selecting a toggleButton should add class `yui3-button-selected`': function () {
         var button = this.toggleButton,
             cb = button.get('contentBox');
@@ -194,6 +199,22 @@ suite.add(new Y.Test.Case({
         Y.one("#container").empty(true);
     },
 
+    'Passing a type should change the node\'s type': function () {
+        function getNewButtonType (type) {
+            return new Y.Button({
+                type:   type,
+                render: '#container'
+            }).getNode().get('type');
+        }
+
+        Assert.areEqual('submit', getNewButtonType());
+        Assert.areEqual('submit', getNewButtonType('submit'));
+        Assert.areEqual('button', getNewButtonType('button'));
+        Assert.areEqual('reset', getNewButtonType('reset'));
+
+        Assert.areEqual('submit', getNewButtonType('feisty'));
+    },
+
     'Passing `pressed=true` in with the config will default the button to a `pressed` state': function() {
         var button;
 
@@ -293,6 +314,33 @@ suite.add(new Y.Test.Case({
         Y.one("#container").empty(true);
     },
 
+    'The parser should read the button type': function () {
+        function getButtonType () {
+            var b;
+            b = new Y.Button({
+                srcNode: Y.one("#container button, #container input")
+            });
+            b.render();
+            return b.get('type');
+        }
+
+        Y.one("#container").setContent('<button>Hoi</button>');
+        Assert.areEqual('submit', getButtonType());
+        Y.one("#container").setContent('<button type="submit">Hoi</button>');
+        Assert.areEqual('submit', getButtonType());
+
+        Y.one("#container").setContent('<button type="button">Hoi</button>');
+        Assert.areEqual('button', getButtonType());
+
+        Y.one("#container").setContent('<button type="reset">Hoi</button>');
+        Assert.areEqual('reset', getButtonType());
+
+        Y.one("#container").setContent('<input type="submit">Hoi</button>');
+        Assert.areEqual('submit', getButtonType());
+        Y.one("#container").setContent('<input type="button">Hoi</button>');
+        Assert.areEqual('button', getButtonType());
+    },
+
     'The HTML parser for the `label` attribute should reference the button text': function() {
 
         var Test = this,