Skip to content

fix(action-button): show swc-avatar inside swc-action-button #6587

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
rubencarvalho merged 14 commits into from
Aug 7, 2026
Merged

fix(action-button): show swc-avatar inside swc-action-button #6587

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2698b49
docs(avatar): demonstrate avatar inside swc-action-button
rubencarvalho Aug 6, 2026
1f016a7
fix(avatar): vertically center avatar+label wrapper in action button
rubencarvalho Aug 6, 2026
d39a04b
docs(avatar): add xl action button example
rubencarvalho Aug 6, 2026
6a79b38
Merge branch 'main' into rubencarvalho/avatar-action-button-demo
rubencarvalho Aug 6, 2026
8a6a2fe
fix(avatar): scale correctly when host box size is overridden externally
rubencarvalho Aug 6, 2026
63e77ef
Merge remote-tracking branch into avatar-action-button-demo
rubencarvalho Aug 6, 2026
e60ab27
fix(action-button): scale slotted avatar via icon-slot custom property
rubencarvalho Aug 7, 2026
5d6a8aa
docs(avatar): drop redundant size attribute from action-button examples
rubencarvalho Aug 7, 2026
6e98fd9
test(action-button): add VRT coverage for slotted avatar icon scaling
rubencarvalho Aug 7, 2026
49b1dd7
fix(slot-text-controller): ignore comment nodes when detecting label …
rubencarvalho Aug 7, 2026
589015a
refactor(action-button): scope slotted avatar-size var to swc-avatar
rubencarvalho Aug 7, 2026
708e037
test(action-button): cover icon-only avatar across all sizes in globa…
rubencarvalho Aug 7, 2026
62a1510
Merge branch 'main' into rubencarvalho/avatar-action-button-demo
rubencarvalho Aug 7, 2026
5635d69
Merge branch 'main' into rubencarvalho/avatar-action-button-demo
rubencarvalho Aug 7, 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
9 changes: 9 additions & 0 deletions .changeset/fix-action-button-avatar-icon-size.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
'@adobe/spectrum-wc': patch
---

**fix(action-button):** A `<swc-avatar>` slotted into `<swc-action-button>`'s `icon` slot now automatically scales to match the button's icon size.

Previously, Avatar's own `size` attribute controlled its rendered size regardless of the action button's size, since Avatar's `:host([size])` sizing rule won the specificity contest with the icon slot's generic sizing rule for the avatar's _host box_ only — the visible image inside Avatar's shadow root ignored that squeeze entirely and rendered at its own `size`, causing it to overflow. Consumers previously had to manually pair an avatar `size` with the action-button `size` (e.g. `xl` action button with avatar `size="1000"`) to avoid a visual mismatch.

@Rajdeepc Rajdeepc Aug 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs a VRT run.

@rubencarvalho rubencarvalho Aug 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great call! I even added this to the vrt permutations :)

@rubencarvalho rubencarvalho Aug 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm glad that I did because I found another bug!!!!

Lit still leaves its child-part boundary marker, a comment node <!--?lit$…$--> with non-empty data as a direct light-DOM child of <swc-action-button>. With no slot attribute, it lands in the default slot.

Then in slot-text-controller.ts, checkInitialContent() classifies nodes as element-or-text:

if (el.tagName) { … }              // elements
if (this.slotName) return false;   // named slots
return node.textContent ? node.textContent.trim().length > 0 : false;  // ← comment falls here

A comment node has no tagName, so it hits the last branch, and node.textContent returns the comment's data (?lit$…$) → trims to non-empty → hasLabel = true → iconOnly = false.


The icon slot now also sets `--swc-avatar-size` directly (the same way it already sets its own internal icon-size custom properties), which wins over Avatar's own `:host([size])` rule for a slotted avatar specifically because of how shadow-tree custom property cascading resolves rules matching via `::slotted()` against rules from the slotted element's own shadow tree. Avatar's `size` attribute becomes a no-op when slotted into an action button's icon slot; standalone avatar sizing is unaffected.
4 changes: 4 additions & 0 deletions 2nd-gen/packages/swc/components/action-button/action-button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,10 @@ slot[name="icon"]::slotted(*),
slot[name="icon"]::slotted(*) {
color: inherit;
fill: currentcolor;

/* Lets a slotted <swc-avatar> track the icon slot's own size instead of
requiring consumers to pair its size attribute with the button's size. */
--swc-avatar-size: var(--_swc-action-button-icon-size);

@5t3ph 5t3ph Aug 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps make this more explicitly scoped to ::slotted(swc-avatar)

@rubencarvalho rubencarvalho Aug 7, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

applied the recommendation!

}

/* ── Sizes ────────────────────────────────────────── */
Expand Down
2 changes: 2 additions & 0 deletions 2nd-gen/packages/swc/components/avatar/avatar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ A disabled avatar indicates that the entity is not currently active or available

An avatar can be placed inside an action button to create a user-triggered action tied to a specific person or entity.

When slotted into the `icon` slot, the avatar automatically scales to match the action button's own icon size; the avatar's own `size` attribute has no effect in that context.

<Canvas of={AvatarStories.InActionButton} />

## Accessibility
Expand Down
30 changes: 17 additions & 13 deletions 2nd-gen/packages/swc/components/avatar/stories/avatar.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { Avatar } from '@adobe/spectrum-wc/avatar';
import { AVATAR_VALID_SIZES } from '@adobe/spectrum-wc-core/components/avatar/index.js';

import '@adobe/spectrum-wc/components/avatar/swc-avatar.js';
import '@adobe/spectrum-wc/components/action-button/swc-action-button.js';

// ────────────────
// METADATA
Expand Down Expand Up @@ -231,26 +232,29 @@ export const Disabled: Story = {
// ──────────────────────────────

export const InActionButton: Story = {
// TODO: Replace <button> with <swc-action-button> once that component is migrated to 2nd-gen.
render: (args) => html`
<button
type="button"
style="display:inline-flex;align-items:center;gap:8px;padding:4px 12px;cursor:pointer;"
>
<swc-avatar
src=${args.src}
alt=${args.alt}
size=${args.size}
></swc-avatar>
<swc-action-button>
<swc-avatar slot="icon" src=${args.src} alt="" decorative></swc-avatar>
Jane Doe
</button>
</swc-action-button>
<swc-action-button accessible-label="Jane Doe">
<swc-avatar slot="icon" src=${args.src} alt="" decorative></swc-avatar>
</swc-action-button>
<swc-action-button size="xl">
<swc-avatar slot="icon" src=${args.src} alt="" decorative></swc-avatar>
Jane Doe
</swc-action-button>
<swc-action-button size="xl" accessible-label="Jane Doe">
<swc-avatar slot="icon" src=${args.src} alt="" decorative></swc-avatar>
</swc-action-button>
`,
args: {
src: PLACEHOLDER_SRC,
alt: 'Jane Doe',
size: '100',
},
tags: ['behaviors'],
parameters: {
flexLayout: 'row-wrap',
},
};

// ────────────────────────────────
Expand Down
1 change: 1 addition & 0 deletions 2nd-gen/packages/swc/stylesheets/global/global-action-button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@
.swc-ActionButton-icon {
color: inherit;
fill: currentcolor;
--swc-avatar-size: var(--_swc-action-button-icon-size);

@Rajdeepc Rajdeepc Aug 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did this come from the generator or hand generated?

@rubencarvalho rubencarvalho Aug 7, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

global-component styles are auto-generated!

}

.swc-ActionButton--sizeXs {
Expand Down
Loading