feat(dropzone): s2 migrations

Author: aramos-adobe

.changeset/big-beds-care.md

@@ -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`

components/dropzone/assets/dropzone-bg.png assets/dropzone-illustration.png

@@ -12,83 +12,39 @@ governing permissions and limitations under the License.
 
 .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 {
@@ -102,6 +58,7 @@ governing permissions and limitations under the License.
 	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 */
@@ -111,6 +68,7 @@ governing permissions and limitations under the License.
 
 		/* 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 {
@@ -122,8 +80,12 @@ governing permissions and limitations under the License.
 	}
 
 	&.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;
@@ -153,7 +115,7 @@ governing permissions and limitations under the License.
 .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));

components/dropzone/index.css

@@ -3,12 +3,7 @@
 | `--mod-drop-zone-background-color`                |
 | `--mod-drop-zone-background-color-opacity`        |
 | `--mod-drop-zone-background-color-opacity-filled` |
-| `--mod-drop-zone-body-color`                      |
-| `--mod-drop-zone-body-font-family`                |
 | `--mod-drop-zone-body-font-size`                  |
-| `--mod-drop-zone-body-font-style`                 |
-| `--mod-drop-zone-body-font-weight`                |
-| `--mod-drop-zone-body-line-height`                |
 | `--mod-drop-zone-body-to-action`                  |
 | `--mod-drop-zone-border-color`                    |
 | `--mod-drop-zone-border-color-hover`              |
@@ -18,11 +13,8 @@
 | `--mod-drop-zone-border-width`                    |
 | `--mod-drop-zone-content-background-color`        |
 | `--mod-drop-zone-content-bottom-to-text`          |
-| `--mod-drop-zone-content-color`                   |
 | `--mod-drop-zone-content-display`                 |
-| `--mod-drop-zone-content-edge-to-text`            |
 | `--mod-drop-zone-content-font-family`             |
-| `--mod-drop-zone-content-font-size`               |
 | `--mod-drop-zone-content-font-style`              |
 | `--mod-drop-zone-content-font-weight`             |
 | `--mod-drop-zone-content-height`                  |
@@ -31,16 +23,7 @@
 | `--mod-drop-zone-content-maximum-width`           |
 | `--mod-drop-zone-content-top-to-text`             |
 | `--mod-drop-zone-corner-radius`                   |
-| `--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-color`              |
 | `--mod-drop-zone-illustration-color-hover`        |
-| `--mod-drop-zone-illustration-to-heading`         |
-| `--mod-drop-zone-illustration-to-title`           |
 | `--mod-drop-zone-padding`                         |
 | `--mod-drop-zone-width`                           |

components/dropzone/metadata/mods.md

@@ -1,7 +1,5 @@
 import { default as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/illustratedmessage.stories.js";
-import { html } from "lit";
-import { Template } from "./template";
-
+import { SizingTemplate, Template } from "./template";
 
 /**
  * A drop zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. For example, a drop zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the drop zone, which is a more efficient and intuitive action, rather than utilize the standard "Choose file" dialog.
@@ -37,11 +35,13 @@ export default {
 				category: "Content"
 			},
 		},
+		...IllustratedMessage.argTypes,
 		hasButtons: {
-			name: "Show button group",
 			table: { disable: true },
 		},
-		...IllustratedMessage.argTypes
+		isHorizontal: {
+			table: { disable: true },
+		},
 	},
 	args: {
 		rootClass: "spectrum-DropZone",
@@ -50,6 +50,7 @@ export default {
 		heading: "Drag and drop your file",
 		description: "Or, select a file from your computer.",
 		label: "Browse files",
+		size: "m"
 	},
 	parameters: {
 		actions: {
@@ -62,22 +63,30 @@ export default {
 	},
 };
 
-export const Default = (args) => html`
-	<div>
-		${Template({
-			...args
-		})}
-	</div>
-`;
+export const Default = Template.bind({});
 Default.args = {};
 
 export const Dragged = Template.bind({});
 Dragged.args = {
 	isDragged: true,
 };
+Dragged.parameters = {
+	chromatic: { disableSnapshot: true },
+};
 
 export const FilledAndDragged = Template.bind({});
 FilledAndDragged.args = {
 	isDragged: true,
 	isFilled: true,
+	label: "Drop file to replace"
+};
+FilledAndDragged.parameters = {
+	chromatic: { disableSnapshot: true },
 };
+
+export const Sizing = SizingTemplate.bind({});
+Sizing.args = {};
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};