kurihada/cadence-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): polish core component surfaces

Browse Source
This commit is contained in:
kurihada
2026-03-25 19:49:15 +08:00
parent eccaacece7
commit cc1509d2f6
64 changed files with 2707 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/src/components/command.stories.tsx
+114 -10
View File
@@ -42,7 +42,18 @@ function InlineCommandShowcase() {
<CommandGroup heading={group.heading}>
{group.items.map((item) => (
<CommandItem key={item.value} value={item.value}>
{item.label}
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">{item.label}</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
{item.value === "open-docs"
? "Jump into authoring guidance, slots, and motion references."
: item.value === "go-releases"
? "Open the current release desk and recent launch notes."
: item.value === "publish-update"
? "Queue the current workspace update for approval."
: "Assign the next reviewer without leaving the palette."}
</span>
</span>
<CommandShortcut>{item.shortcut}</CommandShortcut>
</CommandItem>
))}
@@ -77,22 +88,42 @@ function OperationsWorkbenchShowcase() {
<CommandEmpty>No matching actions.</CommandEmpty>
<CommandGroup heading="Recent">
<CommandItem keywords={["launch", "release"]} value="recent-launch-review">
Launch review
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Launch review</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
Reopen the last routed launch brief and approvals queue.
</span>
</span>
<CommandShortcut>R</CommandShortcut>
</CommandItem>
<CommandItem keywords={["blocked", "queue"]} value="recent-blocked-queue">
Blocked queue
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Blocked queue</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
Inspect stalled items, owners, and next unblock steps.
</span>
</span>
<CommandShortcut>B</CommandShortcut>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Suggestions">
<CommandItem keywords={["docs", "stories"]} value="docs-storybook">
Open Storybook docs
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Open Storybook docs</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
Review the live component contract and interaction stories.
</span>
</span>
<CommandShortcut>G D</CommandShortcut>
</CommandItem>
<CommandItem disabled value="compliance-review">
Compliance review locked
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Compliance review locked</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
This action unlocks after policy artifacts finish syncing.
</span>
</span>
<CommandShortcut>Locked</CommandShortcut>
</CommandItem>
</CommandGroup>
@@ -127,18 +158,49 @@ function DialogCommandShowcase() {
<CommandList>
<CommandEmpty>No commands available.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem value="launch-checklist">Launch checklist</CommandItem>
<CommandItem value="rollout-audit">Rollout audit</CommandItem>
<CommandItem value="brand-theme">Brand theme tokens</CommandItem>
<CommandItem value="launch-checklist">
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Launch checklist</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
Open the current milestone handoff and owner checklist.
</span>
</span>
</CommandItem>
<CommandItem value="rollout-audit">
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Rollout audit</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
Review timing, communications, and incident readiness.
</span>
</span>
</CommandItem>
<CommandItem value="brand-theme">
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Brand theme tokens</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
Jump to the token surface that controls tonal palette shifts.
</span>
</span>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="People">
<CommandItem value="jordan-lee">
Jordan Lee
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Jordan Lee</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
Product lead for launch sequencing and review coordination.
</span>
</span>
<CommandShortcut>@</CommandShortcut>
</CommandItem>
<CommandItem value="avery-carter">
Avery Carter
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Avery Carter</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
Owns release notes, docs framing, and approval summaries.
</span>
</span>
<CommandShortcut>@</CommandShortcut>
</CommandItem>
</CommandGroup>
@@ -152,6 +214,16 @@ function LoadingResultsShowcase() {
return (
<Command
className="w-[520px]"
footer={
<div className="flex items-center justify-between gap-3">
<p className="m-0 text-xs text-[var(--color-muted-foreground)]">
Cached suggestions stay visible while the workspace search refreshes.
</p>
<Button size="sm" variant="ghost">
View queue
</Button>
</div>
}
label="Remote workspace search"
loading
loadingMessage="Searching remote workspace actions…"
@@ -159,6 +231,24 @@ function LoadingResultsShowcase() {
<CommandInput placeholder="Search actions from all workspaces" />
<CommandList>
<CommandEmpty>No commands available.</CommandEmpty>
<CommandGroup heading="Cached suggestions">
<CommandItem value="cached-launch-checklist">
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Launch checklist</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
Reopen the previous launch checklist while fresh results stream in.
</span>
</span>
</CommandItem>
<CommandItem value="cached-review-queue">
<span className="grid min-w-0 flex-1 gap-0.5">
<span className="truncate font-medium">Review queue</span>
<span className="text-xs leading-5 text-[var(--color-muted-foreground)]">
Keep the last known reviewer list visible during the remote refresh.
</span>
</span>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
);
@@ -168,6 +258,12 @@ const meta = {
title: "Components/Command",
component: InlineCommandShowcase,
parameters: {
docs: {
description: {
component:
"Command is the system surface for in-app palettes and quick action search. The highlighted row should feel adhesive and spatial, with enough motion to clarify focus and loading state without turning the palette into a busy animation surface."
}
},
layout: "centered"
},
tags: ["autodocs"]
@@ -190,5 +286,13 @@ export const DialogPalette: Story = {
};
export const LoadingResults: Story = {
parameters: {
docs: {
description: {
story:
"Loading should not feel like a hard swap. Keep a soft status band at the top, let cached results dim underneath, and preserve the same highlighted-row motion language."
}
}
},
render: () => <LoadingResultsShowcase />
};