Skip to content

Attempt to use popover attribute in <Popover> #615

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

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

Attempt to use popover attribute in <Popover> #615

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
787507f
Attempt to use popover attribute in `<Popover>`
NullVoxPopuli Jan 3, 2026
fb6f8c5
ope
NullVoxPopuli Jan 3, 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
56 changes: 30 additions & 26 deletions docs-app/public/docs/5-floaty-bits/anchor-to.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

The `anchorTo` modifier provides a wrapper for using [Floating UI](https://floating-ui.com/), for associating a floating element to an anchor element (such as for menus, popovers, etc).

This modifier uses the native [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) attribute to automatically make the intended floating element behave correctly.

<Callout>

The usage of a 3rd-party library will be removed when [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) lands and is widely supported (This component and modifier will still exist for the purpose of wiring up the ids between anchor and target).
Expand Down Expand Up @@ -34,35 +36,37 @@ import { InViewport } from 'ember-primitives/viewport';

<template>
<InViewport>
<button id="reference" popovertarget="floating">Click the reference element</button>
<menu popover id="floating" {{anchorTo "#reference"}}>Here is <br> floating element</menu>
<button id="reference">Click the reference element</button>
<menu {{anchorTo "#reference"}}>Here is <br> floating element</menu>
</InViewport>

<style>
menu#floating {
width: max-content;
position: absolute;
top: 0;
left: 0;
background: #222;
color: white;
font-weight: bold;
padding: 2rem;
border-radius: 4px;
font-size: 90%;
filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
z-index: 10;
}
button#reference {
padding: 0.5rem;
border: 1px solid;
display: inline-block;
background: white;
color: black;
border-radius: 0.25rem;

&:hover {
background: #ddd;
@scope {
menu {
width: max-content;
position: absolute;
top: 0;
left: 0;
background: #222;
color: white;
font-weight: bold;
padding: 2rem;
border-radius: 4px;
font-size: 90%;
filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
z-index: 10;
}
button {
padding: 0.5rem;
border: 1px solid;
display: inline-block;
background: white;
color: black;
border-radius: 0.25rem;

&:hover {
background: #ddd;
}
}
}
</style>
Expand Down
57 changes: 31 additions & 26 deletions docs-app/public/docs/5-floaty-bits/floating-ui.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

The `FloatingUI` component provides a wrapper for using [Floating UI](https://floating-ui.com/), for associating a floating element to an anchor element (such as for menus, popovers, etc).

This component uses the native [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) attribute to automatically make the intended floating element behave correctly.

<Callout>

The usage of a 3rd-party library will be removed when [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) lands and is widely supported (This component and modifier will still exist for the purpose of wiring up the ids between anchor and target).
Expand All @@ -11,6 +13,7 @@ The usage of a 3rd-party library will be removed when [CSS Anchor Positioning](h
Several of Floating UI's functions and [middleware](https://floating-ui.com/docs/middleware) are used to create an experience out of the box that is useful and expected.
See Floating UI's [documentation](https://floating-ui.com/docs/getting-started) for more information on any of the following included functionality.


## Install


Expand All @@ -31,35 +34,37 @@ import { FloatingUI } from 'ember-primitives/floating-ui';

<template>
<FloatingUI as |reference floating|>
<button {{reference}} popovertarget="floating2">Click the reference element</button>
<menu {{floating}} popover id="floating2">Here is <br> floating element</menu>
<button {{reference}}>Click the reference element</button>
<menu {{floating}}>Here is <br> floating element</menu>
</FloatingUI>

<style>
menu#floating2 {
width: max-content;
position: absolute;
top: 0;
left: 0;
background: #222;
color: white;
font-weight: bold;
padding: 2rem;
border-radius: 4px;
font-size: 90%;
filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
z-index: 10;
}
button[popovertarget="floating2"] {
padding: 0.5rem;
border: 1px solid;
display: inline-block;
background: white;
color: black;
border-radius: 0.25rem;

&:hover {
background: #ddd;
@scope {
menu {
width: max-content;
position: absolute;
top: 0;
left: 0;
background: #222;
color: white;
font-weight: bold;
padding: 2rem;
border-radius: 4px;
font-size: 90%;
filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
z-index: 10;
}
button {
padding: 0.5rem;
border: 1px solid;
display: inline-block;
background: white;
color: black;
border-radius: 0.25rem;

&:hover {
background: #ddd;
}
}
}
</style>
Expand Down
182 changes: 93 additions & 89 deletions docs-app/public/docs/5-floaty-bits/popover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,38 +40,40 @@ import { loremIpsum } from 'lorem-ipsum';
</div>

<style>
.floatybit {
width: max-content;
position: absolute;
top: 0;
left: 0;
background: #222;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
font-size: 90%;
filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
z-index: 10;
}
.arrow {
position: absolute;
background: #222;
width: 8px;
height: 8px;
transform: rotate(45deg);
}
.hook {
padding: 0.5rem;
border: 1px solid;
display: inline-block;
color: black;
}
.scroll-content {
max-height: 150px;
overflow-y: auto;
border: 1px solid;
padding: 0.5rem;
@scope {
.floatybit {
width: max-content;
position: absolute;
top: 0;
left: 0;
background: #222;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
font-size: 90%;
filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
z-index: 10;
}
.arrow {
position: absolute;
background: #222;
width: 8px;
height: 8px;
transform: rotate(45deg);
}
.hook {
padding: 0.5rem;
border: 1px solid;
display: inline-block;
color: black;
}
.scroll-content {
max-height: 150px;
overflow-y: auto;
border: 1px solid;
padding: 0.5rem;
}
}
</style>
</template>
Expand Down Expand Up @@ -140,64 +142,66 @@ const settings = cell(true);
</div>

<style>
.floatybit {
width: max-content;
position: absolute;
top: 0;
left: 0;
background: #222;
color: white;
font-weight: bold;
padding: 0.5rem;
border-radius: 4px;
font-size: 90%;
filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
z-index: 10;
}
.floatybit .floatybit {
background: #eee;
color: black;
}
.floatybit .floatybit .arrow {
background: #eee;
}
ul {
padding-left: 1rem;
margin: 0;
}
.arrow {
position: absolute;
background: #222;
width: 8px;
height: 8px;
transform: rotate(45deg);
}
.hook {
padding: 0.5rem;
border: 1px solid;
display: inline-block;
color: black;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
position: sticky;
top: 0;
width: 100%;
padding: 0.25rem;
filter: drop-shadow(0px 3px 6px #000000aa);
}
.main {
padding: 0.5rem;
}
.site {
max-height: 200px;
overflow-y: auto;
border: 1px solid;
@scope {
.floatybit {
width: max-content;
position: absolute;
top: 0;
left: 0;
background: #222;
color: white;
font-weight: bold;
padding: 0.5rem;
border-radius: 4px;
font-size: 90%;
filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
z-index: 10;
}
.floatybit .floatybit {
background: #eee;
color: black;
}
.floatybit .floatybit .arrow {
background: #eee;
}
ul {
padding-left: 1rem;
margin: 0;
}
.arrow {
position: absolute;
background: #222;
width: 8px;
height: 8px;
transform: rotate(45deg);
}
.hook {
padding: 0.5rem;
border: 1px solid;
display: inline-block;
color: black;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
position: sticky;
top: 0;
width: 100%;
padding: 0.25rem;
filter: drop-shadow(0px 3px 6px #000000aa);
}
.main {
padding: 0.5rem;
}
.site {
max-height: 200px;
overflow-y: auto;
border: 1px solid;
}
* { box-sizing: border-box; }
}
* { box-sizing: border-box; }
</style>
</template>
```
Expand Down
Loading
Loading