Skip to content

feat(helptext): S2 migration #3628

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
merged 20 commits into from
Apr 1, 2025
Merged

feat(helptext): S2 migration #3628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
427d6ba
feat(helptext): migration WIP
aramos-adobe Mar 17, 2025
f6b30dd
feat(helptext): adding mod for alignment
aramos-adobe Mar 17, 2025
873f411
feat(helptext): adding changeset
aramos-adobe Mar 17, 2025
4377178
feat(helptext): updating changeset
aramos-adobe Mar 17, 2025
d9af231
chore(helptext): restore some metadata files
aramos-adobe Mar 17, 2025
be8b913
feat(helptext): migration WIP
aramos-adobe Mar 17, 2025
110d763
feat(helptext): adding mod for alignment
aramos-adobe Mar 17, 2025
a3bf036
chore(helptext): restore some metadata files
aramos-adobe Mar 17, 2025
ef74d20
feat(helptext): restoring new s2 changes and remaining metadata files
aramos-adobe Mar 26, 2025
063e83b
chore(helptext): restoring metadata files again
aramos-adobe Mar 26, 2025
3c82765
chore(helptext): adding metadata files
aramos-adobe Mar 26, 2025
3474262
chore(helptext): please metadata dont come back 😅
aramos-adobe Mar 26, 2025
3dd599e
chore(helptext): removing button metadata
aramos-adobe Mar 26, 2025
bd31934
Merge branch 'spectrum-two' into aramos-adobe/css709-helptext-s2-migr…
aramos-adobe Mar 27, 2025
16aef51
feat(helptext): restructure css file
aramos-adobe Mar 28, 2025
098b76b
Merge branch 'aramos-adobe/css709-helptext-s2-migration' of https://g…
aramos-adobe Mar 28, 2025
1318045
chore(helptext): remove some metadata files
aramos-adobe Mar 31, 2025
66013cc
feat(helptext): final tweaks
aramos-adobe Apr 1, 2025
2d0d659
chore(helptext): restoring metadata files
aramos-adobe Apr 1, 2025
f7354ee
Merge branch 'spectrum-two' into aramos-adobe/css709-helptext-s2-migr…
aramos-adobe Apr 1, 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
26 changes: 26 additions & 0 deletions .changeset/wild-lemons-spend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
"@spectrum-css/helptext": major
---

### Helptext S2 Migration

The helptext S2 component has some updated spacing and typography tokens. The error message validation icon has also been updated.
Comment on lines +5 to +7
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only because we just talked about detailed changesets with SWC, should we list out any of the new or renamed mods created during this work? We were doing that back in the fall, but I think we got away from it after we had been focused on foundations for so long! Looks like it's probably only 3 new mods:

"--mod-helptext-font-family",
"--mod-helptext-font-style",
"--mod-helptext-font-weight",

and then one renamed:
"--mod-helptext-bottom-to-workflow-icon" >> "--mod-helptext-edge-to-workflow-icon",

You'd know better than me on those! It's up to you, I won't let it block my approval.


#### New mods

`--mod-helptext-font-family`
`--mod-helptext-font-style`
`--mod-helptext-font-weight`
`--mod-helptext-top-edge-to-workflow-icon`
`--mod-helptext-bottom-edge-to-workflow-icon`

#### Renamed mods

`--mod-helptext-bottom-to-workflow-icon` >> `--mod-helptext-edge-to-workflow-icon`

#### Deprecated tokens

`--spectrum-help-text-top-to-workflow-icon-small`
`--spectrum-help-text-top-to-workflow-icon-medium`
`--spectrum-help-text-top-to-workflow-icon-large`
`--spectrum-help-text-top-to-workflow-icon-extra-large`
37 changes: 25 additions & 12 deletions components/helptext/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,63 +14,76 @@
".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text",
".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon",
".spectrum-HelpText.spectrum-HelpText--sizeL",
".spectrum-HelpText.spectrum-HelpText--sizeM",
".spectrum-HelpText.spectrum-HelpText--sizeS",
".spectrum-HelpText.spectrum-HelpText--sizeXL",
".spectrum-HelpText:lang(ja)",
".spectrum-HelpText:lang(ko)",
".spectrum-HelpText:lang(zh)"
],
"modifiers": [
"--mod-helptext-bottom-edge-to-workflow-icon",
"--mod-helptext-bottom-to-text",
"--mod-helptext-bottom-to-workflow-icon",
"--mod-helptext-content-color-default",
"--mod-helptext-font-family",
"--mod-helptext-font-size",
"--mod-helptext-font-style",
"--mod-helptext-font-weight",
"--mod-helptext-icon-color-default",
"--mod-helptext-icon-size",
"--mod-helptext-line-height",
"--mod-helptext-line-height-cjk",
"--mod-helptext-min-height",
"--mod-helptext-text-to-visual",
"--mod-helptext-top-to-text",
"--mod-helptext-top-to-workflow-icon"
"--mod-helptext-top-edge-to-workflow-icon",
"--mod-helptext-top-to-text"
],
"component": [
"--spectrum-help-text-top-to-workflow-icon-extra-large",
"--spectrum-help-text-top-to-workflow-icon-large",
"--spectrum-help-text-top-to-workflow-icon-medium",
"--spectrum-help-text-top-to-workflow-icon-small",
"--spectrum-helptext-bottom-to-text",
"--spectrum-helptext-bottom-to-workflow-icon",
"--spectrum-helptext-content-color-default",
"--spectrum-helptext-edge-to-workflow-icon",
"--spectrum-helptext-font-family",
"--spectrum-helptext-font-size",
"--spectrum-helptext-font-style",
"--spectrum-helptext-font-weight",
"--spectrum-helptext-icon-color-default",
"--spectrum-helptext-icon-size",
"--spectrum-helptext-line-height",
"--spectrum-helptext-min-height",
"--spectrum-helptext-text-to-visual",
"--spectrum-helptext-top-to-text",
"--spectrum-helptext-top-to-workflow-icon"
"--spectrum-helptext-top-to-text"
],
"global": [
"--spectrum-cjk-line-height-100",
"--spectrum-component-bottom-to-text-100",
"--spectrum-component-bottom-to-text-200",
"--spectrum-component-bottom-to-text-300",
"--spectrum-component-bottom-to-text-75",
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-component-top-to-text-100",
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-300",
"--spectrum-component-top-to-text-75",
"--spectrum-component-top-to-workflow-icon-100",
"--spectrum-component-top-to-workflow-icon-200",
"--spectrum-component-top-to-workflow-icon-300",
"--spectrum-component-top-to-workflow-icon-75",
"--spectrum-default-font-style",
"--spectrum-disabled-content-color",
"--spectrum-font-size-100",
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
"--spectrum-line-height-100",
"--spectrum-negative-color-900",
"--spectrum-negative-content-color-default",
"--spectrum-neutral-subdued-content-color-default",
"--spectrum-regular-font-weight",
"--spectrum-sans-font-family-stack",
"--spectrum-text-to-visual-100",
"--spectrum-text-to-visual-200",
"--spectrum-text-to-visual-300",
"--spectrum-text-to-visual-75",
"--spectrum-workflow-icon-size-100",
"--spectrum-workflow-icon-size-200",
Expand Down
105 changes: 51 additions & 54 deletions components/helptext/index.css
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the top .spectrum-HelpText (L15 and L16), we have:

	--spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
	--spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);

and then further down (around L70/71), we also have:

	&.spectrum-HelpText--neutral {
		--spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
		--spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
	}

Wouldn't it save us a couple of lines (or I guess, a line, really) and essentially behave the same to change that to something like:

        &,
	&.spectrum-HelpText--neutral {
		--spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
		--spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
	}

There's not some specific reason I'm missing that we need it up at the top, is there?

Honestly, not a huge deal, just more of a nit.

Noting also this does not appear to have been introduced in the migration.

Original file line number Diff line number Diff line change
Expand Up @@ -11,99 +11,85 @@
* governing permissions and limitations under the License.
*/

@media (forced-colors: active) {
.spectrum-HelpText {
--highcontrast-helptext-content-color-default: CanvasText;
--highcontrast-helptext-icon-color-default: CanvasText;

forced-color-adjust: none;
.spectrum-HelpText {
/* Spacing */
--spectrum-helptext-min-height: var(--spectrum-component-height-100);
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100);
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100);
--spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-100);
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);

/* Typpography */
--spectrum-helptext-font-size: var(--spectrum-font-size-100);
--spectrum-helptext-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-helptext-font-style: var(--spectrum-default-font-style);
--spectrum-helptext-line-height: var(--spectrum-line-height-100);
--spectrum-helptext-font-weight: var(--spectrum-regular-font-weight);

.spectrum-HelpText-validationIcon,
.spectrum-HelpText-text {
forced-color-adjust: none;
}
&:lang(ja),
&:lang(zh),
&:lang(ko) {
--mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100));
}
}

.spectrum-HelpText {
--spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
--spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);

&.spectrum-HelpText--sizeS {
--spectrum-helptext-min-height: var(--spectrum-component-height-75);
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75);
--spectrum-helptext-font-size: var(--spectrum-font-size-75);
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small);
--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
}

&,
&.spectrum-HelpText--sizeM {
--spectrum-helptext-min-height: var(--spectrum-component-height-75);
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100);
--spectrum-helptext-font-size: var(--spectrum-font-size-75);
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75);
--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium);
--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
--spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-75);
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
}

&.spectrum-HelpText--sizeL {
--spectrum-helptext-min-height: var(--spectrum-component-height-100);
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200);
--spectrum-helptext-font-size: var(--spectrum-font-size-100);
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100);
--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large);
--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
}

&.spectrum-HelpText--sizeXL {
--spectrum-helptext-min-height: var(--spectrum-component-height-200);
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300);
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200);
--spectrum-helptext-font-size: var(--spectrum-font-size-200);
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200);
--spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large);
--spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon);
--spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-200);
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200);
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
}

&.spectrum-HelpText--sizeXL {
--spectrum-helptext-min-height: var(--spectrum-component-height-300);
--spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300);
--spectrum-helptext-font-size: var(--spectrum-font-size-300);
--spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-300);
--spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-300);
--spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-300);
--spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
}

&,
&.spectrum-HelpText--neutral {
--spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
--spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
}

&.spectrum-HelpText--negative {
--spectrum-helptext-content-color-default: var(--spectrum-negative-color-900);
--spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900);
--spectrum-helptext-content-color-default: var(--spectrum-negative-content-color-default);
--spectrum-helptext-icon-color-default: var(--spectrum-negative-content-color-default);
}

&.is-disabled {
--spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color);
--spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color);
}
}

.spectrum-HelpText {
color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
display: flex;
font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size));
min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height));

&:lang(ja),
&:lang(zh),
&:lang(ko) {
--mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100));
}

.spectrum-HelpText-validationIcon {
margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual));
padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon));
padding-block-end: var(--mod-helptext-bottom-to-workflow-icon, var(--spectrum-helptext-bottom-to-workflow-icon));
padding-block-start: var(--mod-helptext-top-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon));
padding-block-end: var(--mod-helptext-bottom-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon));
flex-shrink: 0;
block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size));
inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size));
Expand All @@ -112,9 +98,13 @@
.spectrum-HelpText-text {
padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text));
padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text));
line-height: var(--mod-helptext-line-height, var(--spectrum-line-height-100));
line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height));
font-family: var(--mod-helptext-font-family, var(--spectrum-helptext-font-family));
font-style: var(--mod-helptext-font-style, var(--spectrum-helptext-font-style));
font-weight: var(--mod-helptext-font-weight, var(--spectrum-helptext-font-weight));
}

/* Variants -- Neutral, negative, disabled */
&.spectrum-HelpText--neutral {
.spectrum-HelpText-text {
color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default)));
Expand Down Expand Up @@ -145,3 +135,10 @@
}
}
}

@media (forced-colors: active) {
.spectrum-HelpText {
--highcontrast-helptext-content-color-default: CanvasText;
--highcontrast-helptext-icon-color-default: CanvasText;
}
}
3 changes: 3 additions & 0 deletions components/helptext/stories/helptext.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ export const Sizing = (args, context) => Sizes({
Sizing.storyName = "Sizing";
Sizing.args = {
variant: "negative",
customStyles: {
"--mod-helptext-align-text": "center",
},
};
Sizing.tags = ["!dev"];
Sizing.parameters = {
Expand Down
5 changes: 4 additions & 1 deletion components/helptext/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,10 @@ export const NegativeTemplate = (args, context) => Container({
},
content: Template({
...args,
hideIcon
hideIcon,
customStyles: {
"--mod-helptext-align-text": "center",
},
}, context),
}, context)
)}`,
Expand Down
Loading