fix(foundation): tabs minimum value to grid column on transition

[yinonov]

tabs active-indicator is janky on first change due to its grid-column css property being set to 0. this is now fixed by conditionally assigning a value of, at least, 1 instead if equals 0.

Pull Request

📖 Description

🎫 Issues

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

• [ ] I have included a change request file using $ yarn change
• [ ] I have added tests for my changes.
• [ ] I have tested my changes.
• [ ] I have updated the project documentation to reflect my changes.
• [ ] I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• [ ] I have added a new component
• [ ] I have modified an existing component
• [ ] I have updated the definition file
• [ ] I have updated the configuration file

⏭ Next Steps

[KingOfTac]

This is just an fyi/workaround for this issue, for folks that are still using the archived fast-components.

If you set an initial activeid on the tabs element to one of the tabs' id, it fixes the jumpy indicator. Tabs will set ids for you on each tab, or you can provide your own.

<fast-tabs activeid="tab-1">
    <fast-tab slot="tab" id="tab-1">Tab one</fast-tab>
    <fast-tab slot="tab" id="tab-2">Tab two</fast-tab>
    <fast-tab slot="tab" id="tab-3">Tab three</fast-tab>
    <fast-tab-panel slot="tabpanel">Tab panel 1</fast-tab-panel>
    <fast-tab-panel slot="tabpanel">Tab panel 2</fast-tab-panel>
    <fast-tab-panel slot="tabpanel">Tab panel 3</fast-tab-panel>
</fast-tabs>

[yinonov]

This is just an fyi/workaround for this issue, for folks that are still using the archived fast-components.

If you set an initial activeid on the tabs element to one of the tabs' id, it fixes the jumpy indicator. Tabs will set ids for you on each tab, or you can provide your own.

<fast-tabs activeid="tab-1">
    <fast-tab slot="tab" id="tab-1">Tab one</fast-tab>
    <fast-tab slot="tab" id="tab-2">Tab two</fast-tab>
    <fast-tab slot="tab" id="tab-3">Tab three</fast-tab>
    <fast-tab-panel slot="tabpanel">Tab panel 1</fast-tab-panel>
    <fast-tab-panel slot="tabpanel">Tab panel 2</fast-tab-panel>
    <fast-tab-panel slot="tabpanel">Tab panel 3</fast-tab-panel>
</fast-tabs>

personally I think css should enforce defaults on its own to protect run-time from such cases. anyway, this suggested workaround would need to be documented to authors as a caveat and, fairly, this could be forgotten easily. it's a matter of ergonomics

[yinonov]

Fixes #6455 (?)

[janechu]

Looks like we need to add a change file, can you run yarn change to generate one?