Skip to content

fix: Support pressedIconSvg in button group #4595

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
just-boris merged 8 commits into from
Jun 10, 2026
+62 −2
Merged

fix: Support pressedIconSvg in button group #4595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9e1d91e
fix: Support pressedIconSvg in button group
just-boris Jun 9, 2026
941b653
test: Add unit tests for pressedIconSvg in button group icon-toggle-b…
just-boris Jun 9, 2026
2a99ed4
Refactor icon-toggle-button tests for clarity
just-boris Jun 9, 2026
1268310
fix: Remove extra blank lines to pass linter
just-boris Jun 9, 2026
d45e983
Update SVG icons in button group tests
just-boris Jun 9, 2026
d4dddf8
Fix test to include container in render function
just-boris Jun 9, 2026
68c53f6
Update SVG icons in button group tests
just-boris Jun 9, 2026
64fb7ef
Rename 'iconSvg' to 'pressedIconSvg' in runtime drawer
just-boris Jun 9, 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
2 changes: 1 addition & 1 deletion src/app-layout/runtime-drawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ function mapRuntimeHeaderActionsToHeaderActions(
// eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type
...('pressedIconSvg' in runtimeHeaderAction &&
runtimeHeaderAction.pressedIconSvg && {
iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),
pressedIconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),

@just-boris just-boris Jun 9, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This is funny

There is an existing test on pressed icon state, but because of a bug here, it incorrectly propagated pressedIconSvg as a normal iconSvg, making the test false positive

All fixed now

}),
};
});
Expand Down
60 changes: 60 additions & 0 deletions src/button-group/__tests__/button-group.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,3 +105,63 @@ describe('ButtonGroup Style API', () => {
expect(getComputedStyle(itemElement).getPropertyValue(customCssProps.styleFocusRingBorderWidth)).toBe('2px');
});
});

test('icon-toggle-button maintains correct icon on state change', () => {
const { rerender, container } = render(
<ButtonGroup
variant="icon"
ariaLabel="Test"
items={[
{
type: 'icon-toggle-button',
id: 'test-toggle-state',
text: 'Toggle State',
pressed: false,
iconSvg: (
<svg className="default-icon" focusable="false" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="7" />
</svg>
),
pressedIconSvg: (
<svg className="pressed-icon" focusable="false" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="8" fill="currentColor" />
</svg>
),
},
]}
/>
);
const wrapper = createWrapper(container).findButtonGroup()!;

expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.default-icon')).toBeTruthy();
expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.pressed-icon')).toBeFalsy();

// Rerender with pressed state
rerender(
<ButtonGroup
variant="icon"
ariaLabel="Test"
items={[
{
type: 'icon-toggle-button',
id: 'test-toggle-state',
text: 'Toggle State',
pressed: true,
iconSvg: (
<svg className="default-icon" focusable="false" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="7" />
</svg>
),
pressedIconSvg: (
<svg className="pressed-icon" focusable="false" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="8" fill="currentColor" />
</svg>
),
},
]}
/>
);

expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.default-icon')).toBeFalsy();
expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.pressed-icon')).toBeTruthy();
});
2 changes: 1 addition & 1 deletion src/button-group/icon-toggle-button-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const IconToggleButtonItem = forwardRef(
iconSvg={item.iconSvg}
pressedIconName={hasIcon ? item.pressedIconName : 'close'}
pressedIconUrl={item.pressedIconUrl}
pressedIconSvg={item.pressedIconUrl}
pressedIconSvg={item.pressedIconSvg}
ariaLabel={item.text}
onChange={event => fireCancelableEvent(onItemClick, { id: item.id, pressed: event.detail.pressed })}
ref={ref}
Expand Down
Loading