feat(divider): S2 migration #3557

cdransf · 2025-02-13T21:55:22Z

Description

CSS-708

This migrates the divider component to S2. Custom properties have been remapped and updated per the design spec.

New properties

--spectrum-divider-horizontal-minimum-width
--spectrum-divider-vertical-minimum-height

New mods

--mod-divider-inline-minimum-size
--mod-divider-block-minimum-size

Removed mods

--mod-divider-background-color-large-static-black
--mod-divider-background-color-large-static-white
--mod-divider-background-color-medium-static-black
--mod-divider-background-color-medium-static-white
--mod-divider-background-color-small-static-black
--mod-divider-background-color-small-static-white

Additions

This adds new minimum width and height tokens for the divider and the minDimensionValues arg has been removed in favor of these tokens and the rules with which they're applied.

The default size for the Storybook control has been changed to medium (the new default size for the component). All sizes are now displayed for the static color variants in the docs.

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.

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(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)

changeset-bot · 2025-02-13T21:55:27Z

🦋 Changeset detected

Latest commit: 4eb24b0

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

This PR includes changesets to release 16 packages

Name	Type
@spectrum-css/divider	Major
@spectrum-css/alertbanner	Major
@spectrum-css/alertdialog	Major
@spectrum-css/dialog	Major
@spectrum-css/menu	Major
@spectrum-css/popover	Major
@spectrum-css/tray	Major
@spectrum-css/actionmenu	Major
@spectrum-css/coachmark	Major
@spectrum-css/combobox	Major
@spectrum-css/picker	Major
@spectrum-css/pickerbutton	Major
@spectrum-css/tabs	Major
@spectrum-css/actionbar	Major
@spectrum-css/contextualhelp	Major
@spectrum-css/datepicker	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-13T22:01:24Z

File metrics

Summary

Total size: 1.42 MB^*
Total change (Δ): 🟢 ⬇ 0.37 KB (-0.02%)

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

Package	Size	Minified	Gzipped	Δ
divider	2.85 KB	-	-	🟢 ⬇ 0.37 KB

divider

Filename	Head	Minified	Gzipped	Compared to base
index.css	2.85 KB	-	-	🟢 ⬇ 0.37 KB
metadata.json	1.44 KB	-	-	🟢 ⬇ 0.23 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-13T22:01:50Z

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

cdransf · 2025-02-13T22:03:26Z

components/divider/dist/metadata.json

  ],
  "modifiers": [
    "--mod-divider-background-color",
-    "--mod-divider-background-color-large-static-black",


This drops deprecated color styles in favor of the tokens specified by design — I'm not sure if we should alias the raw color tokens to our own and — if so — what naming scheme to use? Doing so would allow us to provide mods for them, but I'm not sure if that's necessary.

- 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)

…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

aramos-adobe and others added 5 commits February 11, 2025 13:02

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

cdransf added size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. skip_vrt Add to a PR to skip running VRT (but still pass the action) ready-for-review labels Feb 13, 2025

cdransf requested review from jawinn, rise-erpelding and marissahuysentruyt February 13, 2025 21:55

cdransf self-assigned this Feb 13, 2025

cdransf force-pushed the cdransf/s2-divider-migration branch from ed77498 to 7883943 Compare February 13, 2025 21:56

cdransf commented Feb 13, 2025

View reviewed changes

marissahuysentruyt added 2 commits February 17, 2025 16:44

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

castastrophe added the S2 Spectrum 2 label Feb 18, 2025

cdransf force-pushed the cdransf/s2-divider-migration branch from 7883943 to 21cf5df Compare February 19, 2025 16:03

cdransf added 2 commits February 21, 2025 16:25

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

95af748

…previews could overlap adjacent components (#3568)

feat(divider): s2 migration

4eb24b0

cdransf force-pushed the cdransf/s2-divider-migration branch from 21cf5df to 4eb24b0 Compare February 21, 2025 23:42

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(divider): S2 migration #3557

feat(divider): S2 migration #3557

cdransf commented Feb 13, 2025

changeset-bot bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

cdransf Feb 13, 2025

feat(divider): S2 migration #3557

Are you sure you want to change the base?

feat(divider): S2 migration #3557

Conversation

cdransf commented Feb 13, 2025

Description

New properties

New mods

Removed mods

Additions

How and where has this been tested?

To-do list

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

🦋 Changeset detected

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

File metrics

Summary

divider

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

cdransf Feb 13, 2025

Choose a reason for hiding this comment

changeset-bot bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading