Skip to content
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

Jump to bottom

feat(popover-beta): Added popover-beta component #642

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

feat(popover-beta): Added popover-beta component #642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f34bb69
feat(popover-beta): Added popover-beta component that uses the native…
jason-evans-genesys Oct 4, 2024
b9aa75e
chore(popover-beta): PR feedback
jason-evans-genesys Oct 7, 2024
ac36a96
chore(popover-beta): Using togglePopover method
jason-evans-genesys Oct 7, 2024
df4f6d9
chore(popover-beta): More PR feedback
jason-evans-genesys Oct 7, 2024
e8cac12
chore(popover-beta): Fixed positioning issue of popover
jason-evans-genesys Oct 7, 2024
96eb1b9
chore(popover-beta): Fixed tests
jason-evans-genesys Oct 7, 2024
5d7a009
chore(popover-beta): Snapshot test update
jason-evans-genesys Oct 8, 2024
c8ef7eb
chore(popover-beta): Fixed snapshot
jason-evans-genesys Oct 10, 2024
090b604
chore(popover-beta): Using floating-ui hide
jason-evans-genesys Oct 11, 2024
f85b0b3
chore(popover-beta): Merged main into branch
jason-evans-genesys Oct 15, 2024
fa5c7ea
chore(popover-beta): Fixed tests
jason-evans-genesys Oct 15, 2024
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
69 changes: 69 additions & 0 deletions packages/genesys-spark-components/src/components/beta/gux-popover-beta/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<h1>gux-popover</h1>
<div class="scroll-container">
<div class="scroll-interior">
<gux-button id="popover-target">Example Element</gux-button>
<gux-popover-beta
id="popover-example"
position="top"
for="popover-target"
is-open
display-dismiss-button
>
<span slot="title">Title</span>
<div class="popover-content-wrapper">
<div>Popover Content</div>
<gux-cta-group align="end">
<gux-button slot="primary" onclick="notify(event)"
>Action 3</gux-button
>
<gux-button slot="secondary" onclick="notify(event)"
>Action 2</gux-button
>
<gux-button slot="dismiss" onclick="notify(event)"
>Action 1</gux-button
>
</gux-cta-group>
</div>
</gux-popover-beta>
</div>
</div>

<style>
.scroll-container {
width: 900px;
height: 300px;
margin: auto;
overflow: scroll;
border: 1px solid #aaa;
}

.scroll-interior {
position: relative;
width: 600px;
height: 600px;
background-color: #fff;
}

.popover-content-wrapper {
display: flex;
flex-direction: column;
gap: 16px;
}

.popover-content {
display: flex;
flex-direction: row;
gap: 8px;
width: 280px;
}

#popover-target {
position: absolute;
left: 250px;
display: inline-block;
padding: 10px 15px;
background-color: #fdfdfd;
border: 1px #e4e9f0;
box-shadow: 0 0 2px fade(#202937, 24%);
}
</style>
71 changes: 71 additions & 0 deletions packages/genesys-spark-components/src/components/beta/gux-popover-beta/gux-popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/* This is necessary to override the position of the popover on the page. By default, an HTML popover will
render in the middle of the screen, which we do not want */
:popover-open {
position: absolute;
inset: unset;
}

.gux-popover-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: var(
--gse-semantic-zIndex-popover
); // TODO: this will not work because the popover will display in the top layer. Figure out a solution.

min-width: 280px; // TODO: add new token once UX has added it: GDS-2672
padding: var(--gse-ui-popover-gap);
overflow: hidden;
background-color: var(--gse-ui-popover-backgroundColor);
border: none;
border-radius: var(--gse-ui-popover-borderRadius);
box-shadow: var(
--gse-ui-popover-boxShadow-x,
--gse-ui-popover-boxShadow-offsetX
)
var(--gse-ui-popover-boxShadow-y, --gse-ui-popover-boxShadow-offsetY)
var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread)
var(--gse-ui-tooltip-boxShadow-color);

.gux-arrow {
position: absolute;
width: var(--gse-ui-popover-anchor-width);
height: var(--gse-ui-popover-anchor-height);

/* 4px padding leaves some space for the shadow to bleed into */
padding-bottom: 4px;
overflow: hidden;
Comment on lines +30 to +37
Copy link
Collaborator

Choose a reason for hiding this comment

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

I dont think this arrow is currently displaying.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Looking into this now.

}

.gux-arrow-caret {
width: 0;
height: 0;
filter: drop-shadow(
var(--gse-ui-popover-boxShadow-x, --gse-ui-popover-boxShadow-offsetX)
var(--gse-ui-popover-boxShadow-y, --gse-ui-popover-boxShadow-offsetY)
calc(var(--gse-ui-popover-boxShadow-blur) / 2)
var(--gse-ui-tooltip-boxShadow-color)
);
border-top: calc(var(--gse-ui-popover-anchor-width) / 2) solid
var(--gse-ui-popover-backgroundColor);
border-right: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
border-left: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
}

.gux-popover-header {
display: flex;
flex-direction: row;
place-content: center space-between;
align-items: center;
padding-bottom: var(--gse-ui-popover-gap);
font-family: var(--gse-ui-popover-title-text-fontFamily);
font-size: var(--gse-ui-popover-title-text-fontSize);
font-weight: var(--gse-ui-popover-title-text-fontWeight);
line-height: var(--gse-ui-popover-title-text-lineHeight);
color: var(--gse-ui-popover-headerColor);
}

gux-dismiss-button {
float: right;
}
}
Loading