Skip to content

Commit 60a156d

Browse files
cdransfgithub-actions[bot]
cdransf
and
github-actions[bot]
authored
feat(coachmark): S2 migration (#3412)
* feat(coachmark): s2 migration - 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 * fix(coachmark): sets required padding for action menu popover child * fix(coachmark): enforces consistent spacing from image to header and 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 sidebar * fix(coachmark): update changeset heading depth * fix(coachmark): update solution for action menu spacing * chore(coachmark): long title test + update metadata * fix(coachmark): remove repetetive arguments; clarify naming; revert badge template * fix(coachmark): remove unused custom property * fix(coachmark): remove repetitive wrapper styles * fix(coachmark): update font weight token; split out root selector; restore margin * fix(coachmark): flex alignment + tokens changeset --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent beee947 commit 60a156d

File tree

9 files changed

+450
-146
lines changed

9 files changed

+450
-146
lines changed

‎.changeset/lemon-weeks-work.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@spectrum-css/tokens": minor
3+
---
4+
5+
#### Tokens
6+
7+
Adds custom vars for coachmark action menu vertical spacing. These help provide consistent spacing between states when the action menu is and is not visible.
8+
9+
In `tokens/custom/large-vars.css`: `--spectrum-coachmark-action-menu-vertical-offset`.
10+
11+
In `tokens/custom/medium-vars.css`: `--spectrum-coachmark-action-menu-vertical-offset`.

‎.changeset/nice-cows-shout.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
"@spectrum-css/coachmark": major
3+
---
4+
5+
#### S2 coachmark migration
6+
7+
This migrates the `coachmark` component to S2. Custom properties have been remapped per the design spec.
8+
9+
| Before | After |
10+
| ------------------------------------------ | ----------------------------------------------- |
11+
| --spectrum-heading-sans-serif-font-weight | --spectrum-title-sans-serif-font-weight |
12+
| --spectrum-coach-mark-title-size | --spectrum-coach-mark-title-font-size |
13+
| --spectrum-heading-line-height | --spectrum-title-line-height |
14+
| --spectrum-heading-serif-font-style | --spectrum-title-serif-font-style |
15+
| --spectrum-coach-mark-body-size | --spectrum-coach-mark-body-font-size |
16+
| --spectrum-body-sans-serif-font-style | --spectrum-body-serif-font-style |
17+
| --spectrum-coach-mark-pagination-body-size | --spectrum-coach-mark-pagination-body-font-size |
18+
19+
### New properties
20+
21+
```css
22+
--spectrum-coach-mark-edge-to-content
23+
--spectrum-coach-mark-maximum-width
24+
--spectrum-coach-mark-media-height
25+
--spectrum-coach-mark-media-minimum-height
26+
--spectrum-coach-mark-minimum-width
27+
--spectrum-coach-mark-pagination-color
28+
--spectrum-coach-mark-pagination-text-to-bottom-edge
29+
--spectrum-coach-mark-width
30+
--spectrum-coachmark-body-to-footer
31+
--spectrum-coachmark-border-radius
32+
--spectrum-coachmark-border-size
33+
--spectrum-coachmark-buttongroup-display
34+
--spectrum-coachmark-buttongroup-mobile-display
35+
--spectrum-coachmark-content-font-size
36+
--spectrum-coachmark-content-font-weight
37+
--spectrum-coachmark-header-to-body
38+
--spectrum-coachmark-heading-to-action-button
39+
--spectrum-coachmark-max-width
40+
--spectrum-coachmark-media-fixed-height
41+
--spectrum-coachmark-media-min-height
42+
--spectrum-coachmark-menu-display
43+
--spectrum-coachmark-menu-mobile-display
44+
--spectrum-coachmark-min-width
45+
--spectrum-coachmark-padding
46+
--spectrum-coachmark-step-color
47+
--spectrum-coachmark-step-font-size
48+
--spectrum-coachmark-step-font-style
49+
--spectrum-coachmark-step-text-font-weight
50+
--spectrum-coachmark-step-text-line-height
51+
--spectrum-coachmark-step-to-bottom
52+
--spectrum-coachmark-title-color
53+
--spectrum-coachmark-title-font-family
54+
--spectrum-coachmark-title-font-size
55+
--spectrum-coachmark-title-font-style
56+
--spectrum-coachmark-title-text-font-weight
57+
--spectrum-coachmark-title-text-line-height
58+
```
59+
60+
## Additions
61+
62+
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 `Fixed image height`. The class is conditionally added within the `hasImage` block and, as such, will only impact rendering when `hasImage` is also `true`.

‎components/coachmark/dist/metadata.json

+40-9
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@
1010
".spectrum-CoachMark-header",
1111
".spectrum-CoachMark-image",
1212
".spectrum-CoachMark-image-wrapper",
13+
".spectrum-CoachMark-image-wrapper--fixedHeight",
1314
".spectrum-CoachMark-menu",
1415
".spectrum-CoachMark-menu--mobile",
1516
".spectrum-CoachMark-step",
1617
".spectrum-CoachMark-title"
1718
],
1819
"modifiers": [
20+
"--mod-coachmark-action-menu-vertical-offset",
1921
"--mod-coachmark-body-to-footer",
2022
"--mod-coachmark-border-radius",
2123
"--mod-coachmark-border-size",
@@ -27,8 +29,9 @@
2729
"--mod-coachmark-content-line-height",
2830
"--mod-coachmark-header-to-body",
2931
"--mod-coachmark-heading-to-action-button",
32+
"--mod-coachmark-image-to-heading",
3033
"--mod-coachmark-max-width",
31-
"--mod-coachmark-media-height",
34+
"--mod-coachmark-media-fixed-height",
3235
"--mod-coachmark-media-min-height",
3336
"--mod-coachmark-min-width",
3437
"--mod-coachmark-padding",
@@ -47,39 +50,67 @@
4750
"--mod-coachmark-width"
4851
],
4952
"component": [
50-
"--spectrum-coach-mark-body-size",
53+
"--spectrum-coach-mark-body-font-size",
5154
"--spectrum-coach-mark-edge-to-content",
5255
"--spectrum-coach-mark-maximum-width",
5356
"--spectrum-coach-mark-media-height",
5457
"--spectrum-coach-mark-media-minimum-height",
5558
"--spectrum-coach-mark-minimum-width",
56-
"--spectrum-coach-mark-pagination-body-size",
59+
"--spectrum-coach-mark-pagination-body-font-size",
5760
"--spectrum-coach-mark-pagination-color",
5861
"--spectrum-coach-mark-pagination-text-to-bottom-edge",
59-
"--spectrum-coach-mark-title-size",
62+
"--spectrum-coach-mark-title-font-size",
6063
"--spectrum-coach-mark-width",
64+
"--spectrum-coachmark-action-menu-vertical-offset",
65+
"--spectrum-coachmark-body-to-footer",
6166
"--spectrum-coachmark-border-radius",
6267
"--spectrum-coachmark-border-size",
6368
"--spectrum-coachmark-buttongroup-display",
6469
"--spectrum-coachmark-buttongroup-mobile-display",
70+
"--spectrum-coachmark-content-font-size",
71+
"--spectrum-coachmark-content-font-weight",
72+
"--spectrum-coachmark-header-to-body",
73+
"--spectrum-coachmark-image-to-heading",
74+
"--spectrum-coachmark-max-width",
75+
"--spectrum-coachmark-media-fixed-height",
76+
"--spectrum-coachmark-media-min-height",
6577
"--spectrum-coachmark-menu-display",
66-
"--spectrum-coachmark-menu-mobile-display"
78+
"--spectrum-coachmark-menu-mobile-display",
79+
"--spectrum-coachmark-min-width",
80+
"--spectrum-coachmark-padding",
81+
"--spectrum-coachmark-step-color",
82+
"--spectrum-coachmark-step-font-size",
83+
"--spectrum-coachmark-step-font-style",
84+
"--spectrum-coachmark-step-text-font-weight",
85+
"--spectrum-coachmark-step-text-line-height",
86+
"--spectrum-coachmark-step-to-bottom",
87+
"--spectrum-coachmark-title-color",
88+
"--spectrum-coachmark-title-font-family",
89+
"--spectrum-coachmark-title-font-size",
90+
"--spectrum-coachmark-title-font-style",
91+
"--spectrum-coachmark-title-text-font-weight",
92+
"--spectrum-coachmark-title-text-line-height",
93+
"--spectrum-coachmark-width"
6794
],
6895
"global": [
6996
"--spectrum-body-color",
7097
"--spectrum-body-line-height",
7198
"--spectrum-body-sans-serif-font-style",
7299
"--spectrum-body-sans-serif-font-weight",
100+
"--spectrum-body-serif-font-style",
73101
"--spectrum-border-width-100",
74102
"--spectrum-corner-radius-large-default",
75103
"--spectrum-heading-color",
76-
"--spectrum-heading-line-height",
77-
"--spectrum-heading-sans-serif-font-weight",
78-
"--spectrum-heading-serif-font-style",
104+
"--spectrum-line-height-200",
105+
"--spectrum-medium-font-weight",
106+
"--spectrum-popover-content-area-spacing",
79107
"--spectrum-sans-serif-font",
80108
"--spectrum-spacing-100",
81109
"--spectrum-spacing-200",
82-
"--spectrum-spacing-300"
110+
"--spectrum-spacing-300",
111+
"--spectrum-title-line-height",
112+
"--spectrum-title-sans-serif-font-weight",
113+
"--spectrum-title-serif-font-style"
83114
],
84115
"passthroughs": [
85116
"--mod-button-edge-to-visual-only",

‎components/coachmark/index.css

+66-26
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Copyright 2024 Adobe. All rights reserved.
2+
* Copyright 2025 Adobe. All rights reserved.
33
*
44
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License. You may obtain a copy
@@ -12,27 +12,59 @@
1212
*/
1313

1414
.spectrum-CoachMark {
15+
--spectrum-coachmark-width: var(--spectrum-coach-mark-width);
16+
--spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width);
17+
--spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width);
18+
--spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);
19+
1520
--spectrum-coachmark-border-size: var(--mod-coachmark-border-size, var(--mod-popover-border-width));
1621
--spectrum-coachmark-border-radius: var(--mod-coachmark-border-radius, var(--mod-popover-corner-radius));
1722

23+
--spectrum-coachmark-media-fixed-height: var(--spectrum-coach-mark-media-height);
24+
25+
/* layout */
26+
--spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content);
27+
--spectrum-coachmark-image-to-heading: var(--spectrum-coach-mark-edge-to-content);
28+
--spectrum-coachmark-header-to-body: var(--spectrum-spacing-200);
29+
--spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300);
30+
31+
/* font */
32+
--spectrum-coachmark-title-color: var(--spectrum-heading-color);
33+
--spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font);
34+
--spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-font-size);
35+
--spectrum-coachmark-title-font-style: var(--spectrum-title-serif-font-style);
36+
--spectrum-coachmark-title-text-font-weight: var(--spectrum-title-sans-serif-font-weight);
37+
--spectrum-coachmark-title-text-line-height: var(--spectrum-title-line-height);
38+
39+
--spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-font-size);
40+
--spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
41+
42+
--spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color);
43+
--spectrum-coachmark-step-font-style: var(--spectrum-body-serif-font-style);
44+
--spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-font-size);
45+
--spectrum-coachmark-step-text-font-weight: var(--spectrum-medium-font-weight);
46+
--spectrum-coachmark-step-text-line-height: var(--spectrum-line-height-200);
47+
--spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);
48+
1849
/* @passthrough start */
1950
--mod-buttongroup-justify-content: flex-end;
2051
--mod-popover-border-width: var(--spectrum-border-width-100);
2152
--mod-popover-corner-radius: var(--spectrum-corner-radius-large-default);
2253
--mod-popover-content-area-spacing: 0;
2354
--mod-button-edge-to-visual-only: 9px;
2455
/* @passthrough end */
56+
}
2557

58+
.spectrum-CoachMark {
2659
position: relative;
27-
min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coach-mark-minimum-width));
28-
max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coach-mark-maximum-width));
29-
inline-size: var(--mod-coachmark-width, var(--spectrum-coach-mark-width));
60+
min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width));
61+
max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width));
62+
inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width));
3063
}
3164

3265
/* Used when the coachmark has an image */
3366
.spectrum-CoachMark-image-wrapper {
34-
block-size: var(--mod-coachmark-media-height, var(--spectrum-coach-mark-media-height));
35-
min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coach-mark-media-minimum-height));
67+
min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height));
3668
inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coach-mark-width)) - (var(--spectrum-coachmark-border-size) * 2));
3769

3870
object-fit: cover;
@@ -42,11 +74,16 @@
4274
border-start-end-radius: inherit;
4375
}
4476

77+
.spectrum-CoachMark-image-wrapper--fixedHeight {
78+
block-size: var(--mod-coachmark-media-fixed-height, var(--spectrum-coachmark-media-fixed-height));
79+
}
80+
4581
/* Class for the image; nested inside image-wrapper */
4682
.spectrum-CoachMark-image {
4783
display: block;
4884
inline-size: 100%;
4985
block-size: 100%;
86+
min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height));
5087
object-fit: cover;
5188
border-start-start-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size));
5289
border-start-end-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size));
@@ -57,34 +94,37 @@
5794
.spectrum-CoachMark-content,
5895
.spectrum-CoachMark-footer {
5996
padding-block: 0;
60-
padding-inline: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
97+
padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
6198
}
6299

63100
/* Wrapper contains title, action-menu */
64101
.spectrum-CoachMark-header {
65-
padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
102+
padding-block-start: var(--mod-coachmark-image-to-heading, var(--spectrum-coachmark-image-to-heading));
66103
display: flex;
67104
justify-content: space-between;
68-
align-items: center;
69-
margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-spacing-200));
105+
align-items: flex-start;
106+
margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body));
70107
}
71108

72109
/* Text wrapper for the title content; sides besdie action menu if present */
73110
.spectrum-CoachMark-title {
74-
color: var(--mod-coachmark-title-color, var(--spectrum-heading-color));
75-
font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coach-mark-title-size));
76-
font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-heading-sans-serif-font-weight));
77-
font-family: var(--mod-coachmark-title-font-family, var(--spectrum-sans-serif-font));
78-
font-style: var(--mod-coachmark-title-font-style, var(--spectrum-heading-serif-font-style));
79-
line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-heading-line-height));
111+
color: var(--mod-coachmark-title-color, var(--spectrum-coachmark-title-color));
112+
font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coachmark-title-font-size));
113+
font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-coachmark-title-text-font-weight));
114+
font-family: var(--mod-coachmark-title-font-family, var(--spectrum-coachmark-title-font-family));
115+
font-style: var(--mod-coachmark-title-font-style, var(--spectrum-coachmark-title-font-style));
116+
line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-coachmark-title-text-line-height));
80117
margin-block-end: 0;
81118
}
82119

83120
/* Wrapper element around the nested action menu sub-component */
84121
.spectrum-CoachMark-action-menu {
122+
--mod-popover-content-area-spacing: var(--spectrum-popover-content-area-spacing);
123+
85124
white-space: nowrap;
86125
z-index: 1;
87126
margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-spacing-300));
127+
margin-block: var(--mod-coachmark-action-menu-vertical-offset, var(--spectrum-coachmark-action-menu-vertical-offset));
88128
}
89129

90130
/* @deprecated not used currently in demos or by SWC */
@@ -99,10 +139,10 @@
99139

100140
/* Text wrapper for the content */
101141
.spectrum-CoachMark-content {
102-
margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-spacing-300));
142+
margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-coachmark-body-to-footer));
103143
color: var(--mod-coachmark-content-font-color, var(--spectrum-body-color));
104-
font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coach-mark-body-size));
105-
font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-body-sans-serif-font-weight));
144+
font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coachmark-content-font-size));
145+
font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-coachmark-content-font-weight));
106146
font-family: var(--mod-coachmark-content-font-family, var(--spectrum-sans-serif-font));
107147
font-style: var(--mod-coachmark-content-font-style, var(--spectrum-body-sans-serif-font-style));
108148
line-height: var(--mod-coachmark-content-line-height, var(--spectrum-body-line-height));
@@ -113,20 +153,20 @@
113153
display: grid;
114154
align-items: end;
115155
margin-block-start: 0;
116-
padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
156+
padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
117157
}
118158

119159
/* Text wrapper for the step count */
120160
.spectrum-CoachMark-step {
121161
justify-self: start;
122-
margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coach-mark-pagination-text-to-bottom-edge)) - var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content)));
162+
margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coachmark-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)));
123163

124-
color: var(--mod-coachmark-step-color, var(--spectrum-coach-mark-pagination-color));
125-
font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coach-mark-pagination-body-size));
126-
font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-body-sans-serif-font-weight));
164+
color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color));
165+
font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coachmark-step-font-size));
166+
font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-coachmark-step-text-font-weight));
127167
font-family: var(--spectrum-sans-serif-font);
128-
font-style: var(--mod-coachmark-step-font-style, var(--spectrum-body-sans-serif-font-style));
129-
line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-body-line-height));
168+
font-style: var(--mod-coachmark-step-font-style, var(--spectrum-coachmark-step-font-style));
169+
line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-coachmark-step-text-line-height));
130170
white-space: nowrap;
131171
}
132172

0 commit comments

Comments
 (0)