fix: popover arrow color not customizable

traefik · Mar 16, 2022 · 097fcbf · 097fcbf
1 parent df212a8
commit 097fcbf
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 11 deletions.
diff --git a/components/Popover/Popover.stories.tsx b/components/Popover/Popover.stories.tsx
@@ -14,6 +14,9 @@ import { Container } from '../Container';
 import { Button } from '../Button';
 import { Text } from '../Text';
 import { Flex } from '../Flex';
+import { HamburgerMenuIcon } from '@radix-ui/react-icons';
+import { PopoverAnchor } from '@radix-ui/react-popover';
+import { Box } from '../Box';
 
 const BasePopover = (props: PopoverProps): JSX.Element => <Popover {...props} />;
 const PopoverForStory = modifyVariantsForStory<PopoverVariants, PopoverProps>(BasePopover);
@@ -62,3 +65,39 @@ export const RichContent: ComponentStory<typeof PopoverForStory> = (args) => (
     </PopoverForStory>
   </Container>
 );
+
+export const IconTrigger: ComponentStory<typeof PopoverForStory> = (args) => (
+  <Container>
+    <PopoverForStory {...args}>
+      <PopoverTrigger asChild>
+        <Button size="small">
+          <HamburgerMenuIcon />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent arrowCss={{ fill: '$primary' }} css={{ bc: '$primary', p: '$2' }}>
+        <Text css={{ c: '$loContrast' }}>Content</Text>
+      </PopoverContent>
+    </PopoverForStory>
+  </Container>
+);
+
+export const RowAnchor: ComponentStory<typeof PopoverForStory> = (args) => (
+  <Container>
+    <PopoverForStory {...args}>
+      <PopoverAnchor asChild>
+        <Box css={{ bc: '$01dp', p: '$2', display: 'inline-block', c: '$hiContrast' }}>
+          Click on
+          <PopoverTrigger asChild>
+            <Button size="small" css={{ mx: '$2' }}>
+              <HamburgerMenuIcon />
+            </Button>
+          </PopoverTrigger>
+          to open the anchor
+        </Box>
+      </PopoverAnchor>
+      <PopoverContent arrowCss={{ fill: '$primary' }} css={{ bc: '$primary', p: '$2' }}>
+        <Text css={{ c: '$loContrast' }}>Content</Text>
+      </PopoverContent>
+    </PopoverForStory>
+  </Container>
+);
diff --git a/components/Popover/Popover.tsx b/components/Popover/Popover.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { styled, CSS, VariantProps } from '../../stitches.config';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { Box } from '../Box';
 import { panelStyles } from '../Panel';
 import { elevationVariants } from '../Elevation';
 
@@ -30,28 +29,60 @@ const StyledContent = styled(PopoverPrimitive.Content, panelStyles, {
   },
 });
 
+const fillColorVariants: Record<number, CSS> = {
+  0: {
+    fill: '$00dp',
+  },
+  1: {
+    fill: '$01dp',
+  },
+  2: {
+    fill: '$02dp',
+  },
+  3: {
+    fill: '$03dp',
+  },
+  4: {
+    fill: '$04dp',
+  },
+  5: {
+    fill: '$05dp',
+  },
+};
+
+const StyledArrow = styled(PopoverPrimitive.Arrow, {
+  fill: 'currentColor',
+  variants: {
+    elevation: fillColorVariants,
+  },
+  defaultVariants: {
+    elevation: 2,
+  },
+});
+
 type PopoverContentPrimitiveProps = Omit<
   React.ComponentProps<typeof PopoverPrimitive.Content>,
   'as'
 >;
-export type PopoverContentProps = PopoverContentPrimitiveProps & {
-  css?: CSS;
-  hideArrow?: boolean;
-};
+export type PopoverContentProps = PopoverContentPrimitiveProps &
+  VariantProps<typeof StyledContent> & {
+    css?: CSS;
+    hideArrow?: boolean;
+    arrowCss?: CSS;
+  };
 
 export const PopoverContent = React.forwardRef<
   React.ElementRef<typeof StyledContent>,
   PopoverContentProps
->(({ children, hideArrow, ...props }, fowardedRef) => (
-  <StyledContent sideOffset={0} {...props} ref={fowardedRef}>
+>(({ children, hideArrow, arrowCss, elevation, ...props }, fowardedRef) => (
+  <StyledContent sideOffset={0} elevation={elevation} {...props} ref={fowardedRef}>
     {children}
     {!hideArrow && (
-      <Box css={{ color: '$deepBlue3' }}>
-        <PopoverPrimitive.Arrow width={11} height={5} offset={5} style={{ fill: 'currentColor' }} />
-      </Box>
+      <StyledArrow elevation={elevation} width={11} height={5} offset={5} css={arrowCss} />
     )}
   </StyledContent>
 ));
 
 export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverClose = PopoverPrimitive.Close;
+export const PopoverAnchor = PopoverPrimitive.Anchor;
diff --git a/index.ts b/index.ts
@@ -50,7 +50,7 @@ export {
   NavigationLink,
 } from './components/Navigation';
 export { Overlay } from './components/Overlay';
-export { Popover, PopoverClose, PopoverContent, PopoverTrigger } from './components/Popover';
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger, PopoverAnchor } from './components/Popover';
 export { Portal } from '@radix-ui/react-portal';
 export { Radio, RadioGroup } from './components/Radio';
 export { Select } from './components/Select';