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 ( ); } @@ -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; + animationDelayIndex?: number; } & DisableableAction & DestructableAction; @@ -32,6 +33,7 @@ export function BulkActionButton({ indicator, showContentInButton, size, + animationDelayIndex, }: BulkActionButtonProps) { const bulkActionButton = useRef(null); @@ -69,7 +71,19 @@ export function BulkActionButton({ ); return ( -
+
{isActivatorForMoreActionsPopover ? ( {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; + 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}