@react-md/core 1.0.0-next.1 → 1.0.0-next.2

package/src/snackbar/__tests__/__snapshots__/Snackbar.tsx.snap

@@ -2,75 +2,175 @@
 
 exports[`Snackbar should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <div
-  aria-label="Notifications"
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r0:"
-  role="status"
-/>
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r1:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <div
-  aria-label="Notifications"
   class="rmd-snackbar rmd-snackbar--bottom custom-class-name"
+  data-testid="snackbar"
   id="snackbar-:r0:"
-  role="status"
   style="color: white;"
-/>
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r1:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  data-testid="snackbar"
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 3`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom rmd-snackbar--start"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 4`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom rmd-snackbar--end"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 5`] = `
 <div
   class="rmd-snackbar rmd-snackbar--top"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 6`] = `
 <div
   class="rmd-snackbar rmd-snackbar--top rmd-snackbar--start"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Snackbar should support different positions within the viewport 7`] = `
 <div
   class="rmd-snackbar rmd-snackbar--top rmd-snackbar--end"
-  id="snackbar-:r1:"
-  role="status"
-/>
+  id="snackbar-:r2:"
+>
+  <div
+    class="rmd-toast"
+    id="toast-:r3:"
+    role="status"
+  >
+    <div
+      class="rmd-toast-content"
+    >
+      Toast
+    </div>
+  </div>
+</div>
 `;

package/src/snackbar/__tests__/__snapshots__/ToastManagerProvider.tsx.snap

@@ -3,12 +3,13 @@
 exports[`ToastManagerProvider default toast manager should work without needing to setup a toast manager yourself 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r0:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -22,12 +23,13 @@ exports[`ToastManagerProvider default toast manager should work without needing
 exports[`ToastManagerProvider default toast manager should work without needing to setup a toast manager yourself 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r0:"
-  role="status"
 >
   <div
     class="rmd-toast"
     id="toast-:r1:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -42,6 +44,7 @@ exports[`ToastManagerProvider toast queue should add a toast next in queue if a
 <div
   class="rmd-toast"
   id="toast-:ru:"
+  role="status"
 >
   <div
     class="rmd-toast-content"
@@ -55,6 +58,7 @@ exports[`ToastManagerProvider toast queue should allow a toast to replace the cu
 <div
   class="rmd-toast"
   id="toast-:ri:"
+  role="status"
 >
   <div
     class="rmd-toast-content"
@@ -67,8 +71,8 @@ exports[`ToastManagerProvider toast queue should allow a toast to replace the cu
 exports[`ToastManagerProvider toast queue should not trigger a timeout if the visibleTime is null and set the toast to have an alert role 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1b:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-toast--x rmd-scale-transition--enter rmd-scale-transition--enter-active"
@@ -99,8 +103,8 @@ exports[`ToastManagerProvider toast queue should not trigger a timeout if the vi
 exports[`ToastManagerProvider toast queue should not trigger a timeout if the visibleTime is null and set the toast to have an alert role 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1b:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-toast--x rmd-scale-transition--exit rmd-scale-transition--exit-active"
@@ -131,12 +135,13 @@ exports[`ToastManagerProvider toast queue should not trigger a timeout if the vi
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast"
     id="toast-:r1e:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -147,6 +152,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1f:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -157,6 +163,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1g:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -170,12 +177,13 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast"
     id="toast-:r1f:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -186,6 +194,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast"
     id="toast-:r1g:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -196,6 +205,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1h:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -209,12 +219,13 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 3`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
     id="toast-:r1f:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -225,6 +236,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
     id="toast-:r1g:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -235,6 +247,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast"
     id="toast-:r1h:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -248,12 +261,13 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 4`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
     id="toast-:r1h:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -264,6 +278,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1i:"
+    role="status"
   >
     <div
       class="rmd-toast-content"

package/src/snackbar/_snackbar.scss

@@ -60,43 +60,35 @@ $background-color: theme.get-default-color(
 ) !default;
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-toast-color,
-    value: $color,
-  ),
-  background-color: (
-    var: --rmd-toast-background-color,
-    value: $background-color,
-  ),
-  offset: (
-    var: --rmd-snackbar-offset,
-    value: 0,
-  ),
-);
+$variables: (background-color, color, offset);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "alert 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, "snackbar");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "alert var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "snackbar")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(offset, 0);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-snackbar {

package/src/table/_table.scss

@@ -108,85 +108,37 @@ $sticky-footer-active-styles: $sticky-header-active-styles !default;
 $row-hover-color: interaction.get-var(hover-background-color) !default;
 $row-selected-color: interaction.get-var(selected-background-color) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-table-background-color,
-    value: $background-color,
-  ),
-  border-size: (
-    var: --rmd-table-border-size,
-    value: $border-size,
-  ),
-  border-color: (
-    var: --rmd-table-border-color,
-    value: $border-color,
-  ),
-  header-background-color: (
-    var: --rmd-table-header-background-color,
-    value: $header-background-color,
-  ),
-  cell-color: (
-    var: --rmd-table-cell-color,
-    value: $cell-color,
-  ),
-  cell-height: (
-    var: --rmd-table-cell-height,
-    value: $cell-height,
-  ),
-  cell-horizontal-padding: (
-    var: --rmd-table-cell-horizontal-padding,
-    value: $cell-horizontal-padding,
-  ),
-  cell-vertical-padding: (
-    var: --rmd-table-cell-vertical-padding,
-    value: $cell-vertical-padding,
-  ),
-  header-cell-height: (
-    var: --rmd-table-header-cell-height,
-    value: $cell-header-height,
-  ),
-  hover-color: (
-    var: --rmd-table-hover-color,
-    value: $row-hover-color,
-  ),
-  selected-color: (
-    var: --rmd-table-selected-color,
-    value: $row-selected-color,
-  ),
-  sticky-cell: (
-    var: --rmd-table-sticky-cell,
-    value: $sticky-cell-position,
-  ),
-  sticky-header: (
-    var: --rmd-table-sticky-header,
-    value: $sticky-header-position,
-  ),
-  sticky-footer: (
-    var: --rmd-table-sticky-footer,
-    value: $sticky-footer-position,
-  ),
-  sticky-background-color: (
-    var: --rmd-table-sticky-background-color,
-    value: $sticky-background-color,
-  ),
+$variables: (
+  background-color,
+  border-size,
+  border-color,
+  header-background-color,
+  cell-color,
+  cell-height,
+  cell-horizontal-padding,
+  cell-vertical-padding,
+  header-cell-height,
+  hover-color,
+  selected-color,
+  sticky-cell,
+  sticky-header,
+  sticky-footer,
+  sticky-background-color
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "table 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, "table");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "table var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "table")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -227,6 +179,39 @@ $row-selected-styles: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(header-background-color, $header-background-color);
+    @include set-var(cell-color, $cell-color);
+    @include set-var(cell-height, $cell-height);
+    @include set-var(cell-horizontal-padding, $cell-horizontal-padding);
+    @include set-var(cell-vertical-padding, $cell-vertical-padding);
+    @include set-var(header-cell-height, $cell-header-height);
+    @include set-var(selected-color, $row-selected-color);
+
+    @if not $disable-bordered {
+      @include set-var(border-size, $border-size);
+      @include set-var(border-color, $border-color);
+    }
+    @if not $disable-hoverable {
+      @include set-var(hover-color, $row-hover-color);
+    }
+    @if not $disable-sticky-cell {
+      @include set-var(sticky-cell, $sticky-cell-position);
+    }
+    @if not $disable-sticky-header {
+      @include set-var(sticky-header, $sticky-header-position);
+    }
+    @if not $disable-sticky-footer {
+      @include set-var(sticky-footer, $sticky-footer-position);
+    }
+    @if not $disable-sticky-header or not $disable-sticky-footer {
+      @include set-var(sticky-background-color, $sticky-background-color);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @if not $disable-container {

package/src/tabs/_tabs.scss

@@ -42,45 +42,27 @@ $tablist-scroller-background-color: theme.theme-get-var(
   inherit
 ) !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-tab-color,
-    value: $inactive-color,
-  ),
-  active-color: (
-    var: --rmd-tab-active-color,
-    value: $active-color,
-  ),
-  inactive-color: (
-    var: --rmd-tab-inactive-color,
-    value: $inactive-color,
-  ),
-  disabled-color: (
-    var: --rmd-tab-disabled-color,
-    value: $disabled-color,
-  ),
-  indicator-background: (
-    var: --rmd-tab-indicator-background,
-    value: $indicator-background,
-  ),
+$variables: (
+  color,
+  active-color,
+  inactive-color,
+  disabled-color,
+  indicator-background
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tabs 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, "tab");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tabs var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tab")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -248,6 +230,19 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(color, $inactive-color);
+    @include set-var(active-color, $active-color);
+    @include set-var(inactive-color, $inactive-color);
+    @include set-var(disabled-color, $disabled-color);
+
+    @if not $disable-indicator {
+      @include set-var(indicator-background, $indicator-background);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include tablist-styles;