Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: archives/fast-element-1
Choose a base branch
from

Conversation

yinonov
Copy link
Contributor

@yinonov yinonov commented Dec 29, 2022

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.

image

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

⏭ Next Steps

…6543)

<!---
Thanks for filing a pull request 😄 ! Before you submit, please read the following:

Search open/closed issues before submitting. Someone may have pushed the same thing before!

Provide a summary of your changes in the title field above.
-->

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->

### 🎫 Issues

<!---
* List and link relevant issues here.
-->

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->

## 📑 Test Plan

<!---
Please provide a summary of the tests affected by this work and any unique strategies employed in testing the features/fixes.
-->

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] 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](https://github.com/microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](/docs/community/code-of-conduct/#our-standards) for this project.

### Component-specific

<!--- Review the list and put an x in the boxes that apply. -->
<!--- Remove this section if not applicable. -->

- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the [definition file](https://github.com/microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#definition)
- [ ] I have updated the [configuration file](https://github.com/microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#configuration)

## ⏭ Next Steps

<!---
If there is relevant follow-up work to this PR, please list any existing issues or provide brief descriptions of what you would like to do next.
-->
@yinonov yinonov changed the title add missing part attribute for tabpanel in tabs component (#6543) fix(foundation): tabs minimum value to grid column on transition #6543 Dec 29, 2022
@yinonov yinonov changed the title fix(foundation): tabs minimum value to grid column on transition #6543 fix(foundation): tabs minimum value to grid column on transition Dec 29, 2022
@yinonov yinonov marked this pull request as ready for review December 29, 2022 11:31
@KingOfTac
Copy link
Collaborator

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
Copy link
Contributor Author

yinonov commented Dec 29, 2022

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
Copy link
Contributor Author

yinonov commented Jan 4, 2023

Fixes #6455 (?)

yinonov pushed a commit to Vonage/vivid-3 that referenced this pull request Jan 4, 2023
@janechu
Copy link
Collaborator

janechu commented Sep 11, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants