Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(coachmark): S2 migration #3412

Open
wants to merge 14 commits into
base: spectrum-two
Choose a base branch
from
+349 −129
Open

feat(coachmark): S2 migration #3412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f0e70f8
feat(coachmark): s2 migration
cdransf Jan 2, 2025
cf74b1c
feat(coachmark): line height token
cdransf Jan 2, 2025
b2fdaf8
feat: add fixed height coachmark image variation
cdransf Jan 2, 2025
1dae947
chore(coachmark): adds description to imageIsFixedHeight control
cdransf Jan 2, 2025
7630128
feat(coachmark): image control in story
cdransf Jan 2, 2025
11b1705
fix(coachmark): image source control label
cdransf Jan 6, 2025
7758162
fix(coachmark): fixed height label
cdransf Jan 6, 2025
2e2014d
fix(coachmark): conditionally show image-dependent controls
cdransf Jan 6, 2025
e7c09ab
fix(coachmark): css syntax error
cdransf Jan 6, 2025
8a83806
chore(coachmark): adjust default args
cdransf Jan 6, 2025
6bfdff7
chore(coachmark): update template and tests to handle updated story d…
cdransf Jan 6, 2025
b41d73e
chore(coachmark): update arg names
cdransf Jan 6, 2025
b1b6909
chore(coachmark): refactor stories to display variations and update e…
cdransf Jan 6, 2025
19f63b6
chore(coachmark): rough keyboard shortcut implementation
cdransf Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .changeset/nice-cows-shout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
"@spectrum-css/coachmark": major
---

# 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`.
85 changes: 60 additions & 25 deletions components/coachmark/index.css
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm still looking for the keyboard shortcut feature that is part of the S2 design spec. Were you planning to add that (markup, new CSS, stories)?
Screenshot 2024-11-22 at 11 20 35 AM

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I totally missed that! Will be digging into it shortly (and may have some questions on how best to approach it).

Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,40 @@
*/

.spectrum-CoachMark {
--spectrum-coachmark-width: var(--spectrum-coach-mark-width);
--spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width);
--spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width);
--spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);

--spectrum-coachmark-border-size: var(--mod-coachmark-border-size, var(--mod-popover-border-width));
--spectrum-coachmark-border-radius: var(--mod-coachmark-border-radius, var(--mod-popover-corner-radius));

--spectrum-coachmark-media-fixed-height: var(--spectrum-coach-mark-media-height);

/* layout */
--spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content);
--spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300);
--spectrum-coachmark-header-to-body: var(--spectrum-spacing-200);
--spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300);

/* font */
--spectrum-coachmark-title-color: var(--spectrum-heading-color);
--spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font);
--spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-font-size);
--spectrum-coachmark-title-font-style: var(--spectrum-title-serif-font-style);
--spectrum-coachmark-title-text-font-weight: var(--spectrum-title-sans-serif-font-weight);
--spectrum-coachmark-title-text-line-height: var(--spectrum-title-line-height);

--spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-font-size);
--spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight);

--spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color);
--spectrum-coachmark-step-font-style: var(--spectrum-body-serif-font-style);
--spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-font-size);
--spectrum-coachmark-step-text-font-weight: var(--spectrum-body-sans-serif-font-weight);
--spectrum-coachmark-step-text-line-height: var(--spectrum-line-height-200);
--spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge);

/* @passthrough start */
--mod-buttongroup-justify-content: flex-end;
--mod-popover-border-width: var(--spectrum-border-width-100);
Expand All @@ -24,15 +55,14 @@
/* @passthrough end */

position: relative;
min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coach-mark-minimum-width));
max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coach-mark-maximum-width));
inline-size: var(--mod-coachmark-width, var(--spectrum-coach-mark-width));
min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width));
max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width));
inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width));
}

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

object-fit: cover;
Expand All @@ -42,11 +72,16 @@
border-start-end-radius: inherit;
}

.spectrum-CoachMark-image-wrapper--fixedHeight {
cdransf marked this conversation as resolved.
Show resolved Hide resolved
block-size: var(--mod-coachmark-media-fixed-height, var(--spectrum-coachmark-media-fixed-height));
}

/* Class for the image; nested inside image-wrapper */
.spectrum-CoachMark-image {
display: block;
inline-size: 100%;
block-size: 100%;
min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height));
object-fit: cover;
border-start-start-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size));
border-start-end-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size));
Expand All @@ -57,34 +92,34 @@
.spectrum-CoachMark-content,
.spectrum-CoachMark-footer {
padding-block: 0;
padding-inline: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
}

/* Wrapper contains title, action-menu */
.spectrum-CoachMark-header {
padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
display: flex;
justify-content: space-between;
align-items: center;
margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-spacing-200));
margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body));
}

/* Text wrapper for the title content; sides besdie action menu if present */
.spectrum-CoachMark-title {
color: var(--mod-coachmark-title-color, var(--spectrum-heading-color));
font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coach-mark-title-size));
font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-heading-sans-serif-font-weight));
font-family: var(--mod-coachmark-title-font-family, var(--spectrum-sans-serif-font));
font-style: var(--mod-coachmark-title-font-style, var(--spectrum-heading-serif-font-style));
line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-heading-line-height));
color: var(--mod-coachmark-title-color, var(--spectrum-coachmark-title-color));
font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coachmark-title-font-size));
font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-coachmark-title-text-font-weight));
font-family: var(--mod-coachmark-title-font-family, var(--spectrum-coachmark-title-font-family));
font-style: var(--mod-coachmark-title-font-style, var(--spectrum-coachmark-title-font-style));
line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-coachmark-title-text-line-height));
margin-block-end: 0;
}

/* Wrapper element around the nested action menu sub-component */
.spectrum-CoachMark-action-menu {
white-space: nowrap;
z-index: 1;
margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-spacing-300));
margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-coachmark-heading-to-action-button));
}

/* @deprecated not used currently in demos or by SWC */
Expand All @@ -99,10 +134,10 @@

/* Text wrapper for the content */
.spectrum-CoachMark-content {
margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-spacing-300));
margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-coachmark-body-to-footer));
color: var(--mod-coachmark-content-font-color, var(--spectrum-body-color));
font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coach-mark-body-size));
font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-body-sans-serif-font-weight));
font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coachmark-content-font-size));
font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-coachmark-content-font-weight));
font-family: var(--mod-coachmark-content-font-family, var(--spectrum-sans-serif-font));
font-style: var(--mod-coachmark-content-font-style, var(--spectrum-body-sans-serif-font-style));
line-height: var(--mod-coachmark-content-line-height, var(--spectrum-body-line-height));
Expand All @@ -113,20 +148,20 @@
display: grid;
align-items: end;
margin-block-start: 0;
padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content));
padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding));
}

/* Text wrapper for the step count */
.spectrum-CoachMark-step {
justify-self: start;
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)));
margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coachmark-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)));

color: var(--mod-coachmark-step-color, var(--spectrum-coach-mark-pagination-color));
font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coach-mark-pagination-body-size));
font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-body-sans-serif-font-weight));
color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color));
font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coachmark-step-font-size));
font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-coachmark-step-text-font-weight));
font-family: var(--spectrum-sans-serif-font);
font-style: var(--mod-coachmark-step-font-style, var(--spectrum-body-sans-serif-font-style));
line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-body-line-height));
font-style: var(--mod-coachmark-step-font-style, var(--spectrum-coachmark-step-font-style));
line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-coachmark-step-text-line-height));
white-space: nowrap;
}

Expand Down
44 changes: 35 additions & 9 deletions components/coachmark/metadata/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
".spectrum-CoachMark-header",
".spectrum-CoachMark-image",
".spectrum-CoachMark-image-wrapper",
".spectrum-CoachMark-image-wrapper--fixedHeight",
".spectrum-CoachMark-menu",
".spectrum-CoachMark-menu--mobile",
".spectrum-CoachMark-step",
Expand All @@ -28,7 +29,7 @@
"--mod-coachmark-header-to-body",
"--mod-coachmark-heading-to-action-button",
"--mod-coachmark-max-width",
"--mod-coachmark-media-height",
"--mod-coachmark-media-fixed-height",
"--mod-coachmark-media-min-height",
"--mod-coachmark-min-width",
"--mod-coachmark-padding",
Expand All @@ -47,39 +48,64 @@
"--mod-coachmark-width"
],
"component": [
"--spectrum-coach-mark-body-size",
"--spectrum-coach-mark-body-font-size",
"--spectrum-coach-mark-edge-to-content",
"--spectrum-coach-mark-maximum-width",
"--spectrum-coach-mark-media-height",
"--spectrum-coach-mark-media-minimum-height",
"--spectrum-coach-mark-minimum-width",
"--spectrum-coach-mark-pagination-body-size",
"--spectrum-coach-mark-pagination-body-font-size",
"--spectrum-coach-mark-pagination-color",
"--spectrum-coach-mark-pagination-text-to-bottom-edge",
"--spectrum-coach-mark-title-size",
"--spectrum-coach-mark-title-font-size",
"--spectrum-coach-mark-width",
"--spectrum-coachmark-body-to-footer",
"--spectrum-coachmark-border-radius",
"--spectrum-coachmark-border-size",
"--spectrum-coachmark-buttongroup-display",
"--spectrum-coachmark-buttongroup-mobile-display",
"--spectrum-coachmark-content-font-size",
"--spectrum-coachmark-content-font-weight",
"--spectrum-coachmark-header-to-body",
"--spectrum-coachmark-heading-to-action-button",
"--spectrum-coachmark-max-width",
"--spectrum-coachmark-media-fixed-height",
"--spectrum-coachmark-media-min-height",
"--spectrum-coachmark-menu-display",
"--spectrum-coachmark-menu-mobile-display"
"--spectrum-coachmark-menu-mobile-display",
"--spectrum-coachmark-min-width",
"--spectrum-coachmark-padding",
"--spectrum-coachmark-step-color",
"--spectrum-coachmark-step-font-size",
"--spectrum-coachmark-step-font-style",
"--spectrum-coachmark-step-text-font-weight",
"--spectrum-coachmark-step-text-line-height",
"--spectrum-coachmark-step-to-bottom",
"--spectrum-coachmark-title-color",
"--spectrum-coachmark-title-font-family",
"--spectrum-coachmark-title-font-size",
"--spectrum-coachmark-title-font-style",
"--spectrum-coachmark-title-text-font-weight",
"--spectrum-coachmark-title-text-line-height",
"--spectrum-coachmark-width"
],
"global": [
"--spectrum-body-color",
"--spectrum-body-line-height",
"--spectrum-body-sans-serif-font-style",
"--spectrum-body-sans-serif-font-weight",
"--spectrum-body-serif-font-style",
"--spectrum-border-width-100",
"--spectrum-corner-radius-100",
"--spectrum-heading-color",
"--spectrum-heading-line-height",
"--spectrum-heading-sans-serif-font-weight",
"--spectrum-heading-serif-font-style",
"--spectrum-line-height-200",
"--spectrum-sans-serif-font",
"--spectrum-spacing-100",
"--spectrum-spacing-200",
"--spectrum-spacing-300"
"--spectrum-spacing-300",
"--spectrum-title-line-height",
"--spectrum-title-sans-serif-font-weight",
"--spectrum-title-serif-font-style"
],
"passthroughs": [
"--mod-button-edge-to-visual-only",
Expand Down
Loading
Loading