feat(Table): add select event
#2822
Open
Annotations
10 errors and 1 warning
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with data correctly 1` mismatched
- Expected
+ Received
@@ -7,40 +7,40 @@
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
- <tbody class="divide-y divide-[var(--ui-border)]">
+ <tbody class="divide-y divide-[var(--ui-border)] [&>tr]:data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50 [&>tr]:data-[can-select=true]:cursor-pointer">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
<td data-pinned="false" class="p-4 text-sm t
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders without data correctly 1` mismatched
- Expected
+ Received
@@ -2,11 +2,11 @@
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
<tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50"></tr>
</thead>
- <tbody class="divide-y divide-[var(--ui-border)]">
+ <tbody class="divide-y divide-[var(--ui-border)] [&>tr]:data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50 [&>tr]:data-[can-select=true]:cursor-pointer">
<tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td colspan="0" class="py-6 text-center text-sm text-[var(--ui-text-muted)]">No data</td>
</tr>
</tbody>
</table>
❯ test/components/Table.spec.ts:165:18
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with caption correctly 1` mismatched
- Expected
+ Received
@@ -7,40 +7,40 @@
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
- <tbody class="divide-y divide-[var(--ui-border)]">
+ <tbody class="divide-y divide-[var(--ui-border)] [&>tr]:data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50 [&>tr]:data-[can-select=true]:cursor-pointer">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
<td data-pinned="false" class="p-4 text-s
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with columns correctly 1` mismatched
- Expected
+ Received
@@ -24,12 +24,12 @@
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
<!---->
</th>
</tr>
</thead>
- <tbody class="divide-y divide-[var(--ui-border)]">
+ <tbody class="divide-y divide-[var(--ui-border)] [&>tr]:data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50 [&>tr]:data-[can-select=true]:cursor-pointer">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="relative flex items-start" arialabel="Select row">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
@@ -56,11 +56,11 @@
<!--teleport end-->
</div>
</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="relative flex items-start" arialabel="Select row">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
@@ -87,11 +87,11 @@
<!--teleport end-->
</div>
</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="relative flex items-start" arialabel="Select row">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
@@ -118,11 +118,11 @@
<!--teleport end-->
</div>
</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkb
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with sticky correctly 1` mismatched
- Expected
+ Received
@@ -7,40 +7,40 @@
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
- <tbody class="divide-y divide-[var(--ui-border)]">
+ <tbody class="divide-y divide-[var(--ui-border)] [&>tr]:data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50 [&>tr]:data-[can-select=true]:cursor-pointer">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
<td data-pinned="false" class="p-4 text-sm
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with loading correctly 1` mismatched
- Expected
+ Received
@@ -7,40 +7,40 @@
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
- <tbody class="divide-y divide-[var(--ui-border)]">
+ <tbody class="divide-y divide-[var(--ui-border)] [&>tr]:data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50 [&>tr]:data-[can-select=true]:cursor-pointer">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
<td data-pinned="false" class="p-4 text-s
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with loading color primary correctly 1` mismatched
- Expected
+ Received
@@ -7,40 +7,40 @@
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
- <tbody class="divide-y divide-[var(--ui-border)]">
+ <tbody class="divide-y divide-[var(--ui-border)] [&>tr]:data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50 [&>tr]:data-[can-select=true]:cursor-pointer">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
<td data-pinned="false" cla
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with loading color secondary correctly 1` mismatched
- Expected
+ Received
@@ -7,40 +7,40 @@
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
- <tbody class="divide-y divide-[var(--ui-border)]">
+ <tbody class="divide-y divide-[var(--ui-border)] [&>tr]:data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50 [&>tr]:data-[can-select=true]:cursor-pointer">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
<td data-pinned="false" c
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with loading color success correctly 1` mismatched
- Expected
+ Received
@@ -7,40 +7,40 @@
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
- <tbody class="divide-y divide-[var(--ui-border)]">
+ <tbody class="divide-y divide-[var(--ui-border)] [&>tr]:data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50 [&>tr]:data-[can-select=true]:cursor-pointer">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
<td data-pinned="false" cla
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with loading color info correctly 1` mismatched
- Expected
+ Received
@@ -7,40 +7,40 @@
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
- <tbody class="divide-y divide-[var(--ui-border)]">
+ <tbody class="divide-y divide-[var(--ui-border)] [&>tr]:data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50 [&>tr]:data-[can-select=true]:cursor-pointer">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
<td data-pinned="false" class=
|
|
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
Loading