Skip to content

Commit ae1918b

Browse files
marissahuysentruytrise-erpelding
marissahuysentruyt
authored and
rise-erpelding
committed
docs: add prompt output files for subset of components
1 parent 6fdcab1 commit ae1918b

File tree

6 files changed

+1458
-0
lines changed

6 files changed

+1458
-0
lines changed

‎migration-roadmap/alert-banner.md‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
# Alert Banner migration roadmap
2+
3+
<details>
4+
<summary>CSS selectors</summary>
5+
6+
- `.spectrum-AlertBanner`
7+
- `.spectrum-AlertBanner--info`
8+
- `.spectrum-AlertBanner--negative`
9+
- `.spectrum-AlertBanner-body`
10+
- `.spectrum-AlertBanner-content`
11+
- `.spectrum-AlertBanner-icon`
12+
- `.spectrum-AlertBanner-text`
13+
- `.spectrum-AlertBanner.is-open`
14+
- `.spectrum-AlertBanner:has(.spectrum-CloseButton) .spectrum-AlertBanner-body`
15+
- `.spectrum-AlertBanner:lang(ja)`, `.spectrum-AlertBanner:lang(ko)`, `.spectrum-AlertBanner:lang(zh)`
16+
17+
</details>
18+
19+
<details>
20+
<summary>Passthroughs</summary>
21+
22+
- `--mod-closebutton-align-self`
23+
- `--mod-closebutton-margin-inline`
24+
- `--mod-closebutton-margin-top`
25+
- `--mod-icon-size`
26+
27+
</details>
28+
29+
<details>
30+
<summary>Attributes</summary>
31+
32+
- `open` (Boolean) - Controls the display of the alert banner
33+
- `dismissible` (Boolean) - Whether to include an icon-only close button to dismiss the alert banner
34+
- `variant` (String) - The variant applies specific styling when set to `negative`, `neutral`, or `info`
35+
36+
</details>
37+
38+
<details>
39+
<summary>Slots</summary>
40+
41+
- Default slot - The alert banner text context
42+
- `action` - Slot for the button element that surfaces the contextual action a user can take
43+
44+
</details>
45+
46+
<details>
47+
<summary>Modifiers</summary>
48+
49+
- `--mod-alert-banner-background`
50+
- `--mod-alert-banner-block-edge-to-button`
51+
- `--mod-alert-banner-bottom-to-text`
52+
- `--mod-alert-banner-close-button-to-content`
53+
- `--mod-alert-banner-close-button-to-inline-end`
54+
- `--mod-alert-banner-font-color`
55+
- `--mod-alert-banner-font-family`
56+
- `--mod-alert-banner-font-size`
57+
- `--mod-alert-banner-icon-size`
58+
- `--mod-alert-banner-icon-to-text`
59+
- `--mod-alert-banner-informative-background`
60+
- `--mod-alert-banner-inline-end-to-content`
61+
- `--mod-alert-banner-inline-size`
62+
- `--mod-alert-banner-inline-start-to-content`
63+
- `--mod-alert-banner-line-height`
64+
- `--mod-alert-banner-max-inline-size`
65+
- `--mod-alert-banner-min-height`
66+
- `--mod-alert-banner-negative-background`
67+
- `--mod-alert-banner-neutral-background`
68+
- `--mod-alert-banner-text-margin-block-end`
69+
- `--mod-alert-banner-text-margin-block-start`
70+
- `--mod-alert-banner-text-to-button-horizontal`
71+
- `--mod-alert-banner-text-to-button-vertical`
72+
- `--mod-alert-banner-top-to-close-button`
73+
- `--mod-alert-banner-top-to-icon`
74+
- `--mod-alert-banner-top-to-text`
75+
76+
</details>
77+
78+
## Visual Comparison
79+
80+
**Legacy Component:**
81+
82+
<!-- Screenshot of legacy component will be added here -->
83+
84+
**Spectrum 2 Component:**
85+
86+
<!-- Screenshot of Spectrum 2 component will be added here -->
87+
88+
## DOM Structure Changes
89+
90+
**Legacy (main branch):**
91+
92+
```html
93+
<div class="spectrum-AlertBanner spectrum-AlertBanner--{variant} is-open">
94+
<div class="spectrum-AlertBanner-body">
95+
<div class="spectrum-AlertBanner-content">
96+
<svg class="spectrum-AlertBanner-icon">[icon]</svg>
97+
<p class="spectrum-AlertBanner-text">[text]</p>
98+
</div>
99+
<button
100+
class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite"
101+
>
102+
[action button]
103+
</button>
104+
</div>
105+
<div class="spectrum-AlertBanner-end">
106+
<div
107+
class="spectrum-Divider spectrum-Divider--vertical spectrum-Divider--sizeS"
108+
></div>
109+
<button
110+
class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite"
111+
>
112+
[close button]
113+
</button>
114+
</div>
115+
</div>
116+
```
117+
118+
**Spectrum 2 (spectrum-two branch):**
119+
120+
```html
121+
<div class="spectrum-AlertBanner spectrum-AlertBanner--{variant} is-open">
122+
<div class="spectrum-AlertBanner-body">
123+
<div class="spectrum-AlertBanner-content">
124+
<svg class="spectrum-AlertBanner-icon">[icon]</svg>
125+
<p class="spectrum-AlertBanner-text">[text]</p>
126+
</div>
127+
<button
128+
class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite"
129+
>
130+
[action button]
131+
</button>
132+
</div>
133+
<div class="spectrum-AlertBanner-end">
134+
<button
135+
class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite"
136+
>
137+
[close button]
138+
</button>
139+
</div>
140+
</div>
141+
```
142+
143+
## Comparison
144+
145+
| CSS selector | Attribute or slot | Status |
146+
| ---------------------------------------------------------------------------------------------------- | ------------------------- | ---------------- |
147+
| `.spectrum-AlertBanner` | Root element | Implemented |
148+
| `.spectrum-AlertBanner--info` | `variant="info"` | Implemented |
149+
| `.spectrum-AlertBanner--negative` | `variant="negative"` | Implemented |
150+
| `.spectrum-AlertBanner-body` | - | Implemented |
151+
| `.spectrum-AlertBanner-content` | - | Implemented |
152+
| `.spectrum-AlertBanner-icon` | - | Implemented |
153+
| `.spectrum-AlertBanner-text` | Default slot | Implemented |
154+
| `.spectrum-AlertBanner.is-open` | `open` attribute | Implemented |
155+
| `.spectrum-AlertBanner:has(.spectrum-CloseButton) .spectrum-AlertBanner-body` | `dismissible` attribute | Implemented |
156+
| `.spectrum-AlertBanner:lang(ja)`, `.spectrum-AlertBanner:lang(ko)`, `.spectrum-AlertBanner:lang(zh)` | Language-specific styling | Implemented |
157+
| - | `action` slot | Missing from CSS |
158+
| - | `dismissible` attribute | Missing from CSS |
159+
160+
## Key Structural Changes
161+
162+
**Element Hierarchy Changes:**
163+
164+
- Removed divider element between content and close button in Spectrum 2
165+
- Simplified end container structure
166+
167+
**Class Name Changes:**
168+
169+
- No major class name changes
170+
- Maintained consistent naming convention
171+
172+
**Attribute Changes:**
173+
174+
- Added `open` attribute for controlling display state
175+
- Added `dismissible` attribute for controlling close button visibility
176+
177+
**Slot/Content Changes:**
178+
179+
- Added dedicated `action` slot for button elements
180+
- Default slot remains for text content
181+
182+
**Migration Impact:**
183+
184+
- Removal of divider element will affect visual separation between content and close button
185+
- Web component provides better semantic structure with slots
186+
187+
### Implementation Gaps
188+
189+
**CSS Features Missing from Web Component:**
190+
191+
- All CSS selectors are properly implemented in the web component
192+
193+
**Web Component Features Missing from CSS:**
194+
195+
- `action` slot - needs CSS support for slotted action button positioning
196+
- `dismissible` attribute - CSS should provide conditional styling based on this attribute
197+
198+
**Features Being Deprecated/Removed:**
199+
200+
- Divider element between content and close button has been removed in Spectrum 2
201+
202+
### Action Items for Web Component Maintainers
203+
204+
**Required Additions:**
205+
206+
- No major additions needed - component is well-aligned with CSS implementation
207+
208+
**Required Removals:**
209+
210+
- None identified
211+
212+
**Breaking Changes:**
213+
214+
- Divider removal may affect existing implementations expecting visual separation
215+
- Migration guidance: Update expectations for visual separation between content and close button

0 commit comments

Comments
 (0)