Make select all action menu activator a MenuGroup

Shopify · Oct 10, 2024 · 7dcda58 · 7dcda58
1 parent 9e03ad2
commit 7dcda58
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 26 deletions.
diff --git a/polaris-react/src/components/ActionMenu/index.ts b/polaris-react/src/components/ActionMenu/index.ts
@@ -1 +1,2 @@
 export * from './ActionMenu';
+export {SecondaryAction, MenuGroup} from './components';
diff --git a/polaris-react/src/components/BulkActions/BulkActions.tsx b/polaris-react/src/components/BulkActions/BulkActions.tsx
@@ -19,6 +19,7 @@ import {Button} from '../Button';
 import {ActionList} from '../ActionList';
 import {Popover} from '../Popover';
 import {InlineStack} from '../InlineStack';
+import {MenuGroup} from '../ActionMenu';
 import type {ButtonProps} from '../Button';
 
 import {
@@ -210,33 +211,22 @@ export const BulkActions = ({
 
   const selectAllActionsMarkup = selectMode ? (
     <div aria-live={ariaLive}>
-      <Popover
+      <MenuGroup
+        title={i18n.translate(
+          'Polaris.ResourceList.BulkActions.selectAllMenu.activator',
+          {selectedItemsCount},
+        )}
         active={selectedAllMenuActive}
+        actions={[
+          selectAllOnPageItem,
+          ...(selectAllInStoreItem
+            ? [selectAllInStoreItem, unselectAllItem]
+            : [unselectAllItem]),
+        ]}
+        onOpen={() => {}}
         onClose={toggleSelectAllMenu}
-        activator={
-          <Button
-            disclosure
-            pressed={selectedAllMenuActive}
-            variant="tertiary"
-            onClick={toggleSelectAllMenu}
-          >
-            {i18n.translate(
-              'Polaris.ResourceList.BulkActions.selectAllMenu.activator',
-              {selectedItemsCount},
-            )}
-          </Button>
-        }
-      >
-        <ActionList
-          items={[
-            selectAllOnPageItem,
-            ...(selectAllInStoreItem
-              ? [selectAllInStoreItem, unselectAllItem]
-              : [unselectAllItem]),
-          ]}
-          onActionAnyItem={toggleSelectAllMenu}
-        />
-      </Popover>
+        onClick={toggleSelectAllMenu}
+      />
     </div>
   ) : null;
 

diff --git a/polaris-react/src/components/Filters/Filters.module.css b/polaris-react/src/components/Filters/Filters.module.css
@@ -43,7 +43,7 @@
     z-index: var(--p-z-index-1);
     position: absolute;
     top: 0;
-    right: calc((-1 * var(--p-space-100)) - 1);
+    right: calc(-1 * var(--p-space-100));
     width: var(--p-width-200);
     height: 100%;
     pointer-events: none;