Merge pull request #48728 from nextcloud/fix/nav-quota-new-design

fix(files): Adjust NavigationQuota for Nextcloud 30 design

apps/files/src/components/NavigationQuota.vue

@@ -167,15 +167,18 @@ export default {
 // User storage stats display
 .app-navigation-entry__settings-quota {
 	// Align title with progress and icon
-	&--not-unlimited::v-deep .app-navigation-entry__name {
-		margin-top: -6px;
+	--app-navigation-quota-margin: calc((var(--default-clickable-area) - 24px) / 2); // 20px icon size and 4px progress bar
+
+	&--not-unlimited :deep(.app-navigation-entry__name) {
+		line-height: 1;
+		margin-top: var(--app-navigation-quota-margin);
 	}
 
 	progress {
 		position: absolute;
-		bottom: 12px;
-		margin-inline-start: 44px;
-		width: calc(100% - 44px - 22px);
+		bottom: var(--app-navigation-quota-margin);
+		margin-inline-start: var(--default-clickable-area);
+		width: calc(100% - (1.5 * var(--default-clickable-area)));
 	}
 }
 </style>

apps/files/src/views/Navigation.cy.ts

@@ -216,8 +216,9 @@ describe('Quota rendering', () => {
 
 		cy.get('[data-cy-files-navigation-settings-quota]').should('be.visible')
 		cy.get('[data-cy-files-navigation-settings-quota]').should('contain.text', '1 GB of 5 GB used')
-		cy.get('[data-cy-files-navigation-settings-quota] progress').should('be.visible')
-		cy.get('[data-cy-files-navigation-settings-quota] progress').should('have.attr', 'value', '20')
+		cy.get('[data-cy-files-navigation-settings-quota] progress')
+			.should('exist')
+			.and('have.attr', 'value', '20')
 	})
 
 	it('Reached quota', () => {
@@ -237,7 +238,8 @@ describe('Quota rendering', () => {
 
 		cy.get('[data-cy-files-navigation-settings-quota]').should('be.visible')
 		cy.get('[data-cy-files-navigation-settings-quota]').should('contain.text', '5 GB of 1 GB used')
-		cy.get('[data-cy-files-navigation-settings-quota] progress').should('be.visible')
-		cy.get('[data-cy-files-navigation-settings-quota] progress').should('have.attr', 'value', '100') // progress max is 100
+		cy.get('[data-cy-files-navigation-settings-quota] progress')
+			.should('exist')
+			.and('have.attr', 'value', '100') // progress max is 100
 	})
 })

cypress/support/component.ts

@@ -4,6 +4,10 @@
  */
 import 'cypress-axe'
 
+// styles
+import '../../apps/theming/css/default.css'
+import '../../core/css/server.css'
+
 /* eslint-disable */
 import { mount } from '@cypress/vue2'