-
Notifications
You must be signed in to change notification settings - Fork 273
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
feat(ui5-tabcontainer): enable nested tabs #4705
Conversation
…bcontainer-nested-tabs
…bcontainer-nested-tabs
…bcontainer-nested-tabs
…bcontainer-nested-tabs
…bcontainer-nested-tabs
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did not checkout the code, just did an initial review on github only. The main thing I'd like you to check is whether it's possible to refactor parentElement
everywhere. I commented on 2-3 places, but then I saw it's used more. If you think it would be too hard then I'm ok, but if there is a straightforward way to pass some data top-down, and use it, instead of querying up the DOM tree, please do it.
The reason is that it's generally an antipattern for children to check their parents and base their behavior on that. This counts not only for HTML or UI components, but in general in programming. A component/class/entity should ideally base its behavior/look solely on its own state. When the parent is involved however, then the component is based both on its own state and the parent's presence/state. This leads to complications and hard to maintain code in the long run. As code gets more complex over time, it will become increasingly hard to determine why something is acting/looking in a certain way, if it does not depend on its own state entirely. So, ideally, whenever possible, parents should give their children all necessary information to render/act as expected by setting their state directly, so that the child has everything at hand, and would not need to query additional information by going up the DOM.
…bcontainer-nested-tabs
…bcontainer-nested-tabs
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please, in the TabContainer.js file:
- Replace
ui5-tab-separator
- used to separate tabs with a vertical line
with
ui5-tab-separator
- used to separate tabs with a line
- In the "Overview" section add a paragraph like (remove what is not applicable):
Hierarchies
Multiple subtabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations to indicate the level of each nested tab. When a tab has both subtabs and own content its click area is split to allow the user to display the content or alternatively to expand/collapse the list of subtabs.
…components into ui5-tabcontainer-nested-tabs
} | ||
|
||
if (!tab._realTab._hasOwnContent && tab._realTab.tabs.length) { | ||
this._overflowItems = []; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this line is redundant
No description provided.