PR feedback

Author: benoitgrelard

packages/react/slot/src/Slot.stories.tsx

@@ -57,22 +57,22 @@ export const ButtonAsLink = () => (
   <>
     <h1>Button with left/right icons</h1>
     <Button
-      iconLeft={<FakeIcon color="tomato" />}
-      iconRight={<FakeIcon color="royalblue" />}
+      iconLeft={<MockIcon color="tomato" />}
+      iconRight={<MockIcon color="royalblue" />}
       ref={console.log}
     >
-      Click <em>me</em>!
+      Button <em>text</em>
     </Button>
 
     <h1>Button with left/right icons as link (asChild)</h1>
     <Button
       asChild
-      iconLeft={<FakeIcon color="tomato" />}
-      iconRight={<FakeIcon color="royalblue" />}
+      iconLeft={<MockIcon color="tomato" />}
+      iconRight={<MockIcon color="royalblue" />}
       ref={console.log}
     >
       <a href="https://radix-ui.com">
-        Click <em>me</em>!
+        Button <em>text</em>
       </a>
     </Button>
   </>
@@ -211,18 +211,18 @@ export const Chromatic = () => (
     </ErrorBoundary>
 
     <h2>Button with left/right icons</h2>
-    <Button iconLeft={<FakeIcon color="tomato" />} iconRight={<FakeIcon color="royalblue" />}>
-      Click <em>me</em>!
+    <Button iconLeft={<MockIcon color="tomato" />} iconRight={<MockIcon color="royalblue" />}>
+      Button <em>text</em>
     </Button>
 
     <h2>Button with left/right icons as link (asChild)</h2>
     <Button
       asChild
-      iconLeft={<FakeIcon color="tomato" />}
-      iconRight={<FakeIcon color="royalblue" />}
+      iconLeft={<MockIcon color="tomato" />}
+      iconRight={<MockIcon color="royalblue" />}
     >
       <a href="https://radix-ui.com">
-        Click <em>me</em>!
+        Button <em>text</em>
       </a>
     </Button>
   </>
@@ -325,7 +325,7 @@ const Button = React.forwardRef<
   );
 });
 
-const FakeIcon = React.forwardRef<React.ElementRef<'span'>, React.ComponentProps<'span'>>(
+const MockIcon = React.forwardRef<React.ElementRef<'span'>, React.ComponentProps<'span'>>(
   ({ color = 'tomato', ...props }, forwardedRef) => (
     <span
       ref={forwardedRef}

packages/react/slot/src/Slot.test.tsx

@@ -112,11 +112,8 @@ describe('given a Button with Slottable', () => {
   describe('without asChild', () => {
     it('should render a button with icon on the left/right', async () => {
       const tree = render(
-        <Button
-          iconLeft={<span data-testid="left">left</span>}
-          iconRight={<span data-testid="right">right</span>}
-        >
-          Click <em>me</em>!
+        <Button iconLeft={<span>left</span>} iconRight={<span>right</span>}>
+          Button <em>text</em>
         </Button>
       );
 
@@ -127,13 +124,9 @@ describe('given a Button with Slottable', () => {
   describe('with asChild', () => {
     it('should render a link with icon on the left/right', async () => {
       const tree = render(
-        <Button
-          iconLeft={<span data-testid="left">left</span>}
-          iconRight={<span data-testid="right">right</span>}
-          asChild
-        >
+        <Button iconLeft={<span>left</span>} iconRight={<span>right</span>} asChild>
           <a href="https://radix-ui.com">
-            Click <em>me</em>!
+            Button <em>text</em>
           </a>
         </Button>
       );

packages/react/slot/src/Slot.tsx

@@ -15,13 +15,16 @@ const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
   const slottable = childrenArray.find(isSlottable);
 
   if (slottable) {
-    const newElement = slottable.props.children;
+    // the new element to render is the one passed as a child of `Slottable`
+    const newElement = slottable.props.children as React.ReactNode;
+
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        const slottableChildren = slottable.props.children as React.ReactNode;
-        if (React.Children.count(slottableChildren) > 1) return React.Children.only(null);
-        return React.isValidElement(slottableChildren)
-          ? (slottableChildren.props.children as React.ReactNode)
+        // because the new element will be the one rendered, we are only interested
+        // in grabbing its children (`newElement.props.children`)
+        if (React.Children.count(newElement) > 1) return React.Children.only(null);
+        return React.isValidElement(newElement)
+          ? (newElement.props.children as React.ReactNode)
           : null;
       } else {
         return child;

packages/react/slot/src/__snapshots__/Slot.test.tsx.snap

@@ -5,19 +5,14 @@ exports[`given a Button with Slottable with asChild should render a link with ic
   <a
     href="https://radix-ui.com"
   >
-    <span
-      data-testid="left"
-    >
+    <span>
       left
     </span>
-    Click 
+    Button 
     <em>
-      me
+      text
     </em>
-    !
-    <span
-      data-testid="right"
-    >
+    <span>
       right
     </span>
   </a>
@@ -27,19 +22,14 @@ exports[`given a Button with Slottable with asChild should render a link with ic
 exports[`given a Button with Slottable without asChild should render a button with icon on the left/right 1`] = `
 <div>
   <button>
-    <span
-      data-testid="left"
-    >
+    <span>
       left
     </span>
-    Click 
+    Button 
     <em>
-      me
+      text
     </em>
-    !
-    <span
-      data-testid="right"
-    >
+    <span>
       right
     </span>
   </button>