diff --git a/components/coachmark/index.css b/components/coachmark/index.css index 017f71a777..26e5ac77bc 100644 --- a/components/coachmark/index.css +++ b/components/coachmark/index.css @@ -47,7 +47,7 @@ --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); - --spectrun-coachmark-keyboard-shortcut-font-family: var(--spectrum-code-font-family); + --spectrum-coachmark-keyboard-shortcut-font-family: var(--spectrum-code-font-family); /* @passthrough start */ --mod-buttongroup-justify-content: flex-end; @@ -130,7 +130,7 @@ } .spectrum-CoachMark-shortcut { - font-family: var(--mod-coachmark-keyboard-shortcut-font-family, var(--spectrun-coachmark-keyboard-shortcut-font-family)); + font-family: var(--mod-coachmark-keyboard-shortcut-font-family, var(--spectrum-coachmark-keyboard-shortcut-font-family)); white-space: nowrap; } diff --git a/components/coachmark/metadata/metadata.json b/components/coachmark/metadata/metadata.json index 428e80f543..de2d6cae3f 100644 --- a/components/coachmark/metadata/metadata.json +++ b/components/coachmark/metadata/metadata.json @@ -74,6 +74,7 @@ "--spectrum-coachmark-content-font-weight", "--spectrum-coachmark-header-to-body", "--spectrum-coachmark-heading-to-action-button", + "--spectrum-coachmark-keyboard-shortcut-font-family", "--spectrum-coachmark-max-width", "--spectrum-coachmark-media-fixed-height", "--spectrum-coachmark-media-min-height", diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index a4ed2ade2d..e11a7881e1 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -112,6 +112,7 @@ export default { export const Default = CoachMarkGroup.bind({}); Default.tags = ["!autodocs"]; Default.args = { + title: "Coach mark title", image: "example-card-landscape.png", hasKeyboardShortcut: false, }; @@ -159,7 +160,7 @@ MediaStates.parameters = { }; /** Keyboard shortcuts may be shown in place of or below the action menu. */ -export const ShortCutStories = CoachmarkShortcutStatesTemplate.bind({}) +export const ShortCutStories = CoachmarkShortcutStatesTemplate.bind({}); ShortCutStories.tags = ["!dev"]; ShortCutStories.parameters = { chromatic: {