fix: convert classes on host in data attributes (#2242)

sbb-design-systems · Nov 29, 2023 · 03310ab · 03310ab
1 parent 7b40581
commit 03310ab
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 12 deletions.
diff --git a/src/components/alert/alert-group/alert-group.scss b/src/components/alert/alert-group/alert-group.scss
@@ -15,7 +15,7 @@
   gap: var(--sbb-alert-group-gap);
 }
 
-:host(:focus-visible:not(.sbb-alert-group-empty)) {
+:host(:focus-visible:not([data-empty])) {
   @include sbb.focus-outline;
 
   border-radius: var(--sbb-alert-group-border-radius);

diff --git a/src/components/alert/alert-group/alert-group.ts b/src/components/alert/alert-group/alert-group.ts
@@ -94,7 +94,7 @@ export class SbbAlertGroup extends LitElement {
   protected override render(): TemplateResult {
     const TITLE_TAG_NAME = `h${this.accessibilityTitleLevel}`;
 
-    setAttribute(this, 'class', !this._hasAlerts ? 'sbb-alert-group-empty' : null);
+    setAttribute(this, 'data-empty', !this._hasAlerts);
 
     /* eslint-disable lit/binding-positions */
     return html`

diff --git a/src/components/navigation/navigation-list/navigation-list.spec.ts b/src/components/navigation/navigation-list/navigation-list.spec.ts
@@ -15,7 +15,7 @@ describe('sbb-navigation-list', () => {
 
     expect(root).dom.to.be.equal(
       `
-        <sbb-navigation-list class="sbb-navigation-list">
+        <sbb-navigation-list>
           <sbb-navigation-action slot="action-0">
             Tickets &amp; Offers
           </sbb-navigation-action>

diff --git a/src/components/navigation/navigation-list/navigation-list.ts b/src/components/navigation/navigation-list/navigation-list.ts
@@ -3,7 +3,6 @@ import { CSSResultGroup, html, LitElement, nothing, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import { SlotChildObserver } from '../../core/common-behaviors';
-import { setAttribute } from '../../core/dom';
 import {
   createNamedSlotState,
   HandlerRepository,
@@ -72,8 +71,6 @@ export class SbbNavigationList extends SlotChildObserver(LitElement) {
       ? { 'aria-labelledby': 'sbb-navigation-link-label-id' }
       : {};
 
-    setAttribute(this, 'class', 'sbb-navigation-list');
-
     return html`
       ${hasLabel
         ? html`<span class="sbb-navigation-list__label" id="sbb-navigation-link-label-id">

diff --git a/src/components/tabs/tab-group/tab-group.scss b/src/components/tabs/tab-group/tab-group.scss
@@ -39,8 +39,8 @@
 }
 
 // Make inactive nested tab groups non-focusable, to ensure accessibility
-:host(.tab-group--nested:not([active])) *,
-:host(.tab-group--nested:not([active])) ::slotted(*) {
+:host([data-nested]:not([active])) *,
+:host([data-nested]:not([active])) ::slotted(*) {
   visibility: hidden;
   opacity: 0;
   height: 0;

diff --git a/src/components/tabs/tab-group/tab-group.ts b/src/components/tabs/tab-group/tab-group.ts
@@ -361,7 +361,7 @@ export class SbbTabGroup extends LitElement {
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'class', this._isNested ? 'tab-group--nested' : '');
+    setAttribute(this, 'data-nested', this._isNested);
 
     return html`
       <div

diff --git a/src/components/timetable-travel-hints/timetable-travel-hints.ts b/src/components/timetable-travel-hints/timetable-travel-hints.ts
@@ -50,9 +50,7 @@ export class SbbTimetableTravelHints extends LitElement {
     const a11yLabel = i18nNone[this._currentLanguage];
     const appearanceClass = ` travel-hints--${this.appearance}`;
 
-    const hostClass = travelHintsItems.length === 0 ? 'visually-empty' : '';
-
-    setAttribute(this, 'class', hostClass);
+    setAttribute(this, 'data-visually-empty', travelHintsItems.length === 0);
 
     return html`
       <div class=${`travel-hints${appearanceClass}`}>