Skip to content

[Scrollable] refactor: rewrite Scrollable utilizing platform features #7443

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 31, 2022
Merged

[Scrollable] refactor: rewrite Scrollable utilizing platform features #7443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c6d9f60
refactor: rewrite Scrollable utilizing platform features
iAmNathanJ Oct 17, 2022
410a38a
add story for Scrollable using the hint prop
iAmNathanJ Oct 19, 2022
332081a
Address PR Feedback
iAmNathanJ Oct 24, 2022
d91445f
add story for onScrollToBottom scenario
iAmNathanJ Oct 24, 2022
bf52e2e
use requestAnimationFrame to avoid potential reflows in scroll event …
iAmNathanJ Oct 25, 2022
cd7fc7f
fix: infinite render cycles caused by onScrolledToBottom prop
iAmNathanJ Oct 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/many-otters-repeat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Improve performance of the Scrollable component with React 18
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We try to keep entries in past tense

Suggested change
Improve performance of the Scrollable component with React 18
Improved performance of the Scrollable component with React 18

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wowzers, I missed this comment before I merged. Sorry about that!

4 changes: 0 additions & 4 deletions polaris-react/src/components/Scrollable/Scrollable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,6 @@
overflow-y: auto;
}

.verticalHasScrolling {
overflow-y: scroll;
}

.hasTopShadow {
box-shadow: var(--pc-scrollable-shadow-top);
}
Expand Down
154 changes: 148 additions & 6 deletions polaris-react/src/components/Scrollable/Scrollable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,37 @@ export default {
export function Default() {
return (
<Card title="Terms of service" sectioned>
<Scrollable shadow style={{height: '100px'}} focusable>
<Scrollable shadow style={{height: '200px'}} focusable>
<p>
By signing up for the Shopify service (“Service”) or any of the
services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
the following terms and conditions (“Terms of Service”). The Services
offered by Shopify under the Terms of Service include various products
and services to help you create and manage a retail store, whether an
online store (“Online Services”), a physical retail store (“POS
Services”), or both. Any new features or tools which are added to the
current Service shall be also subject to the Terms of Service. You can
review the current version of the Terms of Service at any time at
https://www.shopify.com/legal/terms. Shopify reserves the right to
update and change the Terms of Service by posting updates and changes
to the Shopify website. You are advised to check the Terms of Service
from time to time for any updates or changes that may impact you.
</p>
<p>
By signing up for the Shopify service (“Service”) or any of the
services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
the following terms and conditions (“Terms of Service”). The Services
offered by Shopify under the Terms of Service include various products
and services to help you create and manage a retail store, whether an
online store (“Online Services”), a physical retail store (“POS
Services”), or both. Any new features or tools which are added to the
current Service shall be also subject to the Terms of Service. You can
review the current version of the Terms of Service at any time at
https://www.shopify.com/legal/terms. Shopify reserves the right to
update and change the Terms of Service by posting updates and changes
to the Shopify website. You are advised to check the Terms of Service
from time to time for any updates or changes that may impact you.
</p>
<p>
By signing up for the Shopify service (“Service”) or any of the
services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
Expand Down Expand Up @@ -124,10 +154,10 @@ export function WithHorizonalScrollPrevention() {
);
}

export function ToChildComponent() {
export function ScrollToChildComponent() {
return (
<Card title="Terms of service" sectioned>
<Scrollable shadow style={{height: '100px'}}>
<Scrollable shadow style={{height: '200px'}}>
<ol>
<li>Account Terms</li>
</ol>
Expand Down Expand Up @@ -176,9 +206,9 @@ export function ToChildComponent() {
<ol>
<li>Account Activation</li>
</ol>
<Scrollable.ScrollTo>
<p>2.1 Shopify Account</p>
</Scrollable.ScrollTo>

<Scrollable.ScrollTo />
<strong>2.1 Shopify Account</strong>

<p>
Subject to section 2.1.2, the person signing up for the Service will
Expand Down Expand Up @@ -416,3 +446,115 @@ export function ToChildComponent() {
</Card>
);
}

export function WithScrollHint() {
return (
<Card title="Terms of service" sectioned>
<Scrollable hint shadow style={{height: '200px'}} focusable>
<p>
By signing up for the Shopify service (“Service”) or any of the
services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
the following terms and conditions (“Terms of Service”). The Services
offered by Shopify under the Terms of Service include various products
and services to help you create and manage a retail store, whether an
online store (“Online Services”), a physical retail store (“POS
Services”), or both. Any new features or tools which are added to the
current Service shall be also subject to the Terms of Service. You can
review the current version of the Terms of Service at any time at
https://www.shopify.com/legal/terms. Shopify reserves the right to
update and change the Terms of Service by posting updates and changes
to the Shopify website. You are advised to check the Terms of Service
from time to time for any updates or changes that may impact you.
</p>
<p>
By signing up for the Shopify service (“Service”) or any of the
services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
the following terms and conditions (“Terms of Service”). The Services
offered by Shopify under the Terms of Service include various products
and services to help you create and manage a retail store, whether an
online store (“Online Services”), a physical retail store (“POS
Services”), or both. Any new features or tools which are added to the
current Service shall be also subject to the Terms of Service. You can
review the current version of the Terms of Service at any time at
https://www.shopify.com/legal/terms. Shopify reserves the right to
update and change the Terms of Service by posting updates and changes
to the Shopify website. You are advised to check the Terms of Service
from time to time for any updates or changes that may impact you.
</p>
<p>
By signing up for the Shopify service (“Service”) or any of the
services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
the following terms and conditions (“Terms of Service”). The Services
offered by Shopify under the Terms of Service include various products
and services to help you create and manage a retail store, whether an
online store (“Online Services”), a physical retail store (“POS
Services”), or both. Any new features or tools which are added to the
current Service shall be also subject to the Terms of Service. You can
review the current version of the Terms of Service at any time at
https://www.shopify.com/legal/terms. Shopify reserves the right to
update and change the Terms of Service by posting updates and changes
to the Shopify website. You are advised to check the Terms of Service
from time to time for any updates or changes that may impact you.
</p>
</Scrollable>
</Card>
);
}

export function OnScrolledToBottom() {
return (
<Card title="Terms of service" sectioned>
<Scrollable
focusable
style={{height: '200px'}}
onScrolledToBottom={() => console.log('scrolled to bottom')}
>
<p>
By signing up for the Shopify service (“Service”) or any of the
services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
the following terms and conditions (“Terms of Service”). The Services
offered by Shopify under the Terms of Service include various products
and services to help you create and manage a retail store, whether an
online store (“Online Services”), a physical retail store (“POS
Services”), or both. Any new features or tools which are added to the
current Service shall be also subject to the Terms of Service. You can
review the current version of the Terms of Service at any time at
https://www.shopify.com/legal/terms. Shopify reserves the right to
update and change the Terms of Service by posting updates and changes
to the Shopify website. You are advised to check the Terms of Service
from time to time for any updates or changes that may impact you.
</p>
<p>
By signing up for the Shopify service (“Service”) or any of the
services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
the following terms and conditions (“Terms of Service”). The Services
offered by Shopify under the Terms of Service include various products
and services to help you create and manage a retail store, whether an
online store (“Online Services”), a physical retail store (“POS
Services”), or both. Any new features or tools which are added to the
current Service shall be also subject to the Terms of Service. You can
review the current version of the Terms of Service at any time at
https://www.shopify.com/legal/terms. Shopify reserves the right to
update and change the Terms of Service by posting updates and changes
to the Shopify website. You are advised to check the Terms of Service
from time to time for any updates or changes that may impact you.
</p>
<p>
By signing up for the Shopify service (“Service”) or any of the
services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
the following terms and conditions (“Terms of Service”). The Services
offered by Shopify under the Terms of Service include various products
and services to help you create and manage a retail store, whether an
online store (“Online Services”), a physical retail store (“POS
Services”), or both. Any new features or tools which are added to the
current Service shall be also subject to the Terms of Service. You can
review the current version of the Terms of Service at any time at
https://www.shopify.com/legal/terms. Shopify reserves the right to
update and change the Terms of Service by posting updates and changes
to the Shopify website. You are advised to check the Terms of Service
from time to time for any updates or changes that may impact you.
</p>
</Scrollable>
</Card>
);
}
Loading