Skip to content

Commit

Permalink
refactor(ui5-tabcontainer): tabs can be modified completely (#1507)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vladitasev
vladitasev committed Apr 29, 2020
1 parent 6cd3da8 commit 39bd306
Show file tree
Hide file tree
Showing 11 changed files with 589 additions and 580 deletions.
137 changes: 136 additions & 1 deletion packages/main/src/Tab.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
import SemanticColor from "./types/SemanticColor.js";
import TabLayout from "./types/TabLayout.js";
import TabContainer from "./TabContainer.js";
import Icon from "./Icon.js";
import CustomListItem from "./CustomListItem.js";

// Templates
import TabTemplate from "./generated/templates/TabTemplate.lit.js";
import TabInStripTemplate from "./generated/templates/TabInStripTemplate.lit.js";
import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";

// Styles
import css from "./generated/themes/Tab.css.js";
import stripCss from "./generated/themes/TabInStrip.css.js";
import overflowCss from "./generated/themes/TabInOverflow.css.js";

/**
* @public
Expand Down Expand Up @@ -140,18 +149,37 @@ class Tab extends UI5Element {
return TabTemplate;
}

static get stripTemplate() {
return TabInStripTemplate;
}

static get overflowTemplate() {
return TabInOverflowTemplate;
}

static get styles() {
return css;
}

static async onDefine() {
await Icon.define();
await Promise.all([
Icon.define(),
CustomListItem.define(),
]);
}

get isSeparator() {
return false;
}

get stripPresentation() {
return this.constructor.stripTemplate(this);
}

get overflowPresentation() {
return this.constructor.overflowTemplate(this);
}

getFocusDomRef() {
let focusedDomRef = super.getFocusDomRef();

Expand All @@ -161,8 +189,115 @@ class Tab extends UI5Element {

return focusedDomRef;
}

get isMixedModeTab() {
return !this.icon && this._mixedMode;
}

get isTextOnlyTab() {
return !this.icon && !this._mixedMode;
}

get isIconTab() {
return !!this.icon;
}

get effectiveDisabled() {
return this.disabled || undefined;
}

get effectiveSelected() {
return this.selected || false;
}

get effectiveHidden() {
return !this.selected;
}

get ariaLabelledBy() {
const labels = [];

if (this.text) {
labels.push(`${this._id}-text`);
}

if (this.additionalText) {
labels.push(`${this._id}-additionalText`);
}

if (this.icon) {
labels.push(`${this._id}-icon`);
}

return labels.join(" ");
}

get headerClasses() {
const classes = ["ui5-tab-strip-item"];

if (this.selected) {
classes.push("ui5-tab-strip-item--selected");
}

if (this.disabled) {
classes.push("ui5-tab-strip-item--disabled");
}

if (this.tabLayout === TabLayout.Inline) {
classes.push("ui5-tab-strip-item--inline");
}

if (!this.icon && !this._mixedMode) {
classes.push("ui5-tab-strip-item--textOnly");
}

if (this.icon) {
classes.push("ui5-tab-strip-item--withIcon");
}

if (!this.icon && this._mixedMode) {
classes.push("ui5-tab-strip-item--mixedMode");
}

if (this.semanticColor !== SemanticColor.Default) {
classes.push(`ui5-tab-strip-item--${this.semanticColor.toLowerCase()}`);
}

return classes.join(" ");
}

get headerSemanticIconClasses() {
const classes = ["ui5-tab-strip-item-semanticIcon"];

if (this.semanticColor !== SemanticColor.Default) {
classes.push(`ui5-tab-strip-item-semanticIcon--${this.semanticColor.toLowerCase()}`);
}

return classes.join(" ");
}

get overflowClasses() {
const classes = ["ui5-tab-overflow-item"];

if (this.semanticColor !== SemanticColor.Default) {
classes.push(`ui5-tab-overflow-item--${this.semanticColor.toLowerCase()}`);
}

if (this.disabled) {
classes.push("ui5-tab-overflow-item--disabled");
}

return classes.join(" ");
}

get overflowState() {
return this.disabled ? "Inactive" : "Active";
}
}

Tab.define();

TabContainer.registerTabStyles(stripCss);
TabContainer.registerStaticAreaTabStyles(overflowCss);

export default Tab;
80 changes: 12 additions & 68 deletions packages/main/src/TabContainer.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,16 @@

<!-- tab items -->
<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
<ul role="tablist" class="{{classes.headerList}}">
{{#each renderItems}}
<ul
role="tablist"
class="{{classes.headerList}}"
@click="{{_onHeaderClick}}"
@keydown="{{_onHeaderKeyDown}}"
@keyup="{{_onHeaderKeyUp}}"
>
{{#each items}}
{{#unless this.isSeparator}}
<li class="{{this.headerItemClasses}}"
id="{{this.item._id}}"
tabindex="{{this.item._tabIndex}}"
@click="{{../_onHeaderItemSelect}}"
@keydown="{{../ _onHeaderItemKeyDown}}"
@keyup="{{../_onHeaderItemKeyUp}}"
role="tab"
aria-posinset="{{this.position}}"
aria-setsize="{{../renderItems.length}}"
aria-controls="ui5-tc-contentItem-{{this.position}}"
aria-selected="{{this.selected}}"
?aria-disabled="{{this.disabled}}"
?disabled="{{this.disabled}}"
aria-labelledby="{{this.ariaLabelledBy}}"
>
{{#if this.isInline}}
{{> inlineTab}}
{{else}}
{{> standardTab}}
{{/if}}
</li>
{{this.stripPresentation}}
{{/unless}}
{{#if this.isSeparator}}
<li id="{{this._id}}" role="separator" class="{{../classes.separator}}"></li>
Expand Down Expand Up @@ -66,54 +52,12 @@

{{#*inline "contentArea"}}
<div class="{{classes.content}}">
{{#each renderItems}}
{{#each items}}
{{#unless this.isSeparator}}
<div class="{{this.contentItemClasses}}" id="ui5-tc-contentItem-{{this.position}}" ?hidden="{{this.hidden}}" role="tabpanel" aria-labelledby="{{item._id}}">
<slot name="{{this.item._individualSlot}}"></slot>
<div class="ui5-tc__contentItem" id="ui5-tc-contentItem-{{this._position}}" ?hidden="{{this.effectiveHidden}}" role="tabpanel" aria-labelledby="{{this._id}}">
<slot name="{{this._individualSlot}}"></slot>
</div>
{{/unless}}
{{/each}}
</div>
{{/inline}}

{{#*inline "standardTab"}}
{{#if this.item.icon}}
<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
</div>
{{/if}}

<div class="{{this.headerItemContentClasses}}">
{{#if this.item.additionalText}}
<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
{{/if}}

{{#if this.item.text}}
<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
<span class="{{this.headerItemSemanticIconClasses}}"></span>
{{this.item.text}}
</span>
{{/if}}
</div>
{{/inline}}

{{#*inline "inlineTab"}}
{{#if this.item.icon}}
<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
</div>
{{/if}}

<div class="{{this.headerItemContentClasses}}">
{{#if this.item.text}}
<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
<span class="{{this.headerItemSemanticIconClasses}}"></span>
{{this.item.text}}
</span>
{{/if}}

{{#if this.item.additionalText}}
<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
{{/if}}
</div>
{{/inline}}
Loading

0 comments on commit 39bd306

Please sign in to comment.