@lumx/react 3.14.2-alpha.0 → 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.2-alpha.0",
-        "@lumx/icons": "^3.14.2-alpha.0",
+        "@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.2-alpha.0"
+    "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;