Update checkbox and radio guidelines

Author: christianmemije

kolibri/core/assets/src/views/k-checkbox/index.vue

@@ -60,7 +60,7 @@
 <script>
 
   /**
-    * A checkbox
+    * Used for selection
     */
   export default {
     name: 'k-checkbox',

kolibri/core/assets/src/views/k-radio/index.vue

@@ -47,7 +47,7 @@
 <script>
 
   /**
-   * A radio button
+   * Used to display all options
    */
   export default {
     name: 'k-radio',

kolibri/plugins/style_guide/assets/src/views/content/checkboxes/index.vue

@@ -11,21 +11,16 @@
     <h2>Guidelines</h2>
     <h3>Usage</h3>
     <ul>
-      <li>Should only be used in tables and lists</li>
-      <li>Selected state of checkboxes should denote positives (yes/select/)</li>
-      <li>Should not be used as filters in tables or lists</li>
+      <li>Should only be used in tables, lists, and forms.</li>
+      <li>Selected state of checkboxes should denote positives (yes/select)</li>
+      <li>Should not be used to filter tables or lists</li>
       <li>Should not be nested</li>
-
     </ul>
 
     <h3>Style</h3>
     <ul>
-      <li>Selected state is the action color</li>
-      <li>Indeterminate state is medium grey</li>
-      <li>Unselected state are dark grey</li>
-      <li>Disabled state is </li>
       <li>Always left-aligned</li>
-      <li>vertically stacked</li>
+      <li>Vertically stacked</li>
     </ul>
 
     <h3>Language</h3>

kolibri/plugins/style_guide/assets/src/views/content/radios/index.vue

@@ -9,59 +9,24 @@
     <vue-example :code="example" />
 
     <h2>Guidelines</h2>
-    <p>
-      In particular, radio buttons aid the user when they need to see all
-      available options side-by-side
-    </p>
-    <p>
-      If it is not necessary to see all available options, a dropdown may be
-      used
-    </p>
-    <p>
-      Selected state of controls generally denote "positives"
-      (yes/selected/etc.)
-    </p>
-
-    <h3>Do not</h3>
+    <h3>Usage</h3>
     <ul>
-      <li>
-        Use radio buttons as a filter in a table or a list
-      </li>
-      <li>
-        Nest radio buttons
-      </li>
+      <li>Should be used when all options must be visible. If not, use a select.</li>
+      <li>Selected state of radios should denote positives (yes/selected)</li>
+      <li>Should not be used to filter tables or lists</li>
+      <li>Should not be nested</li>
     </ul>
 
     <h3>Style</h3>
-    <p>
-      Kolibri utilizes the default styles + padding from Keen UI
-    </p>
-    <p>
-      Selected option is the action color, other available options are dark
-      grey
-    </p>
-    <p>
-      Where possible, avoid using icons with radio buttons. If necessary, the
-      icon should sit within the label area, pushing the label to the right.
-    </p>
-
-    <h3>Labels & option text:</h3>
-    <p>
-      Keep these short, concise, and easy for the user to understand. Should
-      not be structured as a sentence.
-    </p>
-
-    <h3>Layout</h3>
-    <p>
-      Radio buttons are always left-aligned
-    </p>
-    <p>
-      No inset padding, radio buttons left-align with the content of their
-      container
-    </p>
-    <p>
-      Radio buttons are vertically stacked
-    </p>ls should be short and concise. Should not be sentences.
+    <ul>
+      <li>Always left-aligned</li>
+      <li>Vertically stacked</li>
+    </ul>
+
+    <h3>Language</h3>
+    <ul>
+      <li>Labels should be short and concise. Should not be sentences.</li>
+    </ul>
 
   </page-template>