Skip to content

Commit

Permalink
update playgrounds to use new string-based anchor prop
Browse files Browse the repository at this point in the history
+ CSS variables
  • Loading branch information
RobinMalfait committed Apr 24, 2024
1 parent 3abbad2 commit 642e2a0
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 6 deletions.
4 changes: 2 additions & 2 deletions playgrounds/react/pages/menu/menu-with-transition.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ export default function Home() {
afterLeave={() => console.log('After leave')}
>
<Menu.Items
anchor={{ to: 'bottom start', gap: 'var(--gap)' }}
className="w-[calc(var(--button-width)*2)] divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none [--gap:theme(spacing.2)]"
anchor="bottom start"
className="w-[calc(var(--button-width)*2)] divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none [--anchor-gap:theme(spacing.2)]"
>
<div className="px-4 py-3">
<p className="text-sm leading-5">Signed in as</p>
Expand Down
8 changes: 4 additions & 4 deletions playgrounds/react/pages/popover/popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@ export default function Home() {
<Popover as="div" className="relative">
<Button>Portal</Button>
<Popover.Panel
anchor={{ to: 'bottom start', gap: 4 }}
className="flex w-64 flex-col border-2 border-blue-900 bg-gray-100"
anchor="bottom start"
className="flex w-64 flex-col border-2 border-blue-900 bg-gray-100 [--anchor-gap:theme(spacing.1)]"
>
{items.map((item) => (
<Button key={item}>Portal - {item}</Button>
Expand All @@ -72,9 +72,9 @@ export default function Home() {
<Popover as="div" className="relative">
<Button>Focus in Portal</Button>
<Popover.Panel
anchor={{ to: 'bottom start', gap: 4 }}
focus
className="flex w-64 flex-col border-2 border-blue-900 bg-gray-100"
anchor="bottom start"
className="flex w-64 flex-col border-2 border-blue-900 bg-gray-100 [--anchor-gap:theme(spacing.1)]"
>
{items.map((item) => (
<Button key={item}>Focus in Portal - {item}</Button>
Expand Down

0 comments on commit 642e2a0

Please sign in to comment.