fix(checkbox): Add --disabled modifier to checkbox root element to prevent hover state (#533)

Author: amsheehan

demos/checkbox.html

@@ -81,6 +81,30 @@ <h2>CSS Only</h2>
         <button type="button" onclick="document.querySelector('.mdc-form-field').classList.toggle('mdc-form-field--align-end');">Toggle Align End</button>
         <button type="button" onclick="document.getElementById('basic-checkbox').disabled = !document.getElementById('basic-checkbox').disabled;">Toggle Disabled</button>
       </section>
+
+      <section>
+        <h2>CSS Only - Disabled</h2>
+        <div class="mdc-form-field">
+          <div class="mdc-checkbox mdc-checkbox--disabled">
+            <input type="checkbox"
+                   id="basic-disabled-checkbox"
+                   class="mdc-checkbox__native-control"
+                   disabled />
+            <div class="mdc-checkbox__background">
+              <svg class="mdc-checkbox__checkmark"
+                   viewBox="0 0 24 24">
+                <path class="mdc-checkbox__checkmark__path"
+                      fill="none"
+                      stroke="white"
+                      d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+              </svg>
+              <div class="mdc-checkbox__mixedmark"></div>
+            </div>
+          </div>
+          <label for="basic-disabled-checkbox" id="basic-disabled-checkbox-label">This is my disabled checkbox</label>
+        </div>
+      </section>
+
       <section>
         <h2>With Javascript</h2>
         <div class="mdc-form-field">

demos/radio.html

@@ -69,6 +69,30 @@ <h2>CSS Only</h2>
         </div>
       </section>
 
+      <section>
+        <h2>CSS Only - Disabled</h2>
+        <div class="mdc-form-field">
+          <div class="mdc-radio mdc-radio--disabled" data-demo-no-js>
+            <input class="mdc-radio__native-control" type="radio" id="ex2-radio1" checked name="ex2" disabled>
+            <div class="mdc-radio__background">
+              <div class="mdc-radio__outer-circle"></div>
+              <div class="mdc-radio__inner-circle"></div>
+            </div>
+          </div>
+          <label id="ex2-radio1-label" for="ex2-radio1">Radio 1</label>
+        </div>
+        <div class="mdc-form-field">
+          <div class="mdc-radio mdc-radio--disabled" data-demo-no-js>
+            <input class="mdc-radio__native-control" type="radio" id="ex2-radio2" name="ex2" disabled>
+            <div class="mdc-radio__background">
+              <div class="mdc-radio__outer-circle"></div>
+              <div class="mdc-radio__inner-circle"></div>
+            </div>
+          </div>
+          <label id="ex2-radio2-label" for="ex2-radio2">Radio 2</label>
+        </div>
+      </section>
+
       <section>
         <h2>With Javascript</h2>
         <div class="mdc-form-field">

packages/mdc-checkbox/README.md

@@ -63,6 +63,30 @@ easily position checkboxes and their labels.
 </div>
 ```
 
+#### Disabled Checkboxes
+
+```html
+<div class="mdc-checkbox mdc-checkbox--disabled">
+  <input type="checkbox"
+         id="basic-disabled-checkbox"
+         class="mdc-checkbox__native-control"
+         disabled />
+  <div class="mdc-checkbox__background">
+    <svg class="mdc-checkbox__checkmark"
+         viewBox="0 0 24 24">
+      <path class="mdc-checkbox__checkmark__path"
+            fill="none"
+            stroke="white"
+            d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+    </svg>
+    <div class="mdc-checkbox__mixedmark"></div>
+  </div>
+</div>
+<label for="basic-disabled-checkbox" id="basic-disabled-checkbox-label">This is my disabled checkbox</label>
+```
+
+Note that `mdc-checkbox--disabled` is necessary on the root element to prevent hover states from activating.
+
 ### Using the JS Component
 
 MDC Checkbox ships with a Component / Foundation combo which progressively enhances the checkbox

packages/mdc-checkbox/mdc-checkbox.scss

@@ -252,6 +252,11 @@ fieldset:disabled .mdc-checkbox__native-control,
   }
 }
 
+.mdc-checkbox--disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
 .mdc-checkbox--upgraded {
   .mdc-checkbox__background,
   .mdc-checkbox__checkmark,

packages/mdc-radio/README.md

@@ -48,7 +48,8 @@ npm install --save @material/radio
 ```
 
 Note that `mdc-radio--disabled` is necessary on the root element in order to avoid having the ripple
-elements intercept pointer events when using JS.
+elements intercept pointer events when using JS. When using the CSS-only variation, this is also
+necessary to prevent hover states from activating.
 
 ### Using the JS Component