feat(progress): add display inline variant to ProgressCircular

Author: gcornut

CHANGELOG.md

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

packages/lumx-core/src/scss/components/progress/_index.scss

@@ -19,6 +19,10 @@
     width: $lumx-progress-circular-size;
     height: $lumx-progress-circular-size;
 
+    &--display-inline {
+        display: inline-block;
+    }
+
     &__double-bounce1,
     &__double-bounce2 {
         position: absolute;

packages/lumx-react/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>
+        );
+    },
+};

packages/lumx-react/src/components/progress/ProgressCircular.test.tsx

@@ -21,13 +21,19 @@ 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', () => {
         const { element } = setup({ size: 'xs' });
         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',

packages/lumx-react/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;