MW UI: Show all permutations of checkboxes in Living Style Guide

* Regular unchecked
* Regular checked (added)
* Disabled unchecked
* Disabled checked

Although you can obviously check and uncheck it yourself, it's easier
for the user to show them the permutations on page load.  Otherwise,
they might not even notice the special check mark image.

Also, fix a couple unrelated typos in buttons.less.

Change-Id: I17b63eeb424e23d1c3b9ce9ab8bfaa66b5bf4a46

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 6490996..89a564a 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -188,7 +188,7 @@
 
        // Quiet buttons
        //
-       // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons.
+       // Use quiet buttons when they are less important and alongside other constructive/progressive/destructive buttons.
        // Use of quiet buttons is not recommended on mobile/tablet due to lack of hover state.
        //
        // Markup:

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index 826c82f..a177940 100644 (file)
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -14,7 +14,13 @@
 //   <input type="checkbox" id="kss-example-5"><label for="kss-example-5">Standard checkbox</label>
 // </div>
 // <div class="mw-ui-checkbox">
-//   <input type="checkbox" id="kss-example-5-2" disabled><label for="kss-example-5-2">Disabled checkbox</label>
+//   <input type="checkbox" id="kss-example-5-checked" checked><label for="kss-example-5-checked">Standard checked checkbox</label>
+// </div>
+// <div class="mw-ui-checkbox">
+//   <input type="checkbox" id="kss-example-5-disabled" disabled><label for="kss-example-5-disabled">Disabled checkbox</label>
+// </div>
+// <div class="mw-ui-checkbox">
+//   <input type="checkbox" id="kss-example-5-disabled-checked" disabled checked><label for="kss-example-5-disabled-checked">Disabled checked checkbox</label>
 // </div>
 //
 // Styleguide 5.