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(tag): migrate to Spectrum 2 #2649

Open
wants to merge 5 commits into
base: spectrum-two
Choose a base branch
from
+785 −669
Open

feat(tag): migrate to Spectrum 2 #2649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
826d0bb
feat(tag): migrate to Spectrum 2 (CSS-618)
rise-erpelding Apr 5, 2024
07ba7cd
fix(tag): adjust inline spacing
rise-erpelding Apr 16, 2024
c256c7e
fix(tag): use :last-child for label spacing
rise-erpelding Apr 16, 2024
fc987e5
fix(tag): use :has to conditionally space visuals
rise-erpelding Apr 17, 2024
fb7d0e3
fix(tag): remove invalid disabled states
rise-erpelding Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
937 changes: 464 additions & 473 deletions components/tag/index.css
View file
Open in desktop

Large diffs are not rendered by default.

30 changes: 13 additions & 17 deletions components/tag/metadata/mods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@
| `--mod-clearbutton-fill-background-color` |
| `--mod-clearbutton-fill-size` |
| `--mod-tag-animation-duration` |
| `--mod-tag-avatar-size` |
| `--mod-tag-avatar-spacing-block-end` |
| `--mod-tag-avatar-spacing-block-start` |
| `--mod-tag-avatar-spacing-inline-end` |
| `--mod-tag-avatar-spacing-inline-start` |
| `--mod-tag-background-color` |
| `--mod-tag-background-color-active` |
| `--mod-tag-background-color-disabled` |
Expand All @@ -16,6 +18,7 @@
| `--mod-tag-background-color-emphasized-hover` |
| `--mod-tag-background-color-focus` |
| `--mod-tag-background-color-hover` |
| `--mod-tag-background-color-invalid` |
| `--mod-tag-background-color-invalid-selected` |
| `--mod-tag-background-color-invalid-selected-active` |
| `--mod-tag-background-color-invalid-selected-focus` |
Expand All @@ -25,30 +28,13 @@
| `--mod-tag-background-color-selected-focus` |
| `--mod-tag-background-color-selected-hover` |
| `--mod-tag-border-color` |
| `--mod-tag-border-color-active` |
| `--mod-tag-border-color-disabled` |
| `--mod-tag-border-color-emphasized` |
| `--mod-tag-border-color-emphasized-active` |
| `--mod-tag-border-color-emphasized-focus` |
| `--mod-tag-border-color-emphasized-hover` |
| `--mod-tag-border-color-focus` |
| `--mod-tag-border-color-hover` |
| `--mod-tag-border-color-invalid` |
| `--mod-tag-border-color-invalid-active` |
| `--mod-tag-border-color-invalid-focus` |
| `--mod-tag-border-color-invalid-hover` |
| `--mod-tag-border-color-invalid-selected` |
| `--mod-tag-border-color-invalid-selected-active` |
| `--mod-tag-border-color-invalid-selected-focus` |
| `--mod-tag-border-color-invalid-selected-hover` |
| `--mod-tag-border-color-selected` |
| `--mod-tag-border-color-selected-active` |
| `--mod-tag-border-color-selected-focus` |
| `--mod-tag-border-color-selected-hover` |
| `--mod-tag-border-width` |
| `--mod-tag-clear-button-spacing-block` |
| `--mod-tag-clear-button-spacing-inline-end` |
| `--mod-tag-clear-button-spacing-inline-start` |
| `--mod-tag-content-color` |
| `--mod-tag-content-color-active` |
| `--mod-tag-content-color-disabled` |
Expand All @@ -62,6 +48,7 @@
| `--mod-tag-content-color-invalid-selected` |
| `--mod-tag-content-color-selected` |
| `--mod-tag-corner-radius` |
| `--mod-tag-edge-to-clear-icon` |
| `--mod-tag-focus-ring-color` |
| `--mod-tag-focus-ring-gap` |
| `--mod-tag-focus-ring-thickness` |
Expand All @@ -71,8 +58,17 @@
| `--mod-tag-icon-spacing-block-end` |
| `--mod-tag-icon-spacing-block-start` |
| `--mod-tag-icon-spacing-inline-end` |
| `--mod-tag-icon-spacing-inline-start` |
| `--mod-tag-label-font-weight` |
| `--mod-tag-label-line-height` |
| `--mod-tag-label-line-height-cjk` |
| `--mod-tag-label-spacing-block` |
| `--mod-tag-label-spacing-inline-end` |
| `--mod-tag-label-to-clear-icon` |
| `--mod-tag-maximum-width` |
| `--mod-tag-minimum-width` |
| `--mod-tag-spacing-inline-start` |
| `--mod-tag-thumbnail-size` |
| `--mod-tag-thumbnail-spacing-inline-end` |
| `--mod-tag-thumbnail-spacing-inline-start` |
| `--mod-thumbnail-opacity-disabled` |
53 changes: 49 additions & 4 deletions components/tag/metadata/tag.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,66 @@ sections:
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/tag/metadata/mods.md">here</a>.
- name: Migration Guide
description: |
### Pluralized classes changed to singular
### Version 9.0.0
#### Spectrum 2 release
Tag now uses Spectrum 2 tokens and specifications. Notable changes include:
- Small background and content color changes to match design spec.
- Use of medium font weight.
- Thumbnails can now be used in tags.
- New corner rounding, min/max width, and spacing tokens are used.
- Medium size is now the default, and the class `.spectrum-Tag--sizeM` has been removed.
- Spacing has been adjusted to match design spec.
- Borders have been made transparent for almost all variants, and therefore many mod custom properties related to borders have been removed.
- New and removed mods include:
- New mods:
- `--mod-tag-avatar-spacing-inline-start`
- `--mod-tag-avatar-size`
- `--mod-tag-background-color-invalid`
- `--mod-tag-edge-to-clear-icon`
- `--mod-tag-icon-spacing-inline-start`
- `--mod-tag-label-line-height-cjk`
- `--mod-tag-label-to-clear-icon`
- `--mod-tag-maximum-width`
- `--mod-tag-minimum-width`
- `--mod-thumbnail-opacity-disabled`
- `--mod-tag-thumbnail-size`
- `--mod-tag-thumbnail-spacing-inline-start`
- `--mod-tag-thumbnail-spacing-inline-end`
- Removed mods:
- `--mod-tag-border-color-active`
- `--mod-tag-border-color-emphasized-active`
- `--mod-tag-border-color-emphasized-focus`
- `--mod-tag-border-color-emphasized-hover`
- `--mod-tag-border-color-hover`
- `--mod-tag-border-color-invalid-active`
- `--mod-tag-border-color-invalid-focus`
- `--mod-tag-border-color-invalid-hover`
- `--mod-tag-border-color-invalid-selected`
- `--mod-tag-border-color-invalid-selected-active`
- `--mod-tag-border-color-invalid-selected-focus`
- `--mod-tag-border-color-invalid-selected-hover`
- `--mod-tag-border-color-selected-active`
- `--mod-tag-border-color-selected-focus`
- `--mod-tag-border-color-selected-hover`
- `--mod-tag-clear-button-spacing-inline-end`
- `--mod-tag-clear-button-spacing-inline-start`

### Versions prior to 9.0.0
#### Pluralized classes changed to singular
- `spectrum-Tags-itemLabel` is now `spectrum-Tag-itemLabel`
- `spectrum-Tags-itemIcon` is now `spectrum-Tag-itemIcon`

### New emphasized variant has been added
### A div wrapper is required for avatar
#### A div wrapper is required for avatar
```
<div class="spectrum-Avatar spectrum-Avatar--size50">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</div>
```
### Icon size changed to small
#### Icon size changed to small
If you use an icon (`spectrum-Tag-itemIcon`) along with a tag, please replace `.spectrum-Icon--sizeXS` with `.spectrum-Icon--sizeS`.

### Invalid
#### Invalid
Docs updated to show invalid tags always including the alert icon. Invalid tags should have an icon to idenfity itself as invalid and not rely soley on the red background and border color.

examples:
Expand Down
1 change: 1 addition & 0 deletions components/tag/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@spectrum-css/avatar": ">=7",
"@spectrum-css/clearbutton": ">=6",
"@spectrum-css/icon": ">=7",
"@spectrum-css/thumbnail": ">=6",
"@spectrum-css/tokens": ">=14.0.0-next.3"
},
"peerDependenciesMeta": {
Expand Down