Merge pull request #5577 from getkirby/v4/enhancement/language-dropdown

Responsive: show only text for language dropdown

panel/src/components/Dropdowns/LanguagesDropdown.vue

@@ -2,9 +2,9 @@
 	<k-dropdown v-if="languages.length > 1" class="k-languages-dropdown">
 		<k-button
 			:dropdown="true"
-			:responsive="true"
 			:text="code"
 			icon="translate"
+			responsive="text"
 			size="sm"
 			variant="filled"
 			@click="$refs.languages.toggle()"

panel/src/components/Navigation/Button.vue

@@ -78,8 +78,9 @@ export default {
 		/**
 		 * A responsive button will hide the button text on smaller screens
 		 * automatically and only keep the icon. An icon must be set in this case.
+		 * If set to `text`, the icon will be hidden instead.
 		 */
-		responsive: Boolean,
+		responsive: [Boolean, String],
 		/**
 		 * `rel` attribute for when using with `link`
 		 */
@@ -222,6 +223,7 @@ export default {
 	--button-padding: var(--spacing-2);
 	--button-rounded: var(--spacing-1);
 	--button-text-display: block;
+	--button-icon-display: block;
 }
 
 .k-button {
@@ -245,8 +247,9 @@ export default {
 }
 
 .k-button-icon {
-	flex-shrink: 0;
 	--icon-color: var(--button-color-icon);
+	flex-shrink: 0;
+	display: var(--button-icon-display);
 }
 
 .k-button-text {
@@ -304,11 +307,14 @@ export default {
 /** Responsive buttons **/
 @container (max-width: 30rem) {
 	/** TODO: .k-button:is([data-responsive]:has(.k-button-icon)) */
-	.k-button[data-responsive][data-has-icon="true"] {
+	.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"][data-has-text="true"] {
+		--button-icon-display: none;
+	}
 	/** TODO: .k-button:is([data-responsive]:has(.k-button-icon)) .k-button-arrow */
 	.k-button[data-responsive][data-has-icon="true"] .k-button-arrow {
 		display: none;