fix(components): reset size of Breadcrumb slash icon (#1558)

launchdarkly · Feb 26, 2025 · ee7c84f · ee7c84f
1 parent be517bb
commit ee7c84f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/.changeset/upset-worlds-obey.md b/.changeset/upset-worlds-obey.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Reset size of `Breadcrumb` slash icon
diff --git a/packages/components/src/Breadcrumbs.tsx b/packages/components/src/Breadcrumbs.tsx
@@ -2,26 +2,22 @@ import type { Ref } from 'react';
 import type {
 	BreadcrumbProps as AriaBreadcrumbProps,
 	BreadcrumbsProps as AriaBreadcrumbsProps,
-	ContextValue,
 } from 'react-aria-components';
-import type { LinkProps } from './Link';
 
 import { cva } from 'class-variance-authority';
-import { createContext } from 'react';
 import {
 	Breadcrumb as AriaBreadcrumb,
 	Breadcrumbs as AriaBreadcrumbs,
 	Provider,
 	composeRenderProps,
 } from 'react-aria-components';
 
+import { LinkContext } from './Link';
 import styles from './styles/Breadcrumbs.module.css';
 
 const crumbs = cva(styles.crumbs);
 const crumb = cva(styles.crumb);
 
-const LinkContext = createContext<ContextValue<LinkProps, HTMLAnchorElement>>(null);
-
 interface BreadcrumbsProps<T extends object> extends AriaBreadcrumbsProps<T> {
 	ref?: Ref<HTMLOListElement>;
 }
@@ -60,5 +56,5 @@ const Breadcrumb = ({ ref, ...props }: BreadcrumbProps) => {
 	);
 };
 
-export { Breadcrumbs, Breadcrumb, LinkContext };
+export { Breadcrumbs, Breadcrumb };
 export type { BreadcrumbsProps, BreadcrumbProps };
diff --git a/packages/components/src/Link.tsx b/packages/components/src/Link.tsx
@@ -5,9 +5,9 @@ import type { LinkProps as AriaLinkProps } from 'react-aria-components';
 
 import { Icon } from '@launchpad-ui/icons';
 import { cva } from 'class-variance-authority';
-import { Link as AriaLink, composeRenderProps, useSlottedContext } from 'react-aria-components';
+import { createContext, useContext } from 'react';
+import { Link as AriaLink, composeRenderProps } from 'react-aria-components';
 
-import { LinkContext } from './Breadcrumbs';
 import styles from './styles/Link.module.css';
 
 const link = cva(styles.base, {
@@ -22,6 +22,8 @@ const link = cva(styles.base, {
 	},
 });
 
+const LinkContext = createContext<LinkProps | null>(null);
+
 interface LinkProps extends AriaLinkProps, VariantProps<typeof link>, DOMProps {
 	ref?: Ref<HTMLAnchorElement>;
 }
@@ -32,7 +34,7 @@ interface LinkProps extends AriaLinkProps, VariantProps<typeof link>, DOMProps {
  * https://react-spectrum.adobe.com/react-aria/Link.html
  */
 const Link = ({ variant = 'default', href, ref, ...props }: LinkProps) => {
-	const linkProps = useSlottedContext(LinkContext);
+	const linkProps = useContext(LinkContext);
 
 	return (
 		<>
@@ -45,10 +47,10 @@ const Link = ({ variant = 'default', href, ref, ...props }: LinkProps) => {
 				)}
 				href={href}
 			/>
-			{href && linkProps && <Icon name="slash" className={styles.separator} />}
+			{href && linkProps && <Icon name="slash" className={styles.separator} size={null} />}
 		</>
 	);
 };
 
-export { Link };
+export { Link, LinkContext };
 export type { LinkProps };