From 9e1d91ed3408b2f1b2b384e1cf1d25556d480894 Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 9 Jun 2026 18:21:30 +0200 Subject: [PATCH 1/8] fix: Support pressedIconSvg in button group --- src/button-group/icon-toggle-button-item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/button-group/icon-toggle-button-item.tsx b/src/button-group/icon-toggle-button-item.tsx index fcbce964ca..f72888ed6a 100644 --- a/src/button-group/icon-toggle-button-item.tsx +++ b/src/button-group/icon-toggle-button-item.tsx @@ -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} From 941b653b1531ce66a4dc322a546aee4a4e1ddf7a Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 9 Jun 2026 18:25:01 +0200 Subject: [PATCH 2/8] test: Add unit tests for pressedIconSvg in button group icon-toggle-button --- .../__tests__/button-group.test.tsx | 195 ++++++++++++++++++ 1 file changed, 195 insertions(+) diff --git a/src/button-group/__tests__/button-group.test.tsx b/src/button-group/__tests__/button-group.test.tsx index b398ea6209..8e737c8124 100644 --- a/src/button-group/__tests__/button-group.test.tsx +++ b/src/button-group/__tests__/button-group.test.tsx @@ -105,3 +105,198 @@ describe('ButtonGroup Style API', () => { expect(getComputedStyle(itemElement).getPropertyValue(customCssProps.styleFocusRingBorderWidth)).toBe('2px'); }); }); + +describe('ButtonGroup Icon Toggle Button with SVG icons', () => { + test('renders icon-toggle-button with pressedIconSvg when pressed', () => { + const defaultSvg = ( + + + + ); + const pressedSvg = ( + + + + ); + + const wrapper = renderButtonGroup({ + variant: 'icon', + ariaLabel: 'Test', + items: [ + { + type: 'icon-toggle-button', + id: 'test-toggle', + text: 'Toggle Button', + pressed: true, + iconSvg: defaultSvg, + pressedIconSvg: pressedSvg, + }, + ], + }); + + const toggleButton = wrapper.findToggleButtonById('test-toggle'); + expect(toggleButton).toBeTruthy(); + + // Verify the pressed SVG is rendered + const element = toggleButton!.getElement(); + const pressedIconElement = element.querySelector('.pressed-icon'); + expect(pressedIconElement).toBeTruthy(); + }); + + test('renders icon-toggle-button with default iconSvg when not pressed', () => { + const defaultSvg = ( + + + + ); + const pressedSvg = ( + + + + ); + + const wrapper = renderButtonGroup({ + variant: 'icon', + ariaLabel: 'Test', + items: [ + { + type: 'icon-toggle-button', + id: 'test-toggle', + text: 'Toggle Button', + pressed: false, + iconSvg: defaultSvg, + pressedIconSvg: pressedSvg, + }, + ], + }); + + const toggleButton = wrapper.findToggleButtonById('test-toggle'); + expect(toggleButton).toBeTruthy(); + + // Verify the default SVG is rendered when not pressed + const element = toggleButton!.getElement(); + const defaultIconElement = element.querySelector('.default-icon'); + expect(defaultIconElement).toBeTruthy(); + }); + + test('icon-toggle-button with pressedIconUrl shows correct icon when pressed', () => { + const pressedUrl = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8"%3E%3C/circle%3E%3C/svg%3E'; + + const wrapper = renderButtonGroup({ + variant: 'icon', + ariaLabel: 'Test', + items: [ + { + type: 'icon-toggle-button', + id: 'test-toggle-url', + text: 'Toggle with URL', + pressed: true, + iconName: 'star', + pressedIconUrl: pressedUrl, + }, + ], + }); + + const toggleButton = wrapper.findToggleButtonById('test-toggle-url'); + expect(toggleButton).toBeTruthy(); + }); + + test('icon-toggle-button with all icon types prioritizes SVG correctly', () => { + const pressedSvg = ( + + + + ); + + const wrapper = renderButtonGroup({ + variant: 'icon', + ariaLabel: 'Test', + items: [ + { + type: 'icon-toggle-button', + id: 'test-toggle-all', + text: 'Toggle with all icons', + pressed: true, + iconName: 'star', + pressedIconName: 'star-filled', + iconUrl: 'data:image/svg+xml,%3Csvg%3E%3C/svg%3E', + pressedIconUrl: 'data:image/svg+xml,%3Csvg%3E%3C/svg%3E', + iconSvg: ( + + + + ), + pressedIconSvg: pressedSvg, + }, + ], + }); + + const toggleButton = wrapper.findToggleButtonById('test-toggle-all'); + expect(toggleButton).toBeTruthy(); + + // SVG should take precedence when present in pressed state + const element = toggleButton!.getElement(); + const pressedSvgElement = element.querySelector('.pressed-svg-test'); + expect(pressedSvgElement).toBeTruthy(); + }); + + test('icon-toggle-button maintains correct icon on state change', () => { + const { rerender } = render( + + + + ), + pressedIconSvg: ( + + + + ), + }, + ]} + /> + ); + + const container = document.querySelector('.awsui-button-group'); + let iconElement = container?.querySelector('.default-state-icon'); + expect(iconElement).toBeTruthy(); + + // Rerender with pressed state + rerender( + + + + ), + pressedIconSvg: ( + + + + ), + }, + ]} + /> + ); + + iconElement = container?.querySelector('.pressed-state-icon'); + expect(iconElement).toBeTruthy(); + }); +}); From 2a99ed4859825bb8e5916ad157f0e283c595663e Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 9 Jun 2026 18:30:03 +0200 Subject: [PATCH 3/8] Refactor icon-toggle-button tests for clarity --- .../__tests__/button-group.test.tsx | 149 +----------------- 1 file changed, 7 insertions(+), 142 deletions(-) diff --git a/src/button-group/__tests__/button-group.test.tsx b/src/button-group/__tests__/button-group.test.tsx index 8e737c8124..350837b3dd 100644 --- a/src/button-group/__tests__/button-group.test.tsx +++ b/src/button-group/__tests__/button-group.test.tsx @@ -106,141 +106,7 @@ describe('ButtonGroup Style API', () => { }); }); -describe('ButtonGroup Icon Toggle Button with SVG icons', () => { - test('renders icon-toggle-button with pressedIconSvg when pressed', () => { - const defaultSvg = ( - - - - ); - const pressedSvg = ( - - - - ); - - const wrapper = renderButtonGroup({ - variant: 'icon', - ariaLabel: 'Test', - items: [ - { - type: 'icon-toggle-button', - id: 'test-toggle', - text: 'Toggle Button', - pressed: true, - iconSvg: defaultSvg, - pressedIconSvg: pressedSvg, - }, - ], - }); - - const toggleButton = wrapper.findToggleButtonById('test-toggle'); - expect(toggleButton).toBeTruthy(); - - // Verify the pressed SVG is rendered - const element = toggleButton!.getElement(); - const pressedIconElement = element.querySelector('.pressed-icon'); - expect(pressedIconElement).toBeTruthy(); - }); - - test('renders icon-toggle-button with default iconSvg when not pressed', () => { - const defaultSvg = ( - - - - ); - const pressedSvg = ( - - - - ); - - const wrapper = renderButtonGroup({ - variant: 'icon', - ariaLabel: 'Test', - items: [ - { - type: 'icon-toggle-button', - id: 'test-toggle', - text: 'Toggle Button', - pressed: false, - iconSvg: defaultSvg, - pressedIconSvg: pressedSvg, - }, - ], - }); - - const toggleButton = wrapper.findToggleButtonById('test-toggle'); - expect(toggleButton).toBeTruthy(); - - // Verify the default SVG is rendered when not pressed - const element = toggleButton!.getElement(); - const defaultIconElement = element.querySelector('.default-icon'); - expect(defaultIconElement).toBeTruthy(); - }); - - test('icon-toggle-button with pressedIconUrl shows correct icon when pressed', () => { - const pressedUrl = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8"%3E%3C/circle%3E%3C/svg%3E'; - - const wrapper = renderButtonGroup({ - variant: 'icon', - ariaLabel: 'Test', - items: [ - { - type: 'icon-toggle-button', - id: 'test-toggle-url', - text: 'Toggle with URL', - pressed: true, - iconName: 'star', - pressedIconUrl: pressedUrl, - }, - ], - }); - - const toggleButton = wrapper.findToggleButtonById('test-toggle-url'); - expect(toggleButton).toBeTruthy(); - }); - - test('icon-toggle-button with all icon types prioritizes SVG correctly', () => { - const pressedSvg = ( - - - - ); - - const wrapper = renderButtonGroup({ - variant: 'icon', - ariaLabel: 'Test', - items: [ - { - type: 'icon-toggle-button', - id: 'test-toggle-all', - text: 'Toggle with all icons', - pressed: true, - iconName: 'star', - pressedIconName: 'star-filled', - iconUrl: 'data:image/svg+xml,%3Csvg%3E%3C/svg%3E', - pressedIconUrl: 'data:image/svg+xml,%3Csvg%3E%3C/svg%3E', - iconSvg: ( - - - - ), - pressedIconSvg: pressedSvg, - }, - ], - }); - - const toggleButton = wrapper.findToggleButtonById('test-toggle-all'); - expect(toggleButton).toBeTruthy(); - - // SVG should take precedence when present in pressed state - const element = toggleButton!.getElement(); - const pressedSvgElement = element.querySelector('.pressed-svg-test'); - expect(pressedSvgElement).toBeTruthy(); - }); - - test('icon-toggle-button maintains correct icon on state change', () => { +test('icon-toggle-button maintains correct icon on state change', () => { const { rerender } = render( { ]} /> ); - - const container = document.querySelector('.awsui-button-group'); - let iconElement = container?.querySelector('.default-state-icon'); - expect(iconElement).toBeTruthy(); + + 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( @@ -296,7 +162,6 @@ describe('ButtonGroup Icon Toggle Button with SVG icons', () => { /> ); - iconElement = container?.querySelector('.pressed-state-icon'); - expect(iconElement).toBeTruthy(); + expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.default-icon')).toBeFalsy(); + expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.pressed-icon')).toBeTruthy(); }); -}); From 1268310c5e4aa8e96ee0e4ddd7dee880715d9525 Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 9 Jun 2026 18:34:41 +0200 Subject: [PATCH 4/8] fix: Remove extra blank lines to pass linter --- .../__tests__/button-group.test.tsx | 111 +++++++++--------- 1 file changed, 55 insertions(+), 56 deletions(-) diff --git a/src/button-group/__tests__/button-group.test.tsx b/src/button-group/__tests__/button-group.test.tsx index 350837b3dd..a7c2f039a9 100644 --- a/src/button-group/__tests__/button-group.test.tsx +++ b/src/button-group/__tests__/button-group.test.tsx @@ -107,61 +107,60 @@ describe('ButtonGroup Style API', () => { }); test('icon-toggle-button maintains correct icon on state change', () => { - const { rerender } = render( - - - - ), - pressedIconSvg: ( - - - - ), - }, - ]} - /> - ); - - expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.default-icon')).toBeTruthy(); - expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.pressed-icon')).toBeFalsy(); - + const { rerender } = render( + + + + ), + pressedIconSvg: ( + + + + ), + }, + ]} + /> + ); - // Rerender with pressed state - rerender( - - - - ), - pressedIconSvg: ( - - - - ), - }, - ]} - /> - ); + expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.default-icon')).toBeTruthy(); + expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.pressed-icon')).toBeFalsy(); - expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.default-icon')).toBeFalsy(); - expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.pressed-icon')).toBeTruthy(); - }); + // Rerender with pressed state + rerender( + + + + ), + pressedIconSvg: ( + + + + ), + }, + ]} + /> + ); + + expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.default-icon')).toBeFalsy(); + expect(wrapper.findToggleButtonById('test-toggle-state')!.find('.pressed-icon')).toBeTruthy(); +}); From d45e983c396662de10b7f839f7887ce320ad7446 Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 9 Jun 2026 18:35:38 +0200 Subject: [PATCH 5/8] Update SVG icons in button group tests --- src/button-group/__tests__/button-group.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/button-group/__tests__/button-group.test.tsx b/src/button-group/__tests__/button-group.test.tsx index a7c2f039a9..ffbdbf55b1 100644 --- a/src/button-group/__tests__/button-group.test.tsx +++ b/src/button-group/__tests__/button-group.test.tsx @@ -118,12 +118,12 @@ test('icon-toggle-button maintains correct icon on state change', () => { text: 'Toggle State', pressed: false, iconSvg: ( - + ), pressedIconSvg: ( - + ), From d4dddf810fcb52b7f5c9eab1062cf766eb8e7d31 Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 9 Jun 2026 19:03:03 +0200 Subject: [PATCH 6/8] Fix test to include container in render function --- src/button-group/__tests__/button-group.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/button-group/__tests__/button-group.test.tsx b/src/button-group/__tests__/button-group.test.tsx index ffbdbf55b1..1c7ececc19 100644 --- a/src/button-group/__tests__/button-group.test.tsx +++ b/src/button-group/__tests__/button-group.test.tsx @@ -107,7 +107,7 @@ describe('ButtonGroup Style API', () => { }); test('icon-toggle-button maintains correct icon on state change', () => { - const { rerender } = render( + const { rerender, container } = render( { ]} /> ); + 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(); From 68c53f6536e65fc81c380d7cfdb78bdbd16c2b0a Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 9 Jun 2026 19:18:15 +0200 Subject: [PATCH 7/8] Update SVG icons in button group tests --- src/button-group/__tests__/button-group.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/button-group/__tests__/button-group.test.tsx b/src/button-group/__tests__/button-group.test.tsx index 1c7ececc19..e40e03ea5e 100644 --- a/src/button-group/__tests__/button-group.test.tsx +++ b/src/button-group/__tests__/button-group.test.tsx @@ -148,12 +148,12 @@ test('icon-toggle-button maintains correct icon on state change', () => { text: 'Toggle State', pressed: true, iconSvg: ( - + ), pressedIconSvg: ( - + ), From 64fb7eff5e5cf842e6ae279ab8c5993455316d5b Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 9 Jun 2026 19:21:42 +0200 Subject: [PATCH 8/8] Rename 'iconSvg' to 'pressedIconSvg' in runtime drawer --- src/app-layout/runtime-drawer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app-layout/runtime-drawer/index.tsx b/src/app-layout/runtime-drawer/index.tsx index 009d8f2826..ab7c359a62 100644 --- a/src/app-layout/runtime-drawer/index.tsx +++ b/src/app-layout/runtime-drawer/index.tsx @@ -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), }), }; });