[BulkActions] Update BulkActions and add in SelectAllActions #7290

mrcthms · 2022-09-28T11:11:53Z

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 · 2022-09-28T13:22:52Z

size-limit report 📦

Path	Size
polaris-react-cjs	210.72 KB (+0.03% 🔺)
polaris-react-esm	136.15 KB (+0.09% 🔺)
polaris-react-esnext	191.98 KB (+0.1% 🔺)
polaris-react-css	42.12 KB (+0.14% 🔺)

mrcthms · 2022-09-28T14:06:23Z

/snapit

github-actions · 2022-09-28T14:11:54Z

🫰✨ 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-20220928140906

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

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

mrcthms · 2022-10-04T19:09:25Z

/snapit

github-actions · 2022-10-04T19:14:24Z

🫰✨ 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-20221004191155

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

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

mrcthms · 2022-10-07T12:58:59Z

/snapit

github-actions · 2022-10-07T13:04:54Z

🫰✨ 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-20221007130147

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

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

mrcthms · 2022-10-07T17:33:39Z

/snapit

github-actions · 2022-10-07T17:37:52Z

🫰✨ 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-20221007173538

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

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

mrcthms · 2022-10-07T18:40:21Z

/snapit

github-actions · 2022-10-07T18:45:14Z

🫰✨ 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-20221007184240

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

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

mrcthms · 2022-10-12T11:26:17Z

/snapit

github-actions · 2022-10-12T11:31:48Z

🫰✨ 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-20221012112901

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

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

mrcthms · 2022-10-13T10:08:07Z

/snapit

github-actions · 2022-10-13T10:12:18Z

🫰✨ 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-20221013101019

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

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

zakwarsame · 2022-10-26T16:26:15Z

/snapit

github-actions · 2022-10-26T16:32:23Z

🫰✨ Thanks @zakwarsame! 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-20221026163019

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

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

zakwarsame · 2022-10-26T19:14:23Z

/snapit

github-actions · 2022-10-26T19:18:58Z

🫰✨ Thanks @zakwarsame! 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-20221026191651

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

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

mrcthms · 2022-11-18T13:45:08Z

/snapit

github-actions · 2022-11-18T13:49:06Z

🫰✨ 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-20221118134718

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

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

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

mrcthms · 2022-11-18T14:45:45Z

/snapit

github-actions · 2022-11-18T14:49:53Z

🫰✨ 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-20221118144805

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

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

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

mrcthms · 2022-11-28T18:55:32Z

/snapit

github-actions · 2022-11-28T18:59:30Z

🫰✨ 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-20221128185741

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

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

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

kyledurand · 2022-11-30T12:41:26Z

polaris-react/src/components/SelectAllActions/SelectAllActions.scss

  gap: var(--p-space-025);
  align-items: center;
  justify-content: flex-start;
+  will-change: opacity, display;


display doesn't animate but safari is weird so I get why this might be needed but is it actually needed?

…7290)" This reverts commit 2b8904f.

…#7811) Reverts #7290 Reverting due to blocking a release of Polaris that needs to go out ASAP.

### WHY are these changes introduced? Fixes Shopify/web#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 <img width="2440" alt="Screenshot 2022-09-28 at 11 42 54" src="https://user-images.githubusercontent.com/2562596/192759539-4fece161-5bef-44ed-961f-4a342f495c69.png"> <img width="2440" alt="Screenshot 2022-09-28 at 11 42 28" src="https://user-images.githubusercontent.com/2562596/192759582-834b2d6a-f0e2-4d07-803f-4be435559495.png"> #### After <img width="2440" alt="Screenshot 2022-09-28 at 11 42 39" src="https://user-images.githubusercontent.com/2562596/192761041-9b38059f-3b80-4a8e-8261-633589098bb4.png"> <img width="2440" alt="Screenshot 2022-09-28 at 11 42 43" src="https://user-images.githubusercontent.com/2562596/192761078-f7fe25e1-4181-49ab-8545-c6e923917d2c.png"> <img width="2440" alt="Screenshot 2022-09-28 at 11 43 00" src="https://user-images.githubusercontent.com/2562596/192761112-bca384f4-ec7f-435c-80a7-b96f2ef7cbb8.png"> <img width="2440" alt="Screenshot 2022-09-28 at 11 43 03" src="https://user-images.githubusercontent.com/2562596/192761145-e6feb191-0430-420c-a77f-9dac004a418a.png"> 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](https://minerva.shopifycloud.com/auth/minerva?request=2905eaf2-0cf1-493c-b6d3-82e6385d6352&rd=https://vault.shopify.io%2Fprojects%2F24858) 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](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)  <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: Zakaria Warsame <zakaria.warsame@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

…#7811) Reverts #7290 Reverting due to blocking a release of Polaris that needs to go out ASAP.

…#7290) ### 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 <img width="2440" alt="Screenshot 2022-09-28 at 11 42 54" src="https://user-images.githubusercontent.com/2562596/192759539-4fece161-5bef-44ed-961f-4a342f495c69.png"> <img width="2440" alt="Screenshot 2022-09-28 at 11 42 28" src="https://user-images.githubusercontent.com/2562596/192759582-834b2d6a-f0e2-4d07-803f-4be435559495.png"> #### After <img width="2440" alt="Screenshot 2022-09-28 at 11 42 39" src="https://user-images.githubusercontent.com/2562596/192761041-9b38059f-3b80-4a8e-8261-633589098bb4.png"> <img width="2440" alt="Screenshot 2022-09-28 at 11 42 43" src="https://user-images.githubusercontent.com/2562596/192761078-f7fe25e1-4181-49ab-8545-c6e923917d2c.png"> <img width="2440" alt="Screenshot 2022-09-28 at 11 43 00" src="https://user-images.githubusercontent.com/2562596/192761112-bca384f4-ec7f-435c-80a7-b96f2ef7cbb8.png"> <img width="2440" alt="Screenshot 2022-09-28 at 11 43 03" src="https://user-images.githubusercontent.com/2562596/192761145-e6feb191-0430-420c-a77f-9dac004a418a.png"> 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](https://minerva.shopifycloud.com/auth/minerva?request=2905eaf2-0cf1-493c-b6d3-82e6385d6352&rd=https://vault.shopify.io%2Fprojects%2F24858) 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](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)  <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: Zakaria Warsame <zakaria.warsame@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

…Shopify#7811) Reverts Shopify#7290 Reverting due to blocking a release of Polaris that needs to go out ASAP.

mrcthms force-pushed the mrcthms-bulk-actions branch from 89aafb3 to 16d5d31 Compare September 28, 2022 13:17

mrcthms force-pushed the mrcthms-bulk-actions branch 2 times, most recently from 90f8831 to 05b6af4 Compare September 28, 2022 13:52

mrcthms force-pushed the mrcthms-bulk-actions branch from 26537c9 to 944ef65 Compare October 4, 2022 19:04

mrcthms force-pushed the mrcthms-bulk-actions branch from 7a50af6 to 40325df Compare October 7, 2022 18:38

zakwarsame force-pushed the mrcthms-bulk-actions branch from a2f6988 to b2dce72 Compare October 19, 2022 16:42

mrcthms force-pushed the mrcthms-bulk-actions branch from 6224bd0 to 3abbbe7 Compare November 18, 2022 13:44

zakwarsame and others added 15 commits November 28, 2022 18:54

chore: use correct tests

a64188a

chore: remove code from rebase

168e5e0

chore: fix offset

1ded4dd

chore: fix placement of loading

78363bc

chore: tidy up checkable button

2ee5e13

chore: fix storybook

84b507e

chore: update tests

3f39efc

chore: call on resize

ca5a4f8

chore: bump size limt

8c484d1

chore: more accurately represent widths

65f51f9

Update 18 translation files

0f5cffd

Update 1 translation file

5f44bb2

chore: initial feedback from review

ce9d46d

chore:export select all actions

bc11548

chore: updates from review

3e34ede

mrcthms force-pushed the mrcthms-bulk-actions branch from 6df66fc to 3e34ede Compare November 28, 2022 18:55

kyledurand reviewed Nov 30, 2022

View reviewed changes

chore: remove display from will-change declaration

fab4d8a

mrcthms merged commit 2b8904f into main Nov 30, 2022

mrcthms deleted the mrcthms-bulk-actions branch November 30, 2022 13:23

shopify-github-actions-access bot mentioned this pull request Nov 30, 2022

Version Packages #7727

Merged

mrcthms added a commit that referenced this pull request Nov 30, 2022

Revert "[BulkActions] Update BulkActions and add in SelectAllActions (#…

5d86339

…7290)" This reverts commit 2b8904f.

mrcthms mentioned this pull request Nov 30, 2022

Revert "[BulkActions] Update BulkActions and add in SelectAllActions" #7811

Merged

mrcthms added a commit that referenced this pull request Nov 30, 2022

Revert "[BulkActions] Update BulkActions and add in SelectAllActions" (…

9d69c90

…#7811) Reverts #7290 Reverting due to blocking a release of Polaris that needs to go out ASAP.

laurkim pushed a commit that referenced this pull request Nov 30, 2022

Revert "[BulkActions] Update BulkActions and add in SelectAllActions" (…

51ad76c

…#7811) Reverts #7290 Reverting due to blocking a release of Polaris that needs to go out ASAP.

juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023

Revert "[BulkActions] Update BulkActions and add in SelectAllActions" (…

3d691ac

…Shopify#7811) Reverts Shopify#7290 Reverting due to blocking a release of Polaris that needs to go out ASAP.

[BulkActions] Update BulkActions and add in SelectAllActions #7290

[BulkActions] Update BulkActions and add in SelectAllActions #7290

Uh oh!

Conversation

mrcthms commented Sep 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

Before

After

How to 🎩

🎩 checklist

Uh oh!

github-actions bot commented Sep 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

mrcthms commented Sep 28, 2022

Uh oh!

github-actions bot commented Sep 28, 2022

Uh oh!

mrcthms commented Oct 4, 2022

Uh oh!

github-actions bot commented Oct 4, 2022

Uh oh!

mrcthms commented Oct 7, 2022

Uh oh!

github-actions bot commented Oct 7, 2022

Uh oh!

mrcthms commented Oct 7, 2022

Uh oh!

github-actions bot commented Oct 7, 2022

Uh oh!

mrcthms commented Oct 7, 2022

Uh oh!

github-actions bot commented Oct 7, 2022

Uh oh!

mrcthms commented Oct 12, 2022

Uh oh!

github-actions bot commented Oct 12, 2022

Uh oh!

mrcthms commented Oct 13, 2022

Uh oh!

github-actions bot commented Oct 13, 2022

Uh oh!

zakwarsame commented Oct 26, 2022

Uh oh!

github-actions bot commented Oct 26, 2022

Uh oh!

zakwarsame commented Oct 26, 2022

Uh oh!

github-actions bot commented Oct 26, 2022

Uh oh!

mrcthms commented Nov 18, 2022

Uh oh!

github-actions bot commented Nov 18, 2022

Uh oh!

mrcthms commented Nov 18, 2022

Uh oh!

github-actions bot commented Nov 18, 2022

Uh oh!

mrcthms commented Nov 28, 2022

Uh oh!

github-actions bot commented Nov 28, 2022

Uh oh!

kyledurand Nov 30, 2022

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mrcthms commented Sep 28, 2022 •

edited

Loading

github-actions bot commented Sep 28, 2022 •

edited

Loading