feat(contextual-help): S2 migration

[cdransf]

Description

CSS-819

S2 migration for contextual help

This migrates the contextual help component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.

Typographic and color tokens have been updated per design specifications.

All existing popover positioning varations are supported.

New custom properties

--spectrum-contextual-help-body-color
--spectrum-contextual-help-body-line-height
--spectrum-contextual-help-body-sans-serif-font-family
--spectrum-contextual-help-body-sans-serif-font-style
--spectrum-contextual-help-body-sans-serif-font-weight
--spectrum-contextual-help-title-color
--spectrum-contextual-help-title-font-style
--spectrum-contextual-help-title-font-weight
--spectrum-contextual-help-title-line-height
--spectrum-contextual-help-title-sans-serif-font-family

New mods

--mod-contextual-help-body-line-height
--mod-contextual-help-body-sans-serif-font-family
--mod-contextual-help-body-sans-serif-font-style
--mod-contextual-help-body-sans-serif-font-weight
--mod-contextual-help-body-size
--mod-contextual-help-title-color
--mod-contextual-help-title-font-style
--mod-contextual-help-title-font-weight
--mod-contextual-help-title-line-height
--mod-contextual-help-title-sans-serif-font-family
--highcontrast-contextual-help-heading-color
--highcontrast-contextual-help-title-color

Removed mods

--highcontrast-contextual-help-heading-color

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]

🦋 Changeset detected

Latest commit: 52e6d7a

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

This PR includes changesets to release 3 packages

Name	Type
@spectrum-css/contextualhelp	Major
@spectrum-css/bundle	Patch
@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-3909--spectrum-css.netlify.app

[github-actions]

File metrics

Summary

Total size: 1.42 MB^*

Package	Size	Minified	Gzipped
contextualhelp	4.49 KB	4.32 KB	1.00 KB

contextualhelp

Filename	Head	Minified	Gzipped	Compared to base
index.css	4.49 KB	4.32 KB	1.00 KB	🔴 ⬆ 2.29 KB
metadata.json	2.72 KB	-	-	🔴 ⬆ 1.44 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.

[castastrophe]

This looking great. Well documented and thanks for the storybook clean-up. I left one small suggestion about how we document high contrast hooks.

[marissahuysentruyt]

Some questions for you!

1. Is there a reason we have customStyles on every story? Can we get rid of any and use our CSS instead? I haven't actually tried removing them, so we might, I'm not sure.

2. I couldn't comment on the action button code, but I think we need to gather the globals data so that we can appropriately render both the small action button for large/mobile, and the XS action button for medium/desktop

// before the return statement
const { globals = {} } = context;
const scale = globals.scale ?? "medium"; // this const may not be necessary, so you could refactor this out if you wanted

// then in the ActionButton call, change the size declaration: 
size: scale === "medium" ? "xs" : "s",

3. Could you double check all of the mods in the CSS? There were quite a few places where I was seeing --mod-spectrum-contextual-help* instead of just --mod-contextual-help*. (places where it was already like that, I mean)
4. How does contextual help get triggered? Would we want to add isSelected: false to the action button at all, just to match the design, or is this component triggered because an action button was selected?

[marissahuysentruyt]

To me, this is looking really good! I'm going to approve, but I would suggest the custom prop removals Aziz mentioned. I didn't want to request changes again since he already caught them! WHCM looks good too- great work!

[github-actions]

📚 Branch preview

PR #3909 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-3909/index.html.

[aramos-adobe]

Just one more token removal!

--spectrum-contextual-help-border-radius: var(--mod-popover-corner-radius);

I don't think we need this either since you're using --mod-popover-corner-radius then you can remove the border-radius in the spectrum-ContextualHelp-popover selector