Cleanup icons and checkboxes in collections (#23413)

frontend/src/metabase/collections/components/BaseTableItem.jsx

@@ -81,7 +81,7 @@ export function BaseTableItem({
 
     const icon = { name: item.getIcon().name };
     if (item.model === "card") {
-      icon.color = color("bg-dark");
+      icon.color = color("text-light");
     }
 
     // Table row can be wrapped with ItemDragSource,

frontend/src/metabase/components/ArchivedItem.jsx

@@ -6,11 +6,11 @@ import { t } from "ttag";
 
 import CheckBox from "metabase/core/components/CheckBox";
 import Icon from "metabase/components/Icon";
-import Swapper from "metabase/components/Swapper";
+import Swapper from "metabase/core/components/Swapper";
 import Tooltip from "metabase/components/Tooltip";
 
 import { color as c } from "metabase/lib/colors";
-import { IconContainer } from "./ArchiveItem.styled";
+import { ItemIcon, ItemIconContainer } from "./ArchivedItem.styled";
 
 const ArchivedItem = ({
   name,
@@ -25,15 +25,19 @@ const ArchivedItem = ({
   showSelect,
 }) => (
   <div className="flex align-center p2 hover-parent hover--visibility border-bottom bg-light-hover">
-    <IconContainer>
-      <Swapper
-        startSwapped={showSelect}
-        defaultElement={<Icon name={icon} color={color} />}
-        swappedElement={
+    <Swapper
+      defaultElement={
+        <ItemIconContainer>
+          <ItemIcon name={icon} color={color} />
+        </ItemIconContainer>
+      }
+      swappedElement={
+        <ItemIconContainer>
           <CheckBox checked={selected} onChange={onToggleSelected} />
-        }
-      />
-    </IconContainer>
+        </ItemIconContainer>
+      }
+      isSwapped={showSelect}
+    />
     {name}
     {isAdmin && (onUnarchive || onDelete) && (
       <span className="ml-auto mr2">

frontend/src/metabase/components/ArchiveItem.styled.tsx → frontend/src/metabase/components/ArchivedItem.styled.tsx

 import styled from "@emotion/styled";
 import IconWrapper from "metabase/components/IconWrapper";
+import Icon from "metabase/components/Icon";
 
-export const IconContainer = styled(IconWrapper)`
+export const ItemIcon = styled(Icon)`
+  display: block;
+`;
+
+export const ItemIconContainer = styled(IconWrapper)`
   padding: 0.5rem;
   margin-right: 0.5rem;
+  line-height: 1;
 `;

frontend/src/metabase/components/EntityItem.jsx

@@ -4,7 +4,7 @@ import { t } from "ttag";
 import cx from "classnames";
 
 import EntityMenu from "metabase/components/EntityMenu";
-import Swapper from "metabase/components/Swapper";
+import Swapper from "metabase/core/components/Swapper";
 import CheckBox from "metabase/core/components/CheckBox";
 import Ellipsified from "metabase/core/components/Ellipsified";
 import Icon from "metabase/components/Icon";
@@ -30,7 +30,7 @@ function EntityIconCheckBox({
   onToggleSelected,
   ...props
 }) {
-  const iconSize = variant === "small" ? 12 : 18;
+  const iconSize = variant === "small" ? 12 : 16;
   const handleClick = e => {
     e.preventDefault();
     onToggleSelected();
@@ -47,7 +47,6 @@ function EntityIconCheckBox({
     >
       {selectable ? (
         <Swapper
-          startSwapped={selected || showCheckbox}
           defaultElement={
             <Icon
               name={icon.name}
@@ -56,6 +55,7 @@ function EntityIconCheckBox({
             />
           }
           swappedElement={<CheckBox checked={selected} size={iconSize} />}
+          isSwapped={selected || showCheckbox}
         />
       ) : (
         <Icon

frontend/src/metabase/components/Swapper.jsx

-/* eslint-disable react/prop-types */
-import React from "react";
-import { Motion, spring } from "react-motion";
-
-import { isReducedMotionPreferred } from "metabase/lib/dom";
-
-class Swapper extends React.Component {
-  state = {
-    hovered: false,
-  };
-
-  _onMouseEnter() {
-    this.setState({ hovered: true });
-  }
-
-  _onMouseLeave() {
-    this.setState({ hovered: false });
-  }
-
-  render() {
-    const { defaultElement, swappedElement, startSwapped } = this.props;
-    const { hovered } = this.state;
-
-    const preferReducedMotion = isReducedMotionPreferred();
-    const springOpts = preferReducedMotion
-      ? { stiffness: 500 }
-      : { stiffness: 170 };
-
-    return (
-      <span
-        onMouseEnter={() => this._onMouseEnter()}
-        onMouseLeave={() => this._onMouseLeave()}
-        className="block relative"
-        style={{ lineHeight: 1 }}
-      >
-        <Motion
-          defaultStyle={{
-            scale: 1,
-          }}
-          style={{
-            scale:
-              hovered || startSwapped
-                ? spring(0, springOpts)
-                : spring(1, springOpts),
-          }}
-        >
-          {({ scale }) => {
-            const snapScale = scale < 0.5 ? 0 : 1;
-            const _scale = preferReducedMotion ? snapScale : scale;
-            return (
-              <span
-                style={{
-                  display: "block",
-                  transform: `scale(${_scale})`,
-                }}
-              >
-                {defaultElement}
-              </span>
-            );
-          }}
-        </Motion>
-        <Motion
-          defaultStyle={{
-            scale: 0,
-          }}
-          style={{
-            scale:
-              hovered || startSwapped
-                ? spring(1, springOpts)
-                : spring(0, springOpts),
-          }}
-        >
-          {({ scale }) => {
-            const snapScale = scale < 0.5 ? 0 : 1;
-            const _scale = preferReducedMotion ? snapScale : scale;
-            return (
-              <span
-                className="absolute top left bottom right"
-                style={{ display: "block", transform: `scale(${_scale})` }}
-              >
-                {swappedElement}
-              </span>
-            );
-          }}
-        </Motion>
-      </span>
-    );
-  }
-}
-
-export default Swapper;

frontend/src/metabase/core/components/Swapper/Swapper.styled.tsx

+import styled from "@emotion/styled";
+
+export interface SwapperElementProps {
+  isVisible: boolean;
+}
+
+export const SwapperRoot = styled.div`
+  position: relative;
+`;
+
+export const SwapperDefaultElement = styled.div<SwapperElementProps>`
+  transform: scale(${props => (props.isVisible ? 1 : 0)});
+`;
+
+export const SwapperLayeredElement = styled.div<SwapperElementProps>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(${props => (props.isVisible ? 1 : 0)});
+`;

frontend/src/metabase/core/components/Swapper/Swapper.tsx

+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+  useCallback,
+  useState,
+} from "react";
+import {
+  SwapperDefaultElement,
+  SwapperLayeredElement,
+  SwapperRoot,
+} from "./Swapper.styled";
+
+export interface SwapperProps extends HTMLAttributes<HTMLDivElement> {
+  defaultElement?: ReactNode;
+  swappedElement?: ReactNode;
+  isSwapped?: boolean;
+}
+
+const Swapper = forwardRef(function Swapper(
+  { defaultElement, swappedElement, isSwapped = false, ...props }: SwapperProps,
+  ref: Ref<HTMLDivElement>,
+) {
+  const [isHovered, setIsHovered] = useState(false);
+  const isSelected = isHovered || isSwapped;
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+
+  return (
+    <SwapperRoot
+      {...props}
+      ref={ref}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <SwapperDefaultElement isVisible={!isSelected}>
+        {defaultElement}
+      </SwapperDefaultElement>
+      <SwapperLayeredElement isVisible={isSelected}>
+        {swappedElement}
+      </SwapperLayeredElement>
+    </SwapperRoot>
+  );
+});
+
+export default Swapper;

frontend/src/metabase/core/components/Swapper/index.ts

+export { default } from "./Swapper";