From d1d68eef6dddd8ff21359b65fad8e4d4c78e605d Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Fri, 17 Jan 2025 17:28:39 +0100
Subject: [PATCH] Apply suggestions from code review

---
 panel/src/components/Collection/Item.vue            |  5 +++--
 panel/src/components/Forms/Field/BlocksField.vue    |  5 +----
 panel/src/components/Forms/Field/DateField.vue      |  4 ++--
 panel/src/components/Forms/Field/LayoutField.vue    |  4 +---
 panel/src/components/Forms/Field/StructureField.vue |  4 +---
 panel/src/components/Lab/PlaygroundView.vue         |  2 +-
 panel/src/components/Navigation/Button.vue          | 10 ++++++----
 panel/src/components/Views/Files/FileView.vue       |  3 ++-
 panel/src/components/Views/Pages/PageView.vue       |  3 ++-
 panel/src/components/Views/Pages/SiteView.vue       |  3 ++-
 panel/src/components/Views/Users/UserView.vue       |  3 ++-
 11 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
index 0b0bcf7d9b..2d10396730 100644
--- a/panel/src/components/Collection/Item.vue
+++ b/panel/src/components/Collection/Item.vue
@@ -2,6 +2,7 @@
 	<div
 		v-bind="data"
 		:class="['k-item', `k-${layout}-item`, $attrs.class]"
+		:data-has-image="hasFigure"
 		:data-layout="layout"
 		:data-theme="theme"
 		:style="$attrs.style"
@@ -210,7 +211,7 @@ export default {
 	align-items: center;
 	grid-template-columns: 1fr auto;
 }
-.k-item[data-layout="list"]:has(.k-item-image) {
+.k-item[data-layout="list"][data-has-image="true"] {
 	grid-template-columns: var(--item-height) 1fr auto;
 }
 .k-item[data-layout="list"] .k-frame {
@@ -269,7 +270,7 @@ export default {
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr var(--height-md);
 }
-.k-item[data-layout="cardlets"]:has(.k-item-image) {
+.k-item[data-layout="cardlets"][data-has-image="true"] {
 	grid-template-areas:
 		"image content"
 		"image options";
diff --git a/panel/src/components/Forms/Field/BlocksField.vue b/panel/src/components/Forms/Field/BlocksField.vue
index 0b09c118ba..376fddf509 100644
--- a/panel/src/components/Forms/Field/BlocksField.vue
+++ b/panel/src/components/Forms/Field/BlocksField.vue
@@ -114,9 +114,6 @@ export default {
 .k-blocks-field > footer {
 	display: flex;
 	justify-content: center;
-}
-
-.k-blocks-field > :has(+ footer) {
-	margin-bottom: var(--spacing-3);
+	margin-top: var(--spacing-3);
 }
 </style>
diff --git a/panel/src/components/Forms/Field/DateField.vue b/panel/src/components/Forms/Field/DateField.vue
index 7980670857..486f56fbd2 100644
--- a/panel/src/components/Forms/Field/DateField.vue
+++ b/panel/src/components/Forms/Field/DateField.vue
@@ -5,7 +5,7 @@
 		:input="id"
 		:style="$attrs.style"
 	>
-		<div ref="body" class="k-date-field-body">
+		<div ref="body" :data-has-time="Boolean(time)" class="k-date-field-body">
 			<!-- Date input -->
 			<k-input
 				ref="dateInput"
@@ -242,7 +242,7 @@ export default {
 }
 
 @container (min-width: 20rem) {
-	.k-date-field-body:has(.k-time-input) {
+	.k-date-field-body[data-has-time="true"] {
 		grid-template-columns: 1fr minmax(6rem, 9rem);
 	}
 }
diff --git a/panel/src/components/Forms/Field/LayoutField.vue b/panel/src/components/Forms/Field/LayoutField.vue
index 994642f1c9..360dca906d 100644
--- a/panel/src/components/Forms/Field/LayoutField.vue
+++ b/panel/src/components/Forms/Field/LayoutField.vue
@@ -93,8 +93,6 @@ export default {
 .k-layout-field > footer {
 	display: flex;
 	justify-content: center;
-}
-.k-layout-field > :has(+ footer) {
-	margin-bottom: var(--spacing-3);
+	margin-top: var(--spacing-3);
 }
 </style>
diff --git a/panel/src/components/Forms/Field/StructureField.vue b/panel/src/components/Forms/Field/StructureField.vue
index 4ccd8256b6..9e5f49ae76 100644
--- a/panel/src/components/Forms/Field/StructureField.vue
+++ b/panel/src/components/Forms/Field/StructureField.vue
@@ -562,8 +562,6 @@ export default {
 .k-structure-field .k-table + footer {
 	display: flex;
 	justify-content: center;
-}
-.k-structure-field .k-table:has(+ footer) {
-	margin-bottom: var(--spacing-3);
+	margin-top: var(--spacing-3);
 }
 </style>
diff --git a/panel/src/components/Lab/PlaygroundView.vue b/panel/src/components/Lab/PlaygroundView.vue
index 7ec7c62d56..910d0985d7 100644
--- a/panel/src/components/Lab/PlaygroundView.vue
+++ b/panel/src/components/Lab/PlaygroundView.vue
@@ -103,7 +103,7 @@ export default {
 </script>
 
 <style>
-.k-lab-playground-view:has(.k-tabs) .k-lab-playground-header {
+.k-lab-playground-view:has(> .k-tabs) .k-lab-playground-header {
 	margin-bottom: 0;
 }
 
diff --git a/panel/src/components/Navigation/Button.vue b/panel/src/components/Navigation/Button.vue
index 76b9b8242d..7562544e79 100644
--- a/panel/src/components/Navigation/Button.vue
+++ b/panel/src/components/Navigation/Button.vue
@@ -3,6 +3,8 @@
 		:is="component"
 		v-bind="attrs"
 		:class="['k-button', $attrs.class]"
+		:data-has-icon="Boolean(icon)"
+		:data-has-text="Boolean(text || $slots.default)"
 		:style="$attrs.style"
 		@click="onClick"
 	>
@@ -325,22 +327,22 @@ export default {
 }
 
 /** Icon Buttons **/
-.k-button:not(:has(.k-button-text)) {
+.k-button:not([data-has-text="true"]) {
 	--button-padding: 0;
 	aspect-ratio: 1/1;
 }
 
 /** Responsive buttons **/
 @container (max-width: 30rem) {
-	.k-button:is([data-responsive]:has(.k-button-icon)) {
+	.k-button[data-responsive="true"][data-has-icon="true"] {
 		--button-padding: 0;
 		aspect-ratio: 1/1;
 		--button-text-display: none;
 	}
-	.k-button[data-responsive="text"]:has(.k-button-text) {
+	.k-button[data-responsive="text"][data-has-text="true"] {
 		--button-icon-display: none;
 	}
-	.k-button:is([data-responsive]:has(.k-button-icon)) .k-button-arrow {
+	.k-button[data-responsive="true"][data-has-icon="true"] .k-button-arrow {
 		display: none;
 	}
 }
diff --git a/panel/src/components/Views/Files/FileView.vue b/panel/src/components/Views/Files/FileView.vue
index 1b5ed2384e..cb79506340 100644
--- a/panel/src/components/Views/Files/FileView.vue
+++ b/panel/src/components/Views/Files/FileView.vue
@@ -1,5 +1,6 @@
 <template>
 	<k-panel-inside
+		:data-has-tabs="hasTabs"
 		:data-id="id"
 		:data-locked="isLocked"
 		:data-template="blueprint"
@@ -89,7 +90,7 @@ export default {
 	border-bottom: 0;
 }
 
-.k-file-view:has(.k-tabs) .k-file-preview {
+.k-file-view[data-has-tabs="true"] .k-file-preview {
 	margin-bottom: 0;
 }
 </style>
diff --git a/panel/src/components/Views/Pages/PageView.vue b/panel/src/components/Views/Pages/PageView.vue
index 1b2078075f..e05ddd31a5 100644
--- a/panel/src/components/Views/Pages/PageView.vue
+++ b/panel/src/components/Views/Pages/PageView.vue
@@ -1,5 +1,6 @@
 <template>
 	<k-panel-inside
+		:data-has-tabs="hasTabs"
 		:data-id="id"
 		:data-locked="isLocked"
 		:data-template="blueprint"
@@ -57,7 +58,7 @@ export default {
 </script>
 
 <style>
-.k-page-view:has(.k-tabs) .k-page-view-header {
+.k-page-view[data-has-tabs="true"] .k-page-view-header {
 	margin-bottom: 0;
 }
 </style>
diff --git a/panel/src/components/Views/Pages/SiteView.vue b/panel/src/components/Views/Pages/SiteView.vue
index 90af5c2caf..dd34dd1495 100644
--- a/panel/src/components/Views/Pages/SiteView.vue
+++ b/panel/src/components/Views/Pages/SiteView.vue
@@ -1,5 +1,6 @@
 <template>
 	<k-panel-inside
+		:data-has-tabs="hasTabs"
 		:data-id="id"
 		:data-locked="isLocked"
 		:data-template="blueprint"
@@ -53,7 +54,7 @@ export default {
 </script>
 
 <style>
-.k-site-view:has(.k-tabs) .k-site-view-header {
+.k-site-view[data-has-tabs="true"] .k-site-view-header {
 	margin-bottom: 0;
 }
 </style>
diff --git a/panel/src/components/Views/Users/UserView.vue b/panel/src/components/Views/Users/UserView.vue
index 40a43dff82..4fae9a01ca 100644
--- a/panel/src/components/Views/Users/UserView.vue
+++ b/panel/src/components/Views/Users/UserView.vue
@@ -1,5 +1,6 @@
 <template>
 	<k-panel-inside
+		:data-has-tabs="hasTabs"
 		:data-id="id"
 		:data-locked="isLocked"
 		:data-template="blueprint"
@@ -97,7 +98,7 @@ export default {
 .k-user-view .k-user-profile {
 	margin-bottom: var(--spacing-12);
 }
-.k-user-view:has(.k-tabs) .k-user-profile {
+.k-user-view[data-has-tabs="true"] .k-user-profile {
 	margin-bottom: 0;
 }
 </style>