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.

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.

marissahuysentruyt · 2025-01-06T15:52:35Z

components/breadcrumb/stories/template.js

+/**
+ * Displays all preferred sizes for breadcrumb title headings used with the multiline variant.
+ *
+ * TODO: make sure of Container() with headings when S2 is in sync with the main branch again.


Now that we're more updated, can we in fact import Container() to use here?

This template function is now updated to make use of Container().

components/breadcrumb/stories/breadcrumb.stories.js

marissahuysentruyt · 2025-01-06T15:58:46Z

components/breadcrumb/stories/breadcrumb.stories.js

-		isDragged,
+		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.",


I think there's an extra space between "small" and "medium."

Fixed, thanks.

marissahuysentruyt · 2025-01-06T16:05:22Z

components/breadcrumb/stories/breadcrumb.stories.js

+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["m", "l"],
+			control: {
+				type: "select",
+				labels: {
+					m: "Medium",
+					l: "Large",
+				},
+			},
+		},


We have the size type!

import { size } from "@spectrum-css/preview/types"; size: size(["m", "l"]),

👍 This now uses the size type.

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.

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 6 times, most recently 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

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

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

marissahuysentruyt Jan 6, 2025

jawinn Jan 6, 2025

marissahuysentruyt Jan 6, 2025

jawinn Jan 6, 2025

marissahuysentruyt Jan 6, 2025

jawinn Jan 6, 2025

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this 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