{this.renderScrollButton("start")}
-
(this.activeIndicatorContainerEl = el)}
- >
-
(this.activeIndicatorEl = el as HTMLElement)}
- style={indicatorStyle}
- />
-
{this.renderScrollButton("end")}
@@ -367,11 +334,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
event.stopPropagation();
}
- @Listen("calciteInternalTabIconChanged")
- iconStartChangeHandler(): void {
- this.updateActiveIndicator();
- }
-
//--------------------------------------------------------------------------
//
// Events
@@ -432,12 +394,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
});
}
- private activeIndicatorEl: HTMLElement;
-
- private activeIndicatorContainerEl: HTMLDivElement;
-
- private containerEl: HTMLDivElement;
-
private effectiveDir: Direction = "ltr";
private lastScrollWheelAxis: "x" | "y" = "x";
@@ -450,12 +406,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
private resizeObserver = createObserver("resize", () => {
this.updateScrollingState();
-
- if (!this.activeIndicatorEl) {
- return;
- }
-
- this.updateActiveIndicator();
});
private get scrollerButtonWidth(): number {
@@ -469,20 +419,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
//
//--------------------------------------------------------------------------
- private updateActiveIndicator(): void {
- const tabTitleScrollLeft = this.tabTitleContainerEl?.scrollLeft;
- const containerScrollLeft = this.containerEl?.scrollLeft;
- const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
- const tabLeft = this.selectedTitle?.offsetLeft;
- const tabWidth = this.selectedTitle?.offsetWidth;
- const offsetRight = navWidth - tabLeft - tabWidth;
- const offsetBase = this.effectiveDir === "ltr" ? tabLeft : offsetRight;
- const multiplier = this.effectiveDir === "ltr" ? -1 : 1;
-
- this.indicatorOffset = offsetBase + multiplier * (containerScrollLeft + tabTitleScrollLeft);
- this.indicatorWidth = this.selectedTitle?.offsetWidth;
- }
-
private onTabTitleWheel = (event: WheelEvent): void => {
event.preventDefault();
@@ -504,7 +440,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
const scrollByX = (this.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
(event.currentTarget as HTMLDivElement).scrollBy(scrollByX, 0);
- requestAnimationFrame(() => this.updateActiveIndicator());
};
private onSlotChange = (event: Event): void => {
@@ -517,8 +452,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
this.calciteInternalTabNavSlotChange.emit(slottedElements);
};
- private storeContainerRef = (el: HTMLDivElement) => (this.containerEl = el);
-
private storeTabTitleWrapperRef = (el: HTMLDivElement) => {
this.tabTitleContainerEl = el;
this.intersectionObserver = createObserver("intersection", () => this.updateScrollingState(), {
@@ -646,7 +579,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
}
private onTabTitleScroll = (): void => {
- this.updateActiveIndicator();
this.updateScrollingState();
};
@@ -699,7 +631,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
}
requestAnimationFrame(() => {
- this.updateActiveIndicator();
tabTitles[this.selectedTabId].focus();
});
}
diff --git a/packages/calcite-components/src/components/tab-title/resources.ts b/packages/calcite-components/src/components/tab-title/resources.ts
index f0d85f55681..a2891547cb3 100644
--- a/packages/calcite-components/src/components/tab-title/resources.ts
+++ b/packages/calcite-components/src/components/tab-title/resources.ts
@@ -1,12 +1,17 @@
+import { Scale } from "../interfaces";
+
export const CSS = {
closeButton: "close-button",
container: "container",
+ containerBottom: "container--bottom",
content: "content",
contentHasText: "content--has-text",
iconEnd: "icon-end",
iconPresent: "icon-present",
iconStart: "icon-start",
titleIcon: "calcite-tab-title--icon",
+ scale: (scale: Scale) => `scale-${scale}` as const,
+ selectedIndicator: "selected-indicator",
};
export const ICONS = {
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
index d9ad2e31879..3146dba8ca5 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
+++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
@@ -343,54 +343,4 @@ describe("calcite-tab-title", () => {
await page.keyboard.press("Enter");
expect(activeEventSpy).toHaveReceivedEventTimes(2);
});
-
- describe("when the active tab-title changes", () => {
- it("should move the active tab nav indicator", async () => {
- const page = await newE2EPage({
- html: `
-
-
- Tab 1 Title
- Tab 2 Title
- Tab 3 Title
- Tab 4 Title
-
- Tab 1 Content
- Tab 2 Content
- Tab 3 Content
- Tab 4 Content
-
- `,
- });
- const tabTitle1 = await page.find(".title-1");
- const tabTitle2 = await page.find(".title-2");
-
- expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 2 Title");
- expect(
- await page.evaluate(() => {
- return (
- document
- .querySelector("calcite-tab-nav")
- .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement
- ).style.left;
- }),
- ).not.toEqual("0px");
-
- // toggle new selected tab-title
- await tabTitle2.removeAttribute("selected");
- await tabTitle1.setAttribute("selected", true);
- await page.waitForChanges();
-
- expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 1 Title");
- expect(
- await page.evaluate(() => {
- return (
- document
- .querySelector("calcite-tab-nav")
- .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement
- ).style.left;
- }),
- ).toEqual("0px");
- });
- });
});
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss
index f995706fe33..9be58245133 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.scss
+++ b/packages/calcite-components/src/components/tab-title/tab-title.scss
@@ -12,29 +12,38 @@
}
.content {
- @apply flex items-center justify-center;
+ @apply flex items-center justify-center h-full mb-0.5 relative box-border;
}
.scale-s {
.content {
@apply text-n2h py-1;
}
+ .close-button {
+ @apply w-5;
+ }
}
.scale-m {
.content {
@apply text-n1h py-2;
}
+ .close-button {
+ @apply w-7;
+ }
}
.scale-l {
.content {
@apply text-0h py-2.5;
}
+ .close-button {
+ @apply w-8;
+ }
}
:host([closable]) .content {
- @apply h-full box-border border-b-color-transparent;
+ @apply border-b-color-transparent;
}
:host([layout="inline"]),
@@ -55,8 +64,7 @@
}
.container {
- @apply border-b-2
- border-b-color-transparent
+ @apply relative
box-border
content-center
cursor-pointer
@@ -69,15 +77,82 @@
text-n1h
transition-default
w-full;
+}
+
+.selected-indicator {
+ @apply absolute
+ block
+ w-full
+ h-0.5
+ transition-default;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ inline-size: 100%;
+}
+
+.container--bottom .selected-indicator {
+ inset-block-end: unset;
+ inset-block-start: 0;
+}
+
+:host([bordered]) .selected-indicator {
+ inset-block-start: 0;
+ inset-block-end: unset;
+ inset-inline-start: -1px;
+ inset-inline-end: 0;
+ inline-size: calc(100% + var(--calcite-spacing-base));
+}
+
+:host([bordered][selected]) .container::after {
+ @apply absolute
+ block
+ w-full
+ h-0.5
+ transition-default;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ inline-size: 100%;
+ background: var(--calcite-color-foreground-1);
+ content: "";
+}
- border-block-end-style: solid;
+:host([bordered][selected]) .container.container--bottom::after {
+ inset-block-start: -1px;
}
-:host([position="bottom"]) .container {
- @apply border-t-color-transparent
- border-b-0
- border-t-2;
- border-block-start-style: solid;
+:host([bordered][selected]:hover) .container::after {
+ background: var(--calcite-color-foreground-2);
+}
+
+:host([bordered][selected]:focus) .container::after {
+ background: transparent;
+}
+
+:host([bordered]) .container--bottom .selected-indicator {
+ inset-block-start: unset;
+ inset-block-end: 0;
+}
+
+:host([selected]) .selected-indicator,
+:host([selected]:hover) .selected-indicator {
+ @apply bg-brand;
+}
+
+:host(:hover) .selected-indicator {
+ background-color: var(--calcite-color-border-3);
+}
+
+:host(:focus) .selected-indicator,
+:host(:active) .selected-indicator {
+ background-color: var(--calcite-color-brand);
+}
+
+@media (forced-colors: active) {
+ .selected-indicator {
+ background-color: highlight;
+ }
}
:host([closed]) {
@@ -125,11 +200,11 @@
}
.content--has-text .calcite-tab-title--icon.icon-start {
- margin-inline-end: theme("margin.2");
+ margin-inline-end: var(--calcite-spacing-sm);
}
.content--has-text .calcite-tab-title--icon.icon-end {
- margin-inline-start: theme("margin.2");
+ margin-inline-start: var(--calcite-spacing-sm);
}
.close-button {
@@ -142,25 +217,29 @@
focus-base
items-center
justify-center
- p-1
+ h-full
self-center
text-color-3
transition-default;
-
background-color: var(--calcite-button-transparent-1);
- margin-inline-start: auto;
+ // compensate for the added border on parent and ensure focus alignment
+ margin-inline-end: var(--calcite-spacing-px);
+ box-shadow:
+ var(--calcite-spacing-px) 0 0 0 transparent,
+ 0 var(--calcite-spacing-xxs) 0 0 transparent;
+ block-size: calc(100% - var(--calcite-spacing-xxs));
+ &:hover {
+ box-shadow: var(--calcite-spacing-px) 0 0 0 var(--calcite-color-foreground-3);
+ }
&:focus {
- @apply focus-inset;
-
- // ⚠️overriding outline-offset should be avoided as it won't honor --calcite-color-focus-offset-invert
- outline-offset: -1px;
+ @apply focus-normal;
}
&:focus,
&:hover {
@apply text-color-1;
- background-color: var(--calcite-color-foreground-2);
+ background-color: var(--calcite-color-foreground-3);
}
&:active {
@@ -176,7 +255,7 @@
// compensate for spacing when no hastext and two icons
:host([icon-start][icon-end]) {
.calcite-tab-title--icon:first-child {
- margin-inline-end: theme("margin.2");
+ margin-inline-end: var(--calcite-spacing-sm);
}
}
@@ -186,33 +265,28 @@
}
:host([bordered][selected]) {
- box-shadow: inset 0 -2px var(--calcite-color-foreground-1);
+ box-shadow: inset 0 -1px var(--calcite-color-foreground-1);
}
:host([bordered][selected][position="bottom"]) {
- box-shadow: inset 0 2px 0 var(--calcite-color-foreground-1);
+ box-shadow: inset 0 var(--calcite-spacing-base) 0 var(--calcite-color-foreground-1);
}
:host([bordered]:hover) {
.container {
- background-color: var(--calcite-color-transparent-hover);
+ background-color: var(--calcite-color-foreground-2);
}
}
:host([closable]) .container,
:host([bordered]) .container {
- border-inline-start: 1px solid transparent;
- border-inline-end: 1px solid transparent;
+ border-inline-start: var(--calcite-spacing-px) solid transparent;
+ border-inline-end: var(--calcite-spacing-px) solid transparent;
.close-button {
- margin-inline: 0;
+ margin-inline-start: var(--calcite-spacing-sm);
}
}
-:host([closable][position="bottom"]) .container,
-:host([bordered][position="bottom"]) .container {
- border-block-start-style: unset;
-}
-
:host([selected][bordered]) .container {
border-inline-start-color: var(--calcite-color-border-1);
border-inline-end-color: var(--calcite-color-border-1);
@@ -263,7 +337,7 @@
border-block-end-style: solid;
}
- :host([bordered][position="bottom"]) .container {
+ :host([bordered]) .container--bottom {
border-block-start-style: solid;
}
@@ -271,7 +345,7 @@
border-block-end-style: none;
}
- :host([bordered][position="bottom"][selected]) .container {
+ :host([bordered][selected]) .container--bottom {
border-block-start-style: none;
}
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx
index 7ff878514d5..8d79c1d504d 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.tsx
+++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx
@@ -220,9 +220,10 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
this.resizeObserver?.observe(el)}
@@ -233,6 +234,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
{this.iconEnd ? iconEndEl : null}
{this.renderCloseButton()}
+