chore(dropzone): pass sizes on to illustrated message

Author: cdransf

2nd-gen/packages/core/components/dropzone/Dropzone.base.ts

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import { property } from 'lit/decorators.js';
+import { PropertyValues } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 
 import { SpectrumElement } from '@spectrum-web-components/core/element/index.js';
 import { SizedMixin } from '@spectrum-web-components/core/mixins/index.js';
@@ -105,6 +106,26 @@ export abstract class DropzoneBase extends SizedMixin(SpectrumElement, {
   //     IMPLEMENTATION
   // ──────────────────────────
 
+  @queryAssignedElements({ flatten: true, selector: 'swc-illustrated-message' })
+  private illustratedMessages!: Element[];
+
+  protected override updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    if (changedProperties.has('size')) {
+      this.propagateSizeToIllustratedMessage();
+    }
+  }
+
+  protected handleSlotChange(): void {
+    this.propagateSizeToIllustratedMessage();
+  }
+
+  private propagateSizeToIllustratedMessage(): void {
+    for (const el of this.illustratedMessages) {
+      el.setAttribute('size', this.size);
+    }
+  }
+
   /** Timer ID for debounced dragleave — prevents flickering on child drag events. */
   private _dragLeaveTimer: ReturnType<typeof setTimeout> | null = null;
 

2nd-gen/packages/swc/.storybook/preview.ts

@@ -490,6 +490,8 @@ const preview = {
                 ['Rendering and styling migration analysis'],
                 'Search',
                 ['Rendering and styling migration analysis'],
+                'Sidenav',
+                ['Accessibility migration analysis'],
                 'Slider',
                 ['Rendering and styling migration analysis'],
                 'Status light',

2nd-gen/packages/swc/components/dropzone/Dropzone.ts

@@ -160,7 +160,7 @@ export class Dropzone extends DropzoneBase {
     return html`
       <div class="swc-Dropzone">
         <div role="status" aria-live="polite" class="swc-Dropzone-status"></div>
-        <slot></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
     `;
   }

2nd-gen/packages/swc/components/dropzone/stories/dropzone.stories.ts

@@ -79,12 +79,17 @@ const DROPZONE_SVG = `
 // swc-illustrated-message slots: default (slot="") for SVG, "heading" for h2-h6, "description" for text.
 // The browse button is a sibling of swc-illustrated-message inside swc-dropzone; the button-group
 // slot is planned but not yet implemented on swc-illustrated-message.
-const makeDropzoneSlot = (headingText: string) => html`
+// size is passed to swc-button to match the dropzone size; swc-illustrated-message receives
+// size automatically via swc-dropzone's slotchange propagation.
+const makeDropzoneSlot = (
+  headingText: string,
+  size: DropzoneSize = 'm'
+) => html`
   <swc-illustrated-message>
     ${unsafeHTML(DROPZONE_SVG)}
     <h2 slot="heading">${headingText}</h2>
   </swc-illustrated-message>
-  <swc-button variant="accent">Browse files</swc-button>
+  <swc-button variant="accent" size=${size}>Browse files</swc-button>
 `;
 
 // HTML string version used by the Playground so template(args) can spread all args.
@@ -153,12 +158,12 @@ export const Sizes: Story = {
           aria-label="${sizeLabels[size]} drop zone"
           style="min-inline-size: 260px;"
         >
-          ${makeDropzoneSlot(sizeLabels[size])}
+          ${makeDropzoneSlot(sizeLabels[size], size)}
         </swc-dropzone>
       `
     )}
   `,
-  parameters: { flexLayout: 'row-wrap' },
+  parameters: { flexLayout: 'column-center' },
   tags: ['options'],
 };