From e6863137d170dc447398dc533472451064861659 Mon Sep 17 00:00:00 2001 From: Dominic McPhee Date: Mon, 8 Nov 2021 12:10:31 -0500 Subject: [PATCH 1/8] [Popover] Motion improvements --- src/components/Popover/Popover.scss | 18 +++++++++++++----- .../PopoverOverlay/PopoverOverlay.tsx | 4 ++-- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index 91df01d12ab..a33f8de70bc 100644 --- a/src/components/Popover/Popover.scss +++ b/src/components/Popover/Popover.scss @@ -2,8 +2,10 @@ $arrow-size: rem(14px); $visible-portion-of-arrow: rem(5px); -$content-max-height: rem(295px); +$content-max-height: rem(500px); $content-max-width: rem(400px); +$vertical-motion-offset: rem(-20px); +$motion-duration: 150ms; .Popover { max-width: calc(100vw - #{2 * spacing()}); @@ -14,26 +16,32 @@ $content-max-width: rem(400px); } .PopoverOverlay { - will-change: opacity; + will-change: opacity, transform; opacity: 0; - transition: opacity duration() easing(in); + transition: opacity $motion-duration easing(), + transform $motion-duration easing(); + transform: translateY($vertical-motion-offset); } .PopoverOverlay-entering { opacity: 1; + transform: translateY(0); } .PopoverOverlay-open { opacity: 1; + transform: translateY(0); } .PopoverOverlay-exiting { - opacity: 0; - transition-timing-function: easing(out); + opacity: 1; + transform: translateY(0); + transition-duration: 0ms; } .measuring:not(.PopoverOverlay-exiting) { opacity: 0; + transform: translateY($vertical-motion-offset); } .fullWidth { diff --git a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx index 1eeaa710f7d..16320fb4e75 100644 --- a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx +++ b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx @@ -102,7 +102,7 @@ export class PopoverOverlay extends PureComponent { this.clearTransitionTimeout(); this.enteringTimer = window.setTimeout(() => { this.setState({transitionStatus: TransitionStatus.Entered}); - }, durationBase); + }, 150); }); } @@ -111,7 +111,7 @@ export class PopoverOverlay extends PureComponent { this.clearTransitionTimeout(); this.exitingTimer = window.setTimeout(() => { this.setState({transitionStatus: TransitionStatus.Exited}); - }, durationBase); + }, 150); }); } } From 453dfe148e586eb9f0d12489cd0059d9be8c4d27 Mon Sep 17 00:00:00 2001 From: Dominic McPhee Date: Mon, 8 Nov 2021 15:41:25 -0500 Subject: [PATCH 2/8] Remove import --- .../Popover/components/PopoverOverlay/PopoverOverlay.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx index 16320fb4e75..48003b99a1a 100644 --- a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx +++ b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx @@ -1,5 +1,4 @@ import React, {PureComponent, Children, createRef} from 'react'; -import {durationBase} from '@shopify/polaris-tokens'; import {findFirstFocusableNode} from '../../../../utilities/focus'; import {ThemeProvider, ThemeProviderProps} from '../../../ThemeProvider'; From 6032df01df83e6b3dbe05639d7cc57f59cf47e38 Mon Sep 17 00:00:00 2001 From: Dominic McPhee Date: Tue, 9 Nov 2021 09:17:50 -0500 Subject: [PATCH 3/8] Adjusting popover easing --- src/components/Popover/Popover.scss | 6 ++---- .../Popover/components/PopoverOverlay/PopoverOverlay.tsx | 5 +++-- src/components/PositionedOverlay/utilities/math.ts | 3 ++- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index a33f8de70bc..d65bb3de86b 100644 --- a/src/components/Popover/Popover.scss +++ b/src/components/Popover/Popover.scss @@ -4,8 +4,7 @@ $arrow-size: rem(14px); $visible-portion-of-arrow: rem(5px); $content-max-height: rem(500px); $content-max-width: rem(400px); -$vertical-motion-offset: rem(-20px); -$motion-duration: 150ms; +$vertical-motion-offset: rem(-5px); .Popover { max-width: calc(100vw - #{2 * spacing()}); @@ -18,8 +17,7 @@ $motion-duration: 150ms; .PopoverOverlay { will-change: opacity, transform; opacity: 0; - transition: opacity $motion-duration easing(), - transform $motion-duration easing(); + transition: opacity duration(fast) easing(), transform duration(fast) easing(); transform: translateY($vertical-motion-offset); } diff --git a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx index 48003b99a1a..b5df502f0ad 100644 --- a/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx +++ b/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx @@ -1,4 +1,5 @@ import React, {PureComponent, Children, createRef} from 'react'; +import {durationFast} from '@shopify/polaris-tokens'; import {findFirstFocusableNode} from '../../../../utilities/focus'; import {ThemeProvider, ThemeProviderProps} from '../../../ThemeProvider'; @@ -101,7 +102,7 @@ export class PopoverOverlay extends PureComponent { this.clearTransitionTimeout(); this.enteringTimer = window.setTimeout(() => { this.setState({transitionStatus: TransitionStatus.Entered}); - }, 150); + }, durationFast); }); } @@ -110,7 +111,7 @@ export class PopoverOverlay extends PureComponent { this.clearTransitionTimeout(); this.exitingTimer = window.setTimeout(() => { this.setState({transitionStatus: TransitionStatus.Exited}); - }, 150); + }, 0); }); } } diff --git a/src/components/PositionedOverlay/utilities/math.ts b/src/components/PositionedOverlay/utilities/math.ts index 962f101d92b..df4c8ae59be 100644 --- a/src/components/PositionedOverlay/utilities/math.ts +++ b/src/components/PositionedOverlay/utilities/math.ts @@ -18,10 +18,11 @@ export function calculateVerticalPosition( containerRect: Rect, preferredPosition: PreferredPosition, fixed: boolean | undefined, + topBarOffset = 0, ) { const activatorTop = activatorRect.top; const activatorBottom = activatorTop + activatorRect.height; - const spaceAbove = activatorRect.top; + const spaceAbove = activatorRect.top - topBarOffset; const spaceBelow = containerRect.height - activatorRect.top - activatorRect.height; From 4041621d6cab1cb91f904def21b61cb8f103bcfe Mon Sep 17 00:00:00 2001 From: Dominic McPhee Date: Tue, 9 Nov 2021 09:18:03 -0500 Subject: [PATCH 4/8] Removing scroll hint on popover pane --- src/components/Popover/components/Pane/Pane.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Popover/components/Pane/Pane.tsx b/src/components/Popover/components/Pane/Pane.tsx index f6c0d2cb70e..d90f4f21f95 100644 --- a/src/components/Popover/components/Pane/Pane.tsx +++ b/src/components/Popover/components/Pane/Pane.tsx @@ -32,7 +32,6 @@ export function Pane({
{content}
) : ( Date: Tue, 9 Nov 2021 09:18:17 -0500 Subject: [PATCH 5/8] Updating base easing curve --- src/styles/foundation/_easing.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/foundation/_easing.scss b/src/styles/foundation/_easing.scss index 36dce19168e..1495bda1831 100644 --- a/src/styles/foundation/_easing.scss +++ b/src/styles/foundation/_easing.scss @@ -1,5 +1,5 @@ $easing-data: ( - base: cubic-bezier(0.64, 0, 0.35, 1), + base: cubic-bezier(0.25, 0.1, 0.25, 1), in: cubic-bezier(0.36, 0, 1, 1), out: cubic-bezier(0, 0, 0.42, 1), excite: cubic-bezier(0.18, 0.67, 0.6, 1.22), From 5f524e7324a3e18647194a27f0682a7fdc15ab03 Mon Sep 17 00:00:00 2001 From: Dominic McPhee Date: Tue, 9 Nov 2021 09:18:37 -0500 Subject: [PATCH 6/8] Adjust popover calculation for topbar --- .../PositionedOverlay/PositionedOverlay.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/PositionedOverlay/PositionedOverlay.tsx b/src/components/PositionedOverlay/PositionedOverlay.tsx index 12cf5989e32..501757554d3 100644 --- a/src/components/PositionedOverlay/PositionedOverlay.tsx +++ b/src/components/PositionedOverlay/PositionedOverlay.tsx @@ -4,7 +4,7 @@ import {classNames} from '../../utilities/css'; import {getRectForNode, Rect} from '../../utilities/geometry'; import {EventListener} from '../EventListener'; import {Scrollable} from '../Scrollable'; -import {layer} from '../shared'; +import {layer, dataPolarisTopBar} from '../shared'; import { PreferredPosition, @@ -239,6 +239,14 @@ export class PositionedOverlay extends PureComponent< scrollableContainerRect.height = document.body.scrollHeight; } + let topBarOffset = 0; + const topBarElement = scrollableElement.querySelector( + `${dataPolarisTopBar.selector}`, + ); + if (topBarElement) { + topBarOffset = topBarElement.clientHeight; + } + const overlayMargins = this.overlay.firstElementChild && this.overlay.firstChild instanceof HTMLElement @@ -257,6 +265,7 @@ export class PositionedOverlay extends PureComponent< containerRect, preferredPosition, fixed, + topBarOffset, ); const horizontalPosition = calculateHorizontalPosition( activatorRect, From 805026a4c2b81e893fa03eee6e92ba0b2fbeaabd Mon Sep 17 00:00:00 2001 From: Dominic McPhee Date: Tue, 9 Nov 2021 11:05:56 -0500 Subject: [PATCH 7/8] Adding to changelog --- UNRELEASED.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index fdd01ace6bb..5862f997fe8 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -8,6 +8,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Added helper hooks `useIndexTableRowHovered`, `useIndexTableRowSelected`, and `useIndexTableContainerScroll` to `IndexTable` ([#4286](https://github.com/Shopify/polaris-react/pull/4286)) - Added token for slim border radius ([#4573](https://github.com/Shopify/polaris-react/pull/4573)) +- Improves `Popover` component and its animation ([#4580](https://github.com/Shopify/polaris-react/pull/4580)) +- Improves `base` easing curve ([#4580](https://github.com/Shopify/polaris-react/pull/4580)) ### Bug fixes From b679661d3c3f27d67eaa84419649737e6c2506b8 Mon Sep 17 00:00:00 2001 From: Dominic McPhee Date: Tue, 9 Nov 2021 11:54:42 -0500 Subject: [PATCH 8/8] Remove will-change on transform and opacity --- src/components/Popover/Popover.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index d65bb3de86b..acd50dba5bc 100644 --- a/src/components/Popover/Popover.scss +++ b/src/components/Popover/Popover.scss @@ -15,7 +15,6 @@ $vertical-motion-offset: rem(-5px); } .PopoverOverlay { - will-change: opacity, transform; opacity: 0; transition: opacity duration(fast) easing(), transform duration(fast) easing(); transform: translateY($vertical-motion-offset);