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

package/src/dialog/__tests__/__snapshots__/DialogContent.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogContent should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<div
+  class="rmd-dialog__content rmd-dialog__content--padded"
+  data-testid="content"
+/>
+`;
+
+exports[`DialogContent should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<div
+  class="rmd-dialog__content rmd-dialog__content--padded custom-class-name"
+  data-testid="content"
+  style="color: white;"
+/>
+`;
+
+exports[`DialogContent should support disabling padding 1`] = `
+<div
+  class="rmd-dialog__content rmd-dialog__content--padded"
+  data-testid="content"
+>
+  Content
+</div>
+`;
+
+exports[`DialogContent should support disabling padding 2`] = `
+<div
+  class="rmd-dialog__content"
+  data-testid="content"
+>
+  Content
+</div>
+`;
+
+exports[`dialogContent class name utility should be callable with no arguments 1`] = `"rmd-dialog__content rmd-dialog__content--padded"`;

package/src/dialog/__tests__/__snapshots__/DialogFooter.tsx.snap

@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogFooter should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<footer
+  class="rmd-dialog__footer rmd-dialog__footer--flex rmd-dialog__footer--end"
+  data-testid="footer"
+/>
+`;
+
+exports[`DialogFooter should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<footer
+  class="rmd-dialog__footer rmd-dialog__footer--flex rmd-dialog__footer--end custom-class-name"
+  data-testid="footer"
+  style="color: white;"
+/>
+`;
+
+exports[`DialogFooter should support different alignments 1`] = `
+<footer
+  class="rmd-dialog__footer rmd-dialog__footer--flex rmd-dialog__footer--end"
+  data-testid="footer"
+>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 1
+    </span>
+  </button>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 2
+    </span>
+  </button>
+</footer>
+`;
+
+exports[`DialogFooter should support different alignments 2`] = `
+<footer
+  class="rmd-dialog__footer"
+  data-testid="footer"
+>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 1
+    </span>
+  </button>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 2
+    </span>
+  </button>
+</footer>
+`;
+
+exports[`DialogFooter should support different alignments 3`] = `
+<footer
+  class="rmd-dialog__footer rmd-dialog__footer--flex rmd-dialog__footer--start"
+  data-testid="footer"
+>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 1
+    </span>
+  </button>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 2
+    </span>
+  </button>
+</footer>
+`;
+
+exports[`DialogFooter should support different alignments 4`] = `
+<footer
+  class="rmd-dialog__footer rmd-dialog__footer--flex rmd-dialog__footer--end"
+  data-testid="footer"
+>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 1
+    </span>
+  </button>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 2
+    </span>
+  </button>
+</footer>
+`;
+
+exports[`DialogFooter should support different alignments 5`] = `
+<footer
+  class="rmd-dialog__footer rmd-dialog__footer--flex rmd-dialog__footer--between"
+  data-testid="footer"
+>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 1
+    </span>
+  </button>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 2
+    </span>
+  </button>
+</footer>
+`;
+
+exports[`DialogFooter should support different alignments 6`] = `
+<footer
+  class="rmd-dialog__footer rmd-dialog__footer--flex rmd-dialog__footer--flex-v rmd-dialog__footer--start"
+  data-testid="footer"
+>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 1
+    </span>
+  </button>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 2
+    </span>
+  </button>
+</footer>
+`;
+
+exports[`DialogFooter should support different alignments 7`] = `
+<footer
+  class="rmd-dialog__footer rmd-dialog__footer--flex rmd-dialog__footer--flex-v rmd-dialog__footer--end"
+  data-testid="footer"
+>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 1
+    </span>
+  </button>
+  <button
+    class="rmd-button rmd-button--text rmd-interaction-surface"
+    type="button"
+  >
+    <span>
+      Button 2
+    </span>
+  </button>
+</footer>
+`;
+
+exports[`dialogFooter class name utility should be callable with no arguments 1`] = `"rmd-dialog__footer rmd-dialog__footer--flex rmd-dialog__footer--end"`;

package/src/dialog/__tests__/__snapshots__/DialogHeader.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogHeader should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<div
+  class="rmd-dialog__header"
+  data-testid="header"
+/>
+`;
+
+exports[`DialogHeader should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<div
+  class="rmd-dialog__header custom-class-name"
+  data-testid="header"
+  style="color: white;"
+/>
+`;
+
+exports[`dialogHeader class name utility should be callable with no arguments 1`] = `"rmd-dialog__header"`;

package/src/dialog/__tests__/__snapshots__/DialogTitle.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogTitle should allow for the Typography component defaults to be overwritten 1`] = `
+<h3
+  class="rmd-typography rmd-typography--caption rmd-no-margin-bottom rmd-dialog__title"
+>
+  Title
+</h3>
+`;
+
+exports[`DialogTitle should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<h2
+  class="rmd-typography rmd-typography--headline-4 rmd-no-margin rmd-dialog__title"
+>
+  Title
+</h2>
+`;
+
+exports[`DialogTitle should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<h2
+  class="rmd-typography rmd-typography--headline-4 rmd-no-margin rmd-dialog__title custom-class-name"
+  style="color: white;"
+>
+  Title
+</h2>
+`;

package/src/dialog/_dialog.scss

@@ -7,6 +7,10 @@
 
 $disable-everything: false !default;
 $disable-fixed: false !default;
+$disable-header: false !default;
+$disable-title: false !default;
+$disable-content: false !default;
+$disable-footer: false !default;
 $disable-focus-outline: false !default;
 $disable-footer-flex-vertical: false !default;
 $disable-footer-flex-start: false !default;
@@ -36,71 +40,61 @@ $content-padding: 1.5rem !default;
 
 $footer-padding: 0.5rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-dialog-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-dialog-color,
-    value: $color,
-  ),
-  min-width: (
-    var: --rmd-dialog-min-width,
-    value: $min-width,
-  ),
-  horizontal-margin: (
-    var: --rmd-dialog-h-margin,
-    value: $horizontal-margin,
-  ),
-  vertical-margin: (
-    var: --rmd-dialog-v-margin,
-    value: $vertical-margin,
-  ),
-  z-index: (
-    var: --rmd-dialog-z-index,
-    value: $z-index,
-  ),
-  header-padding: (
-    var: --rmd-dialog-header-padding,
-    value: $header-padding,
-  ),
-  header-padding-bottom: (
-    var: --rmd-dialog-header-padding-bottom,
-    value: $header-padding-bottom,
-  ),
-  content-padding: (
-    var: --rmd-dialog-content-padding,
-    value: $content-padding,
-  ),
-  footer-padding: (
-    var: --rmd-dialog-footer-padding,
-    value: $footer-padding,
-  ),
+$variables: (
+  background-color,
+  color,
+  min-width,
+  horizontal-margin,
+  vertical-margin,
+  z-index,
+  header-padding,
+  header-padding-bottom,
+  content-padding,
+  footer-padding
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "dialog 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, "dialog");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "dialog var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "dialog")}: #{$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(min-width, $min-width);
+    @include set-var(horizontal-margin, $horizontal-margin);
+    @include set-var(vertical-margin, $vertical-margin);
+    @include set-var(z-index, $z-index);
+
+    @if not $disable-header {
+      @include set-var(header-padding, $header-padding);
+      @include set-var(header-padding-bottom, $header-padding-bottom);
+    }
+
+    @if not $disable-content {
+      @include set-var(content-padding, $content-padding);
+    }
+    @if not $disable-footer {
+      @include set-var(footer-padding, $footer-padding);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-dialog-container {
@@ -188,66 +182,74 @@ $var-lookup: (
         }
       }
 
-      &__header {
-        @include use-var(padding, header-padding);
-        @include use-var(padding-bottom, header-padding-bottom);
+      @if not $disable-header {
+        &__header {
+          @include use-var(padding, header-padding);
+          @include use-var(padding-bottom, header-padding-bottom);
 
-        align-items: center;
-        display: flex;
-        flex: 0 0 auto;
+          align-items: center;
+          display: flex;
+          flex: 0 0 auto;
+        }
       }
 
-      &__title {
-        // this makes it so it's easy to add a close button after the title
-        flex: 1 1 auto;
+      @if not $disable-title {
+        &__title {
+          // this makes it so it's easy to add a close button after the title
+          flex: 1 1 auto;
+        }
       }
 
-      &__content {
-        flex: 1 1 auto;
-        overflow: auto;
+      @if not $disable-content {
+        &__content {
+          flex: 1 1 auto;
+          overflow: auto;
 
-        &--padded {
-          @include use-var(padding, content-padding);
+          &--padded {
+            @include use-var(padding, content-padding);
+          }
         }
       }
 
-      &__footer {
-        @include use-var(padding, footer-padding);
-
-        flex: 0 0 auto;
-
-        @if not
-          $disable-footer-flex-vertical or not
-          $disable-footer-flex-start or not
-          $disable-footer-space-between or not
-          $disable-footer-flex-end
-        {
-          &--flex {
-            display: flex;
+      @if not $disable-footer {
+        &__footer {
+          @include use-var(padding, footer-padding);
+
+          flex: 0 0 auto;
+
+          @if not
+            $disable-footer-flex-vertical or not
+            $disable-footer-flex-start or not
+            $disable-footer-space-between or not
+            $disable-footer-flex-end
+          {
+            &--flex {
+              display: flex;
+            }
           }
-        }
 
-        @if not $disable-footer-flex-vertical {
-          &--flex-v {
-            flex-direction: column;
+          @if not $disable-footer-flex-vertical {
+            &--flex-v {
+              flex-direction: column;
+            }
           }
-        }
 
-        @if not $disable-footer-flex-start {
-          &--start {
-            justify-content: flex-start;
+          @if not $disable-footer-flex-start {
+            &--start {
+              justify-content: flex-start;
+            }
           }
-        }
 
-        @if not $disable-footer-space-between {
-          &--between {
-            justify-content: space-between;
+          @if not $disable-footer-space-between {
+            &--between {
+              justify-content: space-between;
+            }
           }
-        }
 
-        @if not $disable-footer-flex-end {
-          &--end {
-            justify-content: flex-end;
+          @if not $disable-footer-flex-end {
+            &--end {
+              justify-content: flex-end;
+            }
           }
         }
       }

package/src/divider/Divider.tsx

@@ -9,7 +9,6 @@ declare module "react" {
     "--rmd-divider-spacing"?: string | number;
     "--rmd-divider-vertical-spacing"?: string | number;
     "--rmd-divider-inset"?: string | number;
-    "--rmd-divider-width"?: string | number;
     "--rmd-divider-max-size"?: string | number;
   }
 }

package/src/divider/__tests__/Divider.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { Divider } from "../Divider.js";
 import { divider } from "../styles.js";
@@ -9,8 +9,8 @@ describe("Divider", () => {
   it("should apply the correct styling, HTML attributes, and allow a ref", () => {
     const ref = createRef<HTMLDivElement>();
 
-    const { getByRole, rerender } = render(<Divider ref={ref} />);
-    const divider = getByRole("separator");
+    const { rerender } = render(<Divider ref={ref} />);
+    const divider = screen.getByRole("separator");
     expect(ref.current).toBeInstanceOf(HTMLHRElement);
     expect(ref.current).toBe(divider);
     expect(divider).toMatchSnapshot();

package/src/divider/_divider.scss

@@ -20,57 +20,29 @@ $dark-theme-color: rgba(colors.$white, 0.12) !default;
 
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
-$var-lookup: (
-  size: (
-    var: --rmd-divider-size,
-    value: $size,
-  ),
-  vertical-size: (
-    var: --rmd-divider-vertical-size,
-    value: $vertical-size,
-  ),
-  color: (
-    var: --rmd-divider-color,
-    value: $color,
-  ),
-  spacing: (
-    var: --rmd-divider-spacing,
-    value: $spacing,
-  ),
-  vertical-spacing: (
-    var: --rmd-divider-vertical-spacing,
-    value: $vertical-spacing,
-  ),
-  inset: (
-    var: --rmd-divider-inset,
-    value: $inset,
-  ),
-  width: (
-    var: --rmd-divider-width,
-    value: $max-size,
-  ),
-  max-size: (
-    var: --rmd-divider-max-size,
-    value: $max-size,
-  ),
+$variables: (
+  size,
+  vertical-size,
+  color,
+  spacing,
+  vertical-spacing,
+  inset,
+  max-size
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "divider 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, "divider");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "divider var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "divider")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -95,6 +67,24 @@ $var-lookup: (
   #{$property}: get-var(size) solid get-var(color);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(size, $size);
+    @include set-var(color, $color);
+    @include set-var(spacing, $spacing);
+    @include set-var(max-size, $max-size);
+
+    @if not $disable-inset {
+      @include set-var(inset, $inset);
+    }
+
+    @if not $disable-vertical {
+      @include set-var(vertical-size, $vertical-size);
+      @include set-var(vertical-spacing, $vertical-spacing);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {
@@ -103,7 +93,7 @@ $var-lookup: (
 
     .rmd-divider {
       @include use-var(margin, spacing);
-      @include use-var(width);
+      @include use-var(width, max-size);
 
       border: get-var(size) solid get-var(color);
       display: block;