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.

Sign up for GitHub

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

Jump to bottom

feat(ui5-tabcontainer): implement latest SAP Horizon design #7257

Merged
merged 5 commits into from
Jul 7, 2023
Merged

feat(ui5-tabcontainer): implement latest SAP Horizon design #7257

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
53450e2
feat(ui5-tabcontainer): implement latest SAP Horizon design
dimovpetar Jun 27, 2023
4c12f56
fix: hide expand button separator in high contrast themes
dimovpetar Jun 27, 2023
e09ac5f
Merge branch 'main' of github.com:SAP/ui5-webcomponents into tabconta…
dimovpetar Jul 5, 2023
864ec64
fix: semantic tabs colors in HC themes
dimovpetar Jul 5, 2023
02c7487
fix: center two click area button and overflow button
dimovpetar Jul 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/main/src/Tab.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,10 @@ class Tab extends UI5Element implements ITab, ITabbable {
return this.subTabs.length > 0 && this._isTopLevelTab && !this._hasOwnContent;
}

get isTwoClickArea() {
return this.subTabs.length > 0 && this._isTopLevelTab && this._hasOwnContent;
}

get isOnSelectedTabPath(): boolean {
return this._realTab === this || this.tabs.some(subTab => subTab.isOnSelectedTabPath);
}
Expand Down Expand Up @@ -380,6 +384,10 @@ class Tab extends UI5Element implements ITab, ITabbable {
classes.push(`ui5-tab-strip-item--singleClickArea`);
}

if (this.isTwoClickArea) {
classes.push(`ui5-tab-strip-item--twoClickArea`);
}

return {
itemClasses: classes.join(" "),
additionalTextClasses: this.additionalTextClasses,
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/TabInStrip.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
</div>

{{#if this.requiresExpandButton}}
<div class="ui5-tab-expand-button-separator"></div>
<div class="ui5-tab-expand-button" @click="{{_onTabExpandButtonClick}}">
<ui5-button
.tab={{this}}
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TabSeparator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class TabSeparator extends UI5Element implements ITab {
*
* @function
* @public
* @name sap.ui.webc.main.TabSeparator.prototype.getTabInStripDomRef
* @name sap.ui.webc.main.TabSeparator.prototype.getTabInStripDomRef
*/
getTabInStripDomRef() {
if (this._getElementInStrip) {
Expand Down
8 changes: 8 additions & 0 deletions packages/main/src/themes/TabContainer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,14 @@
height: 1.5rem;
}

.ui5-tc__overflow > [ui5-button]:not([active]) {
color: var(--_ui5_tc_overflow_text_color);
}

.ui5-tc__overflow > [ui5-button]:not([active]):hover {
color: var(--_ui5_tc_overflow_text_color);
}

.ui5-tc__overflow > [ui5-button][focused] {
outline-offset: 0.125rem;
--_ui5_button_focused_border: none;
Expand Down
93 changes: 50 additions & 43 deletions packages/main/src/themes/TabInStrip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
height: var(--_ui5_tc_header_height);
color: var(--_ui5_tc_headerItem_color);
cursor: pointer;
padding: var(--_ui5_tc_headeritem_padding);
padding: 0 var(--_ui5_tc_headeritem_padding);
font-size: var(--sapFontSmallSize);
font-weight: var(--_ui5_tc_headeritem_text_font_weight);
text-shadow: var(--sapContent_TextShadow);
Expand Down Expand Up @@ -35,20 +35,32 @@

.ui5-tab-strip-itemContent {
display: flex;
height: 100%;
min-width: 0;
justify-content: center;
flex-direction: column;
padding: var(--_ui5_tc_headerItemContent_padding);
border: var(--_ui5_tc_headerItemContent_default_focus_border);
border-radius: var(--_ui5_tc_headerItemContent_focus_border_radius);
pointer-events: none;
transition: var(--_ui5_tc_headerItem_transition);
}

.ui5-tab-expand-button {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 1;
background-color: var(--_ui5_tc_header_background);
padding-inline-end: 0.188rem;
}

.ui5-tab-expand-button > [ui5-button] {
height: 1.5rem;
min-width: 1.5rem;
margin-top: 0.25rem;
margin-inline-start: 0.625rem;
margin-inline-start: var(--_ui5_tc_headerItem_expand_button_margin_inline_start);
--_ui5_button_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
--_ui5_button_focused_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
}

.ui5-tab-expand-button > [ui5-button]:not([active]) {
Expand All @@ -63,8 +75,27 @@
color: var(--_ui5_tc_headerItem_text_selected_hover_color);
}

.ui5-tab-expand-button-separator {
display: var(--_ui5_tc_headerItem_expand_button_separator_display);
position: relative;
width: 0.0625rem;
right: -0.0625rem;
height: 1rem;
background: var(--sapTextColor);
margin-inline-start: 0.0625rem;
z-index: 2;
}

.ui5-tab-expand-button:hover {
z-index: 2;
}

.ui5-tab-strip-item--selected .ui5-tab-expand-button-separator {
background: var(--_ui5_tc_headerItem_text_selected_color);
}

.ui5-tab-single-click-icon {
margin-inline-start: 0.875rem;
margin-inline-start: var(--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start);
}

.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
Expand All @@ -87,12 +118,16 @@
.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon > [ui5-icon] {
color: var(--_ui5_tc_headerItem_color);
}
.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative).ui5-tab-strip-item--textOnly,
.ui5-tab-strip-item--singleClickArea.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--disabled) .ui5-tab-single-click-icon > [ui5-icon] {

/* hover effects */
.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--twoClickArea):not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative):hover,
.ui5-tab-strip-item--twoClickArea:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative) .ui5-tab-strip-itemContent:hover,
.ui5-tab-strip-item--singleClickArea:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--disabled):hover .ui5-tab-single-click-icon > [ui5-icon] {
color: var(--_ui5_tc_headerItem_text_hover_color);
}

/* the outline when hover or selected */

/* selection indicator */
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
Expand All @@ -107,39 +142,11 @@
height: var(--_ui5_tc_headerItemContent_border_height);
}

/* the outline when hover and not selected */
.ui5-tab-strip-item--textOnly:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--mixedMode:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item-icon-outer:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after {
border-color: var(--_ui5_tc_headerItem_hover_border_bg);
background-color: var(--_ui5_tc_headerItem_hover_border_bg);
}

/* the outline when hover and selected */
.ui5-tab-strip-item--textOnly:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--mixedMode:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item-icon-outer:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after {
background-color: var(--_ui5_tc_headerItem_hover_selected_hover_border_bg);
}

/* the outline offset when hover and selected */
.ui5-tab-strip-item--textOnly:hover .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--mixedMode:hover .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item-icon-outer:hover .ui5-tab-strip-itemContent::after,
/* selection indicator offset in text only and mixed modes */
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after {
left: var(--_ui5_tc_headerItemContent_offset);
right: var(--_ui5_tc_headerItemContent_offset);
}

/* the outline offset when focused */
.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item-icon-outer:focus-visible .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after {
left: var(--_ui5_tc_headerItemContent_focus_offset);
right: var(--_ui5_tc_headerItemContent_focus_offset);
left: var(--_ui5_tc_headeritem_padding);
right: var(--_ui5_tc_headeritem_padding);
}

.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
Expand Down Expand Up @@ -292,7 +299,7 @@
/*** Semantic states ***/
.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer {
color: var(--sapPositiveColor);
color: var(--_ui5_tc_headerItem_positive_color);
border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
}

Expand Down Expand Up @@ -323,7 +330,7 @@

.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer {
color: var(--sapNegativeColor);
color: var(--_ui5_tc_headerItem_negative_color);
border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
}

Expand All @@ -347,7 +354,7 @@

.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer {
color: var(--sapCriticalColor);
color: var(--_ui5_tc_headerItem_critical_color);
border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
}

Expand All @@ -371,7 +378,7 @@

.ui5-tab-strip-item--neutral.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer {
color: var(--sapNeutralColor);
color: var(--_ui5_tc_headerItem_neutral_color);
border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
}

Expand Down
14 changes: 8 additions & 6 deletions packages/main/src/themes/base/TabContainer-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
--_ui5_tc_content_background_translucent: var(--sapGroup_ContentBackground);

/* Header Item */
--_ui5_tc_headeritem_padding: 0 1rem;
--_ui5_tc_headeritem_padding: 1rem;
--_ui5_tc_headerItem_color: var(--sapContent_LabelColor);
--_ui5_tc_headerItem_additional_text_color: var(--sapContent_LabelColor);
--_ui5_tc_headerItem_text_hover_color: var(--_ui5_tc_headerItem_color);
Expand Down Expand Up @@ -42,10 +42,7 @@
--_ui5_tc_headerItem_positive_border_bg: transparent;
--_ui5_tc_headerItem_negative_border_bg: transparent;
--_ui5_tc_headerItem_critical_border_bg: transparent;
--_ui5_tc_headerItem_hover_border_bg: transparent;
--_ui5_tc_headerItem_hover_selected_hover_border_bg: transparent;
--_ui5_tc_headerItemContent_border_height: 0;
--_ui5_tc_headerItemContent_offset: 1rem;
--_ui5_tc_headerItemContent_focus_offset: 1rem;
--_ui5_tc_headerItem_focus_border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
--_ui5_tc_headerItem_text_focus_border_offset_left: 0px;
Expand All @@ -56,7 +53,6 @@
--_ui5_tc_headerItem_mixed_mode_focus_border_offset_right: 0.625rem;
--_ui5_tc_headerItem_mixed_mode_focus_border_offset_top: 0.75rem;
--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom: 0.75rem;
--_ui5_tc_headerItemContent_padding: 0;
--_ui5_tc_headerItemContent_focus_border: none;
--_ui5_tc_headerItemContent_default_focus_border: none;
--_ui5_tc_headerItemContent_focus_border_radius: 0;
Expand All @@ -67,10 +63,13 @@
--_ui5_tc_mixedMode_itemText_font_family: var(--sapFontFamily);
--_ui5_tc_mixedMode_itemText_font_size: var(--sapFontSmallSize);
--_ui5_tc_mixedMode_itemText_font_weight: normal;
--_ui5_tc_headerItem_expand_button_margin_inline_start: 0.625rem;
--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.875rem;
--_ui5_tc_headerItem_expand_button_border_radius: var(--sapButton_BorderCornerRadius);
--_ui5_tc_headerItem_expand_button_separator_display: none;

/* Overflow Item */

--_ui5_tc_overflowItem_neutral_color: var(--sapNeutralColor);
--_ui5_tc_overflowItem_positive_color: var(--sapPositiveColor);
--_ui5_tc_overflowItem_negative_color: var(--sapNegativeColor);
--_ui5_tc_overflowItem_critical_color: var(--sapCriticalColor);
Expand All @@ -95,6 +94,9 @@

--_ui5_tc_headerItem_focus_border_offset: -2px;
--_ui5_tc_headerItemIcon_focus_border_radius: 0;

/* Overflow Buttons*/
--_ui5_tc_overflow_text_color: var(--sapButton_TextColor);
}

[data-ui5-compact-size],
Expand Down
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_belize_hcb/TabContainer-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@

/* Overflow Item */

--_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
Expand Down
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_belize_hcw/TabContainer-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@

/* Overflow Item */

--_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
Expand Down
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@

/* Overflow Item */

--_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
Expand Down
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@

/* Overflow Item */

--_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
Expand Down
7 changes: 7 additions & 0 deletions packages/main/src/themes/sap_horizon/TabContainer-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
--_ui5_tc_overflowItem_default_color: var(--sapTextColor);
--_ui5_tc_overflowItem_current_color: CurrentColor;
--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
--_ui5_tc_headerItem_expand_button_margin_inline_start: 0rem;
--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.25rem;
--_ui5_tc_headerItem_expand_button_border_radius: 0.25rem;
--_ui5_tc_headerItem_expand_button_separator_display: inline-block;

/* Focus & Hover */
--_ui5_tc_headerItem_focus_border: 0.125rem solid var(--sapContent_FocusColor);
Expand All @@ -28,4 +32,7 @@

/* Mixed Mode */
--_ui5_tc_mixedMode_itemText_color: var(--sapTextColor);

/* Overflow Buttons*/
--_ui5_tc_overflow_text_color: var(--sapTextColor);
}
24 changes: 20 additions & 4 deletions packages/main/src/themes/sap_horizon_dark/TabContainer-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,33 @@
/* Header Item */
--_ui5_tc_headerItemContent_border_bottom: 0.1875rem solid var(--sapSelectedColor);
--_ui5_tc_headerItem_color: var(--sapTextColor);
--_ui5_tc_overflowItem_default_color: var(--sapHighlightColor);
--_ui5_tc_overflowItem_default_color: var(--sapTextColor);
--_ui5_tc_overflowItem_current_color: CurrentColor;
--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
--_ui5_tc_headerItem_expand_button_margin_inline_start: 0rem;
--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.25rem;
--_ui5_tc_headerItem_expand_button_border_radius: 0.25rem;
--_ui5_tc_headerItem_expand_button_separator_display: inline-block;

/* Focus & Hover */
--_ui5_tc_headerItem_focus_border: 0.125rem solid var(--sapContent_FocusColor);
--_ui5_tc_headerItem_focus_border_offset: -5px;
--_ui5_tc_headerItemIcon_focus_border_radius: 50%;
--_ui5_tc_headerItem_focus_border_radius: 0.25rem;
--_ui5_tc_headerItem_focus_border_radius: 0.375rem;
--_ui5_tc_headeritem_text_font_weight: bold;
--_ui5_tc_headerItem_text_hover_color: var(--sapContent_Selected_ForegroundColor);
--_ui5_tc_headerItem_focus_offset: 1px;
--_ui5_tc_headerItem_text_hover_color: var(--sapContent_Selected_ForegroundColor);

/* Header Item icons */
--_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapHighlightColor);
--_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapContent_Selected_ForegroundColor);
--_ui5_tc_headerItemIcon_color: var(--sapContent_Selected_ForegroundColor);
--_ui5_tc_headerItemIcon_selected_background: var(--sapContent_Selected_ForegroundColor);
--_ui5_tc_headerItemIcon_background_color: var(--sapContent_Selected_Background);
--_ui5_tc_headerItemIcon_selected_color: var(--sapContent_ContrastIconColor);

/* Mixed Mode */
--_ui5_tc_mixedMode_itemText_color: var(--sapTextColor);

/* Overflow Buttons*/
--_ui5_tc_overflow_text_color: var(--sapTextColor);
}
4 changes: 0 additions & 4 deletions packages/main/src/themes/sap_horizon_exp/TabContainer-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,10 @@
--_ui5_tc_headerItem_positive_border_bg: var(--_ui5_tc_headerItem_positive_color);
--_ui5_tc_headerItem_negative_border_bg: var(--_ui5_tc_headerItem_negative_color);
--_ui5_tc_headerItem_critical_border_bg: var(--_ui5_tc_headerItem_critical_color);
--_ui5_tc_headerItem_hover_border_bg: var(--sapTile_TitleTextColor); /* #475E75; */
--_ui5_tc_headerItem_hover_selected_hover_border_bg: var(--sapContent_Selected_TextColor); /* #0057D2; */
--_ui5_tc_headerItem_hover_border_visibility: visible;

--_ui5_tc_headerItemContent_border_height: 0.125rem;
--_ui5_tc_headerItemContent_offset: 0.25rem;
--_ui5_tc_headerItemContent_focus_offset: 0.25rem;
--_ui5_tc_headerItemContent_padding: 0.25rem 0.5rem;
--_ui5_tc_headerItemContent_focus_border: 0.125rem solid var(--sapContent_FocusColor);
--_ui5_tc_headerItemContent_default_focus_border: 0.125rem solid transparent;
--_ui5_tc_headerItemContent_focus_border_radius: 0.5rem;
Expand Down
Loading