feat(breadcrumb)!: spectrum 2 migration #3395
Open
+630
−408
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Current changes on main, including bugfixes, to assist with testing with s2, until the base branch is updated with main.
The options and naming around densities has changed in s2. There is now: - Medium / default (was previously "compact") - Large (was previously default) - Multiline (existing) This updates the controls, classes, and tokens around that. It also sets the bulk of the new values for existing custom properties that have changed in s2.
Leverage changing custom property values for --large and --multiline, instead of creating new properties for every variant. This reduces the number of custom properties and slims down the CSS.
Pulls in most of the stories from main, and changes compact stories to large stories-- This commit can be modified or dropped once spectrum-two is up to date with all of the stories and template changes on main. This excludes BreadcrumbGroup, test.js, etc.
Finalize use of s2 tokens defined in design, including new tokens and changes. Adjusts which multiline tokens are applied.
🦋 Changeset detectedLatest commit: 24f863b The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
jawinn
added
S2
jawinn
changed the title
The new specs specified that title item can be customized in the multiline variant, with preferred sizing. This adds support for that in our template and adds a new Storybook control.
jawinn
force-pushed
the
jawinn/css-811-s2-breadcrumbs
branch
from
88c8ac3
to
a819f2b
Compare
File metricsSummaryTotal size: 4.28 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
Detailsbreadcrumb
* Results are not gzipped or minified. * An ASCII character in UTF-8 is 8 bits or 1 byte. |
|
🚀 Deployed on https://pr-3395--spectrum-css.netlify.app |
Adjusts some spacings and the tokens used to make sure that this is adhering to the tokens defined on the design spec. Of note, this helps fix: - Too much horizontal spacing beside truncated menu; there needed to be different spacing for text to separator and truncated menu to separator. To allow this be changed, some margins/paddings were moved around to different elements than before. - Uses correct start edge spacing (previously padding on the ul), which needs to be different for text items and the truncated menu item.
|
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: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
spectrum-Breadcrumbs--compactclass and associated custom properties are removed. The default (medium) breadcrumbs are now sized similar to what was previously called compact.spectrum-Breadcrumbs--largeclass. 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 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 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-multilineThe following mod custom properties have been renamed:
--spectrum-breadcrumbs-action-button-spacing-inline-startis now--spectrum-breadcrumbs-inline-start-to-truncated-menuto 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
titleHeadingSizeworks as expected and documentation around this is clearRegression testing
Validate:
To-do list