Datagrid: Expand button animation is cut off

[arturchilangwa-infor]

Description
An animation cut off when clicking on the "expand-button" (plus or minus sign) on a SohoDataGrid that is multiselectable. This happens only if the row is selected.

To Reproduce

1. Go to https://master-enterprise.demo.design.infor.com/components/datagrid/test-expandable-row-multiselect.html

2. Select/check a row first so it has a blue background

3. Press on the button that expands row (the animation cut off will appear here)

Expected behavior
The animation for "expand-button" should be a whole circle with no oddity to the animtaion

Version

• ids-enterprise-ng: v4.38.0

Screenshots
Animation cut off

Animation cut off close up

Potential element that produces the error

Platform

• Device: Desktop
• OS Version: Windows 10
• Browser Name: Chrome
• Browser Version: 88.0.4324.190 (Official Build) (64-bit)

Additional context
The potential element that makes bug.

The element is the <span class="icon plus-minus"></span> inside of the button-element.

<div class="datagrid-cell-wrapper">
    <button type="button" aria-label="Expand / Collapse" class="btn-icon datagrid-expand-btn hide-focus" tabindex="-1">
        <span class="icon plus-minus"></span>
    </button>
    <span> 2142201</span>
</div> 

[jbrcna]

QA Passed
The animation for "expand-button" is now a whole circle with no oddity to the animtaion (both selected/unselected)
v4.52.0-dev
https://main-enterprise.demo.design.infor.com/components/datagrid/test-expandable-row-multiselect.html