Merge pull request #25 from glints-dev/feat/bulk-action-pos-align

Bulk actions position and alignment

Author: ninariccimarie

.changeset/tiny-coins-relax.md

@@ -0,0 +1,5 @@
+---
+'polaris-glints': minor
+---
+
+bulk action position and alignment styles

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

@@ -9,7 +9,7 @@ import {useComponentDidMount} from '../../../../utilities/use-component-did-moun
 import styles from '../../BulkActions.scss';
 
 export type BulkActionButtonProps = {
-  disclosure?: boolean;
+  disclosure?: boolean | 'up';
   indicator?: boolean;
   handleMeasurement?(width: number): void;
   showContentInButton?: boolean;
@@ -49,7 +49,11 @@ export function BulkActionButton({
         accessibilityLabel={
           disclosure && !showContentInButton ? content : accessibilityLabel
         }
-        disclosure={disclosure && showContentInButton}
+        disclosure={
+          typeof disclosure === 'string'
+            ? disclosure
+            : disclosure && showContentInButton
+        }
         onClick={onAction}
         disabled={disabled}
         size="slim"

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

@@ -23,7 +23,7 @@ export function BulkActionMenu({
         active={isVisible}
         activator={
           <BulkActionButton
-            disclosure
+            disclosure="up"
             showContentInButton
             onAction={toggleMenuVisibility}
             content={title}
@@ -33,6 +33,8 @@ export function BulkActionMenu({
         }
         onClose={toggleMenuVisibility}
         preferInputActivator
+        preferredPosition="above"
+        preferredAlignment="left"
       >
         <ActionList items={actions} onActionAnyItem={toggleMenuVisibility} />
       </Popover>