-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[BulkActions] Update BulkActions and add in SelectAllActions (#7833)
It's the revert of the revert 🫠 ### 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. <!-- ℹ️ 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
- Loading branch information
Showing
46 changed files
with
1,331 additions
and
1,094 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@shopify/polaris': minor | ||
--- | ||
|
||
Separated BulkActions and SelectAllActions for new sticky bulk actions experience |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.