feat(popover): adds css prop to the popover anchor

Just uses the styled funciton ot add the css. As the anchor adds a div to the dom it makes sence to be able to style it. fix #203
commitd · Aug 23, 2021 · 1c498ee · 1c498ee
1 parent 3096f6e
commit 1c498ee
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 29 deletions.
diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
@@ -40,15 +40,14 @@ export const Anchored: Story = (args) => (
   <Popover>
     <Text>
       You can use a{' '}
-      <PopoverAnchor as="span">
-        <Monospace
-          css={{
-            backgroundColor: '$blue3',
-          }}
-        >
-          PopoverAnchor
-        </Monospace>
-      </PopoverAnchor>
+      <PopoverAnchor
+        as="span"
+        css={{
+          backgroundColor: '$blue3',
+        }}
+      >
+        <Monospace>PopoverAnchor</Monospace>
+      </PopoverAnchor>{' '}
       to anchor the popover to a different element{' '}
       <PopoverTrigger>
         <Svg
@@ -69,25 +68,24 @@ export const Anchored: Story = (args) => (
 
 export const NestedAnchored: Story = (args) => (
   <Popover>
-    <PopoverAnchor>
-      <Flex
-        css={{
-          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>
-      </Flex>
+    <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>
     <PopoverContent>
       <Heading variant="h5">Popover content</Heading>

diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -86,4 +86,4 @@ export const PopoverClose = forwardRef(
  * Built using [Radix Popover](https://radix-ui.com/primitives/docs/components/popover)
  */
 export const Popover: FC<React.ComponentProps<typeof Root>> = Root
-export const PopoverAnchor = Anchor
+export const PopoverAnchor = styled(Anchor, {})