From 95f41f8fc4529343a9b2ef2b8e57a3ae911fdf9a Mon Sep 17 00:00:00 2001
From: Quinton Jason <quinton.jason@gmail.com>
Date: Thu, 26 Oct 2023 14:24:57 -0500
Subject: [PATCH 1/2] fix(dropdown): add visual indicator when dropdown is
 scrollable

---
 .../lib/stylesheets/components/_dropdown.scss | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
index d0a911ea1e..cfa097e35f 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -267,11 +267,45 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 }
 
 .sage-dropdown__menu {
+  border-radius: sage-border(radius-medium);
   overflow: auto;
   min-width: $-dropdown-width;
   width: auto;
   max-height: $-dropdown-panel-max-height;
   padding: sage-spacing(xs) 0;
+  
+  // adds a box shadow to the menu when it is scrollable
+  overflow-scrolling: touch;
+  background:
+    /* Shadow Cover TOP */
+    linear-gradient(
+      white 30%,
+      rgba(255, 255, 255, 0)
+    ) center top,
+    
+    /* Shadow Cover BOTTOM */
+    linear-gradient(
+      rgba(255, 255, 255, 0), 
+      white 70%
+    ) center bottom,
+    
+    /* Shadow TOP */
+    radial-gradient(
+      farthest-side at 50% 0,
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0)
+    ) center top,
+    
+    /* Shadow BOTTOM */
+    radial-gradient(
+      farthest-side at 50% 100%,
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0)
+    ) center bottom;
+  
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
 
   :not(.sage-dropdown--anchor-right) > .sage-dropdown__panel & {
     left: 0;

From 9cd40a5fec353db801c360098fc0e1db0b032f86 Mon Sep 17 00:00:00 2001
From: Quinton Jason <quinton.jason@gmail.com>
Date: Fri, 27 Oct 2023 10:35:44 -0500
Subject: [PATCH 2/2] chore(dropdown): resolve properties order issue

---
 packages/sage-assets/lib/stylesheets/components/_dropdown.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
index cfa097e35f..aa9b7dffc2 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -267,12 +267,12 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 }
 
 .sage-dropdown__menu {
-  border-radius: sage-border(radius-medium);
   overflow: auto;
   min-width: $-dropdown-width;
   width: auto;
   max-height: $-dropdown-panel-max-height;
   padding: sage-spacing(xs) 0;
+  border-radius: sage-border(radius-medium);
   
   // adds a box shadow to the menu when it is scrollable
   overflow-scrolling: touch;