chore: self-closing HTML tags for non-void elements are ambiguous (#6022

) # Motivation Fix warning which becomes an error with Svelte v5 tooling (PR #6020). ``` 19:5 error Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />` https://svelte.dev/e/element_invalid_self_closing_tag(element_invalid_self_closing_tag) svelte/valid-compile ``` # Changes - e.g. `<div />` -> `<div></div>` Signed-off-by: David Dal Busco <[email protected]>
dfinity · Dec 17, 2024 · 8622776 · 8622776
1 parent c165a28
commit 8622776
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 11 deletions.
diff --git a/frontend/src/lib/components/accounts/WalletPageHeading.svelte b/frontend/src/lib/components/accounts/WalletPageHeading.svelte
@@ -108,7 +108,7 @@
               {/if}
             </TooltipIcon>
           </div>
-          <div class="vertical-divider" />
+          <div class="vertical-divider"></div>
         {/if}<div class="account-name">
           {accountName}
         </div>

diff --git a/frontend/src/lib/components/common/EmptyCards.svelte b/frontend/src/lib/components/common/EmptyCards.svelte
@@ -4,19 +4,19 @@
 
 <div class="card-grid" data-tid="empty-cards-component">
   <Card disabled>
-    <div class="card-item" />
+    <div class="card-item"></div>
   </Card>
   <Card disabled>
-    <div class="card-item" />
+    <div class="card-item"></div>
   </Card>
   <Card disabled>
-    <div class="card-item" />
+    <div class="card-item"></div>
   </Card>
   <Card disabled>
-    <div class="card-item" />
+    <div class="card-item"></div>
   </Card>
   <Card disabled>
-    <div class="card-item" />
+    <div class="card-item"></div>
   </Card>
 </div>
 

diff --git a/frontend/src/lib/components/project-detail/CommitmentProgressBar.svelte b/frontend/src/lib/components/project-detail/CommitmentProgressBar.svelte
@@ -39,7 +39,7 @@
             class="min-indicator"
             data-tid="commitment-min-indicator"
             style={`left: calc(${minIndicatorPosition}px);`}
-          />
+          ></span>
         </div>
       </div>
     {/if}

diff --git a/frontend/src/lib/components/ui/ProposalStatusTag.svelte b/frontend/src/lib/components/ui/ProposalStatusTag.svelte
@@ -26,7 +26,7 @@
             class="actionable-status-badge"
             role="status"
             transition:scale={{ duration: 250, easing: cubicOut }}
-          />
+          ></div>
         </Tooltip>
       </div>
     {/if}

diff --git a/frontend/src/tests/lib/components/accounts/IcrcBalancesObserverTest.svelte b/frontend/src/tests/lib/components/accounts/IcrcBalancesObserverTest.svelte
@@ -11,5 +11,5 @@
   ledgerCanisterId={CKTESTBTC_LEDGER_CANISTER_ID}
   {reload}
 >
-  <div data-tid="test-observer" />
+  <div data-tid="test-observer"></div>
 </IcrcBalancesObserver>
diff --git a/frontend/src/tests/lib/components/accounts/IcrcWalletTransactionsObserverTest.svelte b/frontend/src/tests/lib/components/accounts/IcrcWalletTransactionsObserverTest.svelte
@@ -13,5 +13,5 @@
   ledgerCanisterId={CKTESTBTC_LEDGER_CANISTER_ID}
   indexCanisterId={CKTESTBTC_INDEX_CANISTER_ID}
 >
-  <div data-tid="test-observer" />
+  <div data-tid="test-observer"></div>
 </IcrcWalletTransactionsObserver>
diff --git a/frontend/src/tests/lib/directives/IntersectionTest.svelte b/frontend/src/tests/lib/directives/IntersectionTest.svelte
@@ -2,4 +2,4 @@
   import { onIntersection } from "$lib/directives/intersection.directives";
 </script>
 
-<div use:onIntersection />
+<div use:onIntersection></div>