fix

Author: daBack

packages/storybook/src/stories/drawer.stories.tsx

@@ -23,7 +23,7 @@ export const BasicExample = meta.story({
   },
   render: (args) => (
     <div>
-      <p>some content within the page</p>
+      <p>some content within the page. Make sure the Drawer is placed in the root.</p>
       <ScoutDrawer {...args}>
         <p>Content inside the drawer</p>
       </ScoutDrawer>

packages/ui-webc/src/components/drawer/drawer.css

@@ -1,3 +1,9 @@
+.drawer {
+  width: 100%;
+}
+/**
+ * Mobile style
+ */
 .drawer--container {
   position: fixed;
   bottom: 0;
@@ -33,13 +39,15 @@
 }
 
 .open {
-  animation: drawerOpen 0.3s ease-out forwards;
+  animation: drawerOpen 0.3s ease-in-out forwards;
 }
 .close {
-  animation: drawerClose 0.3s ease-out forwards;
+  animation: drawerClose 0.3s ease-in-out forwards;
 }
 
-/* Desktop drawer style */
+/**
+ * Desktop style
+ */
 @media screen and (min-width: 901px) {
   @keyframes drawerOpen {
     from {
@@ -66,17 +74,18 @@
     height: 100%;
     max-height: 100%;
     max-width: 90%;
+    min-height: 600px;
     width: 430px;
     transform: translateX(100%);
     border-top-left-radius: var(--spacing-5);
     border-bottom-left-radius: var(--spacing-5);
     border-top-right-radius: 0;
   }
   .open {
-    animation: drawerOpen 0.3s ease-out forwards;
+    animation: drawerOpen 0.3s ease-in-out forwards;
   }
   .close {
-    animation: drawerClose 0.3s ease-out forwards;
+    animation: drawerClose 0.3s ease-in-out forwards;
   }
 }
 

packages/ui-webc/src/components/drawer/drawer.tsx

@@ -65,9 +65,7 @@ export class ScoutDrawer implements ComponentInterface {
   componentWillLoad(): Promise<void> | void {
     this.focusedNode = document.activeElement;
   }
-  componentDidLoad(): void {
-    this.setDrawerOpenState(true);
-  }
+
   disconnectedCallback(): void {
     this.focusedNode;
   }

packages/ui-webc/src/components/drawer/readme.md

@@ -8,11 +8,11 @@
 | Property                | Attribute                 | Description                                                                                            | Type      | Default |
 | ----------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------ | --------- | ------- |
 | `backButtonLabel`       | `back-button-label`       | Back button label.                                                                                     | `string`  | `""`    |
-| `disableBackdrop`       | `disable-backdrop`        | Disable backdrop for the drawer. Will also make it clickable to close the drawer.                      | `boolean` | `false` |
+| `disableBackdrop`       | `disable-backdrop`        | Disable backdrop for the drawer.                                                                       | `boolean` | `false` |
 | `disableContentPadding` | `disable-content-padding` | Disable drawer content padding. Use only if you have specific use case and you need to use full width. | `boolean` | `false` |
-| `exitButtonLabel`       | `exit-button-label`       | Back button label.                                                                                     | `string`  | `""`    |
-| `heading`               | `heading`                 | Open/close state of the drawer.                                                                        | `string`  | `""`    |
-| `open`                  | `open`                    | Open/closestate of the drawer.                                                                         | `boolean` | `false` |
+| `exitButtonLabel`       | `exit-button-label`       | Exit button label.                                                                                     | `string`  | `""`    |
+| `heading`               | `heading`                 | Heading within the sheet.                                                                              | `string`  | `""`    |
+| `open`                  | `open`                    | Open/close state of the drawer.                                                                        | `boolean` | `false` |
 | `showBackButton`        | `show-back-button`        | Render back button.                                                                                    | `boolean` | `false` |
 | `showExitButton`        | `show-exit-button`        | Render exit button.                                                                                    | `boolean` | `false` |