Skip to content

Commit 08b3345

Browse files
cdransfcdransf
authored
feat(contextual-help): S2 migration (#3909)
* feat(contextual-help): S2 migration * fix(contextual-help): simplify link storybook controls * fix(contextual-help): remove duplicative stories from docs * fix(contextual-help): remove WHC property from changelog mods section * fix(contextual-help): mod names + min inline size property * fix(contextual-help): fix changeset typo + update formatting * fix(contextual-help): abstract out direct token references * fix(contextual-help): update metadata * fix(contextual-help): update border-radius passthrough * fix(contextual-help): remove unnecessary custom properties
1 parent 09f75d8 commit 08b3345

File tree

6 files changed

+179
-130
lines changed

6 files changed

+179
-130
lines changed

‎.changeset/legal-lands-warn.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
"@spectrum-css/contextualhelp": major
3+
---
4+
5+
#### S2 migration for contextual help
6+
7+
This migrates the contextual help component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.
8+
9+
Typographic and color tokens have been updated per design specifications.
10+
11+
All existing popover positioning variations are supported.
12+
13+
##### New custom properties
14+
15+
`--spectrum-contextual-help-body-color`
16+
`--spectrum-contextual-help-body-line-height`
17+
`--spectrum-contextual-help-body-sans-serif-font-family`
18+
`--spectrum-contextual-help-body-sans-serif-font-style`
19+
`--spectrum-contextual-help-body-sans-serif-font-weight`
20+
`--spectrum-contextual-help-title-color`
21+
`--spectrum-contextual-help-title-font-style`
22+
`--spectrum-contextual-help-title-font-weight`
23+
`--spectrum-contextual-help-title-line-height`
24+
`--spectrum-contextual-help-title-sans-serif-font-family`
25+
26+
##### New mods
27+
28+
`--mod-contextual-help-body-line-height`
29+
`--mod-contextual-help-body-sans-serif-font-family`
30+
`--mod-contextual-help-body-sans-serif-font-style`
31+
`--mod-contextual-help-body-sans-serif-font-weight`
32+
`--mod-contextual-help-body-size`
33+
`--mod-contextual-help-title-color`
34+
`--mod-contextual-help-title-font-style`
35+
`--mod-contextual-help-title-font-weight`
36+
`--mod-contextual-help-title-line-height`
37+
`--mod-contextual-help-title-sans-serif-font-family`
38+
`--mod-contextual-help-content-spacing`
39+
`--mod-contextual-help-heading-size`
40+
`--mod-contextual-help-link-spacing`
41+
`--mod-contextual-help-min-inline-size`
42+
`--mod-contextual-help-padding`
43+
`--mod-contextual-help-popover-maximum-width`
44+
45+
##### Removed mods
46+
47+
`--mod-contextual-help-title-sans-serif-font-family`
48+
`--mod-spectrum-contextual-help-body-size`
49+
`--mod-spectrum-contextual-help-content-spacing`
50+
`--mod-spectrum-contextual-help-heading-size`
51+
`--mod-spectrum-contextual-help-link-spacing`
52+
`--mod-spectrum-contextual-help-minimum-width`
53+
`--mod-spectrum-contextual-help-padding`
54+
`--mod-spectrum-contextual-help-popover-maximum-width`

‎components/contextualhelp/dist/metadata.json

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,63 @@
1010
],
1111
"modifiers": [
1212
"--mod-contextual-help-body-color",
13-
"--mod-contextual-help-heading-color",
14-
"--mod-spectrum-contextual-help-body-size",
15-
"--mod-spectrum-contextual-help-content-spacing",
16-
"--mod-spectrum-contextual-help-heading-size",
17-
"--mod-spectrum-contextual-help-link-spacing",
18-
"--mod-spectrum-contextual-help-minimum-width",
19-
"--mod-spectrum-contextual-help-padding",
20-
"--mod-spectrum-contextual-help-popover-maximum-width"
13+
"--mod-contextual-help-body-line-height",
14+
"--mod-contextual-help-body-sans-serif-font-family",
15+
"--mod-contextual-help-body-sans-serif-font-style",
16+
"--mod-contextual-help-body-sans-serif-font-weight",
17+
"--mod-contextual-help-body-size",
18+
"--mod-contextual-help-content-spacing",
19+
"--mod-contextual-help-heading-size",
20+
"--mod-contextual-help-link-spacing",
21+
"--mod-contextual-help-min-inline-size",
22+
"--mod-contextual-help-padding",
23+
"--mod-contextual-help-popover-maximum-width",
24+
"--mod-contextual-help-title-color",
25+
"--mod-contextual-help-title-font-style",
26+
"--mod-contextual-help-title-font-weight",
27+
"--mod-contextual-help-title-line-height",
28+
"--mod-contextual-help-title-sans-serif-font-family"
2129
],
2230
"component": [
31+
"--spectrum-contextual-help-body-color",
32+
"--spectrum-contextual-help-body-line-height",
33+
"--spectrum-contextual-help-body-sans-serif-font-family",
34+
"--spectrum-contextual-help-body-sans-serif-font-style",
35+
"--spectrum-contextual-help-body-sans-serif-font-weight",
2336
"--spectrum-contextual-help-body-size",
2437
"--spectrum-contextual-help-content-spacing",
38+
"--spectrum-contextual-help-link-spacing",
39+
"--spectrum-contextual-help-min-inline-size",
2540
"--spectrum-contextual-help-minimum-width",
41+
"--spectrum-contextual-help-padding",
42+
"--spectrum-contextual-help-title-color",
43+
"--spectrum-contextual-help-title-font-style",
44+
"--spectrum-contextual-help-title-font-weight",
45+
"--spectrum-contextual-help-title-line-height",
46+
"--spectrum-contextual-help-title-sans-serif-font-family",
2647
"--spectrum-contextual-help-title-size"
2748
],
2849
"global": [
2950
"--spectrum-body-color",
30-
"--spectrum-heading-color",
51+
"--spectrum-body-sans-serif-font-style",
52+
"--spectrum-body-sans-serif-font-weight",
53+
"--spectrum-corner-radius-large-default",
54+
"--spectrum-line-height-200",
55+
"--spectrum-sans-font-family-stack",
56+
"--spectrum-spacing-100",
3157
"--spectrum-spacing-300",
32-
"--spectrum-spacing-400"
58+
"--spectrum-spacing-400",
59+
"--spectrum-title-color",
60+
"--spectrum-title-line-height",
61+
"--spectrum-title-sans-serif-font-style",
62+
"--spectrum-title-sans-serif-font-weight"
63+
],
64+
"passthroughs": [
65+
"--mod-popover-animation-distance",
66+
"--mod-popover-corner-radius"
3367
],
34-
"passthroughs": [],
3568
"high-contrast": [
3669
"--highcontrast-contextual-help-body-color",
37-
"--highcontrast-contextual-help-heading-color"
70+
"--highcontrast-contextual-help-title-color"
3871
]
3972
}

‎components/contextualhelp/index.css

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Copyright 2024 Adobe. All rights reserved.
2+
* Copyright 2025 Adobe. All rights reserved.
33
*
44
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License. You may obtain a copy
@@ -11,42 +11,79 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14+
.spectrum-ContextualHelp {
15+
--spectrum-contextual-help-title-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
16+
--spectrum-contextual-help-title-font-weight: var(--spectrum-title-sans-serif-font-weight);
17+
--spectrum-contextual-help-title-font-style: var(--spectrum-title-sans-serif-font-style);
18+
--spectrum-contextual-help-title-line-height: var(--spectrum-title-line-height);
19+
20+
--spectrum-contextual-help-title-color: var(--spectrum-title-color);
21+
22+
--spectrum-contextual-help-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack);
23+
--spectrum-contextual-help-body-sans-serif-font-weight: var(--spectrum-body-sans-serif-font-weight);
24+
--spectrum-contextual-help-body-sans-serif-font-style: var(--spectrum-body-sans-serif-font-style);
25+
--spectrum-contextual-help-body-line-height: var(--spectrum-line-height-200);
26+
27+
--spectrum-contextual-help-body-color: var(--spectrum-body-color);
28+
29+
--spectrum-contextual-help-min-inline-size: var(--spectrum-contextual-help-minimum-width);
30+
--spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300);
31+
--spectrum-contextual-help-padding: var(--spectrum-spacing-400);
32+
33+
/* @passthrough start */
34+
--mod-popover-animation-distance: var(--spectrum-spacing-100);
35+
--mod-popover-corner-radius: var(--spectrum-corner-radius-large-default);
36+
/* @passthrough end */
37+
}
38+
1439
.spectrum-ContextualHelp {
1540
position: relative;
16-
min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width));
41+
min-inline-size: var(--mod-contextual-help-min-inline-size, var(--spectrum-contextual-help-min-inline-size));
1742
}
1843

1944
.spectrum-ContextualHelp-button {
2045
display: flex;
2146
}
2247

2348
.spectrum-ContextualHelp-popover {
24-
padding-block: var(--mod-spectrum-contextual-help-padding, var(--spectrum-spacing-400));
25-
padding-inline: var(--mod-spectrum-contextual-help-padding, var(--spectrum-spacing-400));
26-
font-size: var(--mod-spectrum-contextual-help-body-size, var(--spectrum-contextual-help-body-size));
49+
padding: var(--mod-contextual-help-padding, var(--spectrum-contextual-help-padding));
50+
font-size: var(--mod-contextual-help-body-size, var(--spectrum-contextual-help-body-size));
2751
color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-body-color)));
2852

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

3155
.spectrum-ContextualHelp-heading,
3256
.spectrum-ContextualHelp-body {
3357
margin: 0;
3458
}
3559

3660
.spectrum-ContextualHelp-heading {
37-
margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing));
38-
font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-title-size));
39-
color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-heading-color)));
61+
font-family: var(--mod-contextual-help-title-sans-serif-font-family, var(--spectrum-contextual-help-title-sans-serif-font-family));
62+
font-weight: var(--mod-contextual-help-title-font-weight, var(--spectrum-contextual-help-title-font-weight));
63+
font-size: var(--mod-contextual-help-heading-size, var(--spectrum-contextual-help-title-size));
64+
font-style: var(--mod-contextual-help-title-font-style, var(--spectrum-contextual-help-title-font-style));
65+
line-height: var(--mod-contextual-help-title-line-height, var(--spectrum-contextual-help-title-line-height));
66+
color: var(--highcontrast-contextual-help-title-color, var(--mod-contextual-help-title-color, var(--spectrum-contextual-help-title-color)));
67+
margin-block-end: var(--mod-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing));
68+
}
69+
70+
.spectrum-ContextualHelp-body {
71+
font-size: var(--mod-contextual-help-body-size, var(--spectrum-contextual-help-body-size));
72+
font-family: var(--mod-contextual-help-body-sans-serif-font-family, var(--spectrum-contextual-help-body-sans-serif-font-family));
73+
font-weight: var(--mod-contextual-help-body-sans-serif-font-weight, var(--spectrum-contextual-help-body-sans-serif-font-weight));
74+
font-style: var(--mod-contextual-help-body-sans-serif-font-style, var(--spectrum-contextual-help-body-sans-serif-font-style));
75+
line-height: var(--mod-contextual-help-body-line-height, var(--spectrum-contextual-help-body-line-height));
76+
color: var(--mod-contextual-help-body-color, var(--spectrum-contextual-help-body-color));
4077
}
4178
}
4279

4380
.spectrum-ContextualHelp-link {
44-
margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-spacing-300));
81+
margin-block-start: var(--mod-contextual-help-link-spacing, var(--spectrum-contextual-help-link-spacing));
4582
}
4683

4784
@media (forced-colors: active) {
4885
.spectrum-ContextualHelp {
49-
--highcontrast-contextual-help-heading-color: CanvasText;
86+
--highcontrast-contextual-help-title-color: CanvasText;
5087
--highcontrast-contextual-help-body-color: CanvasText;
5188
}
5289
}

0 commit comments

Comments
 (0)