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 3 commits into
base: spectrum-two
Choose a base branch
from
Open

feat(coachmark): S2 migration #3412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a596d85
feat(coachmark): s2 migration
cdransf Jan 2, 2025
7a29196
fix(coachmark): sets required padding for action menu popover child
cdransf Mar 5, 2025
96afd01
fix(coachmark): enforces consistent spacing from image to header and …
cdransf Mar 12, 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
62 changes: 62 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,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`.
71 changes: 40 additions & 31 deletions components/badge/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
import { Container, getRandomId } from "@spectrum-css/preview/decorators";
import { html } from "lit";
Expand All @@ -8,18 +9,22 @@ import { when } from "lit/directives/when.js";

import "../index.css";

export const Template = ({
rootClass = "spectrum-Badge",
size = "m",
label,
iconName,
iconSet = "workflow",
variant = "neutral",
fixed,
customStyles = {},
customClasses = [],
id = getRandomId("badge"),
} = {}, context = {}) => {
export const Template = (
{
rootClass = "spectrum-Badge",
size = "m",
label,
tag = "div",
iconName,
iconSet = "workflow",
variant = "neutral",
fixed,
customStyles = {},
customClasses = [],
id = getRandomId("badge"),
} = {},
context = {},
) => {
return html`
<div
class=${classMap({
Expand All @@ -34,28 +39,32 @@ export const Template = ({
style=${styleMap(customStyles)}
>
${when(iconName, () =>
Icon({
iconName,
setName: iconSet,
customClasses: [
...(typeof label === "undefined"
? [`${rootClass}-icon--no-label`]
: []),
`${rootClass}-icon`,
],
}, context),
Icon(
{
iconName,
setName: iconSet,
customClasses: [
...(typeof label === "undefined"
? [`${rootClass}-icon--no-label`]
: []),
`${rootClass}-icon`,
],
},
context,
),
)}
${when(label, () => html`<div class="${rootClass}-label">${label}</div>`)}
${when(label, () => html`${unsafeHTML(`<${tag} class="${rootClass}-label">${label}</${tag}>`)}`)}
</div>
`;
};

/* Displays icon-only, text-only, and icon-and-text badge options. */
export const ContentOptions = (args, context) => Container({
withBorder: false,
content: [
Template(args, context),
Template({ ...args, iconName: undefined }, context),
Template({ ...args, label: undefined }, context),
]
});
export const ContentOptions = (args, context) =>
Container({
withBorder: false,
content: [
Template(args, context),
Template({ ...args, iconName: undefined }, context),
Template({ ...args, label: undefined }, context),
],
});
49 changes: 40 additions & 9 deletions components/coachmark/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
".spectrum-CoachMark-content",
".spectrum-CoachMark-footer",
".spectrum-CoachMark-header",
".spectrum-CoachMark-header:has(.spectrum-CoachMark-action-menu)",
".spectrum-CoachMark-image",
".spectrum-CoachMark-image-wrapper",
".spectrum-CoachMark-image-wrapper--fixedHeight",
".spectrum-CoachMark-menu",
".spectrum-CoachMark-menu--mobile",
".spectrum-CoachMark-step",
Expand All @@ -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",
Expand All @@ -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-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-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-popover-content-area-spacing",
"--spectrum-sans-serif-font",
"--spectrum-spacing-100",
"--spectrum-spacing-200",
"--spectrum-spacing-300"
"--spectrum-spacing-300",
"--spectrum-spacing-75",
"--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