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

feat(ui5-tabcontainer): enable nested tabs #4705

Merged
merged 57 commits into from
Mar 17, 2022

Conversation

kskondov
Copy link
Contributor

@kskondov kskondov commented Feb 7, 2022

No description provided.

@kskondov kskondov marked this pull request as draft February 7, 2022 13:18
@kskondov kskondov requested a review from dimovpetar February 7, 2022 13:21
@kskondov kskondov marked this pull request as ready for review February 18, 2022 05:53
@kskondov kskondov requested a review from a team February 18, 2022 05:54
packages/main/src/Tab.js Outdated Show resolved Hide resolved
packages/main/src/Tab.js Outdated Show resolved Hide resolved
packages/main/src/Tab.js Outdated Show resolved Hide resolved
packages/main/src/Tab.js Outdated Show resolved Hide resolved
packages/main/src/TabContainer.hbs Outdated Show resolved Hide resolved
packages/main/src/TabInOverflow.hbs Outdated Show resolved Hide resolved
packages/main/src/TabSeparator.js Outdated Show resolved Hide resolved
packages/main/src/i18n/messagebundle.properties Outdated Show resolved Hide resolved
packages/main/test/pages/TabContainer.html Outdated Show resolved Hide resolved
Copy link
Contributor

@vladitasev vladitasev left a 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.

packages/main/src/Tab.js Outdated Show resolved Hide resolved
packages/main/src/Tab.js Outdated Show resolved Hide resolved
packages/main/src/Tab.js Outdated Show resolved Hide resolved
packages/main/src/Tab.js Outdated Show resolved Hide resolved
packages/main/src/TabContainer.js Outdated Show resolved Hide resolved
packages/main/src/TabContainer.js Outdated Show resolved Hide resolved
packages/main/src/TabContainer.js Outdated Show resolved Hide resolved
@georgimkv georgimkv requested a review from BorisDafov March 11, 2022 11:39
Copy link

@BorisDafov BorisDafov left a 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:

  1. Replace
  • ui5-tab-separator - used to separate tabs with a vertical line

with

  • ui5-tab-separator - used to separate tabs with a line
  1. 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.

packages/main/src/Tab.js Outdated Show resolved Hide resolved
BorisDafov
BorisDafov previously approved these changes Mar 14, 2022
@kskondov kskondov requested a review from a team March 15, 2022 15:14
packages/main/src/TabContainer.js Outdated Show resolved Hide resolved
packages/main/src/TabContainer.js Outdated Show resolved Hide resolved
@kskondov kskondov requested review from BorisDafov and TeodorTaushanov and removed request for BorisDafov March 16, 2022 13:57
packages/main/src/TabContainer.js Outdated Show resolved Hide resolved
packages/main/src/TabContainer.js Outdated Show resolved Hide resolved
}

if (!tab._realTab._hasOwnContent && tab._realTab.tabs.length) {
this._overflowItems = [];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this line is redundant

@TeodorTaushanov TeodorTaushanov self-requested a review March 17, 2022 12:44
@kskondov kskondov merged commit 3e715c4 into master Mar 17, 2022
@kskondov kskondov deleted the ui5-tabcontainer-nested-tabs branch March 17, 2022 13:15
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.

5 participants