[Backdrop] Call onClick regardless of setClosing prop presence

[loic-d]

WHY are these changes introduced?

I believe #8090 introduced a regression where the onClick prop of the Backdrop component is not called when the consumer of the component also doesn't provide setClosing as a prop (released in Polaris 10.23.0). There are various occurrences of Web Admin using Backdrop without providing setClosing as a prop, so some sheets are not properly closing when clicking outside. For example in Customer Segmentation:

You can reproduce the issue in this CodeSandbox. Switching to a version of Polaris < 10.23.0 fixes the issue.

WHAT is this pull request doing?

This PR ensures onClick is always called, regardless of setClosing being provided.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

See Playground code. After opening the backdrop, clicking on it again should properly close it.

Copy-paste this code in playground/Playground.tsx:

import React, {useState} from 'react';

import {Backdrop, Button, Page} from '../src';

export function Playground() {
  const [open, setOpen] = useState(false);

  return (
    <Page title="Playground">
      <div style={{ position: "absolute", zIndex: 999999 }}>
        <Button onClick={() => setOpen(!open)}>Toggle backdrop</Button>
      </div>
      {open && (
        <Backdrop
          setClosing={() => {}}
          onClick={() => {
            console.log("onClick from Backdrop");
            setOpen(false);
          }}
        />
      )}
    </Page>
  );
}

You can also 🎩 directly in Admin using this Spin instance:

• Go to the Customers section
• Open Segmentation templates

• Click outside of the sheet. The sheet should properly close.

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[loic-d]

/snapit

[github-actions]

🫰✨ Thanks @loic-d! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230201184728

yarn add @shopify/polaris@0.0.0-snapshot-release-20230201184728

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	215.95 KB (-0.01% 🔽)
polaris-react-esm	137.27 KB (-0.01% 🔽)
polaris-react-esnext	191.59 KB (-0.01% 🔽)
polaris-react-css	41.03 KB (0%)

[JaKXz]

LGTM, thanks @loic-d

[emmanueletti]

Thanks for the catch and fix!