Skip to content

Commit 16995e7

Browse files
authored
Merge pull request #778 from maiieul/popover-data-attributes
refactor(styled popover): to use data-open data-closing
2 parents 8e7c1a9 + 56d7f5d commit 16995e7

File tree

3 files changed

+5
-18
lines changed

3 files changed

+5
-18
lines changed

packages/kit-headless/src/components/popover/popover-panel-impl.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ export const HPopoverPanelImpl = component$((props: PropsOf<'div'>) => {
104104
{...props}
105105
id={panelId}
106106
ref={props.ref}
107-
data-open={context.isOpenSig.value ? '' : undefined}
108107
popover={
109108
(context.manual && 'manual') || props.popover === 'manual'
110109
? 'manual'

packages/kit-headless/src/components/popover/utils.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export async function supportShowAnimation(popover: HTMLElement, isPolyfill: boo
1919

2020
popover.classList.add('popover-showing');
2121
popover.classList.remove('popover-closing');
22+
popover.dataset.open = '';
2223
popover.removeAttribute('data-closing');
2324
popover.removeAttribute('data-closed');
2425
}

packages/kit-styled/src/components/popover/popover.tsx

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PropsOf, Slot, component$, useStyles$ } from '@builder.io/qwik';
1+
import { PropsOf, Slot, component$ } from '@builder.io/qwik';
22
import { Popover as HeadlessPopover } from '@qwik-ui/headless';
33
import { cn } from '@qwik-ui/utils';
44

@@ -13,26 +13,13 @@ const Root = component$<PropsOf<typeof HeadlessPopover.Root>>(({ ...props }) =>
1313
const Trigger = HeadlessPopover.Trigger;
1414

1515
const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) => {
16-
useStyles$(`
17-
.my-transition {
18-
transition: opacity 150ms, display 150ms, overlay 150ms;
19-
transition-behavior: allow-discrete;
20-
}
21-
22-
.popover-showing {
23-
opacity: 1;
24-
}
25-
26-
.popover-closing {
27-
opacity: 0;
28-
}
29-
`);
30-
3116
return (
3217
<HeadlessPopover.Panel
3318
{...props}
3419
class={cn(
35-
'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground opacity-0 shadow-md outline-none',
20+
'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
21+
'data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out data-[open]:fade-in data-[closing]:zoom-out-95 data-[open]:zoom-in-95',
22+
'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
3623
props.class,
3724
)}
3825
>

0 commit comments

Comments
 (0)