docs(ui): expand bilingual component guides

2026-09-21 17:27:45 +08:00
parent fb985edb20
commit 4c61e79d0d
22 changed files with 1636 additions and 192 deletions
@@ -0,0 +1,66 @@
+---
+title: Anchored account menu
+description: Compose an account menu with Popover's continuous tail, scroll viewport, and Base UI render prop.
+order: 31
+toc:
+  - id: example
+    title: Example
+  - id: why-these-props
+    title: Why these props
+  - id: accessibility
+    title: Accessibility
+---
+
+## Example {#example}
+
+```tsx
+import { Avatar, AvatarFallback } from "@workspace/ui/components/avatar"
+import { Button } from "@workspace/ui/components/button"
+import { SettingsIcon } from "@workspace/ui/components/icon"
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@workspace/ui/components/popover"
+
+export function AccountMenu() {
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button variant="ghost" size="icon" aria-label="Account menu" />
+        }
+      >
+        <Avatar>
+          <AvatarFallback>JF</AvatarFallback>
+        </Avatar>
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="end"
+        side="bottom"
+        showArrow={{ cornerRadius: "2xl", tailSize: "sm" }}
+        className="w-80 gap-0 p-0"
+        viewportClassName="max-h-[min(28rem,var(--available-height))] p-4"
+      >
+        <PopoverTitle>Jaydon Frankie</PopoverTitle>
+        <PopoverDescription>demo@minimals.cc</PopoverDescription>
+        <Button variant="ghost" className="mt-4 w-full justify-start">
+          <SettingsIcon />
+          Appearance
+        </Button>
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+## Why these props {#why-these-props}
+
+`align="end"` aligns the logical end of the panel and trigger, adapting automatically in RTL. `showArrow` enables the local continuous tail. The outer `className` styles the whole surface while `viewportClassName` styles its scrolling region, allowing a long menu to scroll without clipping the tail.
+
+## Accessibility {#accessibility}
+
+Provide an `aria-label` when the trigger button contains only an icon or avatar. Use `PopoverTitle` and `PopoverDescription` in the panel, and let the Base UI Root own dismissal and focus return. If the content is semantically a set of choices or commands, use DropdownMenu or Command rather than assigning a menu role manually.