Skip to content

feat(contextual-help): S2 migration #3909

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

Merged
cdransf merged 10 commits into from
Jun 20, 2025
Merged

feat(contextual-help): S2 migration #3909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ca6bd9e
feat(contextual-help): S2 migration
cdransf Jun 6, 2025
4bc9513
fix(contextual-help): simplify link storybook controls
cdransf Jun 9, 2025
592b6a1
fix(contextual-help): remove duplicative stories from docs
cdransf Jun 10, 2025
a05f95d
fix(contextual-help): remove WHC property from changelog mods section
cdransf Jun 11, 2025
21fcb07
fix(contextual-help): mod names + min inline size property
cdransf Jun 17, 2025
d6b893c
fix(contextual-help): fix changeset typo + update formatting
cdransf Jun 17, 2025
443dc96
fix(contextual-help): abstract out direct token references
cdransf Jun 17, 2025
e45203d
fix(contextual-help): update metadata
cdransf Jun 17, 2025
1949500
fix(contextual-help): update border-radius passthrough
cdransf Jun 17, 2025
ef68364
fix(contextual-help): remove unnecessary custom properties
cdransf Jun 20, 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
54 changes: 54 additions & 0 deletions .changeset/legal-lands-warn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
---
"@spectrum-css/contextualhelp": major
---

#### S2 migration for contextual help

This migrates the contextual help component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.

Typographic and color tokens have been updated per design specifications.

All existing popover positioning variations are supported.

##### New custom properties

`--spectrum-contextual-help-body-color`
`--spectrum-contextual-help-body-line-height`
`--spectrum-contextual-help-body-sans-serif-font-family`
`--spectrum-contextual-help-body-sans-serif-font-style`
`--spectrum-contextual-help-body-sans-serif-font-weight`
`--spectrum-contextual-help-title-color`
`--spectrum-contextual-help-title-font-style`
`--spectrum-contextual-help-title-font-weight`
`--spectrum-contextual-help-title-line-height`
`--spectrum-contextual-help-title-sans-serif-font-family`

##### New mods

`--mod-contextual-help-body-line-height`
`--mod-contextual-help-body-sans-serif-font-family`
`--mod-contextual-help-body-sans-serif-font-style`
`--mod-contextual-help-body-sans-serif-font-weight`
`--mod-contextual-help-body-size`
`--mod-contextual-help-title-color`
Comment thread
cdransf marked this conversation as resolved.
`--mod-contextual-help-title-font-style`
`--mod-contextual-help-title-font-weight`
`--mod-contextual-help-title-line-height`
`--mod-contextual-help-title-sans-serif-font-family`
`--mod-contextual-help-content-spacing`
`--mod-contextual-help-heading-size`
`--mod-contextual-help-link-spacing`
`--mod-contextual-help-min-inline-size`
`--mod-contextual-help-padding`
`--mod-contextual-help-popover-maximum-width`

##### Removed mods

`--mod-contextual-help-title-sans-serif-font-family`
`--mod-spectrum-contextual-help-body-size`
`--mod-spectrum-contextual-help-content-spacing`
`--mod-spectrum-contextual-help-heading-size`
`--mod-spectrum-contextual-help-link-spacing`
`--mod-spectrum-contextual-help-minimum-width`
`--mod-spectrum-contextual-help-padding`
`--mod-spectrum-contextual-help-popover-maximum-width`
57 changes: 45 additions & 12 deletions components/contextualhelp/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,63 @@
],
"modifiers": [
"--mod-contextual-help-body-color",
"--mod-contextual-help-heading-color",
"--mod-spectrum-contextual-help-body-size",
"--mod-spectrum-contextual-help-content-spacing",
"--mod-spectrum-contextual-help-heading-size",
"--mod-spectrum-contextual-help-link-spacing",
"--mod-spectrum-contextual-help-minimum-width",
"--mod-spectrum-contextual-help-padding",
"--mod-spectrum-contextual-help-popover-maximum-width"
"--mod-contextual-help-body-line-height",
"--mod-contextual-help-body-sans-serif-font-family",
"--mod-contextual-help-body-sans-serif-font-style",
"--mod-contextual-help-body-sans-serif-font-weight",
"--mod-contextual-help-body-size",
"--mod-contextual-help-content-spacing",
"--mod-contextual-help-heading-size",
"--mod-contextual-help-link-spacing",
"--mod-contextual-help-min-inline-size",
"--mod-contextual-help-padding",
"--mod-contextual-help-popover-maximum-width",
"--mod-contextual-help-title-color",
"--mod-contextual-help-title-font-style",
"--mod-contextual-help-title-font-weight",
"--mod-contextual-help-title-line-height",
"--mod-contextual-help-title-sans-serif-font-family"
],
"component": [
"--spectrum-contextual-help-body-color",
"--spectrum-contextual-help-body-line-height",
"--spectrum-contextual-help-body-sans-serif-font-family",
"--spectrum-contextual-help-body-sans-serif-font-style",
"--spectrum-contextual-help-body-sans-serif-font-weight",
"--spectrum-contextual-help-body-size",
"--spectrum-contextual-help-content-spacing",
"--spectrum-contextual-help-link-spacing",
"--spectrum-contextual-help-min-inline-size",
"--spectrum-contextual-help-minimum-width",
"--spectrum-contextual-help-padding",
"--spectrum-contextual-help-title-color",
"--spectrum-contextual-help-title-font-style",
"--spectrum-contextual-help-title-font-weight",
"--spectrum-contextual-help-title-line-height",
"--spectrum-contextual-help-title-sans-serif-font-family",
"--spectrum-contextual-help-title-size"
],
"global": [
"--spectrum-body-color",
"--spectrum-heading-color",
"--spectrum-body-sans-serif-font-style",
"--spectrum-body-sans-serif-font-weight",
"--spectrum-corner-radius-large-default",
"--spectrum-line-height-200",
"--spectrum-sans-font-family-stack",
"--spectrum-spacing-100",
"--spectrum-spacing-300",
"--spectrum-spacing-400"
"--spectrum-spacing-400",
"--spectrum-title-color",
"--spectrum-title-line-height",
"--spectrum-title-sans-serif-font-style",
"--spectrum-title-sans-serif-font-weight"
],
"passthroughs": [
"--mod-popover-animation-distance",
"--mod-popover-corner-radius"
],
"passthroughs": [],
"high-contrast": [
"--highcontrast-contextual-help-body-color",
"--highcontrast-contextual-help-heading-color"
"--highcontrast-contextual-help-title-color"
]
}
59 changes: 48 additions & 11 deletions components/contextualhelp/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -11,42 +11,79 @@
* governing permissions and limitations under the License.
*/

.spectrum-ContextualHelp {
--spectrum-contextual-help-title-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-contextual-help-title-font-weight: var(--spectrum-title-sans-serif-font-weight);
--spectrum-contextual-help-title-font-style: var(--spectrum-title-sans-serif-font-style);
--spectrum-contextual-help-title-line-height: var(--spectrum-title-line-height);

--spectrum-contextual-help-title-color: var(--spectrum-title-color);

--spectrum-contextual-help-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-contextual-help-body-sans-serif-font-weight: var(--spectrum-body-sans-serif-font-weight);
--spectrum-contextual-help-body-sans-serif-font-style: var(--spectrum-body-sans-serif-font-style);
--spectrum-contextual-help-body-line-height: var(--spectrum-line-height-200);

--spectrum-contextual-help-body-color: var(--spectrum-body-color);
Comment thread
cdransf marked this conversation as resolved.

--spectrum-contextual-help-min-inline-size: var(--spectrum-contextual-help-minimum-width);
--spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300);
--spectrum-contextual-help-padding: var(--spectrum-spacing-400);

/* @passthrough start */
--mod-popover-animation-distance: var(--spectrum-spacing-100);
--mod-popover-corner-radius: var(--spectrum-corner-radius-large-default);
/* @passthrough end */
}
Comment thread
cdransf marked this conversation as resolved.

.spectrum-ContextualHelp {
position: relative;
min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width));
min-inline-size: var(--mod-contextual-help-min-inline-size, var(--spectrum-contextual-help-min-inline-size));
}

.spectrum-ContextualHelp-button {
display: flex;
}

.spectrum-ContextualHelp-popover {
padding-block: var(--mod-spectrum-contextual-help-padding, var(--spectrum-spacing-400));
padding-inline: var(--mod-spectrum-contextual-help-padding, var(--spectrum-spacing-400));
font-size: var(--mod-spectrum-contextual-help-body-size, var(--spectrum-contextual-help-body-size));
padding: var(--mod-contextual-help-padding, var(--spectrum-contextual-help-padding));
font-size: var(--mod-contextual-help-body-size, var(--spectrum-contextual-help-body-size));
color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-body-color)));

max-inline-size: var(--mod-spectrum-contextual-help-popover-maximum-width);
max-inline-size: var(--mod-contextual-help-popover-maximum-width);

.spectrum-ContextualHelp-heading,
.spectrum-ContextualHelp-body {
margin: 0;
}

.spectrum-ContextualHelp-heading {
margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing));
font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-title-size));
color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-heading-color)));
font-family: var(--mod-contextual-help-title-sans-serif-font-family, var(--spectrum-contextual-help-title-sans-serif-font-family));
font-weight: var(--mod-contextual-help-title-font-weight, var(--spectrum-contextual-help-title-font-weight));
font-size: var(--mod-contextual-help-heading-size, var(--spectrum-contextual-help-title-size));
font-style: var(--mod-contextual-help-title-font-style, var(--spectrum-contextual-help-title-font-style));
line-height: var(--mod-contextual-help-title-line-height, var(--spectrum-contextual-help-title-line-height));
color: var(--highcontrast-contextual-help-title-color, var(--mod-contextual-help-title-color, var(--spectrum-contextual-help-title-color)));
margin-block-end: var(--mod-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing));
}

.spectrum-ContextualHelp-body {
font-size: var(--mod-contextual-help-body-size, var(--spectrum-contextual-help-body-size));
font-family: var(--mod-contextual-help-body-sans-serif-font-family, var(--spectrum-contextual-help-body-sans-serif-font-family));
font-weight: var(--mod-contextual-help-body-sans-serif-font-weight, var(--spectrum-contextual-help-body-sans-serif-font-weight));
font-style: var(--mod-contextual-help-body-sans-serif-font-style, var(--spectrum-contextual-help-body-sans-serif-font-style));
line-height: var(--mod-contextual-help-body-line-height, var(--spectrum-contextual-help-body-line-height));
color: var(--mod-contextual-help-body-color, var(--spectrum-contextual-help-body-color));
}
}

Comment thread
cdransf marked this conversation as resolved.
.spectrum-ContextualHelp-link {
margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-spacing-300));
margin-block-start: var(--mod-contextual-help-link-spacing, var(--spectrum-contextual-help-link-spacing));
}

@media (forced-colors: active) {
.spectrum-ContextualHelp {
--highcontrast-contextual-help-heading-color: CanvasText;
--highcontrast-contextual-help-title-color: CanvasText;
--highcontrast-contextual-help-body-color: CanvasText;
}
}
Loading
Loading