Skip to content

Commit

Permalink
chore: tab style updates (#1809)
Browse files Browse the repository at this point in the history 
Co-authored-by: James Nestor <jnestor@cisco.com>
  • Loading branch information
@NotNestor @jnestorCisco
NotNestor and jnestorCisco authored Oct 31, 2024
1 parent f2b7e51 commit f632bf0
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 28 deletions.
48 changes: 41 additions & 7 deletions web-components/src/[sandbox]/examples/tabs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -557,6 +557,38 @@ export class TabsJustifiedTemplateSandbox extends LitElement {
`;
}

get tabsJustifiedHugTemplate(): TemplateResult {
return html`
<h3>md-tabs justified hug primaryPill</h3>
<md-tabs draggable justified hug-tabs type="primaryPill" newMomentum>
<md-tab slot="tab" name="History" type="primaryPill" newMomentum>
<span>All</span>
</md-tab>
<md-tab-panel slot="panel">
<span>Content for "Contact History"</span>
</md-tab-panel>
<md-tab slot="tab" name="History" type="primaryPill" newMomentum>
<span style="height: 16px; width: 16px; height: 100%"><img src="${svgWxm}" /></span>
</md-tab>
<md-tab-panel slot="panel">
<span>Content for "WxM"</span>
</md-tab-panel>
<md-tab slot="tab" name="History" type="primaryPill" newMomentum>
<md-icon name="browser-bold" size="16" iconSet="momentumDesign"></md-icon>
</md-tab>
<md-tab-panel slot="panel">
<span>Content for "Third Tab"</span>
</md-tab-panel>
<md-tab slot="tab" name="History" type="primaryPill" newMomentum>
<md-icon name="alert_16"></md-icon>
</md-tab>
<md-tab-panel slot="panel">
<span>Content for "Fourth Tab"</span>
</md-tab-panel>
</md-tabs>
`;
}

get tabsJustifiedWithTooltipTemplate(): TemplateResult {
return html`
<h3>md-tabs justified with tooltip</h3>
Expand All @@ -583,7 +615,9 @@ export class TabsJustifiedTemplateSandbox extends LitElement {

render(): TemplateResult {
return html`
<div style="max-width: 600px;">${this.tabsJustifiedTemplate}${this.tabsJustifiedWithTooltipTemplate}</div>
<div style="max-width: 600px;">
${this.tabsJustifiedTemplate} ${this.tabsJustifiedHugTemplate} ${this.tabsJustifiedWithTooltipTemplate}
</div>
`;
}
}
Expand Down Expand Up @@ -712,7 +746,7 @@ export const tabsTemplate = html`
<br />
<h3>md-tabs draggable each with a closable property (New Momentum)</h3>
<div>
<md-tabs selected="0" draggable newMomentum type="Pill">
<md-tabs selected="0" draggable newMomentum type="pill">
<md-tab slot="tab" name="History">
<span>All</span>
</md-tab>
Expand Down Expand Up @@ -809,29 +843,29 @@ export const tabsTemplate = html`
<br />
<div style="height: 300px;">
<h3>md-tabs vertical (New Momentum)</h3>
<md-tabs direction="vertical" newMomentum type="Pill">
<md-tab slot="tab" name="History" newMomentum type="Pill">
<md-tabs direction="vertical" newMomentum type="pill">
<md-tab slot="tab" name="History" newMomentum type="pill">
<md-icon name="recents-bold" size="16" iconSet="momentumDesign"></md-icon>
<span>Contact History</span>
</md-tab>
<md-tab-panel slot="panel">
<span>Content for "Contact History"</span>
</md-tab-panel>
<md-tab slot="tab" name="History" newMomentum type="Pill">
<md-tab slot="tab" name="History" newMomentum type="pill">
<span style="height: 16px; width: 16px"><img src="${svgWxm}" /></span>
<span>Cisco WxM</span>
</md-tab>
<md-tab-panel slot="panel">
<span>Content for "WxM"</span>
</md-tab-panel>
<md-tab slot="tab" name="History" newMomentum type="Pill">
<md-tab slot="tab" name="History" newMomentum type="pill">
<md-icon name="alarm_16"></md-icon>
<span>Cisco Answer</span>
</md-tab>
<md-tab-panel slot="panel">
<span>Content for "Cisco Answer"</span>
</md-tab-panel>
<md-tab slot="tab" name="History" newMomentum type="Pill">
<md-tab slot="tab" name="History" newMomentum type="pill">
<md-icon name="camera-photo_16"></md-icon>
<span>Cisco Turbo</span>
</md-tab>
Expand Down
5 changes: 3 additions & 2 deletions web-components/src/components/tabs/Tab.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export namespace Tab {
@property({ type: String, attribute: "name" }) name = "";
@property({ type: Boolean, attribute: "cross-visible" }) isCrossVisible = false;
@property({ type: String }) ariaRole = "tab";
@property({ type: String }) type: Tabs.TabsType = "Line";
@property({ type: String }) type: Tabs.TabsType = "line";
@property({ type: Boolean }) newMomentum = false;
@property({ type: Boolean }) onlyIcon = false;

Expand Down Expand Up @@ -194,7 +194,8 @@ export namespace Tab {
part="tab"
class="${classMap({
closable: this.closable !== "",
isPill: this.type === "Pill",
isPill: this.type === "pill" || this.type === "primaryPill",
primary: this.type === "primaryPill",
newMomentum: this.newMomentum,
onlyIcon: this.onlyIcon
})}"
Expand Down
7 changes: 5 additions & 2 deletions web-components/src/components/tabs/Tabs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,12 @@ export namespace Tabs {
type TabsViewportDataList = TabViewportData[];

type TabId = Element["id"];
export type TabsType = "Line" | "Pill";
export type TabsType = "line" | "pill" | "primaryPill";

@customElementWithCheck("md-tabs")
export class ELEMENT extends ResizeMixin(RovingTabIndexMixin(SlottedMixin(LitElement))) {
@property({ type: Boolean }) justified = false;
@property({ type: Boolean, attribute: "hug-tabs" }) hugTabs = false;
@property({ type: String }) overflowLabel = "More Tabs";
@property({ type: Boolean, attribute: "draggable" }) draggable = false;
@property({ type: String }) direction: "horizontal" | "vertical" = "horizontal";
Expand All @@ -65,7 +66,7 @@ export namespace Tabs {
@property({ type: String, attribute: "tabs-id" }) tabsId = "";
@property({ type: Boolean, attribute: "persist-selection" }) persistSelection = false;
@property({ type: String, attribute: "comp-unique-id" }) compUniqueId = "";
@property({ type: String }) type: Tabs.TabsType = "Line";
@property({ type: String }) type: Tabs.TabsType = "line";
@property({ type: Boolean }) newMomentum = false;

@internalProperty() private isMoreTabMenuVisible = false;
Expand Down Expand Up @@ -1087,6 +1088,7 @@ export namespace Tabs {
part="tabs-list"
class="md-tab__list ${classMap({
"md-tab__justified": this.justified && !this.isMoreTabMenuVisible,
"md-tab__hug": this.hugTabs,
"no-tabs-visible": this.noTabsVisible,
"vertical-tab-list": this.direction === "vertical",
"tab-new-momentum": this.newMomentum
Expand All @@ -1103,6 +1105,7 @@ export namespace Tabs {
id="visible-tabs-list"
class="visible-tabs-container ${classMap({
"md-tab__justified": this.justified && !this.isMoreTabMenuVisible,
"md-tab__hug": this.hugTabs,
"visible-new-tabs": this.newMomentum
})}"
>
Expand Down
38 changes: 27 additions & 11 deletions web-components/src/components/tabs/scss/tab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
:host([selected]) button {
box-shadow: var(--tabs-default-active-bottom-border, $tab-active-border);
border-radius: $tab-focus-border-radius $tab-focus-border-radius 0 0;
color: var(--tabs-default-active, $lm-tabs-default-active-light);
color: var(--tabs-default-active);
font-family: var(--brand-font-bold);
font-weight: var(--brand-font-weight-bold);

Expand All @@ -22,13 +22,33 @@
:host([selected]) button.isPill {
box-shadow: none;
border-radius: $tab-new-border-radius;
background-color: var(--tabs-default-pressed, $lm-tabs-default-pressed-light);
background-color: var(--tabs-default-pressed);

&:active {
border-radius: $tab-new-border-radius;
}
}

:host([selected]) button.primary {

background-color: var(--button-primary-bg-color);
color: var(--button-primary-text-color);

&:hover {
background-color: var(--button-primary-hover-bg-color);
}

&:active {
background-color: var(--button-primary-pressed-bg-color);
}

&:disabled,
&.disabled {
background-color: var(--button-disabled-bg-color);
color: var(--button-disabled-text-color);
}
}

:host([selected]) button.isPill.onlyIcon {
border-radius: 100%;

Expand Down Expand Up @@ -71,11 +91,7 @@
button {
outline: $tab-main-focus-border !important;
outline-offset: rem-calc(-2);
box-shadow: var(--tabs-default-focus-shadow, $lm-tabs-default-focus-shadow-light) !important;
}

button.newMomentum {
background-color: var(--tabs-default-pressed, $lm-tabs-default-pressed-light);
box-shadow: var(--tabs-default-focus-shadow) !important;
}
}

Expand Down Expand Up @@ -104,12 +120,12 @@
justify-content: center;
align-items: center;
gap: 0.5rem;

max-width: 100%;
height: 100%;
}

md-tooltip{
md-tooltip {
display: inline-flex;
align-items: center;
}
Expand Down Expand Up @@ -205,7 +221,7 @@ button {
}

span {
@include tab-button-span;
@include tab-button-span;
}

&:hover {
Expand Down Expand Up @@ -235,7 +251,7 @@ button.newMomentum {
justify-content: center;
}

:host([vertical]) {
:host([vertical]) {
button {
.tab-slot {
justify-content: flex-start;
Expand Down
21 changes: 15 additions & 6 deletions web-components/src/components/tabs/scss/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,11 @@
}

.visible-new-tabs {
width: auto;
gap: $tab-between-gap;

&:not(.md-tab__justified) {
width: auto;
gap: $tab-between-gap;
}
}

.md-tab__list {
Expand Down Expand Up @@ -93,10 +96,10 @@
text-align: left;
padding-left: 16px;
padding-right: 16px;
box-shadow: none;
box-shadow: none;
}
&[selected]::part(tab){
background-color: var(--md-menu-active-background-color);
&[selected]::part(tab) {
background-color: var(--md-menu-active-background-color);
}
}
}
Expand Down Expand Up @@ -159,6 +162,12 @@ md-menu-overlay {
display: inline-block;
width: 100%;
}

&.md-tab__hug {
md-tab {
width: auto;
}
}
}

.md-tab__list ::slotted([slot="tab"][selected]),
Expand Down Expand Up @@ -230,7 +239,7 @@ md-menu-overlay {
text-align: left;

&[selected] {
color: var(--tabs-default-active, $lm-tabs-default-active-light);
color: var(--tabs-default-active);
}
}
}
Expand Down

0 comments on commit f632bf0

Please sign in to comment.