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

aramos-adobe · 2024-12-04T21:31:36Z

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 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 modifiable 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

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

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Filled reflects hover state
Filled & Dragged state reflects replace
WHCM
S2 Tokens are being used
Normal border dashed style with no SVG - remove or comment out <svg className="spectrum-DropZone-stroke">

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2024-12-04T21:31:42Z

🦋 Changeset detected

Latest commit: 7f5e9c8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/dropzone	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-02-03T20:32:16Z

🚀 Deployed on https://pr-3429--spectrum-css.netlify.app

github-actions · 2025-02-03T20:34:56Z

File metrics

Summary

Total size: 1.37 MB^*

Package	Size	Minified	Gzipped
dropzone	8.62 KB	8.19 KB	1.65 KB

dropzone

Filename	Head	Minified	Gzipped	Compared to base
index.css	8.62 KB	8.19 KB	1.65 KB	🟢 ⬇ 3.66 KB
metadata.json	4.50 KB	-	-	🟢 ⬇ 2.04 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

rise-erpelding

Gosh, this one was a lot of work too! Leaving some initial thoughts and some questions about the CSS and design spec.

I think you might have made a couple of pushes after I started reviewing, so pardon if some of the comments made aren't up to date!

components/dropzone/dist/index.css

.changeset/big-beds-care.md

components/illustratedmessage/index.css

components/dropzone/index.css

rise-erpelding · 2025-02-04T01:19:57Z

components/dropzone/index.css

+	inline-size: 101%;
+	block-size: 101.5%;


How are these numbers calculated?

This was to make the stroke of the svg/rect fit. I think I can bring this back to 100% now that I figured out how the radius of the svg rectangle works

components/dropzone/index.css

components/dropzone/stories/template.js

…ation

marissahuysentruyt

Nice work on this! This one was pretty hairy and super intwined with illustrated message. Thanks for cleaning it all up!

I have some questions that I didn't quite know where to put...

My first question is about using the mod-drop-zone-width. If I set that, the inner content is then uncentered. Should we add

display: flex;
align-items: center;
justify-content: center;

to .spectrum-DropZone to prevent/combat that from happening? I guess I'm thinking that if a user needs to use that mod, I wouldn't want them to also have to go into the CSS to recenter the content. I'd just want them to be able to set the mod, and it just works for them. Does that make sense? Is that even a valid concern?

I also wanted to double check the color of the upload SVG visual. You've got it set correctly I think, to neutral-content-color-default (an alias for gray-800) like the Figma specs say. But Figma is actually using neutral-visual-color (which is an alias for gray-500) instead. You may have already checked on this, but which one is design expecting? There's definitely a difference since those 2 grays are quite distinct from each other.

Figma:

Code:

Last thing I'm curious about is the button color for isDragged+isFilled. Currently, the background of the button in the isDragged+isFilled state is set to accent-visual-color like the design specs. 👍 However...that token is resolving to a different rgb in the browser when I compare between Chrome and Figma. Is that design token incorrect? It seems like that token (maybe in tandem with the background color opacity?) is causing the button colors to change- is that correct? If I remove the background style from .spectrum-DropZone-button they resolve to the same rgb, but _not accent-visual-color. (it's --spectrum-accent-background-color-default 🤦‍♀️)

Lemme know if you wanna pair through any of this! I know I left a lot of ideas and questions for you!

.changeset/big-beds-care.md

components/dropzone/index.css

components/dropzone/stories/dropzone.stories.js

marissahuysentruyt · 2025-02-28T15:24:48Z

components/pagination/CHANGELOG.md

@@ -325,7 +325,7 @@ Output for all component CSS files is now being run through a lightweight optimi

 ### 🛑 BREAKING CHANGES

-  - Replaces DNA tokens with Spectrum tokens.
+- Replaces DNA tokens with Spectrum tokens.


I'm also not sure we need to change anything for pagination in this PR. If it were me, I might drop this, but I'll leave it up to you since it's not hurting anything (and arguably makes it better).

@aramos-adobe I still see these changes in the latest pull of this branch. I don't think it's really necessary to make this change in the context of this PR, that's all. It's not related to the rest of the work, but I'll leave it up to you if you want to keep it 👍

components/dropzone/stories/template.js

marissahuysentruyt · 2025-02-28T15:37:56Z

components/dropzone/index.css

+	--mod-drop-zone-content-height: 280px;
+
+	/* Typography */
+	--mod-illustrated-message-title-font-weight: var(--spectrum-title-serif-font-weight);
 }

 .spectrum-DropZone {
 	box-sizing: border-box;
 	inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width));


This isn't anything you introduced, but I believe the preference is to not use the token (in this case, drop-zone-width) in a direct style definition like this. I think we would need to define a custom property up towards the top of the file with the padding and border width, etc. and then use that in this style definition.

.spectrum-Dropzone { --spectrum-drop-zone-padding: var(--spectrum-spacing-400); --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-700); --spectrum-drop-zone-border-color: var(--spectrum-gray-300); --spectrum-drop-zone-inline-size: var(--spectrum-drop-zone-width); // use the token here just to define the custom prop ... // all of the other custom props & mods.... } .spectrum-Dropzone { box-sizing: border-box; inline-size: var(--mod-drop-zone-inline-size, var(--spectrum-drop-zone-inline-size)); // then use the custom prop in the style definition ... // and all the rest of the styles

This could be a nice way to "leave it better than we found it." Thoughts?

components/dropzone/index.css

aramos-adobe

@marissahuysentruyt ,

I addressed the color of the illustration last week in a thread. Design team is updating the Figma to match the token colors

…ation

marissahuysentruyt

This looks really good! I left some really small comments, but I don't think any of them are blocking, so I'll approve 👍 Sounds like there's some updates that are needed on the Figma side, but the code is all pointing to the right values & tokens.

marissahuysentruyt · 2025-03-04T20:29:40Z

tokens/custom/global-vars.css

+	--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255));
+	--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67));


@aramos-adobe I still see these changes. Do we need them?

components/dropzone/stories/template.js

marissahuysentruyt · 2025-03-04T20:33:49Z

components/pagination/CHANGELOG.md

@@ -325,7 +325,7 @@ Output for all component CSS files is now being run through a lightweight optimi

 ### 🛑 BREAKING CHANGES

-  - Replaces DNA tokens with Spectrum tokens.
+- Replaces DNA tokens with Spectrum tokens.


@aramos-adobe I still see these changes in the latest pull of this branch. I don't think it's really necessary to make this change in the context of this PR, that's all. It's not related to the rest of the work, but I'll leave it up to you if you want to keep it 👍

marissahuysentruyt · 2025-03-04T20:41:41Z

components/dropzone/stories/dropzone.stories.js

+};
+
+/**
+ * The filled state of a drop zone is used to indicate that a file has been dropped into the drop zone. Since the type size doesn't change in this state the dropzone size would be identical in all size variants.


A comma may be appropriate in the last sentence here. This is a very small, non-blocking nitpick.

Suggested change

* The filled state of a drop zone is used to indicate that a file has been dropped into the drop zone. Since the type size doesn't change in this state the dropzone size would be identical in all size variants.

* The filled state of a drop zone is used to indicate that a file has been dropped into the drop zone. Since the type size doesn't change in this state, the dropzone size would be identical in all size variants.

marissahuysentruyt · 2025-03-04T20:49:33Z

components/dropzone/stories/template.js

-			class=${classMap({
+	size = "m",
+	image = "dropzone-illustration.png",
+	...globals


Oh this isn't something I noticed during the last review. Are we starting to transition away from context and back to ...globals? Since the spectrum-two branch doesn't have the S1 or Express contexts?

I would say revert this back to using the context = {} stuff (as well as the ...globals in the IllustratedMessage() down further), but are we even storing context data anymore? I don't actually know 🙃

aramos-adobe added ready-for-review S2 Spectrum 2 labels Dec 4, 2024

aramos-adobe self-assigned this Dec 4, 2024

aramos-adobe requested a review from marissahuysentruyt December 5, 2024 01:49

aramos-adobe mentioned this pull request Jan 7, 2025

feat(illustratedmessage): adding new s2 tokens, horizontal layout, vrts #3246

Merged

13 tasks

aramos-adobe force-pushed the aramos-adobe/css781-illustrated-message-s2-tokens branch from b244774 to 230c342 Compare January 8, 2025 17:44

aramos-adobe force-pushed the aramos-adobe/css782-dropzone-s2-migration branch from 70c8b73 to b2b714d Compare January 9, 2025 15:20

aramos-adobe force-pushed the aramos-adobe/css781-illustrated-message-s2-tokens branch 2 times, most recently from 5a2a335 to 27ac354 Compare January 9, 2025 16:57

aramos-adobe force-pushed the aramos-adobe/css781-illustrated-message-s2-tokens branch 2 times, most recently from e7f55d8 to 654db3d Compare January 22, 2025 20:43

aramos-adobe force-pushed the aramos-adobe/css782-dropzone-s2-migration branch from ac120bd to 8894290 Compare January 28, 2025 18:43

aramos-adobe changed the title ~~Dropzone S2 migration~~ feat(dropzone): migrating new S2 tokens, more spaced out dashed lines, more illustrations Jan 29, 2025

aramos-adobe requested a review from jawinn January 29, 2025 21:02

aramos-adobe force-pushed the aramos-adobe/css781-illustrated-message-s2-tokens branch 3 times, most recently from 491b648 to c608159 Compare February 3, 2025 18:57

Base automatically changed from aramos-adobe/css781-illustrated-message-s2-tokens to spectrum-two February 3, 2025 19:24

rise-erpelding requested changes Feb 4, 2025

View reviewed changes

castastrophe force-pushed the spectrum-two branch 2 times, most recently from 56c6806 to 793571c Compare February 5, 2025 17:33

aramos-adobe force-pushed the aramos-adobe/css782-dropzone-s2-migration branch 2 times, most recently from 5841e1d to f070d25 Compare February 5, 2025 21:08

aramos-adobe requested a review from rise-erpelding February 5, 2025 21:09

pfulton force-pushed the spectrum-two branch from ff3adf1 to f5b76b3 Compare February 6, 2025 21:29

castastrophe force-pushed the spectrum-two branch 2 times, most recently from db2a5dd to f34473b Compare February 7, 2025 17:35

aramos-adobe added 10 commits February 27, 2025 08:36

chore(dropzone): adding metadata files

b44466a

feat(dropzone): adjusting template and css files

f41e9d0

chore(dropzone): adding icons

6e166a4

feat(dropzone): fixing svg box, border fallback, whcm fix

a4b1d91

chore(dropzone): removing icon dist files

d53ab62

feat(dropzone): updating changeset and modifiers

eae171b

feat(dropzone): removing illustration mod token using im color

e6bf325

chore(dropzone): restoring s2 files

028caf7

feat(dropzone): updating whcm mode

72f5f09

feat(dropzone): adding metadata

940d10c

aramos-adobe force-pushed the aramos-adobe/css782-dropzone-s2-migration branch from cf1337c to 940d10c Compare February 27, 2025 13:37

aramos-adobe added 3 commits February 27, 2025 08:46

feat(dropzone): adding filled story desc

c53cda6

Merge branch 'spectrum-two' into aramos-adobe/css782-dropzone-s2-migr…

1d7fbe8

…ation

Merge branch 'spectrum-two' into aramos-adobe/css782-dropzone-s2-migr…

6d529df

…ation

marissahuysentruyt requested changes Feb 28, 2025

View reviewed changes

feat(dropzone): update changeset, cleaning up template and css files

98614ae

aramos-adobe requested a review from marissahuysentruyt February 28, 2025 22:07

aramos-adobe added 2 commits March 3, 2025 10:27

chore(dropzone): restoring base s2 files

0b00dca

chore(dropzone): restoring global vars and changelog

65af83b

aramos-adobe commented Mar 3, 2025

View reviewed changes

Merge branch 'spectrum-two' into aramos-adobe/css782-dropzone-s2-migr…

f38d2c3

…ation

marissahuysentruyt approved these changes Mar 4, 2025

View reviewed changes

aramos-adobe added 5 commits March 5, 2025 15:03

chore(dropzone): update with new revisions

10933e7

chore(dropzone): fixing lint error

475da69

chore(dropzone): reverting files

393416f

chore(dropzone): fixing weird changes

740b0eb

chore(dropzone): fixing weird changes again

7f5e9c8

aramos-adobe merged commit 924fc7f into spectrum-two Mar 5, 2025
12 checks passed

aramos-adobe deleted the aramos-adobe/css782-dropzone-s2-migration branch March 5, 2025 21:04

github-actions bot mentioned this pull request Mar 5, 2025

chore: release (next) #3605

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

aramos-adobe commented Dec 4, 2024 •

edited

Loading

changeset-bot bot commented Dec 4, 2024 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

rise-erpelding left a comment

rise-erpelding Feb 4, 2025

aramos-adobe Feb 4, 2025 •

edited

Loading

marissahuysentruyt left a comment

marissahuysentruyt Feb 28, 2025

marissahuysentruyt Mar 4, 2025

marissahuysentruyt Feb 28, 2025

aramos-adobe left a comment

marissahuysentruyt left a comment

marissahuysentruyt Mar 4, 2025

marissahuysentruyt Mar 4, 2025

marissahuysentruyt Mar 4, 2025

marissahuysentruyt Mar 4, 2025

		--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255));
		--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67));

	* The filled state of a drop zone is used to indicate that a file has been dropped into the drop zone. Since the type size doesn't change in this state the dropzone size would be identical in all size variants.
	* The filled state of a drop zone is used to indicate that a file has been dropped into the drop zone. Since the type size doesn't change in this state, the dropzone size would be identical in all size variants.

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

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

Conversation

aramos-adobe commented Dec 4, 2024 • edited Loading

Dropzone S2 Migration

SVG Border

New mods

Removed mods

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Dec 4, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Feb 3, 2025 • edited Loading

github-actions bot commented Feb 3, 2025 • edited Loading

File metrics

Summary

dropzone

rise-erpelding left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aramos-adobe Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aramos-adobe left a comment

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aramos-adobe commented Dec 4, 2024 •

edited

Loading

changeset-bot bot commented Dec 4, 2024 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading

aramos-adobe Feb 4, 2025 •

edited

Loading