Merge pull request #227 from commitd/stuarthendren/issue226

Minor fix and new feature in themes

Author: stuarthendren

src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -117,7 +117,7 @@ ConfirmDialogContent.toString = () => `.${StyledContent.className}`
 
 export const ConfirmDialogTrigger = forwardRef<
   ElementRef<typeof Trigger>,
-  ComponentProps<typeof Trigger>
+  Omit<ComponentProps<typeof Trigger>, 'asChild'>
 >(({ children, ...props }, forwardedRef) => (
   <Trigger asChild {...props} ref={forwardedRef}>
     {children}

src/components/Dialog/Dialog.tsx

@@ -90,7 +90,7 @@ export const Dialog: FC<DialogProps> = ({ children, overlayCss, ...props }) => {
   )
 }
 
-type DialogContentProps = ComponentProps<typeof Content> &
+type DialogContentProps = Omit<ComponentProps<typeof Content>, 'asChild'> &
   CSSProps & {
     /** Closable, add a standard close icon. */
     defaultClose?: boolean
@@ -115,7 +115,7 @@ DialogContent.toString = () => `.${StyledContent.className}`
 
 export const DialogTrigger = forwardRef<
   ElementRef<typeof Trigger>,
-  ComponentProps<typeof Trigger>
+  Omit<ComponentProps<typeof Trigger>, 'asChild'>
 >(({ children, ...props }, forwardedRef) => (
   <Trigger asChild {...props} ref={forwardedRef}>
     {children}
@@ -124,7 +124,7 @@ export const DialogTrigger = forwardRef<
 
 export const DialogClose = forwardRef<
   ElementRef<typeof Close>,
-  ComponentProps<typeof Close>
+  Omit<ComponentProps<typeof Close>, 'asChild'>
 >(({ children, ...props }, forwardedRef) => (
   <Close asChild {...props} ref={forwardedRef}>
     {children}

src/components/Drawer/Drawer.tsx

@@ -81,7 +81,7 @@ const StyledContent = styled(Content, paperStyles, {
 
 type DrawerContentVariants = VariantProps<typeof StyledContent>
 
-type DrawerContentProps = ComponentProps<typeof Content> &
+type DrawerContentProps = Omit<ComponentProps<typeof Content>, 'asChild'> &
   CSSProps &
   DrawerContentVariants & {
     /** Closable, add a standard close icon. */

src/components/Menu/Menu.tsx

@@ -102,7 +102,7 @@ export const MenuContent = forwardRef<
 ))
 MenuContent.toString = () => `.${StyledContent.className}`
 
-type MenuTriggerProps = ComponentProps<typeof Trigger>
+type MenuTriggerProps = Omit<ComponentProps<typeof Trigger>, 'asChild'>
 
 const MENU_TRIGGER_CLASS_NAME = 'c-menu-trigger'
 

src/components/Popover/Popover.stories.tsx

@@ -8,7 +8,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '.'
-import { Button, Heading, Monospace, Paragraph, Svg, Text } from '../'
+import { Box, Button, Heading, Monospace, Paragraph, Svg, Text } from '../'
 
 export default {
   title: 'Components/Popover',
@@ -40,13 +40,15 @@ export const Anchored: Story = (args) => (
   <Popover>
     <Text>
       You can use a{' '}
-      <PopoverAnchor
-        as="span"
-        css={{
-          backgroundColor: '$blue3',
-        }}
-      >
-        <Monospace>PopoverAnchor</Monospace>
+      <PopoverAnchor>
+        <Monospace
+          inline
+          css={{
+            backgroundColor: '$info3',
+          }}
+        >
+          PopoverAnchor
+        </Monospace>
       </PopoverAnchor>{' '}
       to anchor the popover to a different element{' '}
       <PopoverTrigger>
@@ -68,24 +70,26 @@ export const Anchored: Story = (args) => (
 
 export const NestedAnchored: Story = (args) => (
   <Popover>
-    <PopoverAnchor
-      css={{
-        display: 'flex',
-        padding: '$4',
-        backgroundColor: '$blue3',
-        justifyContent: 'center',
-      }}
-    >
-      <Text>
-        The <Monospace>PopoverAnchor</Monospace> can have the trigger{' '}
-        <PopoverTrigger>
-          <Svg
-            css={{ color: '$textSecondary', cursor: 'pointer', mt: '$3' }}
-            path={mdiAlertCircleOutline}
-          />
-        </PopoverTrigger>{' '}
-        nested inside
-      </Text>
+    <PopoverAnchor>
+      <Box
+        css={{
+          display: 'flex',
+          padding: '$4',
+          backgroundColor: '$info3',
+          justifyContent: 'center',
+        }}
+      >
+        <Text>
+          The <Monospace>PopoverAnchor</Monospace> can have the trigger{' '}
+          <PopoverTrigger>
+            <Svg
+              css={{ color: '$textSecondary', cursor: 'pointer', mt: '$3' }}
+              path={mdiAlertCircleOutline}
+            />
+          </PopoverTrigger>{' '}
+          nested inside
+        </Text>
+      </Box>
     </PopoverAnchor>
     <PopoverContent>
       <Heading variant="h5">Popover content</Heading>

src/components/Popover/Popover.tsx

@@ -47,7 +47,7 @@ const POPOVER_TRIGGER_CLASS_NAME = 'c-popover-trigger'
 
 export const PopoverTrigger = forwardRef<
   ElementRef<typeof Trigger>,
-  ComponentProps<typeof Trigger>
+  Omit<ComponentProps<typeof Trigger>, 'asChild'>
 >(({ children, ...props }, forwardedRef) => (
   <Trigger
     className={POPOVER_TRIGGER_CLASS_NAME}
@@ -60,11 +60,28 @@ export const PopoverTrigger = forwardRef<
 ))
 PopoverTrigger.toString = () => `.${POPOVER_TRIGGER_CLASS_NAME}`
 
+const POPOVER_ANCHOR_CLASS_NAME = 'c-popover-anchor'
+
+export const PopoverAnchor = forwardRef<
+  ElementRef<typeof Anchor>,
+  Omit<ComponentProps<typeof Anchor>, 'asChild'>
+>(({ children, ...props }, forwardedRef) => (
+  <Anchor
+    className={POPOVER_ANCHOR_CLASS_NAME}
+    asChild
+    {...props}
+    ref={forwardedRef}
+  >
+    {children}
+  </Anchor>
+))
+PopoverAnchor.toString = () => `.${POPOVER_ANCHOR_CLASS_NAME}`
+
 const POPOVER_CLOSE_CLASS_NAME = 'c-popover-close'
 
 export const PopoverClose = forwardRef<
   ElementRef<typeof Close>,
-  ComponentProps<typeof Close>
+  Omit<ComponentProps<typeof Close>, 'asChild'>
 >(({ children, ...props }, forwardedRef) => (
   <Close
     asChild
@@ -86,4 +103,3 @@ PopoverClose.toString = () => `.${POPOVER_CLOSE_CLASS_NAME}`
  * Built using [Radix Popover](https://radix-ui.com/primitives/docs/components/popover)
  */
 export const Popover: FC<React.ComponentProps<typeof Root>> = Root
-export const PopoverAnchor = styled(Anchor, {})

src/components/ThemeProvider/ThemeController.tsx

@@ -83,6 +83,18 @@ export const ThemeController: React.FC<ThemeControllerProps> = ({
     }
   }
 
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', (e) => {
+      setThemeValues(e.matches ? 'dark' : 'light')
+    })
+
+  window
+    .matchMedia('(prefers-color-scheme: light)')
+    .addEventListener('change', (e) => {
+      setThemeValues(e.matches ? 'light' : 'dark')
+    })
+
   // paints the app before it renders elements
   useLayoutEffect(() => {
     const localTheme = window.localStorage.getItem('themeChoice') as ThemeChoice

src/utils/test-utils.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Import setupTests for your unit tests and you can use `renderLight` and `renderDark` to render elements wrapped in a ThemeProvider.
  * To render without a theme provider use `renderPlain`.
@@ -18,6 +19,21 @@ import ResizeObserver from 'resize-observer-polyfill'
 // This is used in some components.
 global.ResizeObserver = ResizeObserver
 
+// Official way to supply missing window method https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+})
+
 const LightTheme: React.FC = ({ children }) => (
   <ThemeProvider choice="light">{children}</ThemeProvider>
 )