fix(core/tabs): tab layout stretched and showNextArrow

[goncalosard]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (yarn build) was run locally and any changes were pushed
• Unit tests (yarn test) were run locally and passed
• Visual Regression Tests (yarn visual-regression) were run locally and passed
• Linting (npm lint) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

• Bug fix
• Feature
• Refactoring (no functional changes, no API changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

GitHub Issue Number: #338

What is the new behavior?

Now layout="stretched" is working correctly.

Also fixed right arrow (showNextArrow), when overflow exists. Previously it was not showing when layout="auto" and overflow existed. Now it works correctly.

Does this introduce a breaking change?

• Yes
• No

Testing

Tested locally.

Other information

[danielleroux]

@goncalosard

Tested it with the following snippet:

        <div
          style={{
            display: 'block',
            position: 'relative',
            width: '40rem',
            backgroundColor: '#ff00002e',
          }}
        >
          <ix-tabs layout="stretched">
            <ix-tab-item>Test</ix-tab-item>
            <ix-tab-item>Test</ix-tab-item>
            <ix-tab-item>Test</ix-tab-item>
            <ix-tab-item>Test</ix-tab-item>
          </ix-tabs>
        </div>

The tabs are not streched over the complete parent size:

[goncalosard]

@danielleroux

Fixed. Tested with your code and it workes fine now.

[danielleroux]

@danielleroux

Fixed. Tested with your code and it workes fine now.

Please look into the visual-test results (https://github.com/siemens/ix/actions/runs/4115644754 download is on the bottom) seems there are problems regarding the ix-menu-about component.

[danielleroux]

@goncalosard checked out latest version. Test is not failing (😶 i will adapt this if the feature is working) but now iam not getting the correct overflow arrow.

Maybe you should add an unit test to test the overflow behavior.

    <div style="margin-bottom: 2rem; width: 40rem; background-color: #ff00006a">
      <ix-tabs>
        <ix-tab-item>Example</ix-tab-item>
        <ix-tab-item>Example</ix-tab-item>
        <ix-tab-item>Example</ix-tab-item>
        <ix-tab-item>Example</ix-tab-item>
        <ix-tab-item>Example</ix-tab-item>
        <ix-tab-item>Example</ix-tab-item>
        <ix-tab-item>Example</ix-tab-item>
        <ix-tab-item>Example</ix-tab-item>
        <ix-tab-item>Example</ix-tab-item>
      </ix-tabs>
    </div>

Result: No overflow on right side:

[danielleroux]

lgtm