Fix passing invalid props to Icon and Link (#32527)

frontend/src/metabase/components/Badge/Badge.jsx

@@ -42,7 +42,7 @@ function Badge({
       isSingleLine={isSingleLine}
       {...props}
     >
-      {icon && <BadgeIcon {...getIconProps(icon)} $hasMargin={!!children} />}
+      {icon && <BadgeIcon {...getIconProps(icon)} hasMargin={!!children} />}
       {children && (
         <BadgeText className="text-wrap" isSingleLine={isSingleLine}>
           {children}

frontend/src/metabase/components/Badge/Badge.styled.tsx

@@ -4,7 +4,6 @@ import { HTMLAttributes } from "react";
 import { color } from "metabase/lib/colors";
 import { Icon } from "metabase/core/components/Icon";
 import Link, { LinkProps } from "metabase/core/components/Link";
-import { shouldForwardNonTransientProp } from "metabase/lib/styling/emotion";
 
 interface RawMaybeLinkProps {
   to?: string;
@@ -41,10 +40,8 @@ export const MaybeLink = styled(RawMaybeLink)`
   }
 `;
 
-export const BadgeIcon = styled(Icon, {
-  shouldForwardProp: shouldForwardNonTransientProp,
-})<{ $hasMargin: boolean }>`
-  margin-right: ${props => (props.$hasMargin ? "5px" : 0)};
+export const BadgeIcon = styled(Icon)<{ hasMargin: boolean }>`
+  margin-right: ${props => (props.hasMargin ? "5px" : 0)};
 `;
 
 export const BadgeText = styled.span<{ isSingleLine: boolean }>`

frontend/src/metabase/components/tree/TreeNode.styled.tsx

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { color, lighten } from "metabase/lib/colors";
 import { Icon, IconProps } from "metabase/core/components/Icon";
-import { shouldForwardNonTransientProp } from "metabase/lib/styling/emotion";
 
 interface TreeNodeRootProps {
   isSelected: boolean;
@@ -38,9 +37,7 @@ interface ExpandToggleIconProps {
   isExpanded: boolean;
 }
 
-export const ExpandToggleIcon = styled(Icon, {
-  shouldForwardProp: shouldForwardNonTransientProp,
-})<ExpandToggleIconProps & IconProps>`
+export const ExpandToggleIcon = styled(Icon)<ExpandToggleIconProps & IconProps>`
   transition: transform 200ms;
 
   ${props =>

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

@@ -3,7 +3,6 @@ import { keyframes } from "@emotion/react";
 import { color } from "metabase/lib/colors";
 import { Icon } from "metabase/core/components/Icon";
 import Button from "metabase/core/components/Button";
-import { shouldForwardNonTransientProp } from "metabase/lib/styling/emotion";
 
 const expandKeyframes = keyframes`
   50% {
@@ -23,9 +22,7 @@ export interface BookmarkIconProps {
   onAnimationEnd: () => void;
 }
 
-export const BookmarkIcon = styled(Icon, {
-  shouldForwardProp: shouldForwardNonTransientProp,
-})<BookmarkIconProps>`
+export const BookmarkIcon = styled(Icon)<BookmarkIconProps>`
   color: ${props => (props.isBookmarked ? color("brand") : "")};
   animation-name: ${props =>
     props.isBookmarked ? expandKeyframes : shrinkKeyframes};

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

 import React, { SVGAttributes, forwardRef } from "react";
+import isPropValid from "@emotion/is-prop-valid";
 import cx from "classnames";
 import Tooltip from "../Tooltip";
 import { Icons } from "./icons";
@@ -15,10 +16,13 @@ export interface IconProps extends SVGAttributes<SVGSVGElement> {
 }
 
 export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
-  { name, className, size = defaultSize, tooltip, ...rest }: IconProps,
+  { name, className, size = defaultSize, tooltip, ...restProps }: IconProps,
   ref,
 ) {
   const IconComponent = (Icons[name] ?? Icons["unknown"]).component;
+  const validProps = Object.fromEntries(
+    Object.entries(restProps).filter(([key]) => isPropValid(key)),
+  );
 
   const icon = (
     <IconComponent
@@ -28,7 +32,7 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
       className={cx(`Icon Icon-${name}`, className)}
       width={size}
       height={size}
-      {...rest}
+      {...validProps}
     />
   );
 

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

 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
+import isPropValid from "@emotion/is-prop-valid";
 import { Link } from "react-router";
 import { color as metabaseColor } from "metabase/lib/colors";
-import { shouldForwardNonTransientProp } from "metabase/lib/styling/emotion";
 import { focusOutlineStyle } from "metabase/core/style/input";
-
 import type { LinkProps } from "./types";
 
 export const LinkRoot = styled(Link, {
-  shouldForwardProp: shouldForwardNonTransientProp,
+  shouldForwardProp: isPropValid,
 })<LinkProps>`
   opacity: ${props => (props.disabled ? "0.4" : "")};
   pointer-events: ${props => (props.disabled ? "none" : "")};

frontend/src/metabase/lib/styling/emotion.ts

-import isPropValid from "@emotion/is-prop-valid";
-
-export function shouldForwardNonTransientProp(propName: string): boolean {
-  return !propName.startsWith("$") && isPropValid(propName);
-}

frontend/src/metabase/nav/components/AppBar/AppBarToggle.styled.tsx

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { color } from "metabase/lib/colors";
 import { Icon } from "metabase/core/components/Icon";
-import { shouldForwardNonTransientProp } from "metabase/lib/styling/emotion";
 import { AppBarLeftContainer } from "./AppBarLarge.styled";
 
 interface SidebarButtonProps {
@@ -33,9 +32,7 @@ interface SidebarIconProps {
   isLogoVisible?: boolean;
 }
 
-export const SidebarIcon = styled(Icon, {
-  shouldForwardProp: shouldForwardNonTransientProp,
-})<SidebarIconProps>`
+export const SidebarIcon = styled(Icon)<SidebarIconProps>`
   color: ${color("brand")};
   display: block;
   transform: translateY(2px) translateX(2px);

frontend/src/metabase/nav/components/SearchBar.styled.tsx

@@ -11,7 +11,6 @@ import {
   breakpointMaxSmall,
   breakpointMinSmall,
 } from "metabase/styled-components/theme";
-import { shouldForwardNonTransientProp } from "metabase/lib/styling/emotion";
 
 const activeInputCSS = css`
   border-radius: 6px;
@@ -106,9 +105,7 @@ export const SearchInput = styled.input<{ isActive: boolean }>`
 
 const ICON_MARGIN = "10px";
 
-export const SearchIcon = styled(Icon, {
-  shouldForwardProp: shouldForwardNonTransientProp,
-})<{ isActive: boolean }>`
+export const SearchIcon = styled(Icon)<{ isActive: boolean }>`
   ${breakpointMaxSmall} {
     transition: margin 0.3s;
 

frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx

@@ -8,12 +8,9 @@ import Link from "metabase/core/components/Link";
 
 import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants";
 
-import { darken, color, alpha } from "metabase/lib/colors";
-import { shouldForwardNonTransientProp } from "metabase/lib/styling/emotion";
+import { alpha, color, darken } from "metabase/lib/colors";
 
-export const SidebarIcon = styled(Icon, {
-  shouldForwardProp: shouldForwardNonTransientProp,
-})<{
+export const SidebarIcon = styled(Icon)<{
   color?: string | null;
   isSelected: boolean;
 }>`
@@ -91,8 +88,8 @@ const itemContentStyle = css`
 
 export const FullWidthButton = styled.button<{ isSelected: boolean }>`
   cursor: pointer;
-  ${itemContentStyle}
 
+  ${itemContentStyle}
   ${TreeNode.NameContainer} {
     font-weight: 700;
     color: ${props => getTextColor(props.isSelected)};

package.json

@@ -13,6 +13,7 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
+    "@emotion/is-prop-valid": "^1.1.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@mantine/core": "^6.0.13",