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

aramos-adobe · 2024-10-14T18:52:36Z

Description

Adding new S2 tokens for illustratedmessage. The dropzone is simply being tested in this PR to see which shared mods can go away in the illustrated message. I also modified a few template capabilities to prepare the dropzone usage (custom illustration, description, heading, action button in drag mode).

I kept the ability to add more than simple text in the description. You can see the example in the test file where it maintains the ability to add Link component if you want.

#3429 Dropzone will be sharing these tokens and capabilities. It is a feature off of this branch.

Illustrated Message

New tokens
--spectrum-illustrated-message-heading-to-description
--spectrum-illustrated-message-illustration-to-heading
--spectrum-illustrated-message-illustration-to-content
--spectrum-illustration-message-description-to-action
--spectrum-illustrated-message-illustration-color
--spectrum-illustrated-message-illustration-size
--spectrum-illustrated-message-small-cjk-title-font-size
--spectrum-illustrated-message-large-cjk-title-font-size
--spectrum-illustrated-message-large-body-font-size
--spectrum-illustrated-message-horizontal-maximum-width

New mods
--mod-illustrated-message-description-to-action
--mod-illustrated-message-heading-to-description
--mod-illustrated-message-illustration-to-content
--mod-illustrated-message-horizontal-maximum-width

Removed tokens
--spectrum-illustrated-message-title-to-heading
--spectrum-illustrated-message-description-max-inline-size
--spectrum-illustrated-message-heading-max-inline-size
--spectrum-illustrated-message-illustration-accent-color
--mod-illustrated-message-illustration-accent-color
--highcontrast-illustrated-message-illustration-accent-color

Dropzone

Renamed mods
--mod-illustrated-message-title-to-heading > --mod-illustrated-message-illustration-to-heading
--mod-illustrated-message-heading-to-body > --mod-illustrated-message-heading-to-description
--mod-illustrated-message-content-maximum-width > --mod-illustrated-message-vertical-maximum-width

Validation steps

Added title and body tokens
Added CJK tokens
Horizontal layout
Toggle button group

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-10-14T18:52:39Z

🦋 Changeset detected

Latest commit: bc881d9

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

This PR includes changesets to release 86 packages

Name	Type
@spectrum-css/stepper	Major
@spectrum-css/illustratedmessage	Major
@spectrum-css/dropzone	Major
@spectrum-css/picker	Major
@spectrum-css/tokens	Major
@spectrum-css/actionbutton	Major
@spectrum-css/opacitycheckerboard	Major
@spectrum-css/coachindicator	Major
@spectrum-css/contextualhelp	Major
@spectrum-css/progresscircle	Major
@spectrum-css/dropindicator	Major
@spectrum-css/infieldbutton	Major
@spectrum-css/pickerbutton	Major
@spectrum-css/actiongroup	Major
@spectrum-css/alertbanner	Major
@spectrum-css/alertdialog	Major
@spectrum-css/buttongroup	Major
@spectrum-css/clearbutton	Major
@spectrum-css/closebutton	Major
@spectrum-css/colorhandle	Major
@spectrum-css/colorslider	Major
@spectrum-css/inlinealert	Major
@spectrum-css/logicbutton	Major
@spectrum-css/progressbar	Major
@spectrum-css/statuslight	Major
@spectrum-css/swatchgroup	Major
@spectrum-css/actionmenu	Major
@spectrum-css/breadcrumb	Major
@spectrum-css/colorloupe	Major
@spectrum-css/colorwheel	Major
@spectrum-css/datepicker	Major
@spectrum-css/fieldgroup	Major
@spectrum-css/fieldlabel	Major
@spectrum-css/pagination	Major
@spectrum-css/typography	Major
@spectrum-css/accordion	Major
@spectrum-css/actionbar	Major
@spectrum-css/assetcard	Major
@spectrum-css/assetlist	Major
@spectrum-css/coachmark	Major
@spectrum-css/colorarea	Major
@spectrum-css/splitview	Major
@spectrum-css/textfield	Major
@spectrum-css/thumbnail	Major
@spectrum-css/calendar	Major
@spectrum-css/checkbox	Major
@spectrum-css/combobox	Major
@spectrum-css/helptext	Major
@spectrum-css/steplist	Major
@spectrum-css/taggroup	Major
@spectrum-css/treeview	Major
@spectrum-css/underlay	Major
@spectrum-css/commons	Major
@spectrum-css/divider	Major
@spectrum-css/popover	Major
@spectrum-css/sidenav	Major
@spectrum-css/tooltip	Major
@spectrum-css/avatar	Major
@spectrum-css/button	Major
@spectrum-css/dialog	Major
@spectrum-css/miller	Major
@spectrum-css/rating	Major
@spectrum-css/search	Major
@spectrum-css/slider	Major
@spectrum-css/swatch	Major
@spectrum-css/switch	Major
@spectrum-css/asset	Major
@spectrum-css/badge	Major
@spectrum-css/modal	Major
@spectrum-css/radio	Major
@spectrum-css/table	Major
@spectrum-css/toast	Major
@spectrum-css/card	Major
@spectrum-css/dial	Major
@spectrum-css/icon	Major
@spectrum-css/link	Major
@spectrum-css/menu	Major
@spectrum-css/tabs	Major
@spectrum-css/tray	Major
@spectrum-css/well	Major
@spectrum-css/tag	Major
@spectrum-css/floatingactionbutton	Major
@spectrum-css/preview	Major
@spectrum-css/meter	Major
@spectrum-css/form	Major
@spectrum-css/generator	Minor

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 · 2024-10-14T18:55:37Z

File metrics

Summary

Total size: 1.74 MB^*
Total change (Δ): 🔴 ⬆ 2.00 KB (0.11%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
dropzone	10.02 KB	🔴 ⬆ 0.33 KB
illustratedmessage	7.67 KB	🔴 ⬆ 1.68 KB

Details

dropzone

Filename	Head	Compared to base
index.css	10.02 KB	🔴 ⬆ 0.33 KB (3.27%)

illustratedmessage

Filename	Head	Compared to base
index.css	7.67 KB	🔴 ⬆ 1.68 KB (28.14%)

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2024-10-14T18:55:46Z

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

rise-erpelding

You've got sizing and variants in here now, which is really exciting! Leaving some feedback to improve the custom property definitions and use of tokens!

components/illustratedmessage/index.css

yarn.lock

rise-erpelding

This is looking great! There are some typography tokens that need to be updated to match the spec, and the illustration color token also needs updating, but otherwise colors and layouts are looking good!

A couple of other thoughts I had:

Could we drop the update tokens commit and use the yarn.lock from spectrum-two? That might be safer than the updates on this branch.
We'll need to update documentation (like the Docs page in Storybook) for Illustrated message since we're introducing a new variant and t-shirt sizing), I think it'd be ok to do this later once we get these changes in main since we've had a lot of documentation changes between these two branches, but maybe we could ensure that we write a Jira card so we don't lose track of the fact that the work needs to be done? What do you think?

components/illustratedmessage/stories/template.js

components/illustratedmessage/index.css

aramos-adobe · 2024-10-31T17:19:45Z

This is looking great! There are some typography tokens that need to be updated to match the spec, and the illustration color token also needs updating, but otherwise colors and layouts are looking good!

A couple of other thoughts I had:

Could we drop the update tokens commit and use the yarn.lock from spectrum-two? That might be safer than the updates on this branch.

We'll need to update documentation (like the Docs page in Storybook) for Illustrated message since we're introducing a new variant and t-shirt sizing), I think it'd be ok to do this later once we get these changes in main since we've had a lot of documentation changes between these two branches, but maybe we could ensure that we write a Jira card so we don't lose track of the fact that the work needs to be done? What do you think?

I thought I merged the updates from spectrum-two

rise-erpelding · 2024-10-31T19:00:11Z

This is looking great! There are some typography tokens that need to be updated to match the spec, and the illustration color token also needs updating, but otherwise colors and layouts are looking good!
A couple of other thoughts I had:

Could we drop the update tokens commit and use the yarn.lock from spectrum-two? That might be safer than the updates on this branch.

We'll need to update documentation (like the Docs page in Storybook) for Illustrated message since we're introducing a new variant and t-shirt sizing), I think it'd be ok to do this later once we get these changes in main since we've had a lot of documentation changes between these two branches, but maybe we could ensure that we write a Jira card so we don't lose track of the fact that the work needs to be done? What do you think?

I thought I merged the updates from spectrum-two

You did! There were just deviations in the yarn.lock and we probably don't need to increment the tokens/package.json here either. I'm not sure if a git revert on that commit would also do the trick, but the goal would be to avoid committing a new yarn.lock when we merge this branch since we're not making any package changes (anymore).

rise-erpelding

I think most of the tokens are good now! I left some comments about some things that still need to be cleaned up, let me know if you want to pair through any of these!

components/illustratedmessage/index.css

.changeset/chatty-cycles-whisper.md

components/illustratedmessage/index.css

rise-erpelding · 2024-11-01T19:51:21Z

components/illustratedmessage/index.css

+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--spectrum-illustrated-message-cjk-title-font-size: var(--spectrum-illustrated-message-medium-cjk-title-font-size);


Now I see what you're trying to do here and I think this is a good strategy, I was originally thinking we should have something like:

&:lang(ja), &:lang(zh), &:lang(ko) { --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-medium-cjk-title-font-size); }

and then also

.spectrum-IllustratedMessage--sizeS { &:lang(ja), &:lang(zh), &:lang(ko) { --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-small-cjk-title-font-size); } } .spectrum-IllustratedMessage--sizeL { &:lang(ja), &:lang(zh), &:lang(ko) { --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-large-cjk-title-font-size); } }

That gets kind of ugly and repetitive since it needs to change for every t-shirt size though, so let's not do that!

Instead let's take what you already have, I think this has the potential to be cleaner, it's just that --spectrum-illustrated-message-cjk-title-font-size isn't being used right now. What if we add a custom property definition to the title section like this:

--spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-medium-title-font-size); --spectrum-illustrated-message-title-line-height: var(--spectrum-title-line-height); --spectrum-illustrated-message-title-color: var(--spectrum-heading-color); /* These first 3 are already in the code, I'm just adding them so you have an idea of where in the code this would be */ --spectrum-illustrated-message-cjk-title-font-size: var(--spectrum-illustrated-message-medium-cjk-title-font-size);

and then change what you have here to

&:lang(ja), &:lang(zh), &:lang(ko) { --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-font-size); }

These cjk font sizes are not coming through and this custom property is showing up as unused in my editor:

You'll need to set --spectrum-illustrated-message-title-font-size to --spectrum-illustrated-message-cjk-title-font-size somewhere within the cjk lang selector. This --spectrum-illustrated-message-cjk-title-font-size: var(--spectrum-illustrated-message-medium-cjk-title-font-size); that you have currently can be moved up to around L33 where we have the other title custom properties set. Although I think it would also work if it stayed here within the cjk lang selector.

components/illustratedmessage/index.css

aramos-adobe · 2024-11-03T18:01:03Z

Adobe Clean doesn't render correctly for the component anymore 😅

rise-erpelding · 2024-11-04T14:56:28Z

Adobe Clean doesn't render correctly for the component anymore 😅

Do you have a screen shot of what this looks like for you? I did notice some weirdness with tokens disappearing - like for instance the space between the description and button group would suddenly stop being defined, but I couldn't figure out what was triggering it and so far it's been rendering fine for me.

rise-erpelding

This is coming along! I left some more specific comments, but another more general concern I have is what regressions this might be causing to Drop Zone. Since VRTs aren't working great for spectrum-two, I visually compared with another branch on spectrum-two and see some differences that need looking into, primarily with the image size and typography, we'll probably want to look into why these are happening and if there's anything we can do to prevent them:

components/dropzone/index.css

components/illustratedmessage/metadata/mods.md

.changeset/beige-dragons-tickle.md

components/illustratedmessage/metadata/mods.md

.changeset/beige-dragons-tickle.md

components/illustratedmessage/index.css

aramos-adobe · 2024-11-04T16:30:26Z

Adobe Clean doesn't render correctly for the component anymore 😅

Do you have a screen shot of what this looks like for you? I did notice some weirdness with tokens disappearing - like for instance the space between the description and button group would suddenly stop being defined, but I couldn't figure out what was triggering it and so far it's been rendering fine for me.

Here's the screenshot of how the font renders for illustrated message. Not sure what happened to the tokens but I'm doing some investigation.

rise-erpelding

Hi! This is starting to look really good and I think after another round of (smaller) changes, you could see if someone else wants to review it and also see if we can get illustrated message design reviewed.

A lot of the callouts I have now are more general and maybe up for discussion, so I'm not requesting changes this time around:

Storybook controls: Comparing this branch with main, it looks like the accent color story disappears in main and uses the controls to flip the accent color on and off. It'd be great if we can make it like that in this branch, too, if possible! There's also a heading control that appears to control the heading text on main, so that might be another change to adopt here.
The illustrated message image: The Figma specs call for a square svg, and we're currently using a rectangular image. I would want to confirm with design that this always-square image might be something new for S2, since the way we have the CSS right now, the width and height use the same custom properties. If images are always meant to be square and never rectangular, we might want to update the image.
Font size for cjk: This still needs some kind of fix to make sure the title cjk font size is being applied, but is probably worth asking design about what cjk tokens should be used other than the title font-size.
Drop zone: There's still some wonkiness here! But I'm realizing now that I think this might be coming from token changes on spectrum-two and maybe it would be better to leave it alone until it's ready for migration 🥴

I also did occasionally have the problem I was noticing before with tokens, I'm attaching some screenshots at the bottom but basically what I'm seeing is that all of the typography styles are suddenly overriding the component-level styles, I don't think this is something that you did but might be worth investigating as a separate bug:

.changeset/beige-dragons-tickle.md

Will re-review when I'm back from PTO

rise-erpelding

I think the CJK tokens are the only ones I'm seeing that aren't coming through properly, and while I called it out last time, I'm actually seeing why that's happening now.

I'm also really bothered by the typography bug I'm seeing but would love to see another reviewer's opinion/know if they're seeing the same thing.

Last thing: since we have no package.json changes in this PR, can we remove the changes that appear from yarn.lock in the PR? (Totally fine if individual commits show changes, as long as the changes from all commits don't have yarn.lock listed.)

rise-erpelding · 2024-11-12T20:52:44Z

components/illustratedmessage/index.css

+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--spectrum-illustrated-message-cjk-title-font-size: var(--spectrum-illustrated-message-medium-cjk-title-font-size);


These cjk font sizes are not coming through and this custom property is showing up as unused in my editor:

You'll need to set --spectrum-illustrated-message-title-font-size to --spectrum-illustrated-message-cjk-title-font-size somewhere within the cjk lang selector. This --spectrum-illustrated-message-cjk-title-font-size: var(--spectrum-illustrated-message-medium-cjk-title-font-size); that you have currently can be moved up to around L33 where we have the other title custom properties set. Although I think it would also work if it stayed here within the cjk lang selector.

rise-erpelding · 2024-11-12T21:56:43Z

components/illustratedmessage/stories/template.js

+				heading,
+				() =>
+					html`<h2
+						class="spectrum-Heading spectrum-Heading--regular ${rootClass}-heading"


I'd really love to hear others' opinions on this, but given that the title and body are setting font-weight, font-style, font-family, and font-size, I'm not seeing any rationale for keeping .spectrum-Heading and .spectrum-Body classes in the template. I'm still seeing that issue I mentioned last time where the typography classes are inconsistently prioritized over the component-specific classes and I don't know why that's happening (maybe it has something to do with removing the t-shirt sized typography classes?), but removing the typography classes here would likely fix it.

@rise-erpelding,

Oh wow --spectrum-illustrated-message-cjk-title-font-size didn't appear as an unused property until I reset my VSCode 😅 It was rendering normally for me on my end. I ended up adding the language selectors within each t-shirt size. For some reason moving that line of code more up top still comes up as unused property. Switching the languages look normal now.

For the .spectrum-Heading and .spectrum-Body the only reason why I kept it there was because main branch had it. Removing it now doesn't break anything so it's good now.

jawinn

Nice work on this.

I noticed a couple things that I don't think have been pointed out yet.
Should this space only be there when there is a button group present?

components/illustratedmessage/index.css

components/illustratedmessage/stories/illustratedmessage.stories.js

marissahuysentruyt

Holy smokes this was a big one! You covered a lot of stuff and this seems like it's getting in better and better shape- well done! I left you some questions and comments, and then I had a couple more questions that I didn't really know where to put in the files. Hopefully I don't repeat too much of what Rise & Josh have already mentioned.

Do we need an updated illustration at all? The designs are using that cloud, which seems very S2 ☁️😄 We should be able to export it directly from Figma (I can try to help with that if you want/need)

Do we want or need to allow users to test out the description text with a description text control? I see it's disabled now, but I don't have the context as to why.

marissahuysentruyt · 2024-11-14T17:39:44Z

components/illustratedmessage/stories/illustratedmessage.stories.js

 /**
 * An accent color class can be used on elements of the illustration SVG.
 */
 export const AccentColor = Template.bind({});
+AccentColor.tags = ["!dev"];
 AccentColor.args = {


I was going to ask about the sizing stories, but it looks like you and Rise already talked about those stories being added later. Do you want to make a card for the follow up work so we keep those additions on our radar once we merge? If you already created it, my apologies- I must have missed it in my very quick search! We could add the Figma design guidance around each of the sizes too!

Oh! I was also going to ask about the accent color story, but I see Rise's covered it! Just to clarify for me, design was ok with us keeping this story then in our documentation and examples for this component? I know you mentioned the accent color is used for the illustration and hover state in Drop zone, but should we continue showing that accent color variant here for illustrated message?

components/illustratedmessage/stories/template.js

marissahuysentruyt · 2024-11-14T20:08:15Z

components/illustratedmessage/index.css

+	--spectrum-illustrated-message-illustration-size: 96px;
+
+	/* Title */
+	--spectrum-illustrated-message-title-font-family: var(--spectrum-title-sans-serif-font-family);


I had to check with Rise & Josh on this one, but I would suggest we keep the original token here, and continue to use spectrum-sans-font-family-stack instead of spectrum-title-sans-serif-font-family.

Currently, this is what is in the tokens/dist

--spectrum-title-sans-serif-font-family:var(--spectrum-sans-serif-font-family); ... --spectrum-sans-serif-font-family:Adobe Clean;

The title-sans-serif-font-family token (although called for in the design) isn't pointing to the web font stack, so we probably shouldn't be using that title-sans-serif token as it is currently. The correct web font stack is actually defined in that original sans-font-family-stack:

--spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;

Josh mentioned that the font loaded by Typekit is the "adobe-clean", and which is only defined in our stack (not the "Adobe Clean"). I'll have to do the same thing for dialog, now that we've dug into it more.

marissahuysentruyt · 2024-11-14T20:12:10Z

components/illustratedmessage/index.css

+	--spectrum-illustrated-message-title-color: var(--spectrum-heading-color);
+
+	/* Description */
+	--spectrum-illustrated-message-description-font-family: var(--spectrum-body-sans-serif-font-family);


We might revert this change too. I think it's in a similar situation to that title token I mentioned, with "Adobe Clean" vs. "adobe-clean".

spectrum-css/tokens/dist/index.css

Line 1664 in 0c93977

--spectrum-body-sans-serif-font-family:var(--spectrum-sans-serif-font-family);

marissahuysentruyt · 2024-11-14T20:27:16Z

.changeset/beige-dragons-tickle.md

+`--mod-illustrated-message-illustration-accent-color`
+`--highcontrast-illustrated-message-illustration-accent-color`
+
+## Dropzone & Illustrated message


This might just be me, but I wonder if we could come up with a clearer heading for this section. Maybe something like, "Dropzone nested mods?" Because those mods were added to the nested illustrated message within dropzone, right?

I don't know...take it or leave it.

marissahuysentruyt · 2024-11-14T20:30:44Z

components/dropzone/metadata/mods.md

@@ -9,6 +9,7 @@
 | `--mod-drop-zone-body-font-style`                 |
 | `--mod-drop-zone-body-font-weight`                |
 | `--mod-drop-zone-body-line-height`                |
+| `--mod-drop-zone-body-to-action`                  |


These could be added to the changeset message as "new mods" for drop zone!

--mod-drop-zone-body-to-action
--mod-drop-zone-illustration-to-title

components/illustratedmessage/index.css

components/illustratedmessage/metadata/mods.md

components/illustratedmessage/stories/template.js

marissahuysentruyt

Some more suggestions and questions for you!

As I was reviewing the drop zone changes, I wondered- should those be a separate PR and a separate branch again? What is the minimum amount of changes that could be make in this illustrated message PR to make sure drop zone isn't "broken?" If we need all of the changes in this branch, that's totally fine! I was just ending up with quite a few drop zone comments, so that's what triggered that thought. I left some anyways 😬

marissahuysentruyt · 2024-11-26T19:21:49Z

components/illustratedmessage/stories/illustratedmessage.stories.js

@@ -1,6 +1,4 @@
-import { html } from "lit";



We can delete these couple empty lines.

marissahuysentruyt · 2024-11-26T19:25:37Z

components/illustratedmessage/stories/template.js

+				: ""}" fill-rule="evenodd" clip-rule="evenodd" d="M56.2825 50.793C61.8957 37.7312 74.5092 28.5 89.3299 28.5C108.539 28.5 124.014 43.962 125.409 63.2651C140.627 65.9995 152 79.7949 152 96.1349C152 114.396 137.783 129.5 119.883 129.5C119.853 129.5 119.825 129.5 119.8 129.499C119.775 129.5 119.751 129.5 119.726 129.5H31.8807C31.7163 129.5 31.5543 129.49 31.3951 129.471C18.254 129.016 8 117.815 8 104.385C8 94.2115 13.8616 85.3693 22.4022 81.4428C22.3022 80.4808 22.2483 79.4993 22.2483 78.4996C22.2483 62.9094 34.3921 49.9713 49.734 49.9713C51.9924 49.9713 54.1854 50.2579 56.2825 50.793ZM32.2594 121.5H119.543C119.611 121.497 119.679 121.496 119.747 121.496C119.774 121.496 119.799 121.496 119.821 121.497C119.848 121.497 119.87 121.498 119.889 121.498C119.904 121.499 119.919 121.499 119.931 121.5C133.067 121.473 144 110.292 144 96.1349C144 82.4618 133.788 71.5539 121.259 70.8142C119.114 70.6875 117.453 68.8895 117.495 66.7416C117.5 66.5158 117.504 66.4133 117.507 66.3391C117.51 66.2659 117.512 66.2201 117.512 66.1104C117.512 49.5915 104.732 36.5 89.3299 36.5C76.895 36.5 66.2004 45.0052 62.5117 57.0028C62.1777 58.0892 61.3973 58.9822 60.3655 59.4587C59.3337 59.9353 58.1478 59.9504 57.1042 59.5002C54.8242 58.5168 52.3404 57.9713 49.734 57.9713C39.1343 57.9713 30.2483 66.9966 30.2483 78.4996C30.2483 80.0856 30.4387 81.6435 30.7778 83.175C31.235 85.2398 30.0059 87.3038 27.9726 87.8855C21.1678 89.8321 16 96.3955 16 104.385C16 113.898 23.2726 121.333 31.9497 121.483C32.054 121.485 32.1573 121.49 32.2594 121.5ZM119.959 121.501L119.957 121.501C119.967 121.501 119.973 121.502 119.959 121.501Z" />
+    </svg>
+  `;
+};


Suggested change

};

};

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

})}

`;

components/illustratedmessage/stories/template.js

marissahuysentruyt · 2024-11-26T19:26:49Z

components/illustratedmessage/stories/illustratedmessage.stories.js

+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["s", "m", "l"],
+			control: "select",
+		},


I noticed that we don't have the sizes represented on the docs page. We ALSO don't have sizes on main since there weren't sizes for S1, so could we add them in this branch? This is one way we used to do the sizing stuff: #3246 (comment) and the template: #3246 (comment)

marissahuysentruyt · 2024-11-26T19:27:41Z

components/illustratedmessage/stories/illustratedmessage.stories.js


-import { Template as Link } from "@spectrum-css/link/stories/template.js";

 import { Template } from "./template";


If you end up using that SizingTemplate, we'll need it added to the imports.

marissahuysentruyt · 2024-11-26T20:26:41Z

components/dropzone/stories/template.js

+const customSvg = () => html`
+  <svg class="spectrum-IllustratedMessage-illustration" xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" fill="none">


Does this SVG seem big/long? I don't really know how we handle SVGs in this project, like if we need to "optimize" it or anything. And if it already is, disregard this comment!

marissahuysentruyt · 2024-11-26T20:35:54Z

components/dropzone/index.css

+
+	&.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__");


Should we be linking to the asset in the repo? Could any of the dropzone CSS be left off of this PR, to save for the dropzone migration?

My thought is that if you're doing the dropzone migration (which it looks like you are), let's separate as much as we can. I think I have some separate dropzone ideas that would be better suited in a separate PR.

This definitely should link to an actual file and not the Figma; the link has expired and it is now "access denied". It looks like this URL may have been for the "placeholder-image" in the background of drop zone? If so, we shouldn't be providing any image in the CSS for the component as it looks like that is supposed to represent whatever image was currently selected. It's something we could show as an example in custom styles via the template, linking to a local asset, as part of the drop zone migration.

marissahuysentruyt · 2024-11-26T20:36:43Z

components/dropzone/assets/dropzone-bg.png

I wonder if this should go in the assets folder, instead of making a new dropzone/assets folder. What do you think? I couldn't think of another component that has its own assets directory, but I could be mistaken.

marissahuysentruyt · 2024-11-26T20:40:55Z

.changeset/beige-dragons-tickle.md

@@ -0,0 +1,49 @@
+---
+"@spectrum-css/illustratedmessage": major
+"@spectrum-css/dropzone": patch


I think the changes to dropzone are more than a patch. That might also be a good reason to split out what is more dropzone migration work, than just dropzone fixes because of the illustrated message changes.

marissahuysentruyt · 2024-11-26T20:56:20Z

components/illustratedmessage/index.css

+.spectrum-IllustratedMessage--actions {
+	margin-block-start: var(--mod-illustrated-message-description-to-action, var(--spectrum-illustrated-message-description-to-action));
+}

-  max-inline-size: var(--mod-illustrated-message-description-max-inline-size, var(--spectrum-illustrated-message-description-max-inline-size));
-  margin-block-start: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description));
-  margin-block-end: 0;
+.spectrum-IllustratedMessage--content {


I'm not sure we need the double hyphens here. I see similar class names like spectrum-AlertBanner-content, or spectrum-Card-content and spectrum-Card-actions. I think one hyphen will do. To me, the double hyphens is specifically used for a modifier class, like spectrum-IllustratedMessage--horizontal. Again, this is just my understanding, but the elements/blocks of the component just warrant a single hyphen (like spectrum-IllustratedMessage-description).

Yes to Marissa's previous (outdated) comment here! The double hyphens have been removed, but I believe we'll still need them for variant/modifier classes for the horizontal variant, the rest of these are great staying single hyphen.

rise-erpelding

I focused on the illustrated message CSS this time around, and I have a few suggestions regarding the CSS organization and styles used! Tokens/token updates and styles are looking good though!

rise-erpelding · 2024-12-05T18:52:23Z

components/illustratedmessage/index.css

-  position: var(--mod-illustrated-message-description-position);
-  z-index: var(--mod-illustrated-message-description-z-index);
-  pointer-events: var(--mod-illustrated-message-description-pointer-events, auto);
+.spectrum-IllustratedMessage-horizontal {


Horizontal would be considered a variant, right? I'm wondering if we need to change the class name here to reflect that (.spectrum-IllustratedMessage--horizontal), similar to Divider's vertical variant?

rise-erpelding · 2024-12-05T20:50:24Z

components/illustratedmessage/index.css

+	flex-direction: row;
+	text-align: start;
+	gap: var(--mod-illustrated-message-illustration-to-content, var(--spectrum-illustrated-message-illustration-to-content));
+	display: grid;


Toggling display: grid; on and off in the inspector, I didn't see much difference. Is there something I'm missing regarding why this is being used?

If using flex-direction: row is sufficient here, we could take out display: grid and other grid-related references, like grid-template-areas, and the grid-areas in L143 and L92.

But if there's a clear reason to use grid for the horizontal variant, we can eliminate flex-direction: row; in L127. I'm going to leave a follow-up comment below also, the grid-areas should ideally be scoped to that horizonal class selector.

I was experimenting with display: grid for something I cannot remember. After removing it, I don't see any breaking changes.

@rise-erpelding I remember now - @marissahuysentruyt revealed the illustrations on the large size is out of bonds of block size. Using display: grid keeps the illustration block dimensions true on every shirt size.

rise-erpelding · 2024-12-05T20:53:55Z

components/illustratedmessage/index.css

+.spectrum-IllustratedMessage-actions {
+	margin-block-start: var(--mod-illustrated-message-description-to-action, var(--spectrum-illustrated-message-description-to-action));
+}


Maybe this block could move up closer to .spectrum-IllustratedMessage-description and the other child elements rather than being separated by the .spectrum-IllustratedMessage-horizontal variant?

components/illustratedmessage/index.css

rise-erpelding · 2024-12-05T21:05:13Z

components/illustratedmessage/index.css

+.spectrum-IllustratedMessage--actions {
+	margin-block-start: var(--mod-illustrated-message-description-to-action, var(--spectrum-illustrated-message-description-to-action));
+}

-  max-inline-size: var(--mod-illustrated-message-description-max-inline-size, var(--spectrum-illustrated-message-description-max-inline-size));
-  margin-block-start: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description));
-  margin-block-end: 0;
+.spectrum-IllustratedMessage--content {


Yes to Marissa's previous (outdated) comment here! The double hyphens have been removed, but I believe we'll still need them for variant/modifier classes for the horizontal variant, the rest of these are great staying single hyphen.

rise-erpelding

This is looking good! I think the only issue I'm still seeing is with the Storybook in DropZone, while we definitely don't need to address everything here, it would be good to ensure that it works on a basic level here!

Also not necessary to add, but thinking this might be nice to have: it looks like we can use illustrated message with or without the button group, it might be nice to show a variant of this without the button group.

rise-erpelding · 2024-12-18T15:28:23Z

components/dropzone/stories/dropzone.stories.js

+		customHeading: "Drag and drop your file",
+		customDescription: "Or, select a file from your computer.",
+		customLabel: "Browse files",
+		hasButton: true


I'm still seeing this and I think what Marissa has suggested here is a good approach! We probably don't need all of the argTypes from illustrated message now that we've added a whole bunch, we could probably pick the ones we want and do something like:

customDescription: IllustratedMessage.argTypes.description, customHeading: IllustratedMessage.argTypes.heading, customLabel: ActionButton.argTypes.label,

(You can either stick with the customDescription and customHeading arg names or change them to match Illustrated Message as Marissa mentioned.)

I'm unclear on hasButton, though. It doesn't seem to do anything when I toggle it and isn't referenced in the dropzone template at all. Maybe we can leave it out for now and revisit showing/hiding button controls in the Dropzone migration PR?

components/dropzone/index.css

jawinn · 2024-12-20T18:24:06Z

components/dropzone/index.css

+
+	&.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__");


This definitely should link to an actual file and not the Figma; the link has expired and it is now "access denied". It looks like this URL may have been for the "placeholder-image" in the background of drop zone? If so, we shouldn't be providing any image in the CSS for the component as it looks like that is supposed to represent whatever image was currently selected. It's something we could show as an example in custom styles via the template, linking to a local asset, as part of the drop zone migration.

…age-s2-tokens

rise-erpelding

This is looking great! I think these comments are all pretty minor. The CSS is looking pretty solid and I only had a couple of tiny comments for those files!

components/dropzone/index.css

components/illustratedmessage/index.css

components/tooltip/stories/tooltip.stories.js

rise-erpelding · 2025-01-10T17:05:31Z

components/illustratedmessage/stories/illustratedmessage.test.js

 	}
 	],
+	withSizes: false


Is there a reason that the SizingTemplate is used instead of withSizes?

As a side note, it'd also might be nice to show the horizontal variant in all sizes, but I can also see the argument for not doing that.

rise-erpelding · 2025-01-10T17:30:28Z

components/illustratedmessage/stories/illustratedmessage.stories.js

+		},
+		isHorizontal: {
+			name: "Horizontal orientation",
+			description: "The default content orientation is vertical. Add the horizontal class to align the illustration to the left.",


Technically, the horizontal orientation flips so the illustration is on the right for RTL, but also saying "Add the horizontal class to align the illustration to the inline-start size" is kind of a mouthful, I'm fine to leave it unless someone else has an opinion or idea on how to word this.

@rise-erpelding Maybe something like, "Add the horizontal class to horizontally align the illustration with the content. The illustration will align left or right determined by the global direction of the text."

rise-erpelding · 2025-01-10T17:33:03Z

components/illustratedmessage/stories/illustratedmessage.test.js

+		isHorizontal: true
+	},
+	{
+		testHeading: "With link",


Hmmm, do we still have a "With link" variant? Is there a rationale for keeping it/showing it?

In the documentation here, it shows links as one of the call to actions to prompt the user to do something.

I don't see it in the Figma specs for illustrated message or dropzone, and with button group being added, I wonder if that's meant to replace link. I also suspect the documentation is a bit behind.

We're not showing this link variant anywhere but in the test, it doesn't necessarily hurt to continue to test it, and we'll eventually need design to review S2 components anyway (it'd be nice if they reviewed our tests and checked to see if there were any variants that we can remove from there). How do you feel about leaving it for now and it can be an item to follow up on later.

rise-erpelding · 2025-01-10T17:33:58Z

components/illustratedmessage/stories/illustratedmessage.test.js

Overall this test file looks great! Thanks for adding in all the new S2 things!

rise-erpelding · 2025-01-10T17:38:00Z

components/illustratedmessage/stories/illustratedmessage.stories.js

 import metadata from "../metadata/metadata.json";
 import packageJson from "../package.json";
 import { IllustratedMessageGroup } from "./illustratedmessage.test.js";
-import { Template } from "./template.js";
+import { SizingTemplate, Template } from "./template.js";

 /**
 * The Illustrated Message displays an illustration along with a heading and description. Optionally, part of the illustration can use an accent color. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files.


Could you update this description? For instance, accent color is no longer relevant, so we can remove that. I'm also noticing that we're not really talking about the button group either, it might be worth mentioning that it's part of the component.

rise-erpelding · 2025-01-10T17:38:42Z

components/illustratedmessage/stories/illustratedmessage.stories.js

+/**
+ * Illustrated message comes in three sizes: small, medium, and large.
+ * - Small illustrated message is typically used in quick or in-line actions.
+ * - The medium size is the default, and often used in panels.
+ * - The large size illustrated message is generally used in full page layouts and dialogs.
+ */


Oh this is a great addition!

rise-erpelding · 2025-01-10T17:41:31Z

components/illustratedmessage/stories/illustratedmessage.stories.js

+ * - The medium size is the default, and often used in panels.
+ * - The large size illustrated message is generally used in full page layouts and dialogs.
+ */
+export const Sizing = SizingTemplate.bind({});


Is it possible to use the Sizes() function in the decorators for this? I think it might be available in this branch now.

Dismissing my change requests! Josh & Rise have it covered and I don't want to hold this up any longer than necessary.

jawinn

I think we're looking pretty good on this. Once you address the remaining comments from Rise, please re-request review here and I'll take a last look and we should be able to get this approved and merged 🚀

.changeset/beige-dragons-tickle.md

…tom properties (#3487) * fix(pickerbutton): add missing custom properties * fix(radio): add missing custom props * fix(calendar): add missing custom properties * fix(stepper): define unused custom props * fix(progressbar): remove unused custom properties; change background-color to background see #2929; fix static color * fix(dial): remove unused custom properties; add undefined custom properties

…age-s2-tokens

rise-erpelding

I noted this elsewhere but in case it gets lost:

there's a selector in drop zone for .spectrum-DropZone-actions that I hadn't noticed before, since we're not updating the actions for drop zone in this PR, maybe it could be removed for now?

Otherwise, I had a small comment on the copyright and a follow up to the question I had about the link variant, but those are all very small things and I think this is really close!

rise-erpelding · 2025-01-16T18:00:04Z

components/illustratedmessage/stories/illustratedmessage.test.js

+		isHorizontal: true
+	},
+	{
+		testHeading: "With link",


I don't see it in the Figma specs for illustrated message or dropzone, and with button group being added, I wonder if that's meant to replace link. I also suspect the documentation is a bit behind.

We're not showing this link variant anywhere but in the test, it doesn't necessarily hurt to continue to test it, and we'll eventually need design to review S2 components anyway (it'd be nice if they reviewed our tests and checked to see if there were any variants that we can remove from there). How do you feel about leaving it for now and it can be an item to follow up on later.

rise-erpelding · 2025-01-16T19:03:25Z

components/dropzone/index.css

+.spectrum-DropZone-actions {
+	margin-block-start: var(--spectrum-drop-zone-body-to-action);
+}
+


Does this .spectrum-DropZone-actions need to be removed as well? It does not appear to be relevant for this PR.

rise-erpelding · 2025-01-16T19:14:32Z

components/illustratedmessage/index.css

+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0

-@media (forced-colors: active) {
-	.spectrum-IllustratedMessage {
-		--highcontrast-illustrated-message-illustration-color: CanvasText;
-		--highcontrast-illustrated-message-illustration-accent-color: Highlight;
-	}
-}
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.


Very minor, but the previous version of this copyright is probably the one we wanted, it probably got rebased weirdly with all the branch changes that happened while this PR was in review!

I assume at some point this copyright might get updated for all the components at once, so I'm really not too concerned with what year is on the comment. It's probably better to have 2024 than 2023 in case someone's doing a search and replace for 2024 and this component never gets changed because no one thought to search for 2023, but I'm pretty indifferent about whether or not the year gets changed to 2025.

My previous requests for changes have been resolved. Removing this so it's not blocking.

aramos-adobe added the S2 Spectrum 2 label Oct 14, 2024

aramos-adobe requested a review from pfulton October 14, 2024 18:52

aramos-adobe self-assigned this Oct 14, 2024

rise-erpelding self-requested a review October 22, 2024 15:40

rise-erpelding requested changes Oct 25, 2024

View reviewed changes

rise-erpelding requested changes Oct 31, 2024

View reviewed changes

rise-erpelding requested changes Nov 1, 2024

View reviewed changes

rise-erpelding previously requested changes Nov 4, 2024

View reviewed changes

rise-erpelding reviewed Nov 5, 2024

View reviewed changes

.changeset/beige-dragons-tickle.md Show resolved Hide resolved

rise-erpelding requested changes Nov 12, 2024

View reviewed changes

jawinn requested changes Nov 14, 2024

View reviewed changes

components/illustratedmessage/index.css Outdated Show resolved Hide resolved

components/illustratedmessage/index.css Outdated Show resolved Hide resolved

components/illustratedmessage/stories/illustratedmessage.stories.js Show resolved Hide resolved

marissahuysentruyt requested changes Nov 14, 2024

View reviewed changes

marissahuysentruyt previously requested changes Nov 26, 2024

View reviewed changes

castastrophe force-pushed the spectrum-two branch 3 times, most recently from cdb180d to 27d01df Compare December 4, 2024 14:54

aramos-adobe requested a review from rise-erpelding December 5, 2024 15:35

rise-erpelding requested changes Dec 5, 2024

View reviewed changes

aramos-adobe added the ready-for-review label Dec 9, 2024

rise-erpelding reviewed Dec 18, 2024

View reviewed changes

jawinn reviewed Dec 20, 2024

View reviewed changes

aramos-adobe added 7 commits January 8, 2025 12:36

docs(illustratedmessage): adding horizontal story context

1033d00

feat(illustratedmessage): removing extra dashes, reverting dropzone

947e98c

chore(fix): adding stylelint disable desc

50ecd0a

chore(fix): removing unused highcontrast accent color token

6d5f86f

feat(illustratedmessage): adding grid display

733ffad

chore(im): removing unused import

9327ed4

chore(im): removing more unused imports

230c342

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 and others added 2 commits January 8, 2025 13:11

chore(illustratedmessage): updating testing env

27ac354

docs(avatar): update sizing documentation (#3483)

dd96363

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 added 2 commits January 9, 2025 11:58

Merge branch 'spectrum-two' into aramos-adobe/css781-illustrated-mess…

f143155

…age-s2-tokens

fix(dropzone): removing unused controls

4a5718e

rise-erpelding reviewed Jan 10, 2025

View reviewed changes

jawinn previously requested changes Jan 10, 2025

View reviewed changes

.changeset/beige-dragons-tickle.md Outdated Show resolved Hide resolved

rise-erpelding and others added 6 commits January 13, 2025 10:08

Merge branch 'spectrum-two' into aramos-adobe/css781-illustrated-mess…

ab65f37

…age-s2-tokens

feat(illustratedmessage): reviewing comments

1f1f018

feat(illustratedmessage): adjusting story horiz copy

dfbbc75

chore: commit token assets

be892d9

Merge branch 'spectrum-two' into aramos-adobe/css781-illustrated-mess…

943022b

…age-s2-tokens

aramos-adobe requested review from rise-erpelding and jawinn January 15, 2025 18:09

rise-erpelding reviewed Jan 16, 2025

View reviewed changes

castastrophe force-pushed the spectrum-two branch 2 times, most recently from b438a55 to 46ae687 Compare January 17, 2025 03:43

fix(illustratedmessage): resolving changes

bc881d9

-};
+};
+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>`;
+	})}
+`;


		import { Template as Link } from "@spectrum-css/link/stories/template.js";

		import { Template } from "./template";

		const customSvg = () => html`
		<svg class="spectrum-IllustratedMessage-illustration" xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" fill="none">

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

Are you sure you want to change the base?

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

Conversation

aramos-adobe commented Oct 14, 2024 • edited Loading

Description

Illustrated Message

Dropzone

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Oct 14, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Oct 14, 2024 • edited Loading

File metrics

Summary

dropzone

illustratedmessage

github-actions bot commented Oct 14, 2024 • edited Loading

rise-erpelding left a comment

Choose a reason for hiding this comment

rise-erpelding left a comment

Choose a reason for hiding this comment

aramos-adobe commented Oct 31, 2024

rise-erpelding commented Oct 31, 2024 • edited Loading

rise-erpelding left a 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 Nov 3, 2024

rise-erpelding commented Nov 4, 2024

rise-erpelding left a comment

Choose a reason for hiding this comment

aramos-adobe commented Nov 4, 2024 • edited Loading

rise-erpelding left a comment • edited Loading

Choose a reason for hiding this comment

rise-erpelding 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

jawinn left a comment • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt left a comment • edited Loading

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

marissahuysentruyt Nov 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this 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

marissahuysentruyt Nov 26, 2024 • edited Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rise-erpelding Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

rise-erpelding 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

Choose a reason for hiding this comment

rise-erpelding Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

rise-erpelding left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aramos-adobe commented Oct 14, 2024 •

edited

Loading

changeset-bot bot commented Oct 14, 2024 •

edited

Loading

github-actions bot commented Oct 14, 2024 •

edited

Loading

github-actions bot commented Oct 14, 2024 •

edited

Loading

rise-erpelding commented Oct 31, 2024 •

edited

Loading

aramos-adobe commented Nov 4, 2024 •

edited

Loading

rise-erpelding left a comment •

edited

Loading

jawinn left a comment •

edited

Loading

marissahuysentruyt left a comment •

edited

Loading

marissahuysentruyt Nov 14, 2024 •

edited

Loading

marissahuysentruyt Nov 26, 2024 •

edited

Loading

rise-erpelding Dec 5, 2024 •

edited

Loading

rise-erpelding Dec 5, 2024 •

edited

Loading