feat(breadcrumb)!: spectrum 2 migration #3395

jawinn · 2024-11-13T17:33:55Z

Description

Breadcrumbs 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. This does not currently include the updated S2 icons.

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.

The breadcrumb title can now be customized in the multiline variant using an additional element that uses the typography component's heading classes. This and its preferred sizing have been added to the documentation, a new Docs example, and a new Storybook control titleHeadingSize. Design notes for reference:

The title item can be customized in the multiline variant, but the preferred sizes are Heading (S), Heading (M), Heading (L) (default), and Heading (XL)

The component has been refactored to slim down and simplify its CSS and custom properties, by changing the values of existing custom properties for large and multiline variants.

The drag and drop class has been better documented, and its class now has a background color using drop zone tokens for now per design feedback: "Those two use cases are essentially one in the same, as the breadcrumb item becomes a "drop zone" for that interaction."

The following mod custom properties have been removed:

--mod-breadcrumbs-action-button-spacing-block-between-multiline
--mod-breadcrumbs-action-button-spacing-block-compact
--mod-breadcrumbs-action-button-spacing-block-multiline
--mod-breadcrumbs-block-size-compact
--mod-breadcrumbs-block-size-multiline
--mod-breadcrumbs-font-family-compact
--mod-breadcrumbs-font-family-compact-current
--mod-breadcrumbs-font-family-multiline
--mod-breadcrumbs-font-family-multiline-current
--mod-breadcrumbs-font-size-compact
--mod-breadcrumbs-font-size-compact-current
--mod-breadcrumbs-font-size-multiline
--mod-breadcrumbs-font-size-multiline-current
--mod-breadcrumbs-font-weight-compact
--mod-breadcrumbs-font-weight-compact-current
--mod-breadcrumbs-font-weight-multiline
--mod-breadcrumbs-font-weight-multiline-current
--mod-breadcrumbs-icon-spacing-block-between-multiline
--mod-breadcrumbs-icon-spacing-block-compact
--mod-breadcrumbs-icon-spacing-block-start-multiline
--mod-breadcrumbs-text-spacing-block-between-multiline
--mod-breadcrumbs-text-spacing-block-end-compact
--mod-breadcrumbs-text-spacing-block-end-multiline
--mod-breadcrumbs-text-spacing-block-start-compact
--mod-breadcrumbs-text-spacing-block-start-multiline

The following mod custom properties have been renamed:

--spectrum-breadcrumbs-action-button-spacing-inline-start is now --spectrum-breadcrumbs-inline-start-to-truncated-menu to help clarify what it is used for. The general action button inline spacing is already handled by --mod-breadcrumbs-action-button-spacing-inline.

CSS-811

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Breadcrumbs compared against S2 spec
New t-shirt size "large" exists and "compact" variant no longer exists
Small , medium, and multiline tested
New control titleHeadingSize works as expected and documentation around this is clear

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2024-11-13T17:34:01Z

🦋 Changeset detected

Latest commit: 0bad834

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

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/breadcrumb	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-11-13T17:41:31Z

File metrics

Summary

Total size: 1.73 MB^*
Total change (Δ): 🟢 ⬇ 3.07 KB (-0.17%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
breadcrumb	13.63 KB	🟢 ⬇ 3.07 KB

Details

breadcrumb

Filename	Head	Compared to base
index.css	13.63 KB	🟢 ⬇ 3.07 KB (-18.36%)

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2024-11-13T17:41:40Z

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

jawinn · 2024-11-14T20:01:49Z

I am seeing one issue where the text is rendering a little too high and those elements are greater than 32px tall (33.19px). This is related to line-height and the top and bottom padding token values, which is very similar to the discussion raised a few months back about button and line-height tokens. I'll bring this up with design again in Slack:

rise-erpelding

This looks really good! I only have a few small suggestions within the comments.

Also wondering: are the medium and large for breadcrumbs intended to be variants or t-shirt sizes? Is there some specific guidance somewhere that states that they can't or shouldn't be t-shirt sizes? I think the token specs make them seem more like variants, but the S2/Desktop spec makes them feel a bit more t-shirt size-like. It seems like, especially since --medium and --large are also used for specifying device size, it would be easier and less confusing to name them with the same conventions for t-shirt sizing, and that a future version of the component might follow t-shirt sizing even if this one doesn't. Thoughts?

components/breadcrumb/index.css

rise-erpelding · 2024-11-18T21:10:10Z

components/breadcrumb/index.css

+	flex-flow: row nowrap;
+	align-items: center;
+	justify-content: flex-start;
+	flex: 1 0 0%;


This isn't something introduced in the migration, but I noticed this in the inspector and I'm wondering if there's any consequence to removing it:

Thanks. I've removed this property from the root class, as it only applies to a flex item.

components/breadcrumb/stories/breadcrumb.stories.js

jawinn · 2024-11-14T19:57:01Z

components/breadcrumb/index.css

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


Do you think it's worth splitting --spectrum-breadcrumbs-icon-spacing-block into --spectrum-breadcrumbs-icon-spacing-block-start and --spectrum-breadcrumbs-icon-spacing-block-end versus setting them both in one like this? Same question for --spectrum-breadcrumbs-action-button-spacing-block.

components/breadcrumb/index.css

components/breadcrumb/stories/breadcrumb.stories.js

jawinn · 2024-12-20T22:02:16Z

Also wondering: are the medium and large for breadcrumbs intended to be variants or t-shirt sizes? Is there some specific guidance somewhere that states that they can't or shouldn't be t-shirt sizes? I think the token specs make them seem more like variants, but the S2/Desktop spec makes them feel a bit more t-shirt size-like. It seems like, especially since --medium and --large are also used for specifying device size, it would be easier and less confusing to name them with the same conventions for t-shirt sizing, and that a future version of the component might follow t-shirt sizing even if this one doesn't. Thoughts?

I've gone ahead and moved things around so large is now --sizeL, and there are separate size and variant controls. I agree that this seems better given that these are trying to align more with t-shirt sizes (there is a whole specs section under "reason for token updates" that goes over it). The way it previously was a variant and is presented in the designs where it's either default(medium), large, or multiline had made it feel like a variant. But I think this was is more consistent and future-proof if additional sizes get added.

jawinn · 2024-12-20T22:08:28Z

There are two things that I'd like to get answers on before re-review:

The action button is no longer displaying correctly on the spectrum-two branch. After this branch was rebased, the border on breadcrumb's quiet action button started showing. We'll have to look into what happened there and get that fixed on spectrum-two.
There was no design for "dragged". I updated the docs around this option after I figured out what it's doing. I'll ask design for specs on this; the older guidelines were showing a background color change that I don't see.

Expanding the existing themes system to support the new S2 mappings. --- Co-authored-by: castastrophe <[email protected]> Co-authored-by: Patrick Fulton <[email protected]> Co-authored-by: Cory Dransfeldt <[email protected]> Co-authored-by: Aziz Ramos <[email protected]> Co-authored-by: Josh Winn <[email protected]> Co-authored-by: Rise Erpelding <[email protected]> Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: TarunAdobe <[email protected]> Co-authored-by: Dragan Eror<[email protected]>

* feat: s2 foundations non-gray-800 colors update * add changeset

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

--- Co-authored-by: TarunAdobe <[email protected]>

* feat(dialog)!: s2 standard dialog migration * docs(dialog): dialog controls/coverage - adds new features/behaviors such as the checkbox in the footer, wrapping for footer/header content, being able to have close button and button group, hasHeroImage - removes Divider support in dialog - adds is-hidden-story to replicate what is on main and remove most stories from the sidebar - adds some comments and TODOs giving context to this choice - removes layout from control table from default argTypes - removes hasFooter from control table for fullscreen/fullscreenTakeover argTypes - adds a comment to explain the custom argTypes changes for those stories - also adds a comment about multiple conditionals for argTypes * refactor(modal): use corner-radius-extra-large-default to match design specs * fix(underlay): update comment notes for spectrum-overlay-color - also comments out a duplicated custom property and adds a TODO comment * refactor(dialog): new css for S2 dialog - adds some opportunities for mod properties - fixes dismissible grid spacing between additional header content and close button - scope passthrough mods to spectrum-Dialog class - add flex-direction: column to footer (this should allow the footer content and button group to stack at small screens at smallest dialog sizes on the mobile scale.) * feat(dialog): rebuild mods - lots of mods are renamed to use "standard dialog" language * chore(dialog): create changeset * chore(dialog): update peer deps data - remove divider from peerDependencies and peerDependenciesMeta - adds closebutton, checkbox and typography to peerDependenciesMeta * chore: remove divider tests * chore(buttongroup): add flex-wrap mod property * chore(buttongroup): creates buttongroup changeset * chore(buttongroup,dialog): rebuild mods * fix(dialog): platform custom variables - calls for --spectrum-standard-dialog-spacing-edge-to-content * chore(tokens): create changeset for custom standard dialog token * chore(tray): fix spelling of isDismissible arg * fix(dialog,modal): custom styles for modal background color - because modal was originally setting the background color of dialogs, there was some 'antialiasing bleed through' behind the dialog. By adding customStyles to Modal, we can set --mod-modal-background-color to transparent and get rid of the hairline color (especially noticeable behind a hero image in a dialog) * docs(dialog): adds modal background color documentation * fix(dialog): use font-stack instead of font-family * docs(dialog): rebase fixes - override layout:centered parameter with layout:padded instead so the dialogs are visible on their canvases on the docs page.

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Icons were not loading on the spectrum-two branch. The fetchIconSVG function is not working (this function no longer exists in main). This is a light touch update so icons appear, until spectrum-two is back up to date with main.

* feat(alertbanner): start migration to spectrum two Migrates the component to spectrum two. - Theme files are removed, and their custom properties integrated into the main index.css. - Renames misspelled mod custom property (noted in docs) - Simplifies background color styles by changing a single custom property per variant, as done on other components. * feat(alertbanner): spectrum 2 spacing and mod name cleanup Adjust some spacings to match the Spectrum 2 spec spacing. And renames some mods so they are more consistent with current naming conventions, and their purpose is more clear. === Update spacing to match the Spectrum 2 spec === One issue with the S1 version was that there was too much space between the text and the button, when the button wrapped to the next line. And there was a different token defined for the space from the bottom edge to the text, and vertically between the button and the text. This helps resolve this by moving some of the spacing to padding on the AlertBanner-body, and subtracting this value from some of the other custom properties. Along with using both column-gap and row-gap properties. === adjust storybook template spacing and decorator === Improves spacing in Storybook template, especially the Chromatic only template. Decorator and wrapper styles are modeled after those used in Action button, so they look more similar. Previously the layout was a little cramped and the "detail" elements were missing their margins because they were display inline. * docs(alertbanner): custom storybook docs page and template updates Creates a custom MDX docs page in Storybook for the Alert banner component. And reworks the stories and chromatic-only templates a little to facilitate and increase coverage. Includes Storybook VRT coverage for the max width changes in PR #2762 . Tests the display of the alert banner when in a container larger than and smaller than its max-inline-size. * chore(alertbanner): linter updates and update mods - Add stylelint disable line comments for some false positives caught by the linter. - Re-generate mods file * docs(alertbanner): use stories and template from main Use the stories and updated template from main, with a few things left out that are not yet available in the spectrum-two branch. * feat(alertbanner): support no close button or no action button Adds spacing to the end of the alert banner when the close button is not displayed, or both the close button and action button are not displayed. These are allowed combinations of options. * feat(alertbanner): use spec defined line-height token * feat(alertbanner): add font-family token and mod * feat(alertbanner): add cjk line-height * feat(alertbanner): remove unnecessary styles for end element Remove styles for .spectrum-AlertBanner-end, which were no longer doing anything after the removal of the divider.

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Storybook foundations pages now display as a single page instead of in folders with their example stories appearing. These now use the newer !dev tag to hide them. The old custom "foundation" tag was previously used to hide them, but this tag is no longer used. Also fixes some linter errors encountered during commit; a couple unused variables and incorrect typeof comparisons.

marissahuysentruyt

This first pass was just TODOs now that spectrum-two got its mega-update (I know we're waiting on some fixes and questions before another deep review). Looks like we can probably refactor in a couple places to use Container and size.

components/breadcrumb/stories/template.js

components/breadcrumb/stories/breadcrumb.stories.js

* fix(search): restore missing custom properties * fix(colorwheel): restore missing custom properties * fix(assetcard): restore missing custom properties * fix(treeview): restore missing custom properties Restore missing properties from foundations that were flagged by the linter. * fix(combobox): restore missing custom properties Restore missing properties from foundations that were flagged by the linter. Also removes a group of duplicate custom property definitions that were flagged.

…3471) * fix(popover): define --spectrum-popover-border-width in index.css * fix(well): define --spectrum-well-border-color in index.css * fix(tabs): define --spectrum-tabs-font-weight * fix(toast): define default background color and divider color * fix(tag): define undefined custom properties * fix(menu): define menu item background colors * fix(textfield): define undefined custom properties

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.

rise-erpelding

I see that this needs a rebase and the PR currently is showing as 979 Files changed, so I won't pop my suggestions inline in case they get lost:

breadcrumb.stories.js

I'm seeing that multiline only comes in one size, is that right? Perhaps we could make some small modifications to the storybook size control to hide it for multiline like:

export default {
    title: "Breadcrumbs",
    component: "Breadcrumbs",
    argTypes: {
	   /* other argTypes */
	    size: {...size(["m", "l"]),
		    description: "For the default variant only, multiline breadcrumbs only come in one size",
		    if: { arg: "variant", neq: "multiline" },
	    },
                /* other argTypes */

It’d be nice to have the nested variant in the controls, but given our timeline and the way that this works in the template I’m not sure the juice is worth the squeeze in this case - unless there's a good argument for keeping that control out of storybook, maybe we can write a card for follow-up?

breadcrumb.test.js

Looks like we need to take out the compact tests. I think that should be an easy fix!
This might be something I'm missing due to my lack of knowledge on this component, but should the nested/folder action button be disabled in this test case for default nested root visible (also for the multiline nested root visible)?
Dragged items aren't rendering properly in the testing preview, I'm getting this blue line peeking out only. This looks like some issue related to the z-index. They look fine in the default story so I'm not too concerned about it. This could also get moved out to a follow-up issue in the interest of time if it can't be fixed here.
It would be nice to add a test case for sizing with the nested variant, to be able to confirm that the action button will change its size when the breadcrumb does. This could be adjusted outside of this PR along with the other items I've already mentioned if necessary.
Same for displaying down, hover, focus on the breadcrumb item in tests. Nice to have, but can be split into a follow-up card as needed.

No notes on the CSS though! Great job!

jawinn added S2 Spectrum 2 size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. labels Nov 13, 2024

jawinn changed the title ~~feat(breadcrumb): spectrum 2 migration~~ feat(breadcrumb)!: spectrum 2 migration Nov 13, 2024

jawinn force-pushed the jawinn/css-811-s2-breadcrumbs branch from 88c8ac3 to a819f2b Compare November 13, 2024 17:38

jawinn marked this pull request as draft November 13, 2024 19:31

jawinn marked this pull request as ready for review November 14, 2024 20:14

jawinn added the ready-for-review label Nov 14, 2024

rise-erpelding self-requested a review November 18, 2024 15:40

rise-erpelding requested changes Nov 18, 2024

View reviewed changes

jawinn commented Dec 2, 2024

View reviewed changes

castastrophe force-pushed the spectrum-two branch 3 times, most recently from cdb180d to 27d01df Compare December 4, 2024 14:54

jawinn force-pushed the jawinn/css-811-s2-breadcrumbs branch from 74ba42e to 402c6c6 Compare December 20, 2024 21:54

castastrophe force-pushed the spectrum-two branch 4 times, most recently from 59d0428 to e6d16bd Compare December 29, 2024 18:12

castastrophe and others added 6 commits December 29, 2024 13:29

feat: bug fixes for reducing theming variables

e3e37b4

feat: s2 foundations non-gray-800 colors update (#3413)

6082064

* feat: s2 foundations non-gray-800 colors update * add changeset

chore: release (s2-foundations) (#3421)

6615348

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

fix(combobox): update border color in spectrum-two

aef4ea3

--- Co-authored-by: TarunAdobe <[email protected]>

fix(picker): update background and border color

8b98218

--- Co-authored-by: TarunAdobe <[email protected]>

castastrophe and others added 10 commits December 29, 2024 14:00

fix(pagination): deprecate legacy features to align with foundations

c992003

chore: release (next) (#3379)

b968966

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

fix(icon): fix for icons not loading (#3454)

2c43c65

Icons were not loading on the spectrum-two branch. The fetchIconSVG function is not working (this function no longer exists in main). This is a light touch update so icons appear, until spectrum-two is back up to date with main.

chore(tokens): use [email protected] (#3456)

529733e

chore: release (next) (#3457)

6e299d4

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

chore(storybook): standardize down-state decorator

1415f76

build: remove theme processing, site package; add reporter

828fec1

build: add story exports; remove context from storybook

9444cdb

castastrophe force-pushed the spectrum-two branch from e6d16bd to fc916f1 Compare December 29, 2024 19:21

chore: align peerDependencies to local versions

9d7f088

castastrophe force-pushed the spectrum-two branch from fc916f1 to 9d7f088 Compare December 29, 2024 19:50

jawinn force-pushed the jawinn/css-811-s2-breadcrumbs branch 2 times, most recently from 0a56d2b to 5ec2c31 Compare January 2, 2025 19:55

jawinn and others added 2 commits January 3, 2025 16:39

fix: restore undefined custom properties [part 5] (#3475)

52e773e

marissahuysentruyt reviewed Jan 6, 2025

View reviewed changes

jawinn force-pushed the jawinn/css-811-s2-breadcrumbs branch from 5ec2c31 to 5dd5dcc Compare January 6, 2025 17:32

jawinn force-pushed the jawinn/css-811-s2-breadcrumbs branch from 5dd5dcc to 09ec32f Compare January 8, 2025 16:55

jawinn added 2 commits January 8, 2025 12:09

feat(breadcrumb)!: spectrum 2 migration

9c36ba4

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.

chore(breadcrumb): add changeset for s2 migration

0bad834

jawinn force-pushed the jawinn/css-811-s2-breadcrumbs branch from 4f5e490 to 0bad834 Compare January 8, 2025 17:10

jawinn requested review from marissahuysentruyt and rise-erpelding January 8, 2025 18:32

castastrophe force-pushed the spectrum-two branch 2 times, most recently from b438a55 to 46ae687 Compare January 17, 2025 03:43

rise-erpelding reviewed Jan 17, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(breadcrumb)!: spectrum 2 migration #3395

feat(breadcrumb)!: spectrum 2 migration #3395

jawinn commented Nov 13, 2024 •

edited

Loading

changeset-bot bot commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

breadcrumb

github-actions bot commented Nov 13, 2024 •

edited

Loading

jawinn commented Nov 14, 2024

rise-erpelding left a comment

rise-erpelding Nov 18, 2024

jawinn Dec 20, 2024

jawinn Nov 14, 2024

jawinn commented Dec 20, 2024

jawinn commented Dec 20, 2024 •

edited

Loading

marissahuysentruyt left a comment

rise-erpelding left a comment

feat(breadcrumb)!: spectrum 2 migration #3395

Are you sure you want to change the base?

feat(breadcrumb)!: spectrum 2 migration #3395

Conversation

jawinn commented Nov 13, 2024 • edited Loading

Description

Breadcrumbs Spectrum 2 Migration

How and where has this been tested?

Validation steps

Regression testing

To-do list

changeset-bot bot commented Nov 13, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Nov 13, 2024 • edited Loading

File metrics

Summary

breadcrumb

github-actions bot commented Nov 13, 2024 • edited Loading

jawinn commented Nov 14, 2024

rise-erpelding left a comment

Choose a reason for hiding this comment

rise-erpelding Nov 18, 2024

Choose a reason for hiding this comment

jawinn Dec 20, 2024

Choose a reason for hiding this comment

jawinn Nov 14, 2024

Choose a reason for hiding this comment

jawinn commented Dec 20, 2024

jawinn commented Dec 20, 2024 • edited Loading

marissahuysentruyt left a comment

Choose a reason for hiding this comment

rise-erpelding left a comment

Choose a reason for hiding this comment

jawinn commented Nov 13, 2024 •

edited

Loading

changeset-bot bot commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

jawinn commented Dec 20, 2024 •

edited

Loading