From 642e2a0d7b7d3aacca29ea5e3ef0b58ec4ef70bd Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 24 Apr 2024 22:52:46 +0200
Subject: [PATCH] update playgrounds to use new string-based `anchor` prop

+ CSS variables
---
 playgrounds/react/pages/menu/menu-with-transition.tsx | 4 ++--
 playgrounds/react/pages/popover/popover.tsx           | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/playgrounds/react/pages/menu/menu-with-transition.tsx b/playgrounds/react/pages/menu/menu-with-transition.tsx
index ee4b5b97c8..eadd3219ad 100644
--- a/playgrounds/react/pages/menu/menu-with-transition.tsx
+++ b/playgrounds/react/pages/menu/menu-with-transition.tsx
@@ -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>
diff --git a/playgrounds/react/pages/popover/popover.tsx b/playgrounds/react/pages/popover/popover.tsx
index 868751d822..60fc80deba 100644
--- a/playgrounds/react/pages/popover/popover.tsx
+++ b/playgrounds/react/pages/popover/popover.tsx
@@ -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>
@@ -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>