Remove support for input elements

CHANGELOG.md

@@ -1,5 +1,6 @@
 === HEAD
 
+* Remove support for `input` elements.
 * Revert to implicit-width, inline-block rendering.
 * Add variables support.
 * Use Component(1) for development.

README.md

@@ -16,9 +16,9 @@ Read more about [SUIT's design principles](https://github.com/suitcss/suit/).
 * `Button` - [core] The core button component
 * `is-disabled` - [state] For disabled-state button styles (themes)
 
-N.B. You must also include the `disabled` attribute on `button` and `input`
-elements. For `a` elements, you should remove the `href` attribute and prevent
-JavaScript event handlers from firing.
+N.B. You must also include the `disabled` attribute on `button` elements. For
+`a` elements, you should remove the `href` attribute and prevent JavaScript
+event handlers from firing.
 
 ## Configurable variables
 
@@ -38,8 +38,6 @@ extended by any number of additional modifier and state classes.
 <a class="Button" href="{{url}}">Sign up</a>
 
 <button class="Button Button--default is-disabled" type="button">Close</button>
-
-<input class="Button Button--primary is-pressed" type="submit" value="Submit">
 ```
 
 ### Theming / extending

button.css

@@ -14,47 +14,40 @@
 }
 
 /**
- * The button classes are best applied to links, buttons, and submit inputs.
+ * The button classes are best applied to links and buttons.
  * These components can be used in forms, as calls to action, or as part of the
  * general UI of the site/app.
  *
  * Recommended use:
  *
  * <a class="Button [Button--modifier]" role="button" href="[url]">Button text</a>
  * <button class="Button [Button--modifier]" type="submit">Button text</button>
- * <input class="Button [Button--modifier]" type="submit" value="Button text">
  */
 
 /**
- * 1. Corrects inability to style clickable `input` types in iOS.
- * 2. Normalize `box-sizing` across all elements that this component could be
+ * 1. Normalize `box-sizing` across all elements that this component could be
  *    applied to.
- * 3. Inherit text color from ancestor.
- * 4. Inherit font styles from ancestor.
- * 5. Normalize `line-height`. For `input`, it can't be changed from `normal` in Firefox 4+.
- * 6. Prevent button text from being selectable.
- * 7. Make sure `input` will wrap text across multiple lines.
+ * 2. Inherit text color from ancestor.
+ * 3. Inherit font styles from ancestor.
+ * 4. Prevent button text from being selectable.
  */
 
 .Button {
-  -webkit-appearance: none; /* 1 */
   background: transparent;
   border-color: var(border-color-Button);
   border-style: solid;
   border-width: var(border-width-Button);
-  box-sizing: border-box; /* 2 */
-  color: var(color-Button); /* 3 */
+  box-sizing: border-box; /* 1 */
+  color: var(color-Button); /* 2 */
   cursor: pointer;
   display: inline-block;
-  font: var(font-Button); /* 4 */
-  line-height: normal; /* 6 */
+  font: var(font-Button); /* 3 */
   margin: 0;
   padding: var(padding-Button);
   position: relative;
   text-align: center;
   text-decoration: none;
-  user-select: none; /* 6 */
-  white-space: normal; /* 7 */
+  user-select: none; /* 4 */
 }
 
 /**

test.html

@@ -35,42 +35,36 @@ <h3 class="Test-it">renders inline-block</h3>
     <div class="Test-run" id="renders">
         <a class="Button" role="button" href="#non">Button text</a>
         <button class="Button" type="button">Button text</button>
-        <input class="Button" type="submit" value="Button text">
     </div>
 
     <h3 class="Test-it">inherits font</h3>
     <div class="Test-run" id="fontInheritance">
         <a class="Button" href="#non">Button text</a>
         <button class="Button" type="button">Button text</button>
-        <input class="Button" type="submit" value="Button text">
     </div>
 
     <h3 class="Test-it">inherits text color</h3>
     <div class="Test-run" id="colorInheritance">
         <a class="Button" href="#non">Button text</a>
         <button class="Button" type="button">Button text</button>
-        <input class="Button" type="submit" value="Button text">
     </div>
 
     <h3 class="Test-it">allows text wrapping</h3>
     <div class="Test-run" id="textWrapping">
         <a class="Button" href="#non">Button text</a>
         <button class="Button" type="button">Button text</button>
-        <input class="Button" type="submit" value="Button text">
     </div>
 
     <h3 class="Test-it">is baseline-aligned</h3>
     <div class="Test-run" id="baseline">
         <a class="Button" href="#non">Button text</a>
         <button class="Button" type="button">Button text</button>
-        <input class="Button" type="submit" value="Button text">
     </div>
 
     <h3 class="Test-describe">.Button.is-disabled</h3>
     <h3 class="Test-it">renders disabled</h3>
     <div class="Test-run" id="is-disabled-renders">
         <a class="Button is-disabled">Button text</a>
         <button class="Button is-disabled" type="button" disabled>Button text</button>
-        <input class="Button is-disabled" type="submit" value="Button text" disabled>
     </div>
 </div>