[BulkActions] Bring everything up to the top (#11622)

### 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

Author: mrcthms

.changeset/rare-kings-repeat.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated the BulkActions component to include logic to handling selecting and deselecting rows

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

@@ -5,43 +5,56 @@ $bulk-actions-button-stacking-order: (
   focused: 20,
 );
 
-.Group {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include text-style-input;
+.BulkActionsOuterLayout {
+  position: relative;
+  flex: 1;
+  width: 100%;
+}
+
+.BulkActionsSelectAllWrapper {
+  min-height: 24px;
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  opacity: 0;
-  width: 100%;
-  justify-content: flex-start;
-  transition: var(--p-motion-duration-100) var(--p-motion-ease);
-  transition-property: opacity;
-  will-change: opacity;
+  gap: var(--p-space-200);
+}
 
-  &.Group-not-sticky {
-    opacity: 1;
-  }
+.BulkActionsPromotedActionsWrapper {
+  flex: 1;
+}
 
-  &.Group-entering,
-  &.Group-exiting {
-    opacity: 0;
-    display: flex;
-  }
+.BulkActionsLayout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1 1 auto;
+  gap: var(--p-space-100);
 
-  &.Group-entered {
-    opacity: 1;
-    display: flex;
+  > * {
+    flex: 0 0 auto;
   }
+}
 
-  &.Group-exited {
-    opacity: 0;
-    display: none;
-  }
+.BulkActionsLayout--measuring {
+  visibility: hidden;
+  height: 0;
+}
 
-  &.Group-measuring {
-    transition: none;
-    display: flex;
-    opacity: 0;
+.BulkActionsMeasurerLayout {
+  position: absolute;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1 1 auto;
+  gap: 0;
+  padding: 0;
+  visibility: hidden;
+  height: 0;
+  width: 100%;
+
+  > * {
+    flex: 0 0 auto;
   }
 }
 
@@ -83,3 +96,37 @@ $bulk-actions-button-stacking-order: (
   cursor: default;
   pointer-events: none;
 }
+
+.PaginatedSelectAll {
+  font-size: var(--p-text-body-sm-font-size);
+  font-weight: var(--p-font-weight-medium);
+  line-height: var(--p-text-body-sm-font-line-height);
+}
+
+.AllAction {
+  font-size: var(--p-text-body-sm-font-size);
+  font-weight: var(--p-font-weight-medium);
+  line-height: var(--p-text-body-sm-font-line-height);
+  border: 0;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--p-color-text-emphasis);
+  outline: none;
+  // stylelint-disable-next-line -- needed for focus ring
+  @include focus-ring;
+
+  &:hover,
+  &:focus {
+    color: var(--p-color-text-emphasis-hover);
+  }
+
+  &:active {
+    color: var(--p-color-text-emphasis-active);
+  }
+
+  &:focus-visible:not(:active) {
+    // stylelint-disable-next-line -- needed for focus ring
+    @include focus-ring($style: 'focused');
+  }
+}