@lumx/react 3.12.1-alpha.7 → 3.13.1-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.12.1-alpha.7",
-        "@lumx/icons": "^3.12.1-alpha.7",
+        "@lumx/core": "^3.13.1-alpha.0",
+        "@lumx/icons": "^3.13.1-alpha.0",
         "@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.7"
+    "version": "3.13.1-alpha.0"
 }

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

@@ -1,4 +1,14 @@
-import { ColorPalette, ColorVariant, Link, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
+import {
+    ColorPalette,
+    ColorVariant,
+    FlexBox,
+    Icon,
+    Text,
+    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 +16,10 @@ 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';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 
 const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
 
@@ -29,28 +43,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 +68,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 },
     },
@@ -109,3 +142,35 @@ export const AllColors = {
         }),
     ],
 };
+
+/**
+ * Check how link inherit parent typography & color.
+ * Typography should be inherited.
+ * Color should not.
+ */
+export const ParentTypographyAndColor = {
+    args: {
+        children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
+        'parent.typography': undefined,
+        'parent.color': undefined,
+    },
+    render: ({ parent: { typography, color }, ...args }: any) => (
+        <Text as="p" color={color} typography={typography}>
+            <Link {...args} />
+        </Text>
+    ),
+    decorators: [
+        withNestedProps(),
+        withCombinations({
+            combinations: {
+                sections: { Button: {}, Link: { href: '#' } },
+                rows: {
+                    Default: {},
+                    'Parent typography=title': { 'parent.typography': 'title' },
+                    'Parent color=red': { 'parent.color': 'red' },
+                },
+            },
+        }),
+        withWrapper({ orientation: 'horizontal', vAlign: 'space-evenly', wrap: true, gap: 'huge' }, FlexBox),
+    ],
+};

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';
@@ -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-link--has-typography lumx-typography-title');
         });
 
         it('should render a button', () => {
@@ -59,10 +55,26 @@ 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();
-            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

@@ -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 Instead, simply 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 Instead, simply 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, hasTypography: !!typography }),
+                typography && getTypographyClassName(typography),
+            )}
+        >
+            {wrapChildrenIconWithSpaces(
+                <>
+                    {leftIcon && <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} />}
+                    {children && <span className={`${CLASSNAME}__content`}>{children}</span>}
+                    {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
+                </>,
+            )}
+        </Component>
     );
 });
 Link.displayName = COMPONENT_NAME;

package/src/components/tabs/TabProvider.tsx

@@ -1,3 +1,4 @@
+import ReactDOM from 'react-dom';
 import React, { ReactNode, useEffect, useReducer } from 'react';
 import { INIT_STATE, TabProviderContext, reducer } from './state';
 
@@ -48,7 +49,14 @@ export const TabProvider: React.FC<TabProviderProps> = (props) => {
             if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {
                 return;
             }
-            onChange(state.activeTabIndex);
+
+            // Escape rendering/useEffect context
+            queueMicrotask(() => {
+                // Wait for React to commit last state changes (avoid looping state update)
+                ReactDOM.flushSync(() => {
+                    onChange(state.activeTabIndex);
+                });
+            });
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [onChange, state.activeTabIndex],

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/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/stories/controls/icons.ts

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

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

@@ -0,0 +1,37 @@
+import React, { Fragment } 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([
+            // 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

@@ -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 (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;
+    });
+}

package/src/stories/generated/Link/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/link/Link Demos' };
-
-export { App as Default } from './default';
-export { App as Implicit } from './implicit';
-export { App as Sizes } from './sizes';