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

package/src/button/_button.scss

@@ -72,77 +72,35 @@ $floating-positions: (
   ),
 ) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-button-background-color,
-    value: transparent,
-  ),
-  color: (
-    var: --rmd-button-color,
-    value: null,
-  ),
-  border-radius: (
-    var: --rmd-button-border-radius,
-    value: null,
-  ),
-  contained-background-color: (
-    var: --rmd-button-contained-background-color,
-    value: $clear-contained-background-color,
-  ),
-  contained-color: (
-    var: --rmd-button-contained-color,
-    value: $clear-contained-color,
-  ),
-  text-horizontal-padding: (
-    var: --rmd-button-text-horizontal-padding,
-    value: $text-horizontal-padding,
-  ),
-  text-vertical-padding: (
-    var: --rmd-button-text-vertical-padding,
-    value: $text-vertical-padding,
-  ),
-  text-min-height: (
-    var: --rmd-button-text-min-height,
-    value: $text-min-height,
-  ),
-  text-min-width: (
-    var: --rmd-button-text-min-width,
-    value: $text-min-width,
-  ),
-  icon-size: (
-    var: --rmd-button-icon-size,
-    value: $icon-size,
-  ),
-  icon-font-size: (
-    var: --rmd-button-icon-font-size,
-    value: $icon-font-size,
-  ),
-  icon-border-radius: (
-    var: --rmd-button-icon-radius,
-    value: $icon-border-radius,
-  ),
-  fab-offset: (
-    var: --rmd-fab-offset,
-    value: utils.scrollbar-size(),
-  ),
+$variables: (
+  background-color,
+  color,
+  border-radius,
+  contained-background-color,
+  contained-color,
+  text-horizontal-padding,
+  text-vertical-padding,
+  text-min-height,
+  text-min-width,
+  icon-size,
+  icon-font-size,
+  icon-border-radius,
+  fab-offset
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "button 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, "button");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "button var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "button")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -176,6 +134,36 @@ $var-lookup: (
   padding: get-var(text-vertical-padding) get-var(text-horizontal-padding);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, transparent);
+    @if not $disable-contained {
+      @include set-var(
+        contained-background-color,
+        $clear-contained-background-color
+      );
+      @include set-var(contained-color, $clear-contained-color);
+    }
+
+    @if not $disable-text {
+      @include set-var(text-horizontal-padding, $text-horizontal-padding);
+      @include set-var(text-vertical-padding, $text-vertical-padding);
+      @include set-var(text-min-height, $text-min-height);
+      @include set-var(text-min-width, $text-min-width);
+    }
+
+    @if not $disable-icon {
+      @include set-var(icon-size, $icon-size);
+      @include set-var(icon-font-size, $icon-font-size);
+      @include set-var(icon-border-radius, $icon-border-radius);
+    }
+
+    @if not $disable-floating {
+      @include set-var(fab-offset, utils.scrollbar-size());
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-button {

package/src/card/__tests__/Card.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 { Card } from "../Card.js";
 
@@ -12,9 +12,9 @@ describe("Card", () => {
       ref,
       children: "Content",
     } as const;
-    const { getByTestId, rerender } = render(<Card {...props} />);
+    const { rerender } = render(<Card {...props} />);
 
-    const card = getByTestId("card");
+    const card = screen.getByTestId("card");
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
     expect(ref.current).toBe(card);
     expect(card).toMatchSnapshot();

package/src/card/__tests__/CardContent.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 { CardContent } from "../CardContent.js";
 
@@ -12,9 +12,9 @@ describe("CardContent", () => {
       ref,
       children: "Content",
     } as const;
-    const { getByTestId, rerender } = render(<CardContent {...props} />);
+    const { rerender } = render(<CardContent {...props} />);
 
-    const card = getByTestId("content");
+    const card = screen.getByTestId("content");
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
     expect(ref.current).toBe(card);
     expect(card).toMatchSnapshot();

package/src/card/__tests__/CardFooter.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 { CardFooter } from "../CardFooter.js";
 
@@ -12,9 +12,9 @@ describe("CardFooter", () => {
       ref,
       children: "Footer",
     } as const;
-    const { getByTestId, rerender } = render(<CardFooter {...props} />);
+    const { rerender } = render(<CardFooter {...props} />);
 
-    const footer = getByTestId("footer");
+    const footer = screen.getByTestId("footer");
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
     expect(ref.current).toBe(footer);
     expect(footer).toMatchSnapshot();

package/src/card/__tests__/CardHeader.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 { Button } from "../../button/Button.js";
 import { CardHeader } from "../CardHeader.js";
@@ -15,9 +15,9 @@ describe("CardHeader", () => {
       ref,
       children: "Header",
     } as const;
-    const { getByTestId, rerender } = render(<CardHeader {...props} />);
+    const { rerender } = render(<CardHeader {...props} />);
 
-    const header = getByTestId("header");
+    const header = screen.getByTestId("header");
     expect(ref.current).toBeInstanceOf(HTMLElement);
     expect(ref.current).toBe(header);
     expect(header).toMatchSnapshot();
@@ -47,7 +47,7 @@ describe("CardHeader", () => {
   });
 
   it("should allow addons before and after the children", () => {
-    const { getByTestId } = render(
+    render(
       <CardHeader
         data-testid="header"
         beforeAddon={<img src="/some-image.png" alt="" />}
@@ -60,7 +60,7 @@ describe("CardHeader", () => {
       </CardHeader>
     );
 
-    const header = getByTestId("header");
+    const header = screen.getByTestId("header");
     expect(header).toMatchSnapshot();
   });
 });

package/src/card/__tests__/CardSubtitle.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 { CardSubtitle } from "../CardSubtitle.js";
 
@@ -11,9 +11,9 @@ describe("CardSubtitle", () => {
       ref,
       children: "Subtitle",
     } as const;
-    const { getByRole, rerender } = render(<CardSubtitle {...props} />);
+    const { rerender } = render(<CardSubtitle {...props} />);
 
-    const subtitle = getByRole("heading", { name: "Subtitle" });
+    const subtitle = screen.getByRole("heading", { name: "Subtitle" });
     expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
     expect(ref.current).toBe(subtitle);
     expect(subtitle).toMatchSnapshot();

package/src/card/__tests__/CardTitle.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 { CardTitle } from "../CardTitle.js";
 
@@ -11,9 +11,9 @@ describe("CardTitle", () => {
       ref,
       children: "Title",
     } as const;
-    const { getByRole, rerender } = render(<CardTitle {...props} />);
+    const { rerender } = render(<CardTitle {...props} />);
 
-    const subtitle = getByRole("heading", { name: "Title" });
+    const subtitle = screen.getByRole("heading", { name: "Title" });
     expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
     expect(ref.current).toBe(subtitle);
     expect(subtitle).toMatchSnapshot();

package/src/card/_card.scss

@@ -44,37 +44,21 @@ $content-padding-bottom: 1.5rem !default;
 
 $footer-padding: 0.5rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-card-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-card-color,
-    value: $color,
-  ),
-  secondary-color: (
-    var: --rmd-card-secondary-color,
-    value: null,
-  ),
-);
+$variables: (background-color, color, secondary-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "card 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, "card");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "card var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "card")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -93,6 +77,13 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {

package/src/chip/__tests__/Chip.tsx

@@ -21,9 +21,9 @@ describe("Chip", () => {
       ref,
       children: "Chip",
     } as const;
-    const { getByRole, rerender } = render(<Chip {...props} />);
+    const { rerender } = render(<Chip {...props} />);
 
-    const chip = getByRole("button", { name: "Chip" });
+    const chip = screen.getByRole("button", { name: "Chip" });
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
     expect(ref.current).toBe(chip);
     expect(chip).toMatchSnapshot();
@@ -51,8 +51,8 @@ describe("Chip", () => {
     const modeMock = jest
       .spyOn(INTERACTION_CONFIG, "mode", "get")
       .mockReturnValue("press");
-    const { getByRole, rerender } = render(<Chip raisable>Chip</Chip>);
-    const chip = getByRole("button");
+    const { rerender } = render(<Chip raisable>Chip</Chip>);
+    const chip = screen.getByRole("button");
 
     fireEvent.mouseDown(chip);
     expect(chip).toHaveClass("rmd-chip--pressed");
@@ -86,8 +86,8 @@ describe("Chip", () => {
       children: "Content",
     } as const;
 
-    const { getByRole, rerender } = render(<Chip {...props} />);
-    const chip = getByRole("button", { name: "Content" });
+    const { rerender } = render(<Chip {...props} />);
+    const chip = screen.getByRole("button", { name: "Content" });
 
     expect(ref.current).toBeInstanceOf(HTMLSpanElement);
     expect(ref.current).toBe(chip.firstElementChild);
@@ -99,7 +99,7 @@ describe("Chip", () => {
   });
 
   it("should allow for addons to appear before and after the children", () => {
-    const { getByRole } = render(
+    render(
       <Chip
         leftAddon={<FontIcon>favorite</FontIcon>}
         rightAddon={<FontIcon>close</FontIcon>}
@@ -108,7 +108,7 @@ describe("Chip", () => {
       </Chip>
     );
 
-    const chip = getByRole("button", { name: "Content" });
+    const chip = screen.getByRole("button", { name: "Content" });
     expect(chip).toMatchSnapshot();
   });
 
@@ -119,11 +119,9 @@ describe("Chip", () => {
       ref,
       children: "Content",
     } as const;
-    const { getByTestId, rerender } = render(
-      <Chip {...props} noninteractive />
-    );
+    const { rerender } = render(<Chip {...props} noninteractive />);
 
-    let chip = getByTestId("chip");
+    let chip = screen.getByTestId("chip");
     expect(chip).toBeInstanceOf(HTMLSpanElement);
     expect(chip).not.toHaveAttribute("aria-pressed");
     expect(chip).not.toHaveAttribute("type");
@@ -132,7 +130,7 @@ describe("Chip", () => {
     expect(chip).toMatchSnapshot();
 
     rerender(<Chip {...props} />);
-    chip = getByTestId("chip");
+    chip = screen.getByTestId("chip");
     expect(chip).toBeInstanceOf(HTMLButtonElement);
     expect(chip).toHaveAttribute("type", "button");
     expect(chip).not.toHaveAttribute("disabled");
@@ -142,12 +140,12 @@ describe("Chip", () => {
 
   describe("selectable chips", () => {
     it("should update the aria-pressed state based on the selected state for interactable chips", () => {
-      const { getByTestId, rerender } = render(
+      const { rerender } = render(
         <Chip data-testid="chip" selected={false}>
           Chip
         </Chip>
       );
-      const buttonChip = getByTestId("chip");
+      const buttonChip = screen.getByTestId("chip");
       expect(buttonChip).not.toHaveAttribute("aria-pressed");
 
       rerender(
@@ -163,7 +161,7 @@ describe("Chip", () => {
         </Chip>
       );
 
-      const spanChip = getByTestId("chip");
+      const spanChip = screen.getByTestId("chip");
       expect(spanChip).not.toHaveAttribute("aria-pressed", "true");
     });
 
@@ -173,8 +171,8 @@ describe("Chip", () => {
         children: "Chip",
       } as const;
 
-      const { getByRole, rerender } = render(<Chip {...props} />);
-      const chip = getByRole("button");
+      const { rerender } = render(<Chip {...props} />);
+      const chip = screen.getByRole("button");
       expect(chip).toMatchSnapshot();
 
       rerender(<Chip {...props} selected />);
@@ -236,13 +234,13 @@ describe("Chip", () => {
     });
 
     it("should allow for a custom selectedIcon", () => {
-      const { getByRole, rerender } = render(
+      const { rerender } = render(
         <Chip selected={false} selectedIcon={<FontIcon>favorite</FontIcon>}>
           Chip
         </Chip>
       );
 
-      const chip = getByRole("button");
+      const chip = screen.getByRole("button");
       expect(chip).toMatchSnapshot();
 
       rerender(
@@ -289,8 +287,8 @@ describe("Chip", () => {
         disableIconTransition: true,
       } as const;
 
-      const { getByRole, rerender } = render(<Chip {...props} />);
-      const chip = getByRole("button");
+      const { rerender } = render(<Chip {...props} />);
+      const chip = screen.getByRole("button");
       expect(chip).toMatchSnapshot();
 
       rerender(<Chip {...props} selected />);

package/src/chip/__tests__/__snapshots__/Chip.tsx.snap

@@ -281,7 +281,7 @@ exports[`Chip selectable chips should apply the selected icon when the selectedT
 exports[`Chip selectable chips should apply the selected icon when the selectedThemed prop is not true 6`] = `
 <button
   aria-pressed="true"
-  class="rmd-chip rmd-chip--selected rmd-chip--solid rmd-chip--surrounded rmd-interaction-surface"
+  class="rmd-chip rmd-chip--selected rmd-chip--solid rmd-chip--left-addon rmd-chip--right-addon rmd-interaction-surface"
   type="button"
 >
   <span
@@ -332,7 +332,7 @@ exports[`Chip selectable chips should apply the selected icon when the selectedT
 exports[`Chip selectable chips should apply the selected icon when the selectedThemed prop is not true 8`] = `
 <button
   aria-pressed="true"
-  class="rmd-chip rmd-chip--selected rmd-chip--solid rmd-chip--surrounded rmd-interaction-surface"
+  class="rmd-chip rmd-chip--selected rmd-chip--solid rmd-chip--left-addon rmd-chip--right-addon rmd-interaction-surface"
   type="button"
 >
   <span
@@ -396,7 +396,7 @@ exports[`Chip selectable chips should apply the selected icon when the selectedT
 
 exports[`Chip should allow for addons to appear before and after the children 1`] = `
 <button
-  class="rmd-chip rmd-chip--solid rmd-chip--surrounded rmd-interaction-surface"
+  class="rmd-chip rmd-chip--solid rmd-chip--left-addon rmd-chip--right-addon rmd-interaction-surface"
   type="button"
 >
   <span

package/src/chip/__tests__/__snapshots__/styles.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`chip should be callable without any arguments 1`] = `"rmd-chip rmd-chip--solid rmd-interaction-surface"`;
+exports[`chip should be callable without any arguments 1`] = `"rmd-chip rmd-chip--solid"`;
 
 exports[`chipContent should be callable without any arguments 1`] = `"rmd-chip__content"`;

package/src/chip/_chip.scss

@@ -23,7 +23,6 @@ $disable-outline-theme: $disable-everything !default;
 $disable-outline-raisable: false !default;
 $disable-left-addon: false !default;
 $disable-right-addon: false !default;
-$disable-both-addons: $disable-left-addon and $disable-right-addon !default;
 $disable-selected-theme: false !default;
 $disable-selected-icon-transition: false !default;
 
@@ -112,61 +111,31 @@ $outline-text-color: theme.get-default-color(
 $outline-raisable-box-shadow-z-value: 8 !default;
 $outline-raisable-transition-duration: transition.$linear-duration !default;
 
-$var-lookup: (
-  solid-background-color: (
-    var: --rmd-chip-solid-background-color,
-    value: $solid-background-color,
-  ),
-  solid-disabled-background-color: (
-    var: --rmd-chip-solid-disabled-background-color,
-    value: $solid-disabled-background-color,
-  ),
-  solid-color: (
-    var: --rmd-chip-solid-color,
-    value: $solid-color,
-  ),
-  theme-background-color: (
-    var: --rmd-chip-theme-background-color,
-    value: $theme-background-color,
-  ),
-  theme-color: (
-    var: --rmd-chip-theme-color,
-    value: $theme-color,
-  ),
-  outline-color: (
-    var: --rmd-chip-outline-color,
-    value: $outline-color,
-  ),
-  outline-width: (
-    var: --rmd-chip-outline-width,
-    value: $outline-width,
-  ),
-  outline-background-color: (
-    var: --rmd-chip-outline-background-color,
-    value: $outline-background-color,
-  ),
-  outline-text-color: (
-    var: --rmd-chip-outline-text-color,
-    value: $outline-text-color,
-  ),
+$variables: (
+  solid-background-color,
+  solid-disabled-background-color,
+  solid-color,
+  theme-background-color,
+  theme-color,
+  outline-color,
+  outline-width,
+  outline-background-color,
+  outline-text-color
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "chip 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, "chip");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "chip var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "chip")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -203,6 +172,23 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(solid-background-color, $solid-background-color);
+    @include set-var(
+      solid-disabled-background-color,
+      $solid-disabled-background-color
+    );
+    @include set-var(solid-color, $solid-color);
+    @include set-var(theme-background-color, $theme-background-color);
+    @include set-var(theme-color, $theme-color);
+    @include set-var(outline-color, $outline-color);
+    @include set-var(outline-width, $outline-width);
+    @include set-var(outline-background-color, $outline-background-color);
+    @include set-var(outline-text-color, $outline-text-color);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {
@@ -324,21 +310,6 @@ $var-lookup: (
         }
       }
 
-      @if not $disable-both-addons {
-        &--surrounded {
-          @include utils.auto-rtl(
-            padding-left,
-            $addon-left-padding,
-            $addon-right-padding
-          );
-          @include utils.auto-rtl(
-            padding-right,
-            $addon-right-padding,
-            $addon-left-padding
-          );
-        }
-      }
-
       @if not $disable-content {
         &__content {
           @include typography.text-overflow;

package/src/chip/styles.ts

@@ -52,7 +52,7 @@ export interface ChipClassNameOptions {
   /** @defaultValue `false` */
   selectedThemed?: boolean;
 
-  /** @defaultValue `false` */
+  /** @defaultValue `true` */
   noninteractive?: boolean;
 
   /** @defaultValue `false` */
@@ -78,7 +78,7 @@ export function chip(options: ChipClassNameOptions = {}): string {
     selected = false,
     selectedThemed = false,
     selectedClassName,
-    noninteractive = false,
+    noninteractive = true,
     pressedClassName,
     leftAddon = false,
     rightAddon = false,
@@ -92,9 +92,8 @@ export function chip(options: ChipClassNameOptions = {}): string {
       solid: theme === "solid",
       outline: theme === "outline",
       disabled,
-      "left-addon": leftAddon && !rightAddon,
-      "right-addon": !leftAddon && rightAddon,
-      surrounded: leftAddon && rightAddon,
+      "left-addon": leftAddon,
+      "right-addon": rightAddon,
       pressed,
     }),
     selected && selectedClassName,