Merge pull request #4111 from nextcloud/fix/render-tab-in-tabs-withou…

…t-context NcAppSidebar: fix tabs with css icon
nextcloud-libraries · May 16, 2023 · 411d059 · 411d059
2 parents ebe0e62 + b6c8df4
commit 411d059
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -56,7 +56,9 @@
 					{{ tab.name }}
 				</span>
 				<template #icon>
-					<NcVNodes :vnodes="tab.renderIcon()" />
+					<NcVNodes :vnodes="tab.renderIcon()">
+						<span class="app-sidebar-tabs__tab-icon" :class="tab.icon" />
+					</NcVNodes>
 				</template>
 			</NcCheckboxRadioSwitch>
 		</nav>
@@ -283,6 +285,13 @@ export default {
 			text-overflow: ellipsis;
 			text-align: center;
 		}
+
+		&-icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-size: 20px;
+		}
 	}
 
 	&__content {

diff --git a/src/components/NcAppSidebarTab/NcAppSidebarTab.vue b/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
@@ -41,8 +41,6 @@
 </template>
 
 <script>
-import { h } from 'vue'
-
 export default {
 	name: 'NcAppSidebarTab',
 
@@ -126,12 +124,12 @@ export default {
 		},
 
 		/**
-		 * Render tab's icon from slot or icon prop
+		 * Render tab's icon slot if any
 		 *
-		 * @return {import('vue').VNode|import('vue').VNode[]}
+		 * @return {import('vue').VNode[]}
 		 */
 		renderIcon() {
-			return this.$slots.icon || this.$scopedSlots.icon?.() || h('span', { staticClass: this.icon })
+			return this.$scopedSlots.icon?.()
 		},
 	},
 }