fix(core/tabs): Fix ix 3104 default css classes not getting applied for dynamic tabs#2243
Conversation
🦋 Changeset detectedLatest commit: c6f904f The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Summary of ChangesHello @RamVinayMandal, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses an issue where dynamically added tabs in React and Vue applications were losing essential CSS classes, causing them to appear unstyled. The solution introduces a Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request effectively resolves the issue of CSS classes being lost on dynamic tab updates by introducing a MutationObserver. The approach is solid, and the new logic is well-supported by a comprehensive suite of new tests. I have one suggestion for improvement in tabs.tsx to make the class application logic more efficient and prevent potential performance issues from unnecessary DOM mutations. Overall, this is a great contribution.
|
RamVinayMandal
changed the title
RamVinayMandal
changed the title
…ynamic_tabs' of github.com:RamVinayMandal/ix into fix_ix_3104_default_CSS_class_not_getting_applied_for_dynamic_tabs
…plied_for_dynamic_tabs
Prevent CSS classes from getting lost when dynamically adding ix-tab-items to ix-tabs. Fixes siemens#2043
…plied_for_dynamic_tabs
…tting_applied_for_dynamic_tabs
|
2 participants
💡 What is the current behavior?
When tabs are added dynamically and have custom CSS classes applied, the essential default CSS classes (hydrated, bottom/top, auto/stretched, selected) are lost, causing the tabs to appear broken/unstyled. Issue persists for React and Vue.
GitHub Issue Number: #2043
Note: Older PR is closed due to major conflicts - #2082
JIRA ID: IX-3104
🆕 What is the new behavior?
Dynamic CSS Class Preservation for Tab Components
Problem Fixed: When React/Vue frameworks dynamically update tab content, essential CSS classes (
hydrated,selected,bottom,top,stretched) were lost, breaking tab functionality and styling.Solution Implemented: Added a
MutationObserverthat automatically detects DOM changes and re-applies required system classes while preserving custom user classes, ensuring tabs remain fully functional during dynamic re-renders.Result: Tabs now work seamlessly in React/Vue applications with dynamic content updates, maintaining both visual consistency and interactive behavior regardless of how aggressively frameworks manipulate the DOM.
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test)pnpm lint)pnpm build, changes pushed)