Skip to content

Commit

Permalink
Merge pull request #227 from commitd/stuarthendren/issue226
Browse files Browse the repository at this point in the history
Minor fix and new feature in themes
  • Loading branch information
stuarthendren authored Sep 16, 2021
2 parents 65a4065 + 558f41c commit 7347c81
Show file tree
Hide file tree
Showing 8 changed files with 83 additions and 35 deletions.
2 changes: 1 addition & 1 deletion src/components/ConfirmDialog/ConfirmDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions src/components/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Drawer/Drawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand Down
2 changes: 1 addition & 1 deletion src/components/Menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down
56 changes: 30 additions & 26 deletions src/components/Popover/Popover.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
22 changes: 19 additions & 3 deletions src/components/Popover/Popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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
Expand All @@ -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, {})
12 changes: 12 additions & 0 deletions src/components/ThemeProvider/ThemeController.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 16 additions & 0 deletions src/utils/test-utils.tsx
Original file line number Diff line number Diff line change
@@ -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`.
Expand All @@ -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>
)
Expand Down

0 comments on commit 7347c81

Please sign in to comment.