From 1d82a3b122fc1d47a14d978d180f3e9e5d5359e2 Mon Sep 17 00:00:00 2001 From: Matt Lavoie <44816587+m4thieulavoie@users.noreply.github.com> Date: Mon, 14 Aug 2023 08:49:14 -0400 Subject: [PATCH] [Popover/pane] add subdued prop (#10042) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? This PR adds a `subdued` prop to Popover's pane for better separation between panes ### WHAT is this pull request doing? ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)
Copy-paste this code in playground/Playground.tsx: ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( {/* Add the code you want to test in here */} ); } ```
### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Jess Telford --- .changeset/clever-ducks-camp.md | 5 +++ .../src/components/Popover/Popover.scss | 4 ++ .../components/Popover/Popover.stories.tsx | 42 +++++++++++++++++++ .../Popover/components/Pane/Pane.tsx | 7 ++++ .../components/Pane/tests/Pane.test.tsx | 38 +++++++++++++++++ 5 files changed, 96 insertions(+) create mode 100644 .changeset/clever-ducks-camp.md diff --git a/.changeset/clever-ducks-camp.md b/.changeset/clever-ducks-camp.md new file mode 100644 index 00000000000..95a24c08090 --- /dev/null +++ b/.changeset/clever-ducks-camp.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +introduce a subdued prop to the popover pane component diff --git a/polaris-react/src/components/Popover/Popover.scss b/polaris-react/src/components/Popover/Popover.scss index d50e897e224..7202f68c781 100644 --- a/polaris-react/src/components/Popover/Popover.scss +++ b/polaris-react/src/components/Popover/Popover.scss @@ -120,6 +120,10 @@ $vertical-motion-offset: -5px; flex: 0 0 auto; } +.Pane-subdued { + background-color: var(--p-color-bg-subdued); +} + .Pane-captureOverscroll { overscroll-behavior: contain; } diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx index 929668952c4..8c51e39ab47 100644 --- a/polaris-react/src/components/Popover/Popover.stories.tsx +++ b/polaris-react/src/components/Popover/Popover.stories.tsx @@ -3,6 +3,7 @@ import type {ComponentMeta} from '@storybook/react'; import { ActionList, Avatar, + Box, Button, LegacyCard, FormLayout, @@ -816,6 +817,47 @@ export function WithLoadingSmallerContent() { ); } +export function WithSubduedPane() { + const [popoverActive, setPopoverActive] = useState(true); + + const togglePopoverActive = useCallback( + () => setPopoverActive((popoverActive) => !popoverActive), + [], + ); + + const activator = ( + + ); + + return ( +
+ + + + Popover content + + + + + Subdued popover pane + + + +
+ ); +} + const StopPropagation = ({children}: React.PropsWithChildren) => { const stopEventPropagation = (event: React.MouseEvent | React.TouchEvent) => { event.stopPropagation(); diff --git a/polaris-react/src/components/Popover/components/Pane/Pane.tsx b/polaris-react/src/components/Popover/components/Pane/Pane.tsx index 2ee7d084097..4025835e6ae 100644 --- a/polaris-react/src/components/Popover/components/Pane/Pane.tsx +++ b/polaris-react/src/components/Popover/components/Pane/Pane.tsx @@ -22,6 +22,11 @@ export interface PaneProps { * @default false */ captureOverscroll?: boolean; + /** + * Sets a subdued background to the pane + * @default false + */ + subdued?: boolean; } export function Pane({ @@ -30,11 +35,13 @@ export function Pane({ sectioned, children, height, + subdued, onScrolledToBottom, }: PaneProps) { const className = classNames( styles.Pane, fixed && styles['Pane-fixed'], + subdued && styles['Pane-subdued'], captureOverscroll && styles['Pane-captureOverscroll'], ); const content = sectioned diff --git a/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx b/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx index d7425392284..b05c0f4d4e6 100644 --- a/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx +++ b/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx @@ -58,6 +58,44 @@ describe('', () => { }); }); + describe('subdued', () => { + it(`does not append the subdued class if the prop isn't provided`, () => { + const Children = () => ( + +

Text

+ + ); + + const popoverPane = mountWithApp( + + + , + ); + + expect(popoverPane.find(Scrollable)?.props.className).not.toContain( + 'Pane-subdued', + ); + }); + + it('appends the subdued class if the prop isn provided', () => { + const Children = () => ( + +

Text

+ + ); + + const popoverPane = mountWithApp( + + + , + ); + + expect(popoverPane.find(Scrollable)?.props.className).toContain( + 'Pane-subdued', + ); + }); + }); + describe('sectioned', () => { it('renders children in a Section when set to true', () => { const Children = () => (