Skip to content

Commit 249610b

Browse files
committed
chore(migration-guides): address pr feedback
1 parent 68f80d5 commit 249610b

5 files changed

Lines changed: 26 additions & 19 deletions

File tree

2nd-gen/packages/core/components/badge/Badge.base.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export abstract class BadgeBase extends SizedMixin(
8383
* and should be narrowed in each subclass.
8484
*/
8585
@property({ type: String, reflect: true })
86-
public variant: BadgeVariant = 'informative';
86+
public variant: BadgeVariant = 'neutral';
8787

8888
// ──────────────────
8989
// SHARED API

2nd-gen/packages/swc/components/asset/migration.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ This guide covers everything you need to move from the 1st-gen `sp-asset` compon
44
(`@spectrum-web-components/asset`) to the 2nd-gen `swc-asset` component
55
(`@adobe/spectrum-wc/asset`).
66

7+
> **Note:** `swc-asset` is marked `@status unsupported` in 2nd-gen. The component was
8+
> migrated to Spectrum 2 infrastructure, but no Spectrum 2 design spec exists for it yet.
9+
> The visual output is unchanged from 1st-gen, and the component is safe to use — however,
10+
> it may be revised or replaced once a Spectrum 2 spec is published.
11+
712
---
813

914
## Installation
@@ -43,6 +48,7 @@ import '@adobe/spectrum-wc/asset';
4348
| Package | `@spectrum-web-components/asset` | `@adobe/spectrum-wc` |
4449
| `variant` attribute | `'file' \| 'folder'` | `'file' \| 'folder'` — unchanged |
4550
| `label` attribute | `label="…"` | `label="…"` — unchanged |
51+
| Default slot | `<img>` or other content when no `variant` | Unchanged — slot renders when no `variant` is set |
4652
| CSS custom properties | `--mod-asset-*` | Not directly exposed — see [CSS custom properties](#css-custom-properties) |
4753
| Shadow DOM classes | `.file`, `.folder`, `.fileBackground`, etc. | `.swc-Asset-file`, `.swc-Asset-folder`, etc. — see [Shadow DOM](#shadow-dom-structure) |
4854
| Dark mode | Manual via color overrides | Automatic via `light-dark()` |

2nd-gen/packages/swc/components/badge/Badge.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
*/
1212

1313
import { CSSResultArray, html, TemplateResult } from 'lit';
14-
import { property } from 'lit/decorators.js';
1514
import { classMap } from 'lit/directives/class-map.js';
1615
import { when } from 'lit/directives/when.js';
1716

@@ -20,7 +19,6 @@ import {
2019
BADGE_VARIANTS,
2120
BADGE_VARIANTS_COLOR,
2221
BadgeBase,
23-
type BadgeVariant,
2422
} from '@spectrum-web-components/core/components/badge';
2523

2624
import styles from './badge.css';
@@ -80,14 +78,8 @@ export class Badge extends BadgeBase {
8078
*/
8179
static override readonly VALID_SIZES = BADGE_VALID_SIZES;
8280

83-
/**
84-
* The variant of the badge.
85-
*
86-
* @todo - Implement new badge variants (notification, indicator) introduced in S2. Jira ticket: SWC-1831
87-
* Implement as separate component based on React https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/src/NotificationBadge.tsx
88-
*/
89-
@property({ type: String, reflect: true })
90-
public override variant: BadgeVariant = 'neutral';
81+
// @todo - Implement new badge variants (notification, indicator) introduced in S2. Jira ticket: SWC-1831
82+
// Implement as separate component based on React https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/src/NotificationBadge.tsx
9183

9284
// ──────────────────────────────
9385
// RENDERING & STYLING

2nd-gen/packages/swc/components/badge/migration.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import '@adobe/spectrum-wc/badge';
4141
| --------------------- | -------------------------------------------------------- | -------------------------------------------------------------------- |
4242
| Tag name | `sp-badge` | `swc-badge` |
4343
| Package | `@spectrum-web-components/badge` | `@adobe/spectrum-wc` |
44+
| Default `variant` | `'informative'` | `'neutral'` — see [Default variant](#default-variant) |
4445
| `variant` attribute | 14 color variants | 19 color variants — 5 new colors added |
4546
| `size` attribute | `s \| m \| l \| xl` | `s \| m \| l \| xl` — unchanged |
4647
| `fixed` attribute | `block-start \| block-end \| inline-start \| inline-end` | `block-start \| block-end \| inline-start \| inline-end` — unchanged |
@@ -53,6 +54,22 @@ import '@adobe/spectrum-wc/badge';
5354

5455
## Breaking changes
5556

57+
### Default variant
58+
59+
The default `variant` has changed from `'informative'` to `'neutral'`. Any `<sp-badge>` (or
60+
`<swc-badge>`) rendered without an explicit `variant` attribute will now appear neutral gray
61+
instead of blue.
62+
63+
```html
64+
<!-- Before: renders informative (blue) -->
65+
<sp-badge>Active</sp-badge>
66+
67+
<!-- After: renders neutral (gray) — add variant="informative" to preserve the previous appearance -->
68+
<swc-badge variant="informative">Active</swc-badge>
69+
```
70+
71+
---
72+
5673
### Tag name
5774

5875
Find and replace all instances of `sp-badge` with `swc-badge` in your templates and HTML.

2nd-gen/packages/swc/components/progress-circle/progress-circle.css

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -112,13 +112,5 @@
112112
.swc-ProgressCircle {
113113
--swc-progress-circle-fill-border-color: Highlight;
114114
--swc-progress-circle-track-border-color: Canvas;
115-
116-
@media (prefers-color-scheme: dark) {
117-
--swc-progress-circle-track-border-color: token("static-white-track-color");
118-
}
119-
120-
@media (prefers-color-scheme: light) {
121-
--swc-progress-circle-track-border-color: token("static-black-track-color");
122-
}
123115
}
124116
}

0 commit comments

Comments
 (0)