@lumx/react 3.12.0 → 3.12.1-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.12.0",
-        "@lumx/icons": "^3.12.0",
+        "@lumx/core": "^3.12.1-alpha.0",
+        "@lumx/icons": "^3.12.1-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -15,17 +15,17 @@
         "react-popper": "^2.2.4"
     },
     "devDependencies": {
-        "@babel/core": "^7.18.13",
+        "@babel/core": "^7.26.10",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-export-default-from": "^7.18.10",
+        "@babel/plugin-proposal-export-default-from": "^7.25.9",
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-        "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
-        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+        "@babel/plugin-proposal-optional-chaining": "^7.21.0",
         "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-        "@babel/preset-env": "^7.18.10",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.18.6",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@babel/preset-env": "^7.26.9",
+        "@babel/preset-react": "^7.26.3",
+        "@babel/preset-typescript": "^7.26.0",
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-commonjs": "^19.0.2",
         "@rollup/plugin-node-resolve": "16.0.0",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.12.0"
+    "version": "3.12.1-alpha.0"
 }

package/src/components/button/Button.test.tsx

@@ -72,10 +72,11 @@ describe(`<${Button.displayName}>`, () => {
         forwardAttributes: 'button',
         forwardRef: 'button',
         applyTheme: {
-            affects: [{ element: 'button' }],
+            affects: [{ element: 'button' }, { not: { element: 'icons' } }],
             viaProp: true,
             viaContext: true,
             defaultTheme: 'light',
+            defaultProps: { rightIcon: mdiPlus, leftIcon: mdiCheck },
         },
     });
 });

package/src/components/button/Button.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
-import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
+import { Emphasis, Icon, Size, Theme, Text, ThemeProvider } from '@lumx/react';
 import { isComponent } from '@lumx/react/utils/type';
 import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -73,9 +73,19 @@ export const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElem
             className={buttonClassName}
             variant="button"
         >
-            {leftIcon && !isEmpty(leftIcon) && <Icon icon={leftIcon} />}
+            {leftIcon && !isEmpty(leftIcon) && (
+                // Theme is handled in the button scss
+                <ThemeProvider value={undefined}>
+                    <Icon icon={leftIcon} />
+                </ThemeProvider>
+            )}
             {children && (isComponent(Text)(children) ? children : <span>{children}</span>)}
-            {rightIcon && !isEmpty(rightIcon) && <Icon icon={rightIcon} />}
+            {rightIcon && !isEmpty(rightIcon) && (
+                // Theme is handled in the button scss
+                <ThemeProvider value={undefined}>
+                    <Icon icon={rightIcon} />
+                </ThemeProvider>
+            )}
         </ButtonRoot>
     );
 });

package/src/components/input-label/InputLabel.stories.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Typography } from '@lumx/react';
+
 import { InputLabel } from './InputLabel';
 
 export default {
@@ -36,3 +38,10 @@ export const Default = {};
 export const IsRequired = {
     args: { isRequired: true },
 };
+
+/**
+ * Default input label
+ */
+export const WithCustomTypography = {
+    args: { typography: Typography.subtitle1 },
+};

package/src/components/input-label/InputLabel.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import { Theme } from '@lumx/react';
+import { Theme, Typography } from '@lumx/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { getTypographyClassName } from '@lumx/react/utils/className';
 import { render } from '@testing-library/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { InputLabel, InputLabelProps } from './InputLabel';
@@ -38,6 +39,12 @@ describe(`<${InputLabel.displayName}>`, () => {
             expect(label).toHaveClass(`${CLASSNAME}--theme-dark`);
             expect(label).toHaveClass(`${CLASSNAME}--is-required`);
         });
+
+        it('should render typography', () => {
+            const { label } = setup({ children: 'The label', typography: Typography.body1 });
+            expect(label).toHaveClass(CLASSNAME);
+            expect(label).toHaveClass(getTypographyClassName(Typography.body1));
+        });
     });
 
     commonTestsSuiteRTL(setup, {

package/src/components/input-label/InputLabel.tsx

@@ -2,9 +2,9 @@ import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Theme } from '@lumx/react';
+import { Theme, Typography } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses, getTypographyClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -12,6 +12,8 @@ import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
  * Defines the props of the component.
  */
 export interface InputLabelProps extends GenericProps, HasTheme {
+    /** Typography variant. */
+    typography?: Typography;
     /** Label content. */
     children: string | ReactNode;
     /** Native htmlFor property. */
@@ -44,14 +46,19 @@ const DEFAULT_PROPS: Partial<InputLabelProps> = {};
  */
 export const InputLabel = forwardRef<InputLabelProps, HTMLLabelElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
-    const { children, className, htmlFor, isRequired, theme = defaultTheme, ...forwardedProps } = props;
+    const { children, className, htmlFor, isRequired, theme = defaultTheme, typography, ...forwardedProps } = props;
+    const typographyClass = typography && getTypographyClassName(typography);
 
     return (
         <label
             ref={ref}
             {...forwardedProps}
             htmlFor={htmlFor}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isRequired, theme }))}
+            className={classNames(
+                className,
+                handleBasicClasses({ prefix: CLASSNAME, isRequired, theme, hasCustomTypography: Boolean(typography) }),
+                typographyClass,
+            )}
         >
             {children}
         </label>

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

@@ -1,4 +1,13 @@
-import { ColorPalette, ColorVariant, Link, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
+import {
+    ColorPalette,
+    ColorVariant,
+    FlexBox,
+    Icon,
+    Link,
+    Typography,
+    TypographyInterface,
+    TypographyTitleCustom,
+} from '@lumx/react';
 import React from 'react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
@@ -6,6 +15,9 @@ import { iconArgType } from '@lumx/react/stories/controls/icons';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
+import { mdiEarth, mdiFoodApple, mdiPencil } from '@lumx/icons/override/generated';
 
 const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
 
@@ -29,28 +41,6 @@ export const Default = {
     args: { href: 'https://example.com', target: '_blank' },
 };
 
-/**
- * Disabled
- */
-export const Disabled = {
-    args: { ...Default.args, children: 'Link (disabled)', isDisabled: true },
-};
-
-/**
- * Using onClick transforms the link into a <button> in DOM
- */
-export const ButtonLink = {
-    argTypes: { onClick: { action: true } },
-    args: { children: 'Button link' },
-};
-
-/**
- * Button link disabled
- */
-export const ButtonLinkDisabled = {
-    args: { ...ButtonLink.args, children: 'Button link (disabled)', isDisabled: true },
-};
-
 /**
  * Use custom component instead of <a> or <button>
  */
@@ -76,10 +66,51 @@ export const WithCustomizableTypography = {
         </>
     ),
 };
+
+/**
+ * Show state combinations
+ */
+export const AllStates = {
+    argTypes: {
+        isDisabled: { control: false },
+    },
+    decorators: [
+        withThemedBackground(),
+        withCombinations({
+            combinations: {
+                sections: {
+                    Default: {},
+                    'with icon': {
+                        children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
+                    },
+                },
+                cols: {
+                    Default: {},
+                    Disabled: { isDisabled: true },
+                    Focused: { 'data-focus-visible-added': true },
+                    Hovered: { 'data-lumx-hover': true },
+                },
+                rows: {
+                    Default: {},
+                    'color=red': { color: 'red' },
+                    'theme=dark': { theme: 'dark' },
+                    'theme=dark & color=red': { theme: 'dark', color: 'red' },
+                },
+            },
+        }),
+        withWrapper({ orientation: 'horizontal', vAlign: 'space-evenly', wrap: true, gap: 'huge' }, FlexBox),
+    ],
+};
+
 /**
  * Show all typographies
  */
 export const AllTypography = {
+    args: {
+        children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
+        rightIcon: mdiPencil,
+        leftIcon: mdiFoodApple,
+    },
     argTypes: {
         typography: { control: false },
     },

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

@@ -15,11 +15,9 @@ const CLASSNAME = Link.className as string;
 const setup = (props: LinkProps = {}) => {
     render(<Link {...props} />);
     const link = getByClassName(document.body, CLASSNAME);
-    const content = queryByClassName(link, `${CLASSNAME}__content`);
     const rightIcon = queryByClassName(link, `${CLASSNAME}__right-icon`);
     const leftIcon = queryByClassName(link, `${CLASSNAME}__left-icon`);
-
-    return { props, link, content, rightIcon, leftIcon };
+    return { props, link, rightIcon, leftIcon };
 };
 
 describe(`<${Link.displayName}>`, () => {
@@ -42,14 +40,12 @@ describe(`<${Link.displayName}>`, () => {
                 color: ColorPalette.primary,
                 colorVariant: ColorVariant.D1,
             });
-            expect(link.className).toMatchInlineSnapshot(
-                '"lumx-link lumx-link--color-primary lumx-link--color-variant-D1"',
-            );
+            expect(link.className).toBe('lumx-link lumx-link--color-primary lumx-link--color-variant-D1');
         });
 
         it('should render typography', () => {
-            const { content } = setup({ href: 'https://google.com', typography: Typography.title });
-            expect(content?.className).toMatchInlineSnapshot('undefined');
+            const { link } = setup({ href: 'https://google.com', typography: Typography.title });
+            expect(link.className).toBe('lumx-link lumx-typography-title');
         });
 
         it('should render a button', () => {
@@ -59,6 +55,12 @@ describe(`<${Link.displayName}>`, () => {
             expect(link).toBe(screen.queryByRole('button', { name }));
         });
 
+        it('should render disabled link as button', () => {
+            const name = 'Link';
+            const { link } = setup({ href: 'https://google.com', isDisabled: true, children: name });
+            expect(link).toBe(screen.queryByRole('button', { name }));
+        });
+
         it('should render with icons', () => {
             const { rightIcon, leftIcon } = setup({ rightIcon: mdiPlus, leftIcon: mdiCheck });
             expect(rightIcon).toBeInTheDocument();

package/src/components/link/Link.tsx

@@ -1,14 +1,12 @@
-import React, { RefObject, useMemo } from 'react';
-
-import isEmpty from 'lodash/isEmpty';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, Typography } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { renderLink } from '@lumx/react/utils/react/renderLink';
+import { getRootClassName, getTypographyClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 
@@ -24,11 +22,17 @@ export interface LinkProps extends GenericProps {
     href?: HTMLAnchorProps['href'];
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
-    /** Left icon (SVG path). */
+    /**
+     * Left icon (SVG path).
+     * @deprecated Just nest `<Icon />` in the children
+     */
     leftIcon?: string;
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
-    /** Right icon (SVG path). */
+    /**
+     * Right icon (SVG path).
+     * @deprecated Just nest `<Icon />` in the children
+     */
     rightIcon?: string;
     /** Link target. */
     target?: HTMLAnchorProps['target'];
@@ -48,36 +52,6 @@ const COMPONENT_NAME = 'Link';
  */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
-const getIconSize = (typography?: Typography) => {
-    switch (typography) {
-        case Typography.display1:
-            return Size.m;
-
-        case Typography.headline:
-        case Typography.title:
-        case Typography.custom.title1:
-        case Typography.custom.title2:
-        case Typography.custom.title3:
-        case Typography.custom.title4:
-        case Typography.custom.title5:
-        case Typography.custom.title6:
-        case Typography.body2:
-        case Typography.subtitle2:
-            return Size.s;
-
-        case Typography.body1:
-        case Typography.subtitle1:
-            return Size.xs;
-
-        case Typography.caption:
-        case Typography.overline:
-            return Size.xxs;
-
-        default:
-            return Size.s;
-    }
-};
-
 /**
  * Link component.
  *
@@ -101,58 +75,37 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
         typography,
         ...forwardedProps
     } = props;
-    const renderedChildren = useMemo(
-        () => (
-            <>
-                {leftIcon && !isEmpty(leftIcon) && (
-                    <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />
-                )}
-
-                {children && (
-                    <span
-                        className={classNames(`${CLASSNAME}__content`, {
-                            [`lumx-typography-${typography}`]: typography,
-                        })}
-                    >
-                        {children}
-                    </span>
-                )}
-
-                {rightIcon && !isEmpty(rightIcon) && (
-                    <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />
-                )}
-            </>
-        ),
-        [leftIcon, typography, children, rightIcon],
-    );
 
-    /**
-     * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.
-     * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.
-     */
-    if ((!linkAs && isEmpty(href)) || isDisabled) {
-        return (
-            <button
-                type="button"
-                {...forwardedProps}
-                ref={ref as RefObject<HTMLButtonElement>}
-                disabled={isDisabled}
-                className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }))}
-            >
-                {renderedChildren}
-            </button>
-        );
+    const isLink = linkAs || href;
+    const Component = isLink && !isDisabled ? linkAs || 'a' : 'button';
+    const baseProps: React.ComponentProps<typeof Component> = {};
+    if (Component === 'button') {
+        baseProps.type = 'button';
+        baseProps.disabled = isDisabled;
+    } else if (isLink) {
+        baseProps.href = href;
+        baseProps.target = target;
     }
-    return renderLink(
-        {
-            linkAs,
-            ...forwardedProps,
-            href,
-            target,
-            className: classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant })),
-            ref: ref as RefObject<HTMLAnchorElement>,
-        },
-        renderedChildren,
+
+    return (
+        <Component
+            ref={ref}
+            {...forwardedProps}
+            {...baseProps}
+            className={classNames(
+                className,
+                handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }),
+                typography && getTypographyClassName(typography),
+            )}
+        >
+            {wrapChildrenIconWithSpaces(
+                <>
+                    {leftIcon && <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} />}
+                    {children}
+                    {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
+                </>,
+            )}
+        </Component>
     );
 });
 Link.displayName = COMPONENT_NAME;

package/src/components/text/Text.tsx

@@ -1,9 +1,9 @@
-import React, { Children, Fragment } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 
-import { Icon, ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
-import { GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
+import { ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
+import { GenericProps, TextElement } from '@lumx/react/utils/type';
 import {
     getFontColorClassName,
     getRootClassName,
@@ -13,6 +13,7 @@ import {
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
 
 /**
  * Defines the props of the component.
@@ -132,14 +133,7 @@ export const Text = forwardRef<TextProps>((props, ref) => {
             style={{ ...truncateLinesStyle, ...whiteSpaceStyle, ...style }}
             {...forwardedProps}
         >
-            {children &&
-                Children.toArray(children).map((child, index) => {
-                    // Force wrap spaces around icons to make sure they are never stuck against text.
-                    if (isComponent(Icon)(child)) {
-                        return <Fragment key={child.key || index}> {child} </Fragment>;
-                    }
-                    return child;
-                })}
+            {wrapChildrenIconWithSpaces(children)}
         </Component>
     );
 });

package/src/components/text-field/TextField.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mdiTranslate } from '@lumx/icons';
-import { Chip, IconButton, TextField } from '@lumx/react';
+import { Chip, IconButton, TextField, Typography } from '@lumx/react';
 import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
 import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 
@@ -47,6 +47,20 @@ export const LabelAndHelper = {
     },
 };
 
+/**
+ * With custom label and helper
+ */
+export const CustomLabelAndHelper = {
+    args: {
+        ...Default.args,
+        label: 'Textfield label',
+        labelProps: {
+            typography: Typography.subtitle1,
+        },
+        helper: loremIpsum('tiny'),
+    },
+};
+
 /**
  * With clear button
  */

package/src/stories/controls/icons.ts

@@ -63,6 +63,7 @@ import {
 export const iconArgType = {
     control: { type: 'select' },
     options: {
+        undefined,
         mdiAbTesting,
         mdiAbjadArabic,
         mdiAccount,

package/src/testing/utils/commonTestsSuiteRTL.tsx

@@ -30,6 +30,8 @@ interface Options<S extends CommonSetup> {
         viaContext: boolean;
         /** Apply a default theme if no prop or context was provided */
         defaultTheme?: Theme;
+        /** Default props to apply when testing theme */
+        defaultProps?: S['props'];
     };
 }
 
@@ -128,7 +130,7 @@ export function commonTestsSuiteRTL<S extends CommonSetup>(setup: SetupFunction<
                     it.each(testElements)(
                         `should $apply default theme (${defaultTheme}) to \`$element\``,
                         async (affectedElement) => {
-                            const wrappers = await setup();
+                            const wrappers = await setup(applyTheme.defaultProps);
                             expectTheme(wrappers, affectedElement, defaultTheme);
                         },
                     );
@@ -140,7 +142,7 @@ export function commonTestsSuiteRTL<S extends CommonSetup>(setup: SetupFunction<
                     it.each(affectedElements)(
                         `should not apply default theme (${defaultTheme}) to \`$element\``,
                         async (affectedElement) => {
-                            const wrappers = await setup();
+                            const wrappers = await setup(applyTheme.defaultProps);
                             expectTheme(wrappers, affectedElement, Theme.light, { shouldHaveModifier: false });
                             expectTheme(wrappers, affectedElement, Theme.dark, { shouldHaveModifier: false });
                         },
@@ -152,7 +154,7 @@ export function commonTestsSuiteRTL<S extends CommonSetup>(setup: SetupFunction<
                     it.each(testElements)(
                         `should $apply prop theme=${theme} to \`$element\``,
                         async (affectedElement) => {
-                            const wrappers = await setup({ theme });
+                            const wrappers = await setup({ ...applyTheme.defaultProps, theme });
                             expectTheme(wrappers, affectedElement, theme);
                         },
                     );

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

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Icon } from '@lumx/react';
+import { mdiEarth, mdiFoodApple, mdiPencil } from '@lumx/icons';
+import { wrapChildrenIconWithSpaces } from './wrapChildrenIconWithSpaces';
+
+describe(wrapChildrenIconWithSpaces, () => {
+    it('should ignore null or undefined children', () => {
+        expect(wrapChildrenIconWithSpaces(undefined)).toBeUndefined();
+        expect(wrapChildrenIconWithSpaces(null)).toBeUndefined();
+    });
+
+    it('should wrap icons with spaces', () => {
+        expect(
+            wrapChildrenIconWithSpaces(
+                <>
+                    <Icon icon={mdiEarth} />a string
+                    <>
+                        some more string with
+                        <Icon icon={mdiFoodApple} />
+                    </>
+                    {['array with', <Icon key="custom-key" icon={mdiPencil} />]}
+                </>,
+            ),
+        ).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} />,
+            ' ',
+        ]);
+    });
+});

package/src/utils/react/wrapChildrenIconWithSpaces.tsx

@@ -0,0 +1,22 @@
+import React, { Children } from 'react';
+import { isComponentType } from '@lumx/react/utils/type';
+import { Icon } from '@lumx/react';
+
+/** Force wrap spaces around icons to make sure they are never stuck against text. */
+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, ' '];
+        }
+        return child;
+    });
+}