fix(:bug)

Icons with selectors that contain `type` as a substring weren't getting cloned. Moving a word boundary search
atomicpages · Sep 29, 2020 · 9326927 · 9326927
1 parent b928a38
commit 9326927
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/hooks/__tests__/useIcon.test.tsx b/src/hooks/__tests__/useIcon.test.tsx
@@ -65,4 +65,20 @@ describe('useIcon hook tests', () => {
 
         expect(result.current.icon).toEqual(instance);
     });
+
+    it('should work when icon contain the type as a substring', () => {
+        const { result } = renderHook(() =>
+            useIcon(
+                React.createElement('i', { className: 'myicon myicon-star' }) as React.ReactElement<
+                    any,
+                    any
+                >
+            )
+        );
+
+        expect(result.current).toMatchObject({ iconType: 'icon' });
+
+        // @ts-ignore
+        expect(result.current.icon.props.className).toContain('icon');
+    });
 });
diff --git a/src/hooks/useIcon.ts b/src/hooks/useIcon.ts
@@ -14,10 +14,14 @@ export const useIcon = (icon: PCRCheckboxRadioProps['icon']) => {
                 type = 'svg';
             }
 
+            // icons that contain `type` substring
+            // won't fail with a word boundary search
+            const re = new RegExp(`\\b${type}\\b`);
+
             return {
                 iconType: icon.props['data-type'] || type,
                 icon:
-                    icon.props.className && !icon.props.className.includes(type)
+                    icon.props.className && !re.test(icon.props.className)
                         ? React.cloneElement(icon, {
                               ...icon.props,
                               className: classNames(icon.props.className, type),