chore: add shouldBlockScroll stories (#4351)

* chore: add `shouldBlockScroll` stories * chore: add shouldBlockScroll for argtypes * chore: add shouldBlockScroll story for navbar * chore: remove unnecessary props
heroui-inc · Dec 19, 2024 · d152b36 · d152b36
1 parent e753317
commit d152b36
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 0 deletions.
diff --git a/packages/components/dropdown/stories/dropdown.stories.tsx b/packages/components/dropdown/stories/dropdown.stories.tsx
@@ -99,6 +99,11 @@ export default {
         disable: true,
       },
     },
+    shouldBlockScroll: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -815,3 +820,18 @@ export const WithFallbackPlacements = {
     </div>
   ),
 };
+
+export const WithShouldBlockScroll = {
+  render: (args) => {
+    return (
+      <div className="flex gap-8">
+        <Template {...args} label="shouldBlockScroll: false" shouldBlockScroll={false} />
+        <Template {...args} label="shouldBlockScroll: true" shouldBlockScroll={true} />
+      </div>
+    );
+  },
+
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/components/modal/stories/modal.stories.tsx b/packages/components/modal/stories/modal.stories.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/no-autofocus */
+import React from "react";
 import {Meta} from "@storybook/react";
 import {modal} from "@nextui-org/theme";
 import {Button} from "@nextui-org/button";
@@ -63,6 +64,11 @@ export default {
         disable: true,
       },
     },
+    shouldBlockScroll: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -348,3 +354,18 @@ export const DraggableOverflow = {
     ...defaultProps,
   },
 };
+
+export const WithShouldBlockScroll = {
+  render: (args) => {
+    return (
+      <div className="flex gap-8">
+        <Template {...args} label="shouldBlockScroll: false" shouldBlockScroll={false} />
+        <Template {...args} label="shouldBlockScroll: true" shouldBlockScroll={true} />
+      </div>
+    );
+  },
+
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/components/navbar/stories/navbar.stories.tsx b/packages/components/navbar/stories/navbar.stories.tsx
@@ -50,6 +50,11 @@ export default {
         type: "boolean",
       },
     },
+    shouldBlockScroll: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -615,3 +620,18 @@ export const WithSearchInput = {
     ...defaultProps,
   },
 };
+
+export const WithShouldBlockScroll = {
+  render: (args) => {
+    return (
+      <div className="flex gap-8 w-[1024px]">
+        <WithMenuTemplate {...args} label="shouldBlockScroll: false" shouldBlockScroll={false} />
+        <WithMenuTemplate {...args} label="shouldBlockScroll: true" shouldBlockScroll={true} />
+      </div>
+    );
+  },
+
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/components/popover/stories/popover.stories.tsx b/packages/components/popover/stories/popover.stories.tsx
@@ -96,6 +96,11 @@ export default {
         disable: true,
       },
     },
+    shouldBlockScroll: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -575,3 +580,18 @@ export const CustomMotion = {
     },
   },
 };
+
+export const WithShouldBlockScroll = {
+  render: (args) => {
+    return (
+      <div className="flex gap-8">
+        <Template {...args} label="shouldBlockScroll: false" shouldBlockScroll={false} />
+        <Template {...args} label="shouldBlockScroll: true" shouldBlockScroll={true} />
+      </div>
+    );
+  },
+
+  args: {
+    ...defaultProps,
+  },
+};