@lumx/react 3.12.1-alpha.0 → 3.12.1-alpha.2

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.12.1-alpha.0",
-        "@lumx/icons": "^3.12.1-alpha.0",
+        "@lumx/core": "^3.12.1-alpha.2",
+        "@lumx/icons": "^3.12.1-alpha.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.12.1-alpha.0"
+    "version": "3.12.1-alpha.2"
 }

package/src/components/link/Link.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, Typography } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
 import { mdiCheck, mdiPlus } from '@lumx/icons';
 import { Link, LinkProps } from './Link';
@@ -62,9 +62,19 @@ describe(`<${Link.displayName}>`, () => {
         });
 
         it('should render with icons', () => {
-            const { rightIcon, leftIcon } = setup({ rightIcon: mdiPlus, leftIcon: mdiCheck });
-            expect(rightIcon).toBeInTheDocument();
-            expect(leftIcon).toBeInTheDocument();
+            const { link } = setup({
+                leftIcon: mdiCheck,
+                children: ['Link', <Icon key="icon" icon={mdiCheck} />, 'with icons'],
+                rightIcon: mdiPlus,
+            });
+            const icons = queryAllByClassName(link, Icon.className as string);
+            expect(icons).toHaveLength(3);
+
+            // Icons are all wrapped with spaces
+            for (const icon of icons) {
+                expect((icon.previousSibling as any).textContent).toEqual(' ');
+                expect((icon.nextSibling as any).textContent).toEqual(' ');
+            }
         });
     });
 

package/src/components/link/Link.tsx

@@ -101,7 +101,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
             {wrapChildrenIconWithSpaces(
                 <>
                     {leftIcon && <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} />}
-                    {children}
+                    {children && <span className={`${CLASSNAME}__content`}>{children}</span>}
                     {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
                 </>,
             )}

package/src/components/text/Text.test.tsx

@@ -4,7 +4,7 @@ import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { mdiEarth } from '@lumx/icons';
 import { Icon } from '@lumx/react';
 import { render } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { getByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
 import { Text, TextProps } from '.';
 
 const setup = (props: Partial<TextProps> = {}) => {
@@ -69,34 +69,14 @@ describe(`<${Text.displayName}>`, () => {
 
         it('should wrap icons with spaces', () => {
             const { element } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
-            // Spaces have been inserted around the icon.
-            expect(element).toMatchInlineSnapshot(`
-                <span
-                  class="lumx-text"
-                >
-                  Some text
-                   
-                  <i
-                    class="lumx-icon lumx-icon--no-shape lumx-icon--path"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      height="1em"
-                      preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align: -0.125em;"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                    >
-                      <path
-                        d="M17.9 17.39A2 2 0 0 0 16 16h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.98 7.98 0 0 1 2.9 12.8M11 19.93a8 8 0 0 1-6.79-9.72L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </i>
-                   
-                  with icon
-                </span>
-            `);
+            const icons = queryAllByClassName(element, Icon.className as string);
+            expect(icons).toHaveLength(1);
+
+            // Icons are all wrapped with spaces
+            for (const icon of icons) {
+                expect((icon.previousSibling as any).textContent).toEqual(' ');
+                expect((icon.nextSibling as any).textContent).toEqual(' ');
+            }
         });
 
         it('should render dangerouslySetInnerHTML', () => {

package/src/utils/react/wrapChildrenIconWithSpaces.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '@lumx/react';
 import { mdiEarth, mdiFoodApple, mdiPencil } from '@lumx/icons';
@@ -23,18 +23,15 @@ describe(wrapChildrenIconWithSpaces, () => {
                 </>,
             ),
         ).toEqual([
-            ' ',
-            <Icon key=".0" icon={mdiEarth} />,
-            ' ',
-            'a string',
-            'some more string with',
-            ' ',
-            <Icon key=".1" icon={mdiFoodApple} />,
-            ' ',
-            'array with',
-            ' ',
-            <Icon key=".3:$custom-key" icon={mdiPencil} />,
-            ' ',
+            // prettier-ignore
+            <Fragment key=".0">
+                {' '}
+                <Icon key=".0" icon={mdiEarth} />{' '}a string
+                <Fragment key=".2">
+                    some more string with{' '}<Icon key=".1" icon={mdiFoodApple} />{' '}
+                </Fragment>
+                array with{' '}<Icon key=".3:$custom-key" icon={mdiPencil} />{' '}
+            </Fragment>,
         ]);
     });
 });

package/src/utils/react/wrapChildrenIconWithSpaces.tsx

@@ -6,17 +6,17 @@ import { Icon } from '@lumx/react';
 export function wrapChildrenIconWithSpaces(children: React.ReactNode): React.ReactNode {
     if (children === null || children === undefined) return undefined;
     return Children.toArray(children).flatMap((child) => {
-        if (!React.isValidElement(child)) {
-            return child;
-        }
-
-        if (child.type === React.Fragment) {
-            return wrapChildrenIconWithSpaces(child.props.children);
-        }
-
         if (isComponentType(Icon)(child)) {
             return [' ', child, ' '];
         }
+        if (
+            React.isValidElement(child) &&
+            child.props &&
+            typeof child.props === 'object' &&
+            'children' in child.props
+        ) {
+            return React.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));
+        }
         return child;
     });
 }