wip

metabase · May 1, 2024 · e2ba268 · e2ba268
1 parent 8975435
commit e2ba268
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/frontend/src/metabase/browse/components/CollectionBreadcrumbsWithTooltip.styled.tsx b/frontend/src/metabase/browse/components/CollectionBreadcrumbsWithTooltip.styled.tsx
@@ -8,11 +8,11 @@ import { color } from "metabase/lib/colors";
 
 import type { RefProp } from "./types";
 
-export const Breadcrumb = styled(Link)<
- LinkProps &
+ type BreadcrumbProps = LinkProps &
  AnchorHTMLAttributes<HTMLAnchorElement> &
  RefProp<HTMLAnchorElement>
->`
+
+export const StyledBreadcrumb = styled(Link)<BreadcrumbProps>`
  color: ${color("text-dark")};
  line-height: 1;
  overflow: hidden;
@@ -25,6 +25,10 @@ export const Breadcrumb = styled(Link)<
  text-decoration: none;
  }
 `;
+export const Breadcrumb = React.forwardRef<HTMLAnchorElement, BreadcrumbProps>(
+ (props, ref) => <StyledBreadcrumb ref={ref} {...props} />
+);
+Breadcrumb.displayName = 'Breadcrumb';
 
 export const CollectionBreadcrumbsWrapper = styled(ResponsiveChild)`
  line-height: 1;

diff --git a/frontend/src/metabase/core/components/Link/Link.tsx b/frontend/src/metabase/core/components/Link/Link.tsx
@@ -2,19 +2,25 @@ import Tooltip from "metabase/core/components/Tooltip";
 
 import { LinkRoot } from "./Link.styled";
 import type { LinkProps } from "./types";
+import {forwardRef} from "react";
 
-const Link = ({
+// TODO: Fix this !@@#$ing ref type
+const Link = forwardRef<
+ HTMLAnchorElement,
+ LinkProps
+>(({
  to,
  children,
  disabled,
  tooltip,
  variant,
  ...props
-}: LinkProps): JSX.Element => {
+}, ref): JSX.Element => {
  const link = (
  <LinkRoot
  {...props}
  to={to}
+ ref={ref}
  disabled={disabled}
  tabIndex={disabled ? -1 : undefined}
  aria-disabled={disabled}