@lumx/react 3.11.3 → 3.12.0

package/package.json

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

package/src/components/dialog/Dialog.test.tsx

@@ -6,6 +6,7 @@ import { render, screen } from '@testing-library/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
 import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
+import { Heading, HeadingLevelProvider } from '@lumx/react';
 
 const CLASSNAME = Dialog.className as string;
 
@@ -33,6 +34,21 @@ describe(`<${Dialog.displayName}>`, () => {
         expect(container).toHaveAttribute('aria-modal', 'true');
     });
 
+    it('should have reset the heading level context', () => {
+        setup(
+            // Heading inside the dialog
+            { children: <Heading>Title</Heading> },
+            {
+                // This level context should not affect headings inside the dialog
+                wrapper({ children }) {
+                    return <HeadingLevelProvider level={3}>{children}</HeadingLevelProvider>;
+                },
+            },
+        );
+        // Heading inside should use the dialog heading level 2
+        expect(screen.queryByRole('heading', { name: 'Title', level: 2 })).toBeInTheDocument();
+    });
+
     describe('Events', () => {
         it('should trigger `onClose` when pressing `escape` key', async () => {
             const onClose = jest.fn();

package/src/components/dialog/Dialog.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
-import { Progress, ProgressVariant, Size } from '@lumx/react';
+import { HeadingLevelProvider, Progress, ProgressVariant, Size } from '@lumx/react';
 
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
@@ -212,67 +212,77 @@ export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
               >
                   <div className={`${CLASSNAME}__overlay`} />
 
-                  <ThemeProvider value={undefined}>
-                      <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
-                          <ClickAwayProvider
-                              callback={!shouldPreventCloseOnClickAway && onClose}
-                              childrenRefs={clickAwayRefs}
-                              parentRef={rootRef}
+                  <HeadingLevelProvider level={2}>
+                      <ThemeProvider value={undefined}>
+                          <section
+                              className={`${CLASSNAME}__container`}
+                              role="dialog"
+                              aria-modal="true"
+                              {...dialogProps}
                           >
-                              <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
-                                  {(header || headerChildContent) && (
-                                      <header
-                                          {...headerChildProps}
-                                          className={classNames(
-                                              `${CLASSNAME}__header`,
-                                              (forceHeaderDivider || hasTopIntersection) &&
-                                                  `${CLASSNAME}__header--has-divider`,
-                                              headerChildProps?.className,
-                                          )}
-                                      >
-                                          {header}
-                                          {headerChildContent}
-                                      </header>
-                                  )}
+                              <ClickAwayProvider
+                                  callback={!shouldPreventCloseOnClickAway && onClose}
+                                  childrenRefs={clickAwayRefs}
+                                  parentRef={rootRef}
+                              >
+                                  <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
+                                      {(header || headerChildContent) && (
+                                          <header
+                                              {...headerChildProps}
+                                              className={classNames(
+                                                  `${CLASSNAME}__header`,
+                                                  (forceHeaderDivider || hasTopIntersection) &&
+                                                      `${CLASSNAME}__header--has-divider`,
+                                                  headerChildProps?.className,
+                                              )}
+                                          >
+                                              {header}
+                                              {headerChildContent}
+                                          </header>
+                                      )}
 
-                                  <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>
                                       <div
-                                          className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
-                                          ref={setSentinelTop}
-                                      />
-
-                                      {content}
+                                          ref={mergeRefs(contentRef, localContentRef)}
+                                          className={`${CLASSNAME}__content`}
+                                      >
+                                          <div
+                                              className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
+                                              ref={setSentinelTop}
+                                          />
 
-                                      <div
-                                          className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
-                                          ref={setSentinelBottom}
-                                      />
-                                  </div>
+                                          {content}
 
-                                  {(footer || footerChildContent) && (
-                                      <footer
-                                          {...footerChildProps}
-                                          className={classNames(
-                                              `${CLASSNAME}__footer`,
-                                              (forceFooterDivider || hasBottomIntersection) &&
-                                                  `${CLASSNAME}__footer--has-divider`,
-                                              footerChildProps?.className,
-                                          )}
-                                      >
-                                          {footer}
-                                          {footerChildContent}
-                                      </footer>
-                                  )}
-
-                                  {isLoading && (
-                                      <div className={`${CLASSNAME}__progress-overlay`}>
-                                          <Progress variant={ProgressVariant.circular} />
+                                          <div
+                                              className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
+                                              ref={setSentinelBottom}
+                                          />
                                       </div>
-                                  )}
-                              </div>
-                          </ClickAwayProvider>
-                      </section>
-                  </ThemeProvider>
+
+                                      {(footer || footerChildContent) && (
+                                          <footer
+                                              {...footerChildProps}
+                                              className={classNames(
+                                                  `${CLASSNAME}__footer`,
+                                                  (forceFooterDivider || hasBottomIntersection) &&
+                                                      `${CLASSNAME}__footer--has-divider`,
+                                                  footerChildProps?.className,
+                                              )}
+                                          >
+                                              {footer}
+                                              {footerChildContent}
+                                          </footer>
+                                      )}
+
+                                      {isLoading && (
+                                          <div className={`${CLASSNAME}__progress-overlay`}>
+                                              <Progress variant={ProgressVariant.circular} />
+                                          </div>
+                                      )}
+                                  </div>
+                              </ClickAwayProvider>
+                          </section>
+                      </ThemeProvider>
+                  </HeadingLevelProvider>
               </div>,
               document.body,
           )

package/src/components/lightbox/Lightbox.test.tsx

@@ -5,6 +5,7 @@ import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
 import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
 
+import { Heading, HeadingLevelProvider } from '@lumx/react';
 import { Lightbox, LightboxProps } from './Lightbox';
 
 const CLASSNAME = Lightbox.className as string;
@@ -22,6 +23,23 @@ const setup = (props: Partial<LightboxProps> = {}, { wrapper }: SetupRenderOptio
 };
 
 describe(`<${Lightbox.displayName}>`, () => {
+    it('should have reset the heading level context', () => {
+        setup(
+            {
+                // Heading inside the lightbox
+                children: <Heading>Title</Heading>,
+            },
+            {
+                // This level context should not affect headings inside the lightbox
+                wrapper({ children }) {
+                    return <HeadingLevelProvider level={3}>{children}</HeadingLevelProvider>;
+                },
+            },
+        );
+        // Heading inside should use the lightbox heading level 2
+        expect(screen.queryByRole('heading', { name: 'Title', level: 2 })).toBeInTheDocument();
+    });
+
     // Common tests suite.
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,

package/src/components/lightbox/Lightbox.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 
 import { mdiClose } from '@lumx/icons';
-import { IconButton, IconButtonProps } from '@lumx/react';
+import { HeadingLevelProvider, IconButton, IconButtonProps } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
@@ -162,13 +162,15 @@ export const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) =
                     />
                 </div>
             )}
-            <ThemeProvider value={undefined}>
-                <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
-                    <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
-                        {children}
-                    </div>
-                </ClickAwayProvider>
-            </ThemeProvider>
+            <HeadingLevelProvider level={2}>
+                <ThemeProvider value={undefined}>
+                    <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
+                        <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
+                            {children}
+                        </div>
+                    </ClickAwayProvider>
+                </ThemeProvider>
+            </HeadingLevelProvider>
         </div>,
         document.body,
     );

package/src/components/popover-dialog/PopoverDialog.stories.tsx

@@ -40,7 +40,7 @@ export const WithButtonTrigger = (props: any) => {
 /**
  * Example PopoverDialog using an icon button as a trigger
  */
-export const WithIconButtonTrigger = (props: any) => {
+export const WithIconButtonTrigger = ({ children, ...props }: any) => {
     const anchorRef = React.useRef(null);
     const [isOpen, close, open] = useBooleanState(false);
 
@@ -57,6 +57,7 @@ export const WithIconButtonTrigger = (props: any) => {
                 {...props}
             >
                 <Button onClick={close}>Close</Button>
+                {children}
             </PopoverDialog>
         </>
     );

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { PopoverDialog } from './PopoverDialog';
+import { Heading, HeadingLevelProvider } from '@lumx/react';
 import { WithButtonTrigger, WithIconButtonTrigger } from './PopoverDialog.stories';
+import { PopoverDialog } from './PopoverDialog';
 
 jest.mock('@lumx/react/utils/browser/isFocusVisible');
 
@@ -117,4 +118,23 @@ describe(`<${PopoverDialog.displayName}>`, () => {
         // Focus restored to the trigger element
         expect(triggerElement).toHaveFocus();
     });
+
+    it('should have reset the heading level context', async () => {
+        render(
+            // This level context should not affect headings inside the popover dialog
+
+            <HeadingLevelProvider level={3}>
+                <WithIconButtonTrigger>
+                    {/* Heading inside the popover dialog */}
+                    <Heading>Title</Heading>
+                </WithIconButtonTrigger>
+            </HeadingLevelProvider>,
+        );
+
+        // Open popover
+        await userEvent.click(screen.getByRole('button', { name: 'Open popover' }));
+
+        // Heading inside should use the popover dialog heading level 2
+        expect(screen.getByRole('heading', { name: 'Title', level: 2 })).toBeInTheDocument();
+    });
 });

package/src/components/popover-dialog/PopoverDialog.tsx

@@ -6,6 +6,7 @@ import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { HeadingLevelProvider } from '@lumx/react/components/heading';
 import { Popover, PopoverProps } from '../popover/Popover';
 
 /**
@@ -65,7 +66,7 @@ export const PopoverDialog = forwardRef<PopoverDialogProps, HTMLDivElement>((pro
             closeOnEscape
             withFocusTrap
         >
-            {children}
+            <HeadingLevelProvider level={2}>{children}</HeadingLevelProvider>
         </Popover>
     );
 });

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { mdiStar } from '@lumx/icons';
-import { Badge, ColorPalette, Icon, Orientation, Size } from '@lumx/react';
+import { mdiMenuDown, mdiStar } from '@lumx/icons';
+import { Badge, ColorPalette, Icon, IconButton, Orientation, Size, Text } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 
 import { AVATAR_IMAGES } from '@lumx/react/stories/controls/image';
@@ -31,11 +31,38 @@ export const AvatarAndName = {
     args: { ...AvatarOnly.args, name: 'Emmitt O. Lum' },
 };
 
+/** Avatar and children */
+export const AvatarAndCustomName = {
+    args: { ...AvatarOnly.args, name: <Text as="span">Emmitt O. Lum</Text> },
+};
+
 /** Avatar, name and secondary fields */
 export const AvatarAndNameAndSecondaryFields = {
     args: { ...AvatarAndName.args, fields: ['Creative developer', 'Denpasar'] },
 };
 
+/** With Right component */
+export const WithAfter = {
+    args: {
+        ...AvatarAndName.args,
+        fields: ['Creative developer', 'Denpasar'],
+        after: <IconButton label="View" icon={mdiMenuDown} emphasis="low" />,
+    },
+};
+
+/** With after component */
+export const WithAdditionalFields = {
+    args: {
+        ...AvatarAndName.args,
+        fields: ['Creative developer', 'Denpasar'],
+        additionalFields: (
+            <Text as="span" typography="body1">
+                Works at the Toronto office
+            </Text>
+        ),
+    },
+};
+
 /** Size variants */
 export const SizesAndOrientations = {
     ...AvatarAndNameAndSecondaryFields,

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

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render, within } from '@testing-library/react';
+import { render, within, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { Thumbnail } from '@lumx/react';
+import { Text, Thumbnail } from '@lumx/react';
 import userEvent from '@testing-library/user-event';
 
 import { UserBlock, UserBlockProps } from './UserBlock';
@@ -22,8 +22,9 @@ const setup = (propsOverride: Partial<UserBlockProps> = {}, { wrapper }: SetupRe
     const avatar = queryByClassName(userBlock, `${CLASSNAME}__avatar`);
     const thumbnail = avatar && queryByClassName(avatar, Thumbnail.className as string);
     const fields = queryByClassName(userBlock, `${CLASSNAME}__fields`);
+    const after = queryByClassName(userBlock, `${CLASSNAME}__after`);
 
-    return { props, userBlock, name, avatar, thumbnail, fields };
+    return { props, userBlock, name, avatar, thumbnail, fields, after };
 };
 
 describe(`<${UserBlock.displayName}>`, () => {
@@ -78,6 +79,17 @@ describe(`<${UserBlock.displayName}>`, () => {
             expect(within(fields as any).getByText('Field 1')).toBeInTheDocument();
             expect(within(fields as any).getByText('Field 2')).toBeInTheDocument();
         });
+
+        it('should render additional fields', () => {
+            setup({ additionalFields: <Text as="span">Works in Toronto</Text> });
+            expect(screen.queryByText(/works in toronto/i)).toBeInTheDocument();
+        });
+
+        it('should render after', () => {
+            const { after } = setup({ after: <Text as="span">After</Text> });
+            expect(after).toBeInTheDocument();
+            expect(screen.queryByText(/after/i)).toBeInTheDocument();
+        });
     });
 
     // Common tests suite.

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