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

package/src/box/_box.scss

@@ -33,41 +33,21 @@ $item-min-size: 8rem !default;
 /// ```
 $grids: () !default;
 
-$var-lookup: (
-  gap: (
-    var: --rmd-box-gap,
-    value: $gap,
-  ),
-  padding: (
-    var: --rmd-box-padding,
-    value: $padding,
-  ),
-  min-size: (
-    var: --rmd-box-item-min-size,
-    value: $item-min-size,
-  ),
-  columns: (
-    var: --rmd-box-columns,
-    value: auto-fit,
-  ),
-);
+$variables: (gap, padding, item-min-size, columns);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "box 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, "box");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "box var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "box")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -94,6 +74,15 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(gap, $gap);
+    @include set-var(padding, $padding);
+    @include set-var(item-min-size, $item-min-size);
+    @include set-var(columns, auto-fit);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-box {
@@ -149,7 +138,7 @@ $var-lookup: (
           display: grid;
           grid-template-columns: repeat(
             get-var(columns),
-            minmax(get-var(min-size), 1fr)
+            minmax(get-var(item-min-size), 1fr)
           );
         }
 
@@ -159,7 +148,7 @@ $var-lookup: (
 
         @if not $disable-grid-columns {
           &--grid-columns {
-            @include set-var(min-size, 0);
+            @include set-var(item-min-size, 0);
           }
         }
 

package/src/button/TooltippedButton.tsx

@@ -0,0 +1,120 @@
+"use client";
+import { forwardRef, type ReactNode } from "react";
+import { Tooltip, type TooltipProps } from "../tooltip/Tooltip.js";
+import {
+  useTooltip,
+  type ProvidedTooltipProps,
+  type TooltipOptions,
+  type TooltippedElementEventHandlers,
+} from "../tooltip/useTooltip.js";
+import { Button, type ButtonProps } from "./Button.js";
+import { type ButtonType } from "./buttonStyles.js";
+
+const noop = (): void => {
+  // do nothing
+};
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TooltippedButtonProps extends ButtonProps {
+  /** @defaultValue `"icon"` */
+  buttonType?: ButtonType;
+
+  /**
+   * The tooltip children to render. When this is falsey, the tooltip event
+   * listeners will not be enabled and the tooltip will never display.
+   */
+  tooltip?: ReactNode;
+
+  /**
+   * Any additional props to pass to the `Tooltip` component (normally styling
+   * props).
+   */
+  tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;
+
+  /**
+   * Any additional tooltip options to pass to {@link useTooltip}. The most
+   * common options would be:
+   *
+   * ```ts
+   * tooltipOptions={{
+   *   overflowOnly: true,
+   *
+   *   // whatever values you want for these
+   *   hoverTimeout: 0,
+   *   leaveTimeout: 150,
+   *   defaultPosition: "left",
+   * }}
+   * ```
+   */
+  tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;
+}
+
+/**
+ * **Client Component**
+ *
+ * A simple wrapper around the `Button` and `Tooltip` components to dynamically
+ * add tooltips to buttons. The `buttonType` will default to `icon` instead of
+ * `text`.
+ *
+ * @example
+ * ```tsx
+ * import { TooltippedButton } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ *
+ * export default function Example(): ReactElement {
+ *   return (
+ *     <TooltippedButton tooltip="I am a tooltip!" aria-label="Favorite">
+ *       <FavoriteIcon />
+ *     </TooltippedButton>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export const TooltippedButton = forwardRef<
+  HTMLButtonElement,
+  TooltippedButtonProps
+>(function TooltippedButton(props, ref) {
+  const {
+    tooltip,
+    tooltipProps,
+    tooltipOptions,
+    buttonType = "icon",
+    onBlur = noop,
+    onFocus = noop,
+    onMouseEnter = noop,
+    onMouseLeave = noop,
+    onTouchStart = noop,
+    onTouchEnd = noop,
+    onContextMenu = noop,
+    ...remaining
+  } = props;
+  const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({
+    ...tooltipOptions,
+    disabled: !tooltip || tooltipOptions?.disabled,
+    onBlur,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchEnd,
+    onTouchStart,
+    onContextMenu,
+  });
+
+  return (
+    <>
+      <Button
+        {...elementProps}
+        {...remaining}
+        ref={ref}
+        buttonType={buttonType}
+      />
+      <Tooltip {...providedTooltipProps} {...tooltipProps}>
+        {tooltip}
+      </Tooltip>
+    </>
+  );
+});

package/src/button/__tests__/TooltippedButton.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "@jest/globals";
+import { createRef } from "react";
+import { FontIcon } from "../../icon/FontIcon.js";
+import { render, screen, userEvent } from "../../test-utils/index.js";
+import {
+  TooltippedButton,
+  type TooltippedButtonProps,
+} from "../TooltippedButton.js";
+
+describe("TooltippedButton", () => {
+  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
+    const ref = createRef<HTMLButtonElement>();
+    const props = {
+      ref,
+      children: "Content",
+    } as const;
+    const { rerender } = render(<TooltippedButton {...props} />);
+
+    const button = screen.getByRole("button", { name: "Content" });
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    expect(ref.current).toBe(button);
+    expect(button).toMatchSnapshot();
+
+    rerender(
+      <TooltippedButton
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(button).toMatchSnapshot();
+  });
+
+  it("should only display a tooltip when the tooltip prop is truthy", async () => {
+    const user = userEvent.setup();
+    const props: TooltippedButtonProps = {
+      "aria-label": "Favorite",
+      tooltipOptions: {
+        hoverTimeout: 0,
+      },
+      children: <FontIcon>favorite</FontIcon>,
+    };
+    const { rerender } = render(<TooltippedButton {...props} />);
+
+    const button = screen.getByRole("button", { name: "Favorite" });
+    await user.hover(button);
+
+    expect(() => screen.getByRole("tooltip")).toThrow();
+
+    await user.unhover(button);
+    expect(() => screen.getByRole("tooltip")).toThrow();
+
+    rerender(<TooltippedButton {...props} tooltip="Tooltip" />);
+    await user.hover(button);
+    const tooltip = await screen.findByRole("tooltip", { name: "Tooltip" });
+
+    await user.unhover(button);
+    expect(tooltip).not.toBeInTheDocument();
+  });
+});

package/src/button/__tests__/__snapshots__/TooltippedButton.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TooltippedButton should apply the correct styling, HTML attributes, and allow a ref 1`] = `
+<button
+  class="rmd-button rmd-button--icon rmd-interaction-surface"
+  id=":r0:"
+  type="button"
+>
+  <span>
+    Content
+  </span>
+</button>
+`;
+
+exports[`TooltippedButton should apply the correct styling, HTML attributes, and allow a ref 2`] = `
+<button
+  class="rmd-button rmd-button--icon rmd-interaction-surface custom-class-name"
+  id=":r0:"
+  style="color: white;"
+  type="button"
+>
+  <span>
+    Content
+  </span>
+</button>
+`;

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/Card.tsx

@@ -62,9 +62,10 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
     const {
       children,
       className,
-      bordered = false,
-      raisable = false,
-      fullWidth = false,
+      bordered,
+      raisable,
+      fullWidth,
+      interactable,
       ...remaining
     } = props;
 
@@ -77,6 +78,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
           bordered,
           raisable,
           fullWidth,
+          interactable,
         })}
       >
         {children}

package/src/card/CardContent.tsx

@@ -22,9 +22,9 @@ export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
     const {
       children,
       className,
-      disablePadding = false,
-      disableSecondaryColor = false,
-      disableLastChildPadding = false,
+      disablePadding,
+      disableSecondaryColor,
+      disableLastChildPadding,
       ...remaining
     } = props;
 

package/src/card/ClickableCard.tsx

@@ -0,0 +1,105 @@
+"use client";
+import { cnb } from "cnbuilder";
+import { forwardRef, type MouseEventHandler } from "react";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
+import { Card, type CardProps } from "./Card.js";
+
+const noop = (): void => {
+  // do nothing
+};
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ClickableCardProps extends CardProps {
+  onClick: MouseEventHandler<HTMLDivElement>;
+
+  /**
+   * Set this to `true` to disable all click events.
+   *
+   * Note: Any disabled styling will need to be manually applied.
+   *
+   * @defaultValue `false`
+   */
+  disabled?: boolean;
+}
+
+/**
+ * A Small wrapper around the `Card` component that is clickable and has the
+ * element interaction enabled (ripples).
+ *
+ * @example
+ * SImple Example
+ * ```tsx
+ * import { CardContent, ClickableCard } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ *
+ * export default function ClickableCardExample(): ReactElement {
+ *   return (
+ *     <ClickableCard
+ *       onClick={() => {
+ *         // do something
+ *       }}
+ *     >
+ *       <CardContent>Wow</CardContent>
+ *     </ClickableCard>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(
+  function ClickableCard(props, ref) {
+    const {
+      role = "button",
+      disabled,
+      tabIndex = disabled ? undefined : 0,
+      onClick,
+      onKeyDown = noop,
+      className,
+      children: propChildren,
+      ...remaining
+    } = props;
+    const { handlers, ripples } = useElementInteraction(remaining);
+    const children = useHigherContrastChildren(propChildren);
+
+    return (
+      <Card
+        {...remaining}
+        {...handlers}
+        aria-disabled={disabled || undefined}
+        ref={ref}
+        role={role}
+        tabIndex={tabIndex}
+        className={cnb("rmd-card--clickable", className)}
+        onClick={(event) => {
+          if (disabled) {
+            return;
+          }
+
+          onClick(event);
+        }}
+        onKeyDown={(event) => {
+          onKeyDown(event);
+          if (disabled) {
+            return;
+          }
+
+          const isSpace = event.key === " ";
+          if (isSpace || event.key === "Enter") {
+            if (isSpace) {
+              event.preventDefault();
+            }
+
+            event.currentTarget.click();
+          }
+        }}
+      >
+        {children}
+        {ripples}
+      </Card>
+    );
+  }
+);

package/src/card/__tests__/ClickableCard.tsx

@@ -0,0 +1,66 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { createRef } from "react";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
+import { ClickableCard } from "../ClickableCard.js";
+
+describe("ClickableCard", () => {
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    const props = {
+      "data-testid": "card",
+      ref,
+      onClick: jest.fn(),
+    } as const;
+    const { rerender } = render(<ClickableCard {...props} />);
+
+    const element = screen.getByTestId("card");
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+    expect(ref.current).toBe(element);
+    expect(element).toMatchSnapshot();
+
+    rerender(
+      <ClickableCard
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(element).toMatchSnapshot();
+  });
+
+  it("should not have a tabIndex while disabled", () => {
+    render(<ClickableCard data-testid="card" disabled onClick={jest.fn()} />);
+    const card = screen.getByTestId("card");
+    expect(card).toHaveAttribute("aria-disabled");
+    expect(card).not.toHaveAttribute("tabIndex");
+  });
+
+  it("should keyboard click correctly", () => {
+    const onClick = jest.fn();
+    render(<ClickableCard data-testid="card" onClick={onClick} />);
+
+    const card = screen.getByTestId("card");
+    expect(onClick).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(card, { key: " " });
+    expect(onClick).toHaveBeenCalledTimes(1);
+
+    fireEvent.keyDown(card, { key: "Enter" });
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
+
+  it("should not fire the click event while disabled", () => {
+    const onClick = jest.fn();
+    render(<ClickableCard data-testid="card" onClick={onClick} disabled />);
+    const card = screen.getByTestId("card");
+
+    fireEvent.click(card);
+    expect(onClick).toHaveBeenCalledTimes(0);
+
+    fireEvent.keyDown(card, { key: " " });
+    expect(onClick).toHaveBeenCalledTimes(0);
+
+    fireEvent.keyDown(card, { key: "Enter" });
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+});

package/src/card/__tests__/__snapshots__/CardHeader.tsx.snap

@@ -18,7 +18,7 @@ exports[`CardHeader should allow addons before and after the children 1`] = `
       Elizabeth Park
     </h5>
     <h6
-      class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle"
+      class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle rmd-text-secondary-color"
     >
       Work contact
     </h6>

package/src/card/__tests__/__snapshots__/CardSubtitle.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`CardSubtitle should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <h6
-  class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle"
+  class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle rmd-text-secondary-color"
 >
   Subtitle
 </h6>
@@ -10,7 +10,7 @@ exports[`CardSubtitle should apply the correct styling, HTML attributes, and all
 
 exports[`CardSubtitle should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <h6
-  class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle custom-class-name"
+  class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle rmd-text-secondary-color custom-class-name"
   style="color: white;"
 >
   Subtitle

package/src/card/__tests__/__snapshots__/ClickableCard.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClickableCard should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<div
+  class="rmd-card rmd-card--shadowed rmd-card--clickable"
+  data-testid="card"
+  role="button"
+  tabindex="0"
+/>
+`;
+
+exports[`ClickableCard should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<div
+  class="rmd-card rmd-card--shadowed rmd-card--clickable custom-class-name"
+  data-testid="card"
+  role="button"
+  style="color: white;"
+  tabindex="0"
+/>
+`;

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

@@ -8,6 +8,6 @@ exports[`cardHeader should be callable without any arguments 1`] = `"rmd-card__h
 
 exports[`cardHeaderContent should be callable without any arguments 1`] = `"rmd-card__header-content"`;
 
-exports[`cardSubtitle should be callable without any arguments 1`] = `"rmd-card__subtitle"`;
+exports[`cardSubtitle should be callable without any arguments 1`] = `"rmd-card__subtitle rmd-text-secondary-color"`;
 
 exports[`cardTitle should be callable without any arguments 1`] = `"rmd-card__title"`;