refactor!: remove no longer used upload file shadow parts (#10060)

web-padawan · web-flow · commit c3c4caa6c52b · 2025-08-22T16:27:41.000+03:00
diff --git a/packages/upload/src/styles/vaadin-upload-file-base-styles.js b/packages/upload/src/styles/vaadin-upload-file-base-styles.js
@@ -24,14 +24,6 @@ export const uploadFileStyles = css`
     display: none;
   }
 
-  [part='row'] {
-    display: contents;
-  }
-
-  [part='info'] {
-    display: contents;
-  }
-
   [part='done-icon']:not([hidden]),
   [part='warning-icon']:not([hidden]) {
     display: flex;
diff --git a/packages/upload/src/vaadin-upload-file.d.ts b/packages/upload/src/vaadin-upload-file.d.ts
@@ -42,8 +42,6 @@ export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCusto
  *
  * Part name        | Description
  * -----------------|-------------
- * `row`            | File container
- * `info`           | Container for file status icon, file name, status and error messages
  * `done-icon`      | File done status icon
  * `warning-icon`   | File warning status icon
  * `meta`           | Container for file name, status and error messages
diff --git a/packages/upload/src/vaadin-upload-file.js b/packages/upload/src/vaadin-upload-file.js
@@ -22,8 +22,6 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
  *
  * Part name        | Description
  * -----------------|-------------
- * `row`            | File container
- * `info`           | Container for file status icon, file name, status and error messages
  * `done-icon`      | File done status icon
  * `warning-icon`   | File warning status icon
  * `meta`           | Container for file name, status and error messages
@@ -72,48 +70,45 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
   /** @protected */
   render() {
     return html`
-      <div part="row">
-        <div part="info">
-          <div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
-          <div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>
+      <div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
+      <div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>
 
-          <div part="meta">
-            <div part="name" id="name">${this.fileName}</div>
-            <div part="status" ?hidden="${!this.status}" id="status">${this.status}</div>
-            <div part="error" id="error" ?hidden="${!this.errorMessage}">${this.errorMessage}</div>
-          </div>
-        </div>
-        <div part="commands">
-          <button
-            type="button"
-            part="start-button"
-            file-event="file-start"
-            @click="${this._fireFileEvent}"
-            ?hidden="${!this.held}"
-            ?disabled="${this.disabled}"
-            aria-label="${this.i18n ? this.i18n.file.start : nothing}"
-            aria-describedby="name"
-          ></button>
-          <button
-            type="button"
-            part="retry-button"
-            file-event="file-retry"
-            @click="${this._fireFileEvent}"
-            ?hidden="${!this.errorMessage}"
-            ?disabled="${this.disabled}"
-            aria-label="${this.i18n ? this.i18n.file.retry : nothing}"
-            aria-describedby="name"
-          ></button>
-          <button
-            type="button"
-            part="remove-button"
-            file-event="file-abort"
-            @click="${this._fireFileEvent}"
-            ?disabled="${this.disabled}"
-            aria-label="${this.i18n ? this.i18n.file.remove : nothing}"
-            aria-describedby="name"
-          ></button>
-        </div>
+      <div part="meta">
+        <div part="name" id="name">${this.fileName}</div>
+        <div part="status" ?hidden="${!this.status}" id="status">${this.status}</div>
+        <div part="error" id="error" ?hidden="${!this.errorMessage}">${this.errorMessage}</div>
+      </div>
+
+      <div part="commands">
+        <button
+          type="button"
+          part="start-button"
+          file-event="file-start"
+          @click="${this._fireFileEvent}"
+          ?hidden="${!this.held}"
+          ?disabled="${this.disabled}"
+          aria-label="${this.i18n ? this.i18n.file.start : nothing}"
+          aria-describedby="name"
+        ></button>
+        <button
+          type="button"
+          part="retry-button"
+          file-event="file-retry"
+          @click="${this._fireFileEvent}"
+          ?hidden="${!this.errorMessage}"
+          ?disabled="${this.disabled}"
+          aria-label="${this.i18n ? this.i18n.file.retry : nothing}"
+          aria-describedby="name"
+        ></button>
+        <button
+          type="button"
+          part="remove-button"
+          file-event="file-abort"
+          @click="${this._fireFileEvent}"
+          ?disabled="${this.disabled}"
+          aria-label="${this.i18n ? this.i18n.file.remove : nothing}"
+          aria-describedby="name"
+        ></button>
       </div>
 
       <slot name="progress"></slot>
diff --git a/packages/upload/test/dom/__snapshots__/vaadin-upload-file.test.snap.js b/packages/upload/test/dom/__snapshots__/vaadin-upload-file.test.snap.js
@@ -2,66 +2,62 @@
 export const snapshots = {};
 
 snapshots["vaadin-upload-file shadow default"] = 
-`<div part="row">
-  <div part="info">
-    <div
-      aria-hidden="true"
-      hidden=""
-      part="done-icon"
-    >
-    </div>
-    <div
-      aria-hidden="true"
-      hidden=""
-      part="warning-icon"
-    >
-    </div>
-    <div part="meta">
-      <div
-        id="name"
-        part="name"
-      >
-        Workflow.pdf
-      </div>
-      <div
-        id="status"
-        part="status"
-      >
-        19.7 MB: 60% (remaining time: 00:12:34)
-      </div>
-      <div
-        hidden=""
-        id="error"
-        part="error"
-      >
-      </div>
-    </div>
+`<div
+  aria-hidden="true"
+  hidden=""
+  part="done-icon"
+>
+</div>
+<div
+  aria-hidden="true"
+  hidden=""
+  part="warning-icon"
+>
+</div>
+<div part="meta">
+  <div
+    id="name"
+    part="name"
+  >
+    Workflow.pdf
   </div>
-  <div part="commands">
-    <button
-      aria-describedby="name"
-      file-event="file-start"
-      hidden=""
-      part="start-button"
-      type="button"
-    >
-    </button>
-    <button
-      aria-describedby="name"
-      file-event="file-retry"
-      hidden=""
-      part="retry-button"
-      type="button"
-    >
-    </button>
-    <button
-      aria-describedby="name"
-      file-event="file-abort"
-      part="remove-button"
-      type="button"
-    >
-    </button>
+  <div
+    id="status"
+    part="status"
+  >
+    19.7 MB: 60% (remaining time: 00:12:34)
   </div>
+  <div
+    hidden=""
+    id="error"
+    part="error"
+  >
+  </div>
+</div>
+<div part="commands">
+  <button
+    aria-describedby="name"
+    file-event="file-start"
+    hidden=""
+    part="start-button"
+    type="button"
+  >
+  </button>
+  <button
+    aria-describedby="name"
+    file-event="file-retry"
+    hidden=""
+    part="retry-button"
+    type="button"
+  >
+  </button>
+  <button
+    aria-describedby="name"
+    file-event="file-abort"
+    part="remove-button"
+    type="button"
+  >
+  </button>
 </div>
 <slot name="progress">
 </slot>
