Skip to content

Commit

Permalink
chore: alert font and tab line primary (#1820)
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 Nov 11, 2024
1 parent a1bd5ce commit 3ae9b17
Show file tree
Hide file tree
Showing 6 changed files with 135 additions and 81 deletions.
80 changes: 45 additions & 35 deletions web-components/src/[sandbox]/examples/tabs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import "@/components/tabs/Tab";
import { TabCloseClickEvent } from "@/components/tabs/Tab";
import "@/components/tabs/TabPanel";
import "@/components/tabs/Tabs";
import { Tabs } from "@/components/tabs/Tabs";
import "@/components/toggle-switch/ToggleSwitch";
import "@/components/tooltip/Tooltip";
import svgWxm from "@img/wxm.svg";
Expand Down Expand Up @@ -525,29 +526,48 @@ export class TabsTemplateSandbox extends LitElement {

@customElement("tabs-justified-sandbox-example")
export class TabsJustifiedTemplateSandbox extends LitElement {
get tabsJustifiedTemplate(): TemplateResult {
getTabsTemplate(
draggable: boolean,
justified: boolean,
hug: boolean,
newMomentum: boolean,
variant: Tabs.TabVariant,
type: Tabs.TabsType
): TemplateResult {
return html`
<h3>md-tabs justified</h3>
<md-tabs draggable justified>
<md-tab slot="tab" name="History">
<md-tabs
?draggable=${draggable}
?justified=${justified}
?hug-tabs=${hug}
type=${type}
?newMomentum=${newMomentum}
variant=${variant}
>
<md-tab slot="tab" name="History" type=${type} ?newMomentum=${newMomentum} variant=${variant}>
<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">
<md-tab slot="tab" name="Messages" type=${type} ?newMomentum=${newMomentum} variant=${variant}>
<span>Messages</span>
</md-tab>
<md-tab-panel slot="panel">
<span>Content for "Messages"</span>
</md-tab-panel>
<md-tab slot="tab" name="History" type=${type} ?newMomentum=${newMomentum} variant=${variant}>
<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">
<md-tab slot="tab" name="History" type=${type} ?newMomentum=${newMomentum} variant=${variant}>
<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">
<md-tab slot="tab" name="History" type=${type} ?newMomentum=${newMomentum} variant=${variant}>
<md-icon name="alert_16"></md-icon>
</md-tab>
<md-tab-panel slot="panel">
Expand All @@ -557,35 +577,24 @@ export class TabsJustifiedTemplateSandbox extends LitElement {
`;
}

get tabsJustifiedTemplate(): TemplateResult {
return html`
<h3>md-tabs justified</h3>
${this.getTabsTemplate(true, true, false, false, "ghost", "line")}
`;
}

get tabsJustifiedHugTemplate(): TemplateResult {
return html`
<h3>md-tabs justified hug rounded primary</h3>
<md-tabs draggable justified hug-tabs type="rounded" newMomentum variant="primary">
<md-tab slot="tab" name="History" type="rounded" newMomentum variant="primary">
<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="rounded" newMomentum variant="primary">
<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="rounded" newMomentum variant="primary">
<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="rounded" newMomentum variant="primary">
<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>
<h3>md-tabs justified hug newMomentum rounded primary</h3>
${this.getTabsTemplate(true, true, true, true, "primary", "rounded")}
`;
}

get tabsLinePrimaryTemplate(): TemplateResult {
return html`
<h3>md-tabs line primary newMomentum primary</h3>
${this.getTabsTemplate(false, true, true, true, "primary", "line")}
`;
}

Expand Down Expand Up @@ -616,7 +625,8 @@ export class TabsJustifiedTemplateSandbox extends LitElement {
render(): TemplateResult {
return html`
<div style="max-width: 600px;">
${this.tabsJustifiedTemplate} ${this.tabsJustifiedHugTemplate} ${this.tabsJustifiedWithTooltipTemplate}
${this.tabsJustifiedTemplate} ${this.tabsJustifiedHugTemplate} ${this.tabsLinePrimaryTemplate}
${this.tabsJustifiedWithTooltipTemplate}
</div>
`;
}
Expand Down
41 changes: 22 additions & 19 deletions web-components/src/components/alert-banner/scss/alert-banner.scss
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,50 @@
/** @component alert-banner */
@use "settings" as constants;
@use "mixins";

@include exports("md-alert-banner") {
.md-alert-banner {
padding: $alert-banner__padding;
padding: constants.$alert-banner__padding;
position: relative;
text-align: center;
border-radius: var(--alert-banner-border-radius);
font-family: $brand-font-regular;
font-weight: var(--brand-font-weight-regular);
line-height: constants.$alert-banner__line-height;

&.md-alert-banner {
&--default {
@include alert-banner-color(
var(--alert-banner-default-bg-color, $alert-banner-info__background),
var(--alert-banner-default-text-color, $alert-banner-info__color)
@include mixins.alert-banner-color(
var(--alert-banner-default-bg-color),
var(--alert-banner-default-text-color)
);
}

&--warning {
@include alert-banner-color(
var(--alert-banner-warning-bg-color, $alert-banner-warning__background),
var(--alert-banner-warning-text-color, $alert-banner-warning__color)
@include mixins.alert-banner-color(
var(--alert-banner-warning-bg-color),
var(--alert-banner-warning-text-color)
);
}

&--error {
@include alert-banner-color(
var(--alert-banner-error-bg-color, $alert-banner-error__background),
var(--alert-banner-error-text-color, $alert-banner-error__color)
@include mixins.alert-banner-color(
var(--alert-banner-error-bg-color),
var(--alert-banner-error-text-color)
);
}

&--success {
@include alert-banner-color(
var(--alert-banner-success-bg-color, $alert-banner-info__background),
var(--alert-banner-success-text-color, $alert-banner-info__color)
@include mixins.alert-banner-color(
var(--alert-banner-success-bg-color),
var(--alert-banner-success-text-color)
);
}
}

&__text {
font-size: $alert-banner__font-size;
padding: $alert-banner-text__padding;
font-size: constants.$alert-banner__font-size;
padding: constants.$alert-banner-text__padding;
text-align: center;

a {
Expand All @@ -52,11 +55,11 @@

&__close {
cursor: pointer;
height: $alert-banner-close__size;
height: constants.$alert-banner-close__size;
position: absolute;
right: $alert-banner-close__size;
top: $alert-banner-close__top-space;
width: $alert-banner-close__size;
right: constants.$alert-banner-close__size;
top: constants.$alert-banner-close__top-space;
width: constants.$alert-banner-close__size;
}
}
@media (forced-colors: active) {
Expand Down
3 changes: 0 additions & 3 deletions web-components/src/components/alert-banner/scss/module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
@import "@/wc_scss/tools/functions/core";

// Settings
@import "@/wc_scss/colors/settings-base.scss";
@import "@/wc_scss/typography/settings";

// Alert-banner Specific
@import "settings";
@import "mixins";
@import "alert-banner";
22 changes: 8 additions & 14 deletions web-components/src/components/alert-banner/scss/settings.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
$alert-banner__font-size: var(--body-primary-font-size ,rem-calc(14));
$alert-banner__padding: rem-calc(12);
$alert-banner-text__padding: 0 rem-calc(28);
$alert-banner-close__size: rem-calc(16);
$alert-banner-close__top-space: rem-calc(12);
$alert-banner-column__border: 1px solid transparent;
@use "@/wc_scss/tools/functions/core";

$alert-banner-info__color: $md-theme-70;
$alert-banner-info__background: $md-theme-10;

$alert-banner-warning__color: $md-yellow-70;
$alert-banner-warning__background: $md-yellow-10;

$alert-banner-error__color: $md-red-70;
$alert-banner-error__background: $md-red-10;
$alert-banner__font-size: core.rem-calc(14);
$alert-banner__line-height: core.rem-calc(20);
$alert-banner__padding: core.rem-calc(12);
$alert-banner-text__padding: 0 core.rem-calc(28);
$alert-banner-close__size: core.rem-calc(16);
$alert-banner-close__top-space: core.rem-calc(12);
$alert-banner-column__border: 1px solid transparent;
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 @@ -195,8 +195,9 @@ export namespace Tab {
part="tab"
class="${classMap({
closable: this.closable !== "",
isPill: this.type === "pill",
isRounded: this.type === "rounded",
pill: this.type === "pill",
rounded: this.type === "rounded",
line: this.type === "line",
primary: this.variant === "primary",
newMomentum: this.newMomentum,
onlyIcon: this.onlyIcon
Expand Down
65 changes: 57 additions & 8 deletions web-components/src/components/tabs/scss/tab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}
}

:host([selected]) button.isPill {
:host([selected]) button.pill {
box-shadow: none;
border-radius: $tab-new-border-radius;
background-color: var(--tabs-default-pressed);
Expand All @@ -29,7 +29,7 @@
}
}

:host([selected]) button.isRounded {
:host([selected]) button.rounded {
box-shadow: $tab-rounded-active-border;
border-radius: $tab-rounded-border-radius;

Expand All @@ -39,7 +39,6 @@
}

:host([selected]) button.primary {

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

Expand All @@ -58,7 +57,57 @@
}
}

:host([selected]) button.isPill.onlyIcon {
button.primary {
font-family: var(--brand-font-bold);
font-weight: var(--brand-font-weight-bold);
color: var(--tabs-default-active);
}

button.primary.line {
background: $tab-none-bg;

&:hover {
background-color: var(--tabs-default-hover);
color: var(--tabs-default-active);
}

&:active {
background-color: var(--tabs-default-pressed);
color: var(--tabs-default-active);
outline: none;
}

&:disabled,
&.disabled {
background: $tab-none-bg;
color: var(--tabs-default-disabled) !important;
}
}

:host([selected]) button.primary.line {
background: $tab-none-bg;
color: var(--tabs-default-active);

&:hover {
background-color: var(--tabs-default-hover);
color: var(--tabs-default-active);
}

&:active {
background-color: var(--tabs-default-pressed);
color: var(--tabs-default-active);
outline: none;
}

&:disabled,
&.disabled {
background: $tab-none-bg;
color: var(--tabs-default-disabled) !important;
}
}


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

&:active {
Expand All @@ -79,7 +128,7 @@
}
}

:host([selected][vertical]) button.isPill {
:host([selected][vertical]) button.pill {
border-radius: $tab-new-border-radius;
box-shadow: none;

Expand All @@ -88,7 +137,7 @@
}
}

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

&:active {
Expand Down Expand Up @@ -268,11 +317,11 @@ button.newMomentum {
}
}

button.isPill {
button.pill {
border-radius: $tab-new-border-radius;
}

button.isPill.onlyIcon {
button.pill.onlyIcon {
border-radius: 100%;
}

Expand Down

0 comments on commit 3ae9b17

Please sign in to comment.