@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/src/progress/__tests__/__snapshots__/CircularProgress.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`CircularProgress should allow the animation to be simplified when the disableShrink prop is enabled 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -24,6 +25,7 @@ exports[`CircularProgress should allow the animation to be simplified when the d
 
 exports[`CircularProgress should allow the animation to be simplified when the disableShrink prop is enabled 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="100"
@@ -48,6 +50,7 @@ exports[`CircularProgress should allow the animation to be simplified when the d
 
 exports[`CircularProgress should allow the transition to be disabled for determinate progress bars 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -72,6 +75,7 @@ exports[`CircularProgress should allow the transition to be disabled for determi
 
 exports[`CircularProgress should allow the transition to be disabled for determinate progress bars 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -95,6 +99,7 @@ exports[`CircularProgress should allow the transition to be disabled for determi
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -117,6 +122,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color custom-class-name"
@@ -140,6 +146,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -164,6 +171,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -189,6 +197,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should be able to render as a dense size 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--dense rmd-circular-progress--centered rmd-primary-color"
@@ -211,6 +220,7 @@ exports[`CircularProgress should be able to render as a dense size 1`] = `
 
 exports[`CircularProgress should be able to render as a dense size 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--dense rmd-primary-color"
@@ -233,6 +243,7 @@ exports[`CircularProgress should be able to render as a dense size 2`] = `
 
 exports[`CircularProgress should be able to render as any of the theme colors 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -255,6 +266,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 1`
 
 exports[`CircularProgress should be able to render as any of the theme colors 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-secondary-color"
@@ -277,6 +289,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 2`
 
 exports[`CircularProgress should be able to render as any of the theme colors 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-warning-color"
@@ -299,6 +312,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 3`
 
 exports[`CircularProgress should be able to render as any of the theme colors 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-success-color"
@@ -321,6 +335,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 4`
 
 exports[`CircularProgress should be able to render as any of the theme colors 5`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-error-color"
@@ -343,6 +358,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 5`
 
 exports[`CircularProgress should be able to render as any of the theme colors 6`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered"
@@ -365,6 +381,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 6`
 
 exports[`CircularProgress should default to being centered but can be removed by enabling the disableCentered prop 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -387,6 +404,7 @@ exports[`CircularProgress should default to being centered but can be removed by
 
 exports[`CircularProgress should default to being centered but can be removed by enabling the disableCentered prop 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-primary-color"
@@ -409,6 +427,7 @@ exports[`CircularProgress should default to being centered but can be removed by
 
 exports[`CircularProgress should render as a determinate progress bar when the value is provided 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -433,6 +452,7 @@ exports[`CircularProgress should render as a determinate progress bar when the v
 
 exports[`CircularProgress should render as a determinate progress bar when the value is provided 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"
@@ -457,6 +477,7 @@ exports[`CircularProgress should render as a determinate progress bar when the v
 
 exports[`CircularProgress should support customizing the svg through the radio, center, and dashoffset props even though I don't know what they do 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"

package/src/progress/__tests__/__snapshots__/LinearProgress.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`LinearProgress should allow the transition to be disabled for determinate progress bars 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -18,6 +19,7 @@ exports[`LinearProgress should allow the transition to be disabled for determina
 
 exports[`LinearProgress should allow the transition to be disabled for determinate progress bars 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -33,6 +35,7 @@ exports[`LinearProgress should allow the transition to be disabled for determina
 
 exports[`LinearProgress should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -47,6 +50,7 @@ exports[`LinearProgress should apply the correct styling, HTMLAttributes, and al
 
 exports[`LinearProgress should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color custom-class-name"
@@ -62,6 +66,7 @@ exports[`LinearProgress should apply the correct styling, HTMLAttributes, and al
 
 exports[`LinearProgress should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -78,6 +83,7 @@ exports[`LinearProgress should apply the correct styling, HTMLAttributes, and al
 
 exports[`LinearProgress should be able to render as any of the theme colors 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -92,6 +98,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 1`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-secondary-color"
@@ -106,6 +113,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 2`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-warning-color"
@@ -120,6 +128,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 3`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-success-color"
@@ -134,6 +143,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 4`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 5`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-error-color"
@@ -148,6 +158,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 5`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 6`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate"
@@ -162,6 +173,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 6`]
 
 exports[`LinearProgress should be able to render vertically 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -177,6 +189,7 @@ exports[`LinearProgress should be able to render vertically 1`] = `
 
 exports[`LinearProgress should be able to render vertically 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -192,6 +205,7 @@ exports[`LinearProgress should be able to render vertically 2`] = `
 
 exports[`LinearProgress should be able to render vertically 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -207,6 +221,7 @@ exports[`LinearProgress should be able to render vertically 3`] = `
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -221,6 +236,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -236,6 +252,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"
@@ -253,6 +270,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"
@@ -270,6 +288,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should render as a determinate progress bar when the value is provided 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -286,6 +305,7 @@ exports[`LinearProgress should render as a determinate progress bar when the val
 
 exports[`LinearProgress should render as a determinate progress bar when the value is provided 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"

package/src/progress/_progress.scss

@@ -206,45 +206,27 @@ $linear-vertical-reverse-short-styles: (
   ),
 ) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-progress-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-progress-color,
-    value: $color,
-  ),
-  circular-size: (
-    var: --rmd-progress-circular-size,
-    value: $circular-size,
-  ),
-  circular-stroke-width: (
-    var: --rmd-progress-circular-width,
-    value: $circular-stroke-width,
-  ),
-  linear-size: (
-    var: --rmd-progress-linear-size,
-    value: $linear-size,
-  ),
+$variables: (
+  background-color,
+  color,
+  circular-size,
+  circular-stroke-width,
+  linear-size
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "progress var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "progress");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "progress var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "progress")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -566,12 +548,30 @@ $var-lookup: (
   }
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-circular {
-    @include _circular-progress;
+    @include set-var(circular-size, $circular-size);
+    @include set-var(circular-stroke-width, $circular-stroke-width);
   }
 
   @if not $disable-linear {
-    @include _linear-progress;
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(linear-size, $linear-size);
+  }
+}
+
+@mixin styles($disable-layer: false) {
+  @include utils.optional-layer(
+    overlay,
+    $disable-layer or ($disable-circular and $disable-linear)
+  ) {
+    @if not $disable-circular {
+      @include _circular-progress;
+    }
+
+    @if not $disable-linear {
+      @include _linear-progress;
+    }
   }
 }

package/src/responsive-item/_responsive-item.scss

@@ -58,134 +58,136 @@ $disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
   padding-bottom: math.percentage(math.div($height, $width));
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @if not $disable-item {
-      .rmd-responsive-item {
-        @include responsive-item;
-
-        @if not $disable-scale-to-container {
-          &--scale {
-            @include scale-to-container;
+    @include utils.optional-layer(responsive-item, $disable-layer) {
+      @if not $disable-item {
+        .rmd-responsive-item {
+          @include responsive-item;
+
+          @if not $disable-scale-to-container {
+            &--scale {
+              @include scale-to-container;
+            }
           }
-        }
 
-        @if not $disable-aspect-ratios {
-          &--aspect-ratio {
-            @include forced-aspect-ratio;
+          @if not $disable-aspect-ratios {
+            &--aspect-ratio {
+              @include forced-aspect-ratio;
+            }
           }
         }
       }
-    }
 
-    .rmd-responsive-item-container {
-      display: inline-block;
-      position: relative;
+      .rmd-responsive-item-container {
+        display: inline-block;
+        position: relative;
 
-      @if not $disable-auto {
-        &--auto {
-          @each $selector in $selectors {
-            #{$selector} {
-              @include responsive-item;
+        @if not $disable-auto {
+          &--auto {
+            @each $selector in $selectors {
+              #{$selector} {
+                @include responsive-item;
+              }
             }
           }
-        }
 
-        @if not $disable-auto-scale {
-          &--auto-scale {
-            @each $selector in $selectors {
-              #{$selector} {
-                @include scale-to-container;
+          @if not $disable-auto-scale {
+            &--auto-scale {
+              @each $selector in $selectors {
+                #{$selector} {
+                  @include scale-to-container;
+                }
               }
             }
           }
         }
-      }
 
-      @if not $disable-full-width {
-        &--full-width {
-          display: block;
-          width: 100%;
+        @if not $disable-full-width {
+          &--full-width {
+            display: block;
+            width: 100%;
+          }
         }
-      }
 
-      @if not $disable-aspect-ratios {
-        &--aspect-ratio {
-          display: block;
-          height: 0;
-          overflow: hidden;
-          padding: 0;
+        @if not $disable-aspect-ratios {
+          &--aspect-ratio {
+            display: block;
+            height: 0;
+            overflow: hidden;
+            padding: 0;
 
-          @each $selector in $selectors {
-            #{$selector} {
-              @include forced-aspect-ratio;
+            @each $selector in $selectors {
+              #{$selector} {
+                @include forced-aspect-ratio;
+              }
             }
           }
-        }
 
-        @each $suffix, $ratio-list in $aspect-ratios {
-          &--#{$suffix} {
-            @include aspect-ratio(nth($ratio-list, 1), nth($ratio-list, 2));
+          @each $suffix, $ratio-list in $aspect-ratios {
+            &--#{$suffix} {
+              @include aspect-ratio(nth($ratio-list, 1), nth($ratio-list, 2));
+            }
           }
         }
       }
-    }
 
-    @if not $disable-overlay {
-      .rmd-responsive-item-overlay {
-        background-color: $background-color;
-        color: $color;
-        padding: $overlay-padding;
-        position: absolute;
-        z-index: 0;
-
-        @if not $disable-overlay-top {
-          &--top {
-            inset: 0 0 auto;
+      @if not $disable-overlay {
+        .rmd-responsive-item-overlay {
+          background-color: $background-color;
+          color: $color;
+          padding: $overlay-padding;
+          position: absolute;
+          z-index: 0;
+
+          @if not $disable-overlay-top {
+            &--top {
+              inset: 0 0 auto;
+            }
           }
-        }
 
-        @if not $disable-overlay-bottom {
-          &--bottom {
-            inset: auto 0 0;
+          @if not $disable-overlay-bottom {
+            &--bottom {
+              inset: auto 0 0;
+            }
           }
-        }
 
-        &--horizontal {
-          inset: 0 auto;
-          width: $overlay-horizontal-width;
-        }
+          &--horizontal {
+            inset: 0 auto;
+            width: $overlay-horizontal-width;
+          }
 
-        @if not $disable-overlay-left {
-          &--left {
-            @include utils.auto-rtl(left, 0);
+          @if not $disable-overlay-left {
+            &--left {
+              @include utils.auto-rtl(left, 0);
+            }
           }
-        }
 
-        @if not $disable-overlay-right {
-          &--right {
-            @include utils.auto-rtl(right, 0);
+          @if not $disable-overlay-right {
+            &--right {
+              @include utils.auto-rtl(right, 0);
+            }
           }
-        }
 
-        @if not $disable-overlay-middle {
-          &--middle {
-            inset: auto 0 50%;
-            transform: translate3d(0, 50%, 0);
+          @if not $disable-overlay-middle {
+            &--middle {
+              inset: auto 0 50%;
+              transform: translate3d(0, 50%, 0);
+            }
           }
-        }
 
-        @if not $disable-overlay-center {
-          &--center {
-            inset: 0 50% 0 auto;
-            transform: translate3d(50%, 0, 0);
+          @if not $disable-overlay-center {
+            &--center {
+              inset: 0 50% 0 auto;
+              transform: translate3d(50%, 0, 0);
+            }
           }
-        }
 
-        @if not $disable-overlay-absolute-center {
-          &--absolute-center {
-            inset: auto 50% 50% auto;
-            transform: translate3d(50%, 50%, 0);
+          @if not $disable-overlay-absolute-center {
+            &--absolute-center {
+              inset: auto 50% 50% auto;
+              transform: translate3d(50%, 50%, 0);
+            }
           }
         }
       }