@khanacademy/wonder-blocks-modal 4.0.39 → 4.1.0

package/src/components/modal-dialog.tsx

@@ -1,14 +1,16 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
-import {
-    MediaLayout,
-    MediaLayoutContext,
-    MEDIA_MODAL_SPEC,
-} from "@khanacademy/wonder-blocks-layout";
 import {View} from "@khanacademy/wonder-blocks-core";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import type {MediaLayoutContextValue} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+
+import {
+    ThemedStylesFn,
+    useScopedTheme,
+    useStyles,
+} from "@khanacademy/wonder-blocks-theming";
+import ThemeModalDialog, {
+    ModalDialogThemeContext,
+    ModalDialogThemeContract,
+} from "../themes/themed-modal-dialog";
 
 type Props = {
     /**
@@ -42,7 +44,7 @@ type Props = {
      */
     testId?: string;
     /**
-     * The ID of the content labelling this dialog, if applicable.
+     * The ID of the title labelling this dialog, if applicable.
      */
     "aria-labelledby"?: string;
     /**
@@ -51,10 +53,6 @@ type Props = {
     "aria-describedby"?: string;
 };
 
-type DefaultProps = {
-    role: Props["role"];
-};
-
 /**
  * `ModalDialog` is a component that contains these elements:
  * - The visual dialog element itself (`<div role="dialog"/>`)
@@ -65,102 +63,104 @@ type DefaultProps = {
  * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the dialog element doesn’t have to have
  * the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
  */
-export default class ModalDialog extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        role: "dialog",
-    };
+const ModalDialogCore = React.forwardRef(function ModalDialogCore(
+    props: Props,
+    ref: React.ForwardedRef<HTMLDivElement>,
+) {
+    const {
+        above,
+        below,
+        role = "dialog",
+        style,
+        children,
+        testId,
+        /* eslint-disable react/prop-types */
+        // the react/prop-types plugin does not like these
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        /* eslint-enable react/prop-types */
+    } = props;
 
-    render(): React.ReactNode {
-        const {
-            above,
-            below,
-            role,
-            style,
-            children,
-            testId,
-            /* eslint-disable react/prop-types */
-            // the react/prop-types plugin does not like these
-            "aria-labelledby": ariaLabelledBy,
-            "aria-describedby": ariaDescribedBy,
-            /* eslint-enable react/prop-types */
-        } = this.props;
+    const {theme} = useScopedTheme(ModalDialogThemeContext);
+    const styles = useStyles(themedStylesFn, theme);
 
-        const contextValue: MediaLayoutContextValue = {
-            ssrSize: "large",
-            mediaSpec: MEDIA_MODAL_SPEC,
-        };
+    return (
+        <View style={[styles.wrapper, style]}>
+            {below && <View style={styles.below}>{below}</View>}
+            <View
+                role={role}
+                aria-modal="true"
+                aria-labelledby={ariaLabelledBy}
+                aria-describedby={ariaDescribedBy}
+                ref={ref}
+                style={styles.dialog}
+                testId={testId}
+            >
+                {children}
+            </View>
+            {above && <View style={styles.above}>{above}</View>}
+        </View>
+    );
+});
 
-        return (
-            <MediaLayoutContext.Provider value={contextValue}>
-                <MediaLayout styleSheets={styleSheets}>
-                    {({styles}) => (
-                        <View style={[styles.wrapper, style]}>
-                            {below && <View style={styles.below}>{below}</View>}
-                            <View
-                                role={role}
-                                aria-modal="true"
-                                aria-labelledby={ariaLabelledBy}
-                                aria-describedby={ariaDescribedBy}
-                                style={styles.dialog}
-                                testId={testId}
-                            >
-                                {children}
-                            </View>
-                            {above && <View style={styles.above}>{above}</View>}
-                        </View>
-                    )}
-                </MediaLayout>
-            </MediaLayoutContext.Provider>
-        );
-    }
-}
+const ModalDialog = React.forwardRef(function ModalDialog(
+    props: Props,
+    ref: React.ForwardedRef<HTMLDivElement>,
+) {
+    return (
+        <ThemeModalDialog>
+            <ModalDialogCore {...props} ref={ref} />
+        </ThemeModalDialog>
+    );
+});
 
-const styleSheets = {
-    all: StyleSheet.create({
-        wrapper: {
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "stretch",
-            width: "100%",
-            height: "100%",
-            position: "relative",
-        },
+const small = "@media (max-width: 767px)";
 
-        /**
-         * Ensures the dialog container uses the container size
-         */
-        dialog: {
-            width: "100%",
-            height: "100%",
-            borderRadius: 4,
-            overflow: "hidden",
+const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
+    wrapper: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "stretch",
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        [small]: {
+            padding: theme.spacing.dialog.small,
+            flexDirection: "column",
         },
+    },
 
-        above: {
-            pointerEvents: "none",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            zIndex: 1,
-        },
+    /**
+     * Ensures the dialog container uses the container size
+     */
+    dialog: {
+        width: "100%",
+        height: "100%",
+        borderRadius: theme.border.radius,
+        overflow: "hidden",
+    },
 
-        below: {
-            pointerEvents: "none",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            zIndex: -1,
-        },
-    }),
+    above: {
+        pointerEvents: "none",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        zIndex: 1,
+    },
 
-    small: StyleSheet.create({
-        wrapper: {
-            padding: Spacing.medium_16,
-            flexDirection: "column",
-        },
-    }),
-} as const;
+    below: {
+        pointerEvents: "none",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        zIndex: -1,
+    },
+});
+
+ModalDialog.displayName = "ModalDialog";
+
+export default ModalDialog;

package/src/themes/default.ts

@@ -0,0 +1,14 @@
+import {tokens} from "@khanacademy/wonder-blocks-theming";
+
+const theme = {
+    border: {
+        radius: tokens.border.radius.medium_4,
+    },
+    spacing: {
+        dialog: {
+            small: tokens.spacing.medium_16,
+        },
+    },
+};
+
+export default theme;

package/src/themes/themed-modal-dialog.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import {
+    createThemeContext,
+    Themes,
+    ThemeSwitcherContext,
+} from "@khanacademy/wonder-blocks-theming";
+
+import defaultTheme from "./default";
+
+type Props = {
+    children: React.ReactNode;
+};
+
+export type ModalDialogThemeContract = typeof defaultTheme;
+
+/**
+ * The themes available to the ModalDialog component.
+ */
+const themes: Themes<ModalDialogThemeContract> = {
+    default: defaultTheme,
+    // khanmigo: khanmigoTheme,
+};
+
+/**
+ * The context that provides the theme to the ModalDialog component.
+ * This is generally consumed via the `useScopedTheme` hook.
+ */
+export const ModalDialogThemeContext = createThemeContext(defaultTheme);
+
+/**
+ * ThemeModalDialog is a component that provides a theme to the <ModalDialog/>
+ * component.
+ */
+export default function ThemeModalDialog(props: Props) {
+    const currentTheme = React.useContext(ThemeSwitcherContext);
+
+    const theme = themes[currentTheme] || defaultTheme;
+    return (
+        <ModalDialogThemeContext.Provider value={theme}>
+            {props.children}
+        </ModalDialogThemeContext.Provider>
+    );
+}

package/tsconfig-build.json

@@ -14,6 +14,7 @@
         {"path": "../wonder-blocks-icon-button/tsconfig-build.json"},
         {"path": "../wonder-blocks-layout/tsconfig-build.json"},
         {"path": "../wonder-blocks-spacing/tsconfig-build.json"},
+        {"path": "../wonder-blocks-theming/tsconfig-build.json"},
         {"path": "../wonder-blocks-timing/tsconfig-build.json"},
         {"path": "../wonder-blocks-typography/tsconfig-build.json"},
     ]