fix(user-block): fix fields wrapping in horizontal mode

Author: gcornut

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   `UserBlock`: fix fields wrapping in horizontal mode.
+
 ## [3.14.1][] - 2025-06-02
 
 ### Fixed

packages/lumx-core/src/scss/components/user-block/_index.scss

@@ -73,16 +73,10 @@
             display: none;
         }
 
-        #{$self}--size-m & {
-            display: flex;
-        }
-
-        #{$self}--size-l & {
+        #{$self}--size-l &,
+        #{$self}--orientation-vertical & {
             display: flex;
             flex-direction: column;
-        }
-
-        #{$self}--orientation-vertical & {
             align-items: center;
         }
     }

packages/lumx-react/src/components/user-block/UserBlock.stories.tsx

@@ -1,12 +1,14 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
 
 import { mdiMenuDown, mdiStar } from '@lumx/icons';
-import { Badge, ColorPalette, Icon, IconButton, Orientation, Size, Text } from '@lumx/react';
+import { Badge, ColorPalette, Icon, IconButton, Link, Orientation, Size, Text } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 
 import { AVATAR_IMAGES } from '@lumx/react/stories/controls/image';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
 import { UserBlock } from './UserBlock';
 
 const sizes = [Size.xs, Size.s, Size.m, Size.l];
@@ -19,6 +21,7 @@ export default {
         size: getSelectArgType(sizes),
         orientation: getSelectArgType(Orientation),
     },
+    decorators: [withResizableBox({ width: 'auto', minWidth: 'min-content', height: 'auto' })],
 };
 
 /** Only an avatar */
@@ -33,19 +36,28 @@ export const AvatarAndName = {
 
 /** Avatar and children */
 export const AvatarAndCustomName = {
-    args: { ...AvatarOnly.args, name: <Text as="span">Emmitt O. Lum</Text> },
+    args: {
+        ...AvatarOnly.args,
+        name: (
+            <Text as="span" color="green">
+                Emmitt O. Lum
+            </Text>
+        ),
+    },
 };
 
 /** Avatar, name and secondary fields */
 export const AvatarAndNameAndSecondaryFields = {
-    args: { ...AvatarAndName.args, fields: ['Creative developer', 'Denpasar'] },
+    args: {
+        ...AvatarAndName.args,
+        fields: ['Creative developer', 'Denpasar'],
+    },
 };
 
 /** With Right component */
 export const WithAfter = {
     args: {
-        ...AvatarAndName.args,
-        fields: ['Creative developer', 'Denpasar'],
+        ...AvatarAndNameAndSecondaryFields.args,
         after: <IconButton label="View" icon={mdiMenuDown} emphasis="low" />,
     },
 };
@@ -54,18 +66,27 @@ export const WithAfter = {
 export const WithAdditionalFields = {
     args: {
         ...AvatarAndName.args,
-        fields: ['Creative developer', 'Denpasar'],
+        fields: [
+            <Text key={0} as="span" color="dark">
+                Published a post in <Link href="#">Space</Link>
+            </Text>,
+            <time key={1}>May 13, 2025</time>,
+        ],
         additionalFields: (
             <Text as="span" typography="body1">
                 Works at the Toronto office
             </Text>
         ),
     },
+    parameters: {
+        // Testing constrained space
+        wrapperProps: { style: { width: 245 } },
+    },
 };
 
 /** Size variants */
 export const SizesAndOrientations = {
-    ...AvatarAndNameAndSecondaryFields,
+    args: AvatarAndNameAndSecondaryFields.args,
     decorators: [
         withCombinations({
             combinations: {
@@ -78,7 +99,7 @@ export const SizesAndOrientations = {
 
 /** Setting `onClick` to use it as a button */
 export const AsButton = {
-    ...AvatarAndNameAndSecondaryFields,
+    args: AvatarAndNameAndSecondaryFields.args,
     argTypes: { onClick: { action: true } },
 };
 

packages/lumx-react/src/stories/decorators/withResizableBox.tsx

@@ -1,14 +1,21 @@
+import type { CSSProperties } from 'react';
 import { withWrapper } from './withWrapper';
 
 /** Storybook decorator wrapping story in a resizable box  */
-export const withResizableBox = ({ width = 150, height = 50 } = {}) =>
-    withWrapper({
+export const withResizableBox = ({
+    width = 150,
+    height = 50,
+    ...style
+}: Pick<CSSProperties, 'height' | 'minWidth' | 'width'> = {}) => {
+    return withWrapper({
         style: {
             display: 'flex',
             width,
             height,
             border: '1px solid red',
             resize: 'both',
             overflow: 'hidden',
+            ...style,
         },
     });
+};

packages/lumx-react/src/stories/decorators/withWrapper.tsx

@@ -8,10 +8,12 @@ export const withWrapper = <E extends React.ElementType = 'div'>(
     as?: E,
 ) => {
     // eslint-disable-next-line react/display-name
-    return (Story: any) => {
+    return (Story: any, ctx: any) => {
         const Wrapper = as || 'div';
+        const { wrapperProps } = ctx.parameters;
+        const overriddenProps = { ...props, ...wrapperProps, style: { ...props?.style, ...wrapperProps?.style } };
         return (
-            <Wrapper {...props}>
+            <Wrapper {...overriddenProps}>
                 <Story />
             </Wrapper>
         );