Merge pull request #4650 from nextcloud-libraries/fix/nc-app-navigati…

…on-item-active-menu

fix(NcAppNavigationItem): Ensure primary styling when the item is active

cypress/support/component.ts

@@ -13,6 +13,12 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+// setup styles
+import '../../styleguide/assets/default.css'
+import '../../styleguide/assets/additional.css'
+import '../../styleguide/assets/icons.css'
+
+// cypress commands
 import './commands'
 import { mount } from '@cypress/vue2'
 

cypress/visual/AppNavigationItem.cy.ts

@@ -0,0 +1,45 @@
+import { mount } from 'cypress/vue2'
+import Vue, { defineComponent } from 'vue'
+import VueRouter from 'vue-router'
+
+import NcAppNavigationItem from '../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue'
+
+describe('NcAppNavigationItem', () => {
+	describe('With router link', () => {
+		const RouterComponent = defineComponent({
+			template: '<div style="width: 300px; background: white;"><NcAppNavigationItem name="Home" to="/" :editable="true" /><NcAppNavigationItem name="Foo" to="/foo" :editable="true" /></div>',
+			components: { NcAppNavigationItem },
+		})
+
+		const router = new VueRouter({
+			routes: [
+				{ path: '/' },
+				{ path: '/foo' },
+			],
+		})
+
+		beforeEach(() => {
+			Vue.use(VueRouter)
+
+			mount(RouterComponent as never, {
+				extensions: {
+					plugins: [router],
+				},
+				router,
+			})
+		})
+
+		it('has tertiary styling on non active route', () => {
+			cy.contains('.app-navigation-entry', 'Foo').compareSnapshot('NcAppNavigationItem-tertiary-non-active-route')
+		})
+
+		it('has primary styling on active route', () => {
+			cy.contains('.app-navigation-entry', 'Home').compareSnapshot('NcAppNavigationItem-primary-on-active-route')
+		})
+
+		it('has primary button styling on active route with editing=true', () => {
+			cy.contains('.app-navigation-entry', 'Home').find('.app-navigation-entry__actions').click()
+			cy.get('.app-navigation-entry--editing').compareSnapshot('NcAppNavigationItem-primary-on-active-route-menu-active')
+		})
+	})
+})

package.json

@@ -28,7 +28,7 @@
     "styleguide:build": "vue-styleguidist build",
     "cypress": "TZ=UTC cypress run --component",
     "cypress:gui": "TZ=UTC cypress open --component",
-    "cypress:update-snapshots": "TZ=UTC cypress run --component --spec \"cypress/visual/**/*.cy.js\" --env type=base --config screenshotsFolder=cypress/snapshots/base"
+    "cypress:update-snapshots": "TZ=UTC cypress run --component --spec \"cypress/visual/**/*.cy.{t,j}s\" --env type=base --config screenshotsFolder=cypress/snapshots/base"
   },
   "main": "dist/index.cjs",
   "exports": {
@@ -143,6 +143,7 @@
     "url-loader": "^4.1.1",
     "vite": "^4.3.9",
     "vue-eslint-parser": "^9.0.3",
+    "vue-router": "^3.6.5",
     "vue-styleguidist": "~4.72.0",
     "vue-template-compiler": "^2.7.14",
     "webpack": "^5.88.1",

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -291,6 +291,7 @@ Just set the `pinned` prop.
 						<NcInputConfirmCancel ref="editingInput"
 							v-model="editingValue"
 							:placeholder="editPlaceholder !== '' ? editPlaceholder : name"
+							:primary="isActive && to"
 							@cancel="cancelEditing"
 							@confirm="handleEditingDone" />
 					</div>
@@ -319,6 +320,7 @@ Just set the `pinned` prop.
 						:boundaries-element="actionsBoundariesElement"
 						:placement="menuPlacement"
 						:open="menuOpen"
+						:type="isActive && to ? 'primary' : null"
 						:force-menu="forceMenu"
 						:default-icon="menuIcon"
 						@update:open="onMenuToggle">

src/components/NcAppNavigationItem/NcInputConfirmCancel.vue

@@ -48,7 +48,7 @@
 			</NcButton>
 
 			<NcButton native-type="reset"
-				type="tertiary"
+				:type="primary ? 'primary' : 'tertiary'"
 				:aria-label="labelCancel"
 				@click.stop.prevent="cancel">
 				<template #icon>
@@ -75,10 +75,19 @@ export default {
 	},
 
 	props: {
+		/**
+		 * If this element is used on a primary element set to true for primary styling.
+		 */
+		primary: {
+			default: false,
+			type: Boolean,
+		},
+
 		placeholder: {
 			default: '',
 			type: String,
 		},
+
 		value: {
 			default: '',
 			type: String,