diff --git a/.changeset/wild-lemons-spend.md b/.changeset/wild-lemons-spend.md new file mode 100644 index 00000000000..070bdb9cd85 --- /dev/null +++ b/.changeset/wild-lemons-spend.md @@ -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. + +#### 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` diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 5eab153c21a..be511d08651 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -14,7 +14,6 @@ ".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)", @@ -22,55 +21,69 @@ ".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", diff --git a/components/helptext/index.css b/components/helptext/index.css index 607a81e01c8..ab3051efa3f 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -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)); @@ -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))); @@ -145,3 +135,10 @@ } } } + +@media (forced-colors: active) { + .spectrum-HelpText { + --highcontrast-helptext-content-color-default: CanvasText; + --highcontrast-helptext-icon-color-default: CanvasText; + } +} diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 5274cec9f78..cf3aa9cec45 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -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 = { diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js index 0b19659c9de..894c60745cb 100644 --- a/components/helptext/stories/template.js +++ b/components/helptext/stories/template.js @@ -85,7 +85,10 @@ export const NegativeTemplate = (args, context) => Container({ }, content: Template({ ...args, - hideIcon + hideIcon, + customStyles: { + "--mod-helptext-align-text": "center", + }, }, context), }, context) )}`,