From 995ff66f0131dc8774b17f5ce9c3fa1e6d61ec8c Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Fri, 21 Oct 2022 12:01:15 -0400 Subject: [PATCH] [Scrollable] Fix horizontal scroll bug --- .changeset/serious-gifts-double.md | 5 + .../src/components/Scrollable/Scrollable.scss | 2 + .../Scrollable/Scrollable.stories.tsx | 110 ++++++++++++++++-- .../src/components/Scrollable/Scrollable.tsx | 10 +- 4 files changed, 116 insertions(+), 11 deletions(-) create mode 100644 .changeset/serious-gifts-double.md diff --git a/.changeset/serious-gifts-double.md b/.changeset/serious-gifts-double.md new file mode 100644 index 00000000000..530bc36a9e2 --- /dev/null +++ b/.changeset/serious-gifts-double.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Fixed horizontal scroll bug in Scrollable diff --git a/polaris-react/src/components/Scrollable/Scrollable.scss b/polaris-react/src/components/Scrollable/Scrollable.scss index 2d06ba5581a..a4fccf707a1 100644 --- a/polaris-react/src/components/Scrollable/Scrollable.scss +++ b/polaris-react/src/components/Scrollable/Scrollable.scss @@ -10,6 +10,8 @@ -webkit-overflow-scrolling: touch; position: relative; max-height: var(--pc-scrollable-max-height); + overflow-x: hidden; + overflow-y: hidden; &:focus { outline: var(--p-border-width-2) solid var(--p-focused); diff --git a/polaris-react/src/components/Scrollable/Scrollable.stories.tsx b/polaris-react/src/components/Scrollable/Scrollable.stories.tsx index db58c6cc890..ef8f1b7d34b 100644 --- a/polaris-react/src/components/Scrollable/Scrollable.stories.tsx +++ b/polaris-react/src/components/Scrollable/Scrollable.stories.tsx @@ -30,6 +30,100 @@ export function Default() { ); } +export function WithHorizonalScrollPrevention() { + return ( + +
+

Last updated on: September 6, 2022

+ +

+ 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 “ + Terms of Service”). +

+ +

+ As used in these Terms of Service, “we”, “ + us”, “our” and “ + Shopify” means the applicable Shopify Contracting + Party (as defined in Section 13 below), and “you” + 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. +

+ +

+ 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 + (“Online Services”) and in person (“ + POS Services”)), 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 “Service(s)”. 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 + + https://www.shopify.com/legal/terms + + . +

+ +

+ 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 + Acceptable Use Policy + (“AUP”) and + Privacy Policy, + and, if applicable, the + + Supplementary Terms of Service for E.U. Merchants + + (“EU Terms”), the Shopify + + API License and Terms of Use + + (“API Terms”) and the Shopify + + Data Processing Addendum + + (“DPA”) 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 + + Rules of Engagement for Sale of COVID-19 Related Products + + . +

+ +

+ + 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. + +

+
+ + ); +} + export function ToChildComponent() { return ( @@ -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: https://www.shopify.com/legal/apple-pay @@ -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: https://payments.developers.google.com/terms/sellertos @@ -243,10 +337,10 @@ export function ToChildComponent() {

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 https://www.shopify.com/legal/terms - {' '} + 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 @@ -273,7 +367,7 @@ export function ToChildComponent() { trademarks and/or variations and misspellings thereof.

- Questions about the Terms of Service should be sent to{' '} + Questions about the Terms of Service should be sent to support@shopify.com.

@@ -287,7 +381,7 @@ export function ToChildComponent() {

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 https://www.shopify.com/legal/privacy @@ -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 https://www.shopify.com/legal/terms - {' '} + will prevail.

Which means

diff --git a/polaris-react/src/components/Scrollable/Scrollable.tsx b/polaris-react/src/components/Scrollable/Scrollable.tsx index 8dd5a468538..2cc8d21cc14 100644 --- a/polaris-react/src/components/Scrollable/Scrollable.tsx +++ b/polaris-react/src/components/Scrollable/Scrollable.tsx @@ -22,9 +22,13 @@ const LOW_RES_BUFFER = 2; export interface ScrollableProps extends React.HTMLProps { /** 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; @@ -107,7 +111,7 @@ export class Scrollable extends Component { const { children, className, - horizontal, + horizontal = true, vertical = true, shadow, hint,