Skip to content

Dropdown: standardize node slots on inlineStartNode/inlineEndNode #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lifeiscontent merged 2 commits into from
Jun 16, 2026
Merged

Dropdown: standardize node slots on inlineStartNode/inlineEndNode #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b204ec8
Dropdown: standardize leading/trailing slot names
lifeiscontent Jun 15, 2026
fe14e67
Dropdown: use inlineStartNode/inlineEndNode node slots, not leadingIc…
lifeiscontent Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 41 additions & 24 deletions packages/propel/src/components/dropdown/dropdown.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ export const Status: Story = {
<DropdownItem
key={s.key}
variant="default"
icon={s.icon}
inlineStartNode={s.icon}
label={s.label}
selected={selected === s.key}
closeOnClick={false}
Expand Down Expand Up @@ -263,15 +263,15 @@ export const Labels: Story = {
// rule, so the "Add label" row mounts directly beneath it with no extra line.
<DropdownItem
variant="default"
icon={<Plus className="text-icon-secondary" />}
inlineStartNode={<Plus className="text-icon-secondary" />}
label={`Add label "${trimmed}"`}
closeOnClick={false}
/>
) : null}
{visible.map((l) => (
<DropdownCheckboxItem
key={l.key}
icon={<ColorSwatch className={l.color} />}
inlineStartNode={<ColorSwatch className={l.color} />}
label={l.label}
checked={Boolean(checked[l.key])}
onCheckedChange={(next) => setChecked((c) => ({ ...c, [l.key]: next }))}
Expand Down Expand Up @@ -312,13 +312,22 @@ export const ActionMenu: Story = {
Actions
</DropdownTrigger>
<DropdownContent width="sm">
<DropdownItem variant="default" icon={<Pencil />} label="Edit" />
<DropdownItem variant="default" icon={<Copy />} label="Make a copy" />
<DropdownItem variant="default" icon={<ExternalLink />} label="Open in new tab" />
<DropdownItem variant="with-value" icon={<Link2 />} label="Copy link" value="⌘L" />
<DropdownItem variant="default" inlineStartNode={<Pencil />} label="Edit" />
<DropdownItem variant="default" inlineStartNode={<Copy />} label="Make a copy" />
<DropdownItem
variant="default"
inlineStartNode={<ExternalLink />}
label="Open in new tab"
/>
<DropdownItem
variant="default"
inlineStartNode={<Link2 />}
label="Copy link"
inlineEndNode={<span className="text-12 text-tertiary">⌘L</span>}
/>
<DropdownSeparator />
<DropdownItem
icon={<Trash2 />}
inlineStartNode={<Trash2 />}
label="Archive"
variant="with-description"
description="Only completed or cancelled work items can be archived"
Expand All @@ -327,7 +336,7 @@ export const ActionMenu: Story = {
<DropdownSeparator />
<DropdownItem
variant="default"
icon={<Trash2 className="text-danger-primary" />}
inlineStartNode={<Trash2 className="text-danger-primary" />}
label={<span className="text-danger-primary">Delete</span>}
/>
</DropdownContent>
Expand Down Expand Up @@ -394,7 +403,7 @@ export const Description: Story = {
</DropdownTrigger>
<DropdownContent width="lg">
<DropdownItem
icon={<Lock />}
inlineStartNode={<Lock />}
label="Private"
variant="with-description"
description="Accessible only by invite"
Expand All @@ -403,7 +412,7 @@ export const Description: Story = {
onClick={() => setSelected("private")}
/>
<DropdownItem
icon={<Globe />}
inlineStartNode={<Globe />}
label="Public"
variant="with-description"
description="Anyone in the workspace except Guests can join"
Expand Down Expand Up @@ -448,7 +457,7 @@ export const Assignees: Story = {
{visible.map((a) => (
<DropdownCheckboxItem
key={a.key}
icon={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
inlineStartNode={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
label={a.name}
checked={Boolean(checked[a.key])}
disabled={a.disabled}
Expand Down Expand Up @@ -547,7 +556,7 @@ export const Priority: Story = {
{visible.map((p) => (
<DropdownCheckboxItem
key={p.key}
icon={p.icon}
inlineStartNode={p.icon}
label={p.label}
checked={Boolean(checked[p.key])}
onCheckedChange={(next) => setChecked((c) => ({ ...c, [p.key]: next }))}
Expand Down Expand Up @@ -592,7 +601,7 @@ export const CheckedFillVisible: Story = {
{PRIORITIES.map((p) => (
<DropdownCheckboxItem
key={p.key}
icon={p.icon}
inlineStartNode={p.icon}
label={p.label}
checked={Boolean(checked[p.key])}
onCheckedChange={(next) => setChecked((c) => ({ ...c, [p.key]: next }))}
Expand Down Expand Up @@ -701,12 +710,13 @@ export const Filters: Story = {
<DropdownGroup>
{/* The category heading is itself a menuitem (valid `role="menu"`
child) so its collapse chevron stays interactive without breaking
ARIA. The label is the section title; the chevron is the endIcon. */}
ARIA. The label is the section title; the chevron is the
inlineEndNode. */}
<DropdownItem
variant="default"
label={section.title}
aria-expanded={!isCollapsed}
endIcon={
inlineEndNode={
isCollapsed ? (
<ChevronRight aria-hidden="true" />
) : (
Expand All @@ -720,7 +730,7 @@ export const Filters: Story = {
? visibleItems.map((i) => (
<DropdownCheckboxItem
key={i.key}
icon={i.icon}
inlineStartNode={i.icon}
label={i.label}
checked={Boolean(checked[i.key])}
onCheckedChange={toggle(i.key)}
Expand Down Expand Up @@ -810,7 +820,12 @@ export const EmptyState: Story = {
>
{visible.length > 0 ? (
visible.map((s) => (
<DropdownItem key={s.key} variant="default" icon={s.icon} label={s.label} />
<DropdownItem
key={s.key}
variant="default"
inlineStartNode={s.icon}
label={s.label}
/>
))
) : (
<div className="px-2 py-2 text-13 text-tertiary">No matching results</div>
Expand Down Expand Up @@ -863,7 +878,7 @@ export const Submenu: Story = {
<DropdownSub>
<DropdownSubTrigger
label="Priority"
trailing={
inlineEndNode={
<Badge magnitude="sm" tone="neutral">
5
</Badge>
Expand All @@ -874,7 +889,7 @@ export const Submenu: Story = {
<DropdownItem
key={p.key}
variant="default"
icon={p.icon}
inlineStartNode={p.icon}
label={p.label}
closeOnClick={false}
/>
Expand All @@ -884,7 +899,7 @@ export const Submenu: Story = {
<DropdownSub>
<DropdownSubTrigger
label="State"
trailing={
inlineEndNode={
<Badge magnitude="sm" tone="neutral">
5
</Badge>
Expand All @@ -895,7 +910,7 @@ export const Submenu: Story = {
<DropdownItem
key={s.key}
variant="default"
icon={s.icon}
inlineStartNode={s.icon}
label={s.label}
closeOnClick={false}
/>
Expand All @@ -905,7 +920,7 @@ export const Submenu: Story = {
<DropdownSub>
<DropdownSubTrigger
label="Assignee"
trailing={
inlineEndNode={
<Badge magnitude="sm" tone="neutral">
5
</Badge>
Expand All @@ -916,7 +931,9 @@ export const Submenu: Story = {
<DropdownItem
key={a.key}
variant="default"
icon={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
inlineStartNode={
<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />
}
label={a.name}
closeOnClick={false}
/>
Expand Down
Loading