refactor!: replace remaining login paragraph elements with div (#9595)

web-padawan · web-flow · commit 2e9c3ec12f8d · 2025-07-01T12:12:17.000+03:00
diff --git a/packages/login/src/styles/vaadin-login-form-wrapper-core-styles.js b/packages/login/src/styles/vaadin-login-form-wrapper-core-styles.js
@@ -29,4 +29,8 @@ export const loginFormWrapperStyles = css`
   [part='error-message'] {
     position: relative;
   }
+
+  strong {
+    font-weight: 600;
+  }
 `;
diff --git a/packages/login/src/vaadin-login-form-wrapper.js b/packages/login/src/vaadin-login-form-wrapper.js
@@ -62,7 +62,7 @@ class LoginFormWrapper extends ThemableMixin(CSSInjectionMixin(PolylitMixin(LitE
         <div part="form-title" role="heading" aria-level="${this.headingLevel}">${this.i18n.form.title}</div>
         <div part="error-message" ?hidden="${!this.error}">
           <strong part="error-message-title">${this.i18n.errorMessage.title}</strong>
-          <p part="error-message-description">${this.i18n.errorMessage.message}</p>
+          <div part="error-message-description">${this.i18n.errorMessage.message}</div>
         </div>
 
         <slot name="form"></slot>
diff --git a/packages/login/src/vaadin-login-overlay-wrapper.js b/packages/login/src/vaadin-login-overlay-wrapper.js
@@ -39,7 +39,7 @@ class LoginOverlayWrapper extends LoginOverlayWrapperMixin(ThemableMixin(CSSInje
               <slot name="title">
                 <div part="title" role="heading" aria-level="${this.headingLevel}">${this.title}</div>
               </slot>
-              <p part="description">${this.description}</p>
+              <div part="description">${this.description}</div>
             </div>
             <div part="form">
               <slot></slot>
diff --git a/packages/login/test/dom/__snapshots__/login-form.test.snap.js b/packages/login/test/dom/__snapshots__/login-form.test.snap.js
@@ -700,9 +700,9 @@ snapshots["vaadin-login-form shadow default"] =
     <strong part="error-message-title">
       Incorrect username or password
     </strong>
-    <p part="error-message-description">
+    <div part="error-message-description">
       Check that you have entered the correct username and password and try again.
-    </p>
+    </div>
   </div>
   <slot name="form">
   </slot>
@@ -735,9 +735,9 @@ snapshots["vaadin-login-form shadow error"] =
     <strong part="error-message-title">
       Incorrect username or password
     </strong>
-    <p part="error-message-description">
+    <div part="error-message-description">
       Check that you have entered the correct username and password and try again.
-    </p>
+    </div>
   </div>
   <slot name="form">
   </slot>
@@ -773,9 +773,9 @@ snapshots["vaadin-login-form shadow i18n"] =
     <strong part="error-message-title">
       Väärä käyttäjätunnus tai salasana
     </strong>
-    <p part="error-message-description">
+    <div part="error-message-description">
       Tarkista että käyttäjätunnus ja salasana ovat oikein ja yritä uudestaan.
-    </p>
+    </div>
   </div>
   <slot name="form">
   </slot>
diff --git a/packages/login/test/dom/__snapshots__/login-overlay.test.snap.js b/packages/login/test/dom/__snapshots__/login-overlay.test.snap.js
@@ -532,9 +532,9 @@ snapshots["vaadin-login-overlay shadow default"] =
             App name
           </div>
         </slot>
-        <p part="description">
+        <div part="description">
           Application description
-        </p>
+        </div>
       </div>
       <div part="form">
         <slot>
@@ -572,9 +572,9 @@ snapshots["vaadin-login-overlay shadow i18n"] =
             Sovelluksen nimi
           </div>
         </slot>
-        <p part="description">
+        <div part="description">
           Sovelluksen kuvaus
-        </p>
+        </div>
       </div>
       <div part="form">
         <slot>
diff --git a/packages/login/theme/lumo/vaadin-login-form-wrapper-styles.js b/packages/login/theme/lumo/vaadin-login-form-wrapper-styles.js
@@ -1,6 +1,7 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { color } from '@vaadin/vaadin-lumo-styles/color.js';
-import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const loginFormWrapper = css`
@@ -89,6 +90,6 @@ const loginFormWrapper = css`
   }
 `;
 
-registerStyles('vaadin-login-form-wrapper', [color, typography, loginFormWrapper], {
+registerStyles('vaadin-login-form-wrapper', loginFormWrapper, {
   moduleId: 'lumo-login-form-wrapper',
 });
diff --git a/packages/login/theme/lumo/vaadin-login-overlay-styles.js b/packages/login/theme/lumo/vaadin-login-overlay-styles.js
@@ -1,7 +1,7 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { color } from '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
 import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const loginOverlayWrapper = css`
@@ -37,7 +37,7 @@ const loginOverlayWrapper = css`
   [part='description'] {
     line-height: var(--lumo-line-height-s);
     color: var(--lumo-tint-70pct);
-    margin-bottom: 0;
+    margin: 0.5em 0 0;
   }
 
   [part='content'] {
@@ -158,7 +158,7 @@ const loginOverlayWrapper = css`
   }
 `;
 
-registerStyles('vaadin-login-overlay-wrapper', [color, typography, overlay, loginOverlayWrapper], {
+registerStyles('vaadin-login-overlay-wrapper', [overlay, loginOverlayWrapper], {
   moduleId: 'lumo-login-overlay-wrapper',
 });
 
diff --git a/packages/vaadin-lumo-styles/components/login-form.css b/packages/vaadin-lumo-styles/components/login-form.css
@@ -8,8 +8,6 @@
 @import './password-field.css';
 
 @import '../src/mixins/base-layer-reset.css' vaadin-login-form-wrapper;
-@import '../src/global/color.css' vaadin-login-form-wrapper;
-@import '../src/global/typography.css' vaadin-login-form-wrapper;
 @import '../src/components/login-form-wrapper.css' vaadin-login-form-wrapper;
 
 html {
diff --git a/packages/vaadin-lumo-styles/components/login.css b/packages/vaadin-lumo-styles/components/login.css
@@ -6,8 +6,6 @@
 @import './login-form.css';
 
 @import '../src/mixins/base-layer-reset.css' vaadin-login-overlay-wrapper;
-@import '../src/global/color.css' vaadin-login-overlay-wrapper;
-@import '../src/global/typography.css' vaadin-login-overlay-wrapper;
 @import '../src/mixins/overlay.css' vaadin-login-overlay-wrapper;
 @import '../src/components/login-overlay-wrapper.css' vaadin-login-overlay-wrapper;
 
diff --git a/packages/vaadin-lumo-styles/src/components/login-form-wrapper.css b/packages/vaadin-lumo-styles/src/components/login-form-wrapper.css
@@ -47,6 +47,10 @@
   color: var(--lumo-error-text-color);
 }
 
+strong {
+  font-weight: 600;
+}
+
 ::slotted([slot='submit']) {
   margin-top: var(--lumo-space-l);
   margin-bottom: var(--lumo-space-s);
diff --git a/packages/vaadin-lumo-styles/src/components/login-overlay-wrapper.css b/packages/vaadin-lumo-styles/src/components/login-overlay-wrapper.css
@@ -65,7 +65,7 @@
 [part='description'] {
   line-height: var(--lumo-line-height-s);
   color: var(--lumo-tint-70pct);
-  margin-bottom: 0;
+  margin: 0.5em 0 0;
 }
 
 [part='content'] {
