diff --git a/frontend/src/metabase/components/Badge/Badge.styled.tsx b/frontend/src/metabase/components/Badge/Badge.styled.tsx index 4c4963e4fa7a131a70566550c7cfe2ff416eaa1b..183aacd06df14abb5ca48a662056403fda5d030e 100644 --- a/frontend/src/metabase/components/Badge/Badge.styled.tsx +++ b/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)}; `; diff --git a/frontend/src/metabase/components/MetadataInfo/InfoIcon/InfoIcon.styled.tsx b/frontend/src/metabase/components/MetadataInfo/InfoIcon/InfoIcon.styled.tsx index 3c5dbaedcc284e17b686a4df463a972612ef7b78..29ebe7f054f19c00b1dd3da6bfbc0d5eecf38d52 100644 --- a/frontend/src/metabase/components/MetadataInfo/InfoIcon/InfoIcon.styled.tsx +++ b/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; diff --git a/frontend/src/metabase/components/tree/TreeNode.styled.tsx b/frontend/src/metabase/components/tree/TreeNode.styled.tsx index fa81ce1a1a621371435e5a5bfdb499211fc13de4..d33e4f5c296d1f5c0cac60e34f63a191b323b39e 100644 --- a/frontend/src/metabase/components/tree/TreeNode.styled.tsx +++ b/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 => diff --git a/frontend/src/metabase/nav/components/AppBar/AppBarToggle.styled.tsx b/frontend/src/metabase/nav/components/AppBar/AppBarToggle.styled.tsx index 373cbf2b7486977f460ceda3393bf447e4484180..eada4f817599418df1a1d126a0ff5ccfa220682a 100644 --- a/frontend/src/metabase/nav/components/AppBar/AppBarToggle.styled.tsx +++ b/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; diff --git a/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx b/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx index 0cfcc42701c171ef2db78de12b57b51ea92179fa..4c59ae66e044805501fb23c3e1227afaa842c4d8 100644 --- a/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx +++ b/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; }>` diff --git a/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx index 07a94bf9939d560a3bcc895ed4726dbc1c481fc6..7ed45f0c2fefa8fb78a0525d987da56ed70f9fc4 100644 --- a/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx +++ b/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}