feat(menu): s2 migration #2802
Closed
feat(menu): s2 migration #2802
+9,427
−7,044
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/preview@7.4.2-next.0 - @spectrum-css/actiongroup@5.0.0-next.0 - @spectrum-css/buttongroup@7.0.0-next.0 - @spectrum-css/tokens@14.0.0-next.0 - @spectrum-css/bundle-builder@6.3.1-next.0 - @spectrum-css/component-builder-simple@5.0.1-next.0 - @spectrum-css/component-builder@6.0.1-next.0
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 <pfulton@adobe.com>
* 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
- @spectrum-css/preview@8.0.5-next.0 - @spectrum-css/accordion@4.2.7-next.0 - @spectrum-css/actionbar@7.2.5-next.0 - @spectrum-css/actionbutton@5.2.7-next.0 - @spectrum-css/actiongroup@5.0.0-next.1 - @spectrum-css/actionmenu@5.1.4-next.0 - @spectrum-css/alertbanner@1.1.42-next.0 - @spectrum-css/alertdialog@1.2.5-next.0 - @spectrum-css/asset@4.0.1-next.0 - @spectrum-css/assetcard@3.1.5-next.0 - @spectrum-css/assetlist@5.2.5-next.0 - @spectrum-css/avatar@6.1.6-next.0 - @spectrum-css/badge@3.2.6-next.0 - @spectrum-css/breadcrumb@8.2.6-next.0 - @spectrum-css/button@12.0.3-next.0 - @spectrum-css/buttongroup@7.0.0-next.1 - @spectrum-css/calendar@4.2.6-next.0 - @spectrum-css/card@7.0.3-next.0 - @spectrum-css/checkbox@8.1.6-next.0 - @spectrum-css/clearbutton@5.1.5-next.0 - @spectrum-css/closebutton@5.0.0-next.0 - @spectrum-css/coachindicator@1.1.6-next.0 - @spectrum-css/coachmark@6.1.6-next.0 - @spectrum-css/colorarea@4.1.6-next.0 - @spectrum-css/colorhandle@7.1.5-next.0 - @spectrum-css/colorloupe@4.2.5-next.0 - @spectrum-css/colorslider@5.1.6-next.0 - @spectrum-css/colorwheel@3.1.6-next.0 - @spectrum-css/combobox@2.1.7-next.0 - @spectrum-css/commons@9.1.3 - @spectrum-css/contextualhelp@2.1.6-next.0 - @spectrum-css/datepicker@2.1.5-next.0 - @spectrum-css/dial@2.2.5-next.0 - @spectrum-css/dialog@9.2.5-next.0 - @spectrum-css/divider@2.2.6-next.0 - @spectrum-css/dropindicator@4.1.5-next.0 - @spectrum-css/dropzone@5.2.6-next.0 - @spectrum-css/fieldgroup@4.2.5-next.0 - @spectrum-css/fieldlabel@8.0.0-next.0 - @spectrum-css/floatingactionbutton@1.2.6-next.0 - @spectrum-css/helptext@4.1.6-next.0 - @spectrum-css/icon@6.0.6-next.0 - @spectrum-css/illustratedmessage@6.1.6-next.0 - @spectrum-css/infieldbutton@4.2.5-next.0 - @spectrum-css/inlinealert@7.1.7-next.0 - @spectrum-css/link@4.2.6-next.0 - @spectrum-css/logicbutton@3.3.5-next.0 - @spectrum-css/menu@6.1.6-next.0 - @spectrum-css/miller@5.1.5-next.0 - @spectrum-css/modal@4.2.7-next.0 - @spectrum-css/opacitycheckerboard@1.1.6-next.0 - @spectrum-css/page@7.1.5-next.0 - @spectrum-css/pagination@7.1.7-next.0 - @spectrum-css/picker@7.2.8-next.0 - @spectrum-css/pickerbutton@4.1.6-next.0 - @spectrum-css/popover@6.2.6-next.0 - @spectrum-css/progressbar@3.1.6-next.0 - @spectrum-css/progresscircle@2.2.4-next.0 - @spectrum-css/radio@8.1.6-next.0 - @spectrum-css/rating@4.2.5-next.0 - @spectrum-css/search@6.2.5-next.0 - @spectrum-css/sidenav@4.2.5-next.0 - @spectrum-css/site@4.2.5-next.0 - @spectrum-css/slider@4.3.6-next.0 - @spectrum-css/splitview@4.2.5-next.0 - @spectrum-css/statuslight@6.1.7-next.0 - @spectrum-css/steplist@4.1.5-next.0 - @spectrum-css/stepper@5.1.6-next.0 - @spectrum-css/swatch@5.1.6-next.0 - @spectrum-css/swatchgroup@2.1.6-next.0 - @spectrum-css/switch@4.2.6-next.0 - @spectrum-css/table@5.2.6-next.0 - @spectrum-css/tabs@4.1.5-next.0 - @spectrum-css/tag@8.1.6-next.0 - @spectrum-css/taggroup@4.1.6-next.0 - @spectrum-css/textfield@6.1.7-next.0 - @spectrum-css/thumbnail@5.2.5-next.0 - @spectrum-css/toast@9.1.26-next.0 - @spectrum-css/tooltip@5.3.6-next.0 - @spectrum-css/tray@2.2.8-next.0 - @spectrum-css/treeview@9.2.7-next.0 - @spectrum-css/typography@5.1.6-next.0 - @spectrum-css/underlay@3.2.5-next.0 - @spectrum-css/well@4.1.5-next.0 - @spectrum-css/tokens@14.0.0-next.2 - @spectrum-css/bundle-builder@7.0.3-next.0 - @spectrum-css/component-builder-simple@5.0.6-next.0 - @spectrum-css/component-builder@7.0.3-next.0
* 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
- @spectrum-css/preview@8.1.0-next.0 - @spectrum-css/accordion@4.2.7-next.1 - @spectrum-css/actionbar@7.2.5-next.1 - @spectrum-css/actionbutton@5.2.7-next.1 - @spectrum-css/actiongroup@5.0.0-next.2 - @spectrum-css/actionmenu@5.1.4-next.1 - @spectrum-css/alertbanner@1.1.42-next.1 - @spectrum-css/alertdialog@1.2.5-next.1 - @spectrum-css/asset@4.0.1-next.1 - @spectrum-css/assetcard@3.1.5-next.1 - @spectrum-css/assetlist@5.2.5-next.1 - @spectrum-css/avatar@6.1.6-next.1 - @spectrum-css/badge@3.2.6-next.1 - @spectrum-css/breadcrumb@8.2.6-next.1 - @spectrum-css/button@14.0.0-next.3 - @spectrum-css/buttongroup@7.0.0-next.2 - @spectrum-css/calendar@4.2.6-next.1 - @spectrum-css/card@7.0.3-next.1 - @spectrum-css/checkbox@14.0.0-next.3 - @spectrum-css/clearbutton@5.1.5-next.1 - @spectrum-css/closebutton@5.0.0-next.1 - @spectrum-css/coachindicator@1.1.6-next.1 - @spectrum-css/coachmark@6.1.6-next.1 - @spectrum-css/colorarea@4.1.6-next.1 - @spectrum-css/colorhandle@7.1.5-next.1 - @spectrum-css/colorloupe@4.2.5-next.1 - @spectrum-css/colorslider@5.1.6-next.1 - @spectrum-css/colorwheel@3.1.6-next.1 - @spectrum-css/combobox@2.1.7-next.1 - @spectrum-css/commons@9.1.4-next.0 - @spectrum-css/contextualhelp@2.1.6-next.1 - @spectrum-css/datepicker@2.1.5-next.1 - @spectrum-css/dial@2.2.5-next.1 - @spectrum-css/dialog@9.2.5-next.1 - @spectrum-css/divider@2.2.6-next.1 - @spectrum-css/dropindicator@4.1.5-next.1 - @spectrum-css/dropzone@5.2.6-next.1 - @spectrum-css/fieldgroup@4.2.5-next.1 - @spectrum-css/fieldlabel@8.0.0-next.1 - @spectrum-css/floatingactionbutton@1.2.6-next.1 - @spectrum-css/helptext@4.1.6-next.1 - @spectrum-css/icon@6.0.6-next.1 - @spectrum-css/illustratedmessage@6.1.6-next.1 - @spectrum-css/infieldbutton@4.2.5-next.1 - @spectrum-css/inlinealert@7.1.7-next.1 - @spectrum-css/link@4.2.6-next.1 - @spectrum-css/logicbutton@3.3.5-next.1 - @spectrum-css/menu@6.1.6-next.1 - @spectrum-css/miller@5.1.5-next.1 - @spectrum-css/modal@4.2.7-next.1 - @spectrum-css/opacitycheckerboard@1.1.6-next.1 - @spectrum-css/page@7.1.5-next.1 - @spectrum-css/pagination@7.1.7-next.1 - @spectrum-css/picker@7.2.8-next.1 - @spectrum-css/pickerbutton@4.1.6-next.1 - @spectrum-css/popover@6.2.6-next.1 - @spectrum-css/progressbar@3.1.6-next.1 - @spectrum-css/progresscircle@2.2.4-next.1 - @spectrum-css/radio@8.1.6-next.1 - @spectrum-css/rating@4.2.5-next.1 - @spectrum-css/search@6.2.5-next.1 - @spectrum-css/sidenav@4.2.5-next.1 - @spectrum-css/site@4.2.5-next.1 - @spectrum-css/slider@4.3.6-next.1 - @spectrum-css/splitview@4.2.5-next.1 - @spectrum-css/statuslight@6.1.7-next.1 - @spectrum-css/steplist@4.1.5-next.1 - @spectrum-css/stepper@5.1.6-next.1 - @spectrum-css/swatch@5.1.6-next.1 - @spectrum-css/swatchgroup@2.1.6-next.1 - @spectrum-css/switch@4.2.6-next.1 - @spectrum-css/table@5.2.6-next.1 - @spectrum-css/tabs@4.1.5-next.1 - @spectrum-css/tag@8.1.6-next.1 - @spectrum-css/taggroup@4.1.6-next.1 - @spectrum-css/textfield@6.1.7-next.1 - @spectrum-css/thumbnail@5.2.5-next.1 - @spectrum-css/toast@9.1.26-next.1 - @spectrum-css/tooltip@5.3.6-next.1 - @spectrum-css/tray@2.2.8-next.1 - @spectrum-css/treeview@9.2.7-next.1 - @spectrum-css/typography@5.1.6-next.1 - @spectrum-css/underlay@3.2.5-next.1 - @spectrum-css/well@4.1.5-next.1 - @spectrum-css/tokens@14.0.0-next.3 - @spectrum-css/bundle-builder@7.0.3-next.1 - @spectrum-css/component-builder-simple@5.0.6-next.1 - @spectrum-css/component-builder@7.0.3-next.1
…2559) * feat(cornerrounding): documentation, custom tokens - feat(cornerrounding): add custom token - chore(cornerrounding): adds dist - docs(cornerrounding): add file strucutre for foundations - feat(cornerrounding): override token value - Sets custom var to override token spectrum-corner-radius-full - chore(cornerrounding): add override to dist - Adds custom var to override token value to dist - chore(cornerrounding): adjust file structure - Also renames file - feat(cornerrounding): add Foundations story for corner-rounding - feat(cornerrounding): add action buttons and checkboxes - Adds action buttons and checkboxes stories to demonstrate corner rounding - docs(cornerrounding): update corner-rounding docs - better utilize storybook features - clean up checkbox and action button stories - hide stories in corner-rounding directory - improve table styling and css token use - improve corner rounding documentation - add tables for component size tokens - fix(cornerrounding): remove mdx for tables - fix(cornerrounding): use sentence case - feat(cornerrounding): use custom token on close button - docs: add alias note - docs: remove reference to non-alias tokens - feat(actionbutton): partial migration for corner rounding only - feat(checkbox): partial migration for corner rounding only - chore(closebutton): update custom var post-refactor - fix: token rebase issue - chore(actionbutton,checkbox): update package version - chore: use corner-radius alias token - chore: update tokens version - chore: revert unneeded component version change - docs: design requested updates, show token with example - docs: move tables to stories, inline spacing for tables * fix: includes error --------- Co-authored-by: Melissa Thompson <mthompson@heysparkbox.com>
Remove dates from in front of version numbers on migration guides, as we're adjusting to this format going forward. Includes removal of the placeholder "x/x/2024" dates that were added. The button component was excluded from this update as they're already removed in the button s2 migration PR.
* feat(opacitycheckerboard): small t-shirt size squares * docs(opacitycheckerboard): chromatic coverage for t-shirt size
* feat: add example gradients for static black and white Add new gradient backgrounds, displayed for static black and static white variants. These are used for examples only. This adds CSS custom properties available globally within Storybook and sets them on the existing decorator. * docs(fieldlabel): support static colors decorator in storybook Change Field label stories that show static black and static white, so they work with the recently added decorator that changes the main Storybook background. * docs(button): adjust static colors template Adjust static colors template to better handle the static color decorator and gradients. * chore(fieldlabel): apply eslint indentation changes to stories
castastrophe
force-pushed
the
spectrum-two
branch
from
cdb180d to
27d01df
Compare
castastrophe
force-pushed
the
spectrum-two
branch
6 times, most recently
from
fc916f1 to
9d7f088
Compare
castastrophe
force-pushed
the
spectrum-two
branch
4 times, most recently
from
7e783b6 to
e3585cd
Compare
castastrophe
force-pushed
the
spectrum-two
branch
2 times, most recently
from
56c6806 to
793571c
Compare
castastrophe
force-pushed
the
spectrum-two
branch
7 times, most recently
from
dee81f5 to
ce2f3e0
Compare
castastrophe
force-pushed
the
spectrum-two
branch
6 times, most recently
from
3499231 to
ad861d0
Compare
|
Closing per updated work on this migration in #3686 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This migration was a big one--lots of features were added to the design spec for S2. To make way for these, menu was previously refactored on
mainto make the Storybook implementation easier to add to. There are two temporary commits at the beginning of this PR ("keep selector list in dist output..." and "improve chromatic coverage") containing, respectively, a fix that addresses menu, and recent menu refactor changes made onmainthat this work depends on--I'll remove this oncespectrum-twohas been rebased to include these changes.In addition to small token and minor style changes to match the design spec, there were several new features that were added to this version of menu, including:
Since
@adobe/spectrum-tokenshas been updated to include many tokens relating to the menu component, including some that replace custom tokens that had previously been added. As such, these custom menu item color tokens that are now available from@adobe/spectrum-tokenshave been removed.The following mods have been added:
--mod-menu-item-corner-rounding--mod-menu-item-description-font-weight--mod-menu-item-label-font-weight--mod-menu-item-thumbnail-height--mod-menu-item-thumbnail-opacity-disabled--mod-menu-item-thumbnail-to-label--mod-menu-item-thumbnail-width--mod-menu-item-top-to-drillin--mod-menu-item-top-to-icon--mod-menu-item-top-to-thumbnail--mod-menu-linkout-icon-height--mod-menu-linkout-icon-width--mod-menu-section-description-color--mod-menu-section-description-font-size--mod-menu-section-description-font-weight--mod-menu-section-description-line-height--mod-menu-section-description-line-height-cjk--mod-menu-section-header-to-description--mod-popover-content-area-spacing-horizontal--mod-tray-edge-to-content-areaNote that there is currently one outstanding item that needs to be addressed before merging:
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
menu-item-label-to-descriptionsize tokenssection-header-to-descriptionsize tokensmenu-top-to-thumbnailsize tokensmenu-item-background-colorandmenu-item-background-opacitytokenstext-to-visual-400(used for thumbnail to label inline spacing)link-out-iconsize tokensLinks that may help in validation:
Regression testing
Validate:
Screenshots
To-do list