feat(coachmark): S2 migration

[cdransf]

Description

CSS-1024

S2 coachmark migration

This migrates the coachmark component to S2. Custom properties have been remapped per the design spec.

Before	After
--spectrum-heading-sans-serif-font-weight	--spectrum-title-sans-serif-font-weight
--spectrum-coach-mark-title-size	--spectrum-coach-mark-title-font-size
--spectrum-heading-line-height	--spectrum-title-line-height
--spectrum-coach-mark-body-size	--spectrum-coach-mark-body-font-size
--spectrum-body-sans-serif-font-style	--spectrum-body-serif-font-style
--spectrum-coach-mark-pagination-body-size	--spectrum-coach-mark-pagination-body-font-size

Additions

Adds --spectrum-coachmark-media-fixed-height for fixed 4:3 image variant and an accompanying --mod-coachmark-media-fixed-height mod. This variation has been added to the coachmark component story as a boolean control labeled as Image fixed height. The class is conditionally added within the hasImage block and, as such, will only impact rendering when hasImage is also true.

---

Validation steps

1. Open the URL for the PR.
2. Navigate to the coachmark component and verify no regressions have occurred.

Note: the new font-family tokens set the font to Adobe Clean but Adobe Clean is not loading on the branch created from the spectrum-two base branch.

Regression testing

Validate:

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

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

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

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]

🦋 Changeset detected

Latest commit: 8874538

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/colorwheel	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]

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

[github-actions]

File metrics

Summary

Total size: 1.66 MB^*
Total change (Δ): 🔴 ⬆ 1.39 KB (0.08%)

Table reports on changes to a package's main file.

Package	Size	Minified	Gzipped	Δ
colorwheel	6.07 KB	-	-	🔴 ⬆ 1.39 KB

colorwheel

Filename	Head	Minified	Gzipped	Compared to base
index.css	6.07 KB	-	-	🔴 ⬆ 1.39 KB
metadata.json	2.11 KB	-	-	🔴 ⬆ 0.20 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.

[jawinn]

I'm seeing a few things on the design not represented yet.

Line-height changes
I see body and pagination in the S2 specs marked as using line-height-200. I don't see the CSS using this token.

Keyboard shortcut
I don't see this new feature represented yet in our Docs examples or styles or controls. Does design need to define tokens for these keyboard shortcut elements on the specs?

4:3 and 16:19 image
The design shows an example of images at both of these aspect ratios, that we should demonstrate in our docs and maybe have a control for. I'm not exactly sure how this ties in with the sizing of the image and tokens.

Wait on popover to finalize?
This component is heavily reliant on popover, which has its S2 migration in progress and has been discussing and updating some items related to coachmark (#3365). So it may be worth waiting on that to merge before final review of its design.

[cdransf]

I'm seeing a few things on the design not represented yet.

Line-height changes I see body and pagination in the S2 specs marked as using line-height-200. I don't see the CSS using this token.

Keyboard shortcut I don't see this new feature represented yet in our Docs examples or styles or controls. Does design need to define tokens for these keyboard shortcut elements on the specs?

4:3 and 16:19 image The design shows an example of images at both of these aspect ratios, that we should demonstrate in our docs and maybe have a control for. I'm not exactly sure how this ties in with the sizing of the image and tokens.

Wait on popover to finalize? This component is heavily reliant on popover, which has its S2 migration in progress and has been discussing and updating some items related to coachmark (#3365). So it may be worth waiting on that to merge before final review of its design.

Awesome catches! I updated the line-height and font tokens. I marked this blocked pending the popover work and started a thread about the image implementation (one token includes -minimum- which seems odd semantically.

[cdransf]

I'm seeing a few things on the design not represented yet.
Line-height changes I see body and pagination in the S2 specs marked as using line-height-200. I don't see the CSS using this token.
Keyboard shortcut I don't see this new feature represented yet in our Docs examples or styles or controls. Does design need to define tokens for these keyboard shortcut elements on the specs?
4:3 and 16:19 image The design shows an example of images at both of these aspect ratios, that we should demonstrate in our docs and maybe have a control for. I'm not exactly sure how this ties in with the sizing of the image and tokens.
Wait on popover to finalize? This component is heavily reliant on popover, which has its S2 migration in progress and has been discussing and updating some items related to coachmark (#3365). So it may be worth waiting on that to merge before final review of its design.

Awesome catches! I updated the line-height and font tokens. I marked this blocked pending the popover work and started a thread about the image implementation (one token includes -minimum- which seems odd semantically.

Spoke with design and it sounds like the minimum token is the minimum dimension for the coach mark image and 4:3 is not a strict max. This is the current state:

.spectrum-CoachMark-image-wrapper {
  block-size: var(--mod-coachmark-media-height, var(--spectrum-coachmark-media-height));
  min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height));
...
}

[jawinn]

The line-height looks good, and thanks for finding out the intentions on the 4:3 and 16:9 examples (where 4:3 is now a variant class).

It looks like the use of the heights needs a little adjustments.
And the newly added keyboard shortcut feature needs to be built and documented.

The stories on the "Docs" page appear cut off, but that appears to be more popover related? That is possibly something that was already fixed in main as I don't see that issue there.

[marissahuysentruyt]

This is looking pretty nice after the rebase! I had a very long thought, and wasn't quite sure where to put it, so I apologize- it's going here 😆

---

I hope I'm not backtracking on old comments, but I'm second-guessing our Default story on the docs page currently (technically Standard).

I don't find it very clear what the actual default coach mark is. According to Figma, their default component is something like hasImage: true, hasActionMenu: false, imageIsFixedHeight: false, hasPagination: true, (and you put all of those in the default args). I think it would be clearer to maybe put the no-action-menu-no-image in a separate story all by itself. Then Standard and this new "No media, no action menu" story are just bound to Template().

Just quickly, some more story ideas I had for the docs page:

export const Standard = Template.bind({}); (showcases just the default coachmark, and we'd add documentation that the default coach mark has an image and doesn't have an action menu).

export const StandardNoMedia = Template.bind({});
StandardNoMedia.storyName = "Default, no media";
StandardNoMedia.args = {
	hasImage: false,
};

Based on the code comment, the CoachmarkMenuStatesTemplate should show the closed action menu and the open action menu. I would have probably kept that CoachmarkMenuStatesTemplate basically as it was (but fix up the headings for open/closed, and a missing isOpen: false), but then another story could be:

export const WithActionMenu = CoachmarkMenuStatesTemplate.bind({});
WithActionMenu.storyName = "With action menu";
WithActionMenu.args = {
	hasActionMenu: true,
};

I get what we're trying to do with these variants & stories, and just trying to show all the possible options. We could also add some additional documentation at the top of the page to clarify "all coach marks can have any combination of action menu, media, and keyboard shortcut options." Steplist does this with a callout to "all steplists can be static or interactive." Then it covers everything in a centralized place.

I definitely like Josh's comments about just adding more stories- I think it clarifies the options for users, and just separates all of the information a little better to make it easier to digest.

[marissahuysentruyt]

Were there any other custom properties or tokens we should call out? Particularly regarding the keyboard shortcut stuff?

I was looking through the metadata changes and wondered if any of those (which seemed like, maybe a lot 🤷‍♀️ ) should be mentioned in the changelog.

[cdransf]

Updated it with a component-specific subset from metadata — let me know what you think. 😄

[marissahuysentruyt]

@cdransf I think this image: "example-card-landscape.png", is adding an extra, unexpected control. Deleting it doesn't appear to make a difference to the component, but removes that unexpected control from the table.