Revert "[Slot] Deduplicate merged className prop (#2336)" (#3162)

radix-ui · Oct 1, 2024 · d28b30c · d28b30c
1 parent 6469d41
commit d28b30c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 56 deletions.
diff --git a/.yarn/versions/9bca397e.yml b/.yarn/versions/9bca397e.yml
@@ -0,0 +1,3 @@
+declined:
+  - primitives
+  - "@radix-ui/react-slot"
diff --git a/packages/react/slot/src/Slot.test.tsx b/packages/react/slot/src/Slot.test.tsx
@@ -106,43 +106,6 @@ describe('given a slotted Trigger', () => {
       expect(handleChildClick).toHaveBeenCalledTimes(1);
     });
   });
-
-  describe('with className on itself', () => {
-    beforeEach(() => {
-      render(
-        <Trigger as={Slot} className="btn">
-          <button type="button">Click me</button>
-        </Trigger>
-      );
-    });
-
-    it('should apply the className to the child', () => {
-      expect(screen.getByRole('button')).toHaveClass('btn');
-    });
-  });
-
-  describe('with className on itself AND the child', () => {
-    beforeEach(() => {
-      render(
-        <Trigger as={Slot} className="btn   btn-sm">
-          <button type="button" className=" btn btn-primary  ">
-            Click me
-          </button>
-        </Trigger>
-      );
-    });
-
-    it('should merge className and apply it to the child', () => {
-      expect(screen.getByRole('button')).toHaveClass('btn', 'btn-sm', 'btn-primary');
-    });
-
-    it('should deduplicate merged className', () => {
-      const classNames = screen.getByRole('button').className.split(' ');
-
-      expect(classNames).toHaveLength(3);
-      expect(classNames.filter((name) => name === 'btn')).toHaveLength(1);
-    });
-  });
 });
 
 describe('given a Button with Slottable', () => {

diff --git a/packages/react/slot/src/Slot.tsx b/packages/react/slot/src/Slot.tsx
@@ -115,25 +115,8 @@ function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
     // if it's `style`, we merge them
     else if (propName === 'style') {
       overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    }
-    // if it's `className`, we deduplicate and merge them
-    else if (propName === 'className') {
-      const classNameSet = new Set<string>();
-
-      if (slotPropValue && typeof slotPropValue === 'string') {
-        slotPropValue
-          .split(' ')
-          .filter(Boolean)
-          .forEach((name) => classNameSet.add(name));
-      }
-      if (childPropValue && typeof childPropValue === 'string') {
-        childPropValue
-          .split(' ')
-          .filter(Boolean)
-          .forEach((name) => classNameSet.add(name));
-      }
-
-      overrideProps[propName] = [...classNameSet].join(' ');
+    } else if (propName === 'className') {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');
     }
   }