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

Changes from 4 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
41 changes: 32 additions & 9 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,48 @@ 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-action-button>
<span
style="display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;"
>
<swc-avatar

@cdransf cdransf Aug 6, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Should these be placed in the icon slot instead? ✨

src=${args.src}
alt=""
decorative
size=${args.size}
></swc-avatar>
Jane Doe
</span>
</swc-action-button>
<swc-action-button accessible-label="Jane Doe">
<swc-avatar
src=${args.src}
alt=${args.alt}
alt=""
decorative
size=${args.size}
></swc-avatar>
Jane Doe
</button>
</swc-action-button>
<swc-action-button size="xl">
<span
style="display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;"
>
<swc-avatar src=${args.src} alt="" decorative size="400"></swc-avatar>
Jane Doe
</span>
</swc-action-button>
<swc-action-button size="xl" accessible-label="Jane Doe">
<swc-avatar src=${args.src} alt="" decorative size="400"></swc-avatar>
</swc-action-button>
`,
args: {
src: PLACEHOLDER_SRC,
alt: 'Jane Doe',
size: '100',
},
tags: ['behaviors'],
parameters: {
flexLayout: 'row-wrap',
},
};

// ────────────────────────────────
Expand Down
Loading