Skip to content

beak background work around example #3279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
LinKCoding wants to merge 2 commits into
base: main
Choose a base branch
from
+45 −2
Draft

beak background work around example #3279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48087b2
working example
LinKCoding Mar 5, 2026
bea6496
update story
LinKCoding Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/styleguide/src/lib/Molecules/Popover/Popover.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
41 changes: 39 additions & 2 deletions packages/styleguide/src/lib/Molecules/Popover/Popover.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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}
Expand All @@ -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}
Copy link
Contributor Author

@LinKCoding LinKCoding Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can ignore pattern, there was some odd TS errors that expected pattern to be there when position was center. I can look more into this, but wanted to address the main issue.

position="center"
/>
<PopoverExample
{...args}
align="left"
beak="center"
p={0}
pattern={undefined}
position="center"
/>
</FlexBox>
),
};

export const Default: Story = {
render: (args) => <PopoverExample {...args} />,
};
Expand Down
Loading