Skip to content

Commit

Permalink
feat(dropzone): s2 migrations
Browse files Browse the repository at this point in the history
  • Loading branch information
@aramos-adobe
aramos-adobe committed Jan 9, 2025
1 parent 9aaa4ca commit b2b714d
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 100 deletions.
15 changes: 15 additions & 0 deletions .changeset/big-beds-care.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
"@spectrum-css/dropzone": major
---

## Dropzone S2 Migration

This migration shares the new changes made from the illustrated message component.

### New mods

`--mod-drop-zone-content-height`

### Removed mods

`--mod-drop-zone-body-color` `--mod-drop-zone-body-font-family` `--mod-drop-zone-body-font-style` `--mod-drop-zone-body-font-weight` `--mod-drop-zone-body-line-height` `--mod-drop-zone-content-color` `--mod-drop-zone-content-edge-to-text` `--mod-drop-zone-content-font-size` `--mod-drop-zone-heading-color` `--mod-drop-zone-heading-font-family` `--mod-drop-zone-heading-font-size` `--mod-drop-zone-heading-font-style` `--mod-drop-zone-heading-font-weight` `--mod-drop-zone-heading-line-height` `--mod-drop-zone-heading-to-body` `--mod-drop-zone-illustration-to-heading` `--mod-drop-zone-illustration-to-title`
0 components/dropzone/assets/dropzone-bg.png → ...k/assets/images/dropzone-illustration.png
View file
File renamed without changes
66 changes: 14 additions & 52 deletions components/dropzone/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,83 +15,39 @@

.spectrum-DropZone {
--spectrum-drop-zone-padding: var(--spectrum-spacing-400);
--spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400);
--spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75);

--spectrum-drop-zone-border-width: var(--spectrum-border-width-200);
--spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100);
--spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-700);
--spectrum-drop-zone-border-color: var(--spectrum-gray-200);

--spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
--spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
--spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size);
--spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height);
--spectrum-drop-zone-heading-color: var(--spectrum-heading-color);

--spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
--spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style);
--spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size);
--spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height);
--spectrum-drop-zone-body-color: var(--spectrum-body-color);

--spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb);
--spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color);
--spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color);
--spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color);
--spectrum-drop-zone-illustration-to-title: var(--spectrum-spacing-200);
--spectrum-drop-zone-body-to-action: var(--spectrum-spacing-300);

/* Filled styles */
--spectrum-drop-zone-content-height: var(--spectrum-component-height-300);
--spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width);
--spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300);
--spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300);
--spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300);

--spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight);
--spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style);
--spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300);
--spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100);

--spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color);
--spectrum-drop-zone-content-color: var(--spectrum-white);

/* Settings for a nested illustrated message */
--mod-illustrated-message-vertical-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width));
--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color));
--mod-illustrated-message-illustration-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading));
--mod-illustrated-message-illustration-to-content: var(--mod-drop-zone-illustration-to-title, var(--spectrum-drop-zone-illustration-to-title));
--mod-illustrated-message-heading-to-description: var(--mod-drop-zone-heading-to-body, var(--spectrum-drop-zone-heading-to-body));

--mod-illustrated-message-description-to-action: var(--mod-drop-zone-body-to-action, var(--spectrum-drop-zone-body-to-action));
--mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-drop-zone-heading-font-family));
--mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-drop-zone-heading-font-weight));
--mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-drop-zone-heading-font-style));
--mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-heading-font-size));
--mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-drop-zone-heading-line-height));
--mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-drop-zone-heading-color));
--mod-illustrated-message-description-position: relative;
--mod-illustrated-message-description-z-index: 10;
--mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-drop-zone-body-font-family));
--mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-drop-zone-body-font-weight));
--mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-drop-zone-body-font-style));
--mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size));
--mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height));
--mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color));

/* Settings for a nested actionbutton */
--mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size));
--mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color));
--mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text));

/* cjk language support */
&:lang(ja),
&:lang(zh),
&:lang(ko) {
--spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-cjk-title-size);
}

--mod-drop-zone-content-display: flex;
--mod-drop-zone-content-height: 280px;
}

.spectrum-DropZone {
Expand All @@ -105,6 +61,7 @@
border-style: var(--mod-drop-zone-border-style, dashed);
background-size: cover;
background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color));
color: var(--spectrum-drop-zone-illustration-color);

&.is-dragged {
/* @deprecation --mod-drop-zone-border-style--dragged will be removed during the S2 migration; please update your code to --mod-drop-zone-border-style-dragged */
Expand All @@ -114,6 +71,7 @@

/* Updated values for a nested illustrated message when state changes */
--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover));
color: var(--spectrum-drop-zone-illustration-color-hover);
}

&.is-filled {
Expand All @@ -125,8 +83,12 @@
}

&.is-filled.is-dragged {
--mod-drop-zone-content-display: flex;
background-image: url("https://s3-alpha-sig.figma.com/img/18cd/d82f/a71c264919d2049dcb540ae23897d027?Expires=1733097600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=OMgIsMMWb10DyYC8c-pAUm4MxTwft~CTzqPojWvC0fLCFthNPTm5uh3esb1hTRxleJ9-HMNTvqawigP1GCbYI4PqCgkgMZA2CxvtksvQoi2qvVOBy-U6grTgw2KRFOkNEsT~UkcQRAdx0wDZs-PBGyeeMjs0jyZTmq7LbR5ntIVaFFNTpBTnj1o9Hl2S-Ofo1UEANW58Az~3JvY1XyuSYd3q1QIXb-lYi57QQ74F85P0B6ZDW~0n7o-9eg4SsJ0OgVgJu3LRr6XFyNCbb109Iu~wrmSHCjnCLm5~9v4lY0Tm8whnUYQ3js88LHFxUghP~3MJahtKgJXqMwJKNMhCCQ__");
background-position: center;
display: var(--mod-drop-zone-content-display);
align-items: center;
justify-content: center;
block-size: var(--mod-drop-zone-content-height);
background-blend-mode: multiply;

.spectrum-DropZone-actions {
margin-block-start: 0;
Expand Down Expand Up @@ -156,7 +118,7 @@
.spectrum-DropZone-button {
box-sizing: border-box;
border: none;
block-size: var(--mod-drop-zone-content-height, var(--spectrum-drop-zone-content-height));
block-size: auto;
max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width));
padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text));
padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text));
Expand Down
9 changes: 9 additions & 0 deletions components/dropzone/stories/dropzone.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
import { SizingTemplate } from "@spectrum-css/dropzone/stories/template.js";
import { default as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/illustratedmessage.stories.js";
import { Template as Link } from "@spectrum-css/link/stories/template.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
Expand Down Expand Up @@ -73,3 +74,11 @@ WithForcedColors.parameters = {
modes: disableDefaultModes
},
};


export const Sizing = SizingTemplate.bind({});
Sizing.args = {};
Sizing.tags = ["!dev"];
Sizing.parameters = {
chromatic: { disableSnapshot: true },
};
93 changes: 45 additions & 48 deletions components/dropzone/stories/template.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
import { Template as Button } from "@spectrum-css/button/stories/template.js";
import { Template as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/template.js";
import { getRandomId } from "@spectrum-css/preview/decorators";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
<<<<<<< HEAD
import { styleMap } from "lit/directives/style-map.js";
=======

import { Template as Button } from "@spectrum-css/button/stories/template.js";
import { Template as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/template.js";
<<<<<<< HEAD
import { when } from "lit/directives/when.js";
>>>>>>> fac121db1 (feat(illustratedmessage): new mods)
=======
>>>>>>> da506c0eb (feat(dropzone): adding dropzone migration)


import "../index.css";

Expand All @@ -23,55 +15,25 @@ export const Template = ({
isDragged = false,
isFilled = false,
customClasses = [],
<<<<<<< HEAD
customStyles = {},
heading,
description,
label,
id = getRandomId("dropzone"),
} = {}, context = {}) => {
return html`
<div
class=${classMap({
=======
heading,
description,
label,
id,
size = "m",
image = "dropzone-illustration.png",
...globals
}) => html`
<div
class=${classMap({
>>>>>>> da506c0eb (feat(dropzone): adding dropzone migration)
[rootClass]: true,
"is-dragged": isDragged,
"is-filled": isFilled,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
<<<<<<< HEAD
})}
id=${ifDefined(id)}
role="region"
tabindex="0"
style=${styleMap(customStyles)}
>
${IllustratedMessage({ heading, description }, context)}
<div class="${rootClass}-content">
${ActionButton(
{
label,
customClasses: [`${rootClass}-button`],
},
context
)}
</div>
=======
})}
id=${ifDefined(id)}
role="region"
tabindex="0"
style="width: 300px;"
style="${isDragged && isFilled ? `background-image:url(${image});` : null } width: 300px;"
>
${IllustratedMessage({
...globals,
Expand All @@ -81,11 +43,46 @@ export const Template = ({
size: size
})}
<div class="${rootClass}-actions">
${Button({
label: label ?? "Drop file to replace",
${isDragged && isFilled
? ActionButton({
label: label,
customClasses: [`${rootClass}-button`],
isSelected: true,
isEmphasized: true
})
: Button({
label: label,
size: size
})}
>>>>>>> da506c0eb (feat(dropzone): adding dropzone migration)
</div>
`;
};
</div>
`;


const customSvg = () => html`
<svg class="spectrum-IllustratedMessage-illustration" fill="none" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
<path d="m33.454 15.74c-4.1061 0-7.4545 3.3125-7.4545 7.4231v36.154c0 4.1106 3.3484 7.4231 7.4545 7.4231h29.091c4.1061 0 7.4545-3.3125 7.4545-7.4231v-21.254c0-1.9724-0.7882-3.8618-2.1875-5.253l-14.987-14.9c-1.3989-1.3908-3.2937-2.1701-5.2671-2.1701h-14.104zm-3.4545 7.4231c0-1.8796 1.5357-3.4231 3.4545-3.4231h14.104c0.92 0 1.7999 0.3634 2.4469 1.0067l14.987 14.9c0.6466 0.6429 1.0077 1.5123 1.0077 2.4164v21.254c0 1.8796-1.5357 3.4231-3.4545 3.4231h-29.091c-1.9188 0-3.4545-1.5435-3.4545-3.4231v-36.154zm9.7659 22.028c-0.8552-0.6991-2.1152-0.5726-2.8143 0.2825-0.6991 0.8552-0.5726 2.1152 0.2825 2.8143l8.2189 6.7193c0.3659 0.4459 0.9208 0.7309 1.5426 0.7323h0.0189l0.0167-2e-4c0.4638 0.0071 0.9295-0.1465 1.308-0.4605l8.4378-7c0.8501-0.7053 0.9675-1.9662 0.2623-2.8163-0.7053-0.8501-1.9662-0.9675-2.8163-0.2623l-5.2138 4.3254 0.0345-15.782c0.0024-1.1046-0.8911-2.002-1.9956-2.0044-1.1046-0.0024-2.002 0.8911-2.0044 1.9956l-0.0344 15.743-5.2434-4.2867zm-12.766 30.548c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h7.5c1.1046 0 2-0.8954 2-2s-0.8954-2-2-2h-7.5zm-15-9.5c-1.1046 0-2-0.8954-2-2v-7.5c0-1.1046 0.8954-2 2-2s2 0.8954 2 2v7.5c0 1.1046-0.8954 2-2 2zm70-1.5c0 1.1046 0.8954 2 2 2s2-0.8954 2-2v-7.5c0-1.1046-0.8954-2-2-2s-2 0.8954-2 2v7.5zm-61-22c0-1.1046-0.8954-2-2-2h-3.5c-3.0376 0-5.5 2.4624-5.5 5.5v3.5c0 1.1046 0.8954 2 2 2s2-0.8954 2-2v-3.5c0-0.8284 0.6716-1.5 1.5-1.5h3.5c1.1046 0 2-0.8954 2-2zm56-2c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h3.5c0.8284 0 1.5 0.6716 1.5 1.5v3.5c0 1.1046 0.8954 2 2 2s2-0.8954 2-2v-3.5c0-3.0376-2.4624-5.5-5.5-5.5h-3.5zm-65 28c-1.1046 0-2 0.8954-2 2v3.5c0 3.0376 2.4624 5.5 5.5 5.5h3.5c1.1046 0 2-0.8954 2-2s-0.8954-2-2-2h-3.5c-0.8284 0-1.5-0.6716-1.5-1.5v-3.5c0-1.1046-0.8954-2-2-2zm74 2c0-1.1046-0.8954-2-2-2s-2 0.8954-2 2v3.5c0 0.8284-0.6716 1.5-1.5 1.5h-3.5c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h3.5c3.0376 0 5.5-2.4624 5.5-5.5v-3.5zm-44 7c0-1.1046 0.8954-2 2-2h7.5c1.1046 0 2 0.8954 2 2s-0.8954 2-2 2h-7.5c-1.1046 0-2-0.8954-2-2zm19-2c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h7.5c1.1046 0 2-0.8954 2-2s-0.8954-2-2-2h-7.5z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>
`;

export const SizingTemplate = (args) => html`
${["s", "m", "l"].map((size) => {
return html` <div>
${Typography({
semantics: "detail",
size: "s",
content: [
{
s: "Small",
m: "Medium",
l: "Large",
}[size],
],
})}
${Template({
...args,
size,
})}
</div>`;
})}
`;

0 comments on commit b2b714d

Please sign in to comment.