Updated VSlideYTransition to KTransition

[yeshwanth235]

Summary

Updated VSlideYTransition to KTransition

References

Fixes #5081

Reviewer guidance

Manual testing
Check whether form is show on click of open form
Check whether form is getting closed on click of close form

[radinamatic]

@yeshwanth235 Thank you for continuing to be a member of our community and contributing to Kolibri, it is very much appreciated! 🙏🏽 👏🏽 ❤️

Could I make a suggestion to use a bit more descriptive PR titles? Referencing just the issue number does not help while scanning through the long list of PRs that are in our GitHub, and managing our backlog efficiently, as it requires more clicks (to open and see the content). Something short to summarize what you achieved with the PR would be more helpful 🙂
Thank you again!

[MisRob]

Hi @yeshwanth235, thanks for the update!

The form opens and closes as expected and I see the transition, however there's a regression when the form is transitioned to its place from the very top of the page. We need the transition to start/end right below Open/close modal link. I hope the effect I'm describing is clear, let me know.

Would you be able to look into KTransition and find out why it's happening? If you had any ideas how to resolve it, let me know and we will discuss. If it'd be handy for experimentation, it should be possible to link local kolibri-design-system repository via pnpm link.

[MisRob]

@yeshwanth235 if it's helpful, here's how Vuetify achieved it

[yeshwanth235]

Got your point @MisRob
Will check and update here
Need some time

[MisRob]

Yes, no problem @yeshwanth235, thanks!

[yeshwanth235]

Here are my finding @MisRob

Prop validation is failing here

After digging deep.

Found that KTransition in node_modules missing the key(COMPONENT_VERTICAL_SLIDE_OUT_IN). Not sure why. But it is present in the KDS.

Therefore the css is not getting applied.

[yeshwanth235]

I don't get,
How to link KDS with studio. i tried pnpm link. But it didn't worked.
Please help with it

[MisRob]

@yeshwanth235 for pnpm issue, would you start a post in GitHub Discussions? Please include screen recording, if you can, or at least step by step description with screenshots and your terminal outputs. We can have a look at it next week.

Meanwhile, you could just copy-paste KTransition code into Studio temporarily and work with it.

[MisRob]

@yeshwanth235 here's how to link, even though I assume you've tried this

cd studio
pnpm link ../kolibri-design-system

[yeshwanth235]

Hi @MisRob
After i copied the KTransition component. Animation is bit odd for component-vertical-slide-out-in

can we use component-fade-out-in?

video

[MisRob]

Hi @yeshwanth235,

Animation is bit odd for component-vertical-slide-out-in

Thanks for the recording - yes this is what I too observed. Would you try to explore the guidance I left here and here? That is to fix KTransition's component-vertical-slide-out-in mode to behave as expected (refer to Studio version before you refactored this place and try to achieve the same effect). If you figure it out, you can open KDS pull request for KTransition fix. If it's hard to make progress, feel free to request to be unassigned and pick a more suitable issue instead.