Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dropzone): migrating new S2 tokens, more spaced out dashed lines, more illustrations #3429

Merged
merged 25 commits into from
Mar 5, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
5491940
feat(dropzone): adding dropzone migration
aramos-adobe Dec 2, 2024
21a967c
chore(dropzone): update test data
aramos-adobe Feb 6, 2025
3ba32a6
chore(dropzone): storybook build fix and s2 updates
aramos-adobe Feb 10, 2025
b44466a
chore(dropzone): adding metadata files
aramos-adobe Feb 11, 2025
f41e9d0
feat(dropzone): adjusting template and css files
aramos-adobe Feb 19, 2025
6e166a4
chore(dropzone): adding icons
aramos-adobe Feb 19, 2025
a4b1d91
feat(dropzone): fixing svg box, border fallback, whcm fix
aramos-adobe Feb 22, 2025
d53ab62
chore(dropzone): removing icon dist files
aramos-adobe Feb 22, 2025
eae171b
feat(dropzone): updating changeset and modifiers
aramos-adobe Feb 22, 2025
e6bf325
feat(dropzone): removing illustration mod token using im color
aramos-adobe Feb 24, 2025
028caf7
chore(dropzone): restoring s2 files
aramos-adobe Feb 27, 2025
72f5f09
feat(dropzone): updating whcm mode
aramos-adobe Feb 27, 2025
940d10c
feat(dropzone): adding metadata
aramos-adobe Feb 27, 2025
c53cda6
feat(dropzone): adding filled story desc
aramos-adobe Feb 27, 2025
1d7fbe8
Merge branch 'spectrum-two' into aramos-adobe/css782-dropzone-s2-migr…
aramos-adobe Feb 27, 2025
6d529df
Merge branch 'spectrum-two' into aramos-adobe/css782-dropzone-s2-migr…
aramos-adobe Feb 27, 2025
98614ae
feat(dropzone): update changeset, cleaning up template and css files
aramos-adobe Feb 28, 2025
0b00dca
chore(dropzone): restoring base s2 files
aramos-adobe Mar 3, 2025
65af83b
chore(dropzone): restoring global vars and changelog
aramos-adobe Mar 3, 2025
f38d2c3
Merge branch 'spectrum-two' into aramos-adobe/css782-dropzone-s2-migr…
aramos-adobe Mar 4, 2025
10933e7
chore(dropzone): update with new revisions
aramos-adobe Mar 5, 2025
475da69
chore(dropzone): fixing lint error
aramos-adobe Mar 5, 2025
393416f
chore(dropzone): reverting files
aramos-adobe Mar 5, 2025
740b0eb
chore(dropzone): fixing weird changes
aramos-adobe Mar 5, 2025
7f5e9c8
chore(dropzone): fixing weird changes again
aramos-adobe Mar 5, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions .changeset/big-beds-care.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
"@spectrum-css/dropzone": major
---

## Dropzone S2 Migration

Since dropzone shares a lot of illustrated message's new content tokens (typography and spacing), tons of unused`--mods` were removed.

The component reflects the [new design](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=10141-2822&m=dev) of the borders that includes dash length and dash gap.

### SVG Border

To support the intention of the design, an SVG element is used. There are custom `--mod` tokens to adjust the length of dashed lines and the gap between them. It's understood it may be too much to consume an additional element so there's a fallback where the SVG element is not necessary - dropzone will use the standard `border` CSS property.

### New mods

`--mod-drop-zone-content-height`
`--mod-drop-zone-edge-to-text`
`--mod-drop-zone-title-line-height`
`--mod-drop-zone-border-dash-length`
`--mod-drop-zone-border-dash-gap`

### 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`
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 changes: 31 additions & 81 deletions components/dropzone/dist/metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,166 +2,116 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-DropZone",
".spectrum-DropZone .spectrum-IllustratedMessage",
".spectrum-DropZone-actions",
".spectrum-DropZone-button",
".spectrum-DropZone-button .spectrum-Button-label",
".spectrum-DropZone-button:focus",
".spectrum-DropZone-button:hover",
".spectrum-DropZone-content",
".spectrum-DropZone-stroke",
".spectrum-DropZone-strokePath",
".spectrum-DropZone.is-dragged",
".spectrum-DropZone.is-dragged .spectrum-DropZone-strokePath",
".spectrum-DropZone.is-filled",
".spectrum-DropZone.is-filled.is-dragged",
".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-actions",
".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-content",
".spectrum-DropZone:focus-visible",
".spectrum-DropZone:lang(ja)",
".spectrum-DropZone:lang(ko)",
".spectrum-DropZone:lang(zh)"
".spectrum-DropZone:has(.spectrum-DropZone-stroke)"
],
"modifiers": [
"--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",
"--mod-drop-zone-border-dash-gap",
"--mod-drop-zone-border-dash-length",
"--mod-drop-zone-border-style",
"--mod-drop-zone-border-style--dragged",
"--mod-drop-zone-border-style-dragged",
"--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",
"--mod-drop-zone-content-line-height",
"--mod-drop-zone-content-max-width",
"--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-edge-to-text",
"--mod-drop-zone-illustration-color-hover",
"--mod-drop-zone-illustration-to-heading",
"--mod-drop-zone-inline-size",
"--mod-drop-zone-padding",
"--mod-drop-zone-width"
"--mod-drop-zone-title-line-height"
],
"component": [
"--spectrum-drop-zone-background-color",
"--spectrum-drop-zone-background-color-opacity",
"--spectrum-drop-zone-background-color-opacity-filled",
"--spectrum-drop-zone-background-color-rgb",
"--spectrum-drop-zone-body-color",
"--spectrum-drop-zone-body-font-family",
"--spectrum-drop-zone-body-font-size",
"--spectrum-drop-zone-body-font-style",
"--spectrum-drop-zone-body-font-weight",
"--spectrum-drop-zone-body-line-height",
"--spectrum-drop-zone-body-size",
"--spectrum-drop-zone-body-to-action",
"--spectrum-drop-zone-border-color",
"--spectrum-drop-zone-border-color-hover",
"--spectrum-drop-zone-border-dash-gap",
"--spectrum-drop-zone-border-dash-length",
"--spectrum-drop-zone-border-width",
"--spectrum-drop-zone-cjk-title-size",
"--spectrum-drop-zone-component-height",
"--spectrum-drop-zone-content-background-color",
"--spectrum-drop-zone-content-bottom-to-text",
"--spectrum-drop-zone-content-color",
"--spectrum-drop-zone-content-edge-to-text",
"--spectrum-drop-zone-content-font-family",
"--spectrum-drop-zone-content-font-size",
"--spectrum-drop-zone-content-font-style",
"--spectrum-drop-zone-content-font-weight",
"--spectrum-drop-zone-content-height",
"--spectrum-drop-zone-content-line-height",
"--spectrum-drop-zone-content-max-width",
"--spectrum-drop-zone-content-maximum-width",
"--spectrum-drop-zone-content-top-to-text",
"--spectrum-drop-zone-corner-radius",
"--spectrum-drop-zone-heading-color",
"--spectrum-drop-zone-heading-font-family",
"--spectrum-drop-zone-heading-font-size",
"--spectrum-drop-zone-heading-font-style",
"--spectrum-drop-zone-heading-font-weight",
"--spectrum-drop-zone-heading-line-height",
"--spectrum-drop-zone-heading-to-body",
"--spectrum-drop-zone-illustration-color",
"--spectrum-drop-zone-dragged-background-color",
"--spectrum-drop-zone-edge-to-text",
"--spectrum-drop-zone-illustration-color-hover",
"--spectrum-drop-zone-illustration-to-heading",
"--spectrum-drop-zone-illustration-to-title",
"--spectrum-drop-zone-inline-size",
"--spectrum-drop-zone-padding",
"--spectrum-drop-zone-title-size",
"--spectrum-drop-zone-stroke-dash-gap",
"--spectrum-drop-zone-stroke-dash-length",
"--spectrum-drop-zone-title-line-height",
"--spectrum-drop-zone-width"
],
"global": [
"--spectrum-accent-content-color-default",
"--spectrum-accent-visual-color",
"--spectrum-body-color",
"--spectrum-body-line-height",
"--spectrum-body-sans-serif-font-style",
"--spectrum-body-sans-serif-font-weight",
"--spectrum-bold-font-weight",
"--spectrum-border-width-200",
"--spectrum-component-bottom-to-text-300",
"--spectrum-component-edge-to-text-300",
"--spectrum-component-height-300",
"--spectrum-component-top-to-text-300",
"--spectrum-corner-radius-100",
"--spectrum-default-font-style",
"--spectrum-corner-radius-500",
"--spectrum-corner-radius-700",
"--spectrum-font-size-300",
"--spectrum-gray-200",
"--spectrum-heading-color",
"--spectrum-heading-line-height",
"--spectrum-heading-sans-serif-font-style",
"--spectrum-heading-sans-serif-font-weight",
"--spectrum-gray-300",
"--spectrum-line-height-100",
"--spectrum-neutral-visual-color",
"--spectrum-sans-font-family-stack",
"--spectrum-spacing-200",
"--spectrum-spacing-300",
"--spectrum-spacing-400",
"--spectrum-spacing-75",
"--spectrum-white"
"--spectrum-spacing-400"
],
"passthroughs": [
"--mod-actionbutton-edge-to-text",
"--mod-actionbutton-font-size",
"--mod-actionbutton-label-color",
"--mod-illustrated-message-description-color",
"--mod-illustrated-message-description-font-family",
"--mod-button-border-radius",
"--mod-illustrated-message-description-font-size",
"--mod-illustrated-message-description-font-style",
"--mod-illustrated-message-description-font-weight",
"--mod-illustrated-message-description-line-height",
"--mod-illustrated-message-description-position",
"--mod-illustrated-message-description-to-action",
"--mod-illustrated-message-description-z-index",
"--mod-illustrated-message-display",
"--mod-illustrated-message-heading-to-description",
"--mod-illustrated-message-illustration-color",
"--mod-illustrated-message-illustration-to-heading",
"--mod-illustrated-message-title-color",
"--mod-illustrated-message-title-font-family",
"--mod-illustrated-message-title-font-size",
"--mod-illustrated-message-title-font-style",
"--mod-illustrated-message-title-font-weight",
"--mod-illustrated-message-title-line-height",
"--mod-illustrated-message-vertical-maximum-width"
],
"high-contrast": [
"--highcontrast-drop-zone-border-color",
"--highcontrast-drop-zone-border-color-hover",
"--highcontrast-drop-zone-illustration-color",
"--highcontrast-illustrated-message-illustration-color"
"--highcontrast-drop-zone-button-color"
]
}
Loading
Loading