From 48087b2d2998fc4819015457eb9b59b0757e5dcb Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 5 Mar 2026 15:27:11 -0500
Subject: [PATCH 1/2] working example

---
 .../lib/Molecules/Popover/Popover.stories.tsx | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/styleguide/src/lib/Molecules/Popover/Popover.stories.tsx b/packages/styleguide/src/lib/Molecules/Popover/Popover.stories.tsx
index eb88f0651d9..b008a3e7262 100644
--- a/packages/styleguide/src/lib/Molecules/Popover/Popover.stories.tsx
+++ b/packages/styleguide/src/lib/Molecules/Popover/Popover.stories.tsx
@@ -7,6 +7,8 @@ import {
   PopoverProps,
 } from '@codecademy/gamut';
 import * as patterns from '@codecademy/gamut-patterns';
+import { theme } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useRef, useState } from 'react';
 
@@ -31,13 +33,23 @@ const PopoverExample = ({ p = 16, ...rest }: PopoverExampleProps) => {
   const [open, setOpen] = useState(false);
   const activeElRef = useRef<HTMLDivElement>(null);
   const toggleOpen = () => setOpen(!open);
+
+  const PopoverWithClearBeak = styled(Popover)`
+    & [data-testid='popover-beak'] {
+      background: linear-gradient(
+        to top left,
+        ${theme.colors['background-current']} 50%,
+        transparent 50%
+      );
+    }
+  `;
   return (
     <>
       <Box ref={activeElRef} width="fit-content">
         <FillButton onClick={toggleOpen}>Open Popover</FillButton>
       </Box>
       <FlexBox>
-        <Popover
+        <PopoverWithClearBeak
           {...(rest as any)}
           isOpen={open}
           targetRef={activeElRef}
@@ -49,12 +61,37 @@ const PopoverExample = ({ p = 16, ...rest }: PopoverExampleProps) => {
               Close Popover
             </FillButton>
           </FlexBox>
-        </Popover>
+        </PopoverWithClearBeak>
       </FlexBox>
     </>
   );
 };
 
+export const ClearBeakExample: Story = {
+  render: (args) => (
+    <FlexBox gap={16}>
+      <PopoverExample {...args} beak="center" p={0} />
+      <PopoverExample {...args} beak="center" p={0} position="above" />
+      <PopoverExample
+        {...args}
+        align="right"
+        beak="center"
+        p={0}
+        pattern={undefined}
+        position="center"
+      />
+      <PopoverExample
+        {...args}
+        align="left"
+        beak="center"
+        p={0}
+        pattern={undefined}
+        position="center"
+      />
+    </FlexBox>
+  ),
+};
+
 export const Default: Story = {
   render: (args) => <PopoverExample {...args} />,
 };

From bea6496bb64541b3d1d5ac11d3e50411fe3f9846 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 5 Mar 2026 15:28:20 -0500
Subject: [PATCH 2/2] update story

---
 packages/styleguide/src/lib/Molecules/Popover/Popover.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/styleguide/src/lib/Molecules/Popover/Popover.mdx b/packages/styleguide/src/lib/Molecules/Popover/Popover.mdx
index 46f84fcca6a..a176285e8ba 100644
--- a/packages/styleguide/src/lib/Molecules/Popover/Popover.mdx
+++ b/packages/styleguide/src/lib/Molecules/Popover/Popover.mdx
@@ -24,6 +24,12 @@ export const parameters = {
 
 <ComponentHeader {...parameters} />
 
+## FOR TESTING/DEMONSTRATION PURPOSES ONLY
+
+Verify that the beak renders correctly without the background covering any content
+
+<Canvas of={PopoverStories.ClearBeakExample} />
+
 ## Usage
 
 Popovers are generally used for interactive contents, such as new and exciting features for users to try.