[Bug]: `IconButton` outlines overflow `TableCell` boundaries

[adamalston]

Package

@carbon/react

Browser

No response

Package version

1.97.0

React version

No response

Description

The outline of IconButton components within TableCell components overflows the parent component's boundaries.

I may have traced this issue to styles added in #19043:

carbon/packages/styles/scss/components/treeview/_treeview.scss

Lines 301 to 304 in bad329e

	.#{$prefix}--tooltip-trigger__wrapper .#{$prefix}--btn--ghost:focus {
	box-shadow: none;
	outline: 2px solid $focus;
	}

When these styles are enabled, the outline overflows the table cell:

When the styles are disabled, the outline stays within the cell:

This issue is a regression in styles as v1.84.0 did not include the issue.

I am not using a regular expansion DataTable. I am using @tanstack/react-table which is related to https://github.com/carbon-design-system/tanstack-carbon.

Reproduction/example

N/A

Steps to reproduce

I can’t get a reproduction environment working right now due to the complexities of mixing @tanstack/react-table with @carbon/react. That said, I will keep trying. I'm opening this issue anyway to see if anyone notices an obvious change that should be made. Notably, the block of code linked in the description appears to contain the only selector in that file that doesn’t include a tree segment. I wonder if that selector should be more specific.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

DataPower

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems