Remove non-functional animations from FilterNavigatorBar.

Author: mstange

src/components/shared/FilterNavigatorBar.css

@@ -20,7 +20,9 @@
   cursor: default;
   user-select: none;
 
-  /* Note: no overflow: hidden so that we can see the exit animation for ranges */
+  /* Note: no overflow: hidden for historical reasons - we wanted to see
+     an animation for items at the end while they were fading out, but
+     we have removed this animation in the meantime */
 }
 
 .filterNavigatorBarItem {
@@ -40,9 +42,6 @@
      in the forced colors media query. */
   forced-color-adjust: none;
   line-height: 24px;
-  transition:
-    opacity 250ms var(--animation-curve),
-    transform 250ms var(--animation-curve);
 }
 
 .filterNavigatorBarRootItem {
@@ -98,23 +97,12 @@
 }
 
 .filterNavigatorBarItem:not(.filterNavigatorBarLeafItem)::after {
-  animation: fadeIn 250ms var(--animation-curve);
   background-image: var(--internal-separator-img);
   background-position: -18px -12px;
   background-repeat: no-repeat;
   background-size: 24px 24px;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
 .filterNavigatorBarItem:not(
     .filterNavigatorBarRootItem,
     .filterNavigatorBarLeafItem
@@ -163,46 +151,6 @@
   opacity: 0.65;
 }
 
-/* Animation */
-
-.filterNavigatorBarUncommittedTransition-exit {
-  /* Because of the underlying transition library, this element is still here
-   * while the new "committed" element is created, which pushes it further
-   * right. By using display: none here, we prevent this bad effect. */
-  display: none;
-}
-
-.filterNavigatorBarTransition-enter {
-  color: inherit;
-
-  /* We use the same value as the uncommitted item.
-   * Note that the "uncommitted item" won't have this "enter" class when
-   * committing, because of how we insert it (it's not part of the same loop). */
-  opacity: 0.65;
-}
-
-.filterNavigatorBarTransition-enter.filterNavigatorBarTransition-enter-active {
-  color: var(--internal-selected-color);
-  opacity: 1;
-}
-
-.filterNavigatorBarTransition-exit {
-  opacity: 1;
-}
-
-.filterNavigatorBarTransition-exit.filterNavigatorBarTransition-exit-active {
-  opacity: 0;
-  transform: translateX(50%);
-}
-
-/* Do not animate the filter navigator bar items when user prefers reduced motion */
-@media (prefers-reduced-motion) {
-  .filterNavigatorBarItem {
-    animation: none;
-    transition: none;
-  }
-}
-
 @media (forced-colors: active) {
   .filterNavigatorBar {
     --internal-background-color: ButtonFace;

src/components/shared/FilterNavigatorBar.tsx

@@ -4,7 +4,6 @@
 
 import * as React from 'react';
 import classNames from 'classnames';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import './FilterNavigatorBar.css';
 
 type FilterNavigatorBarListItemProps = {
@@ -71,31 +70,21 @@ export class FilterNavigatorBar extends React.PureComponent<Props> {
     const { className, items, selectedItem, uncommittedItem, onPop } =
       this.props;
 
-    const transitions = items.map((item, i) => (
-      <CSSTransition
-        key={i}
-        classNames="filterNavigatorBarTransition"
-        timeout={250}
-      >
-        <FilterNavigatorBarListItem
-          index={i}
-          onClick={i === items.length - 1 && !uncommittedItem ? null : onPop}
-          isFirstItem={i === 0}
-          isLastItem={i === items.length - 1}
-          isSelectedItem={i === selectedItem}
-        >
-          {item}
-        </FilterNavigatorBarListItem>
-      </CSSTransition>
-    ));
-
-    if (uncommittedItem) {
-      transitions.push(
-        <CSSTransition
-          key={items.length}
-          classNames="filterNavigatorBarUncommittedTransition"
-          timeout={0}
-        >
+    return (
+      <ol className={classNames('filterNavigatorBar', className)}>
+        {items.map((item, i) => (
+          <FilterNavigatorBarListItem
+            key={i}
+            index={i}
+            onClick={i === items.length - 1 && !uncommittedItem ? null : onPop}
+            isFirstItem={i === 0}
+            isLastItem={i === items.length - 1}
+            isSelectedItem={i === selectedItem}
+          >
+            {item}
+          </FilterNavigatorBarListItem>
+        ))}
+        {uncommittedItem ? (
           <FilterNavigatorBarListItem
             index={items.length}
             isFirstItem={false}
@@ -106,17 +95,8 @@ export class FilterNavigatorBar extends React.PureComponent<Props> {
           >
             {uncommittedItem}
           </FilterNavigatorBarListItem>
-        </CSSTransition>
-      );
-    }
-
-    return (
-      <TransitionGroup
-        component="ol"
-        className={classNames('filterNavigatorBar', className)}
-      >
-        {transitions}
-      </TransitionGroup>
+        ) : null}
+      </ol>
     );
   }
 }

src/test/components/__snapshots__/FilterNavigatorBar.test.tsx.snap

@@ -40,7 +40,7 @@ exports[`app/ProfileFilterNavigator renders ProfileFilterNavigator properly 2`]
     </button>
   </li>
   <li
-    class="filterNavigatorBarItem filterNavigatorBarSelectedItem filterNavigatorBarLeafItem filterNavigatorBarTransition-enter filterNavigatorBarTransition-enter-active"
+    class="filterNavigatorBarItem filterNavigatorBarSelectedItem filterNavigatorBarLeafItem"
   >
     <span
       class="filterNavigatorBarItemContent"
@@ -70,7 +70,7 @@ exports[`app/ProfileFilterNavigator renders ProfileFilterNavigator properly 3`]
     </button>
   </li>
   <li
-    class="filterNavigatorBarItem filterNavigatorBarSelectedItem filterNavigatorBarLeafItem filterNavigatorBarTransition-enter filterNavigatorBarTransition-enter-active"
+    class="filterNavigatorBarItem filterNavigatorBarSelectedItem filterNavigatorBarLeafItem"
   >
     <button
       class="filterNavigatorBarItemContent"
@@ -80,7 +80,7 @@ exports[`app/ProfileFilterNavigator renders ProfileFilterNavigator properly 3`]
     </button>
   </li>
   <li
-    class="filterNavigatorBarItem filterNavigatorBarUncommittedItem filterNavigatorBarLeafItem filterNavigatorBarUncommittedTransition-enter filterNavigatorBarUncommittedTransition-enter-active"
+    class="filterNavigatorBarItem filterNavigatorBarUncommittedItem filterNavigatorBarLeafItem"
     title="100μs"
   >
     <span