feat(illustratedmessage): adding new s2 tokens #3246

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

Description

Adding new S2 tokens for illustratedmessage

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

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: 5ffcf6b

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

This PR includes changesets to release 2 packages

Name	Type
@spectrum-css/illustratedmessage	Major
@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 · 2024-10-14T18:55:37Z

File metrics

Summary

Total size: 4.30 MB^*
Total change (Δ): ⬆ 8.35 KB (0.19%)

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.08 KB	⬆ 0.38 KB
illustratedmessage	7.89 KB	⬆ 1.94 KB

Details

dropzone

File	Head	Base	Δ
index-base.css	10.08 KB	9.71 KB	⬆ 0.38 KB (3.81%)
index-vars.css	10.08 KB	9.71 KB	⬆ 0.38 KB (3.81%)
index.css	10.08 KB	9.71 KB	⬆ 0.38 KB (3.81%)
metadata.json	5.34 KB	5.11 KB	⬆ 0.24 KB (4.51%)

illustratedmessage

File	Head	Base	Δ
index-base.css	7.89 KB	5.95 KB	⬆ 1.94 KB (32.57%)
index-vars.css	7.89 KB	5.95 KB	⬆ 1.94 KB (32.57%)
index.css	7.89 KB	5.95 KB	⬆ 1.94 KB (32.57%)
metadata.json	4.76 KB	3.56 KB	⬆ 1.20 KB (33.56%)

* 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

…n, button group

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

…al buttons

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?

rise-erpelding · 2024-10-31T13:18:24Z

components/illustratedmessage/stories/template.js

+			${when(hasButtons, () => 
+				ButtonGroup({
+					size,
+					items: [
+						{
+							variant: "secondary",
+							treatment: "outline",
+							label: "Remind me later",
+
+						},
+						{
+							variant: "accent",
+							treatment: "fill",
+							label: "Rate now",
+						},
+					]
+				})
+			)}


Re: the React hooks problem you're getting from adding this button group, I threw your template/stories code for hasButtons quickly into the main branch and tested that control there (see the gif below), I don't think it's going to be an issue once this code gets to main, so no fixes needed on that! 🎉

It's the same issue that @marissahuysentruyt was having with the Has footer control on #2860

Yeah, the hooks error must be something on this branch. Cassondra fixed it with some of the major updates on main, but spectrum-two doesn't have those yet. I get the same thing on dialog 😢

Speaking of the button group, when we don't have the buttons, do we need to remove the margin that's on the description above it? This was just something I noticed, and I'm not sure about. 🤷‍♀️

What I could do is change it to margin-top-start and add to the button group container

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

rise-erpelding · 2024-11-04T15:07:53Z

components/illustratedmessage/metadata/mods.md

+| `--mod-illustrated-message-heading-to-description`     |
+| `--mod-illustrated-message-illustration-accent-color`  |
+| `--mod-illustrated-message-illustration-color`         |
+| `--mod-illustrated-message-illustration-size`          |


This one is also not noted in the changeset

I see the same thing that --mod-illustrated-message-illustration-size isn't noted in the changeset lists.

It looks like --mod-illustrated-message-description-max-inline-size, --mod-illustrated-message-heading-max-inline-size, got removed or renamed. Should we note them in the changeset as well?

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

…age-s2-tokens

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.

…ase classes

…age-s2-tokens

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?

jawinn · 2024-11-14T21:38:55Z

components/illustratedmessage/index.css

+	--spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75);
+	--spectrum-illustrated-message-illustration-to-heading: var(--spectrum-spacing-200);
+	--spectrum-illustrated-message-illustration-to-content: var(--spectrum-spacing-200);
+	--spectrum-illustration-message-description-to-action: var(--spectrum-spacing-300);


Should this be --spectrum-illustrated-message-description-to-action? I noticed the "illustration" vs "illustrated" difference on the PR description and changelog.

jawinn · 2024-11-14T21:52:21Z

components/illustratedmessage/index.css

+	block-size: var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size));
+	inline-size: var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size));


I imagine that someone customizing this will at some point will want to use an image that isn't a square aspect ratio. Should we provide mods to set the width and height separately? Perhaps this could be in addition to what you have: block-size: var(--mod-illustrated-message-illustration-block-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size)));--- the Icon component CSS is doing something similar.

jawinn · 2024-11-14T21:57:21Z

components/illustratedmessage/stories/illustratedmessage.stories.js

@@ -36,9 +36,42 @@ export default {
 				disable: true,
 			},
 		},
+		isHorizontal: {


I would add a Docs story for the horizontal variant, along with any docs related to it.

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

marissahuysentruyt · 2024-11-14T21:19:55Z

components/illustratedmessage/index.css

-  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-illustration {


The block-size and inline-size tokens look good to me for the illlustration. But when I inspect the illustration in the browser in the horizontal orientation (or use the little measurement tool), it looks like the width is off in comparison to the vertical orientation. Were you seeing this at all? Maybe I'm incorrect in thinking they were supposed to be the same size regardless of orientation?

This is a large, horizontal illustrated message. I believe the small and medium are good 👍 I was expecting the large to also be 160x160.

marissahuysentruyt · 2024-11-14T21:51:41Z

components/illustratedmessage/metadata/mods.md

+| `--mod-illustrated-message-heading-to-description`     |
+| `--mod-illustrated-message-illustration-accent-color`  |
+| `--mod-illustrated-message-illustration-color`         |
+| `--mod-illustrated-message-illustration-size`          |


I see the same thing that --mod-illustrated-message-illustration-size isn't noted in the changeset lists.

It looks like --mod-illustrated-message-description-max-inline-size, --mod-illustrated-message-heading-max-inline-size, got removed or renamed. Should we note them in the changeset as well?

marissahuysentruyt · 2024-11-14T22:00:26Z

components/illustratedmessage/stories/template.js

+			${when(hasButtons, () => 
+				ButtonGroup({
+					size,
+					items: [
+						{
+							variant: "secondary",
+							treatment: "outline",
+							label: "Remind me later",
+
+						},
+						{
+							variant: "accent",
+							treatment: "fill",
+							label: "Rate now",
+						},
+					]
+				})
+			)}


Yeah, the hooks error must be something on this branch. Cassondra fixed it with some of the major updates on main, but spectrum-two doesn't have those yet. I get the same thing on dialog 😢

Speaking of the button group, when we don't have the buttons, do we need to remove the margin that's on the description above it? This was just something I noticed, and I'm not sure about. 🤷‍♀️

feat(illustratedmessage): adding new s2 tokens

c9c70af

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

aramos-adobe added 3 commits October 22, 2024 15:36

feat(illustratedmessage): updating token version

6786133

feat(illustratedmessage): work in progress

547d50c

feat(illustratedmessage): adding new tokens, tshirt sizes, orientatio…

181c944

…n, button group

rise-erpelding requested changes Oct 25, 2024

View reviewed changes

aramos-adobe added 2 commits October 30, 2024 13:33

feat(illustratedmessage): updating CSS structure and adding condition…

8e95333

…al buttons

chore(illustratedmessage): update tokens

e1689f8

rise-erpelding requested changes Oct 31, 2024

View reviewed changes

feat(illustratedmessage): update tokens

fb6ac63

aramos-adobe added 2 commits October 31, 2024 17:03

chore(illustratedmessage): revert yarn file

edc9982

chore(illustratedmessage): revert to token package version

a8dd50f

rise-erpelding requested changes Nov 1, 2024

View reviewed changes

aramos-adobe added 2 commits November 3, 2024 12:01

feat(illustratedmessage): changeset, styles, dropzone mods

8dcfc09

chore(illustratedmessage): adding mods

495496d

rise-erpelding previously requested changes Nov 4, 2024

View reviewed changes

aramos-adobe added 3 commits November 4, 2024 18:31

feat(illustratedmessage): work in progress

a8082c7

feat(illustratedmessage): updating mods

a8d5a33

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

aafca1f

…age-s2-tokens

feat(illustratedmessage): removing message accent color selector

dfd2ff3

rise-erpelding reviewed Nov 5, 2024

View reviewed changes

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

aramos-adobe added 2 commits November 6, 2024 12:42

chore(illustratedmessage): updating changeset

02163a2

docs(illustratedmessage): heading controls

c3982c6

rise-erpelding requested changes Nov 12, 2024

View reviewed changes

aramos-adobe added 4 commits November 13, 2024 12:44

fix(illustratedmessage): fixing cjk tokens and removing heading and b…

35df68e

…ase classes

fix(illustratedmessage): fixing cjk tokens and removing heading and b…

a214e64

…ase classes

chore(illustratedmessage): adding mods

5ffcf6b

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

0c93977

…age-s2-tokens

jawinn requested changes Nov 14, 2024

View reviewed changes

marissahuysentruyt requested changes Nov 14, 2024

View reviewed changes

		block-size: var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size));
		inline-size: var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size));

feat(illustratedmessage): adding new s2 tokens #3246

Are you sure you want to change the base?

feat(illustratedmessage): adding new s2 tokens #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

Choose a reason for hiding this comment

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

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

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

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