Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: convert classes on host in data attributes #2242

Merged
merged 2 commits into from
Nov 29, 2023
Merged

fix: convert classes on host in data attributes #2242

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6726a0d
fix: convert classes on host in data attributes
dauriamarco Nov 29, 2023
2b41fda
fix: review
dauriamarco Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/alert/alert-group/alert-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/components/alert/alert-group/alert-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
2 changes: 1 addition & 1 deletion src/components/navigation/navigation-list/navigation-list.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 0 additions & 3 deletions src/components/navigation/navigation-list/navigation-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/components/tabs/tab-group/tab-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 3 additions & 1 deletion src/components/tabs/tab-group/tab-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,9 @@ export class SbbTabGroup extends LitElement {
}

protected override render(): TemplateResult {
setAttribute(this, 'class', this._isNested ? 'tab-group--nested' : '');
console.log(this._isNested);
dauriamarco marked this conversation as resolved.
Show resolved Hide resolved

setAttribute(this, 'data-nested', this._isNested);

return html`
<div
Expand Down
4 changes: 1 addition & 3 deletions src/components/timetable-travel-hints/timetable-travel-hints.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`}>
Expand Down
Loading