Skip to content

Commit

Permalink
Merge pull request #314 from josemarluedke/bug/remove-z-index
Browse files Browse the repository at this point in the history 
Bug: remove default z-index from overlays
  • Loading branch information
@josemarluedke
josemarluedke authored Nov 6, 2024
2 parents 38901d0 + d6cb69f commit eae3b7b
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 102 deletions.
102 changes: 46 additions & 56 deletions packages/overlays/src/components/popover.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@ label: New

# Popover

A Popover component is a UI element that presents supplementary information or
actions related to a specific trigger element, typically appearing in a small overlay.
It offers a convenient way to display contextual content such as tooltips, forms,
or menus without cluttering the main interface, enhancing user experience and interaction.
Popovers can be triggered by various user actions like hovering, clicking, or focusing on an
A Popover component is a UI element that presents supplementary information or
actions related to a specific trigger element, typically appearing in a small overlay.
It offers a convenient way to display contextual content such as tooltips, forms,
or menus without cluttering the main interface, enhancing user experience and interaction.
Popovers can be triggered by various user actions like hovering, clicking, or focusing on an
element, providing flexibility in design and functionality.

The Popover component is built upon the [Overlay](./overlay.md) component,
inheriting its functionality and extending it to cater specifically to popover
The Popover component is built upon the [Overlay](./overlay.md) component,
inheriting its functionality and extending it to cater specifically to popover
behavior. This means that all options available in the Overlay component are also accessible as arguments in the
`Content` yielded component. Thus, users can leverage the full range of
customization options provided by the Overlay component seamlessly within the
context of popovers, ensuring consistency and flexibility in UI design and behavior.

## Import
## Import

```js
import { Popover } from '@frontile/overlays';
Expand All @@ -36,40 +36,39 @@ import { Popover } from '@frontile/overlays';
Toggle Popover
</Button>
<p.Content @class="p-2">
<p.Content @class='p-2'>
This is some example content for the popover. It can contain anything.
</p.Content>
</Popover>
</template>
```

## Focus Trapping
## Focus Trapping

Prevents the user from tabbing outside of the popover content while it's open,
ensuring better accessibility and usability. To enable this option, ensure a
Prevents the user from tabbing outside of the popover content while it's open,
ensuring better accessibility and usability. To enable this option, ensure a
focusable element is rendered at all times within the popover content.

```gjs preview
import { Button } from '@frontile/buttons';
import { Popover } from '@frontile/overlays';
import { FormInput } from '@frontile/forms';
import { Input } from '@frontile/forms';
<template>
<Popover as |p|>
<Button {{p.trigger}} {{p.anchor}}>
Toggle Popover
</Button>
<p.Content @disableFocusTrap={{false}} @class="p-4">
<FormInput @label="First Name" class="mb-2" />
<FormInput @label="Last Name" class="mb-2" />
<p.Content @disableFocusTrap={{false}} @class='p-4'>
<Input @label='First Name' class='mb-2' />
<Input @label='Last Name' class='mb-2' />
<Button>Save</Button>
</p.Content>
</Popover>
</template>
```


## The Trigger

Besides triggering the popover through a click event, alternative methods are
Expand All @@ -88,13 +87,13 @@ import { Button } from '@frontile/buttons';
<Button
{{pop.trigger}}
{{pop.anchor}}
{{on "mouseenter" pop.open}}
{{on "mouseleave" pop.close}}
{{on 'mouseenter' pop.open}}
{{on 'mouseleave' pop.close}}
>
Hover me
</Button>
<pop.Content @class="p-2">
<pop.Content @class='p-2'>
Hovered content
</pop.Content>
</Popover>
Expand All @@ -103,27 +102,23 @@ import { Button } from '@frontile/buttons';

## Blocking Window Scroll

Prevent scrolling of the main window when the popover is open, focusing the
Prevent scrolling of the main window when the popover is open, focusing the
user's attention on the popover content.

```gjs preview
import { Button } from '@frontile/buttons';
import { Popover } from '@frontile/overlays';
import { FormInput } from '@frontile/forms';
import { Input } from '@frontile/forms';
<template>
<Popover as |p|>
<Button {{p.trigger}} {{p.anchor}}>
Toggle Popover
</Button>
<p.Content
@blockScroll={{true}}
@disableFocusTrap={{false}}
@class="p-4"
>
<FormInput @label="First Name" class="mb-2" />
<FormInput @label="Last Name" class="mb-2" />
<p.Content @blockScroll={{true}} @disableFocusTrap={{false}} @class='p-4'>
<Input @label='First Name' class='mb-2' />
<Input @label='Last Name' class='mb-2' />
<Button>Save</Button>
</p.Content>
</Popover>
Expand All @@ -137,7 +132,7 @@ Choose from various backdrop options such as none, faded, blur, or transparent.
```gjs preview
import { Button } from '@frontile/buttons';
import { Popover } from '@frontile/overlays';
import { FormInput } from '@frontile/forms';
import { Input } from '@frontile/forms';
const backdrops = ['none', 'faded', 'blur', 'transparent'];
Expand All @@ -148,14 +143,14 @@ const backdrops = ['none', 'faded', 'blur', 'transparent'];
{{backdrop}}
</Button>
<p.Content
<p.Content
@backdrop={{backdrop}}
@blockScroll={{true}}
@disableFocusTrap={{false}}
@class="p-4"
@disableFocusTrap={{false}}
@class='p-4'
>
<FormInput @label="First Name" class="mb-2" />
<FormInput @label="Last Name" class="mb-2" />
<Input @label='First Name' class='mb-2' />
<Input @label='Last Name' class='mb-2' />
<Button>Save</Button>
</p.Content>
</Popover>
Expand All @@ -165,7 +160,7 @@ const backdrops = ['none', 'faded', 'blur', 'transparent'];

## Placement

Easily specify the placement of the popover relative to its trigger element,
Easily specify the placement of the popover relative to its trigger element,
ensuring optimal positioning in various UI layouts.

```gjs preview
Expand All @@ -188,13 +183,13 @@ const placements = [
];
<template>
<div class="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
<div class='flex flex-wrap md:inline-grid md:grid-cols-3 gap-4'>
{{#each placements as |placement|}}
<Popover @placement={{placement}} as |p|>
<Button {{p.trigger}} {{p.anchor}}>
{{placement}}
</Button>
<p.Content @class="p-4">
<p.Content @class='p-4'>
This is some example content for the popover. It can contain anything.
</p.Content>
</Popover>
Expand All @@ -212,21 +207,16 @@ to the `Content` yielded component.
import { Button } from '@frontile/buttons';
import { Popover } from '@frontile/overlays';
const sizes = [
'sm',
'md',
'lg',
'xl'
];
const sizes = ['sm', 'md', 'lg', 'xl'];
<template>
<div class="flex flex-wrap md:inline-grid md:grid-cols-4 gap-4">
<div class='flex flex-wrap md:inline-grid md:grid-cols-4 gap-4'>
{{#each sizes as |size|}}
<Popover as |p|>
<Button {{p.trigger}} {{p.anchor}}>
{{size}}
</Button>
<p.Content @size={{size}} @class="p-4">
<p.Content @size={{size}} @class='p-4'>
This is some example content for the popover. It can contain anything.
</p.Content>
</Popover>
Expand Down Expand Up @@ -264,8 +254,8 @@ export default class Example extends Component {
};
<template>
<Button {{on "click" this.open}}>Open</Button>
<Divider class="my-4" />
<Button {{on 'click' this.open}}>Open</Button>
<Divider class='my-4' />
<Popover
@isOpen={{this.isOpen}}
Expand All @@ -276,11 +266,11 @@ export default class Example extends Component {
Toggle Popover
</Button>
<pop.Content @class="p-4">
<pop.Content @class='p-4'>
This is some example content for the popover. Check the nested popover
by clicking the button below.
<Button {{on "click" this.close}}>Close Popover</Button>
<Button {{on 'click' this.close}}>Close Popover</Button>
</pop.Content>
</Popover>
</template>
Expand All @@ -296,7 +286,7 @@ a new Popover from within an existing one, creating a stacked structure. When
the "escape" key is pressed, the system intelligently identifies the most recently
added overlay and closes it, ensuring a natural and intuitive user experience.
Similarly, clicking outside of the overlays prioritizes the most recent addition,
closing it before proceeding to the underlying layers.
closing it before proceeding to the underlying layers.

```gjs preview
import { Popover } from '@frontile/overlays';
Expand All @@ -308,20 +298,20 @@ import { Button } from '@frontile/buttons';
Toggle Popover
</Button>
<pop.Content @class="p-4">
<pop.Content @class='p-4'>
This is some example content for the popover. Check the nested popover by
clicking the button below.
<Popover @placement="right" as |pop|>
<Button {{pop.trigger}} {{pop.anchor}} @class="mt-2">
<Popover @placement='right' as |pop|>
<Button {{pop.trigger}} {{pop.anchor}} @class='mt-2'>
Second Popover
</Button>
<pop.Content @class="p-4">
<pop.Content @class='p-4'>
<p>
More content here, the nested overlay.
</p>
<p class="mt-2">
<p class='mt-2'>
Clicking outside or pressing Escape will close this Popover, and not
the root Popover.
</p>
Expand Down
12 changes: 6 additions & 6 deletions packages/theme/src/components/overlays.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { tv } from '../tw';
const obscurer = `before:bg-gradient-to-b before:to-content1 before:from-content1/75 before:absolute before:left-0 before:w-full before:h-4 before:-top-4 before:content-['_']`;

const overlay = tv({
base: 'z-20 will-change-transform overflow-auto',
base: 'will-change-transform overflow-auto',
variants: {
enableFlexContent: {
true: 'flex items-center fixed inset-0 flex-col'
Expand All @@ -15,7 +15,7 @@ const overlay = tv({
});

const backdrop = tv({
base: 'fixed inset-0 select-none z-10 ',
base: 'fixed inset-0 select-none',
variants: {
type: {
none: '',
Expand All @@ -31,8 +31,8 @@ const backdrop = tv({

const modal = tv({
slots: {
base: 'flex flex-col shrink-0 relative text-content1-foreground bg-content1 rounded my-24 w-full outline-none overflow-hidden z-0',
closeButton: 'absolute top-2 right-2 z-10 dark:hover:bg-content2',
base: 'flex flex-col shrink-0 relative text-content1-foreground bg-content1 rounded my-24 w-full outline-none overflow-hidden',
closeButton: 'absolute top-2 right-2 dark:hover:bg-content2',
header: 'font-bold text-xl p-4 rounded-tl rounded-tr',
body: 'p-4 grow overflow-y-auto',
footer: `${obscurer} flex justify-end items-center relative border-t border-default-200 bg-content2 p-4`
Expand All @@ -54,8 +54,8 @@ const modal = tv({

const drawer = tv({
slots: {
base: 'flex flex-col absolute text-content1-foreground bg-content1 w-full h-full z-0 shadow',
closeButton: 'absolute top-2 right-2 z-10 dark:hover:bg-content2',
base: 'flex flex-col absolute text-content1-foreground bg-content1 w-full h-full shadow',
closeButton: 'absolute top-2 right-2 dark:hover:bg-content2',
header: 'font-bold text-xl p-4 rounded-tl rounded-tr',
body: 'p-4 grow overflow-y-auto',
footer: `${obscurer} flex justify-end items-center relative border-t border-default-200 bg-content2 p-4`
Expand Down
13 changes: 2 additions & 11 deletions site/app/templates/application.gts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,10 @@ import pageTitle from 'ember-page-title/helpers/page-title';
import DocfyHeader from '../components/docfy/docfy-header';
import DocfyJumpTo from '../components/docfy/docfy-jump-to';
import { VisuallyHidden } from '@frontile/utilities';
import { Portal } from '@frontile/overlays/components/portal';
import { PortalTarget } from '@frontile/overlays';

const application = <template>
{{pageTitle "Frontile"}}
<Portal>
My Portal 1 Content
</Portal>
<Portal>
My Portal 2 Content

<Portal>
My Nested Portal Content
</Portal>
</Portal>
<DocfyHeader
@githubUrl="https://github.com/josemarluedke/frontile"
class="overflow-x-scroll sm:overflow-x-auto"
Expand Down Expand Up @@ -57,6 +47,7 @@ const application = <template>
Josemar Luedke
</a>
</div>
<PortalTarget class="relative z-20" />
</template>;

export default RouteTemplate(application);
Loading

0 comments on commit eae3b7b

Please sign in to comment.