@react-md/core 1.0.0-next.7 → 1.0.0-next.9

package/src/theme/_theme.scss

@@ -37,6 +37,25 @@ $disable-dark-elevation: $color-scheme == light !default;
 $disable-default-system-theme: false !default;
 $disable-default-root-theme: false !default;
 
+// this should only be used if your application does not use menu, dialog,
+// sheet, card, expansion-panel, select, app-bar (theme="surface")
+$disable-surface-color: false !default;
+$disable-primary-color: false !default;
+$disable-on-primary-color: $disable-primary-color !default;
+$disable-secondary-color: false !default;
+$disable-on-secondary-color: $disable-secondary-color !default;
+$disable-warning-color: false !default;
+$disable-on-warning-color: $disable-warning-color !default;
+$disable-error-color: false !default;
+$disable-on-error-color: $disable-error-color !default;
+$disable-success-color: false !default;
+$disable-on-success-color: $disable-success-color !default;
+$disable-outline-grey-color: false !default;
+$disable-text-primary-color: false !default;
+$disable-text-secondary-color: false !default;
+$disable-text-hint-color: false !default;
+$disable-text-disabled-color: false !default;
+
 $primary-color: colors.$blue-500 !default;
 $on-primary-color: a11y.contrast-color($primary-color) !default;
 $secondary-color: colors.$orange-a-400 !default;
@@ -152,7 +171,79 @@ $theme-variables: (
   outline-grey-color
 );
 
+@function _is-var-disabled($name) {
+  @if $name == surface-color {
+    @return $disable-surface-color;
+  }
+
+  @if $name == primary-color {
+    @return $disable-primary-color;
+  }
+
+  @if $name == on-primary-color {
+    @return $disable-on-primary-color;
+  }
+
+  @if $name == secondary-color {
+    @return $disable-secondary-color;
+  }
+
+  @if $name == on-secondary-color {
+    @return $disable-on-secondary-color;
+  }
+
+  @if $name == warning-color {
+    @return $disable-warning-color;
+  }
+
+  @if $name == on-warning-color {
+    @return $disable-on-warning-color;
+  }
+
+  @if $name == error-color {
+    @return $disable-error-color;
+  }
+
+  @if $name == on-error-color {
+    @return $disable-on-error-color;
+  }
+
+  @if $name == success-color {
+    @return $disable-success-color;
+  }
+
+  @if $name == on-success-color {
+    @return $disable-on-success-color;
+  }
+
+  @if $name == text-primary-color {
+    @return $disable-text-primary-color;
+  }
+
+  @if $name == text-secondary-color {
+    @return $disable-text-secondary-color;
+  }
+
+  @if $name == text-hint-color {
+    @return $disable-text-hint-color;
+  }
+
+  @if $name == text-disabled-color {
+    @return $disable-text-disabled-color;
+  }
+
+  @if $name == outline-grey-color {
+    @return $disable-outline-grey-color;
+  }
+
+  @return false;
+}
+
 @function theme-get-var($name, $fallback: null) {
+  @if _is-var-disabled($name) {
+    @return $fallback;
+  }
+
   $var: utils.get-var-name($theme-variables, $name, "theme");
 
   @if $fallback {
@@ -175,6 +266,10 @@ $theme-variables: (
 }
 
 @mixin theme-set-var($name, $value-or-theme-name) {
+  @if _is-var-disabled($name) {
+    @error '"#{$name}" is currently disabled and cannot be changed. Set "$disable-#{$name}-var" to `true` or remove it from the Sass module overrides.';
+  }
+
   $var: utils.get-var-name($theme-variables, $name, "theme");
   $value: $value-or-theme-name;
   @if list.index($theme-variables, $value-or-theme-name) {
@@ -186,6 +281,10 @@ $theme-variables: (
 }
 
 @mixin theme-use-var($property, $name: $property, $fallback: null) {
+  @if _is-var-disabled($name) {
+    @error '"#{$name}" is currently disabled and cannot be changed. Set "$disable-#{$name}-var" to `true` or remove it from the Sass module overrides.';
+  }
+
   #{$property}: theme-get-var($name, $fallback);
 }
 
@@ -203,16 +302,27 @@ $theme-variables: (
 
 @mixin use-light-theme-colors {
   @include theme-set-var(background-color, $light-theme-background-color);
-  @if $disable-dark-elevation {
+  @if $disable-dark-elevation and not $disable-surface-color {
     @include theme-set-var(surface-color, $light-theme-surface-color);
   }
-  @include theme-set-var(text-primary-color, $light-theme-text-primary-color);
-  @include theme-set-var(
-    text-secondary-color,
-    $light-theme-text-secondary-color
-  );
-  @include theme-set-var(text-hint-color, $light-theme-text-hint-color);
-  @include theme-set-var(text-disabled-color, $light-theme-text-disabled-color);
+  @if not $disable-text-primary-color {
+    @include theme-set-var(text-primary-color, $light-theme-text-primary-color);
+  }
+  @if not $disable-text-secondary-color {
+    @include theme-set-var(
+      text-secondary-color,
+      $light-theme-text-secondary-color
+    );
+  }
+  @if not $disable-text-hint-color {
+    @include theme-set-var(text-hint-color, $light-theme-text-hint-color);
+  }
+  @if not $disable-text-disabled-color {
+    @include theme-set-var(
+      text-disabled-color,
+      $light-theme-text-disabled-color
+    );
+  }
 
   @if not $disable-dark-elevation and $color-scheme != light {
     @include use-light-theme-elevation-colors;
@@ -221,16 +331,27 @@ $theme-variables: (
 
 @mixin use-dark-theme-colors {
   @include theme-set-var(background-color, $dark-theme-background-color);
-  @if $disable-dark-elevation {
+  @if $disable-dark-elevation and not $disable-surface-color {
     @include theme-set-var(surface-color, $dark-theme-surface-color);
   }
-  @include theme-set-var(text-primary-color, $dark-theme-text-primary-color);
-  @include theme-set-var(
-    text-secondary-color,
-    $dark-theme-text-secondary-color
-  );
-  @include theme-set-var(text-hint-color, $dark-theme-text-hint-color);
-  @include theme-set-var(text-disabled-color, $dark-theme-text-disabled-color);
+  @if not $disable-text-primary-color {
+    @include theme-set-var(text-primary-color, $dark-theme-text-primary-color);
+  }
+  @if not $disable-text-secondary-color {
+    @include theme-set-var(
+      text-secondary-color,
+      $dark-theme-text-secondary-color
+    );
+  }
+  @if not $disable-text-hint-color {
+    @include theme-set-var(text-hint-color, $dark-theme-text-hint-color);
+  }
+  @if not $disable-text-disabled-color {
+    @include theme-set-var(
+      text-disabled-color,
+      $dark-theme-text-disabled-color
+    );
+  }
 
   @if not $disable-dark-elevation {
     @include use-dark-theme-elevation-colors;
@@ -239,24 +360,52 @@ $theme-variables: (
 
 @mixin theme-variables {
   @include theme-set-var(background-color, $background-color);
-  @if $disable-dark-elevation {
+  @if $disable-dark-elevation and not $disable-surface-color {
     @include theme-set-var(surface-color, $surface-color);
   }
 
-  @include theme-set-var(primary-color, $primary-color);
-  @include theme-set-var(on-primary-color, $on-primary-color);
-  @include theme-set-var(secondary-color, $secondary-color);
-  @include theme-set-var(on-secondary-color, $on-secondary-color);
-  @include theme-set-var(warning-color, $warning-color);
-  @include theme-set-var(on-warning-color, $on-warning-color);
-  @include theme-set-var(error-color, $error-color);
-  @include theme-set-var(on-error-color, $on-error-color);
-  @include theme-set-var(success-color, $success-color);
-  @include theme-set-var(on-success-color, $on-success-color);
-  @include theme-set-var(text-primary-color, $text-primary-color);
-  @include theme-set-var(text-secondary-color, $text-secondary-color);
-  @include theme-set-var(text-hint-color, $text-hint-color);
-  @include theme-set-var(text-disabled-color, $text-disabled-color);
+  @if not $disable-primary-color {
+    @include theme-set-var(primary-color, $primary-color);
+  }
+  @if not $disable-on-primary-color {
+    @include theme-set-var(on-primary-color, $on-primary-color);
+  }
+  @if not $disable-secondary-color {
+    @include theme-set-var(secondary-color, $secondary-color);
+  }
+  @if not $disable-on-secondary-color {
+    @include theme-set-var(on-secondary-color, $on-secondary-color);
+  }
+  @if not $disable-warning-color {
+    @include theme-set-var(warning-color, $warning-color);
+  }
+  @if not $disable-on-warning-color {
+    @include theme-set-var(on-warning-color, $on-warning-color);
+  }
+  @if not $disable-error-color {
+    @include theme-set-var(error-color, $error-color);
+  }
+  @if not $disable-on-error-color {
+    @include theme-set-var(on-error-color, $on-error-color);
+  }
+  @if not $disable-success-color {
+    @include theme-set-var(success-color, $success-color);
+  }
+  @if not $disable-on-success-color {
+    @include theme-set-var(on-success-color, $on-success-color);
+  }
+  @if not $disable-text-primary-color {
+    @include theme-set-var(text-primary-color, $text-primary-color);
+  }
+  @if not $disable-text-secondary-color {
+    @include theme-set-var(text-secondary-color, $text-secondary-color);
+  }
+  @if not $disable-text-hint-color {
+    @include theme-set-var(text-hint-color, $text-hint-color);
+  }
+  @if not $disable-text-disabled-color {
+    @include theme-set-var(text-disabled-color, $text-disabled-color);
+  }
 
   @if not $disable-dark-elevation {
     @if $color-scheme == dark {
@@ -268,7 +417,9 @@ $theme-variables: (
 
   @include theme-set-var(outline-width, $outline-width);
   @include theme-set-var(outline-color, $outline-color);
-  @include theme-set-var(outline-grey-color, $outline-grey-color);
+  @if not $disable-outline-grey-color {
+    @include theme-set-var(outline-grey-color, $outline-grey-color);
+  }
 }
 
 @mixin create-surface($z-value, $disable-colors: $disable-dark-elevation) {
@@ -278,7 +429,9 @@ $theme-variables: (
   @if not $disable-colors {
     @include theme-set-var(background-color, theme-get-var(surface-color));
     @include theme-use-var(background-color);
-    @include theme-use-var(color, text-primary-color);
+    @if not $disable-text-primary-color {
+      @include theme-use-var(color, text-primary-color);
+    }
   }
 }
 
@@ -351,7 +504,12 @@ $theme-variables: (
 }
 
 @mixin default-system-theme {
-  @if not $disable-default-system-theme and $color-scheme == system {
+  @if not
+    $disable-default-system-theme and
+    $disable-default-root-theme and
+    $color-scheme ==
+    system
+  {
     @media (prefers-color-scheme: dark) {
       :root {
         @content;

package/src/transition/__tests__/utils.ts

@@ -175,6 +175,31 @@ describe("getElementSizing", () => {
     expect(getComputedStyle).toHaveBeenCalledWith(clone);
     expect(removeChild).toHaveBeenCalledWith(clone);
   });
+
+  it("should add the paddingTop and paddingBottom to the maxHeight when `box-sizing: content-box` has been set", () => {
+    const scrollHeight = 1000;
+    const paddingTop = 20;
+    const paddingBottom = 16;
+    const container = document.createElement("div");
+    const element = document.createElement("div");
+    const clone = document.createElement("div");
+    container.appendChild(element);
+
+    jest.spyOn(clone, "scrollHeight", "get").mockReturnValue(scrollHeight);
+    jest.spyOn(element, "cloneNode").mockReturnValue(clone);
+    jest.spyOn(window, "getComputedStyle").mockReturnValue({
+      ...document.body.style,
+      paddingTop: "20px",
+      paddingBottom: "16px",
+      boxSizing: "content-box",
+    });
+
+    expect(getElementSizing(element)).toEqual({
+      maxHeight: scrollHeight + paddingTop + paddingBottom,
+      paddingTop,
+      paddingBottom,
+    });
+  });
 });
 
 describe("getTransitionClassNames", () => {

package/src/transition/useCollapseTransition.ts

@@ -19,21 +19,6 @@ const noop = (): void => {
   // do nothing
 };
 
-/**
- * @remarks \@since 2.0.0
- */
-export const DEFAULT_COLLAPSE_MIN_HEIGHT = 0;
-
-/**
- * @remarks \@since 2.0.0
- */
-export const DEFAULT_COLLAPSE_MIN_PADDING_TOP = 0;
-
-/**
- * @remarks \@since 2.0.0
- */
-export const DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM = 0;
-
 /**
  * @remarks \@since 2.0.0
  */
@@ -58,8 +43,7 @@ export interface CollapseConfigurationStyle {
    * are all set to `0` (default), the child will be removed from the DOM while
    * collapsed.
    *
-   * @see {@link DEFAULT_COLLAPSE_MIN_HEIGHT}
-   * @defaultValue `DEFAULT_COLLAPSE_MIN_HEIGHT`
+   * @defaultValue `0`
    */
   minHeight?: number | string;
 
@@ -72,8 +56,7 @@ export interface CollapseConfigurationStyle {
    * are all set to `0` (default), the child will be removed from the DOM while
    * collapsed.
    *
-   * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_TOP}
-   * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_TOP`
+   * @defaultValue `0`
    */
   minPaddingTop?: number | string;
 
@@ -86,8 +69,7 @@ export interface CollapseConfigurationStyle {
    * are all set to `0` (default), the child will be removed from the DOM while
    * collapsed.
    *
-   * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM}
-   * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM`
+   * @defaultValue `0`
    */
   minPaddingBottom?: number | string;
 }
@@ -307,9 +289,9 @@ export function useCollapseTransition<E extends HTMLElement>(
     className,
     transitionIn,
     timeout = DEFAULT_COLLAPSE_TIMEOUT,
-    minHeight = DEFAULT_COLLAPSE_MIN_HEIGHT,
-    minPaddingTop = DEFAULT_COLLAPSE_MIN_PADDING_TOP,
-    minPaddingBottom = DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM,
+    minHeight = 0,
+    minPaddingTop = 0,
+    minPaddingBottom = 0,
     temporary = minHeight === 0 &&
       minPaddingTop === 0 &&
       minPaddingBottom === 0,

package/src/transition/utils.ts

@@ -57,9 +57,9 @@ export interface CollapseSizing {
  * @internal
  */
 export function getElementSizing(element: HTMLElement | null): CollapseSizing {
-  let maxHeight;
-  let paddingTop;
-  let paddingBottom;
+  let maxHeight: number | undefined;
+  let paddingTop: number | undefined;
+  let paddingBottom: number | undefined;
   if (element) {
     // clone the element so that the total height and padding can be calculated
     // without being affected by the collapse transition inline styles
@@ -74,14 +74,19 @@ export function getElementSizing(element: HTMLElement | null): CollapseSizing {
     container.appendChild(cloned);
     maxHeight = cloned.scrollHeight;
     const style = window.getComputedStyle(cloned);
+    const isContentBox = style.boxSizing === "content-box";
     if (style.paddingTop) {
       paddingTop = parseFloat(style.paddingTop);
-      maxHeight + paddingTop;
+      if (isContentBox) {
+        maxHeight += paddingTop;
+      }
     }
 
     if (style.paddingBottom) {
       paddingBottom = parseFloat(style.paddingBottom);
-      maxHeight + paddingBottom;
+      if (isContentBox) {
+        maxHeight += paddingBottom;
+      }
     }
     container.removeChild(cloned);
   }

package/src/typography/SrOnly.tsx

@@ -1,13 +1,11 @@
-import { forwardRef } from "react";
+import { forwardRef, type ElementType, type HTMLAttributes } from "react";
+import { cssUtils } from "../cssUtils.js";
 import {
-  Typography,
   type CustomTypographyComponent,
   type TypographyHTMLElement,
-  type TypographyProps,
 } from "./Typography.js";
-import { cssUtils } from "../cssUtils.js";
 
-export interface SrOnlyProps extends TypographyProps {
+export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
   /** @defaultValue `"span"` */
   as?: CustomTypographyComponent;
 
@@ -54,7 +52,7 @@ export interface SrOnlyProps extends TypographyProps {
 export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
   function SrOnly(props, ref) {
     const {
-      as = "span",
+      as: AsComponent = "span",
       className,
       phoneOnly,
       focusable,
@@ -63,10 +61,12 @@ export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
       ...remaining
     } = props;
 
+    // do some type-casting so ref works
+    const Component = AsComponent as ElementType;
+
     return (
-      <Typography
+      <Component
         {...remaining}
-        as={as}
         ref={ref}
         tabIndex={tabIndex ?? (focusable ? 0 : undefined)}
         className={cssUtils({
@@ -75,7 +75,7 @@ export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
         })}
       >
         {children}
-      </Typography>
+      </Component>
     );
   }
 );

package/src/typography/Typography.tsx

@@ -62,24 +62,24 @@ export type NullableTypographyClassNameOptions = Omit<
  * @example
  * Simple Example
  * ```ts
- * import { getTypographyClassName } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
- *       <h1 className={getTypographyClassName({ type: "headline-1" })} />
- *       <h2 className={getTypographyClassName({ type: "headline-2" })} />
- *       <h3 className={getTypographyClassName({ type: "headline-3" })} />
- *       <h4 className={getTypographyClassName({ type: "headline-4" })} />
- *       <h5 className={getTypographyClassName({ type: "headline-5" })} />
- *       <h6 className={getTypographyClassName({ type: "headline-6" })} />
- *       <h5 className={getTypographyClassName({ type: "subtitle-1" })} />
- *       <h6 className={getTypographyClassName({ type: "subtitle-2" })} />
- *       <p className={getTypographyClassName()} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <caption className={getTypographyClassName({ type: "caption" })} />
- *       <span className={getTypographyClassName({ type: "overline" })} />
+ *       <h1 className={typography({ type: "headline-1" })} />
+ *       <h2 className={typography({ type: "headline-2" })} />
+ *       <h3 className={typography({ type: "headline-3" })} />
+ *       <h4 className={typography({ type: "headline-4" })} />
+ *       <h5 className={typography({ type: "headline-5" })} />
+ *       <h6 className={typography({ type: "headline-6" })} />
+ *       <h5 className={typography({ type: "subtitle-1" })} />
+ *       <h6 className={typography({ type: "subtitle-2" })} />
+ *       <p className={typography()} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <caption className={typography({ type: "caption" })} />
+ *       <span className={typography({ type: "overline" })} />
  *     </>
  *   );
  * }
@@ -88,14 +88,14 @@ export type NullableTypographyClassNameOptions = Omit<
  * @example
  * Applying Additional Styles
  * ```ts
- * import { getTypography } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
  *       <h1
  *         // only maintain the default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-1",
  *           margin: "bottom",
  *         })}
@@ -103,7 +103,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <h2
  *         // remove all default margin
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-2",
  *           margin: "none",
  *         })}
@@ -111,7 +111,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <h3
  *         // only maintain the default margin-top
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-3",
  *           margin: "top",
  *         })}
@@ -119,7 +119,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <p
  *         // center the text, set to bold, and only maintain default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type "subtitle-1",
  *           align: "center",
  *           margin: "bottom",

package/src/typography/__tests__/__snapshots__/SrOnly.tsx.snap

@@ -3,7 +3,7 @@
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Some content
   </span>
@@ -13,7 +13,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only custom-class-name"
+    class="rmd-sr-only custom-class-name"
     style="opacity: 0.3;"
   >
     Some content
@@ -24,7 +24,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 3`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only rmd-sr-only--focusable"
+    class="rmd-sr-only rmd-sr-only--focusable"
     style=""
     tabindex="0"
   >
@@ -36,7 +36,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 4`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only rmd-sr-only--focusable"
+    class="rmd-sr-only rmd-sr-only--focusable"
     style=""
     tabindex="-1"
   >
@@ -48,7 +48,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 5`] = `
 <div>
   <h4
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Some content
   </h4>