@lumx/react 3.19.1-alpha.9 → 3.20.1-alpha.0

package/src/components/icon/Icon.test.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import { mdiAlertCircle } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
+import Tests from '@lumx/core/js/components/Icon/Tests';
 import { Icon, IconProps } from './Icon';
 
 const CLASSNAME = Icon.className as string;
@@ -29,89 +28,7 @@ const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions =
 };
 
 describe(`<${Icon.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { i, svg, path, props } = setup();
-
-            expect(i).toBeInTheDocument();
-            expect(i).toHaveClass(CLASSNAME);
-            expect(i?.className).toMatchInlineSnapshot('"lumx-icon lumx-icon--no-shape lumx-icon--path"');
-
-            expect(svg).toBeInTheDocument();
-            expect(svg).toHaveAttribute('aria-hidden', 'true');
-            expect(svg).not.toHaveAttribute('role');
-
-            expect(path).toBeInTheDocument();
-            expect(path).toHaveAttribute('d', props.icon);
-        });
-
-        it('should adapt svg with alternate text', () => {
-            const { svg, props } = setup({ alt: 'Alternate text' });
-            expect(svg).toHaveAttribute('aria-label', props.alt);
-            expect(svg).not.toHaveAttribute('aria-hidden');
-            expect(svg).toHaveAttribute('role');
-        });
-
-        describe('size', () => {
-            it('should render size', () => {
-                const { i } = setup({ size: Size.s });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xxs size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xxs });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xs size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xs });
-                expect(i).toHaveClass('lumx-icon--size-s');
-            });
-
-            it('should adapt xxl size with hasShape', () => {
-                const { i } = setup({ hasShape: true, size: Size.xxl });
-                expect(i).toHaveClass('lumx-icon--size-xl');
-            });
-
-            it('should add default size with hasShape', () => {
-                const { i } = setup({ hasShape: true });
-                expect(i).toHaveClass('lumx-icon--size-m');
-            });
-        });
-
-        describe('color', () => {
-            it('should render color and color variant', () => {
-                const { i } = setup({
-                    color: ColorPalette.primary,
-                    colorVariant: ColorVariant.D1,
-                });
-                expect(i).toHaveClass('lumx-icon--color-primary lumx-icon--color-variant-D1');
-            });
-
-            it('should improve yellow icon color contrast with alert circle icon', () => {
-                const { i } = setup({
-                    color: ColorPalette.yellow,
-                    icon: mdiAlertCircle,
-                });
-                expect(i).toHaveClass('lumx-icon--color-yellow lumx-icon--has-dark-layer');
-            });
-
-            it('should set a default color on dark theme', () => {
-                const { i } = setup({ theme: Theme.dark });
-                expect(i).toHaveClass('lumx-icon--color-light lumx-icon--theme-dark');
-            });
-
-            it('should set a default color on has shape', () => {
-                const { i } = setup({ hasShape: true });
-                expect(i).toHaveClass('lumx-icon--color-dark lumx-icon--has-shape');
-            });
-
-            it('should set a default color variant on has shape & dark color', () => {
-                const { i } = setup({ color: ColorPalette.dark, hasShape: true });
-                expect(i).toHaveClass('lumx-icon--color-variant-L2 lumx-icon--color-dark lumx-icon--has-shape');
-            });
-        });
-    });
+    Tests((props: IconProps, { wrapper }: any) => render(<Icon {...props} />, { wrapper }));
 
     // Common tests suite.
     commonTestsSuiteRTL(setup, {

package/src/components/icon/Icon.tsx

@@ -1,52 +1,11 @@
 import React from 'react';
 
-import classNames from 'classnames';
+import { Icon as UI, IconProps, IconSizes } from '@lumx/core/js/components/Icon';
 
-import { mdiAlertCircle } from '@lumx/icons';
-import { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
-export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-
-/**
- * Defines the props of the component.
- */
-export interface IconProps extends GenericProps, HasTheme {
-    /** Color variant. */
-    color?: ColorWithVariants;
-    /** Lightened or darkened variant of the selected icon color. */
-    colorVariant?: ColorVariant;
-    /** Whether the icon has a shape. */
-    hasShape?: boolean;
-    /**
-     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
-     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
-     */
-    icon: string;
-    /** Size variant. */
-    size?: IconSizes;
-    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
-    alt?: string;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Icon';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<IconProps> = {};
-
+export type { IconProps, IconSizes };
 /**
  * Icon component.
  *
@@ -56,80 +15,10 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
  */
 export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
     const defaultTheme = useTheme();
-    const {
-        className,
-        color: propColor,
-        colorVariant: propColorVariant,
-        hasShape,
-        icon,
-        size,
-        theme = defaultTheme,
-        alt,
-        ...forwardedProps
-    } = props;
-    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
-    // Color
-    let iconColor = color;
-    if (!iconColor && (hasShape || theme)) {
-        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-    }
-
-    // Color variant
-    let iconColorVariant = colorVariant;
-    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
-        iconColorVariant = 'L2';
-    }
-
-    // Size
-    let iconSize = size;
-    if (size && hasShape) {
-        if (size === Size.xxs || size === Size.xs) {
-            iconSize = Size.s;
-        } else if (size === Size.xxl) {
-            iconSize = Size.xl;
-        }
-    } else if (hasShape) {
-        iconSize = Size.m;
-    }
-
-    return (
-        <i
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    color: iconColor,
-                    colorVariant: iconColorVariant,
-                    hasShape,
-                    prefix: CLASSNAME,
-                    theme,
-                    size: iconSize,
-                }),
-                !hasShape && `${CLASSNAME}--no-shape`,
-                !hasShape &&
-                    iconColor === ColorPalette.yellow &&
-                    icon === mdiAlertCircle &&
-                    `${CLASSNAME}--has-dark-layer`,
-                `${CLASSNAME}--path`,
-            )}
-        >
-            <svg
-                aria-hidden={alt ? undefined : 'true'}
-                role={alt ? 'img' : undefined}
-                aria-label={alt}
-                height="1em"
-                preserveAspectRatio="xMidYMid meet"
-                style={{ verticalAlign: '-0.125em' }}
-                viewBox="0 0 24 24"
-                width="1em"
-            >
-                <path d={icon} fill="currentColor" />
-            </svg>
-        </i>
-    );
+    return <UI ref={ref} {...props} theme={props.theme || defaultTheme} />;
 });
-Icon.displayName = COMPONENT_NAME;
-Icon.className = CLASSNAME;
-Icon.defaultProps = DEFAULT_PROPS;
+
+Icon.displayName = UI.displayName;
+Icon.className = UI.className;
+Icon.defaultProps = UI.defaultProps;

package/src/components/image-lightbox/ImageLightbox.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, within, screen, waitFor } from '@testing-library/react';
+import { render, within, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
@@ -18,8 +18,8 @@ import Meta, {
     WithMosaicTrigger,
 } from './ImageLightbox.stories';
 
-vi.mock('@lumx/react/hooks/useImageSize');
-vi.mock('@lumx/react/hooks/useSizeOnWindowResize');
+jest.mock('@lumx/react/hooks/useImageSize');
+jest.mock('@lumx/react/hooks/useSizeOnWindowResize');
 
 const CLASSNAME = ImageLightbox.className as string;
 const baseProps = Meta.args;
@@ -56,7 +56,7 @@ const queries = {
 describe(`<${ImageLightbox.displayName}>`, () => {
     beforeEach(() => {
         (useImageSize as any).mockReturnValue(null);
-        (useSizeOnWindowResize as any).mockReturnValue([null, vi.fn()]);
+        (useSizeOnWindowResize as any).mockReturnValue([null, jest.fn()]);
     });
 
     describe('render', () => {
@@ -159,9 +159,7 @@ describe(`<${ImageLightbox.displayName}>`, () => {
 
             // Close on escape
             await userEvent.keyboard('{escape}');
-            await waitFor(() => {
-                expect(imageLightbox).not.toBeInTheDocument();
-            });
+            expect(imageLightbox).not.toBeInTheDocument();
 
             // Focus moved back to the trigger button
             expect(buttonTrigger).toHaveFocus();
@@ -187,9 +185,7 @@ describe(`<${ImageLightbox.displayName}>`, () => {
 
             // Close on escape
             await userEvent.keyboard('{escape}');
-            await waitFor(() => {
-                expect(imageLightbox).not.toBeInTheDocument();
-            });
+            expect(imageLightbox).not.toBeInTheDocument();
 
             // Focus moved back to the trigger button
             expect(buttonTrigger).toHaveFocus();
@@ -200,7 +196,7 @@ describe(`<${ImageLightbox.displayName}>`, () => {
         const scrollAreaSize = { width: 600, height: 600 };
         beforeEach(() => {
             (useImageSize as any).mockImplementation((_: any, getInitialSize: any) => getInitialSize?.() || null);
-            (useSizeOnWindowResize as any).mockReturnValue([scrollAreaSize, vi.fn()]);
+            (useSizeOnWindowResize as any).mockReturnValue([scrollAreaSize, jest.fn()]);
         });
 
         it('should use the image initial size', () => {

package/src/components/link/Link.test.tsx

@@ -51,7 +51,7 @@ describe(`<${Link.displayName}>`, () => {
 
         it('should render a button', () => {
             const name = 'Link';
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { link } = setup({ onClick, children: name });
             expect(link).toBe(screen.queryByRole('button', { name }));
         });
@@ -75,7 +75,7 @@ describe(`<${Link.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled button', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onClick });
             expect(link).toHaveAttribute('disabled');
             await userEvent.click(link);
@@ -83,28 +83,25 @@ describe(`<${Link.displayName}>`, () => {
         });
 
         it('should render disabled link', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
-            expect(screen.queryByRole('link')).toBeInTheDocument();
-            expect(link).toHaveAttribute('aria-disabled');
-            // Simulate standard disabled state (not focusable)
-            expect(link).toHaveAttribute('tabindex', '-1');
+            // Disabled link do not exist so we fallback to a button
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(link).toHaveAttribute('disabled');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
 
         it('should render aria-disabled button', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onClick });
-            expect(screen.queryByRole('button')).toBeInTheDocument();
-            expect(link).toHaveAttribute('aria-disabled', 'true');
-            expect(link).not.toHaveAttribute('tabindex');
+            expect(link).toHaveAttribute('aria-disabled');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
 
         it('should render aria-disabled link', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { link } = setup({
                 children: 'Label',
                 'aria-disabled': true,
@@ -112,7 +109,8 @@ describe(`<${Link.displayName}>`, () => {
                 onClick,
             });
             expect(link).toHaveAccessibleName('Label');
-            expect(screen.queryByRole('link')).toBeInTheDocument();
+            // Disabled link do not exist so we fallback to a button
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
             expect(link).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();

package/src/components/link/Link.tsx

@@ -12,9 +12,8 @@ import {
 } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
-import { useDisableStateProps } from '@lumx/react/utils/disabled';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 
@@ -68,26 +67,38 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
-    const { disabledStateProps, otherProps } = useDisableStateProps(props);
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         children,
         className,
         color: propColor,
         colorVariant: propColorVariant,
+        href,
         leftIcon,
+        linkAs,
         rightIcon,
+        target,
         typography,
-        linkAs,
         ...forwardedProps
     } = otherProps;
     const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
+    const isLink = linkAs || href;
+    const Component = isLink && !isAnyDisabled ? linkAs || 'a' : 'button';
+    const baseProps: React.ComponentProps<typeof Component> = {};
+    if (Component === 'button') {
+        baseProps.type = 'button';
+        Object.assign(baseProps, disabledStateProps);
+    } else if (isLink) {
+        baseProps.href = href;
+        baseProps.target = target;
+    }
+
     return (
-        <RawClickable
-            ref={ref as any}
-            as={linkAs || (forwardedProps.href ? 'a' : 'button')}
+        <Component
+            ref={ref}
             {...forwardedProps}
-            {...disabledStateProps}
+            {...baseProps}
             className={classNames(
                 className,
                 handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),
@@ -101,7 +112,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
                     {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
                 </>,
             )}
-        </RawClickable>
+        </Component>
     );
 });
 Link.displayName = COMPONENT_NAME;

package/src/components/list/ListItem.test.tsx

@@ -29,7 +29,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render as a button', () => {
-            setup({ children: 'Label', onItemSelected: vi.fn() });
+            setup({ children: 'Label', onItemSelected: jest.fn() });
             expect(screen.getByRole('button', { name: 'Label' })).toBeInTheDocument();
         });
 
@@ -41,7 +41,7 @@ describe(`<${ListItem.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled list item button', async () => {
-            const onItemSelected = vi.fn();
+            const onItemSelected = jest.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onItemSelected });
             expect(link).toHaveAttribute('aria-disabled', 'true');
             // The `renderLink` util removes the onClick handler but `user-event` will also not fire events on disabled elements.
@@ -50,7 +50,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render disabled list item link', async () => {
-            const onItemSelected = vi.fn();
+            const onItemSelected = jest.fn();
             const { link } = setup({
                 children: 'Label',
                 isDisabled: true,
@@ -64,7 +64,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render aria-disabled list item button', async () => {
-            const onItemSelected = vi.fn();
+            const onItemSelected = jest.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onItemSelected });
             expect(link).toHaveAttribute('aria-disabled', 'true');
             if (link) await userEvent.click(link);
@@ -72,7 +72,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render aria-disabled list item link', async () => {
-            const onItemSelected = vi.fn();
+            const onItemSelected = jest.fn();
             const { link } = setup({
                 children: 'Label',
                 'aria-disabled': true,

package/src/components/message/Message.test.tsx

@@ -54,7 +54,7 @@ describe(`<${Message.displayName}>`, () => {
         });
 
         it('should render close button', async () => {
-            const onClick = vi.fn();
+            const onClick = jest.fn();
             const { closeButton } = setup({
                 hasBackground: true,
                 kind: 'info',

package/src/components/mosaic/Mosaic.test.tsx

@@ -32,7 +32,7 @@ describe(`<${Mosaic.displayName}>`, () => {
         expect(mosaic).toHaveClass(`${CLASSNAME}--has-${count}-thumbnail${count > 1 ? 's' : ''}`);
         expect(thumbnails.length).toBe(count);
         for (const thumbnail of thumbnails) {
-            expect(within(thumbnail).queryByAltText('')).toBeInTheDocument();
+            expect(within(thumbnail).queryByRole('img')).toBeInTheDocument();
         }
     });
 
@@ -47,8 +47,8 @@ describe(`<${Mosaic.displayName}>`, () => {
     });
 
     it('should render clickable', async () => {
-        const onClick = vi.fn();
-        const onImageClick = vi.fn();
+        const onClick = jest.fn();
+        const onImageClick = jest.fn();
         const { thumbnails } = setup({
             thumbnails: generateThumbnails(6),
             onImageClick,

package/src/components/navigation/NavigationItem.tsx

@@ -1,12 +1,11 @@
 import React, { ElementType, ReactNode } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';
+import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
 import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 type BaseNavigationItemProps = {
     /** Icon (SVG path). */
@@ -17,6 +16,9 @@ type BaseNavigationItemProps = {
     isCurrentPage?: boolean;
 };
 
+/** Make `href` required when `as` is `a` */
+type RequiredLinkHref<E> = E extends 'a' ? { href: string } : Record<string, unknown>;
+
 /**
  * Navigation item props
  */
@@ -24,7 +26,7 @@ export type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<
     HasTheme &
     HasClassName &
     BaseNavigationItemProps &
-    HasRequiredLinkHref<E>;
+    RequiredLinkHref<E>;
 
 /**
  * Component display name.
@@ -42,6 +44,8 @@ export const NavigationItem = Object.assign(
         const theme = useTheme();
         const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
 
+        const buttonProps = Element === 'button' ? { type: 'button' } : {};
+
         return (
             <li
                 className={classNames(
@@ -53,14 +57,14 @@ export const NavigationItem = Object.assign(
                 )}
             >
                 <Tooltip label={tooltipLabel} placement={Placement.TOP}>
-                    <RawClickable
-                        as={Element}
+                    <Element
                         className={handleBasicClasses({
                             prefix: `${CLASSNAME}__link`,
                             isSelected: isCurrentPage,
                         })}
                         ref={ref as React.Ref<any>}
                         aria-current={isCurrentPage ? 'page' : undefined}
+                        {...buttonProps}
                         {...forwardedProps}
                     >
                         {icon ? (
@@ -70,7 +74,7 @@ export const NavigationItem = Object.assign(
                         <Text as="span" truncate className={`${CLASSNAME}__label`} ref={labelRef}>
                             {label}
                         </Text>
-                    </RawClickable>
+                    </Element>
                 </Tooltip>
             </li>
         );

package/src/components/navigation/NavigationSection.tsx

@@ -9,7 +9,6 @@ import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
-import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
 import { NavigationContext } from './context';
 
@@ -53,8 +52,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
             )}
             ref={ref}
         >
-            <RawClickable<'button'>
-                as="button"
+            <button
                 {...forwardedProps}
                 aria-controls={sectionId}
                 aria-expanded={isOpen}
@@ -64,6 +62,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     setIsOpen(!isOpen);
                     event.stopPropagation();
                 }}
+                type="button"
             >
                 {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
 
@@ -74,7 +73,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
                     icon={isOpen ? mdiChevronUp : mdiChevronDown}
                 />
-            </RawClickable>
+            </button>
             {isOpen &&
                 (isDropdown ? (
                     <Popover

package/src/components/notification/Notification.test.tsx

@@ -44,8 +44,8 @@ describe(`<${Notification.displayName}>`, () => {
     });
 
     it('should render content & action', async () => {
-        const onClick = vi.fn();
-        const onActionClick = vi.fn();
+        const onClick = jest.fn();
+        const onActionClick = jest.fn();
         const content = 'Content';
         const actionLabel = 'actionLabel';
         const { notification, action, actionButton } = setup({ content, actionLabel, onClick, onActionClick });
@@ -81,9 +81,8 @@ describe(`<${Notification.displayName}>`, () => {
 
     it('should forward styles', () => {
         const { notification } = setup({ style: { color: 'red' } });
-
         expect(notification).toBeInTheDocument();
-        expect(notification).toHaveStyle('color: rgb(255, 0, 0)');
+        expect(notification).toHaveStyle('color: red');
     });
 
     // Common tests suite.

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

@@ -6,7 +6,7 @@ import { Heading, HeadingLevelProvider } from '@lumx/react';
 import { WithButtonTrigger, WithIconButtonTrigger } from './PopoverDialog.stories';
 import { PopoverDialog } from './PopoverDialog';
 
-vi.mock('@lumx/react/utils/browser/isFocusVisible');
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
 
 describe(`<${PopoverDialog.displayName}>`, () => {
     it('should open and init focus', async () => {

package/src/components/radio-button/RadioButton.test.tsx

@@ -86,7 +86,7 @@ describe(`<${RadioButton.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onChange = vi.fn();
+        const onChange = jest.fn();
 
         it('should trigger `onChange` when radioButton is clicked', async () => {
             const value = 'value';
@@ -102,7 +102,7 @@ describe(`<${RadioButton.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should be disabled with isDisabled', async () => {
-            const onChange = vi.fn();
+            const onChange = jest.fn();
             const { radioButton, input } = setup({ isDisabled: true, onChange });
 
             expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
@@ -115,7 +115,7 @@ describe(`<${RadioButton.displayName}>`, () => {
         });
 
         it('should be disabled with aria-disabled', async () => {
-            const onChange = vi.fn();
+            const onChange = jest.fn();
             const { radioButton, input } = setup({ 'aria-disabled': true, onChange });
 
             expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');