feat(link): new typography tokens, focus color and design, WHCM focus state #3570

aramos-adobe · 2025-02-20T19:33:30Z

Link S2 migration

New tokens

Color

spectrum-link-focus-indicator-color
spectrum-link-focus-indicator-thickness
spectrum-link-focus-indicator-gap
spectrum-link-corner-radius

Typography

spectrum-link-line-height
spectrum-link-line-height-cjk-100
spectrum-link-font-size
spectrum-link-font-style
spectrum-link-font-weight
spectrum-link-text-underline-thickness
spectrum-link-text-underline-gap

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

Expanding the existing themes system to support the new S2 mappings. --- Co-authored-by: castastrophe <[email protected]> Co-authored-by: Patrick Fulton <[email protected]> Co-authored-by: Cory Dransfeldt <[email protected]> Co-authored-by: Aziz Ramos <[email protected]> Co-authored-by: Josh Winn <[email protected]> Co-authored-by: Rise Erpelding <[email protected]> Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: TarunAdobe <[email protected]> Co-authored-by: Dragan Eror<[email protected]>

* feat: s2 foundations non-gray-800 colors update * add changeset

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

--- Co-authored-by: TarunAdobe <[email protected]>

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* docs(assetcard): remove MDX file - adds some missing documentation regarding stories, classes and custom properties - corrects sentence-casing of story names * docs(avatar): remove MDX file - adds some missing documentation regarding stories - reorganizes some information to sit with appropriate story/variant - migrates documentation from MDX file to the stories file instead * chore(avatar): fix disabled test arguments * docs(badge): remove MDX file - adds notice badge variants to semantic story - adds sizing story to docs page - migrates documentation in MDX to stories.js instead * docs(badge): pr fixes - remove empty doc block line - remove html wrapper in favor of content array - add notice badge to test coverage

Includes new color values for Spectrum 2

BREAKING CHANGE: migrates `Action Group` to Spectrum 2, Removes some mod properties

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

BREAKING CHANGE: uses Spectrum 2 tokens

- @spectrum-css/[email protected] - @spectrum-css/[email protected] - @spectrum-css/[email protected] - @spectrum-css/[email protected] - @spectrum-css/[email protected] - @spectrum-css/[email protected] - @spectrum-css/[email protected]

BREAKING CHANGE: migrates Close Button to Spectrum 2 Additionally: * test: increase chromatic coverage * fix(closebutton): pass staticColor as arg for SB display * chore(closebutton): remove themes dir * docs(closebutton): adds s2 migration notes * chore(closebutton): specify s2 tokens release for dependency --------- Co-authored-by: Patrick Fulton <[email protected]>

* chore: migrate gray-50 to gray-25 Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide * chore: migrate gray-75 to gray-50 Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide. * chore: migrate gray-100 to gray-75 Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide * chore: migrate gray-200 to gray-100 Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide * chore: migrate gray-300 to gray-200 Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide * chore(infieldbutton): gray-300 to gray-200

* fix(commons): remove renamed mods marked for deprecation Remove mods that were renamed and previously marked for deprecation, and regenerate mods lists. This will help in reviewing the accuracy of other components' mods lists as they are being migrated to s2. * docs: migration guide notes for mod property deprecations Add notes to components affected by mod property changes in the commons basebutton. * docs(closebutton): updated docs for migration guide and icon size - Removes the "Icon size" variant options, as noted in the closebutton PR. Per Figma changelog "removed icon size as a property". - Updates migration guide with a more organized history. * fix(commons): remove another mod referencing global token Deprecates an additional mod name that was referencing a global token, and updates migration notes for all affected components.

BREAKING CHANGE: uses Spectrum 2 tokens Also: * feat(fieldlabel): medium as default and 100 sizing tokens - Use the correct "100" sized tokens for medium. - Make medium styles the default, to conform with existing pattern. .spectrum-FieldLabel--sizeM class removed as it is no longer necessary. * feat(fieldlabel): use correct font size tokens The font-size tokens used for large and extra large needed to be shifted up to match the s2 spec. * refactor(fieldlabel): remove deprecated mods Remove renamed mods marked as deprecated for S2 release. * docs(fieldlabel): spectrum 2 noted in migration notes Updates some docs and adds migration notes. Clarifies some docs around "left" and "right", and fixes duplicate ID warnings from examples code. * docs(fieldlabel): form - docs update and regenerate mods Add migration guide section to "Form", that currently lives within the Field label component. Regenerates mods to include the removal of deprecated renamed mods. * fix(fieldlabel): rename mod property referencing global token A mod custom property was referencing a global token instead of the component itself. Renames this and adds a note to the migration guide. * feat(fieldlabel): use correct sizing tokens Use correct tokens for some large and extra large custom properties, to matching with design. * style(fieldlabel): applying linter formatting adjustments Run linter fix on the fieldlabel component, which rearranges a few declarations. * docs(fieldlabel): document asterisk icon size Add documentation about asterisk UI icon sizes specified on the design. These sizes are already handled in the Storybook template, but were not really explained to the user. * feat(fieldlabel): black and white static color variants Add classes for static colors, as defined on the designs. And adds examples of these variants to the documentation. * build(fieldlabel): specify s2 tokens release for dependency Use Spectrum 2 version of tokens package in dependencies list.

Takes in the latest beta release for S2 tokens

* feat(downstate): docs + implementation for example components * docs: update mdx * docs: reorg, stories live within foundations * docs: decorator for down state dimension tokens * docs: fix mdx hierarchy console error * fix: small iconOnly button gets min perspective * docs: use markdown, update language * fix: disabled, readonly checkbox doesnt have down state * chore(button,checkbox): update package versions

* feat(tokens): use spectrum tokens beta 21 * chore(tokens): add custom token for corner rounding

feat(popover): new S2 popover styles - new tokens and token values used for popover - create changeset - rebuild metadata.json - adjust popoverWidth and popoverHeight args to accommodate new padding - update test file with new popoverWidth and popoverHeight - correct side aligned popovers distance to source * fix(coachmark): nested popover style updates - update the border radius of the popover nested in coachmark to match S2 popover specs - update popover `--mod-popover-content-area-spacing` variable name (previously --mod-popover-content-area-spacing-vertical) - rebuild metadata.json * fix(picker): update popover selector class - with the new default position for popover, the selector class for the popover in picker also needed to be updated. (--bottom-start) - create changeset - rebuild metadata.json * docs(popover): fixup some docs wording - add down state link

Migrates component to Spectrum 2. Includes renaming of variants and new large t-shirt size, changed token usage to match spec, additional storybook options, etc. docs(breadcrumb): new controls for nested and improved nested docs Adds controls so a user is able to display the nested truncated menu, root context, set disabled items, and item text. This also clears up and moves around some of the documentation about the truncated menu and root context. docs(breadcrumb): refactor tests Update VRTs tests file to use new refactored controls and updated s2 variants. More options can now live in the state data. docs(breadcrumb): add hover and focus-visible to tests

feat(illustratedmessage): updating token version feat(illustratedmessage): work in progress feat(illustratedmessage): adding new tokens, tshirt sizes, orientation, button group feat(illustratedmessage): updating CSS structure and adding conditional buttons feat(illustratedmessage): update tokens feat(illustratedmessage): changeset, styles, dropzone mods feat(illustratedmessage): work in progress feat(illustratedmessage): updating mods feat(illustratedmessage): removing message accent color selector chore(illustratedmessage): updating changeset docs(illustratedmessage): heading controls fix(illustratedmessage): fixing cjk tokens and removing heading and base classes fix(illustratedmessage): fixing cjk tokens and removing heading and base classes feat(illustratedmessage): new mods docs(illustratedmessage): adding horizontal story context feat(illustratedmessage): removing extra dashes, reverting dropzone chore(fix): adding stylelint disable desc chore(fix): removing unused highcontrast accent color token feat(illustratedmessage): adding grid display chore(im): removing unused import chore(im): removing more unused imports chore(illustratedmessage): updating testing env fix(dropzone): removing unused controls feat(illustratedmessage): reviewing comments feat(illustratedmessage): adjusting story horiz copy fix(illustratedmessage): resolving changes chore(im): bringing back to center fix: removing lint line chore: restore stepper index css file chore(illustratedmessage): removing one liner in dropzone) chore(illustratedmessage): removing stylelint line chore(illustratedmessage): removing unused custom props in dropzone

…gress circle (#3430) * feat(infieldprogress): add new component feat(infieldcircle): new component feat(ifpc): updating template and vrts chore(ifpc): updating story changes chore(ifpc): cleaning up build files feat(ifpc): add infield loader to components feat(infieldprogress): add new component feat(ifpc): updating template and vrts feat(ifpc): updating package, story, template chore(ifpc): spectrum two updates chore(ifpc): adding dist files chore(ifpc): changing button id chore(ifpc): updating bundle chore(ifpc): updating package chore(ifpc): testing out files chore(ifpc): adding missing dist files chore(ifpc): removing index css in dist fix(ifpc): fixing typos fix(ifpc): update mods in changeset chore(ifpc): removing mods from ifpc components in changeset * chore(ifpc): update package json)

- removes --spectrum-statuslight-semantic-accent-color from CSS - removes deprecated accent variant from template and tests - adds changeset - update metadata.json

* feat(icon): updated s2 icons - workflow and ui Uses and updates to the latest icon sets for S2. ==== Workflow icons ==== Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work. ==== UI icons ==== Updates the ui-icons package with the latest set of icons. This includes deprecations and some new icons. See the change log for a full list of changes. The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset. Co-authored-by: [ Cassondra ] <[email protected]> Also includes: * build(storybook): use latest 4.0.0 version of workflow icons * feat(icon): remove guessing of icon set if not provided * refactor(icon): refactors, cleans up, and documents template logic and utilities * feat(icon): exclude new ui icons not yet ready for production (CSS-1115) * feat(icon): exclude 22x20 workflow icons (CSS-1116)

changeset-bot · 2025-02-20T19:33:36Z

🦋 Changeset detected

Latest commit: 226c4bf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@spectrum-css/link	Major
@spectrum-css/contextualhelp	Major
@spectrum-css/dropzone	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-02-20T19:40:35Z

components/dialog/stories/template.js

@@ -2,7 +2,8 @@ import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/templ
 import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
 import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
 import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
-import { getRandomId, renderContent } from "@spectrum-css/preview/decorators";
+import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";


🚫 [eslint] <no-unused-vars> _{reported by reviewdog 🐶}
'Typography' is defined but never used.

github-actions · 2025-02-20T19:48:13Z

File metrics

Summary

Total size: 1.42 MB^*
Total change (Δ): 🔴 ⬆ 1.26 KB (0.09%)

Table reports on changes to a package's main file.

Package	Size	Minified	Gzipped	Δ
link	4.52 KB	-	-	🔴 ⬆ 1.26 KB

link

Filename	Head	Minified	Gzipped	Compared to base
index.css	4.52 KB	-	-	🔴 ⬆ 1.26 KB
metadata.json	2.34 KB	-	-	🔴 ⬆ 0.87 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-02-20T19:49:13Z

🚀 Deployed on https://pr-3570--spectrum-css.netlify.app

…previews could overlap adjacent components (#3568)

castastrophe and others added 30 commits February 11, 2025 09:14

feat: bug fixes for reducing theming variables

258263c

feat: s2 foundations non-gray-800 colors update (#3413)

43cb851

* feat: s2 foundations non-gray-800 colors update * add changeset

chore: release (s2-foundations) (#3421)

d79432e

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

fix(combobox): update border color in spectrum-two

767ca25

--- Co-authored-by: TarunAdobe <[email protected]>

fix(picker): update background and border color

bb5bb57

--- Co-authored-by: TarunAdobe <[email protected]>

chore: release (s2-foundations) (#3425)

09f1ab6

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

fix(combobox): retain border values for S1

e56bea5

chore: release (s2-foundations) (#3426)

b0e1772

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

feat(tokens): use 13.0.0-beta.5

7dc038f

Includes new color values for Spectrum 2

feat(tokens): use 13.0.0-beta.8

f210166

feat(tokens): use 13.0.0-beta.9

95a3a67

feat(actiongroup)!: migrate to S2 (#2453)

9db6ac6

BREAKING CHANGE: migrates `Action Group` to Spectrum 2, Removes some mod properties

feat(buttongroup,page)!: migrate to S2 (#2457)

35456b4

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

feat(tokens)!: use 13.0.0-beta.13

590c66b

BREAKING CHANGE: uses Spectrum 2 tokens

chore(release): release

c42915d

- @spectrum-css/[email protected] - @spectrum-css/[email protected] - @spectrum-css/[email protected] - @spectrum-css/[email protected] - @spectrum-css/[email protected] - @spectrum-css/[email protected] - @spectrum-css/[email protected]

feat(tokens)!: use spectrum-tokens 13.0.0-beta.16

e355f92

chore(tokens): use spectrum-tokens v13.0.0-beta.19

fc7d15d

Takes in the latest beta release for S2 tokens

chore(tokens): manual version bump for 14.0.0-next.1

fbedc11

feat(tokens): use spectrum-tokens 13.0.0-beta.21 (#2597)

78fd9dd

* feat(tokens): use spectrum tokens beta 21 * chore(tokens): add custom token for corner rounding

marissahuysentruyt and others added 10 commits February 11, 2025 13:00

chore: fix a few minor duplicate properties

b3ad96a

build: exit and reenter pretag to reset versions

8eb6704

chore(popover): add missing metadata update from build (#3553)

973ccc2

docs(dialog): use isOpen shared state in controls (#3562)

159f51f

fix(statuslight): remove accent variant (#3561)

2637aa6

- removes --spectrum-statuslight-semantic-accent-color from CSS - removes deprecated accent variant from template and tests - adds changeset - update metadata.json

aramos-adobe added the ready-for-review label Feb 20, 2025

aramos-adobe self-assigned this Feb 20, 2025

aramos-adobe added 3 commits February 20, 2025 14:40

chore(link): adding yarn file

a8babe4

feat(link): add new migration and changeset

e3d75a0

chore(link): add changeset and revert template file

773de88

github-actions bot reviewed Feb 20, 2025

View reviewed changes

aramos-adobe force-pushed the aramos-adobe/css1019-link-s2-migration branch from 9a2a1e9 to 773de88 Compare February 20, 2025 19:40

chore(link): updating lock file

fc48b30

aramos-adobe and others added 2 commits February 20, 2025 18:18

chore(link): adding missing metadata files

39b9eb5

fix(combobox): corrects cases where open combobx stories and testing …

95af748

…previews could overlap adjacent components (#3568)

castastrophe added the S2 Spectrum 2 label Feb 21, 2025

Merge branch 'spectrum-two' into aramos-adobe/css1019-link-s2-migration

226c4bf

castastrophe force-pushed the spectrum-two branch 5 times, most recently from d5e72d4 to 0f14273 Compare February 24, 2025 22:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(link): new typography tokens, focus color and design, WHCM focus state #3570

feat(link): new typography tokens, focus color and design, WHCM focus state #3570

aramos-adobe commented Feb 20, 2025 •

edited

Loading

changeset-bot bot commented Feb 20, 2025 •

edited

Loading

github-actions bot Feb 20, 2025

github-actions bot commented Feb 20, 2025 •

edited

Loading

github-actions bot commented Feb 20, 2025 •

edited

Loading

feat(link): new typography tokens, focus color and design, WHCM focus state #3570

Are you sure you want to change the base?

feat(link): new typography tokens, focus color and design, WHCM focus state #3570

Conversation

aramos-adobe commented Feb 20, 2025 • edited Loading

Link S2 migration

New tokens

Color

Typography

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Feb 20, 2025 • edited Loading

🦋 Changeset detected

github-actions bot Feb 20, 2025

Choose a reason for hiding this comment

github-actions bot commented Feb 20, 2025 • edited Loading

File metrics

Summary

link

github-actions bot commented Feb 20, 2025 • edited Loading

aramos-adobe commented Feb 20, 2025 •

edited

Loading

changeset-bot bot commented Feb 20, 2025 •

edited

Loading

github-actions bot commented Feb 20, 2025 •

edited

Loading

github-actions bot commented Feb 20, 2025 •

edited

Loading