@lumx/react 3.14.1 → 3.14.2-alpha.1

package/package.json

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

package/src/components/dialog/Dialog.tsx

@@ -214,18 +214,13 @@ export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
 
                   <HeadingLevelProvider level={2}>
                       <ThemeProvider value={undefined}>
-                          <section
-                              className={`${CLASSNAME}__container`}
-                              role="dialog"
-                              aria-modal="true"
-                              {...dialogProps}
-                          >
+                          <div className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
                               <ClickAwayProvider
                                   callback={!shouldPreventCloseOnClickAway && onClose}
                                   childrenRefs={clickAwayRefs}
                                   parentRef={rootRef}
                               >
-                                  <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
+                                  <section className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
                                       {(header || headerChildContent) && (
                                           <header
                                               {...headerChildProps}
@@ -278,9 +273,9 @@ export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
                                               <Progress variant={ProgressVariant.circular} />
                                           </div>
                                       )}
-                                  </div>
+                                  </section>
                               </ClickAwayProvider>
-                          </section>
+                          </div>
                       </ThemeProvider>
                   </HeadingLevelProvider>
               </div>,

package/src/components/progress/ProgressCircular.stories.tsx

@@ -1,4 +1,5 @@
-import { ProgressCircular, ProgressCircularSize, Size } from '@lumx/react';
+import React from 'react';
+import { ProgressCircular, ProgressCircularSize, Size, Text } from '@lumx/react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 
@@ -28,3 +29,16 @@ export const AllSizes = {
         }),
     ],
 };
+
+/**
+ * Inline display variant to use inside text
+ */
+export const Inline = {
+    render() {
+        return (
+            <Text as="p">
+                Some text with <ProgressCircular display="inline" size="xxs" /> inline progress
+            </Text>
+        );
+    },
+};

package/src/components/progress/ProgressCircular.test.tsx

@@ -21,6 +21,7 @@ describe(`<${ProgressCircular.displayName}>`, () => {
     it('should render default', () => {
         const { element } = setup();
         expect(element).toHaveClass(`${CLASSNAME}--size-m`);
+        expect(element.tagName).toBe('DIV');
     });
 
     it('should render size xs', () => {
@@ -28,6 +29,11 @@ describe(`<${ProgressCircular.displayName}>`, () => {
         expect(element).toHaveClass(`${CLASSNAME}--size-xs`);
     });
 
+    it('should render display inline', () => {
+        const { element } = setup({ display: 'inline' });
+        expect(element.tagName).toBe('SPAN');
+    });
+
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,
         forwardClassName: 'element',

package/src/components/progress/ProgressCircular.tsx

@@ -17,8 +17,15 @@ export type ProgressCircularSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm'>;
  * Defines the props of the component.
  */
 export interface ProgressCircularProps extends GenericProps, HasTheme {
-    /** Progress circular size. */
+    /**
+     * Progress circular size.
+     */
     size?: ProgressCircularSize;
+    /**
+     * Progress display type (inline or block).
+     * @default 'block'
+     */
+    display?: 'inline' | 'block';
 }
 
 /**
@@ -36,6 +43,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<ProgressCircularProps> = {
     size: Size.m,
+    display: 'block',
 };
 
 /**
@@ -47,21 +55,28 @@ const DEFAULT_PROPS: Partial<ProgressCircularProps> = {
  */
 export const ProgressCircular = forwardRef<ProgressCircularProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
-    const { className, theme = defaultTheme, size, ...forwardedProps } = props;
+    const {
+        className,
+        theme = defaultTheme,
+        size = DEFAULT_PROPS.size,
+        display = DEFAULT_PROPS.display,
+        ...forwardedProps
+    } = props;
+    const Element = display === 'block' ? 'div' : 'span';
 
     return (
-        <div
+        <Element
             ref={ref}
             {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, size }))}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, size, display }))}
         >
-            <div className="lumx-progress-circular__double-bounce1" />
-            <div className="lumx-progress-circular__double-bounce2" />
+            <Element className="lumx-progress-circular__double-bounce1" />
+            <Element className="lumx-progress-circular__double-bounce2" />
 
             <svg className="lumx-progress-circular__svg" viewBox="25 25 50 50">
                 <circle className="lumx-progress-circular__path" cx="50" cy="50" r="20" fill="none" strokeWidth="5" />
             </svg>
-        </div>
+        </Element>
     );
 });
 ProgressCircular.displayName = COMPONENT_NAME;

package/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 } },
 };
 

package/src/stories/decorators/withResizableBox.tsx

@@ -1,8 +1,13 @@
+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,
@@ -10,5 +15,7 @@ export const withResizableBox = ({ width = 150, height = 50 } = {}) =>
             border: '1px solid red',
             resize: 'both',
             overflow: 'hidden',
+            ...style,
         },
     });
+};

package/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>
         );