remove top shadow when scroll hint is complete (#4265)

Shopify · Jun 22, 2021 · a264496 · a264496
1 parent eeaecae
commit a264496
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -18,6 +18,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fix bug in Safari where `Button` text is gray instead of white after changing state from disabled to enabled ([#4270](https://github.com/Shopify/polaris-react/pull/4270))
 - Fix console warnings when `DataTable` unmounts ([#4249](https://github.com/Shopify/polaris-react/pull/4249))
 - Fix console warnings displaying multiple times in `Sheet` ([#4269](https://github.com/Shopify/polaris-react/pull/4269))
+- Remove top shadow when `Popover` and `Scrollable` scroll hinting is complete ([#4265](https://github.com/Shopify/polaris-react/pull/4265))
 
 ### Documentation
 

diff --git a/src/components/Scrollable/Scrollable.tsx b/src/components/Scrollable/Scrollable.tsx
@@ -150,6 +150,7 @@ export class Scrollable extends Component<ScrollableProps, State> {
 
   private handleScroll = () => {
     const {scrollArea} = this;
+    const {scrollPosition} = this.state;
     const {shadow, onScrolledToBottom} = this.props;
     if (scrollArea == null) {
       return;
@@ -158,7 +159,9 @@ export class Scrollable extends Component<ScrollableProps, State> {
     const shouldBottomShadow = Boolean(
       shadow && !(scrollTop + clientHeight >= scrollHeight),
     );
-    const shouldTopShadow = Boolean(shadow && scrollTop > 0);
+    const shouldTopShadow = Boolean(
+      shadow && scrollTop > 0 && scrollPosition > 0,
+    );
 
     const canScroll = scrollHeight > clientHeight;
     const hasScrolledToBottom =