feat(breadcrumb)!: spectrum 2 migration (#3395)

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

Author: jawinn

.changeset/fresh-crabs-deliver.md

@@ -0,0 +1,16 @@
+---
+"@spectrum-css/breadcrumb": major
+---
+
+#### Spectrum 2 Migration
+
+The breadcrumbs component is now updated to use the S2 specs and tokens. This includes updated spacing, heights, colors, font sizes, etc.
+
+There has been a major design change to the variant classes related to density and sizing, to align their terminology better with t-shirt sizes:
+
+- The "compact" variant no longer exists. The `spectrum-Breadcrumbs--compact` class and associated custom properties are removed. The default (medium) breadcrumbs are now sized similar to what was previously called compact.
+- There is a new "large" variant, which uses the `spectrum-Breadcrumbs--sizeL` class. This is sized similarly to what was previously the default.
+
+In the multiline variant, the size of the title item can optionally be customized using an additional child heading element that applies one of the
+typography component's `spectrum-Heading--size*` classes. The preferred sizes specified in the design spec are small, medium, large (default), and
+extra-large. If an additional heading element is not used within the title item, the text will still be sized correctly to the default.

components/breadcrumb/dist/metadata.json

@@ -2,35 +2,30 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Breadcrumbs",
-    ".spectrum-Breadcrumbs--compact",
-    ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item",
-    ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item > .spectrum-ActionButton",
-    ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type",
-    ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemLink",
-    ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemSeparator",
     ".spectrum-Breadcrumbs--multiline",
-    ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item",
-    ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item > .spectrum-ActionButton",
     ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type",
-    ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink",
-    ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemLink",
-    ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemSeparator",
+    ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type > .spectrum-Breadcrumbs-itemLink",
+    ".spectrum-Breadcrumbs--sizeL",
     ".spectrum-Breadcrumbs-item",
     ".spectrum-Breadcrumbs-item > .spectrum-ActionButton",
     ".spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled",
     ".spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before",
     ".spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton",
+    ".spectrum-Breadcrumbs-item:first-of-type > .spectrum-Breadcrumbs-itemLink",
     ".spectrum-Breadcrumbs-item:last-of-type",
     ".spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink",
     ".spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemSeparator",
     ".spectrum-Breadcrumbs-itemLink",
+    ".spectrum-Breadcrumbs-itemLink + .spectrum-Breadcrumbs-itemSeparator",
     ".spectrum-Breadcrumbs-itemLink.is-disabled",
     ".spectrum-Breadcrumbs-itemLink:focus-visible:before",
     ".spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]",
     ".spectrum-Breadcrumbs-itemLink[href]",
+    ".spectrum-Breadcrumbs-itemLink[href]:active",
     ".spectrum-Breadcrumbs-itemLink[href]:focus-visible",
     ".spectrum-Breadcrumbs-itemLink[href]:hover",
     ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]",
+    ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active",
     ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible",
     ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover",
     ".spectrum-Breadcrumbs-itemSeparator",
@@ -41,41 +36,23 @@
     "--mod-breadcrumbs-action-button-color",
     "--mod-breadcrumbs-action-button-color-disabled",
     "--mod-breadcrumbs-action-button-spacing-block",
-    "--mod-breadcrumbs-action-button-spacing-block-between-multiline",
-    "--mod-breadcrumbs-action-button-spacing-block-compact",
-    "--mod-breadcrumbs-action-button-spacing-block-multiline",
     "--mod-breadcrumbs-action-button-spacing-inline",
-    "--mod-breadcrumbs-action-button-spacing-inline-start",
     "--mod-breadcrumbs-block-size",
-    "--mod-breadcrumbs-block-size-compact",
-    "--mod-breadcrumbs-block-size-multiline",
     "--mod-breadcrumbs-focus-indicator-color",
     "--mod-breadcrumbs-focus-indicator-gap",
     "--mod-breadcrumbs-focus-indicator-thickness",
     "--mod-breadcrumbs-font-family",
-    "--mod-breadcrumbs-font-family-compact",
-    "--mod-breadcrumbs-font-family-compact-current",
     "--mod-breadcrumbs-font-family-current",
-    "--mod-breadcrumbs-font-family-multiline",
-    "--mod-breadcrumbs-font-family-multiline-current",
     "--mod-breadcrumbs-font-size",
-    "--mod-breadcrumbs-font-size-compact",
-    "--mod-breadcrumbs-font-size-compact-current",
     "--mod-breadcrumbs-font-size-current",
-    "--mod-breadcrumbs-font-size-multiline",
-    "--mod-breadcrumbs-font-size-multiline-current",
+    "--mod-breadcrumbs-font-style",
     "--mod-breadcrumbs-font-weight",
-    "--mod-breadcrumbs-font-weight-compact",
-    "--mod-breadcrumbs-font-weight-compact-current",
     "--mod-breadcrumbs-font-weight-current",
-    "--mod-breadcrumbs-font-weight-multiline",
-    "--mod-breadcrumbs-font-weight-multiline-current",
     "--mod-breadcrumbs-icon-spacing-block",
-    "--mod-breadcrumbs-icon-spacing-block-between-multiline",
-    "--mod-breadcrumbs-icon-spacing-block-compact",
-    "--mod-breadcrumbs-icon-spacing-block-start-multiline",
     "--mod-breadcrumbs-inline-end",
     "--mod-breadcrumbs-inline-start",
+    "--mod-breadcrumbs-inline-start-to-truncated-menu",
+    "--mod-breadcrumbs-item-dragged-background",
     "--mod-breadcrumbs-item-link-border-radius",
     "--mod-breadcrumbs-line-height",
     "--mod-breadcrumbs-separator-color",
@@ -85,108 +62,93 @@
     "--mod-breadcrumbs-text-color-disabled",
     "--mod-breadcrumbs-text-decoration-gap",
     "--mod-breadcrumbs-text-decoration-thickness",
-    "--mod-breadcrumbs-text-spacing-block-between-multiline",
     "--mod-breadcrumbs-text-spacing-block-end",
-    "--mod-breadcrumbs-text-spacing-block-end-compact",
-    "--mod-breadcrumbs-text-spacing-block-end-multiline",
     "--mod-breadcrumbs-text-spacing-block-start",
-    "--mod-breadcrumbs-text-spacing-block-start-compact",
-    "--mod-breadcrumbs-text-spacing-block-start-multiline"
+    "--mod-breadcrumbs-title-spacing-block-end",
+    "--mod-breadcrumbs-title-spacing-block-start",
+    "--mod-heading-margin-end",
+    "--mod-heading-margin-start"
   ],
   "component": [
     "--spectrum-breadcrumbs-action-button-color",
     "--spectrum-breadcrumbs-action-button-color-disabled",
     "--spectrum-breadcrumbs-action-button-spacing-block",
-    "--spectrum-breadcrumbs-action-button-spacing-block-between-multiline",
-    "--spectrum-breadcrumbs-action-button-spacing-block-compact",
-    "--spectrum-breadcrumbs-action-button-spacing-block-multiline",
     "--spectrum-breadcrumbs-action-button-spacing-inline",
-    "--spectrum-breadcrumbs-action-button-spacing-inline-start",
     "--spectrum-breadcrumbs-block-size",
-    "--spectrum-breadcrumbs-block-size-compact",
-    "--spectrum-breadcrumbs-block-size-multiline",
-    "--spectrum-breadcrumbs-bottom-to-text",
-    "--spectrum-breadcrumbs-bottom-to-text-compact",
     "--spectrum-breadcrumbs-bottom-to-text-multiline",
     "--spectrum-breadcrumbs-end-edge-to-text",
     "--spectrum-breadcrumbs-focus-indicator-color",
     "--spectrum-breadcrumbs-focus-indicator-gap",
     "--spectrum-breadcrumbs-focus-indicator-thickness",
     "--spectrum-breadcrumbs-font-family",
-    "--spectrum-breadcrumbs-font-family-compact",
-    "--spectrum-breadcrumbs-font-family-compact-current",
     "--spectrum-breadcrumbs-font-family-current",
-    "--spectrum-breadcrumbs-font-family-multiline",
-    "--spectrum-breadcrumbs-font-family-multiline-current",
     "--spectrum-breadcrumbs-font-size",
-    "--spectrum-breadcrumbs-font-size-compact",
-    "--spectrum-breadcrumbs-font-size-compact-current",
     "--spectrum-breadcrumbs-font-size-current",
-    "--spectrum-breadcrumbs-font-size-multiline",
-    "--spectrum-breadcrumbs-font-size-multiline-current",
+    "--spectrum-breadcrumbs-font-style",
     "--spectrum-breadcrumbs-font-weight",
-    "--spectrum-breadcrumbs-font-weight-compact",
-    "--spectrum-breadcrumbs-font-weight-compact-current",
     "--spectrum-breadcrumbs-font-weight-current",
-    "--spectrum-breadcrumbs-font-weight-multiline",
-    "--spectrum-breadcrumbs-font-weight-multiline-current",
-    "--spectrum-breadcrumbs-height",
-    "--spectrum-breadcrumbs-height-compact",
     "--spectrum-breadcrumbs-height-multiline",
     "--spectrum-breadcrumbs-icon-spacing-block",
-    "--spectrum-breadcrumbs-icon-spacing-block-between-multiline",
-    "--spectrum-breadcrumbs-icon-spacing-block-compact",
-    "--spectrum-breadcrumbs-icon-spacing-block-start-multiline",
     "--spectrum-breadcrumbs-inline-end",
     "--spectrum-breadcrumbs-inline-start",
+    "--spectrum-breadcrumbs-inline-start-to-truncated-menu",
+    "--spectrum-breadcrumbs-item-dragged-background",
     "--spectrum-breadcrumbs-item-link-border-radius",
     "--spectrum-breadcrumbs-line-height",
     "--spectrum-breadcrumbs-separator-color",
-    "--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline",
     "--spectrum-breadcrumbs-separator-spacing-inline",
-    "--spectrum-breadcrumbs-start-edge-to-text",
+    "--spectrum-breadcrumbs-separator-to-bottom-text-multiline",
+    "--spectrum-breadcrumbs-start-edge-to-text-large",
+    "--spectrum-breadcrumbs-start-edge-to-text-medium",
+    "--spectrum-breadcrumbs-start-edge-to-text-multiline",
     "--spectrum-breadcrumbs-start-edge-to-truncated-menu",
     "--spectrum-breadcrumbs-text-color",
     "--spectrum-breadcrumbs-text-color-current",
     "--spectrum-breadcrumbs-text-color-disabled",
     "--spectrum-breadcrumbs-text-decoration-gap",
     "--spectrum-breadcrumbs-text-decoration-thickness",
-    "--spectrum-breadcrumbs-text-spacing-block-between-multiline",
     "--spectrum-breadcrumbs-text-spacing-block-end",
-    "--spectrum-breadcrumbs-text-spacing-block-end-compact",
-    "--spectrum-breadcrumbs-text-spacing-block-end-multiline",
     "--spectrum-breadcrumbs-text-spacing-block-start",
-    "--spectrum-breadcrumbs-text-spacing-block-start-compact",
-    "--spectrum-breadcrumbs-text-spacing-block-start-multiline",
+    "--spectrum-breadcrumbs-text-to-separator-large",
+    "--spectrum-breadcrumbs-text-to-separator-medium",
+    "--spectrum-breadcrumbs-text-to-separator-multiline",
+    "--spectrum-breadcrumbs-title-spacing-block-end",
+    "--spectrum-breadcrumbs-title-spacing-block-start",
     "--spectrum-breadcrumbs-top-text-to-bottom-text",
-    "--spectrum-breadcrumbs-top-to-separator-icon",
-    "--spectrum-breadcrumbs-top-to-separator-icon-compact",
-    "--spectrum-breadcrumbs-top-to-separator-icon-multiline",
-    "--spectrum-breadcrumbs-top-to-text",
-    "--spectrum-breadcrumbs-top-to-text-compact",
+    "--spectrum-breadcrumbs-top-to-separator-large",
+    "--spectrum-breadcrumbs-top-to-separator-medium",
+    "--spectrum-breadcrumbs-top-to-separator-multiline",
     "--spectrum-breadcrumbs-top-to-text-multiline",
     "--spectrum-breadcrumbs-top-to-truncated-menu",
-    "--spectrum-breadcrumbs-top-to-truncated-menu-compact",
     "--spectrum-breadcrumbs-truncated-menu-to-bottom-text",
-    "--spectrum-breadcrumbs-truncated-menu-to-separator-icon"
+    "--spectrum-breadcrumbs-truncated-menu-to-separator"
   ],
   "global": [
     "--spectrum-bold-font-weight",
-    "--spectrum-corner-radius-100",
+    "--spectrum-component-bottom-to-text-100",
+    "--spectrum-component-bottom-to-text-200",
+    "--spectrum-component-height-100",
+    "--spectrum-component-height-200",
+    "--spectrum-component-top-to-text-100",
+    "--spectrum-component-top-to-text-200",
+    "--spectrum-corner-radius-small-default",
+    "--spectrum-default-font-style",
     "--spectrum-disabled-content-color",
+    "--spectrum-drop-zone-background-color-opacity",
+    "--spectrum-drop-zone-background-color-rgb",
+    "--spectrum-extra-bold-font-weight",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-font-size-100",
     "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
     "--spectrum-font-size-75",
+    "--spectrum-heading-size-l",
     "--spectrum-line-height-100",
     "--spectrum-neutral-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-underline-gap",
     "--spectrum-text-underline-thickness"
   ],