jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-08 18:39:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate tab-group to webawesome (#26951)

Browse Source
This commit is contained in:
Wendelin
2025-09-11 11:15:24 +02:00
committed by GitHub
parent 9e29693293
commit 1abedcd5f0
21 changed files with 324 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/ha-tab-group-tab.ts Normal file
View File

@@ -0,0 +1,42 @@
import Tab from "@home-assistant/webawesome/dist/components/tab/tab";
import { css, type CSSResultGroup } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-tab-group-tab")
export class HaTabGroupTab extends Tab {
static get styles(): CSSResultGroup {
return [
Tab.styles,
css`
:host {
font-size: var(--ha-font-size-m);
--wa-color-brand-on-quiet: var(
--ha-tab-active-text-color,
var(--primary-color)
);
2
--wa-color-neutral-on-quiet: var(--wa-color-brand-on-quiet);
opacity: 0.8;
color: inherit;
}
:host([active]:not([disabled])) {
opacity: 1;
}
@media (hover: hover) {
:host(:hover:not([disabled]):not([active])) .tab {
color: var(--wa-color-brand-on-quiet);
}
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-tab-group-tab": HaTabGroupTab;
}
}

64
src/components/ha-tab-group.ts Normal file
View File

@@ -0,0 +1,64 @@
import TabGroup from "@home-assistant/webawesome/dist/components/tab-group/tab-group";
import { css, type CSSResultGroup } from "lit";
import { customElement, property } from "lit/decorators";
import { DragScrollController } from "../common/controllers/drag-scroll-controller";
@customElement("ha-tab-group")
export class HaTabGroup extends TabGroup {
private _dragScrollController = new DragScrollController(this, {
selector: ".nav",
});
@property({ attribute: "tab-tag" }) override tabTag = "ha-tab-group-tab";
@property({ attribute: "tab-only", type: Boolean }) tabOnly = true;
protected override handleClick(event: MouseEvent) {
if (this._dragScrollController.scrolled) {
return;
}
super.handleClick(event);
}
static get styles(): CSSResultGroup {
return [
TabGroup.styles,
css`
:host {
--track-width: 2px;
--track-color: var(--ha-tab-track-color, var(--divider-color));
--indicator-color: var(
--ha-tab-indicator-color,
var(--primary-color)
);
--wa-color-neutral-on-quiet: var(--indicator-color);
}
.tab-group-top ::slotted(ha-tab-group-tab[active]) {
border-block-end: solid var(--track-width) var(--indicator-color);
margin-block-end: calc(-1 * var(--track-width));
}
.tab-group-start ::slotted(ha-tab-group-tab[active]) {
border-inline-end: solid var(--track-width) var(--indicator-color);
margin-inline-end: calc(-1 * var(--track-width));
}
.tab-group-end ::slotted(ha-tab-group-tab[active]) {
border-inline-start: solid var(--track-width) var(--indicator-color);
margin-inline-start: calc(-1 * var(--track-width));
}
.scroll-button::part(base):hover {
background-color: transparent;
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-tab-group": HaTabGroup;
}
}

88
src/components/sl-tab-group.ts
View File

@@ -1,88 +0,0 @@
import TabGroup from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.component";
import TabGroupStyles from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.styles";
import "@shoelace-style/shoelace/dist/components/tab/tab";
import { css } from "lit";
import { customElement } from "lit/decorators";
import { DragScrollController } from "../common/controllers/drag-scroll-controller";
@customElement("sl-tab-group")
// @ts-ignore
export class HaSlTabGroup extends TabGroup {
private _dragScrollController = new DragScrollController(this, {
selector: ".tab-group__nav",
});
override setAriaLabels() {
// Override the method to prevent setting aria-labels, as we don't use panels
// and don't want to set aria-labels for the tabs
}
override getAllPanels() {
// Override the method to prevent querying for panels
// and return an empty array instead
// as we don't use panels
return [];
}
// @ts-ignore
protected override handleClick(event: MouseEvent) {
if (this._dragScrollController.scrolled) {
return;
}
// @ts-ignore
super.handleClick(event);
}
static override styles = [
TabGroupStyles,
css`
:host {
--sl-spacing-3x-small: 0.125rem;
--sl-spacing-2x-small: 0.25rem;
--sl-spacing-x-small: 0.5rem;
--sl-spacing-small: 0.75rem;
--sl-spacing-medium: 1rem;
--sl-spacing-large: 1.25rem;
--sl-spacing-x-large: 1.75rem;
--sl-spacing-2x-large: 2.25rem;
--sl-spacing-3x-large: 3rem;
--sl-spacing-4x-large: 4.5rem;
--sl-transition-x-slow: 1000ms;
--sl-transition-slow: 500ms;
--sl-transition-medium: 250ms;
--sl-transition-fast: 150ms;
--sl-transition-x-fast: 50ms;
--transition-speed: var(--sl-transition-fast);
--sl-border-radius-small: 0.1875rem;
--sl-border-radius-medium: 0.25rem;
--sl-border-radius-large: 0.5rem;
--sl-border-radius-x-large: 1rem;
--sl-border-radius-circle: 50%;
--sl-border-radius-pill: 9999px;
--sl-color-neutral-600: inherit;
--sl-font-weight-semibold: var(--ha-font-weight-medium);
--sl-font-size-small: var(--ha-font-size-m);
--sl-color-primary-600: var(
--ha-tab-active-text-color,
var(--primary-color)
);
--track-color: var(--ha-tab-track-color, var(--divider-color));
--indicator-color: var(--ha-tab-indicator-color, var(--primary-color));
}
::slotted(sl-tab:not([active])) {
opacity: 0.8;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
// @ts-ignore
"sl-tab-group": HaSlTabGroup;
}
}