@tamagui/demos 2.0.0-1768427228811 → 2.0.0-1768530912818

package/src/MenuDemo.tsx

@@ -1,8 +1,15 @@
-import { styled } from '@tamagui/core'
-import { Backpack, Calendar, Check, ChevronRight } from '@tamagui/lucide-icons'
+import {
+  Backpack,
+  Calendar,
+  Check,
+  ChevronRight,
+  FilePlus,
+  Trash2,
+  RefreshCw,
+} from '@tamagui/lucide-icons'
 import { Menu } from '@tamagui/menu'
 import React from 'react'
-import { Button } from 'tamagui'
+import { Button, useIsTouchDevice } from 'tamagui'
 
 /**
  * Menu Demo using Tamagui Menu component.
@@ -14,27 +21,11 @@ import { Button } from 'tamagui'
  * Note: you'll want to use createMenu() to customize further.
  */
 
-const Item = styled(Menu.Item, {
-  py: 4,
-
-  hoverStyle: {
-    bg: '$color2',
-  },
-  pressStyle: {
-    bg: '$color3',
-  },
-})
-
-const ItemTitle = styled(Menu.ItemTitle, {
-  color: '$color11',
-})
-
-Item.displayName = 'Item'
-ItemTitle.displayName = 'ItemTitle'
-
 export function MenuDemo() {
   const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
   const [native, setNative] = React.useState(true)
+  const [subMenuOpen, setSubMenuOpen] = React.useState(false)
+  const isTouchDevice = useIsTouchDevice()
 
   // Note: `item` is the Event on web, undefined on native
   const onSelect = (item) => {
@@ -43,115 +34,166 @@ export function MenuDemo() {
 
   return (
     <>
-      <Menu
-        offset={{
-          crossAxis: 25,
-        }}
-        allowFlip
-        placement="bottom-start"
-      >
+      <Menu allowFlip placement="bottom-start" offset={8}>
         <Menu.Trigger asChild>
-          <Button rounded="$10" icon={Backpack} scaleIcon={1.2} />
+          <Button size="$3" circular icon={Backpack} scaleIcon={1.2} />
         </Menu.Trigger>
 
         <Menu.Portal zIndex={100}>
           <Menu.Content
-            px={0}
+            p="$1.5"
+            minW={180}
             borderWidth={1}
-            items="flex-start"
             borderColor="$borderColor"
-            enterStyle={{ y: -10, opacity: 0 }}
-            exitStyle={{ y: -10, opacity: 0 }}
-            transition={[
-              'quicker',
-              {
-                opacity: {
-                  overshootClamping: true,
-                },
-              },
-            ]}
+            transformOrigin="left top"
+            enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
+            exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
+            transition="menu"
+            elevation="$3"
           >
-            <Menu.Item onSelect={onSelect} key="about-notes">
+            <Menu.Arrow size="$4" borderWidth={1} borderColor="$borderColor" />
+
+            <Menu.Item
+              onSelect={onSelect}
+              key="about-notes"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
+            >
               <Menu.ItemTitle>About Notes</Menu.ItemTitle>
             </Menu.Item>
 
             <Menu.Separator />
 
-            <Menu.Group backgroundColor="transparent">
-              <Menu.Item onSelect={onSelect} key="settings">
-                <Menu.ItemTitle>Settings</Menu.ItemTitle>
-              </Menu.Item>
-              <Menu.Item
-                onSelect={onSelect}
-                key="accounts"
-                justify="space-between"
-                // when title is nested inside a React element then you need to use `textValue`
-                textValue="Calendar"
+            <Menu.Item
+              onSelect={onSelect}
+              key="settings"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
+            >
+              <Menu.ItemTitle>Settings</Menu.ItemTitle>
+            </Menu.Item>
+            <Menu.Item
+              onSelect={onSelect}
+              key="accounts"
+              justify="space-between"
+              // when title is nested inside a React element then you need to use `textValue`
+              textValue="Calendar"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
+            >
+              <Menu.ItemTitle>Calendar</Menu.ItemTitle>
+              <Menu.ItemIcon
+                androidIconName="ic_menu_today"
+                ios={{
+                  name: 'calendar',
+                  hierarchicalColor: '#000',
+                  pointSize: 20,
+                }}
               >
-                <Menu.ItemTitle>Calendar</Menu.ItemTitle>
-                <Menu.ItemIcon
-                  androidIconName="ic_menu_today"
-                  ios={{
-                    name: 'calendar',
-                    hierarchicalColor: '#000',
-                    pointSize: 20,
-                  }}
-                >
-                  <Calendar color="gray" size={14} />
-                </Menu.ItemIcon>
-              </Menu.Item>
-            </Menu.Group>
+                <Calendar color="gray" size={14} />
+              </Menu.ItemIcon>
+            </Menu.Item>
 
             <Menu.Separator />
 
-            <Menu.Group backgroundColor="transparent">
-              <Menu.Item onSelect={onSelect} key="close-notes" disabled>
-                <Menu.ItemTitle color="gray">locked notes</Menu.ItemTitle>
-              </Menu.Item>
-              <Menu.Item onSelect={onSelect} destructive key="delete-all">
-                <Menu.ItemTitle color="red">Delete all</Menu.ItemTitle>
-              </Menu.Item>
-            </Menu.Group>
+            <Menu.Item
+              onSelect={onSelect}
+              key="close-notes"
+              disabled
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
+            >
+              <Menu.ItemTitle color="gray">Locked Notes</Menu.ItemTitle>
+            </Menu.Item>
+            <Menu.Item
+              onSelect={onSelect}
+              destructive
+              key="delete-all"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
+            >
+              <Menu.ItemTitle color="red">Delete all</Menu.ItemTitle>
+            </Menu.Item>
 
             <Menu.Separator />
 
-            {/* Submenu */}
-            <Menu.Sub placement="right-start">
+            <Menu.Sub
+              open={subMenuOpen}
+              placement={isTouchDevice ? 'bottom' : 'right-start'}
+              onOpenChange={setSubMenuOpen}
+            >
               <Menu.SubTrigger
                 justify="space-between"
                 key="actions-trigger"
                 textValue="Actions"
+                style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                hoverStyle={{ bg: '$backgroundHover' }}
               >
-                <>
-                  <Menu.ItemTitle>Actions</Menu.ItemTitle>
-                  <ChevronRight size="$1" />
-                </>
+                <Menu.ItemTitle>Actions</Menu.ItemTitle>
+                <ChevronRight size={12} color="$color10" />
               </Menu.SubTrigger>
 
               <Menu.Portal zIndex={200}>
                 <Menu.SubContent
-                  enterStyle={{ y: -10, opacity: 0 }}
-                  exitStyle={{ y: -10, opacity: 0 }}
-                  transition={[
-                    'quicker',
-                    {
-                      opacity: {
-                        overshootClamping: true,
-                      },
-                    },
-                  ]}
-                  px={0}
+                  enterStyle={{ scale: 0.9, opacity: 0, x: -5 }}
+                  exitStyle={{ scale: 0.95, opacity: 0, x: -3 }}
+                  transition="menu"
+                  transformOrigin="left top"
+                  elevation="$3"
+                  minW={160}
+                  bg="$background"
+                  p="$1.5"
+                  borderWidth={1}
+                  borderColor="$borderColor"
                 >
-                  <Menu.Label fontSize={'$1'}>Note settings</Menu.Label>
-                  <Item onSelect={onSelect} key="create-note" textValue="Create note">
-                    <ItemTitle>Create note</ItemTitle>
-                  </Item>
-                  <Item onSelect={onSelect} key="delete-all" textValue="Create note">
-                    <ItemTitle>Delete all notes</ItemTitle>
-                  </Item>
-                  <Item onSelect={onSelect} key="sync-all" textValue="Sync notes">
-                    <ItemTitle>Sync notes</ItemTitle>
-                  </Item>
+                  <Menu.Label
+                    color="$color10"
+                    fontWeight="400"
+                    fontSize={14}
+                    alignSelf="flex-start"
+                    style={{ paddingHorizontal: 8, paddingVertical: 5 }}
+                  >
+                    Note settings
+                  </Menu.Label>
+                  <Menu.Item
+                    onSelect={onSelect}
+                    key="create-note"
+                    textValue="Create note"
+                    justify="space-between"
+                    style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                    hoverStyle={{ bg: '$backgroundHover' }}
+                  >
+                    <Menu.ItemTitle>Create note</Menu.ItemTitle>
+                    <Menu.ItemIcon>
+                      <FilePlus size={14} color="$color10" />
+                    </Menu.ItemIcon>
+                  </Menu.Item>
+                  <Menu.Item
+                    onSelect={onSelect}
+                    key="delete-all"
+                    textValue="Delete all notes"
+                    justify="space-between"
+                    style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                    hoverStyle={{ bg: '$backgroundHover' }}
+                  >
+                    <Menu.ItemTitle>Delete all notes</Menu.ItemTitle>
+                    <Menu.ItemIcon>
+                      <Trash2 size={14} color="$color10" />
+                    </Menu.ItemIcon>
+                  </Menu.Item>
+                  <Menu.Item
+                    onSelect={onSelect}
+                    key="sync-all"
+                    textValue="Sync notes"
+                    justify="space-between"
+                    style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                    hoverStyle={{ bg: '$backgroundHover' }}
+                  >
+                    <Menu.ItemTitle>Sync notes</Menu.ItemTitle>
+                    <Menu.ItemIcon>
+                      <RefreshCw size={14} color="$color10" />
+                    </Menu.ItemIcon>
+                  </Menu.Item>
                 </Menu.SubContent>
               </Menu.Portal>
             </Menu.Sub>
@@ -162,26 +204,28 @@ export function MenuDemo() {
               key="show-hidden"
               checked={bookmarksChecked}
               onCheckedChange={setBookmarksChecked}
-              gap={'$2'}
+              justify="space-between"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
             >
               <Menu.ItemTitle>Mark as read</Menu.ItemTitle>
               <Menu.ItemIndicator>
-                <Check size="$1" />
+                <Check size={12} color="$color10" />
               </Menu.ItemIndicator>
             </Menu.CheckboxItem>
             <Menu.CheckboxItem
               key="show-other-notes"
               checked={native}
               onCheckedChange={setNative}
-              gap={'$2'}
+              justify="space-between"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
             >
               <Menu.ItemTitle>Enable Native</Menu.ItemTitle>
               <Menu.ItemIndicator>
-                <Check size="$1" />
+                <Check size={12} color="$color10" />
               </Menu.ItemIndicator>
             </Menu.CheckboxItem>
-
-            <Menu.Arrow size={'$2'} />
           </Menu.Content>
         </Menu.Portal>
       </Menu>

package/src/ToastDemo.tsx

@@ -30,11 +30,11 @@ const CurrentToast = () => {
       key={currentToast.id}
       duration={currentToast.duration}
       viewportName={currentToast.viewportName}
-      enterStyle={{ opacity: 0, scale: 0.95, y: 50 }}
-      exitStyle={{ opacity: 0, scale: 0.95, y: 50 }}
+      enterStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      exitStyle={{ opacity: 0, scale: 0.95, y: -80 }}
       opacity={1}
       scale={1}
-      y={0}
+      y={-50}
       transition="quicker"
       bg="$color2"
       boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"

package/src/tamagui.config.ts

@@ -1,7 +1,10 @@
 import { createTamagui } from 'tamagui'
-import { config } from '@tamagui/tamagui-dev-config'
+import { config, animationsMotion } from '@tamagui/tamagui-dev-config'
 
-const tamaConf = createTamagui(config)
+const tamaConf = createTamagui({
+  ...config,
+  animations: animationsMotion,
+})
 
 export type Conf = typeof tamaConf