From 2f3d1840f82b766a7bf34325f8702220bcf0651d Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Thu, 28 Mar 2024 13:22:48 +0000
Subject: [PATCH] chore: bulk actions animation update when pinned buttons
 appear

---
 .../BulkActions/BulkActions.module.css        | 19 +++++++++++++++++++
 .../components/BulkActions/BulkActions.tsx    |  4 +++-
 .../BulkActionButton/BulkActionButton.tsx     | 16 +++++++++++++++-
 .../BulkActionMenu/BulkActionMenu.tsx         |  3 +++
 4 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/polaris-react/src/components/BulkActions/BulkActions.module.css b/polaris-react/src/components/BulkActions/BulkActions.module.css
index 43e82182769..5d2f37029b1 100644
--- a/polaris-react/src/components/BulkActions/BulkActions.module.css
+++ b/polaris-react/src/components/BulkActions/BulkActions.module.css
@@ -51,8 +51,27 @@
   }
 }
 
+/* stylelint-disable-next-line polaris/motion/at-rule-disallowed-list -- Required for custom animation */
+@keyframes appear {
+  from {
+    transform: scale(0.85) translateX(0%);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1) translateX(0);
+    opacity: 1;
+  }
+}
+
 .BulkActionButton {
   white-space: nowrap;
+  animation: appear var(--p-motion-duration-250) 1 var(--p-motion-ease-in-out)
+    both;
+  /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list, polaris/motion/declaration-property-unit-disallowed-list -- Required for custom animation */
+  animation-delay: var(--pc-bulk-action-button-animation-delay, 0ms);
+
+  transform-origin: center center;
 
   button {
     display: flex;
diff --git a/polaris-react/src/components/BulkActions/BulkActions.tsx b/polaris-react/src/components/BulkActions/BulkActions.tsx
index f47544a5c76..e6a1e45f6d1 100644
--- a/polaris-react/src/components/BulkActions/BulkActions.tsx
+++ b/polaris-react/src/components/BulkActions/BulkActions.tsx
@@ -239,7 +239,7 @@ export const BulkActions = forwardRef(function BulkActions(
 
           return true;
         })
-        .map((action, index) => {
+        .map((action, index, arr) => {
           if (instanceOfMenuGroupDescriptor(action)) {
             return (
               <BulkActionMenu
@@ -249,6 +249,7 @@ export const BulkActions = forwardRef(function BulkActions(
                   actionSections,
                 )}
                 size={buttonSize}
+                animationDelayIndex={arr.length - index}
               />
             );
           }
@@ -258,6 +259,7 @@ export const BulkActions = forwardRef(function BulkActions(
               disabled={disabled}
               {...action}
               size={buttonSize}
+              animationDelayIndex={arr.length - index}
             />
           );
         })
diff --git a/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx b/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
index 8f232d6303f..07eb9718f02 100644
--- a/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
+++ b/polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx
@@ -16,6 +16,7 @@ export type BulkActionButtonProps = {
   handleMeasurement?(width: number): void;
   showContentInButton?: boolean;
   size?: Extract<ButtonProps['size'], 'micro' | 'medium'>;
+  animationDelayIndex?: number;
 } & DisableableAction &
   DestructableAction;
 
@@ -32,6 +33,7 @@ export function BulkActionButton({
   indicator,
   showContentInButton,
   size,
+  animationDelayIndex,
 }: BulkActionButtonProps) {
   const bulkActionButton = useRef<HTMLDivElement>(null);
 
@@ -69,7 +71,19 @@ export function BulkActionButton({
   );
 
   return (
-    <div className={styles.BulkActionButton} ref={bulkActionButton}>
+    <div
+      className={styles.BulkActionButton}
+      ref={bulkActionButton}
+      style={
+        animationDelayIndex
+          ? ({
+              '--pc-bulk-action-button-animation-delay': `calc(var(--p-motion-duration-50) * ${
+                animationDelayIndex * 0.75
+              })`,
+            } as React.CSSProperties)
+          : undefined
+      }
+    >
       {isActivatorForMoreActionsPopover ? (
         <Tooltip content={content} preferredPosition="below">
           {buttonMarkup}
diff --git a/polaris-react/src/components/BulkActions/components/BulkActionMenu/BulkActionMenu.tsx b/polaris-react/src/components/BulkActions/components/BulkActionMenu/BulkActionMenu.tsx
index 8d00ae86f75..1c36d551672 100644
--- a/polaris-react/src/components/BulkActions/components/BulkActionMenu/BulkActionMenu.tsx
+++ b/polaris-react/src/components/BulkActions/components/BulkActionMenu/BulkActionMenu.tsx
@@ -10,6 +10,7 @@ import type {ButtonProps} from '../../../Button';
 export interface BulkActionsMenuProps extends MenuGroupDescriptor {
   isNewBadgeInBadgeActions: boolean;
   size?: Extract<ButtonProps['size'], 'micro' | 'medium'>;
+  animationDelayIndex?: number;
 }
 
 export function BulkActionMenu({
@@ -17,6 +18,7 @@ export function BulkActionMenu({
   actions,
   isNewBadgeInBadgeActions,
   size,
+  animationDelayIndex,
 }: BulkActionsMenuProps) {
   const {value: isVisible, toggle: toggleMenuVisibility} = useToggle(false);
 
@@ -32,6 +34,7 @@ export function BulkActionMenu({
             content={title}
             indicator={isNewBadgeInBadgeActions}
             size={size}
+            animationDelayIndex={animationDelayIndex}
           />
         }
         onClose={toggleMenuVisibility}