@react-md/core 1.0.0-next.6 → 1.0.0-next.8

package/src/form/__tests__/__snapshots__/FileInput.tsx.snap

@@ -12,7 +12,7 @@ exports[`FileInput should apply the correct styling, HTMLAttributes, and allow a
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -37,7 +37,7 @@ exports[`FileInput should apply the correct styling, HTMLAttributes, and allow a
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -63,7 +63,7 @@ exports[`FileInput should render as an icon button unless children are provided
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -87,7 +87,7 @@ exports[`FileInput should render as an icon button unless children are provided
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -165,7 +165,7 @@ exports[`FileInput should support all the  button themes 1`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -189,7 +189,7 @@ exports[`FileInput should support all the  button themes 2`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -213,7 +213,7 @@ exports[`FileInput should support all the  button themes 3`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -237,7 +237,7 @@ exports[`FileInput should support all the  button themes 4`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -261,7 +261,7 @@ exports[`FileInput should support all the  button themes 5`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -285,7 +285,7 @@ exports[`FileInput should support all the  button themes 6`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -309,7 +309,7 @@ exports[`FileInput should support all the  button themes 7`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -333,7 +333,7 @@ exports[`FileInput should support all the  button themes 8`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -357,7 +357,7 @@ exports[`FileInput should support all the  button themes 9`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -381,7 +381,7 @@ exports[`FileInput should support all the  button themes 10`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -405,7 +405,7 @@ exports[`FileInput should support all the  button themes 11`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -429,7 +429,7 @@ exports[`FileInput should support all the  button themes 12`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -453,7 +453,7 @@ exports[`FileInput should support all the  button themes 13`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -477,7 +477,7 @@ exports[`FileInput should support all the  button themes 14`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -501,7 +501,7 @@ exports[`FileInput should support all the  button themes 15`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -525,7 +525,7 @@ exports[`FileInput should support all the  button themes 16`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -549,7 +549,7 @@ exports[`FileInput should support all the  button themes 17`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -573,7 +573,7 @@ exports[`FileInput should support all the  button themes 18`] = `
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Upload
   </span>
@@ -598,7 +598,7 @@ exports[`FileInput should update the default SrOnly text to be phoneOnly when th
     file_upload
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-phone-sr-only"
+    class="rmd-phone-sr-only"
   >
     Upload
   </span>

package/src/form/__tests__/__snapshots__/MenuItemCheckbox.tsx.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuItemCheckbox should allow for a custom unchecked and checked icon 1`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-checkbox-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r1:"
+  role="menuitemcheckbox"
+  tabindex="-1"
+>
+  <span
+    class="rmd-list-item__text"
+  >
+    Checkbox
+  </span>
+  <span
+    class="rmd-checkbox rmd-input-toggle rmd-icon--after rmd-list-item__addon rmd-menu-item-input-toggle__icon"
+  />
+</li>
+`;
+
+exports[`MenuItemCheckbox should allow for a custom unchecked and checked icon 2`] = `
+<li
+  aria-checked="true"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-checkbox-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r1:"
+  role="menuitemcheckbox"
+  tabindex="-1"
+>
+  <span
+    class="rmd-list-item__text"
+  >
+    Checkbox
+  </span>
+  <span
+    class="rmd-checkbox rmd-input-toggle rmd-input-toggle--active rmd-icon--after rmd-list-item__addon rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      data-testid="checked"
+    />
+  </span>
+</li>
+`;
+
+exports[`MenuItemCheckbox should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-checkbox-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r0:"
+  role="menuitemcheckbox"
+  tabindex="-1"
+>
+  <span
+    class="rmd-checkbox rmd-input-toggle rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons"
+    >
+      check_box_outline_blank
+    </span>
+  </span>
+  <span
+    class="rmd-list-item__text"
+  >
+    Checkbox
+  </span>
+</li>
+`;
+
+exports[`MenuItemCheckbox should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-checkbox-menu-item rmd-menu-item-input-toggle custom-class-name"
+  id="menu-item-:r0:"
+  role="menuitemcheckbox"
+  style="color: white;"
+  tabindex="-1"
+>
+  <span
+    class="rmd-checkbox rmd-input-toggle rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons"
+    >
+      check_box_outline_blank
+    </span>
+  </span>
+  <span
+    class="rmd-list-item__text"
+  >
+    Checkbox
+  </span>
+</li>
+`;

package/src/form/__tests__/__snapshots__/MenuItemRadio.tsx.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuItemRadio should allow for a custom unchecked and checked icon 1`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-radio-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r1:"
+  role="menuitemradio"
+  tabindex="-1"
+>
+  <span
+    class="rmd-list-item__text"
+  >
+    Radio
+  </span>
+  <span
+    class="rmd-radio rmd-input-toggle rmd-icon--after rmd-list-item__addon rmd-menu-item-input-toggle__icon"
+  />
+</li>
+`;
+
+exports[`MenuItemRadio should allow for a custom unchecked and checked icon 2`] = `
+<li
+  aria-checked="true"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-radio-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r1:"
+  role="menuitemradio"
+  tabindex="-1"
+>
+  <span
+    class="rmd-list-item__text"
+  >
+    Radio
+  </span>
+  <span
+    class="rmd-radio rmd-input-toggle rmd-input-toggle--active rmd-icon--after rmd-list-item__addon rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      data-testid="checked"
+    />
+  </span>
+</li>
+`;
+
+exports[`MenuItemRadio should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-radio-menu-item rmd-menu-item-input-toggle"
+  id="menu-item-:r0:"
+  role="menuitemradio"
+  tabindex="-1"
+>
+  <span
+    class="rmd-radio rmd-input-toggle rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons"
+    >
+      radio_button_unchecked
+    </span>
+  </span>
+  <span
+    class="rmd-list-item__text"
+  >
+    Radio
+  </span>
+</li>
+`;
+
+exports[`MenuItemRadio should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<li
+  aria-checked="false"
+  class="rmd-list-item rmd-list-item--medium rmd-interaction-surface rmd-radio-menu-item rmd-menu-item-input-toggle custom-class-name"
+  id="menu-item-:r0:"
+  role="menuitemradio"
+  style="color: white;"
+  tabindex="-1"
+>
+  <span
+    class="rmd-radio rmd-input-toggle rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-menu-item-input-toggle__icon"
+  >
+    <span
+      aria-hidden="true"
+      class="rmd-icon rmd-icon--font material-icons"
+    >
+      radio_button_unchecked
+    </span>
+  </span>
+  <span
+    class="rmd-list-item__text"
+  >
+    Radio
+  </span>
+</li>
+`;

package/src/form/_form.scss

@@ -271,6 +271,7 @@ $variables: (
   focus-color,
   addon-top,
   addon-margin-top,
+  addon-left-offset,
   label-floating-top,
   label-left-offset,
   label-top-offset,
@@ -331,10 +332,12 @@ $variables: (
       text-field-hover-border-color,
       $text-field-light-hover-border-color
     );
-    @include set-var(
-      text-field-filled-color,
-      $text-field-light-filled-background-color
-    );
+    @if not $disable-text-field-filled-theme {
+      @include set-var(
+        text-field-filled-color,
+        $text-field-light-filled-background-color
+      );
+    }
     @if not $disable-switch {
       @include set-var(
         switch-track-background-color,
@@ -382,10 +385,12 @@ $variables: (
       text-field-hover-border-color,
       $text-field-dark-hover-border-color
     );
-    @include set-var(
-      text-field-filled-color,
-      $text-field-dark-filled-background-color
-    );
+    @if not $disable-text-field-filled-theme {
+      @include set-var(
+        text-field-filled-color,
+        $text-field-dark-filled-background-color
+      );
+    }
     @if not $disable-switch {
       @include set-var(
         switch-track-background-color,
@@ -615,7 +620,6 @@ $variables: (
 @mixin text-field-container-styles($disable-layer: false) {
   @include utils.optional-layer(form, $disable-layer) {
     .rmd-text-field-container {
-      @include set-var(label-left-offset, get-var(text-field-padding-left));
       @include use-var(height, text-field-height);
 
       align-items: center;
@@ -684,13 +688,20 @@ $variables: (
             text-field-padding-right,
             $text-field-outlined-padding
           );
-          @include set-var(label-top-offset, -50%);
-          @include set-var(label-active-padding, 0 $label-floating-padding);
-          @include set-var(
-            label-active-background-color,
-            theme.theme-get-var(background-color)
-          );
           @include use-var(border-color, text-field-border-color);
+          @if not $disable-text-field-addon {
+            @include set-var(addon-left-offset, $text-field-outlined-padding);
+          }
+
+          @if not $disable-floating-label {
+            @include set-var(label-left-offset, $text-field-outlined-padding);
+            @include set-var(label-top-offset, -50%);
+            @include set-var(label-active-padding, 0 $label-floating-padding);
+            @include set-var(
+              label-active-background-color,
+              theme.theme-get-var(background-color)
+            );
+          }
 
           border-radius: $text-field-border-radius;
           border-style: solid;
@@ -738,6 +749,17 @@ $variables: (
             text-field-padding-right,
             $text-field-filled-padding
           );
+          @if not $disable-floating-label {
+            @include set-var(
+              label-left-offset,
+              $text-field-filled-padding + $label-floating-padding
+            );
+          }
+
+          @if not $disable-text-field-addon {
+            @include set-var(addon-left-offset, $text-field-filled-padding);
+          }
+
           @include use-var(background-color, text-field-filled-color);
         }
       }
@@ -1196,7 +1218,7 @@ $variables: (
       // `.rmd-text-field-container` which would prevent these styles from being
       // applied
       &--before {
-        @include utils.auto-rtl(left, get-var(label-left-offset));
+        @include utils.auto-rtl(left, get-var(addon-left-offset));
       }
 
       &--after {
@@ -1989,6 +2011,7 @@ $variables: (
     @if not $disable-text-field-addon {
       @include set-var(addon-top, auto);
       @include set-var(addon-margin-top, 0px);
+      @include set-var(addon-left-offset, 0px);
     }
 
     @if not $disable-switch {
@@ -2041,96 +2064,95 @@ $variables: (
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(form, $disable-layer) {
-    }
-
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+      @include theme.default-system-theme {
+        @include use-dark-theme;
+      }
 
-    @if not $disable-fieldset {
-      .rmd-fieldset {
-        &--unstyled {
-          border: 0;
-          margin: 0;
-          min-width: 0; // just so it can shrink correctly in flex or grid
-          padding: 0;
-        }
+      @if not $disable-fieldset {
+        .rmd-fieldset {
+          &--unstyled {
+            border: 0;
+            margin: 0;
+            min-width: 0; // just so it can shrink correctly in flex or grid
+            padding: 0;
+          }
 
-        &--full-width {
-          flex: 1 1 auto;
-          width: 100%;
+          &--full-width {
+            flex: 1 1 auto;
+            width: 100%;
+          }
         }
       }
-    }
 
-    @if not $disable-label {
-      @include label-styles(true);
-    }
+      @if not $disable-label {
+        @include label-styles(true);
+      }
 
-    @if not $disable-file-input {
-      @include file-input-styles(true);
-    }
+      @if not $disable-file-input {
+        @include file-input-styles(true);
+      }
 
-    @if not $disable-message {
-      @include form-message-styles(true);
-    }
+      @if not $disable-message {
+        @include form-message-styles(true);
+      }
 
-    @if not $_disable-text-field-container {
-      @include text-field-container-styles(true);
-    }
+      @if not $_disable-text-field-container {
+        @include text-field-container-styles(true);
+      }
 
-    @if not
-      $disable-text-field or not
-      $disable-password or not
-      $disable-textarea
-    {
-      @include text-field-styles(true);
-    }
+      @if not
+        $disable-text-field or not
+        $disable-password or not
+        $disable-textarea
+      {
+        @include text-field-styles(true);
+      }
 
-    @if not $disable-password {
-      @include password-styles(true);
-    }
+      @if not $disable-password {
+        @include password-styles(true);
+      }
 
-    @if not $disable-textarea {
-      @include textarea-container-styles(true);
-      @include textarea-styles(true);
-    }
+      @if not $disable-textarea {
+        @include textarea-container-styles(true);
+        @include textarea-styles(true);
+      }
 
-    @if not $disable-select {
-      @include select-styles(true);
-    }
+      @if not $disable-select {
+        @include select-styles(true);
+      }
 
-    @if not $disable-option {
-      @include option-styles(true);
-    }
+      @if not $disable-option {
+        @include option-styles(true);
+      }
 
-    @if not $disable-native-select {
-      @include native-select-styles(true);
-    }
+      @if not $disable-native-select {
+        @include native-select-styles(true);
+      }
 
-    @if not $disable-text-field-addon {
-      @include text-field-addon-styles(true);
-    }
+      @if not $disable-text-field-addon {
+        @include text-field-addon-styles(true);
+      }
 
-    @if not $disable-checkbox or not $disable-radio or not $disable-switch {
-      @include hidden-input-styles(true);
-      @include input-toggle-styles(true);
-    }
+      @if not $disable-checkbox or not $disable-radio or not $disable-switch {
+        @include hidden-input-styles(true);
+        @include input-toggle-styles(true);
+      }
 
-    @if not $disable-switch {
-      @include switch-styles(true);
-    }
+      @if not $disable-switch {
+        @include switch-styles(true);
+      }
 
-    @if not
-      $disable-menu-item-checkbox or not
-      $disable-menu-item-radio or not
-      $disable-menu-item-switch
-    {
-      @include menu-item-input-toggle-styles(true);
-    }
+      @if not
+        $disable-menu-item-checkbox or not
+        $disable-menu-item-radio or not
+        $disable-menu-item-switch
+      {
+        @include menu-item-input-toggle-styles(true);
+      }
 
-    @if not $disable-slider {
-      @include slider-styles(true);
+      @if not $disable-slider {
+        @include slider-styles(true);
+      }
     }
   }
 }