update playgrounds to use new string-based anchor prop

+ CSS variables
tailwindlabs · Apr 24, 2024 · 642e2a0 · 642e2a0
1 parent 3abbad2
commit 642e2a0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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>