[Bug]: TableToolbarMenu size and color incorrect

[TastyDucks]

Package

carbon-components

Browser

Chrome

Package version

@carbon/[email protected]

Description

The element does not respect the size constraints when <TableToolbar size="sm">, causing the icon to be misaligned:

The parent to the svg element does not have a set color and thus the svg fill cannot correspond to the current theme:

This should probably be $icon-01.

CodeSandbox example

https://codesandbox.io/s/youthful-driscoll-vbjk5?file=/src/index.js

Steps to reproduce

1. Using @carbon/[email protected], create a TableTooblar with a TableToolbarMenu.
2. Inspect the SVG and note the fill property is set to currentcolor
3. Inspect the OverflowContainer and note that it does not conform to the height of the containing TableToolbarMenu

The icon fill can be fixed by adding color: var(--cds-icon-primary) to the TableToolbarMenu, although IMO it would be nice if every icon had the fill property defaulting to $icon-01 instead of needing to inherit that from its parents color.

Code of Conduct

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

[TastyDucks]

Addendum: the scss rules for

th .cds--table-sort__flex {
    min-height
}

.cds--data-table--sort th, .cds--data-table th[aria-sort] {
    height
}

cause sortable headers to break out of the xs TableHeader:
Actual:

Expected (with those properties unset):

[jnm2377]

@TastyDucks I have a PR up for the scope of the original issue. Can you open a different issue for any other data table bugs you might find? We try to keep each issue/PR scoped to a specific bug or feature so it's easier to track for us. Thank you :)