chore: bulk actions animation update when pinned buttons appear

Shopify · Mar 28, 2024 · 2f3d184 · 2f3d184
1 parent b726dad
commit 2f3d184
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -10,13 +10,15 @@ import type {ButtonProps} from '../../../Button';
 export interface BulkActionsMenuProps extends MenuGroupDescriptor {
   isNewBadgeInBadgeActions: boolean;
   size?: Extract<ButtonProps['size'], 'micro' | 'medium'>;
+  animationDelayIndex?: number;
 }
 
 export function BulkActionMenu({
   title,
   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}