Skip to content

Commit 1abedcd

Browse files
wendevlinwendevlin
authored
Migrate tab-group to webawesome (#26951)
1 parent 9e29693 commit 1abedcd

File tree

21 files changed

+323
-256
lines changed

21 files changed

+323
-256
lines changed

‎hassio/src/dialogs/network/dialog-hassio-network.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import "../../../../src/components/ha-list";
1515
import "../../../../src/components/ha-list-item";
1616
import "../../../../src/components/ha-password-field";
1717
import "../../../../src/components/ha-radio";
18+
import "../../../../src/components/ha-tab-group";
19+
import "../../../../src/components/ha-tab-group-tab";
1820
import "../../../../src/components/ha-textfield";
1921
import type { HaTextField } from "../../../../src/components/ha-textfield";
2022
import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -36,7 +38,6 @@ import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
3638
import { haStyleDialog } from "../../../../src/resources/styles";
3739
import type { HomeAssistant } from "../../../../src/types";
3840
import type { HassioNetworkDialogParams } from "./show-dialog-network";
39-
import "../../../../src/components/sl-tab-group";
4041

4142
const IP_VERSIONS = ["ipv4", "ipv6"];
4243

@@ -114,19 +115,19 @@ export class DialogHassioNetwork
114115
></ha-icon-button>
115116
</ha-header-bar>
116117
${this._interfaces.length > 1
117-
? html`<sl-tab-group @sl-tab-show=${this._handleTabActivated}
118+
? html`<ha-tab-group @wa-tab-show=${this._handleTabActivated}
118119
>${this._interfaces.map(
119120
(device, index) =>
120-
html`<sl-tab
121+
html`<ha-tab-group-tab
121122
slot="nav"
122123
.id=${device.interface}
123124
.panel=${index.toString()}
124125
.active=${this._curTabIndex === index}
125126
>
126127
${device.interface}
127-
</sl-tab>`
128+
</ha-tab-group-tab>`
128129
)}
129-
</sl-tab-group>`
130+
</ha-tab-group>`
130131
: ""}
131132
</div>
132133
${cache(this._renderTab())}
@@ -627,10 +628,10 @@ export class DialogHassioNetwork
627628
--mdc-list-side-padding: 10px;
628629
}
629630
630-
sl-tab {
631+
ha-tab-group-tab {
631632
flex: 1;
632633
}
633-
sl-tab::part(base) {
634+
ha-tab-group-tab::part(base) {
634635
width: 100%;
635636
justify-content: center;
636637
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"@fullcalendar/list": "6.1.19",
5252
"@fullcalendar/luxon3": "6.1.19",
5353
"@fullcalendar/timegrid": "6.1.19",
54-
"@home-assistant/webawesome": "3.0.0-beta.4.ha.1",
54+
"@home-assistant/webawesome": "3.0.0-beta.4.ha.2",
5555
"@lezer/highlight": "1.2.1",
5656
"@lit-labs/motion": "1.0.9",
5757
"@lit-labs/observers": "2.0.6",

‎src/components/ha-tab-group-tab.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Tab from "@home-assistant/webawesome/dist/components/tab/tab";
2+
import { css, type CSSResultGroup } from "lit";
3+
import { customElement } from "lit/decorators";
4+
5+
@customElement("ha-tab-group-tab")
6+
export class HaTabGroupTab extends Tab {
7+
static get styles(): CSSResultGroup {
8+
return [
9+
Tab.styles,
10+
css`
11+
:host {
12+
font-size: var(--ha-font-size-m);
13+
--wa-color-brand-on-quiet: var(
14+
--ha-tab-active-text-color,
15+
var(--primary-color)
16+
);
17+
2
18+
--wa-color-neutral-on-quiet: var(--wa-color-brand-on-quiet);
19+
opacity: 0.8;
20+
21+
color: inherit;
22+
}
23+
24+
:host([active]:not([disabled])) {
25+
opacity: 1;
26+
}
27+
28+
@media (hover: hover) {
29+
:host(:hover:not([disabled]):not([active])) .tab {
30+
color: var(--wa-color-brand-on-quiet);
31+
}
32+
}
33+
`,
34+
];
35+
}
36+
}
37+
38+
declare global {
39+
interface HTMLElementTagNameMap {
40+
"ha-tab-group-tab": HaTabGroupTab;
41+
}
42+
}

‎src/components/ha-tab-group.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import TabGroup from "@home-assistant/webawesome/dist/components/tab-group/tab-group";
2+
import { css, type CSSResultGroup } from "lit";
3+
import { customElement, property } from "lit/decorators";
4+
import { DragScrollController } from "../common/controllers/drag-scroll-controller";
5+
6+
@customElement("ha-tab-group")
7+
export class HaTabGroup extends TabGroup {
8+
private _dragScrollController = new DragScrollController(this, {
9+
selector: ".nav",
10+
});
11+
12+
@property({ attribute: "tab-tag" }) override tabTag = "ha-tab-group-tab";
13+
14+
@property({ attribute: "tab-only", type: Boolean }) tabOnly = true;
15+
16+
protected override handleClick(event: MouseEvent) {
17+
if (this._dragScrollController.scrolled) {
18+
return;
19+
}
20+
super.handleClick(event);
21+
}
22+
23+
static get styles(): CSSResultGroup {
24+
return [
25+
TabGroup.styles,
26+
css`
27+
:host {
28+
--track-width: 2px;
29+
--track-color: var(--ha-tab-track-color, var(--divider-color));
30+
--indicator-color: var(
31+
--ha-tab-indicator-color,
32+
var(--primary-color)
33+
);
34+
--wa-color-neutral-on-quiet: var(--indicator-color);
35+
}
36+
37+
.tab-group-top ::slotted(ha-tab-group-tab[active]) {
38+
border-block-end: solid var(--track-width) var(--indicator-color);
39+
margin-block-end: calc(-1 * var(--track-width));
40+
}
41+
42+
.tab-group-start ::slotted(ha-tab-group-tab[active]) {
43+
border-inline-end: solid var(--track-width) var(--indicator-color);
44+
margin-inline-end: calc(-1 * var(--track-width));
45+
}
46+
47+
.tab-group-end ::slotted(ha-tab-group-tab[active]) {
48+
border-inline-start: solid var(--track-width) var(--indicator-color);
49+
margin-inline-start: calc(-1 * var(--track-width));
50+
}
51+
52+
.scroll-button::part(base):hover {
53+
background-color: transparent;
54+
}
55+
`,
56+
];
57+
}
58+
}
59+
60+
declare global {
61+
interface HTMLElementTagNameMap {
62+
"ha-tab-group": HaTabGroup;
63+
}
64+
}

‎src/components/sl-tab-group.ts‎

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎src/dialogs/more-info/controls/more-info-weather.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { CSSResultGroup, PropertyValues } from "lit";
33
import { LitElement, css, html, nothing } from "lit";
44
import { customElement, property, state } from "lit/decorators";
55
import memoizeOne from "memoize-one";
6+
import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
67
import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
78
import { formatTime } from "../../../common/datetime/format_time";
89
import { formatNumber } from "../../../common/number/format_number";
@@ -11,8 +12,9 @@ import "../../../components/ha-relative-time";
1112
import "../../../components/ha-spinner";
1213
import "../../../components/ha-state-icon";
1314
import "../../../components/ha-svg-icon";
15+
import "../../../components/ha-tab-group";
16+
import "../../../components/ha-tab-group-tab";
1417
import "../../../components/ha-tooltip";
15-
import "../../../components/sl-tab-group";
1618
import type {
1719
ForecastEvent,
1820
ModernForecastType,
@@ -30,7 +32,6 @@ import {
3032
weatherSVGStyles,
3133
} from "../../../data/weather";
3234
import type { HomeAssistant } from "../../../types";
33-
import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
3435

3536
@customElement("more-info-weather")
3637
class MoreInfoWeather extends LitElement {
@@ -299,18 +300,18 @@ class MoreInfoWeather extends LitElement {
299300
${this.hass.localize("ui.card.weather.forecast")}:
300301
</div>
301302
${supportedForecasts?.length > 1
302-
? html`<sl-tab-group @sl-tab-show=${this._handleForecastTypeChanged}>
303+
? html`<ha-tab-group @wa-tab-show=${this._handleForecastTypeChanged}>
303304
${supportedForecasts.map(
304305
(forecastType) =>
305-
html`<sl-tab
306+
html`<ha-tab-group-tab
306307
slot="nav"
307308
.panel=${forecastType}
308309
.active=${this._forecastType === forecastType}
309310
>
310311
${this.hass!.localize(`ui.card.weather.${forecastType}`)}
311-
</sl-tab>`
312+
</ha-tab-group-tab>`
312313
)}
313-
</sl-tab-group>`
314+
</ha-tab-group>`
314315
: nothing}
315316
<div class="forecast">
316317
${forecast?.length
@@ -419,11 +420,11 @@ class MoreInfoWeather extends LitElement {
419420
font-size: 1.2em;
420421
}
421422
422-
sl-tab {
423+
ha-tab-group-tab {
423424
flex: 1;
424425
}
425426
426-
sl-tab::part(base) {
427+
ha-tab-group-tab::part(base) {
427428
width: 100%;
428429
justify-content: center;
429430
}

‎src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
88
import "../../../../../components/ha-code-editor";
99
import "../../../../../components/ha-dialog";
1010
import "../../../../../components/ha-dialog-header";
11+
import "../../../../../components/ha-tab-group";
12+
import "../../../../../components/ha-tab-group-tab";
1113
import type { ZHADevice, ZHAGroup } from "../../../../../data/zha";
1214
import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha";
1315
import { haStyleDialog } from "../../../../../resources/styles";
@@ -103,21 +105,21 @@ class DialogZHAManageZigbeeDevice extends LitElement {
103105
>
104106
${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
105107
</span>
106-
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
108+
<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
107109
${tabs.map(
108110
(tab) => html`
109-
<sl-tab
111+
<ha-tab-group-tab
110112
slot="nav"
111113
.panel=${tab}
112114
.active=${this._currTab === tab}
113115
>
114116
${this.hass.localize(
115117
`ui.dialogs.zha_manage_device.tabs.${tab}`
116118
)}
117-
</sl-tab>
119+
</ha-tab-group-tab>
118120
`
119121
)}
120-
</sl-tab-group>
122+
</ha-tab-group>
121123
</ha-dialog-header>
122124
<div class="content" tabindex="-1" dialogInitialFocus>
123125
${cache(
@@ -229,10 +231,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
229231
}
230232
}
231233
232-
sl-tab {
234+
ha-tab-group-tab {
233235
flex: 1;
234236
}
235-
sl-tab::part(base) {
237+
ha-tab-group-tab::part(base) {
236238
width: 100%;
237239
justify-content: center;
238240
}

0 commit comments

Comments
 (0)