refactor(ui): fold the 36px header/search buttons into IconButton
Completes the IconButton extraction by adding `size` and `radius` props and converting the two remaining outliers that were left out of the first pass: the desktop header logout button (+layout) and the home search submit button (+page), both 36px with the medium radius. IconButton now drives every icon button in the app (except profile/history's, which the shared-HistoryList change removes separately). Defaults stay 32px / small radius, so the four already-converted sites are untouched. Rendered size, radius, and variant match the old markup — no behaviour change, no version bump. This also sets up applying the --tap-min touch floor in one place once the touch-target change lands. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -37,6 +37,23 @@ describe('IconButton', () => {
|
||||
expect(c2.querySelector('button.icon-btn.danger')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('defaults to a 32px square with the small radius', () => {
|
||||
const { container } = render(IconButton, { props: { children: icon } });
|
||||
const btn = container.querySelector('button.icon-btn') as HTMLButtonElement;
|
||||
expect(btn.classList.contains('radius-sm')).toBe(true);
|
||||
expect(btn.style.getPropertyValue('--ib-size')).toBe('32px');
|
||||
});
|
||||
|
||||
it('honours an explicit size and radius (the larger header/search buttons)', () => {
|
||||
const { container } = render(IconButton, {
|
||||
props: { size: 36, radius: 'md', children: icon }
|
||||
});
|
||||
const btn = container.querySelector('button.icon-btn') as HTMLButtonElement;
|
||||
expect(btn.style.getPropertyValue('--ib-size')).toBe('36px');
|
||||
expect(btn.classList.contains('radius-md')).toBe(true);
|
||||
expect(btn.classList.contains('radius-sm')).toBe(false);
|
||||
});
|
||||
|
||||
it('forwards onclick', async () => {
|
||||
const onclick = vi.fn();
|
||||
render(IconButton, { props: { onclick, children: icon } });
|
||||
|
||||
Reference in New Issue
Block a user