[feature/floating-ui] Merge remote-tracking branch 'origin/main' into feature/floating-ui

Author: Juan Andrade

.storybook/preview.tsx

@@ -125,7 +125,7 @@ const parameters: Preview["parameters"] = {
         },
     },
     viewport: {
-        viewports: wbViewports,
+        options: wbViewports,
     },
 };
 

__docs__/wonder-blocks-birthday-picker/birthday-picker.stories.tsx

@@ -32,8 +32,10 @@ const meta: Meta<typeof BirthdayPicker> = {
                 excludeDecorators: true,
             },
         },
+    },
+    globals: {
         viewport: {
-            defaultViewport: "large",
+            value: "large",
         },
     },
     decorators: [(Story): React.ReactElement => <View>{Story()}</View>],
@@ -189,8 +191,10 @@ export const BirthdayPickerMobile: StoryComponentType = {
                 story: "A BirthdayPicker will reflow on small screens to stack controls rather than position them side-by-side.",
             },
         },
+    },
+    globals: {
         viewport: {
-            defaultViewport: "small",
+            value: "small",
         },
     },
 };

__docs__/wonder-blocks-modal/drawer-launcher-testing-snapshots.stories.tsx

@@ -11,30 +11,6 @@ import type {ModalElement} from "../../packages/wonder-blocks-modal/src/util/typ
 import {allModes} from "../../.storybook/modes";
 import {reallyLongText} from "../components/text-for-testing";
 
-const customViewports = {
-    phone: {
-        name: "phone",
-        styles: {
-            width: "320px",
-            height: "568px",
-        },
-    },
-    tablet: {
-        name: "tablet",
-        styles: {
-            width: "640px",
-            height: "960px",
-        },
-    },
-    desktop: {
-        name: "desktop",
-        styles: {
-            width: "1024px",
-            height: "768px",
-        },
-    },
-} as const;
-
 const DefaultModal = (): ModalElement => (
     <DrawerDialog
         title="Single-line title"
@@ -58,10 +34,6 @@ export default {
                 thunderblocks: allModes.themeThunderBlocks,
             },
         },
-        viewport: {
-            viewports: customViewports,
-            defaultViewport: "desktop",
-        },
     },
     tags: ["!autodocs"],
 } as Meta<typeof DrawerLauncher>;

__docs__/wonder-blocks-modal/drawer-launcher.stories.tsx

@@ -21,30 +21,6 @@ import {allModes} from "../../.storybook/modes";
 import TextField from "../../packages/wonder-blocks-form/src/components/text-field";
 import {reallyLongText} from "../components/text-for-testing";
 
-const customViewports = {
-    phone: {
-        name: "phone",
-        styles: {
-            width: "320px",
-            height: "568px",
-        },
-    },
-    tablet: {
-        name: "tablet",
-        styles: {
-            width: "640px",
-            height: "960px",
-        },
-    },
-    desktop: {
-        name: "desktop",
-        styles: {
-            width: "1024px",
-            height: "768px",
-        },
-    },
-} as const;
-
 const DefaultModal = (): ModalElement => (
     <DrawerDialog
         title="Single-line title"
@@ -119,10 +95,6 @@ import {BodyText} from "@khanacademy/wonder-blocks-typography";
                 excludeDecorators: true,
             },
         },
-        viewport: {
-            viewports: customViewports,
-            defaultViewport: "desktop",
-        },
         chromatic: {
             modes: {
                 small: allModes.small,

__docs__/wonder-blocks-modal/flexible-dialog.stories.tsx

@@ -18,30 +18,6 @@ import celebrationBg from "../../static/celebration_bg.svg";
 import celebrationChest from "../../static/celebration-chest.svg";
 import {longText, reallyLongText} from "../components/text-for-testing";
 
-const customViewports = {
-    phone: {
-        name: "phone",
-        styles: {
-            width: "320px",
-            height: "568px",
-        },
-    },
-    tablet: {
-        name: "tablet",
-        styles: {
-            width: "640px",
-            height: "960px",
-        },
-    },
-    desktop: {
-        name: "desktop",
-        styles: {
-            width: "1024px",
-            height: "768px",
-        },
-    },
-} as const;
-
 export default {
     title: "Packages / Modal / FlexibleDialog",
     component: FlexibleDialog,
@@ -68,10 +44,6 @@ export default {
                 excludeDecorators: true,
             },
         },
-        viewport: {
-            viewports: customViewports,
-            defaultViewport: "desktop",
-        },
         chromatic: {
             modes: {
                 small: allModes.small,

__docs__/wonder-blocks-modal/modal-dialog.stories.tsx

@@ -16,30 +16,6 @@ import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-modal/package.json";
 import modalDialogArgtypes from "./modal-dialog.argtypes";
 
-const customViewports = {
-    phone: {
-        name: "phone",
-        styles: {
-            width: "320px",
-            height: "568px",
-        },
-    },
-    tablet: {
-        name: "tablet",
-        styles: {
-            width: "640px",
-            height: "960px",
-        },
-    },
-    desktop: {
-        name: "desktop",
-        styles: {
-            width: "1024px",
-            height: "768px",
-        },
-    },
-} as const;
-
 /**
  * `ModalDialog` is a component that contains these elements:
  * - The visual dialog element itself (`<div role="dialog"/>`)
@@ -76,10 +52,6 @@ export default {
                 excludeDecorators: true,
             },
         },
-        viewport: {
-            viewports: customViewports,
-            defaultViewport: "desktop",
-        },
         chromatic: {
             // We already have screenshots in one-pane-dialog.stories.tsx
             disableSnapshot: true,
@@ -242,13 +214,6 @@ export const WithLauncher: StoryComponentType = {
             </ModalLauncher>
         );
     },
-    parameters: {
-        chromatic: {
-            // Don't take screenshots of this story since it would only show a
-            // button and not the actual modal.
-            disableSnapshot: true,
-        },
-    },
 };
 
 const styles = StyleSheet.create({

__docs__/wonder-blocks-modal/modal-footer.stories.tsx

@@ -16,30 +16,6 @@ import packageConfig from "../../packages/wonder-blocks-modal/package.json";
 
 import ComponentInfo from "../components/component-info";
 
-const customViewports = {
-    phone: {
-        name: "phone",
-        styles: {
-            width: "320px",
-            height: "568px",
-        },
-    },
-    tablet: {
-        name: "tablet",
-        styles: {
-            width: "640px",
-            height: "960px",
-        },
-    },
-    desktop: {
-        name: "desktop",
-        styles: {
-            width: "1024px",
-            height: "768px",
-        },
-    },
-} as const;
-
 const longBody = (
     <>
         <BodyText>
@@ -127,10 +103,6 @@ export default {
                 excludeDecorators: true,
             },
         },
-        viewport: {
-            viewports: customViewports,
-            defaultViewport: "desktop",
-        },
         chromatic: {
             // We already have screenshots of other stories in
             // one-pane-dialog.stories.tsx

__docs__/wonder-blocks-modal/modal-header.stories.tsx

@@ -20,30 +20,6 @@ import packageConfig from "../../packages/wonder-blocks-modal/package.json";
 import ComponentInfo from "../components/component-info";
 import ModalHeaderArgtypes from "./modal-header.argtypes";
 
-const customViewports = {
-    phone: {
-        name: "phone",
-        styles: {
-            width: "320px",
-            height: "568px",
-        },
-    },
-    tablet: {
-        name: "tablet",
-        styles: {
-            width: "640px",
-            height: "960px",
-        },
-    },
-    desktop: {
-        name: "desktop",
-        styles: {
-            width: "1024px",
-            height: "768px",
-        },
-    },
-} as const;
-
 const longBody = (
     <>
         <BodyText>
@@ -154,10 +130,6 @@ export default {
                 excludeDecorators: true,
             },
         },
-        viewport: {
-            viewports: customViewports,
-            defaultViewport: "desktop",
-        },
         chromatic: {
             // We already have screenshots of other stories in
             // one-pane-dialog.stories.tsx

__docs__/wonder-blocks-modal/modal-launcher.stories.tsx

@@ -28,34 +28,9 @@ import type {ModalElement} from "../../packages/wonder-blocks-modal/src/util/typ
 import ModalLauncherArgTypes from "./modal-launcher.argtypes";
 
 import ComponentInfo from "../components/component-info";
-import {allModes} from "../../.storybook/modes";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
-const customViewports = {
-    phone: {
-        name: "phone",
-        styles: {
-            width: "320px",
-            height: "568px",
-        },
-    },
-    tablet: {
-        name: "tablet",
-        styles: {
-            width: "640px",
-            height: "960px",
-        },
-    },
-    desktop: {
-        name: "desktop",
-        styles: {
-            width: "1024px",
-            height: "768px",
-        },
-    },
-} as const;
-
 const DefaultModal = (): ModalElement => (
     <OnePaneDialog
         title="Single-line title"
@@ -104,15 +79,8 @@ export default {
                 excludeDecorators: true,
             },
         },
-        viewport: {
-            viewports: customViewports,
-            defaultViewport: "desktop",
-        },
         chromatic: {
-            modes: {
-                small: allModes.small,
-                large: allModes.large,
-            },
+            // All the examples for ModalLauncher are behavior based, not visual.
             disableSnapshot: true,
         },
     },

__docs__/wonder-blocks-modal/modal-panel.stories.tsx

@@ -18,30 +18,6 @@ import ComponentInfo from "../components/component-info";
 import modalPanelArgtypes from "./modal-panel.argtypes";
 import {allModes} from "../../.storybook/modes";
 
-const customViewports = {
-    phone: {
-        name: "phone",
-        styles: {
-            width: "320px",
-            height: "568px",
-        },
-    },
-    tablet: {
-        name: "tablet",
-        styles: {
-            width: "640px",
-            height: "960px",
-        },
-    },
-    desktop: {
-        name: "desktop",
-        styles: {
-            width: "1024px",
-            height: "768px",
-        },
-    },
-} as const;
-
 const longBody = (
     <View style={{gap: sizing.size_160}}>
         <BodyText>
@@ -136,10 +112,6 @@ export default {
                 excludeDecorators: true,
             },
         },
-        viewport: {
-            viewports: customViewports,
-            defaultViewport: "desktop",
-        },
         chromatic: {
             modes: {
                 small: allModes.small,