From 0fe2a32ea06c71607ede8e577755bb65450c8778 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. 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 --- .changeset/fresh-crabs-deliver.md | 16 + components/breadcrumb/dist/metadata.json | 120 +++----- components/breadcrumb/index.css | 279 +++++++----------- components/breadcrumb/package.json | 2 +- .../breadcrumb/stories/breadcrumb.stories.js | 248 +++++++++++----- .../breadcrumb/stories/breadcrumb.test.js | 151 +++++----- components/breadcrumb/stories/template.js | 70 ++++- yarn.lock | 2 +- 8 files changed, 472 insertions(+), 416 deletions(-) create mode 100644 .changeset/fresh-crabs-deliver.md diff --git a/.changeset/fresh-crabs-deliver.md b/.changeset/fresh-crabs-deliver.md new file mode 100644 index 00000000000..8197b9cc588 --- /dev/null +++ b/.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. diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 96f608af79c..35fb0b03993 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/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" ], diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index 11e5a68e03b..d8d46e277dc 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -12,88 +12,46 @@ */ .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); + --spectrum-breadcrumbs-font-style: var(--spectrum-default-font-style); - /* 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); + --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-small-default); /* Colors */ --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default); @@ -102,72 +60,63 @@ --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); + --spectrum-breadcrumbs-item-dragged-background: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); + + /* 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,40 +124,15 @@ position: relative; display: inline-flex; white-space: nowrap; - align-items: center; font-family: var(--mod-breadcrumbs-font-family, var(--spectrum-breadcrumbs-font-family)); font-size: var(--mod-breadcrumbs-font-size, var(--spectrum-breadcrumbs-font-size)); font-weight: var(--mod-breadcrumbs-font-weight, var(--spectrum-breadcrumbs-font-weight)); + font-style: var(--mod-breadcrumbs-font-style, var(--spectrum-breadcrumbs-font-style)); 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 +143,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 +154,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 +169,43 @@ .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))); + /* Create new stacking context for negative z-index dragged pseudo element. */ + isolation: isolate; + 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 +214,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 +232,40 @@ 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; +.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink::before { + background: var(--mod-breadcrumbs-item-dragged-background, var(--spectrum-breadcrumbs-item-dragged-background)); - border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); + /* Make sure the background color does not appear on top of the text. */ + z-index: -1; +} + +/* Multiline */ +.spectrum-Breadcrumbs--multiline { + flex-wrap: wrap; + align-content: center; + + /* 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/package.json b/components/breadcrumb/package.json index 8e9fca18147..e8a3c50e63c 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -33,7 +33,7 @@ "peerDependencies": { "@spectrum-css/actionbutton": ">=6", "@spectrum-css/icon": ">=7", - "@spectrum-css/tokens": ">=14.0.0-next.3" + "@spectrum-css/tokens": ">=14.0.0-next.12" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index a25c76c285c..84302d77c29 100644 --- a/components/breadcrumb/stories/breadcrumb.stories.js +++ b/components/breadcrumb/stories/breadcrumb.stories.js @@ -1,44 +1,136 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDragged } from "@spectrum-css/preview/types"; +import { isDragged, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { BreadcrumbGroup } from "./breadcrumb.test.js"; -import { Template } from "./template.js"; +import { BreadcrumbTitleHeadings, Template } from "./template.js"; /** * Breadcrumbs show hierarchy and navigational context for a user's location within an app. - * - * ## Nesting - * Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. They are typically indicated by the truncated menu folder icon. - * - * The nested variants below are non-functional. Implementations can add their own overflow menus to display all options within a breadcrumb. - * - * ## Root Context - * Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory called “On this device” is very helpful. */ export default { title: "Breadcrumbs", component: "Breadcrumbs", argTypes: { - items: { table: { disable: true } }, + items: { + name: "Breadcrumb items", + description: "Additional breadcrumb items after the nav root item, including their label text.
Advanced:", + control: "array", + table: { + category: "Content", + }, + }, + size: { + ...size(["m", "l"]), + if: { arg: "variant", neq: "multiline" }, + }, 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 a breadcrumb item as if something is currently being dragged on top of it.", + }, + 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" }, + }, + showTruncatedMenu: { + name: "Show truncated menu", + description: "Displays a breadcrumb item with a folder icon, that would house truncated breadcrumb items.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + showRootContext: { + name: "Show with root context", + description: "Includes a visible breadcrumb item before the truncated menu, for displaying a root directory.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + if: { arg: "showTruncatedMenu" }, + }, + truncatedMenuIsDisabled: { + name: "Show truncated menu as disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + if: { arg: "showTruncatedMenu" }, + }, + rootItemText: { + name: "Root breadcrumb item label", + type: { name: "string" }, + defaultValue: "Nav root", + table: { + type: { summary: "string" }, + category: "Content", + }, + control: "text", }, - isDragged, }, args: { rootClass: "spectrum-Breadcrumbs", isDragged: false, - variant: "default", + variant: undefined, + size: "m", + showTruncatedMenu: false, + showRootContext: false, + truncatedMenuIsDisabled: false, + rootItemText: "Nav root", + items: [ + { + label: "Sub item", + isDragged: true, + }, + { + label: "Trend", + }, + { + label: "January 2019 assets", + }, + ], }, parameters: { design: { @@ -52,33 +144,21 @@ 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 = { - items: [ - { - label: "Nav root", - }, - { - label: "Trend", - isDragged: true, - }, - { - label: "January 2019 assets", - }, - ], -}; +Default.args = {}; +/** + * Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. This truncated menu is an icon only action button that typically displays a folder icon. + * + * The nested variants below are non-functional. Implementations should make sure to follow the design guidelines for overflow behavior and displaying all options within the truncated menu. + */ export const DefaultNested = Template.bind({}); DefaultNested.args = { + showTruncatedMenu: true, items: [ - { - iconName: "FolderOpen", - iconSet: "workflow", - }, - { - label: "Sub item", - }, { label: "Trend", }, @@ -91,18 +171,18 @@ DefaultNested.tags = ["!dev"]; DefaultNested.parameters = { chromatic: { disableSnapshot: true }, }; -DefaultNested.storyName = "Default, nested"; +DefaultNested.storyName = "Default, nested (truncated menu)"; +/** + * Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are + * truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory + * called “On this device” is very helpful. + */ export const DefaultNestedRootVisible = Template.bind({}); DefaultNestedRootVisible.args = { + showTruncatedMenu: true, + showRootContext: true, items: [ - { - label: "Nav root", - }, - { - iconName: "FolderOpen", - iconSet: "workflow", - }, { label: "Trend", }, @@ -115,7 +195,7 @@ DefaultNestedRootVisible.tags = ["!dev"]; DefaultNestedRootVisible.parameters = { chromatic: { disableSnapshot: true }, }; -DefaultNestedRootVisible.storyName = "Default, nested (root visible)"; +DefaultNestedRootVisible.storyName = "Default, nested with root context"; /** * The multiline variation places emphasis on the selected breadcrumb item as a page title, helping a user to more clearly identify their current location. @@ -135,7 +215,7 @@ MultilineNested.args = { ...DefaultNested.args, variant: "multiline", }; -MultilineNested.storyName = "Multiline, nested"; +MultilineNested.storyName = "Multiline, nested (truncated menu)"; MultilineNested.tags= ["!dev"]; MultilineNested.parameters = { chromatic: { disableSnapshot: true }, @@ -150,45 +230,47 @@ MultilineNestedRootVisible.tags = ["!dev"]; MultilineNestedRootVisible.parameters = { chromatic: { disableSnapshot: true }, }; -MultilineNestedRootVisible.storyName = "Multiline, nested (root visible)"; +MultilineNestedRootVisible.storyName = "Multiline, nested with root context"; /** - * 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 (truncated menu)"; -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 with root context"; /** * 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,21 +283,16 @@ 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 truncated menu action button, the `[disabled]` attribute is applied. */ export const Disabled = Template.bind({}); Disabled.args = { + showTruncatedMenu: true, + truncatedMenuIsDisabled: true, items: [ { - label: "Nav root", - }, - { - iconName: "FolderOpen", - iconSet: "workflow", - isDisabled: true, - }, - { - label: "Trendy", + label: "Trend", isDisabled: true, }, { @@ -228,6 +305,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](/docs/components-typography--docs). 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 = { + ...Multiline.args, + showTruncatedMenu: true, +}; +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/breadcrumb.test.js b/components/breadcrumb/stories/breadcrumb.test.js index f5e33d71c58..ef56e21e722 100644 --- a/components/breadcrumb/stories/breadcrumb.test.js +++ b/components/breadcrumb/stories/breadcrumb.test.js @@ -1,109 +1,94 @@ import { Variants } from "@spectrum-css/preview/decorators"; -import { Template } from "./template.js"; - -const DefaultItems = [ - { - label: "Nav root", - }, - { - label: "Dragged", - isDragged: true, - }, - { - label: "Disabled sub item", - isDisabled: true, - }, - { - label: "January 2019 assets", - }, -]; - -const NestedItems = [ - { - iconName: "FolderOpen", - iconSet: "workflow", - }, - { - label: "Dragged", - isDragged: true, - }, - { - label: "Disabled", - isDisabled: true, - }, - { - label: "January 2019 assets", - }, -]; - -const NestedRootVisibleItems = [ - { - label: "Nav root", - }, - { - iconName: "FolderOpen", - iconSet: "workflow", - isDisabled: true, - }, - { - label: "Dragged sub item", - isDragged: true, - }, - { - label: "January 2019 assets", - }, -]; +import { BreadcrumbTitleHeadings, Template } from "./template.js"; export const BreadcrumbGroup = Variants({ Template, + withSizes: false, testData: [ { testHeading: "Default", - items: DefaultItems, - }, - { - testHeading: "Default (nested)", - items: NestedItems, }, { - testHeading: "Default (nested, root visible)", - items: NestedRootVisibleItems, + testHeading: "Large", + size: "l", }, { - testHeading: "Compact", - variant: "compact", - items: DefaultItems, + testHeading: "Multiline", + variant: "multiline", }, { - testHeading: "Compact (nested)", - variant: "compact", - items: NestedItems, + testHeading: "Multiline with typography headings", + variant: "multiline", + withStates: false, + Template: BreadcrumbTitleHeadings, + showTruncatedMenu: true, + showRootContext: true, + isDragged: true, }, + ], + stateData: [ { - testHeading: "Compact (nested, root visible)", - variant: "compact", - items: NestedRootVisibleItems, + testHeading: "Nested", + showTruncatedMenu: true, }, { - testHeading: "Multiline", - variant: "multiline", - items: DefaultItems, + testHeading: "Nested with root context", + showTruncatedMenu: true, + showRootContext: true, }, { - testHeading: "Multiline (nested)", - variant: "multiline", - items: NestedItems, + testHeading: "Disabled items and dragged item", + isDragged: true, + showTruncatedMenu: true, + truncatedMenuIsDisabled: true, + items: [ + { + label: "Dragged item", + isDragged: true, + }, + { + label: "Disabled sub item", + isDisabled: true, + }, + { + label: "January 2019 assets", + }, + ] }, { - testHeading: "Multiline (nested, root visible)", - variant: "multiline", - items: NestedRootVisibleItems, + testHeading: "Hover", + isDragged: true, + showTruncatedMenu: true, + items: [ + { + label: "Sub item", + isHovered: true, + }, + { + label: "Disabled sub item", + isDisabled: true, + isHovered: true, + }, + { + label: "January 2019 assets", + isHovered: true, + }, + ] }, - ], - stateData: [ { - testHeading: "Dragged, disabled", + testHeading: "Focus-visible", isDragged: true, - } + showTruncatedMenu: true, + items: [ + { + label: "Sub item", + isFocused: true, + }, + { + label: "January 2019 assets", + isFocused: true, + }, + ] + }, ] }); diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js index 3f0db2ad30b..0a0ad48c0d9 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,19 +13,43 @@ export const Template = ({ rootClass = "spectrum-Breadcrumbs", customClasses = [], items = [], + size = "m", variant, isDragged = false, + titleHeadingSize, + showTruncatedMenu = false, + showRootContext = false, + truncatedMenuIsDisabled = false, + rootItemText = "Nav root", } = {}, context = {}) => { + /** + * Build array of breadcrumb items. + * - The presence of the root item and truncated menu are dependent upon controls. + * - The rest of the items, including the current item, come from the `items` array. + */ + const breadcrumbItems = [ + ...(showTruncatedMenu == false || showRootContext == true) ? [{ + label: rootItemText, + }] : [], + ...(showTruncatedMenu == true) ? [{ + iconName: "FolderOpen", + iconSet: "workflow", + isDragged: true, + }] : [], + ...items, + ]; + 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); diff --git a/yarn.lock b/yarn.lock index 56d8b18e5c2..abfbfa0c19a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3623,7 +3623,7 @@ __metadata: peerDependencies: "@spectrum-css/actionbutton": ">=6" "@spectrum-css/icon": ">=7" - "@spectrum-css/tokens": ">=14.0.0-next.3" + "@spectrum-css/tokens": ">=14.0.0-next.12" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true