add entrance animations

Author: mrcthms

polaris-react/src/components/BulkActions/BulkActions.scss

@@ -7,24 +7,35 @@ $bulk-actions-button-stacking-order: (
 
 .Group {
   @include text-style-input;
-  display: none;
+  display: flex;
   align-items: center;
   flex-wrap: wrap;
   opacity: 0;
   width: 90vw;
   justify-content: center;
+  transition: var(--p-duration-250) var(--p-ease-in);
+  transform: translateY(120px);
 
-  @media #{$p-breakpoints-sm-up} {
+  &.Group-not-sticky {
+    transform: none;
+    opacity: 1;
+  }
+
+  &.Group-entering,
+  &.Group-exiting {
+    opacity: 0;
     display: flex;
+  }
 
-    &.Group-exiting {
-      transition: none;
-    }
+  &.Group-entered {
+    opacity: 1;
+    display: flex;
+    transform: translateY(0);
+  }
 
-    &.Group-exited {
-      opacity: 0;
-      display: none;
-    }
+  &.Group-exited {
+    opacity: 0;
+    display: none;
   }
 
   &.Group-measuring {
@@ -34,22 +45,6 @@ $bulk-actions-button-stacking-order: (
   }
 }
 
-.Group-entering,
-.Group-exiting {
-  opacity: 0;
-  display: flex;
-}
-
-.Group-entered {
-  opacity: 1;
-  display: flex;
-}
-
-.Group-exited {
-  opacity: 0;
-  display: none;
-}
-
 .ButtonGroupWrapper {
   width: 100%;
   max-width: 100%;

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

@@ -1,5 +1,5 @@
 import React, {PureComponent, createRef} from 'react';
-import {Transition} from 'react-transition-group';
+import {TransitionGroup, CSSTransition} from 'react-transition-group';
 
 import {debounce} from '../../utilities/debounce';
 import {classNames} from '../../utilities/css';
@@ -41,6 +41,8 @@ export interface BulkActionsProps {
   onSelectModeToggle?(selectMode: boolean): void;
   /** Callback when more actions button is toggled */
   onMoreActionPopoverToggle?(isOpen: boolean): void;
+  /** If the BulkActions is currently sticky in view */
+  isSticky?: boolean;
 }
 
 type CombinedProps = BulkActionsProps & {
@@ -188,7 +190,7 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
 
   // eslint-disable-next-line @typescript-eslint/member-ordering
   render() {
-    const {selectMode, disabled, promotedActions, i18n} = this.props;
+    const {selectMode, disabled, promotedActions, i18n, isSticky} = this.props;
 
     const actionSections = this.actionSections();
 
@@ -294,31 +296,34 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
     }
 
     const group = (
-      <Transition
-        timeout={0}
-        in={selectMode}
-        key="group"
-        nodeRef={this.groupNode}
-      >
-        {(status: TransitionStatus) => {
-          const groupClassName = classNames(
-            styles.Group,
-            !measuring && styles[`Group-${status}`],
-            measuring && styles['Group-measuring'],
-          );
-          return (
-            <div className={groupClassName} ref={this.groupNode}>
-              <EventListener event="resize" handler={this.handleResize} />
-              <div
-                className={styles.ButtonGroupWrapper}
-                ref={this.setButtonsNode}
-              >
-                {groupContent}
+      <TransitionGroup>
+        <CSSTransition
+          timeout={250}
+          in={selectMode}
+          key="group"
+          nodeRef={this.groupNode}
+        >
+          {(status: TransitionStatus) => {
+            const groupClassName = classNames(
+              styles.Group,
+              !isSticky && styles['Group-not-sticky'],
+              !measuring && isSticky && styles[`Group-${status}`],
+              measuring && styles['Group-measuring'],
+            );
+            return (
+              <div className={groupClassName} ref={this.groupNode}>
+                <EventListener event="resize" handler={this.handleResize} />
+                <div
+                  className={styles.ButtonGroupWrapper}
+                  ref={this.setButtonsNode}
+                >
+                  {groupContent}
+                </div>
               </div>
-            </div>
-          );
-        }}
-      </Transition>
+            );
+          }}
+        </CSSTransition>
+      </TransitionGroup>
     );
 
     return <div ref={this.setContainerNode}>{group}</div>;

polaris-react/src/components/IndexTable/IndexTable.tsx

@@ -562,6 +562,7 @@ function IndexTableBase({
         promotedActions={promotedActions}
         actions={actions}
         onSelectModeToggle={condensed ? handleSelectModeToggle : undefined}
+        isSticky={isBulkActionsSticky}
       />
     </div>
   ) : null;