Update drawer stories and components in UI and TailwindCSS packages

Author: thevuong

apps/docs/src/stories/drawer/drawer.stories.tsx

@@ -61,7 +61,7 @@ export const Simple: Story = {
   render: Default.render,
 };
 
-export const Scrolling: Story = {
+export const ScrollingHorizontal: Story = {
   render: (args) => (
     <Drawer {...args}>
       <DrawerTrigger asChild>
@@ -86,6 +86,10 @@ export const Scrolling: Story = {
           {Array.from({ length: 80 }).map(() => (
             <br key={Math.random()} />
           ))}
+          <p>
+            End of content. This is some placeholder content to show a
+            vertically
+          </p>
         </DrawerBody>
         <DrawerFooter>
           <DrawerClose variant="outline">Secondary</DrawerClose>
@@ -96,24 +100,93 @@ export const Scrolling: Story = {
   ),
 };
 
-export const LeftScrolling: Story = {
-  args: {
-    position: 'left',
-  },
-  render: Scrolling.render,
+export const ScrollingVertical: Story = {
+  render: (args) => (
+    <Drawer {...args}>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DrawerTrigger>
+
+      <DrawerContent className="max-h-96">
+        <DrawerHeader>
+          <DrawerTitle>Drawer Title</DrawerTitle>
+          <DrawerDescription>Drawer Description</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody className="p-6">
+          <p>
+            This is some placeholder content to show a vertically centered
+            modal. We&apos;ve added some extra copy here to show how vertically
+            centering the modal works when combined with scrollable modals. We
+            also use some repeated line breaks to quickly extend the height of
+            the content, thereby triggering the scrolling. When content becomes
+            longer than the predefined max-height of modal, content will be
+            cropped and scrollable within the modal.
+          </p>
+          {Array.from({ length: 80 }).map(() => (
+            <br key={Math.random()} />
+          ))}
+          <p>
+            End of content. This is some placeholder content to show a
+            vertically
+          </p>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose variant="outline">Secondary</DrawerClose>
+          <DrawerClose>Primary</DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
 };
 
 export const Scrollable: Story = {
   args: {
     scrollable: true,
   },
-  render: Scrolling.render,
+  render: ScrollingHorizontal.render,
+};
+
+export const Left: Story = {
+  args: {
+    side: 'left',
+  },
+  render: ScrollingHorizontal.render,
 };
 
 export const LeftScrollable: Story = {
   args: {
-    position: 'left',
+    side: 'left',
+    scrollable: true,
+  },
+  render: ScrollingHorizontal.render,
+};
+
+export const Top: Story = {
+  args: {
+    side: 'top',
+  },
+  render: ScrollingVertical.render,
+};
+
+export const TopScrollable: Story = {
+  args: {
+    side: 'top',
+    scrollable: true,
+  },
+  render: ScrollingVertical.render,
+};
+
+export const Bottom: Story = {
+  args: {
+    side: 'bottom',
+  },
+  render: ScrollingVertical.render,
+};
+
+export const BottomScrollable: Story = {
+  args: {
+    side: 'bottom',
     scrollable: true,
   },
-  render: Scrolling.render,
+  render: ScrollingVertical.render,
 };

packages/tailwindcss/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/tailwindcss
 
+## 0.1.49
+
+### Patch Changes
+
+- Update drawer stories and components
+
 ## 0.1.48
 
 ### Patch Changes

packages/tailwindcss/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/tailwindcss",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "license": "MIT",
   "sideEffects": false,
   "exports": {