Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(breadcrumb)!: spectrum 2 migration #3395

Open
wants to merge 9 commits into
base: spectrum-two
Choose a base branch
from
+626 −408
Open

feat(breadcrumb)!: spectrum 2 migration #3395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e51e4ca
fix(breadcrumb): latest breadcrumb css and template from main
jawinn Oct 31, 2024
f0d0d6f
feat(breadcrumb): density renaming and set bulk of new s2 values
jawinn Oct 31, 2024
16fe50e
refactor(breadcrumb): simplify layout custom properties and css
jawinn Nov 1, 2024
28e7fd2
feat(breadcrumb): use design defined icon size for each variant
jawinn Nov 4, 2024
2b6372c
docs(breadcrumb): some stories from main for testing
jawinn Nov 4, 2024
d95d895
feat(breadcrumb): finalize s2 changes
jawinn Nov 4, 2024
a819f2b
feat(breadcrumb): add support for multiline headings
jawinn Nov 12, 2024
24f863b
fix(breadcrumb): spacing adjustments to meet spec
jawinn Nov 13, 2024
74ba42e
fix(breadcrumb): update height token and remove unused properties
jawinn Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions .changeset/wet-laws-worry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
"@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, icons, 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--large` 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.
See the documentation for details about this and the preferred sizing. The documentation also has been updated to include information about which
icon sizes should be displayed for each t-shirt size.

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-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`.
544 changes: 234 additions & 310 deletions components/breadcrumb/index.css
View file
Open in desktop

Large diffs are not rendered by default.

89 changes: 33 additions & 56 deletions components/breadcrumb/metadata/mods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,33 @@
| Modifiable custom properties |
| ----------------------------------------------------------------- |
| `--mod-breadcrumbs-action-button-color` |
| `--mod-breadcrumbs-action-button-color-disabled` |
| `--mod-breadcrumbs-action-button-spacing-block` |
| `--mod-breadcrumbs-action-button-spacing-block-between-multiline` |
| `--mod-breadcrumbs-action-button-spacing-block-compact` |
| `--mod-breadcrumbs-action-button-spacing-block-multiline` |
| `--mod-breadcrumbs-action-button-spacing-inline` |
| `--mod-breadcrumbs-action-button-spacing-inline-start` |
| `--mod-breadcrumbs-block-size` |
| `--mod-breadcrumbs-block-size-compact` |
| `--mod-breadcrumbs-block-size-multiline` |
| `--mod-breadcrumbs-focus-indicator-color` |
| `--mod-breadcrumbs-focus-indicator-gap` |
| `--mod-breadcrumbs-focus-indicator-thickness` |
| `--mod-breadcrumbs-font-family` |
| `--mod-breadcrumbs-font-family-compact` |
| `--mod-breadcrumbs-font-family-compact-current` |
| `--mod-breadcrumbs-font-family-current` |
| `--mod-breadcrumbs-font-family-multiline` |
| `--mod-breadcrumbs-font-family-multiline-current` |
| `--mod-breadcrumbs-font-size` |
| `--mod-breadcrumbs-font-size-compact` |
| `--mod-breadcrumbs-font-size-compact-current` |
| `--mod-breadcrumbs-font-size-current` |
| `--mod-breadcrumbs-font-size-multiline` |
| `--mod-breadcrumbs-font-size-multiline-current` |
| `--mod-breadcrumbs-font-weight` |
| `--mod-breadcrumbs-font-weight-compact` |
| `--mod-breadcrumbs-font-weight-compact-current` |
| `--mod-breadcrumbs-font-weight-current` |
| `--mod-breadcrumbs-font-weight-multiline` |
| `--mod-breadcrumbs-font-weight-multiline-current` |
| `--mod-breadcrumbs-icon-spacing-block` |
| `--mod-breadcrumbs-icon-spacing-block-between-multiline` |
| `--mod-breadcrumbs-icon-spacing-block-compact` |
| `--mod-breadcrumbs-icon-spacing-block-start-multiline` |
| `--mod-breadcrumbs-inline-end` |
| `--mod-breadcrumbs-inline-start` |
| `--mod-breadcrumbs-item-link-border-radius` |
| `--mod-breadcrumbs-line-height` |
| `--mod-breadcrumbs-separator-color` |
| `--mod-breadcrumbs-separator-spacing-inline` |
| `--mod-breadcrumbs-text-color` |
| `--mod-breadcrumbs-text-color-current` |
| `--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` |
| Modifiable custom properties |
| -------------------------------------------------- |
| `--mod-breadcrumbs-action-button-color` |
| `--mod-breadcrumbs-action-button-color-disabled` |
| `--mod-breadcrumbs-action-button-spacing-block` |
| `--mod-breadcrumbs-action-button-spacing-inline` |
| `--mod-breadcrumbs-block-size` |
| `--mod-breadcrumbs-focus-indicator-color` |
| `--mod-breadcrumbs-focus-indicator-gap` |
| `--mod-breadcrumbs-focus-indicator-thickness` |
| `--mod-breadcrumbs-font-family` |
| `--mod-breadcrumbs-font-family-current` |
| `--mod-breadcrumbs-font-size` |
| `--mod-breadcrumbs-font-size-current` |
| `--mod-breadcrumbs-font-weight` |
| `--mod-breadcrumbs-font-weight-current` |
| `--mod-breadcrumbs-icon-spacing-block` |
| `--mod-breadcrumbs-inline-end` |
| `--mod-breadcrumbs-inline-start` |
| `--mod-breadcrumbs-inline-start-to-truncated-menu` |
| `--mod-breadcrumbs-item-link-border-radius` |
| `--mod-breadcrumbs-line-height` |
| `--mod-breadcrumbs-separator-color` |
| `--mod-breadcrumbs-separator-spacing-inline` |
| `--mod-breadcrumbs-text-color` |
| `--mod-breadcrumbs-text-color-current` |
| `--mod-breadcrumbs-text-color-disabled` |
| `--mod-breadcrumbs-text-decoration-gap` |
| `--mod-breadcrumbs-text-decoration-thickness` |
| `--mod-breadcrumbs-text-spacing-block-end` |
| `--mod-breadcrumbs-text-spacing-block-start` |
| `--mod-breadcrumbs-title-spacing-block-end` |
| `--mod-breadcrumbs-title-spacing-block-start` |
6 changes: 5 additions & 1 deletion components/breadcrumb/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,18 @@
"peerDependencies": {
"@spectrum-css/actionbutton": ">=6",
"@spectrum-css/icon": ">=7",
"@spectrum-css/tokens": ">=14.0.0-next.3"
"@spectrum-css/tokens": ">=14.0.0-next.3",
"@spectrum-css/typography": ">=6"
},
"peerDependenciesMeta": {
"@spectrum-css/actionbutton": {
"optional": true
},
"@spectrum-css/icon": {
"optional": true
},
"@spectrum-css/typography": {
"optional": true
}
},
"keywords": [
Expand Down
Loading
Loading