feat(popover): propagate the theme props to its children

Author: gcornut

CHANGELOG.md

@@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
--   `ThemeProvider` & `useTheme`: add context util to facilitate propagation of theme.
+-   `ThemeProvider` & `useTheme`: add context util to facilitate propagation of theme
+-   `Popover`: dark theme prop applies to all children via the theme context
 
 ## [3.10.0][] - 2025-01-16
 

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

@@ -63,6 +63,7 @@
 
     &--theme-dark {
         background: lumx-color-variant("dark", "N");
+        color: lumx-color-variant("light", "N");
 
         #{$self}__arrow {
             fill: lumx-color-variant("dark", "N");

packages/lumx-react/src/components/popover/Popover.test.tsx

@@ -51,8 +51,13 @@ describe(`<${Popover.displayName}>`, () => {
         forwardClassName: 'element',
         forwardAttributes: 'element',
         applyTheme: {
-            affects: [{ element: 'element' }, { not: { element: 'themeSentinel' } }],
+            affects: [
+                { element: 'element' },
+                // Theme automatically transferred to the children
+                { element: 'themeSentinel' },
+            ],
             viaProp: true,
+            // Parent context does not affect the popover
             viaContext: false,
         },
     });

packages/lumx-react/src/components/popover/Popover.tsx

@@ -181,7 +181,7 @@ const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
                               </svg>
                           </div>
                       )}
-                      <ThemeProvider value={undefined}>{children}</ThemeProvider>
+                      <ThemeProvider value={theme}>{children}</ThemeProvider>
                   </ClickAwayProvider>
               </Component>,
               usePortal,

packages/site-demo/content/product/foundations/light-dark-theme/index.mdx

@@ -38,8 +38,8 @@ Use the `ThemeProvider` component to apply the desired theme to all descendants
 </DemoBlock>
 
 Please note **some exceptions** to the theme context propagation:
-- The `Popover` ignores the theme context for now because most children that we put inside do not support the `dark` theme (List & ListItem)
-- The components `Popover`, `Lightbox` and `Dialog` all stop the propagation of the theme context and reset the theme because their children won't appear on the same background from where they are called
+- The components `Popover`, `Lightbox` and `Dialog` all ignore the parent theme context and reset the theme because their children won't appear on the same background from where they are called
+- However, the `Popover` takes the given `theme` props and propagates to its items via the context
 
 Use the `useTheme()` hook to get the theme from the current theme context when you need to adapt within your custom component.