SvgChevronRight icon in SubRowExpander component rotates 180 degrees instead of 90 on expansion

[DenisMicha]

SvgChevronRight icon in SubRowExpander component rotates 180 degrees instead of 90 on expansion.

Actual behavior

Chevron points to the left side when sub rows expanded (rotates 180deg).

Expected behavior

Chevron points down when sub rows expanded (rotates 90deg).

This behavior happens because both SvgChevronRight component and its wrapping IconButton component include 90deg rotation on expansion, therefore total rotation becomes 180deg. The "transform" property which causes rotation should be removed from SvgChevronRight component styles.

[mayank99]

Could you provide a repro by forking this template? It works fine here: https://itwin.github.io/iTwinUI/react/?story=table--expandable-subrows&theme=dark

[DenisMicha]

Hi @mayank99,

Here is the repro code: https://stackblitz.com/edit/github-cph1jx?file=src%2FApp.tsx.

Apparently adding the "subComponent" property to the Table component adds the additional rotation. It is a bit confusing that adding/removing this property impacts chevron rotation, so I think SvgChevronRight style is good but the rotation as a side effect of "subComponent" property should be removed.

Also, if it is okay, it would be good to make the chevron rotation smooth.

[r100-stack]

I believe the subComponent is not intended to be used when any of the rows have subRows.

But yes, the side effect you mentioned in #1749 seems to be duplicate because there already is CSS that applies a transform on .iui-button-icon:

iTwinUI/packages/itwinui-css/src/table/base.scss

Lines 218 to 220 in 5aba6b4

	.iui-table-row-expander > .iui-button-icon {
	transform: rotate(90deg);
	}

[mayank99]

@DenisMicha Could you share why you're passing subComponent while also using subRows? These are somewhat mutually-exclusive features that are not designed to work together.

In your sandbox, subComponent={() => undefined} does more than just combine the rotations (from subComponent and subRows). It also changes some alignment and applies border around the entire row and its subcomponent (which is undefined in this case).

without subComponent	with subComponent

[DenisMicha]

@mayank99 I am not sure, but we probably started passing subComponent exactly because of the alignment. Is there a reason why the alignment is different? Could the alignment with only subRows be changed to be similar to subComponent alignment?

[mayank99]

The alignment has been fixed in 3.3.1, so you can get rid of subComponent.

In the future, we might add some documentation or a runtime warning if more users attempt to use subComponent and subRows together.