fix(react): fix incorrect icon size for IconButton[large] (#1655)

packages/react/src/components/IconButton/screenshots.e2e.tsx

@@ -114,3 +114,143 @@ test('should have screenshot for IconButton[variant="error"]', async ({
   await setTheme(page, 'dark');
   await expect(component).toHaveScreenshot('dark--iconbutton[variant=error]');
 });
+
+test('should have screenshot for IconButton[variant="secondary"][large]', async ({
+  mount,
+  page
+}) => {
+  await page.addStyleTag({
+    // we don't want to capture the visibility of tooltips here, just the icon button itself
+    content: `.Tooltip { visibility: hidden !important }`
+  });
+  const component = await mount(
+    <div>
+      <IconButton icon="pencil" label="IconButton" large />
+      <IconButton icon="pencil" label="Hover" large />
+      <IconButton icon="pencil" label="Focus" large />
+      <IconButton icon="pencil" label="Active" large />
+      <IconButton icon="pencil" label="Disabled" disabled large />
+    </div>
+  );
+
+  await component.getByRole('button', { name: 'Hover' }).hover();
+  setActive(await component.getByLabel('Active'));
+  await component.getByRole('button', { name: 'Focus' }).focus();
+
+  await expect(component).toHaveScreenshot(
+    'iconbutton[variant=secondary][large]'
+  );
+  await setTheme(page, 'dark');
+  await expect(component).toHaveScreenshot(
+    'dark--iconbutton[variant=secondary][large]'
+  );
+});
+
+test('should have screenshot for IconButton[variant="primary"][large]', async ({
+  mount,
+  page
+}) => {
+  await page.addStyleTag({
+    // we don't want to capture the visibility of tooltips here, just the icon button itself
+    content: `.Tooltip { visibility: hidden !important }`
+  });
+  const component = await mount(
+    <div>
+      <IconButton icon="pencil" label="IconButton" variant="primary" large />
+      <IconButton icon="pencil" label="Hover" variant="primary" large />
+      <IconButton icon="pencil" label="Focus" variant="primary" large />
+      <IconButton icon="pencil" label="Active" variant="primary" large />
+      <IconButton
+        icon="pencil"
+        label="Disabled"
+        variant="primary"
+        disabled
+        large
+      />
+    </div>
+  );
+
+  await component.getByRole('button', { name: 'Hover' }).hover();
+  setActive(await component.getByLabel('Active'));
+  await component.getByRole('button', { name: 'Focus' }).focus();
+
+  await expect(component).toHaveScreenshot(
+    'iconbutton[variant=primary][large]'
+  );
+  await setTheme(page, 'dark');
+  await expect(component).toHaveScreenshot(
+    'dark--iconbutton[variant=primary][large]'
+  );
+});
+
+test('should have screenshot for IconButton[variant="tertiary"][large]', async ({
+  mount,
+  page
+}) => {
+  await page.addStyleTag({
+    // we don't want to capture the visibility of tooltips here, just the icon button itself
+    content: `.Tooltip { visibility: hidden !important }`
+  });
+  const component = await mount(
+    <div>
+      <IconButton icon="pencil" label="IconButton" variant="tertiary" large />
+      <IconButton icon="pencil" label="Hover" variant="tertiary" large />
+      <IconButton icon="pencil" label="Focus" variant="tertiary" large />
+      <IconButton icon="pencil" label="Active" variant="tertiary" large />
+      <IconButton
+        icon="pencil"
+        label="Disabled"
+        disabled
+        variant="tertiary"
+        large
+      />
+    </div>
+  );
+
+  await component.getByRole('button', { name: 'Hover' }).hover();
+  setActive(await component.getByLabel('Active'));
+  await component.getByRole('button', { name: 'Focus' }).focus();
+
+  await expect(component).toHaveScreenshot(
+    'iconbutton[variant=tertiary][large]'
+  );
+  await setTheme(page, 'dark');
+  await expect(component).toHaveScreenshot(
+    'dark--iconbutton[variant=tertiary][large]'
+  );
+});
+
+test('should have screenshot for IconButton[variant="error"][large]', async ({
+  mount,
+  page
+}) => {
+  await page.addStyleTag({
+    // we don't want to capture the visibility of tooltips here, just the icon button itself
+    content: `.Tooltip { visibility: hidden !important }`
+  });
+  const component = await mount(
+    <div>
+      <IconButton icon="pencil" label="IconButton" variant="error" large />
+      <IconButton icon="pencil" label="Hover" variant="error" large />
+      <IconButton icon="pencil" label="Focus" variant="error" large />
+      <IconButton icon="pencil" label="Active" variant="error" large />
+      <IconButton
+        icon="pencil"
+        label="Disabled"
+        variant="error"
+        disabled
+        large
+      />
+    </div>
+  );
+
+  await component.getByRole('button', { name: 'Hover' }).hover();
+  setActive(await component.getByLabel('Active'));
+  await component.getByRole('button', { name: 'Focus' }).focus();
+
+  await expect(component).toHaveScreenshot('iconbutton[variant=error][large]');
+  await setTheme(page, 'dark');
+  await expect(component).toHaveScreenshot(
+    'dark--iconbutton[variant=error][large]'
+  );
+});

packages/styles/icon-button.css

@@ -48,6 +48,7 @@
   --icon-button-background-color-error-disabled: var(
     --button-background-color-error-disabled
   );
+  --icon-button-icon-size: var(--icon-size);
 }
 
 .IconButton {
@@ -73,8 +74,8 @@ a.IconButton {
 }
 
 .IconButton .Icon {
-  height: var(--space-small);
-  width: var(--space-small);
+  height: calc(var(--icon-button-icon-size) - 8px);
+  width: calc(var(--icon-button-icon-size) - 8px);
   pointer-events: none;
 }
 
@@ -103,6 +104,11 @@ a.IconButton {
   width: var(--icon-button-large-height);
 }
 
+.IconButton--large .Icon {
+  height: var(--icon-button-icon-size);
+  width: var(--icon-button-icon-size);
+}
+
 .IconButton--secondary:is([aria-disabled='true'], [disabled]),
 .IconButton--secondary:is([aria-disabled='true'], [disabled]):active {
   color: var(--icon-button-text-color-disabled);