fix: pr comments

Author: Adzouz

docs/stories/04-components/Drawer.mdx

@@ -79,7 +79,9 @@ Optional. Flex container for custom actions.
 
 ## Positions
 
-The drawer can be positioned on any edge via the `side` prop.
+The drawer can be positioned on any edge via the `direction` prop (can be `left`, `right`, `top` or `bottom`).
+
+The width will be forced at 100% on mobile devices.
 
 ## Header visible
 

docs/stories/04-components/Drawer.stories.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Button, Drawer, Field, Flex } from '@strapi/design-system';
+import { Button, Drawer, Field, Flex, Typography } from '@strapi/design-system';
 import { outdent } from 'outdent';
 
 interface DrawerArgs
   extends Drawer.Props,
-    Pick<Drawer.ContentProps, 'side' | 'width' | 'height' | 'maxWidth' | 'maxHeight' | 'padding'>,
+    Pick<Drawer.ContentProps, 'direction' | 'width' | 'height' | 'maxWidth' | 'maxHeight' | 'padding'>,
     Pick<Drawer.HeaderProps, 'hasToggle' | 'hasClose'> {
   headerVisible?: boolean;
   overlayVisible?: boolean;
@@ -30,7 +30,7 @@ const meta: Meta<DrawerArgs> = {
             <Drawer.Trigger>
               <Button>Open drawer</Button>
             </Drawer.Trigger>
-            <Drawer.Content side="right">
+            <Drawer.Content direction="right">
               <Drawer.Header hasClose={hasClose} hasToggle={hasToggle}>
                 <Drawer.Title>Drawer title</Drawer.Title>
               </Drawer.Header>
@@ -52,20 +52,20 @@ const meta: Meta<DrawerArgs> = {
   },
   args: {
     defaultOpen: false,
-    side: 'right',
+    direction: 'right',
     headerVisible: false,
     overlayVisible: true,
     hasClose: true,
     hasToggle: true,
   },
   argTypes: {
-    side: {
+    direction: {
       control: 'select',
       options: ['top', 'right', 'bottom', 'left'],
     },
   },
   render: ({
-    side,
+    direction,
     width,
     height,
     maxWidth,
@@ -85,7 +85,7 @@ const meta: Meta<DrawerArgs> = {
           </Drawer.Trigger>
         )}
         <Drawer.Content
-          side={side}
+          direction={direction}
           width={width}
           {...(height !== undefined && { height })}
           {...(maxWidth !== undefined && { maxWidth })}
@@ -96,10 +96,34 @@ const meta: Meta<DrawerArgs> = {
             <Drawer.Title>Drawer title</Drawer.Title>
           </Drawer.Header>
           <Drawer.Body>
-            <Field.Root name="example">
-              <Field.Label>Example field</Field.Label>
-              <Field.Input placeholder="Type something…" />
-            </Field.Root>
+            <Typography>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie odio dui. Cras egestas ultrices
+              pulvinar. Cras in pellentesque neque. Vestibulum imperdiet ex vitae felis lobortis, sed facilisis ligula
+              laoreet. Proin iaculis molestie felis. Curabitur ultrices turpis nec rutrum facilisis. Suspendisse in
+              ligula in est euismod feugiat. Proin vestibulum eros massa, et accumsan justo interdum dictum. Vestibulum
+              sed varius urna. Ut pellentesque fermentum sodales. Suspendisse venenatis eros vitae lorem rutrum tempus.
+              Suspendisse diam erat, semper gravida finibus et, tincidunt a erat. Curabitur placerat imperdiet urna, sit
+              amet aliquet lorem rutrum sit amet. Aliquam et molestie nisl. Quisque at nisl et eros sollicitudin blandit
+              bibendum ac augue. Quisque nec facilisis tortor. Nulla ex urna, scelerisque ultricies leo eget, iaculis
+              laoreet ipsum. Suspendisse potenti. Sed eget porttitor lectus. Nullam in ipsum vel enim facilisis gravida.
+              Duis posuere porttitor erat eu maximus. Morbi viverra tempus ante. Phasellus gravida ligula vel elit
+              lacinia, ut finibus urna interdum. In cursus rhoncus accumsan. Cras at mattis massa. Mauris tempor ipsum
+              quam. Integer augue eros, accumsan in ante nec, tincidunt ultrices nisl. Integer ut enim enim. Vivamus
+              posuere metus et nibh pharetra, at bibendum dolor porttitor. Fusce iaculis eleifend lectus, ut rutrum
+              sapien auctor et. In vitae risus lacus. Quisque ex mauris, venenatis vel nisi in, dictum suscipit tortor.
+              Aliquam non justo cursus, dictum libero eget, viverra velit. Sed velit nisi, rutrum ut tempor et, ornare
+              sit amet risus. Mauris ornare eleifend justo et viverra. Morbi feugiat nulla vitae sodales auctor. Donec
+              laoreet quam nibh, vel mattis ligula venenatis et. Ut vel tempor eros. Suspendisse at est scelerisque,
+              rutrum mi non, congue enim. Ut laoreet feugiat ante non lobortis. Vivamus convallis libero condimentum
+              nisl pellentesque, quis feugiat nunc suscipit. Maecenas laoreet dui nec nisi placerat tincidunt. Integer
+              elementum, mauris eu suscipit rutrum, lectus sapien porttitor odio, a egestas velit nibh in eros.
+              Vestibulum eu quam eu lorem bibendum maximus. Sed ac commodo sapien. Suspendisse congue lacus id finibus
+              auctor. Cras eu placerat leo. Pellentesque ut elit bibendum, auctor massa eget, mollis lacus. In porttitor
+              semper ante, sed gravida metus porta id. In scelerisque neque non laoreet faucibus. Aenean molestie
+              pellentesque leo quis pharetra. Nam sit amet dictum lacus. Fusce eget condimentum justo. Integer lacus
+              lectus, sagittis non ultrices sit amet, hendrerit ac mi. Quisque non laoreet erat. Mauris nec nulla erat.
+              Suspendisse potenti.
+            </Typography>
           </Drawer.Body>
           <Drawer.Footer>
             <Drawer.Close>
@@ -132,36 +156,36 @@ export const DefaultOpen = {
   name: 'default open',
 } satisfies Story;
 
-export const SideRight = {
+export const DirectionRight = {
   args: {
     defaultOpen: true,
-    side: 'right',
+    direction: 'right',
   },
-  name: 'side right',
+  name: 'direction right',
 } satisfies Story;
 
-export const SideLeft = {
+export const DirectionLeft = {
   args: {
     defaultOpen: true,
-    side: 'left',
+    direction: 'left',
   },
-  name: 'side left',
+  name: 'direction left',
 } satisfies Story;
 
-export const SideTop = {
+export const DirectionTop = {
   args: {
     defaultOpen: true,
-    side: 'top',
+    direction: 'top',
   },
-  name: 'side top',
+  name: 'direction top',
 } satisfies Story;
 
-export const SideBottom = {
+export const DirectionBottom = {
   args: {
     defaultOpen: true,
-    side: 'bottom',
+    direction: 'bottom',
   },
-  name: 'side bottom',
+  name: 'direction bottom',
 } satisfies Story;
 
 export const HeaderVisible = {
@@ -170,7 +194,7 @@ export const HeaderVisible = {
       source: {
         code: outdent`
           <Drawer.Root headerVisible defaultOpen={false}>
-            <Drawer.Content side="bottom" width="100%" padding={0}>
+            <Drawer.Content direction="bottom" width="100%" padding={0}>
               <Drawer.Header hasToggle={false}>
                 <Drawer.Title>Drawer title</Drawer.Title>
               </Drawer.Header>
@@ -192,7 +216,7 @@ export const HeaderVisible = {
   args: {
     defaultOpen: false,
     headerVisible: true,
-    side: 'bottom',
+    direction: 'bottom',
     width: '100%',
     padding: 0,
   },