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

package/src/app-bar/_app-bar.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 
 @use "../utils";
+@use "../box/box";
 @use "../box-shadows";
 @use "../interaction/interaction";
 @use "../theme/a11y";
@@ -59,38 +60,25 @@ $vertical-padding: 0 !default;
 
 $keyline: 1rem !default;
 $title-keyline: 4.5rem !default;
+// 3rem is the icon-button's default size. can't use the variables since it's
+// based on font-size now and `em`
+$nav-keyline: $title-keyline - $horizontal-padding - $gap - 3rem !default;
 
-$var-lookup: (
-  height: (
-    var: --rmd-app-bar-height,
-    value: $height,
-  ),
-  surface-background-color: (
-    var: --rmd-app-bar-surface-background-color,
-    value: $surface-background-color,
-  ),
-  surface-color: (
-    var: --rmd-app-bar-surface-color,
-    value: $surface-color,
-  ),
-);
+$variables: (height, surface-background-color, surface-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "app-bar 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, "app-bar");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "app-bar var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "app-bar")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -121,134 +109,138 @@ $var-lookup: (
   @include set-var(height, $dense-height);
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+    @include set-var(height, $height);
+    @include set-var(surface-background-color, $surface-background-color);
+    @include set-var(surface-color, $surface-color);
+  }
+}
 
-    .rmd-app-bar {
-      @include use-var(height);
-
-      align-items: center;
-      display: flex;
-      // since app bars can appear a lot in full page dialogs, setting these flex
-      // values allows it be be a direct replacement of the `DialogHeader`
-      // component without all the offsets and additional styles needed for fixed
-      // app bars.
-      flex: 0 0 auto;
-      gap: $gap;
-      padding: $vertical-padding $horizontal-padding;
-      width: 100%;
-
-      @if not $disable-fixed or not $disable-sticky {
-        &--fixed {
-          left: 0;
-          position: fixed;
-          // Note: right and width were added to support the main navigation
-          // behavior with toggleable full-height navigation
-          right: 0;
-          width: auto;
-          z-index: $fixed-z-index;
-        }
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(app-bar, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
+      }
 
-        @if $fixed-elevation and $fixed-elevation != 0 {
-          &--elevated {
-            @include box-shadows.box-shadow(
-              $fixed-elevation,
-              $disable-colors: true
-            );
+      .rmd-app-bar {
+        @include use-var(height);
+        @include box.set-var(gap, $gap);
+        @include box.set-var(padding, $vertical-padding $horizontal-padding);
+
+        // since app bars can appear a lot in full page dialogs, setting these flex
+        // values allows it be be a direct replacement of the `DialogHeader`
+        // component without all the offsets and additional styles needed for fixed
+        // app bars.
+        flex: 0 0 auto;
+
+        @if not $disable-fixed or not $disable-sticky {
+          &--fixed {
+            left: 0;
+            position: fixed;
+            // Note: right and width were added to support the main navigation
+            // behavior with toggleable full-height navigation
+            right: 0;
+            width: auto;
+            z-index: $fixed-z-index;
           }
-        }
 
-        @each $position in $fixed-positions {
-          &--#{$position} {
-            #{$position}: 0;
+          @if $fixed-elevation and $fixed-elevation != 0 {
+            &--elevated {
+              @include box-shadows.box-shadow(
+                $fixed-elevation,
+                $disable-colors: true
+              );
+            }
           }
-        }
 
-        @if not $disable-sticky {
-          &--sticky {
-            position: sticky;
+          @each $position in $fixed-positions {
+            &--#{$position} {
+              #{$position}: 0;
+            }
           }
-        }
-      }
-
-      &--auto {
-        // do not set variable so that child AppBar can maintain their height as needed
-        height: auto;
-      }
 
-      &--stacked {
-        flex-direction: column;
-        gap: 0;
-        padding: 0;
-      }
+          @if not $disable-sticky {
+            &--sticky {
+              position: sticky;
+            }
+          }
+        }
 
-      @if not $disable-dense-theme {
-        &--dense {
-          @include set-var(height, $dense-height);
+        &--auto {
+          // do not set variable so that child AppBar can maintain their height as needed
+          height: auto;
         }
-      }
 
-      @if not $disable-prominent-theme {
-        &--prominent {
-          @include set-var(height, $prominent-height);
+        &--stacked {
+          flex-direction: column;
+          gap: 0;
+          padding: 0;
         }
-      }
 
-      @if not $disable-prominent-dense-theme {
-        &--prominent-dense {
-          @include set-var(height, $prominent-dense-height);
+        @if not $disable-dense-theme {
+          &--dense {
+            @include set-var(height, $dense-height);
+          }
         }
-      }
 
-      @if not $disable-surface-theme {
-        &--surface {
-          @include use-var(background-color, surface-background-color);
-          @include use-var(color, surface-color);
+        @if not $disable-prominent-theme {
+          &--prominent {
+            @include set-var(height, $prominent-height);
+          }
         }
-      }
 
-      @if not $disable-scrollbar-offset {
-        &--scrollbar-offset {
-          @include utils.rtl {
-            margin-right: calc(-1 * #{utils.scrollbar-size()});
+        @if not $disable-prominent-dense-theme {
+          &--prominent-dense {
+            @include set-var(height, $prominent-dense-height);
           }
+        }
 
-          padding-right: calc(
-            #{$horizontal-padding} + #{utils.scrollbar-size()}
-          );
+        @if not $disable-surface-theme {
+          &--surface {
+            @include use-var(background-color, surface-background-color);
+            @include use-var(color, surface-color);
+          }
         }
 
-        @if not $disable-static-scrollbar-offset {
-          &--static-scrollbar-offset {
-            width: calc(100% + utils.scrollbar-size());
+        @if not $disable-scrollbar-offset {
+          &--scrollbar-offset {
+            @include utils.rtl {
+              margin-right: calc(-1 * #{utils.scrollbar-size()});
+            }
+
+            padding-right: calc(
+              #{$horizontal-padding} + #{utils.scrollbar-size()}
+            );
+          }
+
+          @if not $disable-static-scrollbar-offset {
+            &--static-scrollbar-offset {
+              width: calc(100% + utils.scrollbar-size());
+            }
           }
         }
       }
-    }
 
-    @if not $disable-title {
-      .rmd-app-bar-title {
-        @include utils.auto-rtl(margin-left, $keyline - $horizontal-padding);
+      @if not $disable-title {
+        .rmd-app-bar-title {
+          @include utils.auto-rtl(margin-left, $keyline - $horizontal-padding);
 
-        flex: 1 1 auto;
-        margin-bottom: 0;
-        margin-top: 0;
+          flex: 1 1 auto;
+          margin-bottom: 0;
+          margin-top: 0;
 
-        &--keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding
-          );
-        }
+          &--keyline {
+            @include utils.auto-rtl(
+              margin-left,
+              $title-keyline - $horizontal-padding
+            );
+          }
 
-        &--nav-keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding - $gap - button.$icon-size
-          );
+          &--nav-keyline {
+            @include utils.auto-rtl(margin-left, $nav-keyline);
+          }
         }
       }
     }

package/src/avatar/Avatar.tsx

@@ -1,6 +1,11 @@
-import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from "react";
+import {
+  forwardRef,
+  type HTMLAttributes,
+  type ImgHTMLAttributes,
+  type ReactNode,
+} from "react";
 import { type PropsWithRef } from "../types.js";
-import { avatar, avatarImage } from "./styles.js";
+import { avatar, avatarImage, type AvatarClassNameOptions } from "./styles.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -15,7 +20,21 @@ declare module "react" {
 
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
 
-export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+/**
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
+ */
+export interface AvatarProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "color">,
+    AvatarClassNameOptions {
+  /**
+   * Since avatars are normally presentational data, they are hidden from screen
+   * readers by default.
+   *
+   * @defaultValue `true`
+   */
+  "aria-hidden"?: HTMLAttributes<HTMLSpanElement>["aria-hidden"];
+
   /**
    * This should be an image `src` attribute to create an avatar from. When this
    * prop is defined, you should not add any children to the avatar as the
@@ -58,22 +77,6 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
    * @remarks \@since 2.2.0
    */
   imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;
-
-  /**
-   * An optional color to apply to the avatar. This will apply a className of
-   * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map
-   * are supported by default. It is recommended to create custom colors using
-   * the `rmd-avatar-theme-update-var` mixin with custom class names if the
-   * default colors aren't extensive enough.
-   *
-   * @defaultValue `""`
-   */
-  color?: string;
-
-  /**
-   * @defaultValue `"avatar"`
-   */
-  size?: "avatar" | "icon";
 }
 
 /**
@@ -94,22 +97,27 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
  *   return <Avatar src="/path-to-img.png" />;
  * }
  * ```
+ *
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
  */
 export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
   function Avatar(props, ref) {
     const {
+      "aria-hidden": ariaHidden = true,
       className,
       children,
       src,
-      size = "avatar",
       alt = "",
+      size = "avatar",
       color = "",
+      theme,
       imgProps,
       referrerPolicy,
       ...remaining
     } = props;
 
-    let img;
+    let img: ReactNode;
     if (src || imgProps) {
       img = (
         <img
@@ -125,9 +133,14 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
     return (
       <span
         {...remaining}
+        aria-hidden={ariaHidden}
         ref={ref}
-        role="presentation"
-        className={avatar({ color, size, className })}
+        className={avatar({
+          size,
+          color,
+          theme,
+          className,
+        })}
       >
         {img}
         {children}

package/src/avatar/__tests__/Avatar.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 { Avatar } from "../Avatar.js";
 import { avatarImage } from "../styles.js";
@@ -13,8 +13,8 @@ describe("Avatar", () => {
       ref,
     } as const;
 
-    const { getByTestId, rerender } = render(<Avatar {...props} />);
-    const avatar = getByTestId("avatar");
+    const { rerender } = render(<Avatar {...props} />);
+    const avatar = screen.getByTestId("avatar");
     expect(ref.current).toBeInstanceOf(HTMLSpanElement);
     expect(ref.current).toBe(avatar);
     expect(avatar).toMatchSnapshot();
@@ -37,10 +37,10 @@ describe("Avatar", () => {
       "data-testid": "avatar",
       src: "/some-image.png",
     } as const;
-    const { getByTestId, getByRole, rerender } = render(<Avatar {...props} />);
+    const { rerender } = render(<Avatar {...props} />);
 
-    const avatar = getByTestId("avatar");
-    const img = getByRole("img");
+    const avatar = screen.getByTestId("avatar");
+    const img = screen.getByRole("img", { hidden: true });
     expect(img).toHaveAttribute("src", props.src);
     expect(img).toHaveAttribute("alt", "");
     expect(avatar).toMatchSnapshot();

package/src/avatar/__tests__/__snapshots__/Avatar.tsx.snap

@@ -2,35 +2,35 @@
 
 exports[`Avatar should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar"
   data-testid="avatar"
-  role="presentation"
 />
 `;
 
 exports[`Avatar should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar custom-class-name"
   data-testid="avatar"
-  role="presentation"
   style="color: red;"
 />
 `;
 
 exports[`Avatar should apply the correct styling, HTML attributes, and allow a ref 3`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar rmd-avatar--primary"
   data-testid="avatar"
-  role="presentation"
   style=""
 />
 `;
 
 exports[`Avatar should render an img if a src or imgProps are provided 1`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar"
   data-testid="avatar"
-  role="presentation"
 >
   <img
     alt=""
@@ -42,9 +42,9 @@ exports[`Avatar should render an img if a src or imgProps are provided 1`] = `
 
 exports[`Avatar should render an img if a src or imgProps are provided 2`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar"
   data-testid="avatar"
-  role="presentation"
 >
   <img
     alt=""
@@ -57,9 +57,9 @@ exports[`Avatar should render an img if a src or imgProps are provided 2`] = `
 
 exports[`Avatar should render an img if a src or imgProps are provided 3`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar"
   data-testid="avatar"
-  role="presentation"
 >
   <img
     alt=""