@vtex/faststore-plugin-buyer-portal 1.3.7 → 1.3.8

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.8] - 2025-10-17
+
+### Added
+
+- Responsiviness to drawer animation
+
 ## [1.3.7] - 2025-10-17
 
 ### Added
@@ -146,7 +152,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/1.3.7...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.8...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -158,4 +164,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 [1.3.6]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.6
 
+[1.3.8]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.7...v1.3.8
 [1.3.7]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/shared/components/BasicDrawer/BasicDrawer.tsx

@@ -1,41 +1,44 @@
-import { SlideOver } from "@faststore/ui";
+import React from "react";
+
+import { SlideOver, useFadeEffect } from "@faststore/ui";
+
+import { DrawerProps } from "../../hooks";
 
 import { BasicDrawerBody } from "./BasicDrawerBody";
 import { BasicDrawerButton } from "./BasicDrawerButton";
 import { BasicDrawerFooter } from "./BasicDrawerFooter";
 import { BasicDrawerHeading } from "./BasicDrawerHeading";
 
-import type { DrawerProps } from "../../hooks/useDrawerProps";
-
 export type BasicDrawerProps = Omit<DrawerProps, "open"> & {
   children: React.ReactNode;
   id?: string;
+  isOpen: boolean;
+  onDismiss?: () => void;
 };
 
 export const BasicDrawer = ({
   isOpen,
-  children,
+  onDismiss,
   id,
+  children,
   ...props
 }: BasicDrawerProps) => {
+  const { fadeOut } = useFadeEffect();
   return (
-    <>
-      {isOpen && (
-        <SlideOver
-          size="partial"
-          direction="rightSide"
-          isOpen={isOpen}
-          data-fs-bp-basic-drawer
-          id={id}
-          {...props}
-        >
-          {children}
-        </SlideOver>
-      )}
-    </>
+    <SlideOver
+      isOpen={isOpen}
+      direction="rightSide"
+      size="partial"
+      data-fs-bp-basic-drawer
+      data-fs-mobile-bottom-sheet
+      id={id}
+      onDismiss={onDismiss ?? fadeOut}
+      {...props}
+    >
+      {children}
+    </SlideOver>
   );
 };
-
 BasicDrawer.Heading = BasicDrawerHeading;
 BasicDrawer.Body = BasicDrawerBody;
 BasicDrawer.Footer = BasicDrawerFooter;

package/src/features/shared/components/BasicDrawer/basic-drawer.scss

@@ -10,6 +10,50 @@
   border-top-left-radius: 1.25rem;
   border-top-right-radius: 1.25rem;
 
+  &[data-fs-slide-over][data-fs-mobile-bottom-sheet][data-fs-slide-over-sidebar] {
+    max-height: 100%;
+  }
+
+  @include media("<=tablet") {
+    &[data-fs-slide-over][data-fs-mobile-bottom-sheet] {
+      &:not([data-fs-slide-over-sidebar]) {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: auto;
+        width: 100vw;
+        max-height: min(85vh, 45rem);
+
+        border-top-left-radius: var(--fs-spacing-3);
+        border-top-right-radius: var(--fs-spacing-3);
+        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
+
+        will-change: transform;
+        backface-visibility: hidden;
+        transform: translate3d(0, 100%, 0);
+
+        transition: transform var(--fs-slide-over-transition-timing) ease;
+
+        &[data-fs-slide-over-state="in"] {
+          transform: translate3d(0, 0, 0);
+        }
+        &[data-fs-slide-over-state="out"] {
+          transform: translate3d(0, 100%, 0);
+        }
+
+        &[data-fs-slide-over-direction="rightSide"][data-fs-slide-over-state="out"],
+        &[data-fs-slide-over-direction="leftSide"][data-fs-slide-over-state="out"] {
+          transform: translate3d(0, 100%, 0);
+        }
+
+        [data-fs-slide-over][data-fs-mobile-bottom-sheet]
+          [data-fs-slide-over-state="out"] {
+          transform: translateY(100%);
+        }
+      }
+    }
+  }
+
   @include media(">=tablet") {
     height: 100%;
     bottom: auto;

package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/SidebarDrawer.tsx

@@ -23,6 +23,7 @@ export const SidebarDrawer = ({
       close={close}
       {...props}
       data-fs-slide-over-direction="leftSide"
+      data-fs-slide-over-sidebar
     >
       <BasicDrawer.Heading
         title={

package/src/features/shared/utils/constants.ts

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.7";
+export const CURRENT_VERSION = "1.3.8";