fix(components): update styles in Select component for scrolling beha…

…vior
bigcommerce · Apr 12, 2024 · 76d6739 · 76d6739
1 parent 6a6af43
commit 76d6739
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/.changeset/three-hairs-nail.md b/.changeset/three-hairs-nail.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/components": patch
+---
+
+Update styles to scroll when Select content is long.
diff --git a/packages/components/src/components/select/select.tsx b/packages/components/src/components/select/select.tsx
@@ -59,19 +59,27 @@ type SelectContentType = typeof SelectPrimitive.Content;
 const SelectContent = forwardRef<
   ElementRef<SelectContentType>,
   ComponentPropsWithRef<SelectContentType>
->(({ children, className, ...props }, ref) => {
+>(({ children, className, position = 'popper', ...props }, ref) => {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
-        position="popper"
+        position={position}
         {...props}
         className={cn(
-          'max-h-radix-select-content-available-height relative w-full bg-white shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          'max-h-radix-select-content-available-height relative w-full bg-white shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,
         )}
         ref={ref}
       >
-        <SelectPrimitive.Viewport className="h-radix-select-content-available-height w-full min-w-[var(--radix-select-trigger-width)]">
+        <SelectPrimitive.Viewport
+          className={cn(
+            'w-full',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] min-w-[var(--radix-select-trigger-width)]',
+          )}
+        >
           {children}
         </SelectPrimitive.Viewport>
       </SelectPrimitive.Content>