From 70c8b738a28875d9e9f4a4aedb525b2273bc5aac Mon Sep 17 00:00:00 2001 From: Aziz Ramos Date: Wed, 4 Dec 2024 16:04:23 -0500 Subject: [PATCH] feat(dropzone): s2 migrations --- .changeset/big-beds-care.md | 15 ++++ .../dropzone-illustration.png | Bin components/dropzone/index.css | 66 ++++-------------- components/dropzone/metadata/mods.md | 17 ----- .../dropzone/stories/dropzone.stories.js | 33 +++++---- components/dropzone/stories/template.js | 44 ++++++++++-- .../illustratedmessage/metadata/mods.md | 1 - 7 files changed, 88 insertions(+), 88 deletions(-) create mode 100644 .changeset/big-beds-care.md rename components/dropzone/assets/dropzone-bg.png => assets/dropzone-illustration.png (100%) diff --git a/.changeset/big-beds-care.md b/.changeset/big-beds-care.md new file mode 100644 index 00000000000..574b47f7e68 --- /dev/null +++ b/.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` diff --git a/components/dropzone/assets/dropzone-bg.png b/assets/dropzone-illustration.png similarity index 100% rename from components/dropzone/assets/dropzone-bg.png rename to assets/dropzone-illustration.png diff --git a/components/dropzone/index.css b/components/dropzone/index.css index d0b43241c49..cae06d35a0d 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -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)); diff --git a/components/dropzone/metadata/mods.md b/components/dropzone/metadata/mods.md index 267e4683c2c..ba620fbf685 100644 --- a/components/dropzone/metadata/mods.md +++ b/components/dropzone/metadata/mods.md @@ -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` | diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index a82dadc3321..affd65b1816 100644 --- a/components/dropzone/stories/dropzone.stories.js +++ b/components/dropzone/stories/dropzone.stories.js @@ -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` -
- ${Template({ - ...args - })} -
-`; +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 }, +}; \ No newline at end of file diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index a662328fe46..a1da6cb0027 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -2,8 +2,10 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; +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 { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import "../index.css"; @@ -17,6 +19,7 @@ export const Template = ({ label, id, size = "m", + image = "dropzone-illustration.png", ...globals }) => html`
${IllustratedMessage({ ...globals, @@ -39,8 +42,15 @@ export const Template = ({ size: size })}
- ${Button({ - label: label ?? "Drop file to replace", + ${isDragged && isFilled + ? ActionButton({ + label: label, + customClasses: [`${rootClass}-button`], + isSelected: true, + isEmphasized: true + }) + : Button({ + label: label, size: size })}
@@ -49,7 +59,29 @@ export const Template = ({ const customSvg = () => html` - - - + + + `; + +export const SizingTemplate = (args) => html` + ${["s", "m", "l"].map((size) => { + return html`
+ ${Typography({ + semantics: "detail", + size: "s", + content: [ + { + s: "Small", + m: "Medium", + l: "Large", + }[size], + ], + })} + ${Template({ + ...args, + size, + })} +
`; + })} +`; \ No newline at end of file diff --git a/components/illustratedmessage/metadata/mods.md b/components/illustratedmessage/metadata/mods.md index 72a61138426..f0e8cead403 100644 --- a/components/illustratedmessage/metadata/mods.md +++ b/components/illustratedmessage/metadata/mods.md @@ -14,7 +14,6 @@ | `--mod-illustrated-message-heading-to-description` | | `--mod-illustrated-message-horizontal-maximum-width` | | `--mod-illustrated-message-illustrated-inline-size` | -| `--mod-illustrated-message-illustration-accent-color` | | `--mod-illustrated-message-illustration-block-size` | | `--mod-illustrated-message-illustration-color` | | `--mod-illustrated-message-illustration-size` |