@agentero/design-system 0.22.1 → 0.22.3
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.
|
@@ -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">23 components ok</span><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">23 components ok</span><span class="filter-pill ok" aria-disabled="true">179 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>
|
|
585
|
+
Using <code>react-docgen-typescript</code>. Generation took <strong>2.0s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
@@ -3134,13 +3134,13 @@ label?: ReactNode</code></pre>
|
|
|
3134
3134
|
<div class="badges">
|
|
3135
3135
|
|
|
3136
3136
|
|
|
3137
|
-
<label for="c-9-components-hovercard-stories" class="badge ok as-toggle">
|
|
3137
|
+
<label for="c-9-components-hovercard-stories" class="badge ok as-toggle">7 stories</label>
|
|
3138
3138
|
|
|
3139
3139
|
</div>
|
|
3140
3140
|
</div>
|
|
3141
3141
|
<div class="meta" title="./src/hover-card/hover-card.stories.tsx">components-hovercard · ./src/hover-card/hover-card.stories.tsx</div>
|
|
3142
3142
|
|
|
3143
|
-
<div class="hint">HoverCard reveals rich, sighted-user preview content anchored to a trigger on pointer hover or keyboard focus. Compose it from `Root` / `Trigger` / `Portal` / `Content`.</div>
|
|
3143
|
+
<div class="hint">HoverCard reveals rich, sighted-user preview content anchored to a trigger on pointer hover or keyboard focus. Compose it from `Root` / `Trigger` / `Portal` / `Content`. `Trigger` takes any focusable control through `asChild`; these stories use a `secondary` Button throughout. Radix mirrors open state onto whatever you pass, so the trigger can style itself off `data-state`.</div>
|
|
3144
3144
|
|
|
3145
3145
|
</div>
|
|
3146
3146
|
|
|
@@ -3164,7 +3164,7 @@ label?: ReactNode</code></pre>
|
|
|
3164
3164
|
<div class="row">
|
|
3165
3165
|
<span class="ex-name">Imports</span>
|
|
3166
3166
|
</div>
|
|
3167
|
-
<pre><code>import { Avatar, HoverCard } from "@agentero/design-system";</code></pre>
|
|
3167
|
+
<pre><code>import { Avatar, Button, HoverCard } from "@agentero/design-system";</code></pre>
|
|
3168
3168
|
</div>
|
|
3169
3169
|
|
|
3170
3170
|
|
|
@@ -3177,10 +3177,25 @@ label?: ReactNode</code></pre>
|
|
|
3177
3177
|
<div class="hint">Default preview revealed on hover; hides again on unhover.</div>
|
|
3178
3178
|
<pre><code>const Default = () => <HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3179
3179
|
<HoverCard.Trigger asChild>
|
|
3180
|
-
<
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3180
|
+
<Button variant="secondary">Hover me</Button>
|
|
3181
|
+
</HoverCard.Trigger>
|
|
3182
|
+
<HoverCard.Portal>
|
|
3183
|
+
<HoverCard.Content>
|
|
3184
|
+
<PreviewCard />
|
|
3185
|
+
</HoverCard.Content>
|
|
3186
|
+
</HoverCard.Portal>
|
|
3187
|
+
</HoverCard.Root>;</code></pre>
|
|
3188
|
+
</div>
|
|
3189
|
+
<div class="note ok">
|
|
3190
|
+
<div class="row">
|
|
3191
|
+
<span class="ex-name">Abandoned Hover</span>
|
|
3192
|
+
<span class="badge ok">story ok</span>
|
|
3193
|
+
</div>
|
|
3194
|
+
|
|
3195
|
+
<div class="hint">Brushing the trigger and leaving without ever reaching the card is the most common way a hover card gets dismissed, so the exit reverses the entrance from wherever it got to. Driving it with keyframes instead would restart the exit at full opacity and scale, popping the half-faded card to fully visible on its way out.</div>
|
|
3196
|
+
<pre><code>const AbandonedHover = () => <HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3197
|
+
<HoverCard.Trigger asChild>
|
|
3198
|
+
<Button variant="secondary">Hover me</Button>
|
|
3184
3199
|
</HoverCard.Trigger>
|
|
3185
3200
|
<HoverCard.Portal>
|
|
3186
3201
|
<HoverCard.Content>
|
|
@@ -3198,10 +3213,7 @@ label?: ReactNode</code></pre>
|
|
|
3198
3213
|
<div class="hint">Opens on focus as a supplementary affordance. Note this is not the same as being keyboard-accessible: focus does not move into the card and it closes on blur, so any interactive content inside stays unreachable by keyboard — never put essential actions there.</div>
|
|
3199
3214
|
<pre><code>const OpensOnFocus = () => <HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3200
3215
|
<HoverCard.Trigger asChild>
|
|
3201
|
-
<
|
|
3202
|
-
href="https://agentero.com"
|
|
3203
|
-
className="text-text-default-base-primary underline">@agentero
|
|
3204
|
-
</a>
|
|
3216
|
+
<Button variant="secondary">Focus me</Button>
|
|
3205
3217
|
</HoverCard.Trigger>
|
|
3206
3218
|
<HoverCard.Portal>
|
|
3207
3219
|
<HoverCard.Content>
|
|
@@ -3216,15 +3228,17 @@ label?: ReactNode</code></pre>
|
|
|
3216
3228
|
<span class="badge ok">story ok</span>
|
|
3217
3229
|
</div>
|
|
3218
3230
|
|
|
3219
|
-
|
|
3231
|
+
|
|
3220
3232
|
<pre><code>const Sides = args => (
|
|
3221
|
-
<div className="grid grid-cols-
|
|
3233
|
+
<div className="grid grid-cols-3 grid-rows-3 gap-4">
|
|
3222
3234
|
{(['top', 'right', 'bottom', 'left'] as const).map(side => (
|
|
3223
3235
|
<HoverCard.Root key={side} {...args}>
|
|
3224
3236
|
<HoverCard.Trigger asChild>
|
|
3225
|
-
|
|
3237
|
+
{/* `capitalize` sits on the Button because Preflight resets
|
|
3238
|
+
text-transform on <button>, so it can't be inherited. */}
|
|
3239
|
+
<Button variant="secondary" className={`capitalize ${SIDE_CELL[side]}`}>
|
|
3226
3240
|
{side}
|
|
3227
|
-
</
|
|
3241
|
+
</Button>
|
|
3228
3242
|
</HoverCard.Trigger>
|
|
3229
3243
|
<HoverCard.Portal>
|
|
3230
3244
|
<HoverCard.Content side={side}>
|
|
@@ -3242,37 +3256,36 @@ label?: ReactNode</code></pre>
|
|
|
3242
3256
|
<span class="badge ok">story ok</span>
|
|
3243
3257
|
</div>
|
|
3244
3258
|
|
|
3245
|
-
<div class="hint">The whole point of a HoverCard over a Tooltip: freely laid-out content that may include its own links and actions.
|
|
3259
|
+
<div class="hint">The whole point of a HoverCard over a Tooltip: freely laid-out content that may include its own links and actions. Keep those actions at `secondary` or below — a primary CTA inside a card the keyboard can't reach reads as the main path to something it isn't. The trigger still has to stand on its own.</div>
|
|
3246
3260
|
<pre><code>const RichContent = () => <HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3247
3261
|
<HoverCard.Trigger asChild>
|
|
3248
|
-
<
|
|
3249
|
-
href="https://agentero.com"
|
|
3250
|
-
className="text-text-default-base-primary underline">@agentero
|
|
3251
|
-
</a>
|
|
3262
|
+
<Button variant="secondary">Hover me</Button>
|
|
3252
3263
|
</HoverCard.Trigger>
|
|
3253
3264
|
<HoverCard.Portal>
|
|
3254
|
-
<HoverCard.Content
|
|
3255
|
-
|
|
3265
|
+
<HoverCard.Content>
|
|
3266
|
+
{/* Identity and stats are one unit at gap-2; the action is a
|
|
3267
|
+
separate concern, so it gets mt-2 on top of that for 16px. */}
|
|
3268
|
+
<div className="flex flex-col gap-2">
|
|
3256
3269
|
<div className="flex gap-3">
|
|
3257
|
-
<Avatar fallback="
|
|
3258
|
-
<div className="flex flex-col gap-
|
|
3259
|
-
<p className="font-
|
|
3260
|
-
|
|
3270
|
+
<Avatar fallback="AL" colorize="Ada Lovelace" type="initials" size="lg" />
|
|
3271
|
+
<div className="flex flex-col gap-0.5">
|
|
3272
|
+
<p className="text-base font-semibold text-text-default-base-primary">Ada Lovelace
|
|
3273
|
+
</p>
|
|
3274
|
+
<p className="text-text-default-base-tertiary">Product designer on the design systems team.
|
|
3261
3275
|
</p>
|
|
3262
3276
|
</div>
|
|
3263
3277
|
</div>
|
|
3264
|
-
<div className="flex gap-
|
|
3278
|
+
<div className="flex gap-5 text-text-default-base-secondary">
|
|
3265
3279
|
<span>
|
|
3266
|
-
<span className="font-medium text-text-default-base-primary">128</span>
|
|
3280
|
+
<span className="font-medium text-text-default-base-primary">128</span>followers
|
|
3267
3281
|
</span>
|
|
3268
3282
|
<span>
|
|
3269
|
-
<span className="font-medium text-text-default-base-primary">
|
|
3283
|
+
<span className="font-medium text-text-default-base-primary">24</span>projects
|
|
3270
3284
|
</span>
|
|
3271
3285
|
</div>
|
|
3272
|
-
<
|
|
3273
|
-
href="https://
|
|
3274
|
-
|
|
3275
|
-
</a>
|
|
3286
|
+
<Button variant="secondary" size="sm" className="mt-2" asChild>
|
|
3287
|
+
<a href="https://example.com/ada-lovelace">View profile</a>
|
|
3288
|
+
</Button>
|
|
3276
3289
|
</div>
|
|
3277
3290
|
</HoverCard.Content>
|
|
3278
3291
|
</HoverCard.Portal>
|
|
@@ -3284,13 +3297,10 @@ label?: ReactNode</code></pre>
|
|
|
3284
3297
|
<span class="badge ok">story ok</span>
|
|
3285
3298
|
</div>
|
|
3286
3299
|
|
|
3287
|
-
<div class="hint">An optional `Arrow` points back at the trigger; render it inside `Content`.
|
|
3300
|
+
<div class="hint">An optional `Arrow` points back at the trigger; render it inside `Content`. It carries the card's border down both slopes and leaves its base open, so the card and the point read as one shape on any background.</div>
|
|
3288
3301
|
<pre><code>const WithArrow = () => <HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3289
3302
|
<HoverCard.Trigger asChild>
|
|
3290
|
-
<
|
|
3291
|
-
href="https://agentero.com"
|
|
3292
|
-
className="text-text-default-base-primary underline">@agentero
|
|
3293
|
-
</a>
|
|
3303
|
+
<Button variant="secondary">Hover me</Button>
|
|
3294
3304
|
</HoverCard.Trigger>
|
|
3295
3305
|
<HoverCard.Portal>
|
|
3296
3306
|
<HoverCard.Content>
|
|
@@ -3308,12 +3318,12 @@ label?: ReactNode</code></pre>
|
|
|
3308
3318
|
|
|
3309
3319
|
<div class="hint">`openDelay` / `closeDelay` tune the hover latency. Default is a deliberate `700ms` open so cards don't flash on incidental passes; drop it to `0` for trigger-dense UIs where an instant preview reads as more responsive.</div>
|
|
3310
3320
|
<pre><code>const Delays = () => (
|
|
3311
|
-
|
|
3321
|
+
// Grid rather than flex so both triggers take the wider label's width —
|
|
3322
|
+
// a size difference would read as part of what the delay changes.
|
|
3323
|
+
(<div className="grid grid-cols-2 gap-10">
|
|
3312
3324
|
<HoverCard.Root openDelay={700} closeDelay={300}>
|
|
3313
3325
|
<HoverCard.Trigger asChild>
|
|
3314
|
-
<
|
|
3315
|
-
Default (700ms)
|
|
3316
|
-
</a>
|
|
3326
|
+
<Button variant="secondary">Default (700ms)</Button>
|
|
3317
3327
|
</HoverCard.Trigger>
|
|
3318
3328
|
<HoverCard.Portal>
|
|
3319
3329
|
<HoverCard.Content>
|
|
@@ -3323,9 +3333,7 @@ label?: ReactNode</code></pre>
|
|
|
3323
3333
|
</HoverCard.Root>
|
|
3324
3334
|
<HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3325
3335
|
<HoverCard.Trigger asChild>
|
|
3326
|
-
<
|
|
3327
|
-
Instant (0ms)
|
|
3328
|
-
</a>
|
|
3336
|
+
<Button variant="secondary">Instant (0ms)</Button>
|
|
3329
3337
|
</HoverCard.Trigger>
|
|
3330
3338
|
<HoverCard.Portal>
|
|
3331
3339
|
<HoverCard.Content>
|
|
@@ -3333,7 +3341,7 @@ label?: ReactNode</code></pre>
|
|
|
3333
3341
|
</HoverCard.Content>
|
|
3334
3342
|
</HoverCard.Portal>
|
|
3335
3343
|
</HoverCard.Root>
|
|
3336
|
-
</div>
|
|
3344
|
+
</div>)
|
|
3337
3345
|
);</code></pre>
|
|
3338
3346
|
</div>
|
|
3339
3347
|
</div>
|