[BulkActions] Bring everything up to the top

.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');
+  }
+}