From 18e5468a74ea0f7f33dfae6783c77f572365378d Mon Sep 17 00:00:00 2001
From: Roman Hrynevych <82209198+hrynevychroman@users.noreply.github.com>
Date: Mon, 30 Sep 2024 11:23:54 +0300
Subject: [PATCH] fix(ConfigProvider): add ability to pass string for `padding`
 and `margin` [rem] (#1321)

---
 packages/radix-vue/src/shared/types.ts             | 9 +++++++--
 packages/radix-vue/src/shared/useBodyScrollLock.ts | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/radix-vue/src/shared/types.ts b/packages/radix-vue/src/shared/types.ts
index 0eae4f1b7..af94b9d32 100644
--- a/packages/radix-vue/src/shared/types.ts
+++ b/packages/radix-vue/src/shared/types.ts
@@ -38,9 +38,14 @@ interface SingleOrMultipleProps<ValidValue = string | string[], ExplicitType = S
 
 }
 
+/**
+ * if padding or margin is number, it will be in px
+ * if padding or margin is true, it will be var(--scrollbar-width)
+ * otherwise, it will be passed string
+ */
 type ScrollBodyOption = {
-  padding?: boolean | number
-  margin?: boolean | number
+  padding?: boolean | number | string
+  margin?: boolean | number | string
 }
 
 type AcceptableValue = string | number | boolean | Record<string, any>
diff --git a/packages/radix-vue/src/shared/useBodyScrollLock.ts b/packages/radix-vue/src/shared/useBodyScrollLock.ts
index 53aa3ba2e..36229da68 100644
--- a/packages/radix-vue/src/shared/useBodyScrollLock.ts
+++ b/packages/radix-vue/src/shared/useBodyScrollLock.ts
@@ -64,8 +64,8 @@ const useBodyLockStackCount = createSharedComposable(() => {
       : ({ padding: 0, margin: 0 })
 
     if (verticalScrollbarWidth > 0) {
-      document.body.style.paddingRight = `${config.padding}px`
-      document.body.style.marginRight = `${config.margin}px`
+      document.body.style.paddingRight = typeof config.padding === 'number' ? `${config.padding}px` : String(config.padding)
+      document.body.style.marginRight = typeof config.margin === 'number' ? `${config.margin}px` : String(config.margin)
       document.body.style.setProperty('--scrollbar-width', `${verticalScrollbarWidth}px`)
       document.body.style.overflow = 'hidden'
     }