Skip to content

Commit beee947

Browse files
aramos-adobearamos-adobe
authored
feat(helptext): S2 migration (#3628)
* feat(helptext): migration WIP * feat(helptext): adding mod for alignment * feat(helptext): adding changeset * feat(helptext): updating changeset * chore(helptext): restore some metadata files * feat(helptext): migration WIP * feat(helptext): adding mod for alignment * chore(helptext): restore some metadata files * feat(helptext): restoring new s2 changes and remaining metadata files * chore(helptext): restoring metadata files again * chore(helptext): adding metadata files * chore(helptext): please metadata dont come back 😅 * chore(helptext): removing button metadata * feat(helptext): restructure css file * chore(helptext): remove some metadata files * feat(helptext): final tweaks * chore(helptext): restoring metadata files
1 parent 19ca328 commit beee947

File tree

5 files changed

+109
-67
lines changed

5 files changed

+109
-67
lines changed

‎.changeset/wild-lemons-spend.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
"@spectrum-css/helptext": major
3+
---
4+
5+
### Helptext S2 Migration
6+
7+
The helptext S2 component has some updated spacing and typography tokens. The error message validation icon has also been updated.
8+
9+
#### New mods
10+
11+
`--mod-helptext-font-family`
12+
`--mod-helptext-font-style`
13+
`--mod-helptext-font-weight`
14+
`--mod-helptext-top-edge-to-workflow-icon`
15+
`--mod-helptext-bottom-edge-to-workflow-icon`
16+
17+
#### Renamed mods
18+
19+
`--mod-helptext-bottom-to-workflow-icon` >> `--mod-helptext-edge-to-workflow-icon`
20+
21+
#### Deprecated tokens
22+
23+
`--spectrum-help-text-top-to-workflow-icon-small`
24+
`--spectrum-help-text-top-to-workflow-icon-medium`
25+
`--spectrum-help-text-top-to-workflow-icon-large`
26+
`--spectrum-help-text-top-to-workflow-icon-extra-large`

‎components/helptext/dist/metadata.json

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,63 +14,76 @@
1414
".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text",
1515
".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon",
1616
".spectrum-HelpText.spectrum-HelpText--sizeL",
17-
".spectrum-HelpText.spectrum-HelpText--sizeM",
1817
".spectrum-HelpText.spectrum-HelpText--sizeS",
1918
".spectrum-HelpText.spectrum-HelpText--sizeXL",
2019
".spectrum-HelpText:lang(ja)",
2120
".spectrum-HelpText:lang(ko)",
2221
".spectrum-HelpText:lang(zh)"
2322
],
2423
"modifiers": [
24+
"--mod-helptext-bottom-edge-to-workflow-icon",
2525
"--mod-helptext-bottom-to-text",
26-
"--mod-helptext-bottom-to-workflow-icon",
2726
"--mod-helptext-content-color-default",
27+
"--mod-helptext-font-family",
2828
"--mod-helptext-font-size",
29+
"--mod-helptext-font-style",
30+
"--mod-helptext-font-weight",
2931
"--mod-helptext-icon-color-default",
3032
"--mod-helptext-icon-size",
3133
"--mod-helptext-line-height",
3234
"--mod-helptext-line-height-cjk",
3335
"--mod-helptext-min-height",
3436
"--mod-helptext-text-to-visual",
35-
"--mod-helptext-top-to-text",
36-
"--mod-helptext-top-to-workflow-icon"
37+
"--mod-helptext-top-edge-to-workflow-icon",
38+
"--mod-helptext-top-to-text"
3739
],
3840
"component": [
39-
"--spectrum-help-text-top-to-workflow-icon-extra-large",
40-
"--spectrum-help-text-top-to-workflow-icon-large",
41-
"--spectrum-help-text-top-to-workflow-icon-medium",
42-
"--spectrum-help-text-top-to-workflow-icon-small",
4341
"--spectrum-helptext-bottom-to-text",
44-
"--spectrum-helptext-bottom-to-workflow-icon",
4542
"--spectrum-helptext-content-color-default",
43+
"--spectrum-helptext-edge-to-workflow-icon",
44+
"--spectrum-helptext-font-family",
4645
"--spectrum-helptext-font-size",
46+
"--spectrum-helptext-font-style",
47+
"--spectrum-helptext-font-weight",
4748
"--spectrum-helptext-icon-color-default",
4849
"--spectrum-helptext-icon-size",
50+
"--spectrum-helptext-line-height",
4951
"--spectrum-helptext-min-height",
5052
"--spectrum-helptext-text-to-visual",
51-
"--spectrum-helptext-top-to-text",
52-
"--spectrum-helptext-top-to-workflow-icon"
53+
"--spectrum-helptext-top-to-text"
5354
],
5455
"global": [
5556
"--spectrum-cjk-line-height-100",
5657
"--spectrum-component-bottom-to-text-100",
5758
"--spectrum-component-bottom-to-text-200",
59+
"--spectrum-component-bottom-to-text-300",
5860
"--spectrum-component-bottom-to-text-75",
5961
"--spectrum-component-height-100",
6062
"--spectrum-component-height-200",
63+
"--spectrum-component-height-300",
6164
"--spectrum-component-height-75",
6265
"--spectrum-component-top-to-text-100",
6366
"--spectrum-component-top-to-text-200",
67+
"--spectrum-component-top-to-text-300",
6468
"--spectrum-component-top-to-text-75",
69+
"--spectrum-component-top-to-workflow-icon-100",
70+
"--spectrum-component-top-to-workflow-icon-200",
71+
"--spectrum-component-top-to-workflow-icon-300",
72+
"--spectrum-component-top-to-workflow-icon-75",
73+
"--spectrum-default-font-style",
6574
"--spectrum-disabled-content-color",
6675
"--spectrum-font-size-100",
6776
"--spectrum-font-size-200",
77+
"--spectrum-font-size-300",
6878
"--spectrum-font-size-75",
6979
"--spectrum-line-height-100",
70-
"--spectrum-negative-color-900",
80+
"--spectrum-negative-content-color-default",
7181
"--spectrum-neutral-subdued-content-color-default",
82+
"--spectrum-regular-font-weight",
83+
"--spectrum-sans-font-family-stack",
7284
"--spectrum-text-to-visual-100",
7385
"--spectrum-text-to-visual-200",
86+
"--spectrum-text-to-visual-300",
7487
"--spectrum-text-to-visual-75",
7588
"--spectrum-workflow-icon-size-100",
7689
"--spectrum-workflow-icon-size-200",

‎components/helptext/index.css

Lines changed: 51 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -11,99 +11,85 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
@media (forced-colors: active) {
15-
.spectrum-HelpText {
16-
--highcontrast-helptext-content-color-default: CanvasText;
17-
--highcontrast-helptext-icon-color-default: CanvasText;
18-
19-
forced-color-adjust: none;
14+
.spectrum-HelpText {
15+
/* Spacing */
16+
--spectrum-helptext-min-height: var(--spectrum-component-height-100);
17+
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100);
18+
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100);
19+
--spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-100);
20+
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
21+
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
22+
23+
/* Typpography */
24+
--spectrum-helptext-font-size: var(--spectrum-font-size-100);
25+
--spectrum-helptext-font-family: var(--spectrum-sans-font-family-stack);
26+
--spectrum-helptext-font-style: var(--spectrum-default-font-style);
27+
--spectrum-helptext-line-height: var(--spectrum-line-height-100);
28+
--spectrum-helptext-font-weight: var(--spectrum-regular-font-weight);
2029

21-
.spectrum-HelpText-validationIcon,
22-
.spectrum-HelpText-text {
23-
forced-color-adjust: none;
24-
}
30+
&:lang(ja),
31+
&:lang(zh),
32+
&:lang(ko) {
33+
--mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100));
2534
}
26-
}
27-
28-
.spectrum-HelpText {
29-
--spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
30-
--spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
3135

3236
&.spectrum-HelpText--sizeS {
3337
--spectrum-helptext-min-height: var(--spectrum-component-height-75);
3438
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75);
3539
--spectrum-helptext-font-size: var(--spectrum-font-size-75);
3640
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
37-
--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small);
38-
--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
39-
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
40-
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
41-
}
42-
43-
&,
44-
&.spectrum-HelpText--sizeM {
45-
--spectrum-helptext-min-height: var(--spectrum-component-height-75);
46-
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100);
47-
--spectrum-helptext-font-size: var(--spectrum-font-size-75);
48-
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
49-
--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium);
50-
--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
41+
--spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-75);
5142
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
5243
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
5344
}
5445

5546
&.spectrum-HelpText--sizeL {
56-
--spectrum-helptext-min-height: var(--spectrum-component-height-100);
57-
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200);
58-
--spectrum-helptext-font-size: var(--spectrum-font-size-100);
59-
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100);
60-
--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large);
61-
--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
62-
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
63-
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
64-
}
65-
66-
&.spectrum-HelpText--sizeXL {
6747
--spectrum-helptext-min-height: var(--spectrum-component-height-200);
68-
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300);
48+
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200);
6949
--spectrum-helptext-font-size: var(--spectrum-font-size-200);
7050
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200);
71-
--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large);
72-
--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
51+
--spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-200);
7352
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200);
7453
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
7554
}
7655

56+
&.spectrum-HelpText--sizeXL {
57+
--spectrum-helptext-min-height: var(--spectrum-component-height-300);
58+
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300);
59+
--spectrum-helptext-font-size: var(--spectrum-font-size-300);
60+
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-300);
61+
--spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-300);
62+
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-300);
63+
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
64+
}
65+
66+
&,
7767
&.spectrum-HelpText--neutral {
7868
--spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
7969
--spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
8070
}
8171

8272
&.spectrum-HelpText--negative {
83-
--spectrum-helptext-content-color-default: var(--spectrum-negative-color-900);
84-
--spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900);
73+
--spectrum-helptext-content-color-default: var(--spectrum-negative-content-color-default);
74+
--spectrum-helptext-icon-color-default: var(--spectrum-negative-content-color-default);
8575
}
8676

8777
&.is-disabled {
8878
--spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color);
8979
--spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color);
9080
}
81+
}
9182

83+
.spectrum-HelpText {
9284
color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
9385
display: flex;
9486
font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size));
9587
min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height));
9688

97-
&:lang(ja),
98-
&:lang(zh),
99-
&:lang(ko) {
100-
--mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100));
101-
}
102-
10389
.spectrum-HelpText-validationIcon {
10490
margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual));
105-
padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon));
106-
padding-block-end: var(--mod-helptext-bottom-to-workflow-icon, var(--spectrum-helptext-bottom-to-workflow-icon));
91+
padding-block-start: var(--mod-helptext-top-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon));
92+
padding-block-end: var(--mod-helptext-bottom-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon));
10793
flex-shrink: 0;
10894
block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size));
10995
inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size));
@@ -112,9 +98,13 @@
11298
.spectrum-HelpText-text {
11399
padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text));
114100
padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text));
115-
line-height: var(--mod-helptext-line-height, var(--spectrum-line-height-100));
101+
line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height));
102+
font-family: var(--mod-helptext-font-family, var(--spectrum-helptext-font-family));
103+
font-style: var(--mod-helptext-font-style, var(--spectrum-helptext-font-style));
104+
font-weight: var(--mod-helptext-font-weight, var(--spectrum-helptext-font-weight));
116105
}
117106

107+
/* Variants -- Neutral, negative, disabled */
118108
&.spectrum-HelpText--neutral {
119109
.spectrum-HelpText-text {
120110
color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
@@ -145,3 +135,10 @@
145135
}
146136
}
147137
}
138+
139+
@media (forced-colors: active) {
140+
.spectrum-HelpText {
141+
--highcontrast-helptext-content-color-default: CanvasText;
142+
--highcontrast-helptext-icon-color-default: CanvasText;
143+
}
144+
}

‎components/helptext/stories/helptext.stories.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,9 @@ export const Sizing = (args, context) => Sizes({
9797
Sizing.storyName = "Sizing";
9898
Sizing.args = {
9999
variant: "negative",
100+
customStyles: {
101+
"--mod-helptext-align-text": "center",
102+
},
100103
};
101104
Sizing.tags = ["!dev"];
102105
Sizing.parameters = {

‎components/helptext/stories/template.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,10 @@ export const NegativeTemplate = (args, context) => Container({
8585
},
8686
content: Template({
8787
...args,
88-
hideIcon
88+
hideIcon,
89+
customStyles: {
90+
"--mod-helptext-align-text": "center",
91+
},
8992
}, context),
9093
}, context)
9194
)}`,

0 commit comments

Comments
 (0)