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

package/src/form/__tests__/useFileUpload.tsx

@@ -1,6 +1,12 @@
 import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import { useEffect } from "react";
-import { act, fireEvent, render, userEvent } from "../../test-utils/index.js";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  userEvent,
+} from "../../test-utils/index.js";
 
 import { FileInput } from "../FileInput.js";
 import { useFileUpload, type FileUploadOptions } from "../useFileUpload.js";
@@ -141,20 +147,18 @@ function SingleFileTest(props: FileUploadOptions<HTMLElement>) {
 describe("useFileUpload", () => {
   it("should work correctly for a single file upload flow and reset", async () => {
     const file = new File(["pretend-bytes"], "README.txt");
-    const { getAllByRole, getByLabelText, getByRole, getByTestId } = render(
-      <SingleFileTest />
-    );
-    const input = getByLabelText("Upload") as HTMLInputElement;
-    const status = getByTestId("status");
-    const fileName = getByTestId("fileName");
-    const progress = getByTestId("progress");
-    const result = getByTestId("result");
+    render(<SingleFileTest />);
+    const input = screen.getByLabelText("Upload") as HTMLInputElement;
+    const status = screen.getByTestId("status");
+    const fileName = screen.getByTestId("fileName");
+    const progress = screen.getByTestId("progress");
+    const result = screen.getByTestId("result");
 
     expect(status).toHaveTextContent("");
     expect(fileName).toHaveTextContent("");
     expect(progress).toHaveTextContent("");
     expect(result).toHaveTextContent("");
-    expect(() => getAllByRole("listitem")).toThrow();
+    expect(() => screen.getAllByRole("listitem")).toThrow();
 
     await userEvent.upload(input, file);
 
@@ -163,14 +167,14 @@ describe("useFileUpload", () => {
     expect(fileName).toHaveTextContent("README.txt");
     expect(progress).toHaveTextContent("0");
     expect(result).toHaveTextContent("");
-    expect(() => getAllByRole("listitem")).toThrow();
+    expect(() => screen.getAllByRole("listitem")).toThrow();
 
     mockFileReader.triggerProgressEvent(100, 1000);
     expect(status).toHaveTextContent("uploading");
     expect(fileName).toHaveTextContent("README.txt");
     expect(progress).toHaveTextContent("10");
     expect(result).toHaveTextContent("");
-    expect(() => getAllByRole("listitem")).toThrow();
+    expect(() => screen.getAllByRole("listitem")).toThrow();
 
     const content = "pretend-bytes";
     mockFileReader.triggerLoadEvent(content);
@@ -178,14 +182,14 @@ describe("useFileUpload", () => {
     expect(fileName).toHaveTextContent("README.txt");
     expect(progress).toHaveTextContent("100");
     expect(result).toHaveTextContent(content);
-    expect(() => getAllByRole("listitem")).toThrow();
+    expect(() => screen.getAllByRole("listitem")).toThrow();
 
-    fireEvent.click(getByRole("button", { name: "Reset" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
     expect(status).toHaveTextContent("");
     expect(fileName).toHaveTextContent("");
     expect(progress).toHaveTextContent("");
     expect(result).toHaveTextContent("");
-    expect(() => getAllByRole("listitem")).toThrow();
+    expect(() => screen.getAllByRole("listitem")).toThrow();
   });
 
   it("should not cause infinite rerenders if the reset function is added to a useEffect's dependency array", () => {
@@ -208,55 +212,57 @@ describe("useFileUpload", () => {
 
   it("should abort any FileReaders when the reset function is called", async () => {
     const file = new File(["pretend-bytes"], "README.txt");
-    const { getByLabelText, getByRole } = render(<SingleFileTest />);
-    const input = getByLabelText("Upload") as HTMLInputElement;
+    render(<SingleFileTest />);
+    const input = screen.getByLabelText("Upload") as HTMLInputElement;
 
     await userEvent.upload(input, file);
     expect(abort).not.toHaveBeenCalled();
-    fireEvent.click(getByRole("button", { name: "Reset" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
     expect(abort).toHaveBeenCalledTimes(1);
   });
 
   it("should allow for some default validation", async () => {
-    const { getByLabelText, getByRole, getByTestId } = render(
-      <SingleFileTest maxFileSize={1024} minFileSize={612} />
-    );
-    const input = getByLabelText("Upload") as HTMLInputElement;
-    const status = getByTestId("status");
-    const fileName = getByTestId("fileName");
-    const reset = getByRole("button", { name: "Reset" });
-    const clearErrors = getByRole("button", { name: "Clear Errors" });
+    render(<SingleFileTest maxFileSize={1024} minFileSize={612} />);
+    const input = screen.getByLabelText("Upload") as HTMLInputElement;
+    const status = screen.getByTestId("status");
+    const fileName = screen.getByTestId("fileName");
+    const reset = screen.getByRole("button", { name: "Reset" });
+    const clearErrors = screen.getByRole("button", { name: "Clear Errors" });
 
     const file1 = createFile("file1.txt", 32);
     expect(file1.size).toBe(32);
     await userEvent.upload(input, file1);
     expect(() =>
-      getByRole("listitem", { name: "FileSizeError" })
+      screen.getByRole("listitem", { name: "FileSizeError" })
     ).not.toThrow();
     expect(status).toHaveTextContent("");
     expect(fileName).toHaveTextContent("");
 
     fireEvent.click(reset);
-    expect(() => getByRole("listitem", { name: "FileSizeError" })).toThrow();
+    expect(() =>
+      screen.getByRole("listitem", { name: "FileSizeError" })
+    ).toThrow();
 
     const file2 = createFile("file2.txt", 2000);
     expect(file2.size).toBe(2000);
     await userEvent.upload(input, file2);
 
     expect(() =>
-      getByRole("listitem", { name: "FileSizeError" })
+      screen.getByRole("listitem", { name: "FileSizeError" })
     ).not.toThrow();
     expect(status).toHaveTextContent("");
     expect(fileName).toHaveTextContent("");
 
     fireEvent.click(reset);
-    expect(() => getByRole("listitem", { name: "FileSizeError" })).toThrow();
+    expect(() =>
+      screen.getByRole("listitem", { name: "FileSizeError" })
+    ).toThrow();
 
     const file3 = createFile("file3.txt", 800);
     expect(file3.size).toBe(800);
     await userEvent.upload(input, file3);
 
-    expect(() => getByRole("listitem")).toThrow();
+    expect(() => screen.getByRole("listitem")).toThrow();
     expect(status).toHaveTextContent("uploading");
     expect(fileName).toHaveTextContent(file3.name);
 
@@ -270,12 +276,14 @@ describe("useFileUpload", () => {
     expect(status).toHaveTextContent("complete");
     expect(fileName).toHaveTextContent(file3.name);
     expect(() =>
-      getByRole("listitem", { name: "FileSizeError" })
+      screen.getByRole("listitem", { name: "FileSizeError" })
     ).not.toThrow();
 
     fireEvent.click(clearErrors);
     expect(status).toHaveTextContent("complete");
     expect(fileName).toHaveTextContent(file3.name);
-    expect(() => getByRole("listitem", { name: "FileSizeError" })).toThrow();
+    expect(() =>
+      screen.getByRole("listitem", { name: "FileSizeError" })
+    ).toThrow();
   });
 });

package/src/form/__tests__/useRadioGroup.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from "@jest/globals";
 import { type ReactElement } from "react";
-import { fireEvent, render } from "../../test-utils/index.js";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
 
 import { Button } from "../../button/Button.js";
 import { AppSizeProvider } from "../../media-queries/AppSizeProvider.js";
@@ -25,12 +25,12 @@ describe("useRadioGroup", () => {
       );
     }
 
-    const { getByRole, container } = render(<Test />);
+    const { container } = render(<Test />);
 
-    const radio1 = getByRole("radio", { name: "First" });
-    const radio2 = getByRole("radio", { name: "Second" });
-    const radio3 = getByRole("radio", { name: "Third" });
-    const radio4 = getByRole("radio", { name: "Forth" });
+    const radio1 = screen.getByRole("radio", { name: "First" });
+    const radio2 = screen.getByRole("radio", { name: "Second" });
+    const radio3 = screen.getByRole("radio", { name: "Third" });
+    const radio4 = screen.getByRole("radio", { name: "Forth" });
     expect(radio1).toHaveAttribute("value", "a");
     expect(radio2).toHaveAttribute("value", "b");
     expect(radio3).toHaveAttribute("value", "c");
@@ -83,11 +83,11 @@ describe("useRadioGroup", () => {
       );
     }
 
-    const { getByRole, container } = render(<Test />);
+    const { container } = render(<Test />);
     expect(onInvalid).not.toHaveBeenCalled();
 
-    const submit = getByRole("button", { name: "Submit" });
-    const radio1 = getByRole("radio", { name: "First" });
+    const submit = screen.getByRole("button", { name: "Submit" });
+    const radio1 = screen.getByRole("radio", { name: "First" });
 
     fireEvent.click(submit);
 
@@ -124,10 +124,10 @@ describe("useRadioGroup", () => {
       );
     }
 
-    const { getByRole } = render(<Test />);
+    render(<Test />);
 
-    const radio1 = getByRole("radio", { name: "First" });
-    const radio2 = getByRole("radio", { name: "Second" });
+    const radio1 = screen.getByRole("radio", { name: "First" });
+    const radio2 = screen.getByRole("radio", { name: "Second" });
     expect(onChange).not.toHaveBeenCalled();
     expect(radio1).toBeChecked();
     expect(radio2).not.toBeChecked();
@@ -161,12 +161,12 @@ describe("useRadioGroup", () => {
       );
     }
 
-    const { getByRole } = render(<Test />);
+    render(<Test />);
 
-    const radio1 = getByRole("radio", { name: "First" });
-    const radio2 = getByRole("radio", { name: "Second" });
-    const radio3 = getByRole("radio", { name: "Third" });
-    const radio4 = getByRole("radio", { name: "Forth" });
+    const radio1 = screen.getByRole("radio", { name: "First" });
+    const radio2 = screen.getByRole("radio", { name: "Second" });
+    const radio3 = screen.getByRole("radio", { name: "Third" });
+    const radio4 = screen.getByRole("radio", { name: "Forth" });
     expect(radio1).not.toBeChecked();
     expect(radio2).not.toBeChecked();
     expect(radio3).toBeChecked();
@@ -178,7 +178,7 @@ describe("useRadioGroup", () => {
     expect(radio3).not.toBeChecked();
     expect(radio4).not.toBeChecked();
 
-    fireEvent.click(getByRole("button", { name: "Reset" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
     expect(radio1).not.toBeChecked();
     expect(radio2).not.toBeChecked();
     expect(radio3).toBeChecked();
@@ -204,15 +204,15 @@ describe("useRadioGroup", () => {
       );
     }
 
-    const { getByRole } = render(<Test />, { wrapper: AppSizeProvider });
+    render(<Test />, { wrapper: AppSizeProvider });
 
-    fireEvent.click(getByRole("button", { name: "Toggle" }));
-    expect(getByRole("menu")).toMatchSnapshot();
+    fireEvent.click(screen.getByRole("button", { name: "Toggle" }));
+    expect(screen.getByRole("menu")).toMatchSnapshot();
 
-    const radio1 = getByRole("menuitemradio", { name: "First" });
-    const radio2 = getByRole("menuitemradio", { name: "Second" });
-    const radio3 = getByRole("menuitemradio", { name: "Third" });
-    const radio4 = getByRole("menuitemradio", { name: "Forth" });
+    const radio1 = screen.getByRole("menuitemradio", { name: "First" });
+    const radio2 = screen.getByRole("menuitemradio", { name: "Second" });
+    const radio3 = screen.getByRole("menuitemradio", { name: "Third" });
+    const radio4 = screen.getByRole("menuitemradio", { name: "Forth" });
     expect(radio1).not.toBeChecked();
     expect(radio2).not.toBeChecked();
     expect(radio3).toBeChecked();

package/src/form/_form.scss

@@ -40,6 +40,7 @@ $disable-radio: $disable-everything !default;
 $disable-uncontrolled-input-toggles: false !default;
 $disable-switch: $disable-everything !default;
 $disable-switch-circular-progress: progress.$disable-circular !default;
+$disable-switch-icon: false !default;
 $disable-menu-item-checkbox: $disable-checkbox !default;
 $disable-menu-item-radio: $disable-radio !default;
 $disable-menu-item-switch: $disable-switch !default;
@@ -78,7 +79,7 @@ $label-typography: map.merge(
 ) !default;
 $label-floating-top: 1rem !default;
 $label-floating-top-dense: 0.9rem !default;
-$label-floating-font-size: 0.75em !default;
+$label-floating-scale: 0.75 !default;
 $label-floating-padding: 0.25rem !default;
 
 $message-typography-styles: map.merge(
@@ -196,9 +197,9 @@ $switch-track-background-color: theme.get-default-color(
   $switch-track-light-background-color,
   $switch-track-dark-background-color
 ) !default;
+$switch-icon-size: 1em !default;
 $switch-circular-progress-width: 12 !default;
-
-$menu-item-switch-spacing: calc(icon.$spacing + $switch-ball-size) !default;
+$switch-circular-progress-size: 1em !default;
 
 $slider-size: 2rem !default;
 $slider-vertical-size: 15rem !default;
@@ -255,6 +256,7 @@ $slider-thumb-mask-scale: 0.8 !default;
 $slider-thumb-disabled-color: $slider-track-disabled-color !default;
 $slider-tooltip-caret-size: 0.3rem !default;
 $slider-tooltip-offset: -($slider-thumb-size + icon.$spacing) !default;
+$slider-tooltip-z-index: 0 !default;
 $slider-container-padding: $slider-thumb-size * 0.5 !default;
 $slider-container-addon-spacing: $slider-thumb-size !default;
 $slider-transition-duration: transition.$linear-duration !default;
@@ -604,7 +606,7 @@ $var-lookup: (
     align-items: center;
     display: inline-flex;
     transition-duration: transition.$linear-duration;
-    transition-property: background-color, color, font-size, transform;
+    transition-property: background-color, transform;
 
     $active-selector: "&--active";
     @if not $_disable-text-field-container {
@@ -635,7 +637,6 @@ $var-lookup: (
         position: absolute;
         top: 0;
         transform: translate(get-var(text-padding-left), get-var(floating-top));
-        will-change: font-size, transform;
       }
 
       &--floating-dense {
@@ -660,19 +661,17 @@ $var-lookup: (
 
       #{$floating-active-selector} {
         @include utils.rtl {
-          transform: translate(
-            utils.negate-var(get-var(label-left-offset)),
-            get-var(label-top-offset)
-          );
+          transform: scale($label-floating-scale)
+            translate(
+              utils.negate-var(get-var(label-left-offset)),
+              get-var(label-top-offset)
+            );
         }
         @include use-var(background-color, label-active-background-color);
         @include use-var(padding, label-active-padding);
 
-        font-size: $label-floating-font-size;
-        transform: translate(
-          get-var(label-left-offset),
-          get-var(label-top-offset)
-        );
+        transform: scale($label-floating-scale)
+          translate(get-var(label-left-offset), get-var(label-top-offset));
         z-index: 1;
       }
     }
@@ -1241,6 +1240,10 @@ $var-lookup: (
       @include use-var(margin-top, addon-margin-top);
     }
 
+    // this makes it so that this container element is the same size as the
+    // child (normally icons). without this, icons would have a height of 30.5px
+    // and no longer be centered
+    display: inline-flex;
     position: absolute;
 
     // Note: Can't use `:first-child` and `:last-child` since
@@ -1361,6 +1364,11 @@ $var-lookup: (
       cursor: pointer;
     }
 
+    &--current-color,
+    &--current-color .rmd-switch__input:checked + .rmd-switch__ball {
+      @include set-var(switch-ball-background-color, currentcolor);
+    }
+
     &__input {
       @include utils.keyboard-only {
         &:focus + .rmd-switch__ball::before {
@@ -1378,6 +1386,19 @@ $var-lookup: (
     }
 
     &__track {
+      @if not $disable-switch-circular-progress {
+        @include progress.set-var(
+          circular-stroke-width,
+          $switch-circular-progress-width
+        );
+        @include progress.set-var(
+          circular-size,
+          $switch-circular-progress-size
+        );
+      }
+      @if not $disable-switch-icon {
+        @include icon.set-var(size, $switch-icon-size);
+      }
       @include use-var(background-color, switch-track-background-color);
 
       border-radius: $switch-track-border-radius;
@@ -1390,16 +1411,6 @@ $var-lookup: (
       &--disabled {
         opacity: $switch-disabled-opacity;
       }
-
-      @if not $disable-switch-circular-progress {
-        &--async {
-          @include progress.set-var(
-            circular-stroke-width,
-            $switch-circular-progress-width
-          );
-          @include progress.set-var(circular-size, $switch-ball-size);
-        }
-      }
     }
 
     &__ball {
@@ -1436,7 +1447,7 @@ $var-lookup: (
         position: absolute;
         top: 25%;
         width: $switch-ball-size;
-        z-index: 1;
+        z-index: 0;
       }
 
       $active-selector: ".rmd-switch__input:checked + &" +
@@ -1471,15 +1482,10 @@ $var-lookup: (
     }
 
     @if not $disable-menu-item-switch {
-      // increase the spacing because the switch's ball extends past the
-      // container's width
-      @if $menu-item-switch-spacing and
-        $menu-item-switch-spacing !=
-        icon.$spacing
-      {
-        &--switch {
-          @include icon.set-var(spacing, $menu-item-switch-spacing);
-        }
+      // this makes it so that the spacing between the switch and the text
+      // aligns with other menu items/icons
+      &__track {
+        @include icon.set-var(size, $switch-track-width);
       }
 
       // decrease the ball size and remove the hover states since it's handled
@@ -1832,6 +1838,7 @@ $var-lookup: (
     .rmd-slider-tooltip {
       opacity: 1;
       position: absolute;
+      z-index: $slider-tooltip-z-index;
 
       // this is used to generate the triangle
       &::after {

package/src/form/switchStyles.ts

@@ -15,15 +15,15 @@ const styles = bem("rmd-switch");
  */
 export interface SwitchClassNameOptions {
   className?: string;
-
   clickable?: boolean;
+  currentColor?: boolean;
 }
 
 /**
  * @remarks \@since 6.0.0
  */
 export function switchStyles(options: SwitchClassNameOptions = {}): string {
-  const { className, clickable } = options;
+  const { className, clickable, currentColor } = options;
 
-  return cnb(styles({ clickable }), className);
+  return cnb(styles({ "current-color": currentColor, clickable }), className);
 }

package/src/hoverMode/useHoverMode.ts

@@ -14,12 +14,12 @@ export interface HoverModeConfigurationOptions extends SimpleHoverModeContext {
   /**
    * This can be used to override the `HoverModeContext`'s hover time.
    */
-  hoverTime?: number;
+  hoverTimeout?: number;
 
   /**
    * This can be used to override the `HoverModeContext`'s leave time.
    */
-  leaveTime?: number;
+  leaveTimeout?: number;
 }
 
 /**
@@ -84,9 +84,9 @@ export function useHoverMode(
 ): HoverModeImplementation {
   const {
     disabled,
-    hoverTime,
+    hoverTimeout: hoverTime,
     hoverTimeoutRef,
-    leaveTime,
+    leaveTimeout: leaveTime,
     leaveTimeoutRef,
     enableHoverMode,
     disableHoverMode,

package/src/icon/FontIcon.tsx

@@ -22,7 +22,8 @@ export interface FontIconProps
  * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
  * `forceSize` and `forceFontSize` props to fix the sizing issues.
  *
- * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element.
+ * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element and removed
+ * the `forceSize`/`forceFontSize` props.
  */
 export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
   function FontIcon(props, ref) {
@@ -33,8 +34,6 @@ export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
       dense = false,
       theme,
       iconClassName = "material-icons",
-      forceSize = false,
-      forceFontSize = false,
       ...remaining
     } = props;
 
@@ -49,8 +48,6 @@ export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
           theme,
           className,
           iconClassName,
-          forceSize,
-          forceFontSize,
         })}
       >
         {children}

package/src/icon/MaterialIcon.tsx

@@ -1,7 +1,6 @@
-"use client";
 import { forwardRef, type AriaAttributes, type HTMLAttributes } from "react";
-import { useMaterialIconsFamily } from "./MaterialIconsProvider.js";
 import { type MaterialIconName } from "./material.js";
+import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon, type MaterialIconClassNameOptions } from "./styles.js";
 
 /** @remarks \@since 6.0.0 */
@@ -11,11 +10,11 @@ export interface MaterialIconProps
   /** @defaultValue `true` */
   "aria-hidden"?: AriaAttributes["aria-hidden"];
   name: MaterialIconName;
+  children?: never;
 }
 
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useMaterialIconsFamily hook
+ * **Server Component**
  *
  * @remarks \@since 6.0.0
  */
@@ -24,13 +23,12 @@ export const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(
     const {
       "aria-hidden": ariaHidden = true,
       name,
-      family: propFamily,
+      family = MATERIAL_CONFIG.iconFamily,
       theme,
       dense,
       className,
       ...remaining
     } = props;
-    const family = useMaterialIconsFamily(propFamily);
 
     return (
       <span

package/src/icon/MaterialSymbol.tsx

@@ -1,14 +1,13 @@
-"use client";
-import { forwardRef, type HTMLAttributes } from "react";
+import { forwardRef, type AriaAttributes, type HTMLAttributes } from "react";
 import { type MaterialSymbolName } from "./material.js";
 import {
-  useFontVariationSettings,
+  getFontVariationSettings,
   type MaterialSymbolCustomization,
   type MaterialSymbolFill,
   type MaterialSymbolGrade,
   type MaterialSymbolOpticalSize,
   type MaterialSymbolWeight,
-} from "./MaterialSymbolsProvider.js";
+} from "./materialConfig.js";
 import { icon, type MaterialSymbolClassNameOptions } from "./styles.js";
 
 declare module "react" {
@@ -27,13 +26,20 @@ export interface MaterialSymbolProps
   extends HTMLAttributes<HTMLSpanElement>,
     MaterialSymbolCustomization,
     Partial<MaterialSymbolClassNameOptions> {
+  /** @defaultValue `true` */
+  "aria-hidden"?: AriaAttributes["aria-hidden"];
   name: MaterialSymbolName;
   children?: never;
 }
 
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useFontVariationSettings hook
+ * **Server Component**
+ * This is a convenience component that provides autocomplete for all the
+ * available material symbols via the `name` prop.
+ *
+ * Note: You might notice IDE slowdowns for files that use this component since
+ * there are so many icons available. If it becomes an issue, just stop using
+ * this component and define the icons inline instead.
  *
  * @example
  * Simple Example
@@ -45,11 +51,11 @@ export interface MaterialSymbolProps
  * function Example(): ReactElement {
  *   return (
  *     <>
- *       <MaterialSymbol symbol="" />
- *       <MaterialSymbol symbol="" type="outline" />
+ *       <MaterialSymbol symbol="close" />
+ *       <MaterialSymbol symbol="tune" type="outline" />
  *
- *       <MaterialSymbol symbol="" type="round" />
- *       <MaterialSymbol symbol="" type="sharp" />
+ *       <MaterialSymbol symbol="add" type="round" />
+ *       <MaterialSymbol symbol="air" type="sharp" />
  *     </>
  *   );
  * }
@@ -76,13 +82,13 @@ export const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(
       dense,
       ...remaining
     } = props;
-    const { style, family } = useFontVariationSettings({
+    const { style, family } = getFontVariationSettings({
       style: propStyle,
-      family: propFamily,
       fill,
       weight,
       grade,
       opticalSize,
+      family: propFamily,
     });
 
     return (

package/src/icon/__tests__/FontIcon.tsx

@@ -1,29 +1,25 @@
 import { describe, expect, it } from "@jest/globals";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { FontIcon } from "../FontIcon.js";
 
 describe("FontIcon", () => {
   it("should render as an <i> element", () => {
-    const { getByTestId } = render(
-      <FontIcon data-testid="icon">home</FontIcon>
-    );
-    expect(getByTestId("icon")).toBeInstanceOf(HTMLSpanElement);
+    render(<FontIcon data-testid="icon">home</FontIcon>);
+    expect(screen.getByTestId("icon")).toBeInstanceOf(HTMLSpanElement);
   });
 
   it("should render correctly", () => {
-    const { getByTestId, rerender } = render(
-      <FontIcon data-testid="icon">home</FontIcon>
-    );
-    const icon = getByTestId("icon");
+    const { rerender } = render(<FontIcon data-testid="icon">home</FontIcon>);
+    const icon = screen.getByTestId("icon");
     expect(icon).toMatchSnapshot();
 
     rerender(<FontIcon data-testid="icon" iconClassName="fa fa-github" />);
   });
 
   it("should apply the correct classNames", () => {
-    const { getByTestId, rerender } = render(<FontIcon data-testid="icon" />);
-    const icon = getByTestId("icon");
+    const { rerender } = render(<FontIcon data-testid="icon" />);
+    const icon = screen.getByTestId("icon");
     expect(icon.className).toBe("rmd-icon rmd-icon--font material-icons");
     expect(icon).toMatchSnapshot();