Commit d70e199
[BulkActions] Update BulkActions and add in SelectAllActions (Shopify#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.
<!-- ℹ️ 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: Zakaria Warsame <zakaria.warsame@shopify.com>
Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>1 parent 8071142 commit d70e199
File tree
47 files changed
+1314
-1073
lines changed- .changeset
- polaris-react
- locales
- src
- components
- BulkActions
- hooks
- tests
- tests
- CheckableButton
- IndexTable
- tests
- ResourceList
- tests
- SelectAllActions
- tests
- utilities/resource-list
Some content is hidden
Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
47 files changed
+1314
-1073
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
| 3 | + | |
| 4 | + | |
| 5 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
87 | 87 | | |
88 | 88 | | |
89 | 89 | | |
90 | | - | |
| 90 | + | |
91 | 91 | | |
92 | 92 | | |
93 | 93 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
282 | 282 | | |
283 | 283 | | |
284 | 284 | | |
285 | | - | |
| 285 | + | |
286 | 286 | | |
287 | 287 | | |
288 | 288 | | |
| |||
294 | 294 | | |
295 | 295 | | |
296 | 296 | | |
297 | | - | |
| 297 | + | |
298 | 298 | | |
299 | 299 | | |
300 | 300 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
280 | 280 | | |
281 | 281 | | |
282 | 282 | | |
283 | | - | |
| 283 | + | |
284 | 284 | | |
285 | 285 | | |
286 | 286 | | |
| |||
292 | 292 | | |
293 | 293 | | |
294 | 294 | | |
295 | | - | |
| 295 | + | |
296 | 296 | | |
297 | 297 | | |
298 | 298 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
280 | 280 | | |
281 | 281 | | |
282 | 282 | | |
283 | | - | |
| 283 | + | |
284 | 284 | | |
285 | 285 | | |
286 | 286 | | |
| |||
292 | 292 | | |
293 | 293 | | |
294 | 294 | | |
295 | | - | |
| 295 | + | |
296 | 296 | | |
297 | 297 | | |
298 | 298 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
162 | 162 | | |
163 | 163 | | |
164 | 164 | | |
165 | | - | |
| 165 | + | |
166 | 166 | | |
167 | 167 | | |
168 | 168 | | |
| |||
174 | 174 | | |
175 | 175 | | |
176 | 176 | | |
177 | | - | |
| 177 | + | |
178 | 178 | | |
179 | 179 | | |
180 | 180 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
281 | 281 | | |
282 | 282 | | |
283 | 283 | | |
284 | | - | |
| 284 | + | |
285 | 285 | | |
286 | 286 | | |
287 | 287 | | |
| |||
293 | 293 | | |
294 | 294 | | |
295 | 295 | | |
296 | | - | |
| 296 | + | |
297 | 297 | | |
298 | 298 | | |
299 | 299 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
280 | 280 | | |
281 | 281 | | |
282 | 282 | | |
283 | | - | |
| 283 | + | |
284 | 284 | | |
285 | 285 | | |
286 | 286 | | |
| |||
292 | 292 | | |
293 | 293 | | |
294 | 294 | | |
295 | | - | |
| 295 | + | |
296 | 296 | | |
297 | 297 | | |
298 | 298 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
281 | 281 | | |
282 | 282 | | |
283 | 283 | | |
284 | | - | |
| 284 | + | |
285 | 285 | | |
286 | 286 | | |
287 | 287 | | |
| |||
293 | 293 | | |
294 | 294 | | |
295 | 295 | | |
296 | | - | |
| 296 | + | |
297 | 297 | | |
298 | 298 | | |
299 | 299 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
281 | 281 | | |
282 | 282 | | |
283 | 283 | | |
284 | | - | |
| 284 | + | |
285 | 285 | | |
286 | 286 | | |
287 | 287 | | |
| |||
293 | 293 | | |
294 | 294 | | |
295 | 295 | | |
296 | | - | |
| 296 | + | |
297 | 297 | | |
298 | 298 | | |
299 | 299 | | |
| |||
0 commit comments