Skip to content

[Scrollable] Fix horizontal scroll bug #7481

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 1 commit into from
Oct 21, 2022
Merged

[Scrollable] Fix horizontal scroll bug #7481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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/serious-gifts-double.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Fixed horizontal scroll bug in Scrollable
2 changes: 2 additions & 0 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 @@ -10,6 +10,8 @@
-webkit-overflow-scrolling: touch;
position: relative;
max-height: var(--pc-scrollable-max-height);
overflow-x: hidden;
overflow-y: hidden;
Comment on lines +13 to +14
Copy link
Member Author

@kyledurand kyledurand Oct 21, 2022

Choose a reason for hiding this comment

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

These are overridden automatically by giving default values to horizontal and vertical props and assigning these classes below


&:focus {
outline: var(--p-border-width-2) solid var(--p-focused);
Expand Down
110 changes: 102 additions & 8 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 @@ -30,6 +30,100 @@ export function Default() {
);
}

export function WithHorizonalScrollPrevention() {
return (
<Scrollable
shadow
style={{height: '100px', width: '200px'}}
horizontal={false}
>
<div>
<p>Last updated on: September 6, 2022</p>

<p>
Welcome to Shopify! By signing up for a Shopify Account (as defined in
Section 1) or by using any Shopify Services (as defined below), you
are agreeing to be bound by the following terms and conditions (the “
<strong>Terms of Service</strong>”).
</p>

<p>
As used in these Terms of Service, “<strong>we</strong>”, “
<strong>us</strong>”, “<strong>our</strong>” and “
<strong>Shopify</strong>” means the applicable Shopify Contracting
Party (as defined in Section 13 below), and “<strong>you</strong>”
means the Shopify User (if registering for or using a Shopify Service
as an individual), or the business employing the Shopify User (if
registering for or using a Shopify Service as a business) and any of
its affiliates.
</p>

<p>
Shopify provides a complete commerce platform that enables merchants
to unify their commerce activities. Among other features, this
platform includes a range of tools for merchants to build and
customize online stores, sell in multiple places (including web,
mobile, social media, online marketplaces and other online locations
(“<strong>Online Services</strong>”) and in person (“
<strong>POS Services</strong>”)), manage products, inventory,
payments, fulfillment, shipping, business operations, marketing and
advertising, and engage with existing and potential customers. Any
such service or services offered by Shopify are referred to in these
Terms of Services as the “<strong>Service(s)</strong>”. Any new
features or tools which are added to the current Services will also be
subject to the Terms of Service. You can review the current version of
the Terms of Service at any time at
<a href="https://www.shopify.com/legal/terms">
https://www.shopify.com/legal/terms
</a>
.
</p>

<p>
You must read, agree with and accept all of the terms and conditions
contained or expressly referenced in these Terms of Service, including
Shopify’s
<a href="https://www.shopify.com/legal/aup">Acceptable Use Policy</a>
(“<strong>AUP</strong>”) and
<a href="https://www.shopify.com/legal/privacy">Privacy Policy</a>,
and, if applicable, the
<a href="https://www.shopify.com/legal/eu-terms">
Supplementary Terms of Service for E.U. Merchants
</a>
(“<strong>EU Terms</strong>”), the Shopify
<a href="https://www.shopify.com/legal/api-terms">
API License and Terms of Use
</a>
(“<strong>API Terms</strong>”) and the Shopify
<a href="https://www.shopify.com/legal/dpa">
Data Processing Addendum
</a>
(“<strong>DPA</strong>”) before you may sign up for a Shopify Account
or use any Shopify Service. Additionally, if you offer goods or
services in relation to COVID-19, you must read, acknowledge and agree
to the
<a href="/legal/rules-of-engagement-covid19">
Rules of Engagement for Sale of COVID-19 Related Products
</a>
.
</p>

<p>
<strong>
Everyday language summaries are provided for convenience only and
appear in bold near each section, but these summaries are not
legally binding. Please read the Terms of Service, including any
document referred to in these Terms of Service, for the complete
picture of your legal requirements. By using Shopify or any Shopify
services, you are agreeing to these terms. Be sure to occasionally
check back for updates.
</strong>
</p>
</div>
</Scrollable>
);
}

export function ToChildComponent() {
return (
<Card title="Terms of service" sectioned>
Expand Down Expand Up @@ -140,7 +234,7 @@ export function ToChildComponent() {
Apple Pay Platform Web Merchant Terms and Conditions, as they may be
amended by Apple from time to time. If Apple amends the Apple Pay
Platform Web Merchant Terms and Conditions, the amended and restated
version will be posted here:{' '}
version will be posted here:
<a href="https://www.shopify.com/legal/apple-pay">
https://www.shopify.com/legal/apple-pay
</a>
Expand Down Expand Up @@ -175,7 +269,7 @@ export function ToChildComponent() {
the Google Payment API Terms of Service, as they may be amended by
Google from time to time. If Google amends the Google Payment API
Terms of Service, the amended and restated version will be posted
here:{' '}
here:
<a href="https://payments.developers.google.com/terms/sellertos">
https://payments.developers.google.com/terms/sellertos
</a>
Expand Down Expand Up @@ -243,10 +337,10 @@ export function ToChildComponent() {
<p>
You acknowledge and agree that Shopify may amend these Terms of
Service at any time by posting the relevant amended and restated Terms
of Service on Shopify’s website, available at{' '}
of Service on Shopify’s website, available at
<a href="https://www.shopify.com/legal/terms">
https://www.shopify.com/legal/terms
</a>{' '}
</a>
and such amendments to the Terms of Service are effective as of the
date of posting. Your continued use of the Services after the amended
Terms of Service are posted to Shopify’s website constitutes your
Expand All @@ -273,7 +367,7 @@ export function ToChildComponent() {
trademarks and/or variations and misspellings thereof.
</p>
<p>
Questions about the Terms of Service should be sent to{' '}
Questions about the Terms of Service should be sent to
<a href="mailto:[email protected]">[email protected]</a>.
</p>
<p>
Expand All @@ -287,7 +381,7 @@ export function ToChildComponent() {
<p>
You acknowledge and agree that your use of the Service, including
information transmitted to or stored by Shopify, is governed by its
privacy policy at{' '}
privacy policy at
<a href="https://www.shopify.com/legal/privacy">
https://www.shopify.com/legal/privacy
</a>
Expand All @@ -297,10 +391,10 @@ export function ToChildComponent() {
To the extent of any inconsistencies or conflicts between these
English Terms of Service and Shopify’s Terms of Service available in
another language, the most current English version of the Terms of
Service at{' '}
Service at
<a href="https://www.shopify.com/legal/terms">
https://www.shopify.com/legal/terms
</a>{' '}
</a>
will prevail.
</p>
<p>Which means</p>
Expand Down
10 changes: 7 additions & 3 deletions polaris-react/src/components/Scrollable/Scrollable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,13 @@ const LOW_RES_BUFFER = 2;
export interface ScrollableProps extends React.HTMLProps<HTMLDivElement> {
/** Content to display in scrollable area */
children?: React.ReactNode;
/** Scroll content vertically */
/** Scroll content vertically
* @default true
* */
vertical?: boolean;
/** Scroll content horizontally */
/** Scroll content horizontally
* @default true
* */
horizontal?: boolean;
/** Add a shadow when content is scrollable */
shadow?: boolean;
Expand Down Expand Up @@ -107,7 +111,7 @@ export class Scrollable extends Component<ScrollableProps, State> {
const {
children,
className,
horizontal,
horizontal = true,
vertical = true,
shadow,
hint,
Expand Down