@vtex/faststore-plugin-buyer-portal 1.3.23 → 1.3.25

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.25] - 2025-11-25
+
+### Added
+
+- Add default `size` prop to `BasicDrawer` component
+  - Set default size to `"partial"` - min-width with 30rem (480px)
+  - Added CSS rules to apply max-width of 960px for large-sized drawers
+  - Updated existing drawer components to explicitly specify `size="large"`
+  - Improved drawer sizing consistency across the application
+  
+## [1.3.24] - 2025-11-25
+
+### Added
+
+- Adjusts the position of the **“+”** button in the responsive layout
+
 ## [1.3.23] - 2025-11-25
 
 ### Changed
@@ -96,7 +112,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.3.9] - 2025-10-21
 
 ### Added
-
 - Add Changelog entry check on actions
 
 ## [1.3.8] - 2025-10-17
@@ -241,7 +256,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/v1.3.23...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.25...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
@@ -256,6 +271,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 # <<<<<<< HEAD
 
+[1.3.25]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.24...v1.3.25
+[1.3.24]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.23...v1.3.24
 [1.3.23]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.22...v1.3.23
 [1.3.22]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.21...v1.3.22
 [1.3.21]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.20...v1.3.21

package/package.json

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

package/src/features/addresses/layouts/AddressesLayout/addresses-layout.scss

@@ -26,25 +26,27 @@
 	flex-direction: column;
 	height: 100%;
 
-	@include media("<=tablet") {
-		padding: 0;
-	}
+	@include media("<=phonemid") {
+		padding: 0 0 var(--fs-spacing-7) 0;
 
-	[data-fs-bp-header-inside] {
-		[data-fs-bp-header-buttons] > button {
-			display: flex;
-		}
-		@include media("<=tablet") {
-			[data-fs-header-inside-button]:nth-child(3) {
+		[data-fs-bp-header-inside] {
+			[data-fs-header-inside-button] {
 				position: fixed;
 				bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
 				right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				padding: var(--fs-spacing-2);
 				cursor: pointer;
-				z-index: 1000;
+				z-index: 10;
 			}
 		}
 	}
 
+	[data-fs-bp-header-inside] {
+		[data-fs-bp-header-buttons] > button {
+			display: flex;
+		}
+	}
+
 	[data-fs-bp-address-tabs-paginator-last] {
 		display: flex;
 		justify-content: flex-end;

package/src/features/budgets/components/BudgetDeleteDrawer/budget-delete-drawer.scss

@@ -4,19 +4,6 @@
   @import "../../../shared/components/InputText/input-text.scss";
   @import "../../../shared/components/ErrorMessage/error-message.scss";
 
-  &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
-    width: 100%;
-    max-width: none;
-
-    @include media(">=tablet") {
-      max-width: 30rem;
-    }
-
-    @include media(">=notebook") {
-      max-width: 40rem;
-    }
-  }
-
   [data-fs-bp-basic-drawer-body] {
     overflow-y: auto;
   }

package/src/features/budgets/components/BudgetEditNotificationDrawer/budget-edit-notification-drawer.scss

@@ -11,19 +11,6 @@
     gap: var(--fs-spacing-1);
   }
 
-  &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
-    width: 100%;
-    max-width: none;
-
-    @include media(">=tablet") {
-      max-width: 30rem;
-    }
-
-    @include media(">=notebook") {
-      max-width: 40rem;
-    }
-  }
-
   [data-fs-bp-basic-drawer-body] {
     overflow-y: auto;
   }

package/src/features/budgets/components/CreateBudgetAllocationDrawer/CreateBudgetAllocationDrawer.tsx

@@ -95,7 +95,12 @@ export const CreateBudgetAllocationDrawer = ({
   }
 
   return (
-    <BasicDrawer data-fs-bp-create-budget-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-create-budget-drawer
+      close={close}
+      size="large"
+      {...props}
+    >
       <BasicDrawer.Heading
         title={
           <div data-fs-bp-create-budget-drawer-header-arrow>

package/src/features/budgets/components/CreateBudgetAllocationDrawer/create-budget-allocation-drawer.scss

@@ -16,18 +16,6 @@
   }
 
   &[data-fs-bp-basic-drawer] {
-    width: 100% !important;
-    max-width: none !important;
-
-    @include media(">=tablet") {
-      max-width: 32rem !important;
-    }
-
-    @include media(">=notebook") {
-      max-width: 60rem !important;
-      width: 100% !important;
-    }
-
     & > [data-fs-bp-basic-drawer-footer] {
       justify-content: flex-end !important;
       gap: var(--fs-spacing-1);

package/src/features/budgets/components/CreateBudgetDrawer/CreateBudgetDrawer.tsx

@@ -278,7 +278,12 @@ export const CreateBudgetDrawer = ({
   }
 
   return (
-    <BasicDrawer data-fs-bp-create-budget-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-create-budget-drawer
+      close={close}
+      size="large"
+      {...props}
+    >
       <BasicDrawer.Heading
         data-fs-bp-create-budget-drawer-step-success={step === "confirmation"}
         title={

package/src/features/budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss

@@ -2,18 +2,4 @@
 
 [data-fs-bp-delete-allocation-drawer] {
   @import "../../../shared/components/InputText/input-text.scss";
-
-  &[data-fs-bp-basic-drawer] {
-    width: 100%;
-    max-width: none;
-
-    @include media(">=tablet") {
-      max-width: 30rem;
-      min-width: 30rem;
-    }
-
-    @include media(">=notebook") {
-      max-width: 40rem;
-    }
-  }
 }

package/src/features/budgets/components/EditBudgetDrawer/EditBudgetDrawer.tsx

@@ -171,7 +171,12 @@ export const EditBudgetDrawer = ({
   };
 
   return (
-    <BasicDrawer data-fs-bp-edit-budget-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-edit-budget-drawer
+      close={close}
+      size="large"
+      {...props}
+    >
       <BasicDrawer.Heading title="Edit Budget Settings" onClose={close} />
 
       <BasicDrawer.Body>

package/src/features/budgets/components/EditBudgetDrawer/edit-budget-drawer.scss

@@ -13,9 +13,6 @@
 
     @include media(">=tablet", "<notebook") {
       &[data-fs-modal-content] {
-        max-width: 30rem;
-        min-width: 30rem;
-        width: 100%;
         [data-fs-bp-basic-drawer-body] {
           [data-fs-bp-basic-drawer-body-wrapper] {
             padding: var(--fs-spacing-8)

package/src/features/budgets/layouts/BudgetsDetailsLayout/budget-details-layout.scss

@@ -62,8 +62,6 @@
     }
 
     &[data-fs-bp-basic-drawer] {
-      max-width: 60rem !important;
-      width: 100% !important;
       & > [data-fs-bp-basic-drawer-footer] {
         justify-content: flex-end !important;
         gap: var(--fs-spacing-1);

package/src/features/budgets/layouts/BudgetsLayout/budgets-layout.scss

@@ -15,6 +15,21 @@
 
   width: 100%;
 
+  @include media("<=phonemid") {
+    padding-bottom: var(--fs-spacing-7);
+
+    [data-fs-bp-header-inside] {
+      [data-fs-header-inside-button] {
+        position: fixed;
+        bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        padding: var(--fs-spacing-2);
+        cursor: pointer;
+        z-index: 10;
+      }
+    }
+  }
+
   [data-fs-button] {
     border-radius: var(--fs-border-radius-circle);
     padding: 0;

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/BasicBuyingPolicyDrawer.tsx

@@ -192,7 +192,12 @@ export const BasicBuyingPolicyDrawer = ({
   const isConfirmButtonEnabled = isAllFieldsFilled && !isLoading;
 
   return (
-    <BasicDrawer data-fs-bp-basic-buying-policy-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-basic-buying-policy-drawer
+      close={close}
+      size="large"
+      {...props}
+    >
       <BasicDrawer.Heading title={drawerTitle} onClose={close} />
 
       <BasicDrawer.Body>

package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/basic-buying-policy-drawer.scss

@@ -10,11 +10,6 @@
   @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
   @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
 
-  &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
-    --fs-slide-over-partial-max-width-notebook: 60rem;
-    min-width: var(--fs-slide-over-partial-max-width-notebook);
-  }
-
   [data-fs-bp-autocomplete-dropdown] {
     [data-fs-bp-input-text-input] {
       top: 0;

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/buying-policies-layout.scss

@@ -15,7 +15,7 @@
 	display: flex;
 	flex-direction: column;
 
-	@include media("<=tablet") {
+	@include media("<=phonemid") {
 		padding-bottom: var(--fs-spacing-7);
 
 		[data-fs-bp-header-inside] {

package/src/features/credit-cards/layouts/CreditCardsLayout/credit-card-layout.scss

@@ -18,6 +18,21 @@
 		padding: 0;
 	}
 
+	@include media("<=phonemid") {
+		padding-bottom: var(--fs-spacing-7);
+
+		[data-fs-bp-header-inside] {
+			[data-fs-header-inside-button] {
+				position: fixed;
+				bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				padding: var(--fs-spacing-2);
+				cursor: pointer;
+				z-index: 10;
+			}
+		}
+	}
+
 	[data-fs-topbar-actions-wrapper] {
 		display: flex;
 		flex-direction: row;

package/src/features/custom-fields/layouts/CustomFieldsLayout/custom-fields-layout.scss

@@ -13,6 +13,21 @@
     padding: 0;
   }
 
+  @include media("<=phonemid") {
+    padding-bottom: var(--fs-spacing-7);
+
+    [data-fs-bp-header-inside] {
+      [data-fs-header-inside-button] {
+        position: fixed;
+        bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        padding: var(--fs-spacing-2);
+        cursor: pointer;
+        z-index: 10;
+      }
+    }
+  }
+
   [data-fs-bp-header-inside] {
     #header-inside-button-ghost {
       background-color: transparent;

package/src/features/org-units/components/DeleteOrgUnitDrawer/DeleteOrgUnitDrawer.tsx

@@ -73,6 +73,7 @@ export const DeleteOrgUnitDrawer = ({
       data-fs-bp-delete-org-unit-drawer
       data-fs-bp-delete-org-unit-drawer-has-content={hasChildren}
       close={close}
+      size={hasChildren ? "large" : "partial"}
       {...props}
     >
       <BasicDrawer.Heading title="Delete organizational unit" onClose={close} />
@@ -112,7 +113,7 @@ export const DeleteOrgUnitDrawer = ({
             <p data-fs-bp-delete-org-unit-drawer-message>
               Before deleting
               <span data-fs-bp-delete-org-unit-drawer-message-name>
-                {` ${name} `}
+                {` ${name}`}
               </span>
               , you must first remove all child organizational units{" "}
               {users?.length ? "and users" : ""}.

package/src/features/org-units/components/DeleteOrgUnitDrawer/delete-org-unit-drawer.scss

@@ -6,14 +6,6 @@
   @import "../../../shared/components/ErrorMessage/error-message.scss";
   @import "../OrgUnitsHierarchyTree/org-units-hierarchy-tree.scss";
 
-  &[data-fs-bp-delete-org-unit-drawer-has-content="true"] {
-    @include media(">=tablet") {
-      width: 75vw !important;
-      min-width: 31.25rem !important;
-      max-width: 75vw !important;
-    }
-  }
-
   [data-fs-bp-delete-org-unit-drawer-message] {
     font-weight: var(--fs-text-weight-regular);
     font-size: var(--fs-text-size-1);

package/src/features/org-units/layouts/OrgUnitsLayout/org-units-layout.scss

@@ -16,6 +16,21 @@
   @import "../../../shared/components/HierarchyTree/hierarchy-tree.scss";
   @import "../../../shared/components/InternalSearch/internal-search.scss";
 
+  @include media("<=phonemid") {
+    padding-bottom: var(--fs-spacing-7);
+
+    [data-fs-bp-header-inside] {
+      [data-fs-header-inside-button] {
+        position: fixed;
+        bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        padding: var(--fs-spacing-2);
+        cursor: pointer;
+        z-index: 10;
+      }
+    }
+  }
+
   [data-fs-hierarchy-tree-wrapper] {
     flex: 1;
     display: flex;

package/src/features/payment-methods/components/AddPaymentMethodsDrawer/AddPaymentMethodsDrawer.tsx

@@ -205,7 +205,12 @@ export const AddPaymentMethodsDrawer = ({
   };
 
   return (
-    <BasicDrawer data-fs-bp-add-payment-methods-drawer close={close} {...props}>
+    <BasicDrawer
+      data-fs-bp-add-payment-methods-drawer
+      close={close}
+      size="large"
+      {...props}
+    >
       <BasicDrawer.Heading title="Add payment methods" onClose={close} />
 
       <BasicDrawer.Body>

package/src/features/payment-methods/components/AddPaymentMethodsDrawer/add-payment-methods-drawer.scss

@@ -1,17 +1,6 @@
 @import "../SearchPaymentMethods/search-payment-methods.scss";
 
 [data-fs-bp-add-payment-methods-drawer] {
-  &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
-    width: 66%;
-    min-width: 66%;
-
-    @include media(">=notebook") {
-      width: 60rem;
-      min-width: 60rem;
-      max-width: 60rem;
-    }
-  }
-
   [data-fs-payment-methods-drawer] {
     @import "../../../shared/components/EmptyState/empty-state.scss";
     @import "../../../shared/components/Table/table.scss";

package/src/features/payment-methods/layouts/PaymentMethodsLayout/payment-methods-layout.scss

@@ -112,7 +112,9 @@
 		}
 	}
 
-	@include media("<=tablet") {
+	@include media("<=phonemid") {
+		padding-bottom: var(--fs-spacing-7);
+
 		[data-fs-buyer-portal-internal-search] {
 			width: 100% !important;
 		}
@@ -120,12 +122,11 @@
 		[data-fs-bp-header-inside] {
 			[data-fs-header-inside-button] {
 				position: fixed;
-				bottom: 20px;
-				right: 20px;
-				border: none;
-				border-radius: 50%;
+				bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+				padding: var(--fs-spacing-2);
 				cursor: pointer;
-				z-index: 1;
+				z-index: 10;
 			}
 		}
 	}

package/src/features/product-assortment/components/AddProductAssortmentDrawer/AddProductAssortmentDrawer.tsx

@@ -70,8 +70,9 @@ export const AddProductAssortmentDrawer = ({
   return (
     <BasicDrawer
       data-fs-bp-add-product-assortment-drawer
-      id="basicDrawer"
+      id="add-product-assortment-drawer"
       close={close}
+      size="large"
       {...props}
     >
       <BasicDrawer.Heading title="Add product assortment" onClose={close} />

package/src/features/product-assortment/components/AddProductAssortmentDrawer/add-product-assortment-drawer.scss

@@ -7,11 +7,6 @@
   @import "../../../shared/components/Paginator/paginator.scss";
   @import "../../components/table/add-product-assortment-drawer-table.scss";
 
-  &[data-fs-bp-basic-drawer] {
-    max-width: 60rem !important;
-    width: 100%;
-  }
-
   [data-fs-bp-add-product-assortment-text-drawer] {
     display: block;
     color: var(--fs-color-neutral-5);

package/src/features/product-assortment/layouts/ProductAssortmentLayout/product-assortment-layout.scss

@@ -14,6 +14,21 @@
 
   width: 100%;
 
+  @include media("<=phonemid") {
+    padding-bottom: var(--fs-spacing-7);
+
+    [data-fs-bp-header-inside] {
+      [data-fs-header-inside-button] {
+        position: fixed;
+        bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        padding: var(--fs-spacing-2);
+        cursor: pointer;
+        z-index: 10;
+      }
+    }
+  }
+
   [data-fs-bp-header] {
     display: flex;
     width: 100%;

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

@@ -14,6 +14,7 @@ export type BasicDrawerProps = Omit<DrawerProps, "open"> & {
   id?: string;
   isOpen: boolean;
   onDismiss?: () => void;
+  size?: "full" | "partial" | "large";
 };
 
 export const BasicDrawer = ({
@@ -21,16 +22,19 @@ export const BasicDrawer = ({
   onDismiss,
   id,
   children,
+  size = "partial",
   ...props
 }: BasicDrawerProps) => {
   const { fadeOut } = useFadeEffect();
+  const isSizeLarge = size === "large";
   return (
     <SlideOver
       isOpen={isOpen}
       direction="rightSide"
-      size="partial"
+      size={isSizeLarge ? "full" : size}
       data-fs-bp-basic-drawer
       data-fs-mobile-bottom-sheet
+      data-fs-bp-basic-drawer-large={isSizeLarge}
       id={id}
       onDismiss={onDismiss ?? fadeOut}
       {...props}

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

@@ -64,12 +64,20 @@
     width: 100%;
 
     @include media(">=tablet") {
-      width: 33vw;
-      min-width: 31.25rem;
+      width: 30rem; // 480px 
+      min-width: 3rem;
       max-width: 100vw;
     }
   }
 
+   &[data-fs-slide-over-size="full"] {
+    &[data-fs-bp-basic-drawer-large="true"] {
+      --fs-slide-over-partial-max-width-notebook: 60rem; // 960px
+      max-width: var(--fs-slide-over-partial-max-width-notebook);
+    }
+  }
+
+
   [data-fs-bp-basic-drawer-heading] {
     width: 100%;
     display: flex;

package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/sidebar-drawer.scss

@@ -53,16 +53,7 @@
     }
   }
 
-  @include media(">=tablet") {
-    width: 30rem !important;
-    min-width: 30rem !important;
-    max-width: 30rem !important;
-  }
-
   @include media("<=tablet") {
-    width: 19rem !important;
-    min-width: 19rem !important;
-    max-width: 19rem !important;
     height: 100% !important;
     border-radius: 0 !important;
     & > [data-fs-bp-basic-drawer-heading] {

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.23";
+export const CURRENT_VERSION = "1.3.25";

package/src/features/users/components/CreateUserDrawer/CreateUserDrawer.tsx

@@ -298,9 +298,9 @@ export const CreateUserDrawer = ({
             <br />
             <p>
               Users can only belong to one organizational unit at a time. To add
-              <a href={`/user/${userAlreadyInUse?.id}`}>
-                {` ${userAlreadyInUse?.name}`}
-              </a>{" "}
+              <a
+                href={`/user/${userAlreadyInUse?.id}`}
+              >{` ${userAlreadyInUse?.name}`}</a>{" "}
               to {orgUnitName}, go to their profile and move them from
               {` ${userAlreadyInUse?.orgUnit}`}.
             </p>

package/src/features/users/layouts/UsersLayout/users-layout.scss

@@ -19,6 +19,21 @@
 
   --data-fs-users-table-width: 11.875rem;
 
+  @include media("<=phonemid") {
+    padding-bottom: var(--fs-spacing-7);
+
+    [data-fs-bp-header-inside] {
+      [data-fs-header-inside-button] {
+        position: fixed;
+        bottom: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+        padding: var(--fs-spacing-2);
+        cursor: pointer;
+        z-index: 10;
+      }
+    }
+  }
+
   [data-fs-bp-header-inside-title] {
     @include media("<=phonemid") {
       font-size: var(--fs-text-size-1);