From 5dd5dcc3836963825fe3671cf642c4eb040782cf Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Thu, 2 Jan 2025 12:49:20 -0500 Subject: [PATCH] feat(breadcrumb)!: spectrum 2 migration 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. --- components/breadcrumb/index.css | 264 +++++++----------- components/breadcrumb/metadata/metadata.json | 111 +++----- .../breadcrumb/stories/breadcrumb.stories.js | 114 ++++++-- components/breadcrumb/stories/template.js | 40 ++- 4 files changed, 253 insertions(+), 276 deletions(-) diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index 11e5a68e03b..bdbf22a3b4d 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -12,87 +12,44 @@ */ .spectrum-Breadcrumbs { - /* block size */ - --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); - --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); + --spectrum-breadcrumbs-block-size: var(--spectrum-component-height-100); - /* text regular */ + /* Text - medium / default */ --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100); - --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-100); --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - /* text regular active item */ - --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-100); --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack); --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - /* text compact */ - --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); - - /* text compact active item */ - --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight); - - /* text multiline */ - --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight); - - /* text multiline active item */ - --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300); - --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight); - - /* hover, active, focus underline */ + /* Hover, active, focus underline */ --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness); --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); - /* space between items */ - --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100); - - /* vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text); - --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text); - --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon); + /* Space between separator chevron and items */ + --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-breadcrumbs-text-to-separator-medium); - /* compact vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact); - --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact); - --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact); + /* Vertical spacing for text and separator icon */ + --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-component-top-to-text-100); + --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-component-bottom-to-text-100); + --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-medium); + --spectrum-breadcrumbs-title-spacing-block-start: var(--spectrum-breadcrumbs-text-spacing-block-start); + --spectrum-breadcrumbs-title-spacing-block-end: var(--spectrum-breadcrumbs-text-spacing-block-end); - /* multiline vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); /* vertical between lines */ - --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline); - --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); /* vertical between lines */ - - /* horizontal outer spacing of list */ - --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text); + /* Horizontal outer spacing of list */ + --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text-medium); --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); + --spectrum-breadcrumbs-inline-start-to-truncated-menu: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); - /* menu action button icon spacing */ - --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon); - - /* action button spacing */ + /* Action button (truncated menu) spacing */ + --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator); --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu); - --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* compact */ - - --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); /* if icon is first item */ - --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* multiline */ - --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); /* multiline */ - - /* Focus Indicator */ + /* Focus indicator */ --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* placeholder for border radius for focus indicator */ --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100); /* Colors */ @@ -102,72 +59,62 @@ --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default); --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); + + /* Sub-component: heading */ + --mod-heading-margin-end: 0px; + --mod-heading-margin-start: 0px; } -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Breadcrumbs { - --highcontrast-breadcrumbs-text-color: LinkText; - --highcontrast-breadcrumbs-text-color-current: CanvasText; - --highcontrast-breadcrumbs-text-color-disabled: GrayText; - --highcontrast-breadcrumbs-separator-color: CanvasText; - --highcontrast-breadcrumbs-action-button-color: LinkText; - --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; +.spectrum-Breadcrumbs--sizeL { + --spectrum-breadcrumbs-block-size: var(--spectrum-component-height-200); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; - } + --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-breadcrumbs-text-to-separator-large); + --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-component-top-to-text-200); + --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-component-bottom-to-text-200); + --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-large); + --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text-large); +} + +.spectrum-Breadcrumbs--multiline { + --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height-multiline); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-75); + --spectrum-breadcrumbs-font-size-current: var(--spectrum-heading-size-l); + --spectrum-breadcrumbs-font-weight-current: var(--spectrum-extra-bold-font-weight); + + --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-breadcrumbs-text-to-separator-multiline); + --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text-multiline); + --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-top-text-to-bottom-text); + --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-multiline) var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline); + --spectrum-breadcrumbs-title-spacing-block-start: 0; + --spectrum-breadcrumbs-title-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text-multiline); + --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text-multiline); + --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu) var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); } .spectrum-Breadcrumbs { list-style-type: none; - margin: 0; - padding-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); - padding-inline-end: var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end)); + padding-inline: 0 var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end)); + block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size)); display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; - flex: 1 0 0%; - - block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size)); -} - -.spectrum-Breadcrumbs--compact { - block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact)); -} - -.spectrum-Breadcrumbs--multiline { - block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline)); - - flex-wrap: wrap; - align-content: center; } .spectrum-Breadcrumbs-itemSeparator { position: relative; - margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block)); - margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); - opacity: 1; color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))); &:dir(rtl) { transform: scaleX(-1); } - - .spectrum-Breadcrumbs--compact & { - margin-block: var(--mod-breadcrumbs-icon-spacing-block-compact, var(--spectrum-breadcrumbs-icon-spacing-block-compact)); - } - - .spectrum-Breadcrumbs--multiline & { - margin-block-start: var(--mod-breadcrumbs-icon-spacing-block-start-multiline, var(--spectrum-breadcrumbs-icon-spacing-block-start-multiline)); - margin-block-end: var(--mod-breadcrumbs-icon-spacing-block-between-multiline, var(--spectrum-breadcrumbs-icon-spacing-block-between-multiline)); - } } .spectrum-Breadcrumbs-item { @@ -175,7 +122,6 @@ position: relative; display: inline-flex; white-space: nowrap; - align-items: center; font-family: var(--mod-breadcrumbs-font-family, var(--spectrum-breadcrumbs-font-family)); @@ -183,32 +129,7 @@ font-weight: var(--mod-breadcrumbs-font-weight, var(--spectrum-breadcrumbs-font-weight)); line-height: var(--mod-breadcrumbs-line-height, var(--spectrum-breadcrumbs-line-height)); - .spectrum-Breadcrumbs--compact & { - font-family: var(--mod-breadcrumbs-font-family-compact, var(--spectrum-breadcrumbs-font-family-compact)); - font-size: var(--mod-breadcrumbs-font-size-compact, var(--spectrum-breadcrumbs-font-size-compact)); - font-weight: var(--mod-breadcrumbs-font-weight-compact, var(--spectrum-breadcrumbs-font-weight-compact)); - - > .spectrum-ActionButton { - margin-block: var(--mod-breadcrumbs-action-button-spacing-block-compact, var(--spectrum-breadcrumbs-action-button-spacing-block-compact)); - } - } - - .spectrum-Breadcrumbs--multiline & { - font-family: var(--mod-breadcrumbs-font-family-multiline, var(--spectrum-breadcrumbs-font-family-multiline)); - font-size: var(--mod-breadcrumbs-font-size-multiline, var(--spectrum-breadcrumbs-font-size-multiline)); - font-weight: var(--mod-breadcrumbs-font-weight-multiline, var(--spectrum-breadcrumbs-font-weight-multiline)); - - &:last-of-type { - block-size: auto; - inline-size: 100%; - } - - > .spectrum-ActionButton { - margin-block-start: var(--mod-breadcrumbs-action-button-spacing-block-multiline, var(--spectrum-breadcrumbs-action-button-spacing-block-multiline)); - margin-block-end: var(--mod-breadcrumbs-action-button-spacing-block-between-multiline, var(--spectrum-breadcrumbs-action-button-spacing-block-between-multiline)); - } - } - + /* Breadcrumbs title (current item) */ &:last-of-type { font-family: var(--mod-breadcrumbs-font-family-current, var(--spectrum-breadcrumbs-font-family-current)); font-size: var(--mod-breadcrumbs-font-size-current, var(--spectrum-breadcrumbs-font-size-current)); @@ -219,27 +140,10 @@ } } - .spectrum-Breadcrumbs--compact &:last-of-type { - font-family: var(--mod-breadcrumbs-font-family-compact-current, var(--spectrum-breadcrumbs-font-family-compact-current)); - font-size: var(--mod-breadcrumbs-font-size-compact-current, var(--spectrum-breadcrumbs-font-size-compact-current)); - font-weight: var(--mod-breadcrumbs-font-weight-compact-current, var(--spectrum-breadcrumbs-font-weight-compact-current)); - } - - .spectrum-Breadcrumbs--multiline &:last-of-type { - font-family: var(--mod-breadcrumbs-font-family-multiline-current, var(--spectrum-breadcrumbs-font-family-multiline-current)); - font-size: var(--mod-breadcrumbs-font-size-multiline-current, var(--spectrum-breadcrumbs-font-size-multiline-current)); - font-weight: var(--mod-breadcrumbs-font-weight-multiline-current, var(--spectrum-breadcrumbs-font-weight-multiline-current)); - - .spectrum-Breadcrumbs-itemLink { - margin-block-start: 0; - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end-multiline, var(--spectrum-breadcrumbs-text-spacing-block-end-multiline)); - } - } - + /* Truncated menu */ > .spectrum-ActionButton { margin-inline: var(--mod-breadcrumbs-action-button-spacing-inline, var(--spectrum-breadcrumbs-action-button-spacing-inline)); margin-block: var(--mod-breadcrumbs-action-button-spacing-block, var(--spectrum-breadcrumbs-action-button-spacing-block)); - color: var(--highcontrast-breadcrumbs-action-button-color, var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))); &:disabled { @@ -247,10 +151,14 @@ } } + /* Start edge to text or truncated menu */ &:first-of-type { - /* if folder icon is first item */ + > .spectrum-Breadcrumbs-itemLink { + margin-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); + } + > .spectrum-ActionButton { - margin-inline-start: var(--mod-breadcrumbs-action-button-spacing-inline-start, var(--spectrum-breadcrumbs-action-button-spacing-inline-start)); + margin-inline-start: var(--mod-breadcrumbs-inline-start-to-truncated-menu, var(--spectrum-breadcrumbs-inline-start-to-truncated-menu)); } } } @@ -258,46 +166,40 @@ .spectrum-Breadcrumbs-itemLink { cursor: default; position: relative; - box-sizing: border-box; - display: block; - border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); /* placeholder for token */ outline: none; - text-decoration: none; color: var(--highcontrast-breadcrumbs-text-color, var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))); margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start, var(--spectrum-breadcrumbs-text-spacing-block-start)); margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end, var(--spectrum-breadcrumbs-text-spacing-block-end)); + margin-inline-start: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); &.is-disabled, &[aria-disabled="true"] { color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))); } + /* Breadcrumbs title (current item) */ .spectrum-Breadcrumbs-item:last-of-type & { color: var(--highcontrast-breadcrumbs-text-color-current, var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))); + margin-block-start: var(--mod-breadcrumbs-title-spacing-block-start, var(--spectrum-breadcrumbs-title-spacing-block-start)); + margin-block-end: var(--mod-breadcrumbs-title-spacing-block-end, var(--spectrum-breadcrumbs-title-spacing-block-end)); } - .spectrum-Breadcrumbs--compact & { - /* compact vertical spacing */ - margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start-compact, var(--spectrum-breadcrumbs-text-spacing-block-start-compact)); - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end-compact, var(--spectrum-breadcrumbs-text-spacing-block-end-compact)); - } - - .spectrum-Breadcrumbs--multiline & { - /* multiline vertical spacing */ - margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start-multiline, var(--spectrum-breadcrumbs-text-spacing-block-start-multiline)); - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-between-multiline, var(--spectrum-breadcrumbs-text-spacing-block-between-multiline)); /* vertical between lines */ + + .spectrum-Breadcrumbs-itemSeparator { + margin-inline-start: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); } + /* Link is focusable */ &[href], &[tabindex="0"] { cursor: pointer; &:hover, + &:active, &:focus-visible { text-decoration: underline; text-decoration-thickness: var(--mod-breadcrumbs-text-decoration-thickness, var(--spectrum-breadcrumbs-text-decoration-thickness)); @@ -306,10 +208,12 @@ } } -/* focus indicator */ +/* Focus indicator */ .spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink::before, .spectrum-Breadcrumbs-itemLink:focus-visible::before { position: absolute; + content: ""; + pointer-events: none; margin-inline-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); margin-block-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); @@ -322,9 +226,33 @@ border-width: var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)); border-style: solid; border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); + border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); +} - content: ""; - pointer-events: none; +/* Multiline */ +.spectrum-Breadcrumbs--multiline { + flex-wrap: wrap; + align-content: center; - border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); + /* The multiline title takes up the full width and appears below the other breadcrumb items. */ + .spectrum-Breadcrumbs-item:last-of-type { + block-size: auto; + inline-size: 100%; + + > .spectrum-Breadcrumbs-itemLink { + margin-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); + } + } +} + +@media (forced-colors: active) { + .spectrum-Breadcrumbs { + --highcontrast-breadcrumbs-text-color: LinkText; + --highcontrast-breadcrumbs-text-color-current: CanvasText; + --highcontrast-breadcrumbs-text-color-disabled: GrayText; + --highcontrast-breadcrumbs-separator-color: CanvasText; + --highcontrast-breadcrumbs-action-button-color: LinkText; + --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; + --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; + } } diff --git a/components/breadcrumb/metadata/metadata.json b/components/breadcrumb/metadata/metadata.json index 96f608af79c..89dad2d2ee3 100644 --- a/components/breadcrumb/metadata/metadata.json +++ b/components/breadcrumb/metadata/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,21 @@ "--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-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-link-border-radius", "--mod-breadcrumbs-line-height", "--mod-breadcrumbs-separator-color", @@ -85,108 +60,88 @@ "--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-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-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-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-100", "--spectrum-disabled-content-color", + "--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" ], diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index 85672637df2..ce59fed3cbe 100644 --- a/components/breadcrumb/stories/breadcrumb.stories.js +++ b/components/breadcrumb/stories/breadcrumb.stories.js @@ -1,9 +1,9 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDragged } from "@spectrum-css/preview/types"; +import { size } from "@spectrum-css/preview/types"; import metadata from "../metadata/metadata.json"; import packageJson from "../package.json"; import { BreadcrumbGroup } from "./breadcrumb.test.js"; -import { Template } from "./template.js"; +import { BreadcrumbTitleHeadings, Template } from "./template"; /** * Breadcrumbs show hierarchy and navigational context for a user's location within an app. @@ -21,24 +21,62 @@ export default { component: "Breadcrumbs", argTypes: { items: { table: { disable: true } }, + size: size(["m", "l"]), variant: { - name: "Variants", + name: "Variant", type: { name: "string" }, defaultValue: "Default", table: { type: { summary: "string" }, category: "Component", - defaultValue: { summary: "Default" }, }, - options: ["default", "compact", "multiline"], - control: "select", + options: [undefined, "multiline"], + control: { + type: "select", + labels: { + undefined: "Default", + multiline: "Multiline", + }, + }, }, - isDragged, + isDragged: { + name: "Show dragged item", + description: "Breadcrumbs can have optional behavior to allow for drag and drop functionality. Setting this to true will style the second breadcrumb item as if something is currently being dragged on top of it.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean" + }, + titleHeadingSize: { + name: "Breadcrumb title heading size", + description: "The breadcrumb title can be customized in the multiline variant using an additional element that uses the typography component's heading classes. The preferred heading sizes are small, medium, large, and extra-large. When no heading classes are used, the text will be sized the same as a large heading by default.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: { + type: "select", + labels: { + undefined: "Default", + s: "Small", + m: "Medium", + l: "Large", + xl: "Extra-large", + }, + }, + defaultValue: undefined, + options: [undefined, "s", "m", "l", "xl"], + if: { arg: "variant", eq: "multiline" }, + } }, args: { rootClass: "spectrum-Breadcrumbs", isDragged: false, - variant: "default", + variant: undefined, + size: "m", }, parameters: { design: { @@ -52,6 +90,8 @@ export default { /** * By default, breadcrumbs are displayed inline with the hierarchy shown in reading order. + * The medium size is used by default, and it should display the medium truncated menu action button. + * The separator UI icon displayed should be `Chevron100`. */ export const Default = BreadcrumbGroup.bind({}); Default.args = { @@ -153,42 +193,44 @@ MultilineNestedRootVisible.parameters = { MultilineNestedRootVisible.storyName = "Multiline, nested (root visible)"; /** - * When needing to optimize for functional space, the compact option is useful for reducing the height of the breadcrumbs while still maintaining the proper user context. + * When using the large size, the truncated menu action button should also use the large size. The separator UI icon displayed should be `Chevron100`. */ -export const Compact = Template.bind({}); -Compact.args = { +export const Large = Template.bind({}); +Large.args = { ...Default.args, - variant: "compact", + size: "l", }; -Compact.tags = ["!dev"]; -Compact.parameters = { +Large.tags = ["!dev"]; +Large.parameters = { chromatic: { disableSnapshot: true }, }; -export const CompactNested = Template.bind({}); -CompactNested.args = { +export const LargeNested = Template.bind({}); +LargeNested.args = { ...DefaultNested.args, - variant: "compact", + size: "l", }; -CompactNested.tags = ["!dev"]; -CompactNested.parameters = { +LargeNested.tags = ["!dev"]; +LargeNested.parameters = { chromatic: { disableSnapshot: true }, }; -CompactNested.storyName = "Compact, nested"; +LargeNested.storyName = "Large, nested"; -export const CompactNestedRootVisible = Template.bind({}); -CompactNestedRootVisible.args = { +export const LargeNestedRootVisible = Template.bind({}); +LargeNestedRootVisible.args = { ...DefaultNestedRootVisible.args, - variant: "compact", + size: "l", }; -CompactNestedRootVisible.tags = ["!dev"]; -CompactNestedRootVisible.parameters = { +LargeNestedRootVisible.tags = ["!dev"]; +LargeNestedRootVisible.parameters = { chromatic: { disableSnapshot: true }, }; -CompactNestedRootVisible.storyName = "Compact, nested (root visible)"; +LargeNestedRootVisible.storyName = "Large, nested (root visible)"; /** * Breadcrumbs can have optional behavior to allow for drag and drop functionality. + * When a breadcrumb item has something being dragged on top of it, the class `is-dragged` is added to it. + * This example adds that class to the second breadcrumb item. */ export const Dragged = Template.bind({}); Dragged.args = { @@ -201,7 +243,8 @@ Dragged.parameters = { }; /** - * The example below has two disabled breadcrumb items. When disabling the text link, the `is-disabled` class gets added to `.spectrum-Breadcrumbs-itemLink`. When disabling the Action button, the `[disabled]` attribute is applied. + * The example below has two disabled breadcrumb items. When disabling the text link, the `is-disabled` class + * gets added to `.spectrum-Breadcrumbs-itemLink`. When disabling the Action button, the `[disabled]` attribute is applied. */ export const Disabled = Template.bind({}); Disabled.args = { @@ -228,6 +271,23 @@ Disabled.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * For the multiline variant, the breadcrumb title can be customized using an additional element that uses the heading classes from + * the [typography component](?path=/docs/components-typography). The preferred heading sizes are `.spectrum-Heading--sizeS`, + * `.spectrum-Heading--sizeM`, `.spectrum-Heading--sizeL` (default), and `.spectrum-Heading--sizeXL`. If no heading element or classes are + * used, the text will be sized the same as a large heading by default. + */ +export const MultilineTitleSizes = BreadcrumbTitleHeadings.bind({}); +MultilineTitleSizes.args = { + ...DefaultNested.args, + variant: "multiline", +}; +MultilineTitleSizes.storyName = "Multiline, title heading sizes"; +MultilineTitleSizes.tags= ["!dev"]; +MultilineTitleSizes.parameters = { + chromatic: { disableSnapshot: true }, +}; + // ********* VRT ONLY ********* // export const WithForcedColors = BreadcrumbGroup.bind({}); WithForcedColors.args = Default.args; diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js index 3f0db2ad30b..4b01b86d6f9 100644 --- a/components/breadcrumb/stories/template.js +++ b/components/breadcrumb/stories/template.js @@ -1,5 +1,7 @@ import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Container } from "@spectrum-css/preview/decorators"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -11,14 +13,17 @@ export const Template = ({ rootClass = "spectrum-Breadcrumbs", customClasses = [], items = [], + size = "m", variant, isDragged = false, + titleHeadingSize, } = {}, context = {}) => { return html` `; }; + +/** + * Displays all preferred sizes for breadcrumb title headings used with the multiline variant. + */ +export const BreadcrumbTitleHeadings = (args, context) => Container({ + withBorder: false, + direction: "column", + wrapperStyles: { + rowGap: "12px", + }, + content: html`${[undefined, "s", "m", "l", "xl"].map((titleHeadingSize) => Container({ + withBorder: true, + heading: typeof titleHeadingSize != "undefined" + ? `Heading size: ${titleHeadingSize}` + : "Default - no heading element or classes", + content: Template({ + ...args, + titleHeadingSize, + }) + }, context))}`, +}, context);