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.

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: c93b2d6

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

This PR includes changesets to release 87 packages

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

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.37 MB^*
Total change (Δ): 🔴 ⬆ 0.23 KB (0.02%)

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

Package	Size	Minified	Gzipped	Δ
coachmark	7.66 KB	7.29 KB	1.55 KB	🔴 ⬆ 2.18 KB

File change details

coachmark

Filename	Head	Minified	Gzipped	Compared to base
index.css	7.66 KB	7.29 KB	1.55 KB	🔴 ⬆ 2.18 KB
metadata.json	4.55 KB	-	-	🔴 ⬆ 1.35 KB

tokens

Filename	Head	Minified	Gzipped	Compared to base
css/dark-vars.css	46.44 KB	-	-	-
css/global-vars.css	69.56 KB	-	-	-
css/index.css	241.76 KB	-	-	🔴 ⬆ 0.11 KB
css/large-vars.css	40.81 KB	-	-	🔴 ⬆ 0.06 KB
css/light-vars.css	46.43 KB	-	-	-
css/medium-vars.css	40.93 KB	-	-	🔴 ⬆ 0.06 KB
json/tokens.json	380.07 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.

[jawinn]

We're pretty close on this one! A few suggestions and that one spacing issue still needs a solution.

[marissahuysentruyt]

It's coming along! I haven't looked at this in a while so lots of my previous feedback has been addressed- thank you!

[marissahuysentruyt]

@cdransf Just wanted to ping you on this again. I believe we can remove some of the repetitive args. hasImage can be deleted as well as imageSource!

[marissahuysentruyt]

Overall, the tokens are looking really great! A few tiny things I noticed that I wanted to bring with you.

[marissahuysentruyt]

I think this is looking really great! Thanks so much for sticking with it, fielding all of the keyboard shortcut questions! Great work 🎉