diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 48c6ffc4..da885afc 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -29,6 +29,7 @@ jobs: - uses: wyvox/action@v2 with: repo-token: ${{ secrets.GITHUB_TOKEN }} + - run: pnpm i -f # ensure all bin symlinks are created - run: pnpm build - id: set-pending run: echo "pending=$(./cache-status.sh)" >> $GITHUB_OUTPUT @@ -47,6 +48,7 @@ jobs: - uses: wyvox/action@v2 with: repo-token: ${{ secrets.GITHUB_TOKEN }} + - run: pnpm i -f # ensure all bin symlinks are created - run: pnpm build - run: pnpm i -f # sync for some reason isn't running before lint - run: ls -la ember-primitives/ diff --git a/docs-app/app/templates/5-floaty-bits/menu.gjs.md b/docs-app/app/templates/5-floaty-bits/menu.gjs.md index f7a56f7a..c47f7145 100644 --- a/docs-app/app/templates/5-floaty-bits/menu.gjs.md +++ b/docs-app/app/templates/5-floaty-bits/menu.gjs.md @@ -1,19 +1,17 @@ # Menu -Menus are built with Popovers, with added features for keyboard navigation and accessibility. +Menus are built with Popovers, with added features for keyboard navigation and accessibility. The placement of the menu content is handled by ``, so `` accepts the same arguments for positioning the dropdown. -Like ``, the `` component uses portals in a way that totally solves layering issues. No more worrying about tooltips on varying layers of your UI sometimes appearing behind other floaty bits. See the `` and `` pages for more information. +Like ``, the `` component uses the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) for layering, which totally solves z-index and overflow clipping issues, no portals needed.
```gjs live preview no-shadow -import { PortalTargets, Menu } from 'ember-primitives'; +import { Menu } from "ember-primitives"; const EllipsisVertical = ; ```
- Sometimes, you need to use an existing component as the trigger. `` also yields a `trigger` modifier that you can use anywhere, even on your own components (e.g a custom button): - ```hbs @@ -106,25 +113,23 @@ Sometimes, you need to use an existing component as the trigger. `` also y Keep in mind that for the modifier to do its work, your custom component must use [`...attributes`](https://guides.emberjs.com/v5.7.0/components/component-arguments-and-html-attributes/#toc_html-attributes) in some HTML element. - ## Install - ```hbs live ``` - ## API Reference ```gjs live no-shadow -import { ComponentSignature } from 'kolay'; +import { ComponentSignature } from "kolay"; ``` @@ -134,9 +139,35 @@ Adheres to the [Menu Button WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA ### Keyboard Interactions -| key | description | -| :---: | :----------- | -| Space Enter | When focus is on `Trigger`, opens the menu and focuses the first item. When focus is on an `Item`, activates the focused item. | -| ArrowDown ArrowRight | When `Content` is open, moves to the next item. | -| ArrowUp ArrowLeft | When `Content` is open, moves to the previous item. | -| Esc | Closes the menu and moves focus to `Trigger`. | +| key | description | +| :----------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------- | +| Space Enter | When focus is on `Trigger`, opens the menu and focuses the first item. When focus is on an `Item`, activates the focused item. | +| ArrowDown ArrowRight | When `Content` is open, moves to the next item. | +| ArrowUp ArrowLeft | When `Content` is open, moves to the previous item. | +| Esc | Closes the menu and moves focus to `Trigger`. | + +## Migrating from <= v0.55 + +### Remove `` + +`` now uses the browser's Popover API for layering. You no longer need `` in your templates. + +```diff +- import { PortalTargets, Menu } from 'ember-primitives'; ++ import { Menu } from 'ember-primitives/components/menu'; + + +``` + +### Remove `@inline` + +The `@inline` argument has been removed. Menu content now renders inline in the DOM and uses the Popover API for layering. + +### CSS considerations + +The `popover` HTML attribute has a browser UA stylesheet that adds default `border` and `overflow` styles to elements with `[popover]`. You may need to set `border: none` on your menu content if you don't want the browser's default `[popover]` border. The component resets `overflow: visible` automatically. diff --git a/docs-app/app/templates/5-floaty-bits/popover.gjs.md b/docs-app/app/templates/5-floaty-bits/popover.gjs.md index c87c2dc6..8906b3ce 100644 --- a/docs-app/app/templates/5-floaty-bits/popover.gjs.md +++ b/docs-app/app/templates/5-floaty-bits/popover.gjs.md @@ -1,9 +1,6 @@ # Popover -Popovers are built with [Floating UI][docs-floating-ui], a set of utilities for making floating elements relate to each other with minimal configuration. - - -The `` component uses portals in a way that totally solves layering issues. No more worrying about tooltips on varying layers of your UI sometimes appearing behind other floaty bits. See the `` and `` pages for more information. +Popovers are built with [Floating UI][docs-floating-ui], a set of utilities for making floating elements relate to each other with minimal configuration. The `` component uses the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) for layering, which totally solves z-index and overflow clipping issues, no portals needed. One thing to note is that the position of the popover can _escape_ the boundary of a [ShadowDom][docs-shadow-dom] -- all demos on this docs site for `ember-primitives` use a `ShadowDom` to allow for isolated CSS usage within the demos. @@ -15,20 +12,19 @@ One thing to note is that the position of the popover can _escape_ the boundary
```gjs live preview -import { PortalTargets, Popover } from 'ember-primitives'; -import { array, hash } from '@ember/helper'; -import { loremIpsum } from 'lorem-ipsum'; +import { Popover } from "ember-primitives"; +import { array, hash } from "@ember/helper"; +import { loremIpsum } from "lorem-ipsum";