Skip to content

Commit

Permalink
feat(tag): migrate to Spectrum 2
Browse files Browse the repository at this point in the history 
- Remove Express and Spectrum themes
- Use size M properties as default
- Add tokens for S2, including:
  - corner rounding (corner-radius-medium-size-<Tshirt size>)
  - minimum width (tag-minimum-width-<Tshirt size>)
  - maximum width (tag-maximum-width-multiplier)
  - clear button spacing (tag-label-to-clear-icon-<Tshirt size>,
    tag-edge-to-clear-icon-<Tshirt size>)
  - Adds CJK line height
- Add or adjust background colors for variants
- Remove borders (makes them transparent except for WHCM)
- Update font-weight to be medium rather than regular
- Scale avatar sizing
- Support thumbnail within Tag
- Simplify switch options by adding select menu for the visual type
  (Avatar, Icon, or Thumbnail) displayed on Tag
- Remove Avatar and Icon stories from Storybook
- Add Chromatic coverage showing multiple variants on one screen
  • Loading branch information
@rise-erpelding
rise-erpelding committed Apr 12, 2024
1 parent 35c5f60 commit d746d04
Show file tree
Hide file tree
Showing 8 changed files with 420 additions and 323 deletions.
229 changes: 105 additions & 124 deletions components/tag/index.css
View file

Large diffs are not rendered by default.

26 changes: 9 additions & 17 deletions components/tag/metadata/mods.md
View file
Expand Up @@ -4,6 +4,7 @@
| `--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` |
Expand All @@ -16,6 +17,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 +27,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 +47,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 @@ -73,6 +59,12 @@
| `--mod-tag-icon-spacing-inline-end` |
| `--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` |
48 changes: 44 additions & 4 deletions components/tag/metadata/tag.yml
View file
Expand Up @@ -8,21 +8,61 @@ 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.
- 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-size`
- `--mod-tag-background-color-invalid`
- `--mod-tag-edge-to-clear-icon`
- `--mod-tag-label-line-height-cjk`
- `--mod-tag-label-to-clear-icon`
- `--mod-tag-maximum-width`
- `--mod-tag-minimum-width`
- `--mod-tag-thumbnail-size`
- `--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
5 changes: 3 additions & 2 deletions components/tag/package.json
View file
Expand Up @@ -17,8 +17,9 @@
"peerDependencies": {
"@spectrum-css/avatar": ">=6",
"@spectrum-css/clearbutton": ">=5",
"@spectrum-css/icon": ">=4",
"@spectrum-css/tokens": "^14.0.0-next.3"
"@spectrum-css/icon": ">=6",
"@spectrum-css/thumbnail": ">=5",
"@spectrum-css/tokens": "^14.0.0-next.4"
},
"peerDependenciesMeta": {
"@spectrum-css/avatar": {
Expand Down

0 comments on commit d746d04

Please sign in to comment.