[BulkActions] Update BulkActions and add in SelectAllActions

[mrcthms]

It's the revert of the revert 🫠

WHY are these changes introduced?

Fixes https://github.com/Shopify/web/issues/74192

Spin link in situ: https://admin.web.discounts-update-save-as.marc-thomas.eu.spin.dev/store/shop1/orders?inContextTimeframe=none

WHAT is this pull request doing?

Before

After

This PR updates the BulkActions component, used on the IndexTable and ResourceList components, as well as moving some functionality from BulkActions into the new SelectAllActions component. This is to support the Unified Index Filtering and Search project.

This PR introduces a new UX pattern for the BulkActions component. It has been separated from the Select X actions – which is now the SelectAllActions component, and the BulkActions component gets rendered afterward in the DOM.

Components that consume the BulkActions use the new useIsBulkActionSticky hook to determine whether the BulkActions component should be position: fixed or position: absolute with a calculated top position. We have had to do this rather than use a regular position: sticky on the BulkActions element, as the keyboard focus order needs to be logically preserved, and moving the BulkActions component under the table/resource list HTML in the DOM would provide a bad experience for users navigating via keyboard.

The IndexTable and ResourceList components have been updated with this new component.

The CheckableButton component has been simplified, as a lot of the logic required in the existing implementation is no longer needed.

As part of this work, small-screen BulkActions and SelectAllActions support has been removed, as we are removing bulk action and select functionality for small screens, as an intentional decision as part of the Unified Index Filtering and Search project.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

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

🎩 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

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	211.03 KB (+0.03% 🔺)
polaris-react-esm	136.28 KB (+0.08% 🔺)
polaris-react-esnext	192.05 KB (+0.09% 🔺)
polaris-react-css	42 KB (+0.22% 🔺)

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

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

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221202143827

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221202143827

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

[laurkim]

Approving previously reverted PR

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

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

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221205155950

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20221205155950

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221205155950

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

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20221205155950

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

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

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221205181116

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20221205181116

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221205181116

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

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20221205181116

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

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

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221205192832

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20221205192832

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221205192832

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

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20221205192832