@agentero/design-system 0.5.1 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mcp/manifests/components.html +818 -8
- package/mcp/manifests/components.json +1 -1
- package/package.json +11 -1
- package/src/dropdown-menu/dropdown-menu.d.ts +276 -0
- package/src/dropdown-menu/dropdown-menu.js +111 -0
- package/src/dropdown-menu/icons.d.ts +9 -0
- package/src/dropdown-menu/icons.js +13 -0
- package/src/dropdown-menu/index.d.ts +1 -0
- package/src/dropdown-menu/index.js +2 -0
- package/src/toast/icons.d.ts +36 -0
- package/src/toast/icons.js +45 -0
- package/src/toast/index.d.ts +2 -0
- package/src/toast/index.js +2 -0
- package/src/toast/toast.d.ts +324 -0
- package/src/toast/toast.js +163 -0
- package/theme/base.css +89 -0
|
@@ -576,13 +576,13 @@
|
|
|
576
576
|
<header>
|
|
577
577
|
<div class="wrap">
|
|
578
578
|
<h1>Manifest Debugger</h1>
|
|
579
|
-
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">
|
|
579
|
+
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">8 components ok</span><span class="filter-pill ok" aria-disabled="true">97 stories ok</span></div>
|
|
580
580
|
</div>
|
|
581
581
|
</header>
|
|
582
582
|
<main>
|
|
583
583
|
<div class="wrap">
|
|
584
584
|
<div class="note ok" style="margin-bottom: 16px;">
|
|
585
|
-
Using <code>react-docgen-typescript</code>. Generation took <strong>2.
|
|
585
|
+
Using <code>react-docgen-typescript</code>. Generation took <strong>2.1s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
@@ -2122,6 +2122,390 @@ label?: ReactNode</code></pre>
|
|
|
2122
2122
|
|
|
2123
2123
|
</div>
|
|
2124
2124
|
</article>
|
|
2125
|
+
<article
|
|
2126
|
+
class="card
|
|
2127
|
+
no-error
|
|
2128
|
+
no-info
|
|
2129
|
+
no-story-error
|
|
2130
|
+
no-doc-error"
|
|
2131
|
+
role="listitem"
|
|
2132
|
+
aria-label="DropdownMenu.Root">
|
|
2133
|
+
<div class="head">
|
|
2134
|
+
<div class="title">
|
|
2135
|
+
<h2><span class="status-dot dot-ok"></span> DropdownMenu.Root</h2>
|
|
2136
|
+
<div class="badges">
|
|
2137
|
+
|
|
2138
|
+
|
|
2139
|
+
<label for="c-4-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
|
|
2140
|
+
|
|
2141
|
+
</div>
|
|
2142
|
+
</div>
|
|
2143
|
+
<div class="meta" title="./src/dropdown-menu/dropdown-menu.stories.tsx">components-dropdownmenu · ./src/dropdown-menu/dropdown-menu.stories.tsx</div>
|
|
2144
|
+
|
|
2145
|
+
<div class="hint">DropdownMenu is a compound overlay for secondary actions, bulk operations, or navigation shortcuts triggered off a button or icon. Compose it from `Root` / `Trigger` / `Portal` / `Content` and fill the menu with `Item`, `Separator`, `Label`, and — for nested flows — `Sub` / `SubTrigger` / `SubContent`. Built on Radix UI's DropdownMenu primitive, so keyboard navigation, focus trapping, typeahead, and collision detection come for free.</div>
|
|
2146
|
+
|
|
2147
|
+
</div>
|
|
2148
|
+
|
|
2149
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2150
|
+
|
|
2151
|
+
|
|
2152
|
+
<input id="c-4-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2153
|
+
|
|
2154
|
+
|
|
2155
|
+
|
|
2156
|
+
<div class="panels">
|
|
2157
|
+
|
|
2158
|
+
|
|
2159
|
+
|
|
2160
|
+
|
|
2161
|
+
<div class="panel panel-stories">
|
|
2162
|
+
|
|
2163
|
+
|
|
2164
|
+
|
|
2165
|
+
<div class="note ok">
|
|
2166
|
+
<div class="row">
|
|
2167
|
+
<span class="ex-name">Imports</span>
|
|
2168
|
+
</div>
|
|
2169
|
+
<pre><code>import { Button, DropdownMenu } from "@agentero/design-system";</code></pre>
|
|
2170
|
+
</div>
|
|
2171
|
+
|
|
2172
|
+
|
|
2173
|
+
<div class="note ok">
|
|
2174
|
+
<div class="row">
|
|
2175
|
+
<span class="ex-name">Default</span>
|
|
2176
|
+
<span class="badge ok">story ok</span>
|
|
2177
|
+
</div>
|
|
2178
|
+
<div>Basic menu with item rows and a separated destructive action</div>
|
|
2179
|
+
<div class="hint">A minimal DropdownMenu with four `Item`s — edit/duplicate/archive plus a separator before a destructive delete. Use this as the starting point for most overflow menus.</div>
|
|
2180
|
+
<pre><code>const Default = () => (
|
|
2181
|
+
<DropdownMenu.Root>
|
|
2182
|
+
<DropdownMenu.Trigger asChild>
|
|
2183
|
+
<Button size="md" variant="secondary">
|
|
2184
|
+
Click me
|
|
2185
|
+
<IconKeyboardArrowDown />
|
|
2186
|
+
</Button>
|
|
2187
|
+
</DropdownMenu.Trigger>
|
|
2188
|
+
<DropdownMenu.Portal>
|
|
2189
|
+
<DropdownMenu.Content>
|
|
2190
|
+
<DropdownMenu.Item onSelect={() => console.log('Edit clicked')}>Edit</DropdownMenu.Item>
|
|
2191
|
+
<DropdownMenu.Item onSelect={() => console.log('Duplicate clicked')}>
|
|
2192
|
+
Duplicate
|
|
2193
|
+
</DropdownMenu.Item>
|
|
2194
|
+
<DropdownMenu.Item onSelect={() => console.log('Archive clicked')}>
|
|
2195
|
+
Archive
|
|
2196
|
+
</DropdownMenu.Item>
|
|
2197
|
+
<DropdownMenu.Separator />
|
|
2198
|
+
<DropdownMenu.Item onSelect={() => console.log('Delete clicked')}>
|
|
2199
|
+
<span className="text-red-500">Delete</span>
|
|
2200
|
+
</DropdownMenu.Item>
|
|
2201
|
+
</DropdownMenu.Content>
|
|
2202
|
+
</DropdownMenu.Portal>
|
|
2203
|
+
</DropdownMenu.Root>
|
|
2204
|
+
);</code></pre>
|
|
2205
|
+
</div>
|
|
2206
|
+
<div class="note ok">
|
|
2207
|
+
<div class="row">
|
|
2208
|
+
<span class="ex-name">With Groups And Dividers</span>
|
|
2209
|
+
<span class="badge ok">story ok</span>
|
|
2210
|
+
</div>
|
|
2211
|
+
<div>Menu with multiple `Separator`-split groups and a disabled item</div>
|
|
2212
|
+
<div class="hint">Multiple clusters of `Item`s split by `Separator` rules — mirrors an "edit history / clipboard / export" overflow menu. Demonstrates the `disabled` state on a menu row.</div>
|
|
2213
|
+
<pre><code>const WithGroupsAndDividers = () => (
|
|
2214
|
+
<DropdownMenu.Root>
|
|
2215
|
+
<DropdownMenu.Trigger asChild>
|
|
2216
|
+
<Button size="md" variant="secondary">
|
|
2217
|
+
More Options
|
|
2218
|
+
<IconKeyboardArrowDown />
|
|
2219
|
+
</Button>
|
|
2220
|
+
</DropdownMenu.Trigger>
|
|
2221
|
+
<DropdownMenu.Portal>
|
|
2222
|
+
<DropdownMenu.Content>
|
|
2223
|
+
<DropdownMenu.Item onSelect={() => console.log('Undo')}>Undo</DropdownMenu.Item>
|
|
2224
|
+
<DropdownMenu.Item onSelect={() => console.log('Redo')}>Redo</DropdownMenu.Item>
|
|
2225
|
+
<DropdownMenu.Separator />
|
|
2226
|
+
<DropdownMenu.Item onSelect={() => console.log('Copy')}>Copy</DropdownMenu.Item>
|
|
2227
|
+
<DropdownMenu.Item onSelect={() => console.log('Cut')}>Cut</DropdownMenu.Item>
|
|
2228
|
+
<DropdownMenu.Item onSelect={() => console.log('Paste')}>Paste</DropdownMenu.Item>
|
|
2229
|
+
<DropdownMenu.Separator />
|
|
2230
|
+
<DropdownMenu.Item disabled>Print (disabled)</DropdownMenu.Item>
|
|
2231
|
+
<DropdownMenu.Item onSelect={() => console.log('Export')}>Export</DropdownMenu.Item>
|
|
2232
|
+
</DropdownMenu.Content>
|
|
2233
|
+
</DropdownMenu.Portal>
|
|
2234
|
+
</DropdownMenu.Root>
|
|
2235
|
+
);</code></pre>
|
|
2236
|
+
</div>
|
|
2237
|
+
<div class="note ok">
|
|
2238
|
+
<div class="row">
|
|
2239
|
+
<span class="ex-name">With Icons</span>
|
|
2240
|
+
<span class="badge ok">story ok</span>
|
|
2241
|
+
</div>
|
|
2242
|
+
<div>Icon-leading items with a destructive delete row</div>
|
|
2243
|
+
<div class="hint">Menu items with leading icons and a destructive row using the `data-[highlighted]:bg-red-100` + `text-red-500` escape hatch. Use this pattern when a row should read as destructive.</div>
|
|
2244
|
+
<pre><code>const WithIcons = () => (
|
|
2245
|
+
<DropdownMenu.Root>
|
|
2246
|
+
<DropdownMenu.Trigger asChild>
|
|
2247
|
+
<Button size="md" variant="secondary">
|
|
2248
|
+
Actions
|
|
2249
|
+
<IconKeyboardArrowDown />
|
|
2250
|
+
</Button>
|
|
2251
|
+
</DropdownMenu.Trigger>
|
|
2252
|
+
<DropdownMenu.Portal>
|
|
2253
|
+
<DropdownMenu.Content>
|
|
2254
|
+
<DropdownMenu.Item onSelect={() => console.log('Copy')}>
|
|
2255
|
+
<IconContentCopy />
|
|
2256
|
+
Copy
|
|
2257
|
+
</DropdownMenu.Item>
|
|
2258
|
+
<DropdownMenu.Separator />
|
|
2259
|
+
<DropdownMenu.Item
|
|
2260
|
+
onSelect={() => console.log('Delete')}
|
|
2261
|
+
className="data-[highlighted]:bg-red-100">
|
|
2262
|
+
<IconDelete className="[&>path]:fill-red-500" />
|
|
2263
|
+
<span className="text-red-500">Delete</span>
|
|
2264
|
+
</DropdownMenu.Item>
|
|
2265
|
+
</DropdownMenu.Content>
|
|
2266
|
+
</DropdownMenu.Portal>
|
|
2267
|
+
</DropdownMenu.Root>
|
|
2268
|
+
);</code></pre>
|
|
2269
|
+
</div>
|
|
2270
|
+
<div class="note ok">
|
|
2271
|
+
<div class="row">
|
|
2272
|
+
<span class="ex-name">With Group Titles</span>
|
|
2273
|
+
<span class="badge ok">story ok</span>
|
|
2274
|
+
</div>
|
|
2275
|
+
<div>Menu with `Label`-titled sections and a destructive logout row</div>
|
|
2276
|
+
<div class="hint">`Label`-segmented Profile / Settings / Account sections with a destructive Logout row. Use `Label` to name groups that would otherwise be ambiguous from the item text alone.</div>
|
|
2277
|
+
<pre><code>const WithGroupTitles = () => (
|
|
2278
|
+
<DropdownMenu.Root>
|
|
2279
|
+
<DropdownMenu.Trigger asChild>
|
|
2280
|
+
<Button size="md" variant="secondary">
|
|
2281
|
+
Account Menu
|
|
2282
|
+
<IconKeyboardArrowDown />
|
|
2283
|
+
</Button>
|
|
2284
|
+
</DropdownMenu.Trigger>
|
|
2285
|
+
<DropdownMenu.Portal>
|
|
2286
|
+
<DropdownMenu.Content>
|
|
2287
|
+
<DropdownMenu.Label>Profile</DropdownMenu.Label>
|
|
2288
|
+
<DropdownMenu.Item onSelect={() => console.log('View Profile')}>
|
|
2289
|
+
View Profile
|
|
2290
|
+
</DropdownMenu.Item>
|
|
2291
|
+
<DropdownMenu.Item onSelect={() => console.log('Edit Profile')}>
|
|
2292
|
+
Edit Profile
|
|
2293
|
+
</DropdownMenu.Item>
|
|
2294
|
+
<DropdownMenu.Separator />
|
|
2295
|
+
<DropdownMenu.Label>Settings</DropdownMenu.Label>
|
|
2296
|
+
<DropdownMenu.Item onSelect={() => console.log('Preferences')}>
|
|
2297
|
+
Preferences
|
|
2298
|
+
</DropdownMenu.Item>
|
|
2299
|
+
<DropdownMenu.Item onSelect={() => console.log('Privacy')}>Privacy</DropdownMenu.Item>
|
|
2300
|
+
<DropdownMenu.Item onSelect={() => console.log('Notifications')}>
|
|
2301
|
+
Notifications
|
|
2302
|
+
</DropdownMenu.Item>
|
|
2303
|
+
<DropdownMenu.Separator />
|
|
2304
|
+
<DropdownMenu.Label>Account</DropdownMenu.Label>
|
|
2305
|
+
<DropdownMenu.Item onSelect={() => console.log('Billing')}>Billing</DropdownMenu.Item>
|
|
2306
|
+
<DropdownMenu.Item
|
|
2307
|
+
onSelect={() => console.log('Logout')}
|
|
2308
|
+
className="data-[highlighted]:bg-red-100">
|
|
2309
|
+
<span className="text-red-500">Logout</span>
|
|
2310
|
+
</DropdownMenu.Item>
|
|
2311
|
+
</DropdownMenu.Content>
|
|
2312
|
+
</DropdownMenu.Portal>
|
|
2313
|
+
</DropdownMenu.Root>
|
|
2314
|
+
);</code></pre>
|
|
2315
|
+
</div>
|
|
2316
|
+
<div class="note ok">
|
|
2317
|
+
<div class="row">
|
|
2318
|
+
<span class="ex-name">With Submenu</span>
|
|
2319
|
+
<span class="badge ok">story ok</span>
|
|
2320
|
+
</div>
|
|
2321
|
+
<div>Single-level submenus for Share and Move-to flows</div>
|
|
2322
|
+
<div class="hint">One level of nesting: Share and Move-to submenus wired via `Sub` / `SubTrigger` / `SubContent`. Each submenu is portaled independently so it escapes the parent's stacking context.</div>
|
|
2323
|
+
<pre><code>const WithSubmenu = () => (
|
|
2324
|
+
<DropdownMenu.Root>
|
|
2325
|
+
<DropdownMenu.Trigger asChild>
|
|
2326
|
+
<Button size="md" variant="secondary">
|
|
2327
|
+
File Options
|
|
2328
|
+
<IconKeyboardArrowDown />
|
|
2329
|
+
</Button>
|
|
2330
|
+
</DropdownMenu.Trigger>
|
|
2331
|
+
<DropdownMenu.Portal>
|
|
2332
|
+
<DropdownMenu.Content>
|
|
2333
|
+
<DropdownMenu.Item onSelect={() => console.log('New File')}>New File</DropdownMenu.Item>
|
|
2334
|
+
<DropdownMenu.Item onSelect={() => console.log('Open')}>Open</DropdownMenu.Item>
|
|
2335
|
+
<DropdownMenu.Separator />
|
|
2336
|
+
<DropdownMenu.Sub>
|
|
2337
|
+
<DropdownMenu.SubTrigger>
|
|
2338
|
+
<IconIosShare />
|
|
2339
|
+
Share
|
|
2340
|
+
</DropdownMenu.SubTrigger>
|
|
2341
|
+
<DropdownMenu.Portal>
|
|
2342
|
+
<DropdownMenu.SubContent>
|
|
2343
|
+
<DropdownMenu.Item onSelect={() => console.log('Email')}>Email</DropdownMenu.Item>
|
|
2344
|
+
<DropdownMenu.Item onSelect={() => console.log('Slack')}>Slack</DropdownMenu.Item>
|
|
2345
|
+
<DropdownMenu.Item onSelect={() => console.log('Copy Link')}>
|
|
2346
|
+
Copy Link
|
|
2347
|
+
</DropdownMenu.Item>
|
|
2348
|
+
</DropdownMenu.SubContent>
|
|
2349
|
+
</DropdownMenu.Portal>
|
|
2350
|
+
</DropdownMenu.Sub>
|
|
2351
|
+
<DropdownMenu.Sub>
|
|
2352
|
+
<DropdownMenu.SubTrigger>
|
|
2353
|
+
<IconDriveFileMove />
|
|
2354
|
+
Move to
|
|
2355
|
+
</DropdownMenu.SubTrigger>
|
|
2356
|
+
<DropdownMenu.Portal>
|
|
2357
|
+
<DropdownMenu.SubContent>
|
|
2358
|
+
<DropdownMenu.Item onSelect={() => console.log('Archive')}>
|
|
2359
|
+
Archive
|
|
2360
|
+
</DropdownMenu.Item>
|
|
2361
|
+
<DropdownMenu.Item onSelect={() => console.log('Projects')}>
|
|
2362
|
+
Projects
|
|
2363
|
+
</DropdownMenu.Item>
|
|
2364
|
+
<DropdownMenu.Item onSelect={() => console.log('Drafts')}>Drafts</DropdownMenu.Item>
|
|
2365
|
+
</DropdownMenu.SubContent>
|
|
2366
|
+
</DropdownMenu.Portal>
|
|
2367
|
+
</DropdownMenu.Sub>
|
|
2368
|
+
<DropdownMenu.Separator />
|
|
2369
|
+
<DropdownMenu.Item
|
|
2370
|
+
onSelect={() => console.log('Delete')}
|
|
2371
|
+
className="data-[highlighted]:bg-red-100">
|
|
2372
|
+
<IconDelete className="[&>path]:fill-red-500" />
|
|
2373
|
+
<span className="text-red-500">Delete</span>
|
|
2374
|
+
</DropdownMenu.Item>
|
|
2375
|
+
</DropdownMenu.Content>
|
|
2376
|
+
</DropdownMenu.Portal>
|
|
2377
|
+
</DropdownMenu.Root>
|
|
2378
|
+
);</code></pre>
|
|
2379
|
+
</div>
|
|
2380
|
+
<div class="note ok">
|
|
2381
|
+
<div class="row">
|
|
2382
|
+
<span class="ex-name">Nested Submenus</span>
|
|
2383
|
+
<span class="badge ok">story ok</span>
|
|
2384
|
+
</div>
|
|
2385
|
+
<div>Two-level nested submenus inside a parent menu</div>
|
|
2386
|
+
<div class="hint">Two levels of nesting: Organization → Teams → (Engineering, Design). Deeper nesting is rarely a good UX — prefer splitting into separate screens once the tree grows past two levels.</div>
|
|
2387
|
+
<pre><code>const NestedSubmenus = () => (
|
|
2388
|
+
<DropdownMenu.Root>
|
|
2389
|
+
<DropdownMenu.Trigger asChild>
|
|
2390
|
+
<Button size="md" variant="secondary">
|
|
2391
|
+
Organization Menu
|
|
2392
|
+
<IconKeyboardArrowDown />
|
|
2393
|
+
</Button>
|
|
2394
|
+
</DropdownMenu.Trigger>
|
|
2395
|
+
<DropdownMenu.Portal>
|
|
2396
|
+
<DropdownMenu.Content>
|
|
2397
|
+
<DropdownMenu.Label>Organization</DropdownMenu.Label>
|
|
2398
|
+
<DropdownMenu.Item onSelect={() => console.log('Dashboard')}>Dashboard</DropdownMenu.Item>
|
|
2399
|
+
<DropdownMenu.Sub>
|
|
2400
|
+
<DropdownMenu.SubTrigger>
|
|
2401
|
+
<IconPeople />
|
|
2402
|
+
Teams
|
|
2403
|
+
</DropdownMenu.SubTrigger>
|
|
2404
|
+
<DropdownMenu.Portal>
|
|
2405
|
+
<DropdownMenu.SubContent>
|
|
2406
|
+
<DropdownMenu.Item onSelect={() => console.log('View All Teams')}>
|
|
2407
|
+
View All Teams
|
|
2408
|
+
</DropdownMenu.Item>
|
|
2409
|
+
<DropdownMenu.Separator />
|
|
2410
|
+
<DropdownMenu.Sub>
|
|
2411
|
+
<DropdownMenu.SubTrigger>Engineering</DropdownMenu.SubTrigger>
|
|
2412
|
+
<DropdownMenu.Portal>
|
|
2413
|
+
<DropdownMenu.SubContent>
|
|
2414
|
+
<DropdownMenu.Item onSelect={() => console.log('Frontend')}>
|
|
2415
|
+
Frontend
|
|
2416
|
+
</DropdownMenu.Item>
|
|
2417
|
+
<DropdownMenu.Item onSelect={() => console.log('Backend')}>
|
|
2418
|
+
Backend
|
|
2419
|
+
</DropdownMenu.Item>
|
|
2420
|
+
<DropdownMenu.Item onSelect={() => console.log('DevOps')}>
|
|
2421
|
+
DevOps
|
|
2422
|
+
</DropdownMenu.Item>
|
|
2423
|
+
</DropdownMenu.SubContent>
|
|
2424
|
+
</DropdownMenu.Portal>
|
|
2425
|
+
</DropdownMenu.Sub>
|
|
2426
|
+
<DropdownMenu.Sub>
|
|
2427
|
+
<DropdownMenu.SubTrigger>Design</DropdownMenu.SubTrigger>
|
|
2428
|
+
<DropdownMenu.Portal>
|
|
2429
|
+
<DropdownMenu.SubContent>
|
|
2430
|
+
<DropdownMenu.Item onSelect={() => console.log('Product Design')}>
|
|
2431
|
+
Product Design
|
|
2432
|
+
</DropdownMenu.Item>
|
|
2433
|
+
<DropdownMenu.Item onSelect={() => console.log('Brand')}>
|
|
2434
|
+
Brand
|
|
2435
|
+
</DropdownMenu.Item>
|
|
2436
|
+
</DropdownMenu.SubContent>
|
|
2437
|
+
</DropdownMenu.Portal>
|
|
2438
|
+
</DropdownMenu.Sub>
|
|
2439
|
+
<DropdownMenu.Item onSelect={() => console.log('Marketing')}>
|
|
2440
|
+
Marketing
|
|
2441
|
+
</DropdownMenu.Item>
|
|
2442
|
+
</DropdownMenu.SubContent>
|
|
2443
|
+
</DropdownMenu.Portal>
|
|
2444
|
+
</DropdownMenu.Sub>
|
|
2445
|
+
<DropdownMenu.Separator />
|
|
2446
|
+
<DropdownMenu.Item onSelect={() => console.log('Settings')}>Settings</DropdownMenu.Item>
|
|
2447
|
+
</DropdownMenu.Content>
|
|
2448
|
+
</DropdownMenu.Portal>
|
|
2449
|
+
</DropdownMenu.Root>
|
|
2450
|
+
);</code></pre>
|
|
2451
|
+
</div>
|
|
2452
|
+
<div class="note ok">
|
|
2453
|
+
<div class="row">
|
|
2454
|
+
<span class="ex-name">Submenu With Disabled Items</span>
|
|
2455
|
+
<span class="badge ok">story ok</span>
|
|
2456
|
+
</div>
|
|
2457
|
+
<div>Submenu with `disabled` items and a disabled `SubTrigger`</div>
|
|
2458
|
+
<div class="hint">Submenu that contains `disabled` `Item`s alongside a fully-disabled `SubTrigger`. Use `disabled` sparingly — prefer hiding unavailable actions outright unless the user needs to see them and understand why.</div>
|
|
2459
|
+
<pre><code>const SubmenuWithDisabledItems = () => (
|
|
2460
|
+
<DropdownMenu.Root>
|
|
2461
|
+
<DropdownMenu.Trigger asChild>
|
|
2462
|
+
<Button size="md" variant="secondary">
|
|
2463
|
+
Document Actions
|
|
2464
|
+
<IconKeyboardArrowDown />
|
|
2465
|
+
</Button>
|
|
2466
|
+
</DropdownMenu.Trigger>
|
|
2467
|
+
<DropdownMenu.Portal>
|
|
2468
|
+
<DropdownMenu.Content>
|
|
2469
|
+
<DropdownMenu.Item onSelect={() => console.log('View')}>View</DropdownMenu.Item>
|
|
2470
|
+
<DropdownMenu.Item onSelect={() => console.log('Edit')}>Edit</DropdownMenu.Item>
|
|
2471
|
+
<DropdownMenu.Separator />
|
|
2472
|
+
<DropdownMenu.Sub>
|
|
2473
|
+
<DropdownMenu.SubTrigger>
|
|
2474
|
+
<IconContentCopy />
|
|
2475
|
+
Export as
|
|
2476
|
+
</DropdownMenu.SubTrigger>
|
|
2477
|
+
<DropdownMenu.Portal>
|
|
2478
|
+
<DropdownMenu.SubContent>
|
|
2479
|
+
<DropdownMenu.Item onSelect={() => console.log('PDF')}>PDF</DropdownMenu.Item>
|
|
2480
|
+
<DropdownMenu.Item onSelect={() => console.log('Word')}>
|
|
2481
|
+
Word Document
|
|
2482
|
+
</DropdownMenu.Item>
|
|
2483
|
+
<DropdownMenu.Item disabled>Excel (Premium only)</DropdownMenu.Item>
|
|
2484
|
+
<DropdownMenu.Item disabled>PowerPoint (Premium only)</DropdownMenu.Item>
|
|
2485
|
+
</DropdownMenu.SubContent>
|
|
2486
|
+
</DropdownMenu.Portal>
|
|
2487
|
+
</DropdownMenu.Sub>
|
|
2488
|
+
<DropdownMenu.Sub>
|
|
2489
|
+
<DropdownMenu.SubTrigger disabled>
|
|
2490
|
+
<IconIosShare />
|
|
2491
|
+
Share (Sign in required)
|
|
2492
|
+
</DropdownMenu.SubTrigger>
|
|
2493
|
+
<DropdownMenu.Portal>
|
|
2494
|
+
<DropdownMenu.SubContent>
|
|
2495
|
+
<DropdownMenu.Item>Email</DropdownMenu.Item>
|
|
2496
|
+
<DropdownMenu.Item>Link</DropdownMenu.Item>
|
|
2497
|
+
</DropdownMenu.SubContent>
|
|
2498
|
+
</DropdownMenu.Portal>
|
|
2499
|
+
</DropdownMenu.Sub>
|
|
2500
|
+
</DropdownMenu.Content>
|
|
2501
|
+
</DropdownMenu.Portal>
|
|
2502
|
+
</DropdownMenu.Root>
|
|
2503
|
+
);</code></pre>
|
|
2504
|
+
</div>
|
|
2505
|
+
</div>
|
|
2506
|
+
|
|
2507
|
+
</div>
|
|
2508
|
+
</article>
|
|
2125
2509
|
<article
|
|
2126
2510
|
class="card
|
|
2127
2511
|
no-error
|
|
@@ -2134,9 +2518,9 @@ label?: ReactNode</code></pre>
|
|
|
2134
2518
|
<div class="title">
|
|
2135
2519
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
2136
2520
|
<div class="badges">
|
|
2137
|
-
<label for="c-
|
|
2521
|
+
<label for="c-5-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
2138
2522
|
|
|
2139
|
-
<label for="c-
|
|
2523
|
+
<label for="c-5-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
2140
2524
|
|
|
2141
2525
|
</div>
|
|
2142
2526
|
</div>
|
|
@@ -2149,9 +2533,9 @@ label?: ReactNode</code></pre>
|
|
|
2149
2533
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2150
2534
|
|
|
2151
2535
|
|
|
2152
|
-
<input id="c-
|
|
2536
|
+
<input id="c-5-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2153
2537
|
|
|
2154
|
-
<input id="c-
|
|
2538
|
+
<input id="c-5-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
2155
2539
|
|
|
2156
2540
|
<div class="panels">
|
|
2157
2541
|
|
|
@@ -2293,7 +2677,7 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2293
2677
|
<div class="badges">
|
|
2294
2678
|
|
|
2295
2679
|
|
|
2296
|
-
<label for="c-
|
|
2680
|
+
<label for="c-6-design-system-feedback-statusball-stories" class="badge ok as-toggle">12 stories</label>
|
|
2297
2681
|
|
|
2298
2682
|
</div>
|
|
2299
2683
|
</div>
|
|
@@ -2306,7 +2690,7 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2306
2690
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2307
2691
|
|
|
2308
2692
|
|
|
2309
|
-
<input id="c-
|
|
2693
|
+
<input id="c-6-design-system-feedback-statusball-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2310
2694
|
|
|
2311
2695
|
|
|
2312
2696
|
|
|
@@ -2497,6 +2881,432 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2497
2881
|
</div>
|
|
2498
2882
|
</div>
|
|
2499
2883
|
|
|
2884
|
+
</div>
|
|
2885
|
+
</article>
|
|
2886
|
+
<article
|
|
2887
|
+
class="card
|
|
2888
|
+
no-error
|
|
2889
|
+
no-info
|
|
2890
|
+
no-story-error
|
|
2891
|
+
no-doc-error"
|
|
2892
|
+
role="listitem"
|
|
2893
|
+
aria-label="Toast">
|
|
2894
|
+
<div class="head">
|
|
2895
|
+
<div class="title">
|
|
2896
|
+
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
2897
|
+
<div class="badges">
|
|
2898
|
+
<label for="c-7-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
2899
|
+
|
|
2900
|
+
<label for="c-7-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
2901
|
+
|
|
2902
|
+
</div>
|
|
2903
|
+
</div>
|
|
2904
|
+
<div class="meta" title="./src/toast/toast.stories.tsx">components-toast · ./src/toast/toast.stories.tsx</div>
|
|
2905
|
+
|
|
2906
|
+
<div class="hint">Toast renders transient feedback about an outcome — saved, failed, warning, info — without interrupting the user's flow. Mount `<Toast />` once near the app root to register the provider, then call the imperative `toast()` API from anywhere in the tree. Five semantic types (`neutral`, `success`, `error`, `warning`, `info`) × two layouts (`inline`, `expanded`) cover the common feedback patterns.</div>
|
|
2907
|
+
|
|
2908
|
+
</div>
|
|
2909
|
+
|
|
2910
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2911
|
+
|
|
2912
|
+
|
|
2913
|
+
<input id="c-7-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2914
|
+
|
|
2915
|
+
<input id="c-7-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
2916
|
+
|
|
2917
|
+
<div class="panels">
|
|
2918
|
+
|
|
2919
|
+
|
|
2920
|
+
|
|
2921
|
+
<div class="panel panel-props">
|
|
2922
|
+
<div class="note ok">
|
|
2923
|
+
<div class="row">
|
|
2924
|
+
<span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
|
|
2925
|
+
<span class="badge ok">11 prop types</span>
|
|
2926
|
+
</div>
|
|
2927
|
+
<pre><code>Component: src/toast/toast.tsx::Toast</code></pre>
|
|
2928
|
+
<pre><code>Props:</code></pre>
|
|
2929
|
+
<pre><code>/**
|
|
2930
|
+
* Additional className merged onto the sonner `<Toaster>` root.
|
|
2931
|
+
*/
|
|
2932
|
+
className?: string
|
|
2933
|
+
|
|
2934
|
+
/**
|
|
2935
|
+
* Text direction. Sonner forwards this to the rendered toaster root.
|
|
2936
|
+
*/
|
|
2937
|
+
dir?: "auto" | "ltr" | "rtl"
|
|
2938
|
+
|
|
2939
|
+
/**
|
|
2940
|
+
* Default auto-dismiss duration in ms for toasts fired against this provider. Defaults to `5000`.
|
|
2941
|
+
*/
|
|
2942
|
+
duration?: number = 5000
|
|
2943
|
+
|
|
2944
|
+
/**
|
|
2945
|
+
* When `true`, stack expands on hover instead of auto-collapsing.
|
|
2946
|
+
*/
|
|
2947
|
+
expand?: boolean
|
|
2948
|
+
|
|
2949
|
+
/**
|
|
2950
|
+
* Gap between stacked toasts, in pixels.
|
|
2951
|
+
*/
|
|
2952
|
+
gap?: number
|
|
2953
|
+
|
|
2954
|
+
/**
|
|
2955
|
+
* Keyboard shortcut used to focus the toaster.
|
|
2956
|
+
*/
|
|
2957
|
+
hotkey?: string[]
|
|
2958
|
+
|
|
2959
|
+
/**
|
|
2960
|
+
* When `true`, flips light/dark theme on the toaster root.
|
|
2961
|
+
*/
|
|
2962
|
+
invert?: boolean
|
|
2963
|
+
|
|
2964
|
+
/**
|
|
2965
|
+
* Offset from the screen edge, in pixels or as a CSS length.
|
|
2966
|
+
*/
|
|
2967
|
+
offset?: string | number
|
|
2968
|
+
|
|
2969
|
+
/**
|
|
2970
|
+
* Placement of the toaster on the screen. Defaults to `'bottom-right'`.
|
|
2971
|
+
*/
|
|
2972
|
+
position?: ToastPosition = bottom-right
|
|
2973
|
+
|
|
2974
|
+
/**
|
|
2975
|
+
* When `true`, sonner paints colored backgrounds per type (DS uses its own icon tokens by default).
|
|
2976
|
+
*/
|
|
2977
|
+
richColors?: boolean
|
|
2978
|
+
|
|
2979
|
+
/**
|
|
2980
|
+
* Maximum number of toasts rendered at once before earlier ones dismiss.
|
|
2981
|
+
*/
|
|
2982
|
+
visibleToasts?: number</code></pre>
|
|
2983
|
+
</div>
|
|
2984
|
+
</div>
|
|
2985
|
+
|
|
2986
|
+
<div class="panel panel-stories">
|
|
2987
|
+
|
|
2988
|
+
|
|
2989
|
+
|
|
2990
|
+
<div class="note ok">
|
|
2991
|
+
<div class="row">
|
|
2992
|
+
<span class="ex-name">Imports</span>
|
|
2993
|
+
</div>
|
|
2994
|
+
<pre><code>import { Button, Toast } from "@agentero/design-system";</code></pre>
|
|
2995
|
+
</div>
|
|
2996
|
+
|
|
2997
|
+
|
|
2998
|
+
<div class="note ok">
|
|
2999
|
+
<div class="row">
|
|
3000
|
+
<span class="ex-name">Default</span>
|
|
3001
|
+
<span class="badge ok">story ok</span>
|
|
3002
|
+
</div>
|
|
3003
|
+
<div>Default playground for the Toast provider</div>
|
|
3004
|
+
<div class="hint">Args-controlled playground. Click the button to fire a neutral toast; tweak `position` and `duration` from the Controls panel to preview the provider defaults.</div>
|
|
3005
|
+
<pre><code>const Default = () => (
|
|
3006
|
+
<div style={{ minHeight: '240px' }}>
|
|
3007
|
+
<Button variant="secondary" onClick={() => toast('Hello from Toast')}>
|
|
3008
|
+
Show toast
|
|
3009
|
+
</Button>
|
|
3010
|
+
</div>
|
|
3011
|
+
);</code></pre>
|
|
3012
|
+
</div>
|
|
3013
|
+
<div class="note ok">
|
|
3014
|
+
<div class="row">
|
|
3015
|
+
<span class="ex-name">Inline</span>
|
|
3016
|
+
<span class="badge ok">story ok</span>
|
|
3017
|
+
</div>
|
|
3018
|
+
<div>Inline layout across all five semantic types</div>
|
|
3019
|
+
<div class="hint">Inline layout (default). Compact treatment — title with an optional description stacked directly below it. The `type` drives the icon color. Use for short acknowledgments that don't need a colored rail.</div>
|
|
3020
|
+
<pre><code>const Inline = () => (
|
|
3021
|
+
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
|
|
3022
|
+
<Button
|
|
3023
|
+
variant="secondary"
|
|
3024
|
+
onClick={() => toast('Something happened', { description: 'Additional context.' })}>
|
|
3025
|
+
Neutral
|
|
3026
|
+
</Button>
|
|
3027
|
+
<Button
|
|
3028
|
+
variant="secondary"
|
|
3029
|
+
onClick={() => toast.success('Policy saved', { description: 'Your edits are live.' })}>
|
|
3030
|
+
Success
|
|
3031
|
+
</Button>
|
|
3032
|
+
<Button
|
|
3033
|
+
variant="secondary"
|
|
3034
|
+
onClick={() =>
|
|
3035
|
+
toast.error('Failed to save', { description: 'The file could not be processed.' })
|
|
3036
|
+
}>
|
|
3037
|
+
Error
|
|
3038
|
+
</Button>
|
|
3039
|
+
<Button
|
|
3040
|
+
variant="secondary"
|
|
3041
|
+
onClick={() =>
|
|
3042
|
+
toast.warning('License expiring soon', { description: 'Renew before end of month.' })
|
|
3043
|
+
}>
|
|
3044
|
+
Warning
|
|
3045
|
+
</Button>
|
|
3046
|
+
<Button
|
|
3047
|
+
variant="secondary"
|
|
3048
|
+
onClick={() =>
|
|
3049
|
+
toast.info('Sync in progress', { description: 'Please wait while we sync your data.' })
|
|
3050
|
+
}>
|
|
3051
|
+
Info
|
|
3052
|
+
</Button>
|
|
3053
|
+
</div>
|
|
3054
|
+
);</code></pre>
|
|
3055
|
+
</div>
|
|
3056
|
+
<div class="note ok">
|
|
3057
|
+
<div class="row">
|
|
3058
|
+
<span class="ex-name">Expanded</span>
|
|
3059
|
+
<span class="badge ok">story ok</span>
|
|
3060
|
+
</div>
|
|
3061
|
+
<div>Expanded layout across all five semantic types</div>
|
|
3062
|
+
<div class="hint">Expanded layout. Multi-line treatment with a 0.375rem colored left rail that tracks the toast's `type`. Use for feedback that benefits from a description on its own line or a trailing action button.</div>
|
|
3063
|
+
<pre><code>const Expanded = () => (
|
|
3064
|
+
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
|
|
3065
|
+
<Button
|
|
3066
|
+
variant="secondary"
|
|
3067
|
+
onClick={() =>
|
|
3068
|
+
toast('Something happened', {
|
|
3069
|
+
variant: 'expanded',
|
|
3070
|
+
description: 'Additional context for the user.'
|
|
3071
|
+
})
|
|
3072
|
+
}>
|
|
3073
|
+
Neutral
|
|
3074
|
+
</Button>
|
|
3075
|
+
<Button
|
|
3076
|
+
variant="secondary"
|
|
3077
|
+
onClick={() =>
|
|
3078
|
+
toast.success('Policy saved', {
|
|
3079
|
+
variant: 'expanded',
|
|
3080
|
+
description: 'Your changes have been saved successfully.'
|
|
3081
|
+
})
|
|
3082
|
+
}>
|
|
3083
|
+
Success
|
|
3084
|
+
</Button>
|
|
3085
|
+
<Button
|
|
3086
|
+
variant="secondary"
|
|
3087
|
+
onClick={() =>
|
|
3088
|
+
toast.error('Failed to save', {
|
|
3089
|
+
variant: 'expanded',
|
|
3090
|
+
description: 'The file could not be processed.'
|
|
3091
|
+
})
|
|
3092
|
+
}>
|
|
3093
|
+
Error
|
|
3094
|
+
</Button>
|
|
3095
|
+
<Button
|
|
3096
|
+
variant="secondary"
|
|
3097
|
+
onClick={() =>
|
|
3098
|
+
toast.warning('License expiring soon', {
|
|
3099
|
+
variant: 'expanded',
|
|
3100
|
+
description: 'Renew before the end of the month to avoid interruption.'
|
|
3101
|
+
})
|
|
3102
|
+
}>
|
|
3103
|
+
Warning
|
|
3104
|
+
</Button>
|
|
3105
|
+
<Button
|
|
3106
|
+
variant="secondary"
|
|
3107
|
+
onClick={() =>
|
|
3108
|
+
toast.info('Sync in progress', {
|
|
3109
|
+
variant: 'expanded',
|
|
3110
|
+
description: 'Please wait while we sync your data.'
|
|
3111
|
+
})
|
|
3112
|
+
}>
|
|
3113
|
+
Info
|
|
3114
|
+
</Button>
|
|
3115
|
+
</div>
|
|
3116
|
+
);</code></pre>
|
|
3117
|
+
</div>
|
|
3118
|
+
<div class="note ok">
|
|
3119
|
+
<div class="row">
|
|
3120
|
+
<span class="ex-name">With Action Object</span>
|
|
3121
|
+
<span class="badge ok">story ok</span>
|
|
3122
|
+
</div>
|
|
3123
|
+
<div>Toast with a structured action button</div>
|
|
3124
|
+
<div class="hint">Toast with a structured `action` object. Passing `{ label, onClick }` renders the built-in secondary Button; the handler runs and the toast auto-dismisses afterward.</div>
|
|
3125
|
+
<pre><code>const WithActionObject = () => (
|
|
3126
|
+
<Button
|
|
3127
|
+
variant="secondary"
|
|
3128
|
+
onClick={() =>
|
|
3129
|
+
toast.error('Upload failed', {
|
|
3130
|
+
variant: 'expanded',
|
|
3131
|
+
description: 'The file could not be processed.',
|
|
3132
|
+
action: { label: 'Retry', onClick: () => {} }
|
|
3133
|
+
})
|
|
3134
|
+
}>
|
|
3135
|
+
Show toast with action
|
|
3136
|
+
</Button>
|
|
3137
|
+
);</code></pre>
|
|
3138
|
+
</div>
|
|
3139
|
+
<div class="note ok">
|
|
3140
|
+
<div class="row">
|
|
3141
|
+
<span class="ex-name">With Action Node</span>
|
|
3142
|
+
<span class="badge ok">story ok</span>
|
|
3143
|
+
</div>
|
|
3144
|
+
<div>Toast with a custom ReactNode action</div>
|
|
3145
|
+
<div class="hint">Toast with a raw-ReactNode `action`. Pass any JSX to render a custom trailing control — a link, a pair of buttons, etc. — when the default secondary Button doesn't fit.</div>
|
|
3146
|
+
<pre><code>const WithActionNode = () => (
|
|
3147
|
+
<Button
|
|
3148
|
+
variant="secondary"
|
|
3149
|
+
onClick={() =>
|
|
3150
|
+
toast('File uploaded', {
|
|
3151
|
+
description: 'document.pdf is ready.',
|
|
3152
|
+
action: (
|
|
3153
|
+
<Button variant="link" onClick={() => {}}>
|
|
3154
|
+
View file
|
|
3155
|
+
</Button>
|
|
3156
|
+
)
|
|
3157
|
+
})
|
|
3158
|
+
}>
|
|
3159
|
+
Show toast with link action
|
|
3160
|
+
</Button>
|
|
3161
|
+
);</code></pre>
|
|
3162
|
+
</div>
|
|
3163
|
+
<div class="note ok">
|
|
3164
|
+
<div class="row">
|
|
3165
|
+
<span class="ex-name">With Action And Cancel</span>
|
|
3166
|
+
<span class="badge ok">story ok</span>
|
|
3167
|
+
</div>
|
|
3168
|
+
<div>Toast with an action and a cancel control</div>
|
|
3169
|
+
<div class="hint">Toast with both `action` and `cancel`. Cancel renders as a ghost Button next to the action; its handler runs and the toast auto-dismisses.</div>
|
|
3170
|
+
<pre><code>const WithActionAndCancel = () => (
|
|
3171
|
+
<Button
|
|
3172
|
+
variant="secondary"
|
|
3173
|
+
onClick={() =>
|
|
3174
|
+
toast.success('Record archived', {
|
|
3175
|
+
variant: 'expanded',
|
|
3176
|
+
description: 'The record is hidden from the default view.',
|
|
3177
|
+
action: { label: 'Undo', onClick: () => {} },
|
|
3178
|
+
cancel: { label: 'Dismiss', onClick: () => {} }
|
|
3179
|
+
})
|
|
3180
|
+
}>
|
|
3181
|
+
Show toast with action + cancel
|
|
3182
|
+
</Button>
|
|
3183
|
+
);</code></pre>
|
|
3184
|
+
</div>
|
|
3185
|
+
<div class="note ok">
|
|
3186
|
+
<div class="row">
|
|
3187
|
+
<span class="ex-name">Non Dismissible</span>
|
|
3188
|
+
<span class="badge ok">story ok</span>
|
|
3189
|
+
</div>
|
|
3190
|
+
<div>Non-dismissible toast (no close button)</div>
|
|
3191
|
+
<div class="hint">Non-dismissible toast. Setting `dismissible: false` hides the close button; the toast still auto-dismisses when its `duration` elapses, or programmatically via `toast.dismiss(id)`.</div>
|
|
3192
|
+
<pre><code>const NonDismissible = () => (
|
|
3193
|
+
<Button
|
|
3194
|
+
variant="secondary"
|
|
3195
|
+
onClick={() =>
|
|
3196
|
+
toast.info('Sync in progress', {
|
|
3197
|
+
dismissible: false,
|
|
3198
|
+
description: 'Please wait while we sync your data.'
|
|
3199
|
+
})
|
|
3200
|
+
}>
|
|
3201
|
+
Show non-dismissible toast
|
|
3202
|
+
</Button>
|
|
3203
|
+
);</code></pre>
|
|
3204
|
+
</div>
|
|
3205
|
+
<div class="note ok">
|
|
3206
|
+
<div class="row">
|
|
3207
|
+
<span class="ex-name">Long Duration</span>
|
|
3208
|
+
<span class="badge ok">story ok</span>
|
|
3209
|
+
</div>
|
|
3210
|
+
<div>Toast with a custom `duration`</div>
|
|
3211
|
+
<div class="hint">Long-duration toast. `duration` (in ms) overrides the provider default so long-running operations stay visible until they're relevant.</div>
|
|
3212
|
+
<pre><code>const LongDuration = () => (
|
|
3213
|
+
<Button
|
|
3214
|
+
variant="secondary"
|
|
3215
|
+
onClick={() =>
|
|
3216
|
+
toast.info('Uploading documents', {
|
|
3217
|
+
description: 'This may take a moment.',
|
|
3218
|
+
duration: 10_000
|
|
3219
|
+
})
|
|
3220
|
+
}>
|
|
3221
|
+
Show 10s toast
|
|
3222
|
+
</Button>
|
|
3223
|
+
);</code></pre>
|
|
3224
|
+
</div>
|
|
3225
|
+
<div class="note ok">
|
|
3226
|
+
<div class="row">
|
|
3227
|
+
<span class="ex-name">Programmatic Dismiss</span>
|
|
3228
|
+
<span class="badge ok">story ok</span>
|
|
3229
|
+
</div>
|
|
3230
|
+
<div>Dismiss a toast programmatically via its id</div>
|
|
3231
|
+
<div class="hint">Programmatic dismissal. `toast()` returns the toast id, which you can pass to `toast.dismiss(id)` to clear it before its duration elapses.</div>
|
|
3232
|
+
<pre><code>const ProgrammaticDismiss = () => {
|
|
3233
|
+
let toastId: string | number | undefined;
|
|
3234
|
+
return (
|
|
3235
|
+
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
|
3236
|
+
<Button
|
|
3237
|
+
variant="secondary"
|
|
3238
|
+
onClick={() => {
|
|
3239
|
+
toastId = toast.info('Uploading...', { duration: 60_000 });
|
|
3240
|
+
}}>
|
|
3241
|
+
Start
|
|
3242
|
+
</Button>
|
|
3243
|
+
<Button
|
|
3244
|
+
variant="ghost"
|
|
3245
|
+
onClick={() => {
|
|
3246
|
+
if (toastId !== undefined) toast.dismiss(toastId);
|
|
3247
|
+
}}>
|
|
3248
|
+
Dismiss
|
|
3249
|
+
</Button>
|
|
3250
|
+
</div>
|
|
3251
|
+
);
|
|
3252
|
+
};</code></pre>
|
|
3253
|
+
</div>
|
|
3254
|
+
<div class="note ok">
|
|
3255
|
+
<div class="row">
|
|
3256
|
+
<span class="ex-name">With Promise</span>
|
|
3257
|
+
<span class="badge ok">story ok</span>
|
|
3258
|
+
</div>
|
|
3259
|
+
<div>Wire a toast to an async operation via `toast.promise`</div>
|
|
3260
|
+
<div class="hint">`toast.promise` wires a toast to an async operation — loading while the promise is pending, success or error when it settles. Useful for save/submit flows where the outcome feeds back into the same toast.</div>
|
|
3261
|
+
<pre><code>const WithPromise = () => {
|
|
3262
|
+
const fakeFetch = () =>
|
|
3263
|
+
new Promise<string>((resolve, reject) => {
|
|
3264
|
+
window.setTimeout(
|
|
3265
|
+
() => (Math.random() > 0.5 ? resolve('ok') : reject(new globalThis.Error('nope'))),
|
|
3266
|
+
1500
|
|
3267
|
+
);
|
|
3268
|
+
});
|
|
3269
|
+
return (
|
|
3270
|
+
<Button
|
|
3271
|
+
variant="secondary"
|
|
3272
|
+
onClick={() =>
|
|
3273
|
+
toast.promise(fakeFetch(), {
|
|
3274
|
+
loading: 'Saving document…',
|
|
3275
|
+
success: 'Document saved',
|
|
3276
|
+
error: 'Save failed'
|
|
3277
|
+
})
|
|
3278
|
+
}>
|
|
3279
|
+
Run promise
|
|
3280
|
+
</Button>
|
|
3281
|
+
);
|
|
3282
|
+
};</code></pre>
|
|
3283
|
+
</div>
|
|
3284
|
+
<div class="note ok">
|
|
3285
|
+
<div class="row">
|
|
3286
|
+
<span class="ex-name">Custom Icon</span>
|
|
3287
|
+
<span class="badge ok">story ok</span>
|
|
3288
|
+
</div>
|
|
3289
|
+
<div>Override the default type-based icon</div>
|
|
3290
|
+
<div class="hint">Custom `icon` override. Pass any ReactNode as `icon` to replace the type-based default — helpful when the toast reflects a domain-specific action (e.g., a sync icon for a sync-in-progress toast).</div>
|
|
3291
|
+
<pre><code>const CustomIcon = () => (
|
|
3292
|
+
<Button
|
|
3293
|
+
variant="secondary"
|
|
3294
|
+
onClick={() =>
|
|
3295
|
+
toast.success('Sync started', {
|
|
3296
|
+
description: 'Data sync is in progress.',
|
|
3297
|
+
icon: (
|
|
3298
|
+
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden>
|
|
3299
|
+
<path d="M12 4V1L8 5l4 4V6c3.3 0 6 2.7 6 6 0 1-.3 2-.7 2.8l1.5 1.5C19.5 15 20 13.6 20 12c0-4.4-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6 0-1 .3-2 .7-2.8L5.2 7.7C4.5 9 4 10.4 4 12c0 4.4 3.6 8 8 8v3l4-4-4-4v3z" />
|
|
3300
|
+
</svg>
|
|
3301
|
+
)
|
|
3302
|
+
})
|
|
3303
|
+
}>
|
|
3304
|
+
Show toast with custom icon
|
|
3305
|
+
</Button>
|
|
3306
|
+
);</code></pre>
|
|
3307
|
+
</div>
|
|
3308
|
+
</div>
|
|
3309
|
+
|
|
2500
3310
|
</div>
|
|
2501
3311
|
</article>
|
|
2502
3312
|
</div>
|