refactor: ♻️ use dl

dpc-sdp · Feb 12, 2025 · 4e83198 · 4e83198
1 parent 1df1309
commit 4e83198
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/packages/ripple-ui-core/src/components/stats-grid/RplStatsGrid.css b/packages/ripple-ui-core/src/components/stats-grid/RplStatsGrid.css
@@ -61,6 +61,7 @@
 
 .rpl-stats-grid-item__inner {
   background: var(--rpl-clr-neutral-100);
+  margin: 0;
   padding: var(--rpl-sp-9) var(--rpl-sp-4);
   text-align: center;
   word-break: break-word;
@@ -70,3 +71,7 @@
     background: var(--rpl-clr-light);
   }
 }
+
+.rpl-stats-grid-item__description {
+  margin-left: 0;
+}
diff --git a/packages/ripple-ui-core/src/components/stats-grid/RplStatsGrid.vue b/packages/ripple-ui-core/src/components/stats-grid/RplStatsGrid.vue
@@ -12,12 +12,12 @@ withDefaults(defineProps<Props>(), {
 })
 
 const numItems = computed(() => {
-  return useSlots().default()[0].children.length
+  return useSlots().default()[0].children.length as number
 })
 </script>
 
 <template>
-  <ul
+  <div
     :class="{
       'rpl-stats-grid': true,
       'rpl-stats-grid--on-light': variant === 'onLight',
@@ -28,7 +28,7 @@ const numItems = computed(() => {
     }"
   >
     <slot />
-  </ul>
+  </div>
 </template>
 
 <style src="./RplStatsGrid.css" />
diff --git a/packages/ripple-ui-core/src/components/stats-grid/RplStatsGridItem.vue b/packages/ripple-ui-core/src/components/stats-grid/RplStatsGridItem.vue
@@ -7,12 +7,12 @@ withDefaults(defineProps<Props>(), {})
 </script>
 
 <template>
-  <li class="rpl-stats-grid-item">
-    <div class="rpl-stats-grid-item__inner">
-      <span class="rpl-type-h3">{{ value }}</span>
-      <span class="rpl-type-p">
+  <div class="rpl-stats-grid-item">
+    <dl class="rpl-stats-grid-item__inner">
+      <dt class="rpl-type-h3">{{ value }}</dt>
+      <dd class="rpl-type-p rpl-stats-grid-item__description">
         <slot></slot>
-      </span>
-    </div>
-  </li>
+      </dd>
+    </dl>
+  </div>
 </template>