diff --git a/.changeset/lemon-weeks-work.md b/.changeset/lemon-weeks-work.md
new file mode 100644
index 00000000000..3ac5745d3eb
--- /dev/null
+++ b/.changeset/lemon-weeks-work.md
@@ -0,0 +1,11 @@
+---
+"@spectrum-css/tokens": minor
+---
+
+#### Tokens
+
+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.
+
+In `tokens/custom/large-vars.css`: `--spectrum-coachmark-action-menu-vertical-offset`.
+
+In `tokens/custom/medium-vars.css`: `--spectrum-coachmark-action-menu-vertical-offset`.
diff --git a/.changeset/nice-cows-shout.md b/.changeset/nice-cows-shout.md
new file mode 100644
index 00000000000..fbbcb96fb06
--- /dev/null
+++ b/.changeset/nice-cows-shout.md
@@ -0,0 +1,62 @@
+---
+"@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-heading-serif-font-style | --spectrum-title-serif-font-style |
+| --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 |
+
+### New properties
+
+```css
+--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-color
+--spectrum-coach-mark-pagination-text-to-bottom-edge
+--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-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
+```
+
+## 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 `Fixed image height`. The class is conditionally added within the `hasImage` block and, as such, will only impact rendering when `hasImage` is also `true`.
diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json
index a6bbae0715e..a814cca94ed 100644
--- a/components/coachmark/dist/metadata.json
+++ b/components/coachmark/dist/metadata.json
@@ -10,12 +10,14 @@
".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",
".spectrum-CoachMark-title"
],
"modifiers": [
+ "--mod-coachmark-action-menu-vertical-offset",
"--mod-coachmark-body-to-footer",
"--mod-coachmark-border-radius",
"--mod-coachmark-border-size",
@@ -27,8 +29,9 @@
"--mod-coachmark-content-line-height",
"--mod-coachmark-header-to-body",
"--mod-coachmark-heading-to-action-button",
+ "--mod-coachmark-image-to-heading",
"--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",
@@ -47,39 +50,67 @@
"--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-action-menu-vertical-offset",
+ "--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-image-to-heading",
+ "--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-large-default",
"--spectrum-heading-color",
- "--spectrum-heading-line-height",
- "--spectrum-heading-sans-serif-font-weight",
- "--spectrum-heading-serif-font-style",
+ "--spectrum-line-height-200",
+ "--spectrum-medium-font-weight",
+ "--spectrum-popover-content-area-spacing",
"--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",
diff --git a/components/coachmark/index.css b/components/coachmark/index.css
index 0ade95bfbec..5c09fe2e03b 100644
--- a/components/coachmark/index.css
+++ b/components/coachmark/index.css
@@ -1,5 +1,5 @@
/*!
- * Copyright 2024 Adobe. All rights reserved.
+ * Copyright 2025 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
@@ -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-image-to-heading: var(--spectrum-coach-mark-edge-to-content);
+ --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-medium-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);
@@ -22,17 +53,18 @@
--mod-popover-content-area-spacing: 0;
--mod-button-edge-to-visual-only: 9px;
/* @passthrough end */
+}
+.spectrum-CoachMark {
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;
@@ -42,11 +74,16 @@
border-start-end-radius: inherit;
}
+.spectrum-CoachMark-image-wrapper--fixedHeight {
+ 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));
@@ -57,34 +94,37 @@
.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-image-to-heading, var(--spectrum-coachmark-image-to-heading));
display: flex;
justify-content: space-between;
- align-items: center;
- margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-spacing-200));
+ align-items: flex-start;
+ 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 {
+ --mod-popover-content-area-spacing: var(--spectrum-popover-content-area-spacing);
+
white-space: nowrap;
z-index: 1;
margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-spacing-300));
+ margin-block: var(--mod-coachmark-action-menu-vertical-offset, var(--spectrum-coachmark-action-menu-vertical-offset));
}
/* @deprecated not used currently in demos or by SWC */
@@ -99,10 +139,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));
@@ -113,20 +153,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;
}
diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js
index 975039f95b3..4df335c5bf4 100644
--- a/components/coachmark/stories/coachmark.stories.js
+++ b/components/coachmark/stories/coachmark.stories.js
@@ -4,7 +4,11 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
import { CoachMarkGroup } from "./coachmark.test.js";
-import { CoachmarkMenuStatesTemplate, Template } from "./template.js";
+import {
+ Template,
+ CoachmarkMenuStatesTemplate,
+ CoachMarkMediaOptionsTemplate,
+} from "./template.js";
/**
* The coach mark component can be used to bring added attention to specific parts of a page, like during a tour. It is a separate component from [the coach indicator](/docs/components-coach-indicator--docs) and similar to [a popover](/docs/components-purpose--docs).
@@ -14,7 +18,7 @@ export default {
component: "CoachMark",
argTypes: {
hasActionMenu: {
- name: "ActionMenu",
+ name: "Has action menu",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
@@ -32,7 +36,7 @@ export default {
control: "boolean",
},
hasImage: {
- name: "Image",
+ name: "Has image",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
@@ -40,12 +44,42 @@ export default {
},
control: "boolean",
},
+ imageIsFixedHeight: {
+ name: "Fixed image height",
+ description: "By default this displays an image with a 4:3 aspect ratio.",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "Component",
+ },
+ if: { arg: "hasImage", truthy: true },
+ },
+ imageSource: {
+ name: "Image source",
+ type: { name: "string" },
+ table: {
+ type: { summary: "string" },
+ category: "Content",
+ },
+ control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" },
+ if: { arg: "hasImage", truthy: true },
+ },
+ title: {
+ name: "Title text",
+ type: { name: "string" },
+ table: {
+ type: { summary: "string" },
+ category: "Content",
+ },
+ },
},
args: {
+ title: "Coach mark title",
rootClass: "spectrum-CoachMark",
- hasActionMenu: true,
+ hasActionMenu: false,
hasPagination: true,
- hasImage: false,
+ hasImage: true,
+ imageIsFixedHeight: false,
},
parameters: {
actions: {
@@ -62,52 +96,91 @@ export default {
metadata,
docs: {
story: {
- height: "300px",
- }
- }
+ height: "525px",
+ },
+ },
},
};
export const Default = CoachMarkGroup.bind({});
Default.title = "Standard";
Default.tags = ["!autodocs"];
-Default.args = {};
+Default.parameters = {};
/**
- * Coach marks are temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour.
+ * Coach marks are temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour. They may contain images or media that relate to their content, such as demonstrations of gestures, the UI being used, or illustrations. All coach marks can have any combination of action menu and media.
*/
-export const Standard = CoachmarkMenuStatesTemplate.bind({});
+export const Standard = Template.bind({});
Standard.storyName = "Default";
Standard.tags = ["!dev"];
Standard.parameters = {
chromatic: {
disableSnapshot: true,
},
+ docs: {
+ story: {
+ height: "475px",
+ },
+ },
+};
+Standard.args = {
+ imageSource: "example-card-landscape.png",
};
-/** Coach marks can contain images or media that relate to their content, such as demonstrations of gestures, the UI being used, or illustrations. */
-export const WithMedia = Template.bind({});
-WithMedia.tags = ["!dev"];
-WithMedia.args = {
- hasImage: true,
+export const StandardNoMedia = Template.bind({});
+StandardNoMedia.storyName = "Default, no media";
+StandardNoMedia.tags = ["!dev"];
+StandardNoMedia.args = {
+ hasImage: false,
};
-WithMedia.parameters = {
+StandardNoMedia.parameters = {
chromatic: {
disableSnapshot: true,
},
docs: {
story: {
- height: "500px",
+ height: "250px",
},
},
};
+/** Images and media have a minimum height and can grow with the parent component. Fixed height media is constrained to a 4:3 aspect ratio by applying the `spectrum-CoachMark-image-wrapper--fixedHeight` class. When this fixed height class is used, the height can be customized using the modifiable custom property `--mod-coachmark-media-fixed-height`. */
+export const MediaOptions = CoachMarkMediaOptionsTemplate.bind({});
+MediaOptions.tags = ["!dev"];
+MediaOptions.args = {
+ imageSource: "example-card-portrait.png",
+};
+MediaOptions.parameters = {
+ docs: {
+ story: {
+ height: "725px",
+ },
+ },
+ chromatic: {
+ disableSnapshot: true,
+ },
+};
+MediaOptions.storyName = "Media options";
+
+/** The action menu, if enabled, is shown in line with the title. */
+export const WithActionMenu = CoachmarkMenuStatesTemplate.bind({});
+WithActionMenu.storyName = "With action menu";
+WithActionMenu.tags = ["!dev"];
+WithActionMenu.args = {
+ hasActionMenu: true,
+};
+WithActionMenu.parameters = {
+ chromatic: {
+ disableSnapshot: true,
+ },
+};
+
// ********* VRT ONLY ********* //
export const WithForcedColors = CoachMarkGroup.bind({});
WithForcedColors.tags = ["!autodocs", "!dev"];
WithForcedColors.parameters = {
chromatic: {
forcedColors: "active",
- modes: disableDefaultModes
+ modes: disableDefaultModes,
},
};
diff --git a/components/coachmark/stories/coachmark.test.js b/components/coachmark/stories/coachmark.test.js
index c699803e554..49b6e422df8 100644
--- a/components/coachmark/stories/coachmark.test.js
+++ b/components/coachmark/stories/coachmark.test.js
@@ -12,7 +12,9 @@ export const TestTemplate = (args, context) => {
...args.customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
style=${styleMap(args.customStyles)}
- >${CoachContainer(args, context)}
+ >
+ ${CoachContainer(args, context)}
+
`;
};
@@ -28,50 +30,46 @@ export const CoachMarkGroup = Variants({
testHeading: "Default",
hasActionMenu: false,
hasPagination: false,
- wrapperStyles: {
- "background-color": "var(--spectrum-gray-50, white)",
- },
},
{
testHeading: "With media",
hasActionMenu: false,
hasPagination: false,
hasImage: true,
- wrapperStyles: {
- "background-color": "var(--spectrum-gray-50, white)"
- },
+ },
+ {
+ testHeading: "With media + fixed height",
+ hasActionMenu: false,
+ hasPagination: false,
+ hasImage: true,
+ imageIsFixedHeight: true,
},
{
testHeading: "With action menu",
hasPagination: false,
+ hasActionMenu: true,
isOpen: true,
- wrapperStyles: {
- "background-color": "var(--spectrum-gray-50, white)"
- },
},
{
testHeading: "With action menu + media",
hasPagination: false,
isOpen: true,
hasImage: true,
- wrapperStyles: {
- "background-color": "var(--spectrum-gray-50, white)"
- },
+ hasActionMenu: true,
},
{
testHeading: "With pagination",
hasActionMenu: false,
- wrapperStyles: {
- "background-color": "var(--spectrum-gray-50, white)"
- },
},
{
testHeading: "With pagination + media",
hasActionMenu: false,
hasImage: true,
- wrapperStyles: {
- "background-color": "var(--spectrum-gray-50, white)"
- },
+ },
+ {
+ testHeading: "With a long title",
+ title: "Coach mark title with longer text that wraps to see how icon should align",
+ hasActionMenu: true,
},
],
stateData: [],
diff --git a/components/coachmark/stories/template.js b/components/coachmark/stories/template.js
index 5a3f967ce37..b3402c8ca6c 100644
--- a/components/coachmark/stories/template.js
+++ b/components/coachmark/stories/template.js
@@ -10,60 +10,83 @@ import { when } from "lit/directives/when.js";
import "../index.css";
-export const CoachContainer = ({
- rootClass = "spectrum-CoachMark",
- hasActionMenu = false,
- hasPagination,
- hasImage,
- title = "Try playing with a pixel brush",
- content = "Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.",
- currentStep = 2,
- totalStepCount = 8,
- isOpen = false,
-} = {}, context = {}) => {
+export const CoachContainer = (
+ {
+ rootClass = "spectrum-CoachMark",
+ hasActionMenu = false,
+ hasPagination,
+ hasImage,
+ imageIsFixedHeight,
+ imageSource,
+ title = "Coach mark title",
+ content = "Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.",
+ currentStep = 2,
+ totalStepCount = 8,
+ isOpen = false,
+ } = {},
+ context = {},
+) => {
const { globals = {} } = context;
const scale = globals.scale ?? "medium";
return html`
- ${when(hasImage, () => html`
-
-
-
+
+
${content}
+
+ ${content}
+
`;
};
/* Displays open and closed action menus in a single story. */
-export const CoachmarkMenuStatesTemplate = (args, context) => Container({
- withBorder: false,
- withHeading: false,
- wrapperStyles: {
- columnGap: "100px",
- rowGap: "200px",
- },
- content: [
- Container({
- withBorder: false,
- heading: "With action menu",
- content: Template({...args, isOpen: true}, context),
- }),
- Container({
- withBorder: false,
- heading: "Without action menu",
- content: Template({...args, hasActionMenu: false}, context),
- })
- ]
-});
+export const CoachmarkMenuStatesTemplate = (args, context) =>
+ Container({
+ withBorder: false,
+ withHeading: false,
+ wrapperStyles: {
+ columnGap: "100px",
+ rowGap: "200px",
+ },
+ content: [
+ Container({
+ withBorder: false,
+ heading: "With action menu (closed) and media",
+ content: Template(
+ {
+ ...args,
+ customStyles: {
+ "height": "265px"
+ }
+ },
+ context,
+ ),
+ }),
+ Container({
+ withBorder: false,
+ heading: "Action menu, without media",
+ content: Template(
+ {
+ ...args,
+ hasImage: false,
+ hasActionMenu: true,
+ isOpen: true,
+ customStyles: {
+ "height": "260px"
+ }
+ },
+ context,
+ ),
+ }),
+ ],
+ });
+
+/* Displays fixed and minimum height images in a single story. */
+export const CoachMarkMediaOptionsTemplate = (args, context) =>
+ Container({
+ withBorder: false,
+ withHeading: false,
+ wrapperStyles: {
+ columnGap: "100px",
+ rowGap: "200px",
+ },
+ content: [
+ Container({
+ withBorder: false,
+ heading: "With fixed height",
+ content: Template(
+ {
+ ...args,
+ hasImage: true,
+ imageIsFixedHeight: true,
+ imageSource: "example-card-portrait.png",
+ customStyles: {
+ "height": "315px"
+ }
+ },
+ context,
+ ),
+ }),
+ Container({
+ withBorder: false,
+ heading: "Without fixed height",
+ content: Template(
+ {
+ ...args,
+ imageIsFixedHeight: false,
+ customStyles: {
+ "height": "700px"
+ }
+ },
+ context,
+ ),
+ }),
+ ],
+ });
diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css
index cdc0bc73bf9..a1fce8fda04 100644
--- a/tokens/custom/large-vars.css
+++ b/tokens/custom/large-vars.css
@@ -43,6 +43,7 @@
--spectrum-coach-indicator-gap: 8px;
--spectrum-coach-indicator-ring-diameter: 20px;
--spectrum-coach-indicator-quiet-ring-diameter: 10px;
+ --spectrum-coachmark-action-menu-vertical-offset: -6px;
--spectrum-coachmark-buttongroup-display: none;
--spectrum-coachmark-buttongroup-mobile-display: flex;
--spectrum-coachmark-menu-display: none;
diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css
index 817e26b2d5d..f1238df765c 100644
--- a/tokens/custom/medium-vars.css
+++ b/tokens/custom/medium-vars.css
@@ -43,6 +43,7 @@
--spectrum-coach-indicator-gap: 6px;
--spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
--spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
+ --spectrum-coachmark-action-menu-vertical-offset: -4px;
--spectrum-coachmark-buttongroup-display: flex;
--spectrum-coachmark-buttongroup-mobile-display: none;
--spectrum-coachmark-menu-display: inline-flex;