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: 214cd0b

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/coachmark	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: 2.23 MB^*
Total change (Δ): 🔴 ⬆ 4.20 KB (0.18%)

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

Package	Size	Δ
coachmark	8.15 KB	🔴 ⬆ 2.67 KB

Details

coachmark

Filename	Head	Compared to base
index.css	8.15 KB	🔴 ⬆ 2.67 KB (48.81%)
metadata.json	4.73 KB	🔴 ⬆ 1.53 KB (47.73%)

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

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