fix react warnings (#48564)

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

@@ -43,7 +43,9 @@ export const MaybeLink = styled(RawMaybeLink)`
   }
 `;
 
-export const BadgeIcon = styled(Icon)<{ hasMargin: boolean }>`
+export const BadgeIcon = styled(Icon, {
+  shouldForwardProp: propName => propName !== "hasMargin",
+})<{ hasMargin: boolean }>`
   margin-right: ${props => (props.hasMargin ? "5px" : 0)};
 `;
 

frontend/src/metabase/components/MetadataInfo/InfoIcon/InfoIcon.styled.tsx

@@ -2,7 +2,9 @@ import styled from "@emotion/styled";
 
 import { Icon } from "metabase/ui";
 
-export const PopoverHoverTarget = styled(Icon)<{ hasDescription: boolean }>`
+export const PopoverHoverTarget = styled(Icon, {
+  shouldForwardProp: propName => propName !== "hasDescription",
+})<{ hasDescription: boolean }>`
   flex-shrink: 0;
   display: none;
 

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

@@ -38,7 +38,9 @@ interface ExpandToggleIconProps {
   isExpanded: boolean;
 }
 
-export const ExpandToggleIcon = styled(Icon)<ExpandToggleIconProps & IconProps>`
+export const ExpandToggleIcon = styled(Icon, {
+  shouldForwardProp: propName => propName !== "isExpanded",
+})<ExpandToggleIconProps & IconProps>`
   transition: transform 200ms;
 
   ${props =>

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

@@ -22,7 +22,9 @@ interface SidebarIconProps {
   isLogoVisible?: boolean;
 }
 
-export const SidebarIcon = styled(Icon)<SidebarIconProps>`
+export const SidebarIcon = styled(Icon, {
+  shouldForwardProp: propName => propName !== "isLogoVisible",
+})<SidebarIconProps>`
   color: var(--mb-color-brand);
   display: block;
 

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

@@ -7,7 +7,9 @@ import { alpha, color, darken } from "metabase/lib/colors";
 import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants";
 import { Icon, Tooltip } from "metabase/ui";
 
-export const SidebarIcon = styled(Icon)<{
+export const SidebarIcon = styled(Icon, {
+  shouldForwardProp: propName => propName !== "isSelected",
+})<{
   color?: string | null;
   isSelected: boolean;
 }>`

frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx

@@ -78,18 +78,21 @@ export const NotebookContainer = ({
   const Handle = forwardRef<
     HTMLDivElement,
     Partial<ResizableBoxProps> & {
-      onResize?: any; //Mantine and react-resizeable have different opinions on what onResize should be
+      onResize?: any; //Mantine and react-resizable have different opinions on what onResize should be
+      handleAxis?: string; // undocumented prop https://github.com/react-grid-layout/react-resizable/issues/175
     }
   >(function Handle(props, ref) {
     const handleWidth = 10;
     const borderWidth = 1;
     const left = rem(-((handleWidth + borderWidth) / 2));
 
+    const { handleAxis, ...rest } = props;
+
     return (
       <Box
         data-testid="notebook-native-preview-resize-handle"
         ref={ref}
-        {...props}
+        {...rest}
         pos="absolute"
         top={0}
         bottom={0}