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

package/src/components/user-block/UserBlock.tsx

@@ -32,7 +32,7 @@ export interface UserBlockProps extends GenericProps, HasTheme {
     /** Multiple action toolbar content. */
     multipleActions?: ReactNode;
     /** User name. */
-    name?: string;
+    name?: React.ReactNode;
     /** Props to pass to the name block. */
     nameProps?: GenericProps;
     /** Orientation. */
@@ -47,6 +47,10 @@ export interface UserBlockProps extends GenericProps, HasTheme {
     onMouseEnter?(): void;
     /** On mouse leave callback. */
     onMouseLeave?(): void;
+    /** Display additional fields below the original name and fields */
+    additionalFields?: React.ReactNode;
+    /** Display an additional element after the entire component. (to the right if orientation is horizontal, at the bottom if orientation is vertical) */
+    after?: React.ReactNode;
 }
 
 /**
@@ -92,6 +96,9 @@ export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref)
         simpleAction,
         size,
         theme = defaultTheme,
+        children,
+        additionalFields,
+        after,
         ...forwardedProps
     } = props;
     let componentSize = size;
@@ -131,7 +138,9 @@ export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref)
         return <NameComponent {...nProps}>{name}</NameComponent>;
     }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
 
-    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && componentSize !== Size.xs && (
+    const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
+
+    const fieldsBlock: ReactNode = fields && shouldDisplayFields && (
         <div className={`${CLASSNAME}__fields`}>
             {fields.map((field: string, idx: number) => (
                 <span key={idx} className={`${CLASSNAME}__field`}>
@@ -164,16 +173,18 @@ export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref)
                     theme={theme}
                 />
             )}
-            {(fields || name) && (
+            {(fields || name || children || additionalFields) && (
                 <div className={`${CLASSNAME}__wrapper`}>
-                    {nameBlock}
+                    {children || nameBlock}
                     {fieldsBlock}
+                    {shouldDisplayFields ? additionalFields : null}
                 </div>
             )}
             {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}
             {shouldDisplayActions && multipleActions && (
                 <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>
             )}
+            {after ? <div className={`${CLASSNAME}__after`}>{after}</div> : null}
         </div>
     );
 });

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