[Popover/pane] add subdued prop (#10042)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### 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?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### 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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 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 <[email protected]>

.changeset/clever-ducks-camp.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+introduce a subdued prop to the popover pane component

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;
 }

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 = (
+    <Button
+      onClick={() => {
+        togglePopoverActive();
+      }}
+      disclosure
+    >
+      Show popover
+    </Button>
+  );
+
+  return (
+    <div style={{height: '280px'}}>
+      <Popover
+        active={popoverActive}
+        activator={activator}
+        onClose={togglePopoverActive}
+      >
+        <Popover.Pane>
+          <Box padding="4">
+            <Text as="p">Popover content</Text>
+          </Box>
+        </Popover.Pane>
+        <Popover.Pane subdued>
+          <Box padding="4">
+            <Text as="p">Subdued popover pane</Text>
+          </Box>
+        </Popover.Pane>
+      </Popover>
+    </div>
+  );
+}
+
 const StopPropagation = ({children}: React.PropsWithChildren<any>) => {
   const stopEventPropagation = (event: React.MouseEvent | React.TouchEvent) => {
     event.stopPropagation();

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

polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx

@@ -58,6 +58,44 @@ describe('<Pane />', () => {
     });
   });
 
+  describe('subdued', () => {
+    it(`does not append the subdued class if the prop isn't provided`, () => {
+      const Children = () => (
+        <TextContainer>
+          <p>Text</p>
+        </TextContainer>
+      );
+
+      const popoverPane = mountWithApp(
+        <Pane>
+          <Children />
+        </Pane>,
+      );
+
+      expect(popoverPane.find(Scrollable)?.props.className).not.toContain(
+        'Pane-subdued',
+      );
+    });
+
+    it('appends the subdued class if the prop isn provided', () => {
+      const Children = () => (
+        <TextContainer>
+          <p>Text</p>
+        </TextContainer>
+      );
+
+      const popoverPane = mountWithApp(
+        <Pane subdued>
+          <Children />
+        </Pane>,
+      );
+
+      expect(popoverPane.find(Scrollable)?.props.className).toContain(
+        'Pane-subdued',
+      );
+    });
+  });
+
   describe('sectioned', () => {
     it('renders children in a Section when set to true', () => {
       const Children = () => (