Skip to content

Commit 5ceef34

Browse files
cdransfcdransf
committed
fix(migration-docs): consistently rename status light properties
1 parent d7452f6 commit 5ceef34

2 files changed

Lines changed: 53 additions & 53 deletions

File tree

‎2nd-gen/packages/swc/components/status-light/StatusLight.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,15 @@ import styles from './status-light.css';
3939
* @example
4040
* <swc-status-light variant="silver">Supported in Edge</swc-status-light>
4141
*
42-
* @cssprop --swc-statuslight-height - Minimum block size of the status light.
43-
* @cssprop --swc-statuslight-dot-size - Size of the indicator dot.
44-
* @cssprop --swc-statuslight-dot-color - Color of the indicator dot.
45-
* @cssprop --swc-statuslight-font-size - Font size of the label.
46-
* @cssprop --swc-statuslight-line-height - Line height of the label.
47-
* @cssprop --swc-statuslight-padding-block - Block padding.
48-
* @cssprop --swc-statuslight-top-to-dot - Distance from the block-start edge to the center of the dot.
49-
* @cssprop --swc-statuslight-text-to-visual - Gap between the dot and the label.
50-
* @cssprop --swc-statuslight-content-color - Color of the label text.
42+
* @cssprop --swc-status-light-height - Minimum block size of the status light.
43+
* @cssprop --swc-status-light-dot-size - Size of the indicator dot.
44+
* @cssprop --swc-status-light-dot-color - Color of the indicator dot.
45+
* @cssprop --swc-status-light-font-size - Font size of the label.
46+
* @cssprop --swc-status-light-line-height - Line height of the label.
47+
* @cssprop --swc-status-light-padding-block - Block padding.
48+
* @cssprop --swc-status-light-top-to-dot - Distance from the block-start edge to the center of the dot.
49+
* @cssprop --swc-status-light-text-to-visual - Gap between the dot and the label.
50+
* @cssprop --swc-status-light-content-color - Color of the label text.
5151
*/
5252
export class StatusLight extends StatusLightBase {
5353
// ────────────────────

‎2nd-gen/packages/swc/components/status-light/consumer-migration-guide.mdx‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,11 @@ import '@adobe/spectrum-wc/status-light';
3232

3333
### Renamed
3434

35-
| Area | Spectrum 1 (`sp-status-light`) | Spectrum 2 (`swc-status-light`) |
36-
| ---------------- | --------------------------------------- | ----------------------------------------------- |
37-
| Tag | `sp-status-light` | `swc-status-light` |
38-
| Import path | `@spectrum-web-components/status-light` | `@adobe/spectrum-wc/status-light` |
39-
| CSS custom props | `--mod-statuslight-*` | `--swc-statuslight-*` (see [Styling](#styling)) |
35+
| Area | Spectrum 1 (`sp-status-light`) | Spectrum 2 (`swc-status-light`) |
36+
| ---------------- | --------------------------------------- | ------------------------------------------------ |
37+
| Tag | `sp-status-light` | `swc-status-light` |
38+
| Import path | `@spectrum-web-components/status-light` | `@adobe/spectrum-wc/status-light` |
39+
| CSS custom props | `--mod-status-light-*` | `--swc-status-light-*` (see [Styling](#styling)) |
4040

4141
### Added in Spectrum 2
4242

@@ -46,11 +46,11 @@ import '@adobe/spectrum-wc/status-light';
4646

4747
### Removed in Spectrum 2
4848

49-
| Removed | Replacement |
50-
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
51-
| `disabled` attribute | Was deprecated in Spectrum 1; no replacement — remove it from your markup |
52-
| `accent` semantic variant | Not part of Spectrum 2; use `neutral` or `info` depending on intent |
53-
| `--mod-statuslight-*` custom properties | `--swc-statuslight-*` for semantic variants only — `--swc-statuslight-dot-color` overrides semantic variant dot colors. Non-semantic color variants (`yellow`, `chartreuse`, `celery`, etc.) bake in their dot colors and cannot be overridden here; retoken globally instead. |
49+
| Removed | Replacement |
50+
| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
51+
| `disabled` attribute | Was deprecated in Spectrum 1; no replacement — remove it from your markup |
52+
| `accent` semantic variant | Not part of Spectrum 2; use `neutral` or `info` depending on intent |
53+
| `--mod-status-light-*` custom properties | `--swc-status-light-*` for semantic variants only — `--swc-status-light-dot-color` overrides semantic variant dot colors. Non-semantic color variants (`yellow`, `chartreuse`, `celery`, etc.) bake in their dot colors and cannot be overridden here; retoken globally instead. |
5454

5555
## Update your code
5656

@@ -108,46 +108,46 @@ Spectrum 2 exposes a new set of public CSS custom properties on `<swc-status-lig
108108
}}
109109
>
110110
<strong>⚠️ Breaking change.</strong> Spectrum 1{' '}
111-
<code>{'--mod-statuslight-*'}</code> properties <strong>do not apply</strong>{' '}
111+
<code>{'--mod-status-light-*'}</code> properties <strong>do not apply</strong>{' '}
112112
to <code>{'<swc-status-light>'}</code>. Remove or replace every{' '}
113-
<code>{'--mod-statuslight-*'}</code> override with the{' '}
114-
<code>{'--swc-statuslight-*'}</code> equivalents below.
113+
<code>{'--mod-status-light-*'}</code> override with the{' '}
114+
<code>{'--swc-status-light-*'}</code> equivalents below.
115115
</div>
116116

117-
### Removed `--mod-statuslight-*` properties
118-
119-
Replace every `--mod-statuslight-*` property with its `--swc-statuslight-*` equivalent:
120-
121-
| Removed (Spectrum 1) | Replacement (Spectrum 2) |
122-
| ------------------------------------------- | ------------------------------------------------------- |
123-
| `--mod-statuslight-height` | `--swc-statuslight-height` |
124-
| `--mod-statuslight-dot-size` | `--swc-statuslight-dot-size` |
125-
| `--mod-statuslight-font-size` | `--swc-statuslight-font-size` |
126-
| `--mod-statuslight-spacing-dot-to-label` | `--swc-statuslight-text-to-visual` |
127-
| `--mod-statuslight-spacing-top-to-dot` | `--swc-statuslight-top-to-dot` |
128-
| `--mod-statuslight-spacing-top-to-label` | `--swc-statuslight-padding-block` (covers top + bottom) |
129-
| `--mod-statuslight-spacing-bottom-to-label` | `--swc-statuslight-padding-block` (covers top + bottom) |
130-
| `--mod-statuslight-corner-radius` | No replacement |
131-
| `--mod-statuslight-font-weight` | No replacement |
132-
| `--mod-statuslight-content-color-default` | `--swc-statuslight-content-color` |
133-
| `--mod-statuslight-semantic-*-color` | `--swc-statuslight-dot-color` |
134-
| `--mod-statuslight-nonsemantic-*-color` | `--swc-statuslight-dot-color` |
117+
### Removed `--mod-status-light-*` properties
118+
119+
Replace every `--mod-status-light-*` property with its `--swc-status-light-*` equivalent:
120+
121+
| Removed (Spectrum 1) | Replacement (Spectrum 2) |
122+
| -------------------------------------------- | -------------------------------------------------------- |
123+
| `--mod-status-light-height` | `--swc-status-light-height` |
124+
| `--mod-status-light-dot-size` | `--swc-status-light-dot-size` |
125+
| `--mod-status-light-font-size` | `--swc-status-light-font-size` |
126+
| `--mod-status-light-spacing-dot-to-label` | `--swc-status-light-text-to-visual` |
127+
| `--mod-status-light-spacing-top-to-dot` | `--swc-status-light-top-to-dot` |
128+
| `--mod-status-light-spacing-top-to-label` | `--swc-status-light-padding-block` (covers top + bottom) |
129+
| `--mod-status-light-spacing-bottom-to-label` | `--swc-status-light-padding-block` (covers top + bottom) |
130+
| `--mod-status-light-corner-radius` | No replacement |
131+
| `--mod-status-light-font-weight` | No replacement |
132+
| `--mod-status-light-content-color-default` | `--swc-status-light-content-color` |
133+
| `--mod-status-light-semantic-*-color` | `--swc-status-light-dot-color` |
134+
| `--mod-status-light-nonsemantic-*-color` | `--swc-status-light-dot-color` |
135135

136136
### Public custom properties
137137

138138
{/* @todo Replace the Description column with the `@cssproperty` JSDoc descriptions from `<swc-status-light>`'s CEM entry once they are added in a follow-up PR. */}
139139

140-
| Custom property | Description | Notes |
141-
| ---------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
142-
| `--swc-statuslight-height` | Minimum block size of the component. | |
143-
| `--swc-statuslight-padding-block` | Block (top/bottom) padding. | |
144-
| `--swc-statuslight-top-to-dot` | Distance from the block-start edge to the dot center. | |
145-
| `--swc-statuslight-text-to-visual` | Gap between the indicator dot and the label. | |
146-
| `--swc-statuslight-line-height` | Line height of the label text. | |
147-
| `--swc-statuslight-dot-size` | Size of the indicator dot. | |
148-
| `--swc-statuslight-dot-color` | Color of the indicator dot. | Semantic variants only. Non-semantic color variants bake in their dot color; retoken globally instead. |
149-
| `--swc-statuslight-content-color` | Color of the label text. | |
150-
| `--swc-statuslight-font-size` | Font size of the label text. | |
140+
| Custom property | Description | Notes |
141+
| ----------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
142+
| `--swc-status-light-height` | Minimum block size of the component. | |
143+
| `--swc-status-light-padding-block` | Block (top/bottom) padding. | |
144+
| `--swc-status-light-top-to-dot` | Distance from the block-start edge to the dot center. | |
145+
| `--swc-status-light-text-to-visual` | Gap between the indicator dot and the label. | |
146+
| `--swc-status-light-line-height` | Line height of the label text. | |
147+
| `--swc-status-light-dot-size` | Size of the indicator dot. | |
148+
| `--swc-status-light-dot-color` | Color of the indicator dot. | Semantic variants only. Non-semantic color variants bake in their dot color; retoken globally instead. |
149+
| `--swc-status-light-content-color` | Color of the label text. | |
150+
| `--swc-status-light-font-size` | Font size of the label text. | |
151151

152152
<div
153153
style={{
@@ -159,7 +159,7 @@ Replace every `--mod-statuslight-*` property with its `--swc-statuslight-*` equi
159159
}}
160160
>
161161
<strong>🚫 Do not target internals.</strong> Internal classes,{' '}
162-
<code>{'--_swc-statuslight-*'}</code> private properties, and shadow DOM are{' '}
162+
<code>{'--_swc-status-light-*'}</code> private properties, and shadow DOM are{' '}
163163
<strong>not public API</strong>. Styling applied to them will break without
164164
warning on minor releases.
165165
</div>
@@ -170,5 +170,5 @@ Replace every `--mod-statuslight-*` property with its `--swc-statuslight-*` equi
170170
- [ ] Rename all `<sp-status-light>` to `<swc-status-light>`
171171
- [ ] Remove all `disabled` attributes
172172
- [ ] Replace `accent` variant with the appropriate semantic alternative
173-
- [ ] Replace `--mod-statuslight-*` overrides with `--swc-statuslight-*` equivalents
173+
- [ ] Replace `--mod-status-light-*` overrides with `--swc-status-light-*` equivalents
174174
- [ ] Verify every status light has a visible text label

0 commit comments

Comments
 (0)