feat(coachmark): S2 migration #3412

cdransf · 2024-11-21T19:37:10Z

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

Open the URL for the PR.
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 · 2024-11-21T19:37:14Z

🦋 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 · 2024-11-21T19:40:03Z

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

github-actions · 2024-11-21T19:42:56Z

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.

components/coachmark/index.css

cdransf · 2024-11-22T19:41:42Z

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 · 2024-11-27T17:28:55Z

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));
...
}

components/coachmark/index.css

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.

components/coachmark/stories/coachmark.stories.js

components/coachmark/index.css

components/coachmark/stories/coachmark.stories.js

.changeset/nice-cows-shout.md

components/badge/stories/template.js

components/coachmark/stories/template.js

components/coachmark/index.css

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!

components/badge/stories/template.js

components/coachmark/stories/coachmark.stories.js

marissahuysentruyt · 2025-03-26T14:46:43Z

components/coachmark/stories/template.js

+						...args,
+						hasImage: true,
+						imageIsFixedHeight: false,
+						imageSource: "example-card-portrait.png",


@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!

components/coachmark/stories/coachmark.test.js

marissahuysentruyt

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

components/coachmark/index.css

marissahuysentruyt

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

tokens/custom/large-vars.css

components/coachmark/index.css

- feat(coachmark): line height token - feat: add fixed height coachmark image variation - chore(coachmark): adds description to imageIsFixedHeight control - feat(coachmark): image control in story - fix(coachmark): image source control label - fix(coachmark): fixed height label - fix(coachmark): conditionally show image-dependent controls - fix(coachmark): css syntax error - chore(coachmark): adjust default args - chore(coachmark): update template and tests to handle updated story defaults; update example heights; update default image - chore(coachmark): update arg names - chore(coachmark): refactor stories to display variations and update explainers - chore(coachmark): rough keyboard shortcut implementation - feat: keyboard shortcut revisions, toggle + title control - feat(coachmark): badge tags arg - feat(coachmark): test updates - feat(coachmark): image + fixed height test - fix(coachmark): missing title - chore: resolve conflict - chore(coachmark): move shortcut control - chore: resolve conflict - fix(coachmark): address feedback - remove redundant height args - add class to story docs - update template name(s) - chore(coachmark): remove with/out shortcut from story titles; deduplicate args - chore(coachmark): add fixed height to template heading - chore(coachmark): additional custom properties in changelog - chore(coachmark): add keyboard shortcut notes to changelog - chore(coachmark): clean up + add stories - chore(coachmark): remove keyboard shortcut functionality

…header to text with action menu present Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

…sidebar

…adge template

…store margin

cdransf added size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. skip_vrt Add to a PR to skip running VRT (but still pass the action) ready-for-review labels Nov 21, 2024

cdransf requested review from jawinn, rise-erpelding and marissahuysentruyt November 21, 2024 19:37

cdransf self-assigned this Nov 21, 2024

jawinn requested changes Nov 22, 2024

View reviewed changes

components/coachmark/index.css Outdated Show resolved Hide resolved

components/coachmark/index.css Outdated Show resolved Hide resolved

cdransf added the blocks Anything where Spectrum-CSS is blocking someone else label Nov 22, 2024

cdransf added blocked See description and comments for what is blocking this issue and removed blocks Anything where Spectrum-CSS is blocking someone else labels Nov 25, 2024

cdransf requested a review from jawinn December 3, 2024 00:01

castastrophe force-pushed the spectrum-two branch 3 times, most recently from cdb180d to 27d01df Compare December 4, 2024 14:54

cdransf force-pushed the cdransf/s2-migration-coachmark branch 2 times, most recently from e9b9444 to 28878d9 Compare December 10, 2024 15:18

cdransf force-pushed the cdransf/s2-migration-coachmark branch from 28878d9 to 63bbe7a Compare December 17, 2024 14:24

github-actions bot reviewed Dec 17, 2024

View reviewed changes

components/coachmark/index.css Outdated Show resolved Hide resolved

cdransf removed the blocked See description and comments for what is blocking this issue label Dec 17, 2024

cdransf force-pushed the cdransf/s2-migration-coachmark branch from fcc97e9 to db908ca Compare December 18, 2024 22:53

jawinn requested changes Dec 19, 2024

View reviewed changes

components/coachmark/stories/coachmark.stories.js Show resolved Hide resolved

components/coachmark/stories/coachmark.stories.js Show resolved Hide resolved

components/coachmark/index.css Show resolved Hide resolved

jawinn reviewed Dec 19, 2024

View reviewed changes

components/coachmark/stories/coachmark.stories.js Show resolved Hide resolved

cdransf force-pushed the cdransf/s2-migration-coachmark branch 2 times, most recently from 2c5d15c to 4715dab Compare December 19, 2024 23:00

castastrophe reviewed Mar 21, 2025

View reviewed changes

jawinn requested changes Mar 21, 2025

View reviewed changes

components/coachmark/index.css Show resolved Hide resolved

cdransf requested review from jawinn and castastrophe March 21, 2025 21:12

marissahuysentruyt requested changes Mar 26, 2025

View reviewed changes

cdransf force-pushed the cdransf/s2-migration-coachmark branch 2 times, most recently from e43f561 to 8468525 Compare March 26, 2025 17:39

marissahuysentruyt reviewed Mar 26, 2025

View reviewed changes

components/coachmark/index.css Outdated Show resolved Hide resolved

components/coachmark/index.css Show resolved Hide resolved

components/coachmark/index.css Show resolved Hide resolved

marissahuysentruyt approved these changes Mar 27, 2025

View reviewed changes

cdransf force-pushed the cdransf/s2-migration-coachmark branch from 086b9a9 to 34f5952 Compare March 27, 2025 17:49

jawinn requested changes Mar 31, 2025

View reviewed changes

tokens/custom/large-vars.css Outdated Show resolved Hide resolved

components/coachmark/index.css Show resolved Hide resolved

cdransf requested a review from jawinn March 31, 2025 18:51

jawinn approved these changes Apr 1, 2025

View reviewed changes

cdransf force-pushed the cdransf/s2-migration-coachmark branch from 8aa3b05 to 732f9a3 Compare April 1, 2025 20:36

cdransf and others added 12 commits April 1, 2025 14:03

fix(coachmark): sets required padding for action menu popover child

9220764

fix(coachmark): enforces consistent spacing from image to header and …

86bc088

…header to text with action menu present Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

fix(coachmark): use classmap instead of ternary; remove stories from …

7b1443d

…sidebar

fix(coachmark): update changeset heading depth

5d2f661

fix(coachmark): update solution for action menu spacing

f26d781

chore(coachmark): long title test + update metadata

3c6bf81

fix(coachmark): remove repetetive arguments; clarify naming; revert b…

8aa3010

…adge template

fix(coachmark): remove unused custom property

cfb33dc

fix(coachmark): remove repetitive wrapper styles

19dc5dd

fix(coachmark): update font weight token; split out root selector; re…

d1ff71d

…store margin

fix(coachmark): flex alignment + tokens changeset

c93b2d6

cdransf force-pushed the cdransf/s2-migration-coachmark branch from 732f9a3 to c93b2d6 Compare April 1, 2025 21:03

cdransf merged commit 60a156d into spectrum-two Apr 1, 2025
12 checks passed

cdransf deleted the cdransf/s2-migration-coachmark branch April 1, 2025 21:49

github-actions bot mentioned this pull request Apr 1, 2025

chore: release (next) #3653

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(coachmark): S2 migration #3412

feat(coachmark): S2 migration #3412

cdransf commented Nov 21, 2024 •

edited

Loading

changeset-bot bot commented Nov 21, 2024 •

edited

Loading

github-actions bot commented Nov 21, 2024 •

edited

Loading

github-actions bot commented Nov 21, 2024 •

edited

Loading

coachmark

tokens

jawinn left a comment

cdransf commented Nov 22, 2024

cdransf commented Nov 27, 2024

jawinn left a comment

marissahuysentruyt left a comment

marissahuysentruyt Mar 26, 2025

marissahuysentruyt left a comment

marissahuysentruyt left a comment

feat(coachmark): S2 migration #3412

feat(coachmark): S2 migration #3412

Conversation

cdransf commented Nov 21, 2024 • edited Loading

Description

S2 coachmark migration

Additions

Validation steps

To-do list

changeset-bot bot commented Nov 21, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Nov 21, 2024 • edited Loading

github-actions bot commented Nov 21, 2024 • edited Loading

File metrics

Summary

coachmark

tokens

jawinn left a comment

Choose a reason for hiding this comment

cdransf commented Nov 22, 2024

cdransf commented Nov 27, 2024

jawinn left a comment

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

marissahuysentruyt Mar 26, 2025

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

cdransf commented Nov 21, 2024 •

edited

Loading

changeset-bot bot commented Nov 21, 2024 •

edited

Loading

github-actions bot commented Nov 21, 2024 •

edited

Loading

github-actions bot commented Nov 21, 2024 •

edited

Loading