@lumx/react 3.10.0 → 3.10.1-alpha.0

package/package.json

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

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -14,7 +14,7 @@ const CLASSNAME = Autocomplete.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<AutocompleteProps> = {}) => {
+const setup = (props: Partial<AutocompleteProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     render(
         <Autocomplete {...(props as any)}>
             <List>
@@ -25,6 +25,7 @@ const setup = (props: Partial<AutocompleteProps> = {}) => {
                 ))}
             </List>
         </Autocomplete>,
+        { wrapper },
     );
     const autocomplete = getByClassName(document.body, CLASSNAME);
     const textField = getByClassName(autocomplete, TextField.className as string);
@@ -90,5 +91,11 @@ describe(`<${Autocomplete.displayName}>`, () => {
         forwardClassName: 'autocomplete',
         forwardAttributes: 'autocomplete',
         forwardRef: 'autocomplete',
+        applyTheme: {
+            affects: [{ element: 'textField' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/autocomplete/Autocomplete.tsx

@@ -8,6 +8,7 @@ import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -200,6 +201,7 @@ const DEFAULT_PROPS: Partial<AutocompleteProps> = {
  * @return React element.
  */
 export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme();
     const {
         anchorToInput,
         children,
@@ -231,7 +233,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
         placeholder,
         placement,
         shouldFocusOnClose,
-        theme,
+        theme = defaultTheme,
         value,
         textFieldProps = {},
         focusAnchorOnClose,

package/src/components/autocomplete/AutocompleteMultiple.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
 
@@ -13,7 +13,7 @@ const CLASSNAME = AutocompleteMultiple.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<AutocompleteMultipleProps> = {}) => {
+const setup = (props: Partial<AutocompleteMultipleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     render(
         <AutocompleteMultiple {...(props as any)}>
             <List>
@@ -24,6 +24,7 @@ const setup = (props: Partial<AutocompleteMultipleProps> = {}) => {
                 ))}
             </List>
         </AutocompleteMultiple>,
+        { wrapper },
     );
     const autocompleteMultiple = getByClassName(document.body, CLASSNAME);
     const textField = getByClassName(autocompleteMultiple, TextField.className as string);
@@ -52,5 +53,11 @@ describe(`<${AutocompleteMultiple.displayName}>`, () => {
         forwardClassName: 'autocompleteMultiple',
         forwardRef: 'autocompleteMultiple',
         forwardAttributes: 'autocompleteMultiple',
+        applyTheme: {
+            affects: [{ element: 'textField' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -6,6 +6,7 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Defines the props of the component.
@@ -66,6 +67,7 @@ const DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {
  * @return React element.
  */
 export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme();
     const {
         anchorToInput,
         children,
@@ -99,7 +101,7 @@ export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElemen
         placement,
         selectedChipRender,
         shouldFocusOnClose,
-        theme,
+        theme = defaultTheme,
         type,
         value,
         values,

package/src/components/avatar/Avatar.test.tsx

@@ -1,24 +1,34 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Avatar, AvatarProps } from './Avatar';
 
 const CLASSNAME = Avatar.className as string;
 
-const setup = (propsOverride: Partial<AvatarProps> = {}) => {
+const setup = (propsOverride: Partial<AvatarProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: AvatarProps = {
         image: 'path/to/avatar/image.png',
         alt: 'Image',
         ...propsOverride,
     };
-    render(<Avatar {...props} />);
+    render(<Avatar {...props} />, { wrapper });
     const avatar = queryByClassName(document.body, CLASSNAME);
     return { avatar, props };
 };
 
 describe(`<${Avatar.displayName}>`, () => {
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'avatar', forwardAttributes: 'avatar' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'avatar',
+        forwardAttributes: 'avatar',
+        applyTheme: {
+            affects: [{ element: 'avatar' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });

package/src/components/avatar/Avatar.tsx

@@ -6,6 +6,7 @@ import { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Avatar sizes.
@@ -56,7 +57,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<AvatarProps> = {
     size: Size.m,
-    theme: Theme.light,
 };
 
 /**
@@ -67,6 +67,7 @@ const DEFAULT_PROPS: Partial<AvatarProps> = {
  * @return React element.
  */
 export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
         alt,
@@ -78,7 +79,7 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
         onClick,
         onKeyPress,
         size,
-        theme,
+        theme = defaultTheme,
         thumbnailProps,
         ...forwardedProps
     } = props;

package/src/components/button/Button.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { mdiCheck, mdiPlus } from '@lumx/icons';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Emphasis, Icon } from '@lumx/react';
@@ -15,9 +15,9 @@ type SetupProps = Partial<ButtonProps>;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}) => {
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: any = { ...propsOverride };
-    render(<Button {...props} />);
+    render(<Button {...props} />, { wrapper });
     const button = getByClassName(document.body, CLASSNAME);
     const buttonWrapper = queryByClassName(document.body, 'lumx-button-wrapper');
     const icons = queryAllByClassName(button, Icon.className as string);
@@ -71,5 +71,11 @@ describe(`<${Button.displayName}>`, () => {
         forwardClassName: 'button',
         forwardAttributes: 'button',
         forwardRef: 'button',
+        applyTheme: {
+            affects: [{ element: 'button' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/button/Button.tsx

@@ -6,6 +6,7 @@ import isEmpty from 'lodash/isEmpty';
 import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
 import { Comp, isComponent } from '@lumx/react/utils/type';
 import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { BaseButtonProps, ButtonRoot } from './ButtonRoot';
 
 /**
@@ -44,7 +45,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<ButtonProps> = {
     emphasis: Emphasis.high,
     size: Size.m,
-    theme: Theme.light,
 };
 
 /**
@@ -55,7 +55,8 @@ const DEFAULT_PROPS: Partial<ButtonProps> = {
  * @return React element.
  */
 export const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {
-    const { children, className, emphasis, leftIcon, rightIcon, size, theme, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const { children, className, emphasis, leftIcon, rightIcon, size, theme = defaultTheme, ...forwardedProps } = props;
 
     const buttonClassName = classNames(
         className,

package/src/components/button/IconButton.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { Button } from '@lumx/react';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName, queryByTagName } from '@lumx/react/testing/utils/queries';
@@ -14,9 +14,9 @@ type SetupProps = Partial<IconButtonProps>;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}) => {
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: any = { ...propsOverride };
-    render(<IconButton {...props} />);
+    render(<IconButton {...props} />, { wrapper });
     const iconButton = getByClassName(document.body, CLASSNAME);
     const icon = queryByClassName(iconButton, 'lumx-icon');
     const img = queryByTagName(iconButton, 'IMG');
@@ -58,5 +58,11 @@ describe(`<${IconButton.displayName}>`, () => {
         forwardClassName: 'iconButton',
         forwardAttributes: 'iconButton',
         forwardRef: 'iconButton',
+        applyTheme: {
+            affects: [{ element: 'iconButton' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/button/IconButton.tsx

@@ -4,6 +4,7 @@ import { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react'
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
 import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 export interface IconButtonProps extends BaseButtonProps {
     /**
@@ -46,7 +47,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<IconButtonProps> = {
     emphasis: Emphasis.high,
     size: Size.m,
-    theme: Theme.light,
 };
 
 /**
@@ -57,7 +57,18 @@ const DEFAULT_PROPS: Partial<IconButtonProps> = {
  * @return React element.
  */
 export const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {
-    const { emphasis, image, icon, label, size, theme, tooltipProps, hideTooltip, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        emphasis,
+        image,
+        icon,
+        label,
+        size,
+        theme = defaultTheme,
+        tooltipProps,
+        hideTooltip,
+        ...forwardedProps
+    } = props;
 
     return (
         <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>

package/src/components/checkbox/Checkbox.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
@@ -14,9 +14,9 @@ type SetupProps = Partial<CheckboxProps>;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}) => {
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: any = { id: 'fixedId', ...propsOverride };
-    render(<Checkbox {...props} />);
+    render(<Checkbox {...props} />, { wrapper });
 
     const checkbox = getByClassName(document.body, CLASSNAME);
     const helper = queryByClassName(checkbox, `${CLASSNAME}__helper`);
@@ -117,5 +117,11 @@ describe(`<${Checkbox.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'checkbox',
         forwardAttributes: 'checkbox',
+        applyTheme: {
+            affects: [{ element: 'checkbox' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/checkbox/Checkbox.tsx

@@ -9,6 +9,7 @@ import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Intermediate state of checkbox.
@@ -54,9 +55,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<CheckboxProps> = {
-    theme: Theme.light,
-};
+const DEFAULT_PROPS: Partial<CheckboxProps> = {};
 
 /**
  * Checkbox component.
@@ -66,6 +65,7 @@ const DEFAULT_PROPS: Partial<CheckboxProps> = {
  * @return React element.
  */
 export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         checked,
         className,
@@ -78,7 +78,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
         label,
         name,
         onChange,
-        theme,
+        theme = defaultTheme,
         value,
         inputProps = {},
         ...forwardedProps

package/src/components/chip/Chip.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Theme } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
@@ -12,12 +12,12 @@ const CLASSNAME = Chip.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propOverrides: Partial<ChipProps> = {}) => {
+const setup = (propOverrides: Partial<ChipProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props = {
         ...propOverrides,
     };
 
-    render(<Chip {...props} />);
+    render(<Chip {...props} />, { wrapper });
     const chip = getByClassName(document.body, CLASSNAME);
     const before = queryByClassName(chip, `${CLASSNAME}__before`);
     const after = queryByClassName(chip, `${CLASSNAME}__after`);
@@ -185,5 +185,15 @@ describe('<Chip />', () => {
         });
     });
 
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'chip', forwardAttributes: 'chip' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'chip',
+        forwardAttributes: 'chip',
+        applyTheme: {
+            affects: [{ element: 'chip', classModifier: 'color', inverted: true }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
 });

package/src/components/chip/Chip.tsx

@@ -9,6 +9,7 @@ import classNames from 'classnames';
 
 import isFunction from 'lodash/isFunction';
 import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Chip sizes.
@@ -56,7 +57,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<ChipProps> = {
     size: Size.m,
-    theme: Theme.light,
 };
 
 /**
@@ -67,6 +67,7 @@ const DEFAULT_PROPS: Partial<ChipProps> = {
  * @return React element.
  */
 export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         after,
         before,
@@ -82,7 +83,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
         onBeforeClick,
         onClick,
         size,
-        theme,
+        theme = defaultTheme,
         href,
         onKeyDown,
         ...forwardedProps

package/src/components/comment-block/CommentBlock.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -7,8 +7,8 @@ import { CommentBlock, CommentBlockProps } from './CommentBlock';
 
 const CLASSNAME = CommentBlock.className as string;
 
-const setup = (props: Partial<CommentBlockProps> = {}) => {
-    render(<CommentBlock {...(props as any)} />);
+const setup = (props: Partial<CommentBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(<CommentBlock {...(props as any)} />, { wrapper });
     const commentBlock = queryByClassName(document.body, CLASSNAME);
     return { props, commentBlock };
 };
@@ -19,5 +19,11 @@ describe(`<${CommentBlock.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'commentBlock',
         forwardAttributes: 'commentBlock',
+        applyTheme: {
+            affects: [{ element: 'commentBlock' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/comment-block/CommentBlock.tsx

@@ -6,6 +6,7 @@ import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
 import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { AvatarProps } from '../avatar/Avatar';
 
 /**
@@ -76,7 +77,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<CommentBlockProps> = {
-    theme: Theme.light,
     variant: CommentBlockVariant.indented,
 };
 
@@ -88,6 +88,7 @@ const DEFAULT_PROPS: Partial<CommentBlockProps> = {
  * @return React element.
  */
 export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
         avatarProps,
@@ -104,7 +105,7 @@ export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef(
         onMouseEnter,
         onMouseLeave,
         text,
-        theme,
+        theme = defaultTheme,
         variant,
         ...forwardedProps
     } = props;

package/src/components/date-picker/DatePickerField.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { TextField } from '@lumx/react';
@@ -15,7 +15,7 @@ jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
-const setup = (propsOverride: Partial<DatePickerFieldProps> = {}) => {
+const setup = (propsOverride: Partial<DatePickerFieldProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: DatePickerFieldProps = {
         label: 'DatePickerField',
         locale: 'fr',
@@ -25,7 +25,7 @@ const setup = (propsOverride: Partial<DatePickerFieldProps> = {}) => {
         previousButtonProps: { label: 'Previous month' },
         ...propsOverride,
     };
-    render(<DatePickerField {...props} />);
+    render(<DatePickerField {...props} />, { wrapper });
     const textField = getByClassName(document.body, TextField.className as string);
     const inputNative = getByTagName(textField, 'input');
     const getDatePicker = () => queryByClassName(document.body, CLASSNAME);
@@ -62,5 +62,11 @@ describe(`<${DatePickerField.displayName}>`, () => {
         forwardRef: 'textField',
         forwardAttributes: 'inputNative',
         forwardClassName: 'textField',
+        applyTheme: {
+            affects: [{ element: 'textField' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

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

@@ -3,19 +3,26 @@ import React from 'react';
 import { Dialog, DialogProps } from '@lumx/react/components/dialog/Dialog';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
+import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
 
 const CLASSNAME = Dialog.className as string;
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<DialogProps> = {}) => {
-    render(<Dialog isOpen {...props} />);
+const setup = (props: Partial<DialogProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(
+        <Dialog isOpen {...props}>
+            {props.children || <ThemeSentinel />}
+        </Dialog>,
+        { wrapper },
+    );
     const dialog = queryByClassName(document.body, CLASSNAME);
     const container = dialog && queryByClassName(dialog, `${CLASSNAME}__container`);
-    return { props, dialog, container };
+    const themeSentinel = screen.queryByTestId(ThemeSentinel.testId);
+    return { props, dialog, container, themeSentinel };
 };
 
 describe(`<${Dialog.displayName}>`, () => {
@@ -66,5 +73,11 @@ describe(`<${Dialog.displayName}>`, () => {
         forwardAttributes: 'dialog',
         forwardRef: 'dialog',
         forwardClassName: 'dialog',
+        applyTheme: {
+            // Theme should not affect the children components
+            affects: [{ not: { element: 'themeSentinel' } }],
+            viaProp: true,
+            viaContext: true,
+        },
     });
 });