[BulkActions] Bring everything up to the top #11622

mrcthms · 2024-02-19T17:26:48Z

WHY are these changes introduced?

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

We want to further update the bulk/select actions to re-combine them into the same piece of UI. We had broken bulk and select actions up as part of the initial Index Filtering and Search work, but now realise that keeping them colocated is the best UX for our merchants.

WHAT is this pull request doing?

This PR:

re-introduces all the select logic to the BulkActions component
left-align select actions, right-align bulk actions
rewrites the BulkActions component to a function component from a class component
updates the logic to show/hide promoted actions, as the previous method was broken
deprecate the SelectAllActions component
updates IndexTable & ResourceList to remove SelectAllActions, update BulkActions implementation
removes the useIsSelectAllActionsSticky hook (never exported, only used to position the SelectAllActions internally within ResourceList/IndexTable

The biggest piece of work is updating how the bulk actions show/rollup logic works. Beforehand, it would either show all promoted actions if they fit, or roll every single one up behind a meatball menu. This wasn't great, as we should show as many as possible in the available space. As part of the update to a function component, we now utilise a similar layout sizing mechanism as we use in both the Tabs and ActionMenu -> Actions components, to render as many promoted actions as we possibly can in the available space.

How to 🎩

Spin URL for IndexTable: https://admin.web.bulk-ui-refresh.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=all
Spin URL for ResourceList: https://admin.web.bulk-ui-refresh.marc-thomas.eu.spin.dev/store/shop1/products/32
Spin URL for Updated Draft orders (using Shopify/web ResourceListWithHeader): https://admin.web.bulk-ui-refresh.marc-thomas.eu.spin.dev/store/shop1/draft_orders?selectedView=all

🎩 checklist

Tested a snapshot
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

mrcthms · 2024-02-21T12:03:09Z

/snapit

github-actions · 2024-02-21T12:06:49Z

✨ 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/polaris-icons@0.0.0-snapshot-20240221120537

yarn add @shopify/polaris@0.0.0-snapshot-20240221120537

mrcthms · 2024-02-21T15:15:28Z

/snapit

github-actions · 2024-02-21T15:18:41Z

✨ 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/polaris-icons@0.0.0-snapshot-20240221151805

yarn add @shopify/polaris@0.0.0-snapshot-20240221151805

mrcthms · 2024-02-21T15:43:11Z

/snapit

github-actions · 2024-02-21T15:46: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/polaris-icons@0.0.0-snapshot-20240221154546

yarn add @shopify/polaris@0.0.0-snapshot-20240221154546

mrcthms · 2024-02-21T16:21:27Z

/snapit

github-actions · 2024-02-21T16:24:45Z

✨ 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/polaris-icons@0.0.0-snapshot-20240221162416

yarn add @shopify/polaris@0.0.0-snapshot-20240221162416

mrcthms · 2024-02-21T16:55:52Z

/snapit

github-actions · 2024-02-21T16:59:00Z

✨ 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/polaris-icons@0.0.0-snapshot-20240221165828

yarn add @shopify/polaris@0.0.0-snapshot-20240221165828

mrcthms · 2024-02-22T10:42:26Z

/snapit

github-actions · 2024-02-22T10:45:36Z

🫰✨ 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/polaris-icons@0.0.0-snapshot-20240222104505

yarn add @shopify/polaris@0.0.0-snapshot-20240222104505

ouellettejordan

For items that roll-up into the overflow, a couple changes needed...

keep all "promoted actions" in the same section — no divider line between promoted action, however mainting divider line between actions that already existed in the overflow and the promoted actions that roll-up into the overflow
maintain order of items that get rolled up into overflow — ie: original order of items in header area Bulk edit / Set as draft / Set as active — this should translate to this in the overflow menu...
Bulk edit
Set as draft
Set as active
Draft order bulk select position is broken as well as label is lost (Actions as there are none promoted). Let's ensure this isn't happening elsewhere as well.

boyutf · 2024-02-22T16:52:31Z

Hi @mrcthms , thanks for the change 🙏

I just tried on your latest snapshot. After commenting out bulkActions I can no longer get the select all in this option, it's still tied to bulkActions and I wonder what is missing.
This is where we are calling the settingsTable which is a wrapper around indexTable

mrcthms · 2024-02-22T16:55:38Z

@boyutf I haven't made a snapshot with the changes to work without actions/promotedActions, I'll run the command now to create a new snapshot which should include those changes

mrcthms · 2024-02-22T16:55:44Z

/snapit

github-actions · 2024-02-22T16:58:57Z

🫰✨ 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/polaris-icons@0.0.0-snapshot-20240222165828

yarn add @shopify/polaris@0.0.0-snapshot-20240222165828

mrcthms · 2024-02-22T17:26:08Z

@ouellettejordan

keep all "promoted actions" in the same section — no divider line between promoted action, however mainting divider line between actions that already existed in the overflow and the promoted actions that roll-up into the overflow

This would be a new change compared to how it currently works in the admin, we currently add each promoted action in their own section.

One thing to note about this, is that for promoted actions that contain child actions inside a dropdown, we render the child actions in the meatball menu. Added a little video of how that looks now when they're all rolled up into the same section rather than the promoted actions with child actions having their own section

Screen.Recording.2024-02-22.at.17.24.48.mov

maintain order of items that get rolled up into overflow — ie: original order of items in header area Bulk edit / Set as draft / Set as active — this should translate to this in the overflow menu...

Would we not want to show as many promoted actions as possible in the space, even if they're not in the same order? In the example video below, we could easily fit the "Export" button next to "Rename customers" when "Edit customers" gets rolled up. Feels like we're wasting available space in a key piece of screen real estate by forcing them to always roll up in the same order

Screen.Recording.2024-02-22.at.17.16.55.mov

Draft order bulk select position is broken as well as label is lost (Actions as there are none promoted). Let's ensure this isn't happening elsewhere as well.

That's expected at this stage, the Draft orders index doesn't use the IndexTable so we'd have to make some changes within Shopify/web to support this new BulkActions experience – we'd make sure obviously that we had these updates ready to go for when the Polaris version containing this change is released

mrcthms · 2024-02-22T18:07:40Z

/snapit

github-actions · 2024-02-22T18:10:50Z

🫰✨ 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/polaris-icons@0.0.0-snapshot-20240222181016

yarn add @shopify/polaris@0.0.0-snapshot-20240222181016

laurkim

Looks good from code standpoint 💯
I have some concerns about the updates to the micro Button styles but most likely just need a bit more clarification on it.

laurkim · 2024-02-23T16:41:28Z

polaris-react/src/components/BulkActions/BulkActions.tsx

+    disclosureWidth,
+    promotedActions,
+    actionsWidths,
+    // setState,


laurkim · 2024-02-23T16:57:21Z

polaris-react/src/components/BulkActions/BulkActions.tsx

-
-  return <BulkActionsInner {...props} i18n={i18n} innerRef={ref} />;
+  return (
+    <div className={bulkActionsClassNames} style={width ? {width} : undefined}>


Suggested change

<div className={bulkActionsClassNames} style={width ? {width} : undefined}>

<div className={styles.BulkActions} style={width ? {width} : undefined}>

Light suggestion to just use styles.BulkActions directly here and remove bulkActionsClassNames variable higher up since classnames aren't being combined.

laurkim · 2024-02-23T17:06:59Z

polaris-react/src/components/Button/Button.module.scss

+  &.variantMonochromePlain {
+    font-weight: var(--p-font-weight-medium);
+    font-size: var(--p-font-size-300);
+  }


From what I can tell, the BulkActionButton is rendering a Button without setting a variant (so it's using the default secondary variant). I might be missing another case where a monochromePlain is being rendered with bulk actions but if not, is this still needed?

@laurkim Nope, not needed anymore! We have initial designs which used a micro monochrome plain, but have since updated it to be the regular micro button, so I'll remove this 🙌

laurkim · 2024-02-23T17:16:26Z

polaris-react/src/components/IndexTable/IndexTable.tsx

-        } as React.CSSProperties
-      }
-    >
+    <div className={paginationWrapperClassNames}>


Suggested change

<div className={paginationWrapperClassNames}>

<div className={styles.PaginationWrapper}>

Light suggestion to use class name directly since multiple class names aren't being combined. Would require removing the paginationWrapperClassNames variable.

laurkim · 2024-02-23T17:17:16Z

polaris-react/src/components/IndexTable/IndexTable.tsx

      <div className={styles.IndexTable}>
-        <div className={tableWrapperClassNames} ref={tableMeasurerRef}>
-          {!shouldShowBulkActions && !condensed && loadingMarkup}
+        <div className={tableWrapperClassNames}>


Suggested change

<div className={tableWrapperClassNames}>

<div className={styles.IndexTableWrapper}>

Light suggestion to use class name directly since multiple class names aren't being combined. Would require removing the tableWrapperClassNames variable.

laurkim · 2024-02-23T17:18:06Z

polaris-react/src/components/ResourceList/ResourceList.tsx

-        } as React.CSSProperties
-      }
-    >
+    <div className={paginationWrapperClassNames}>


Suggested change

<div className={paginationWrapperClassNames}>

<div className={styles.PaginationWrapper}>

laurkim · 2024-02-23T17:18:56Z

polaris-react/src/components/ResourceList/ResourceList.tsx

    <ResourceListContext.Provider value={context}>
      {filterControlMarkup}
-      <div className={resourceListWrapperClasses} ref={tableMeasurerRef}>
+      <div className={resourceListWrapperClasses}>


Suggested change

<div className={resourceListWrapperClasses}>

<div className={styles.ResourceListWrapper}>

ouellettejordan

Tested and all looks and works as expected 👍

### WHY are these changes introduced? Addresses Shopify/web#119227 Reliant on #11622 merging before this can merge. Updates the table variant of the Pagination component to match the new required UI. [Figma for reference](https://www.figma.com/file/shC6hyM1MC60abgslhpUib/Index-bulk-actions?type=design&node-id=11-207471&mode=design&t=alwlAtMB43g2Kk1h-0). ### WHAT is this pull request doing? - Centre-align buttons - Add prominence to buttons with background color that's different to surrounding box. ### How to 🎩 Spin URL: https://admin.web.pagination-refresh.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=all ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [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

@sophschneider

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris@12.19.0 ### Minor Changes - [#11399](#11399) [`0134d2378`](0134d23) Thanks [@sophschneider](https://github.com/sophschneider)! - Added `PositionedOverlay` scroll support for all scroll containers - [#11622](#11622) [`1f81501c8`](1f81501) Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the BulkActions component to include logic to handling selecting and deselecting rows - [#11637](#11637) [`1ac638246`](1ac6382) Thanks [@mrcthms](https://github.com/mrcthms)! - Updated Pagination table variant to have more prominent and centrally-aligned actions ### Patch Changes - [#11644](#11644) [`b95fc9807`](b95fc98) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed nav wrapper from breadcrumbs since it now only renders a single link ## polaris.shopify.com@0.63.2 ### Patch Changes - Updated dependencies \[[`0134d2378`](0134d23), [`1f81501c8`](1f81501), [`1ac638246`](1ac6382), [`b95fc9807`](b95fc98)]: - @shopify/polaris@12.19.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

ecom-integrations · 2024-02-27T22:25:14Z

Guys seriously make up your mind which direction you are going with this. This is the 3rd major change in recent weeks. The old method of rendering the bulk actions menu over the bottom of the table was the best. Previous version was okay but had issues with CLS and now this new way requires the user to move the mouse pointer to the opposite side of the screen to select the action required. Not a great user experience IMO.

### WHY are these changes introduced? Fixes Shopify/web#119088 We want to further update the bulk/select actions to re-combine them into the same piece of UI. We had broken bulk and select actions up as part of the initial Index Filtering and Search work, but now realise that keeping them colocated is the best UX for our merchants. ### WHAT is this pull request doing? <img width="1624" alt="Screenshot 2024-02-22 at 12 23 50" src="https://github.com/Shopify/polaris/assets/2562596/11b33a11-474a-42fb-8475-1137da228481"> This PR: - re-introduces all the select logic to the BulkActions component - left-align select actions, right-align bulk actions - rewrites the BulkActions component to a function component from a class component - updates the logic to show/hide promoted actions, as the previous method was broken - deprecate the SelectAllActions component - updates IndexTable & ResourceList to remove SelectAllActions, update BulkActions implementation - removes the useIsSelectAllActionsSticky hook (never exported, only used to position the SelectAllActions internally within ResourceList/IndexTable The biggest piece of work is updating how the bulk actions show/rollup logic works. Beforehand, it would either show all promoted actions if they fit, or roll every single one up behind a meatball menu. This wasn't great, as we should show as many as possible in the available space. As part of the update to a function component, we now utilise a similar layout sizing mechanism as we use in both the Tabs and ActionMenu -> Actions components, to render as many promoted actions as we possibly can in the available space. ### How to 🎩 Spin URL for IndexTable: https://admin.web.bulk-ui-refresh.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=all Spin URL for ResourceList: https://admin.web.bulk-ui-refresh.marc-thomas.eu.spin.dev/store/shop1/products/32 Spin URL for Updated Draft orders (using Shopify/web `ResourceListWithHeader`): https://admin.web.bulk-ui-refresh.marc-thomas.eu.spin.dev/store/shop1/draft_orders?selectedView=all ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [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

mrcthms force-pushed the mrcthms-bulk-ui-reeeeemix branch 3 times, most recently from 5329b39 to c22ed13 Compare February 21, 2024 11:59

mrcthms added 3 commits February 21, 2024 12:01

chore: begin work to re-work bulk actions

b7a218e

chore: allow unrolling of action sections to be present in main bar

e6f77c3

chore: fix tests and fix memory leak

5b19cfc

mrcthms force-pushed the mrcthms-bulk-ui-reeeeemix branch from c22ed13 to fdfbed4 Compare February 21, 2024 12:01

chore: changeset

caac7f7

mrcthms force-pushed the mrcthms-bulk-ui-reeeeemix branch from fdfbed4 to caac7f7 Compare February 21, 2024 12:19

chore: ensure index table headings are 36px

2494b7c

chore: decrease gap in between actions, revert pagination changes

fc6b517

mrcthms force-pushed the mrcthms-bulk-ui-reeeeemix branch from 07b1cbb to fc6b517 Compare February 21, 2024 16:53

mrcthms marked this pull request as ready for review February 22, 2024 10:35

chore: make bulk actions work without actions or promoted actions

6f2a570

mrcthms force-pushed the mrcthms-bulk-ui-reeeeemix branch from adc0a22 to 6f2a570 Compare February 22, 2024 12:22

mrcthms mentioned this pull request Feb 22, 2024

[Pagination] Update UI #11637

Merged

6 tasks

ouellettejordan self-requested a review February 22, 2024 16:42

ouellettejordan requested changes Feb 22, 2024

View reviewed changes

chore: feedback from review

83e36a4

laurkim approved these changes Feb 23, 2024

View reviewed changes

ouellettejordan self-requested a review February 23, 2024 17:46

ouellettejordan approved these changes Feb 23, 2024

View reviewed changes

chore: code clean up

79adf23

mrcthms merged commit 1f81501 into main Feb 26, 2024

mrcthms deleted the mrcthms-bulk-ui-reeeeemix branch February 26, 2024 10:38

shopify-github-actions-access bot mentioned this pull request Feb 26, 2024

Version Packages #11649

Merged

	<div className={bulkActionsClassNames} style={width ? {width} : undefined}>
	<div className={styles.BulkActions} style={width ? {width} : undefined}>

	<div className={paginationWrapperClassNames}>
	<div className={styles.PaginationWrapper}>

	<div className={tableWrapperClassNames}>
	<div className={styles.IndexTableWrapper}>

	<div className={resourceListWrapperClasses}>
	<div className={styles.ResourceListWrapper}>

[BulkActions] Bring everything up to the top #11622

[BulkActions] Bring everything up to the top #11622

Uh oh!

Conversation

mrcthms commented Feb 19, 2024 • 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?

How to 🎩

🎩 checklist

Uh oh!

mrcthms commented Feb 21, 2024

Uh oh!

github-actions bot commented Feb 21, 2024

Uh oh!

mrcthms commented Feb 21, 2024

Uh oh!

github-actions bot commented Feb 21, 2024

Uh oh!

mrcthms commented Feb 21, 2024

Uh oh!

github-actions bot commented Feb 21, 2024

Uh oh!

mrcthms commented Feb 21, 2024

Uh oh!

github-actions bot commented Feb 21, 2024

Uh oh!

mrcthms commented Feb 21, 2024

Uh oh!

github-actions bot commented Feb 21, 2024

Uh oh!

mrcthms commented Feb 22, 2024

Uh oh!

github-actions bot commented Feb 22, 2024

Uh oh!

ouellettejordan left a comment • edited by mrcthms Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

boyutf commented Feb 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrcthms commented Feb 22, 2024

Uh oh!

mrcthms commented Feb 22, 2024

Uh oh!

github-actions bot commented Feb 22, 2024

Uh oh!

mrcthms commented Feb 22, 2024

Uh oh!

mrcthms commented Feb 22, 2024

Uh oh!

github-actions bot commented Feb 22, 2024

Uh oh!

laurkim left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ouellettejordan left a comment

Choose a reason for hiding this comment

Uh oh!

ecom-integrations commented Feb 27, 2024

Uh oh!

Reviewers

Assignees

mrcthms commented Feb 19, 2024 •

edited

Loading

ouellettejordan left a comment •

edited by mrcthms

Loading

boyutf commented Feb 22, 2024 •

edited

Loading