chore(dropzone): address feedback

Author: cdransf

2nd-gen/packages/core/components/illustrated-message/IllustratedMessage.base.ts

@@ -11,7 +11,7 @@
  */
 
 import { PropertyValues } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 
 import { SpectrumElement } from '@spectrum-web-components/core/element/index.js';
 
@@ -82,6 +82,14 @@ export abstract class IllustratedMessageBase extends SpectrumElement {
     }
   );
 
+  /**
+   * Tracks whether the default (illustration) slot has assigned content, so
+   * rendering subclasses can collapse the illustration wrapper when no
+   * illustration is provided instead of reserving its fixed size.
+   */
+  @state()
+  protected _hasIllustration = false;
+
   protected override updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
 
@@ -116,6 +124,16 @@ export abstract class IllustratedMessageBase extends SpectrumElement {
     this._sizePropagation.propagate();
   }
 
+  /**
+   * Rendering subclasses must wire this to the default slot's `slotchange`
+   * event (e.g. `<slot @slotchange=${this.handleIllustrationSlotChange}>`)
+   * so the illustration wrapper collapses when no illustration is slotted.
+   */
+  protected handleIllustrationSlotChange(event: Event): void {
+    const slot = event.target as HTMLSlotElement;
+    this._hasIllustration = slot.assignedElements({ flatten: true }).length > 0;
+  }
+
   /**
    * @internal
    *

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

@@ -44,8 +44,6 @@ import styles from './dropzone.css';
  * @cssprop --swc-dropzone-background-color - Background color of the drop zone. Defaults to transparent; overridden to a subtle accent tint in the dragged state.
  * @cssprop --swc-dropzone-border-color - Border color. Defaults to the gray-300 token in the default state; overridden to the accent visual color in the dragged and focus-within states.
  * @cssprop --swc-dropzone-border-style - Border style. Defaults to dashed; overridden to solid in the dragged and focus-within states.
- * @cssprop --swc-dropzone-border-width - Border width. Defaults to the border-width-200 token (2px).
- * @cssprop --swc-dropzone-corner-radius - Corner radius. Defaults to the corner-radius-400 token.
  * @cssprop --swc-dropzone-padding - Padding inside the drop zone. Defaults vary by size: spacing-300 (s), spacing-400 (m), spacing-600 (l).
  */
 export class Dropzone extends DropzoneBase {

2nd-gen/packages/swc/components/dropzone/dropzone.css

@@ -33,8 +33,8 @@
   background: var(--swc-dropzone-background-color, transparent);
   border-color: var(--swc-dropzone-border-color, token("gray-300"));
   border-style: var(--swc-dropzone-border-style, dashed);
-  border-width: var(--swc-dropzone-border-width, token("border-width-200"));
-  border-radius: var(--swc-dropzone-corner-radius, token("corner-radius-400"));
+  border-width: token("border-width-200");
+  border-radius: token("corner-radius-400");
 }
 
 /* ─────────────────────────────────────

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

@@ -70,16 +70,21 @@ const sizeLabels = {
 } as const satisfies Record<DropzoneSize, string>;
 
 const DROPZONE_SVG = `
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 103" slot="" aria-hidden="true">
-    <path d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v91c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v34c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z"/>
-    <path d="M31.4,44.5c0,0.8,0.7,1.5,1.5,1.5h50c0.8,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5h-50C32.1,43,31.4,43.7,31.4,44.5z"/>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 96 96">
+    <path d="M12 68.74a2 2 0 0 1 2 2v3.5a1.5 1.5 0 0 0 1.5 1.5H19a2 2 0 1 1 0 4h-3.5a5.5 5.5 0 0 1-5.5-5.5v-3.5a2 2 0 0 1 2-2m22.5 7a2 2 0 1 1 0 4H27a2 2 0 1 1 0-4zm17 0a2 2 0 1 1 0 4H44a2 2 0 1 1 0-4zm17 0a2 2 0 1 1 0 4H61a2 2 0 1 1 0-4zm15.5-7a2 2 0 0 1 2 2v3.5a5.5 5.5 0 0 1-5.5 5.5H77a2 2 0 1 1 0-4h3.5a1.5 1.5 0 0 0 1.5-1.5v-3.5a2 2 0 0 1 2-2m-36.441-53c1.973 0 3.868.78 5.267 2.17l14.987 14.9A7.4 7.4 0 0 1 70 38.063v21.254c0 4.11-3.348 7.423-7.454 7.423H33.454c-4.106 0-7.454-3.313-7.454-7.423V23.163c0-4.11 3.348-7.423 7.454-7.423zM84 55.24a2 2 0 0 1 2 2v7.5a2 2 0 1 1-4 0v-7.5a2 2 0 0 1 2-2m-72-.5a2 2 0 0 1 2 2v7.5a2 2 0 1 1-4 0v-7.5a2 2 0 0 1 2-2m21.454-35c-1.918 0-3.454 1.544-3.454 3.423v36.154c0 1.88 1.536 3.423 3.454 3.423h29.092c1.918 0 3.454-1.544 3.454-3.423V38.063c0-.904-.361-1.773-1.008-2.416l-14.986-14.9a3.47 3.47 0 0 0-2.447-1.007zm13.594 12a2 2 0 0 1 1.996 2.004l-.035 15.781 5.214-4.324a2 2 0 0 1 2.554 3.078l-8.438 7a2 2 0 0 1-1.31.459l-.033.002a2 2 0 0 1-1.54-.729l-8.222-6.722a2 2 0 0 1 2.532-3.098l5.243 4.286.035-15.74a2 2 0 0 1 2.004-1.997M19 40.74a2 2 0 1 1 0 4h-3.5a1.5 1.5 0 0 0-1.5 1.5v3.5a2 2 0 1 1-4 0v-3.5a5.5 5.5 0 0 1 5.5-5.5zm61.5 0a5.5 5.5 0 0 1 5.5 5.5v3.5a2 2 0 1 1-4 0v-3.5a1.5 1.5 0 0 0-1.5-1.5H77a2 2 0 1 1 0-4z"/>
   </svg>
 `;
 
-const makeDropzoneSlot = (headingText: string) => html`
+const DEFAULT_DROPZONE_DESCRIPTION = 'Or, select a file from your computer';
+
+const makeDropzoneSlot = (
+  headingText: string,
+  descriptionText: string = DEFAULT_DROPZONE_DESCRIPTION
+) => html`
   <swc-illustrated-message>
     ${unsafeHTML(DROPZONE_SVG)}
     <h2 slot="heading">${headingText}</h2>
+    <span slot="description">${descriptionText}</span>
     <swc-button slot="actions" variant="accent">Browse files</swc-button>
   </swc-illustrated-message>
 `;
@@ -89,6 +94,7 @@ const DROPZONE_SLOT_HTML = `
   <swc-illustrated-message>
     ${DROPZONE_SVG}
     <h2 slot="heading">Drag and drop your file</h2>
+    <span slot="description">${DEFAULT_DROPZONE_DESCRIPTION}</span>
     <swc-button slot="actions" variant="accent">Browse files</swc-button>
   </swc-illustrated-message>
 `;

2nd-gen/packages/swc/components/illustrated-message/IllustratedMessage.ts

@@ -46,8 +46,11 @@ export class IllustratedMessage extends IllustratedMessageBase {
   protected override render(): TemplateResult {
     return html`
       <div class="swc-IllustratedMessage">
-        <div class="swc-IllustratedMessage-illustration">
-          <slot></slot>
+        <div
+          class="swc-IllustratedMessage-illustration"
+          ?hidden=${!this._hasIllustration}
+        >
+          <slot @slotchange=${this.handleIllustrationSlotChange}></slot>
         </div>
         <div class="swc-IllustratedMessage-content">
           <slot

2nd-gen/packages/swc/components/illustrated-message/illustrated-message.css

@@ -40,6 +40,15 @@
   color: var(--swc-illustrated-message-illustration-color, token("neutral-content-color-default"));
 }
 
+/*
+ * [hidden] and .swc-IllustratedMessage-illustration share specificity, so the
+ * class rule above wins over the UA stylesheet's [hidden] { display: none }
+ * unless this rule raises the specificity explicitly.
+ */
+.swc-IllustratedMessage-illustration[hidden] {
+  display: none;
+}
+
 .swc-IllustratedMessage-content {
   display: flex;
   flex-direction: column;

2nd-gen/packages/swc/components/illustrated-message/test/illustrated-message.test.ts

@@ -201,6 +201,69 @@ export const DefaultSlotIllustrationTest: Story = {
   },
 };
 
+export const IllustrationWrapperCollapsesWhenEmptyTest: Story = {
+  render: () => html`
+    <swc-illustrated-message>
+      <h2 slot="heading">Heading</h2>
+    </swc-illustrated-message>
+  `,
+  play: async ({ canvasElement, step }) => {
+    const illustratedMessage = await getComponent<IllustratedMessage>(
+      canvasElement,
+      'swc-illustrated-message'
+    );
+
+    await step(
+      'hides the illustration wrapper when no illustration is slotted',
+      async () => {
+        const wrapper = illustratedMessage.shadowRoot?.querySelector(
+          '.swc-IllustratedMessage-illustration'
+        );
+        expect(wrapper?.hasAttribute('hidden'), 'wrapper has [hidden]').toBe(
+          true
+        );
+      }
+    );
+
+    await step(
+      'reveals the illustration wrapper once an illustration is slotted',
+      async () => {
+        const illustrationSlot =
+          illustratedMessage.shadowRoot?.querySelector<HTMLSlotElement>(
+            'slot:not([name])'
+          );
+        if (!illustrationSlot) {
+          return;
+        }
+
+        const slotChanged = new Promise<void>((resolve) =>
+          illustrationSlot.addEventListener('slotchange', () => resolve(), {
+            once: true,
+          })
+        );
+
+        const svg = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'svg'
+        );
+        svg.setAttribute('aria-hidden', 'true');
+        illustratedMessage.prepend(svg);
+
+        await slotChanged;
+        await illustratedMessage.updateComplete;
+
+        const wrapper = illustratedMessage.shadowRoot?.querySelector(
+          '.swc-IllustratedMessage-illustration'
+        );
+        expect(
+          wrapper?.hasAttribute('hidden'),
+          'wrapper no longer has [hidden]'
+        ).toBe(false);
+      }
+    );
+  },
+};
+
 export const DescriptionSlotTest: Story = {
   render: () => html`
     <swc-illustrated-message>