fix: warn about nested action elements (#3058)

sbb-design-systems · Sep 5, 2024 · 5b1a823 · 5b1a823
1 parent 92cf0ca
commit 5b1a823
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/elements/core/base-elements/action-base-element.ts b/src/elements/core/base-elements/action-base-element.ts
@@ -23,6 +23,21 @@ export abstract class SbbActionBaseElement extends LitElement {
     return maybeDisabled.disabled || maybeDisabled.formDisabled;
   }
 
+  public override connectedCallback(): void {
+    super.connectedCallback();
+
+    if (
+      import.meta.env.DEV &&
+      (this.hasAttribute('data-link') || this.hasAttribute('data-button')) &&
+      this.parentElement?.closest('[data-link], [data-button], a, button')
+    ) {
+      console.warn(
+        `Nested action element detected (${this.localName} inside ${this.parentElement!.closest('[data-link], [data-button], a, button')!.localName}). Maybe use a static variant for the inner action element?`,
+        this,
+      );
+    }
+  }
+
   protected setupBaseEventHandlers(): void {
     this.addEventListener(
       'click',