Skip to content

Commit 607abae

Browse files
cdransfcdransf
committed
chore(dropzone): full fidelity
1 parent 4ababe0 commit 607abae

8 files changed

Lines changed: 367 additions & 31 deletions

File tree

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@
1313
import { property } from 'lit/decorators.js';
1414

1515
import { SpectrumElement } from '@spectrum-web-components/core/element/index.js';
16+
import { SizedMixin } from '@spectrum-web-components/core/mixins/index.js';
1617

1718
import {
1819
DROP_EFFECTS,
1920
type DropEffect,
21+
DROPZONE_VALID_SIZES,
22+
type DropzoneSize,
2023
SWC_DROPZONE_DRAGLEAVE_EVENT,
2124
SWC_DROPZONE_DRAGOVER_EVENT,
2225
SWC_DROPZONE_DROP_EVENT,
@@ -41,7 +44,11 @@ import {
4144
* @fires swc-dropzone-drop - Fired when files are dropped on the zone. `element.dragged`
4245
* is still `true` when this event fires; it transitions to `false` after dispatch.
4346
*/
44-
export abstract class DropzoneBase extends SpectrumElement {
47+
export abstract class DropzoneBase extends SizedMixin(SpectrumElement, {
48+
validSizes: DROPZONE_VALID_SIZES,
49+
}) {
50+
declare public size: DropzoneSize;
51+
4552
// ──────────────────────────
4653
// SHARED API
4754
// ──────────────────────────
@@ -191,9 +198,7 @@ export abstract class DropzoneBase extends SpectrumElement {
191198
}
192199

193200
this._clearDragLeaveTimer();
194-
// Update the status region synchronously before dispatch (matching _onDragLeave),
195-
// and dispatch while `dragged` is still `true` so listeners read correct state.
196-
this._onDragStateChange(false);
201+
// Dispatch before clearing `dragged`; `updated()` handles the status region after `filled` settles.
197202
this.dispatchEvent(
198203
new CustomEvent<DragEvent>(SWC_DROPZONE_DROP_EVENT, {
199204
bubbles: true,

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,18 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13+
// ──────────────────
14+
// SIZES
15+
// ──────────────────
16+
17+
export type DropzoneSize = 's' | 'm' | 'l';
18+
19+
export const DROPZONE_VALID_SIZES = [
20+
's',
21+
'm',
22+
'l',
23+
] as const satisfies readonly DropzoneSize[];
24+
1325
// ──────────────────
1426
// DROP EFFECT
1527
// ──────────────────
@@ -40,6 +52,9 @@ export const SWC_DROPZONE_DRAGLEAVE_EVENT = 'swc-dropzone-dragleave';
4052
/** Fired when files are dropped on the drop zone. */
4153
export const SWC_DROPZONE_DROP_EVENT = 'swc-dropzone-drop';
4254

55+
/** Type alias retained for consumers who imported `DropzoneEventDetail` from the 1st-gen package. */
56+
export type DropzoneEventDetail = DragEvent;
57+
4358
declare global {
4459
interface GlobalEventHandlersEventMap {
4560
[SWC_DROPZONE_SHOULD_ACCEPT_EVENT]: CustomEvent<DragEvent>;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -408,6 +408,7 @@ const preview = {
408408
'Dropzone',
409409
[
410410
'Accessibility migration analysis',
411+
'Migration plan',
411412
'Rendering and styling migration analysis',
412413
],
413414
'Field group',

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ import styles from './dropzone.css';
3737
* @fires swc-dropzone-drop - Fired when files are dropped on the zone. Set `filled` in
3838
* your handler to transition the zone to its filled state.
3939
*
40-
* @cssprop --swc-dropzone-background-color - Background color of the drop zone.
41-
* @cssprop --swc-dropzone-border-color - Border color in the default state.
42-
* @cssprop --swc-dropzone-border-color-dragged - Border color when files are dragged over.
43-
* @cssprop --swc-dropzone-border-width - Border width.
44-
* @cssprop --swc-dropzone-corner-radius - Corner radius.
45-
* @cssprop --swc-dropzone-padding - Padding inside the drop zone.
40+
* @cssprop --swc-dropzone-background-color - Background color of the drop zone. Transparent by default; overridden to a subtle accent tint in the dragged state.
41+
* @cssprop --swc-dropzone-border-color - Dashed border color in the default state. Defaults to the gray-300 token.
42+
* @cssprop --swc-dropzone-border-color-dragged - Solid border color when files are dragged over the zone. Defaults to the accent visual color token.
43+
* @cssprop --swc-dropzone-border-width - Border width. Defaults to the border-width-200 token (2px).
44+
* @cssprop --swc-dropzone-corner-radius - Corner radius. Defaults to the corner-radius-400 token.
45+
* @cssprop --swc-dropzone-padding - Padding inside the drop zone. Defaults vary by size: spacing-300 (s), spacing-400 (m), spacing-600 (l).
4646
*/
4747
export class Dropzone extends DropzoneBase {
4848
public static override get styles(): CSSResultArray {
@@ -96,16 +96,17 @@ export class Dropzone extends DropzoneBase {
9696
}
9797

9898
/**
99-
* Called synchronously when drag state changes so the status region is updated
100-
* before the next Lit render cycle completes.
99+
* Called synchronously on drag-enter and drag-leave so the status region is
100+
* updated before the next Lit render cycle completes. The drop case is handled
101+
* by `updated()` so that `filled` has been set by the consumer's handler first.
101102
*
102-
* @param _isDragged - `true` when drag enters; `false` when it leaves or a drop occurs.
103+
* @param isDragged - `true` when drag enters; `false` when it leaves.
103104
* @internal
104105
*/
105-
protected override _onDragStateChange(_isDragged: boolean): void {
106+
protected override _onDragStateChange(isDragged: boolean): void {
106107
const el = this._statusEl;
107108
if (el) {
108-
el.textContent = this._statusText(_isDragged, this.filled);
109+
el.textContent = this._statusText(isDragged, this.filled);
109110
}
110111
}
111112

@@ -157,8 +158,10 @@ export class Dropzone extends DropzoneBase {
157158

158159
protected override render(): TemplateResult {
159160
return html`
160-
<div role="status" aria-live="polite" class="visually-hidden"></div>
161-
<slot></slot>
161+
<div class="swc-Dropzone">
162+
<div role="status" aria-live="polite" class="swc-Dropzone-status"></div>
163+
<slot></slot>
164+
</div>
162165
`;
163166
}
164167
}

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

Lines changed: 98 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,112 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
/* Phase 5 (Styling): migrate Spectrum CSS tokens here. */
14-
1513
:host {
1614
display: block;
1715
}
1816

19-
.visually-hidden {
17+
* {
18+
box-sizing: border-box;
19+
}
20+
21+
/* ─────────────────────────────────────
22+
Base wrapper — default (medium) size
23+
───────────────────────────────────── */
24+
25+
.swc-Dropzone {
26+
--_swc-dropzone-border-width: var(--swc-dropzone-border-width, token("border-width-200"));
27+
--_swc-dropzone-corner-radius: var(--swc-dropzone-corner-radius, token("corner-radius-400"));
28+
--_swc-dropzone-padding: var(--swc-dropzone-padding, token("spacing-400"));
29+
--_swc-dropzone-border-color: var(--swc-dropzone-border-color, token("gray-300"));
30+
31+
display: flex;
32+
position: relative;
33+
flex-direction: column;
34+
gap: token("spacing-300");
35+
align-items: center;
36+
justify-content: center;
37+
padding: var(--_swc-dropzone-padding);
38+
background: var(--swc-dropzone-background-color, transparent);
39+
border: var(--_swc-dropzone-border-width) dashed var(--_swc-dropzone-border-color);
40+
border-radius: var(--_swc-dropzone-corner-radius);
41+
}
42+
43+
/* ─────────────────────────────────────
44+
Sizes
45+
───────────────────────────────────── */
46+
47+
:host([size="s"]) .swc-Dropzone {
48+
--_swc-dropzone-padding: var(--swc-dropzone-padding, token("spacing-300"));
49+
}
50+
51+
:host([size="l"]) .swc-Dropzone {
52+
--_swc-dropzone-padding: var(--swc-dropzone-padding, token("spacing-600"));
53+
}
54+
55+
/* ─────────────────────────────────────
56+
Dragged state
57+
───────────────────────────────────── */
58+
59+
:host([dragged]) .swc-Dropzone {
60+
--_swc-dropzone-border-color: var(--swc-dropzone-border-color-dragged, token("accent-visual-color"));
61+
62+
background: var(--swc-dropzone-background-color, token("accent-subtle-background-color-default"));
63+
border-style: solid;
64+
}
65+
66+
/* Cascade accent illustration color into any slotted swc-illustrated-message. */
67+
:host([dragged]) {
68+
--swc-illustrated-message-illustration-color: token("accent-visual-color");
69+
}
70+
71+
/* ─────────────────────────────────────
72+
Focus-within (browse control focused)
73+
───────────────────────────────────── */
74+
75+
/* Mirror the dragged border when the browse control receives keyboard focus. */
76+
:host(:focus-within) .swc-Dropzone {
77+
--_swc-dropzone-border-color: var(--swc-dropzone-border-color-dragged, token("accent-visual-color"));
78+
79+
border-style: solid;
80+
}
81+
82+
/* ─────────────────────────────────────
83+
Filled state
84+
───────────────────────────────────── */
85+
86+
:host([filled]) ::slotted(swc-illustrated-message) {
87+
display: none;
88+
}
89+
90+
/* ─────────────────────────────────────
91+
Visually-hidden status region
92+
───────────────────────────────────── */
93+
94+
.swc-Dropzone-status {
2095
position: absolute;
2196
inline-size: 1px;
2297
block-size: 1px;
2398
white-space: nowrap;
2499
overflow: hidden;
25100
clip-path: inset(50%);
26101
}
102+
103+
/* ─────────────────────────────────────
104+
Forced colors
105+
───────────────────────────────────── */
106+
107+
@media (forced-colors: active) {
108+
:host {
109+
--swc-illustrated-message-illustration-color: CanvasText;
110+
}
111+
112+
.swc-Dropzone {
113+
border-color: ButtonText;
114+
}
115+
116+
:host([dragged]) .swc-Dropzone,
117+
:host(:focus-within) .swc-Dropzone {
118+
background: Canvas;
119+
border-color: Highlight;
120+
}
121+
}

0 commit comments

Comments
 (0)