chore(alert-banner): refactor AlertBanner to extend AlertBannerBase #5664

blunteshwar · 2025-08-04T06:10:31Z

Overview

This PR refactors the sp-alert-banner component to separate its base logic from rendering code, following the technical specifications for the Swan migration preparation. This is a purely internal change with no customer impact.

Changes Made

File Structure Changes

Created: New packages/alert-banner/src/AlertBannerBase.ts as the base class for AlertBanner component.

Code Separation

AlertBannerBase (Abstract Base Class)

Location: packages/alert-banner/src/AlertBannerBase.ts
Contains:
- Property declarations (open, dismissible, variant)
- All base functionality except rendering
- Event handling (shouldClose, close, handleKeydown)
- Variant validation logic
- Abstract renderIcon method for subclasses to implement

AlertBanner (Concrete Class)

Location: packages/alert-banner/src/AlertBanner.ts
Contains:
- Class that extends AlertBannerBase
- Rendering logic (render() method)
- Icon rendering implementation (renderIcon() method)
- Styles import and declaration

Impact

Customer Impact

None - This is a purely internal refactoring
Public API remains identical
No visual or behavioural changes
No breaking changes

Developer Impact

None - Existing imports and usage patterns continue to work
import { AlertBanner } from '@spectrum-web-components/alert-banner' still works
All existing component usage remains valid

Related issue(s)

fixes [SWC-978]

Screenshots (if appropriate)

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

Manual Testing
- Component renders correctly in Storybook
- All variants (horizontal/vertical) work as expected
- All sizes (s, m, l) display properly
- ARIA attributes are set correctly
Automated Testing
- All existing tests pass
- No new tests needed (no functional changes)

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

Migration Preparation

This refactoring prepares the badge component for future migration to the Swan architecture by:

Separating concerns - Base logic vs. rendering logic
Preserving git history - Base logic in Badge.base.ts will carry forward
Maintaining compatibility - Public API unchanged
Following established patterns - Consistent with other component refactoring

📚 Branch Preview

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-5664

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

github-actions · 2025-08-04T09:26:04Z

Tachometer results

Currently, no packages are changed by this PR...

Rajdeepc

This change introduces a breaking update by removing exports from AlertBanner.ts and moving them solely to AlertBanner.base.ts. While I agree that consolidating types into a dedicated type definition file is our right long-term approach, we should ensure backward compatibility in the interim.

To avoid disruption for existing consumers, please add re-exports in AlertBanner.ts. The types should continue to be defined in the base file, but re-exported from the original entry point until we can clean this up more formally.

Rajdeepc · 2025-08-04T10:08:48Z

packages/alert-banner/stories/index.ts

@@ -12,7 +12,7 @@

 import { html, TemplateResult } from '@spectrum-web-components/base';

-import { AlertBannerVariants } from '@spectrum-web-components/alert-banner';
+import { AlertBannerVariants } from '@spectrum-web-components/alert-banner/src/AlertBanner.base.js';


This is not needed

Rajdeepc · 2025-08-04T10:08:54Z

packages/alert-banner/stories/alert-banner.stories.ts

@@ -11,7 +11,7 @@
 */

 import { html, TemplateResult } from '@spectrum-web-components/base';
-import { AlertBannerVariants } from '@spectrum-web-components/alert-banner';
+import { AlertBannerVariants } from '@spectrum-web-components/alert-banner/src/AlertBanner.base.js';


This is not needed

Rajdeepc · 2025-08-04T10:09:24Z

packages/alert-banner/src/index.ts

@@ -10,3 +10,4 @@
 * governing permissions and limitations under the License.
 */
 export * from './AlertBanner.js';
+export * from './AlertBanner.base.js';


No need to export base from here.

Rajdeepc · 2025-08-04T10:10:16Z

packages/alert-banner/src/AlertBanner.ts

 import '@spectrum-web-components/button/sp-close-button.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
 import styles from './alert-banner.css.js';
-
-const VALID_VARIANTS = ['neutral', 'info', 'negative'];
-export type AlertBannerVariants = (typeof VALID_VARIANTS)[number];


Can you add the re-export pattern in AlertBanner.ts? Type should be defined in base but re-exported for backward compatibility so existing consumers don't break.

import type { AlertBannerVariants } from './AlertBanner.base.js'; export type { AlertBannerVariants };

…5664) * chore(alert-banner): refactor AlertBanner to extend AlertBannerBase and add variant handling * chore(alert-banner): export AlertBannerBase and update imports in stories * chore(alert-banner): minor fix * chore(alert-banner): minor fix * chore(alert-banner): minor fix * chore(alert-banner): update import paths for AlertBannerVariants

chore(alert-banner): refactor AlertBanner to extend AlertBannerBase a…

0aaa05f

…nd add variant handling

blunteshwar requested a review from a team as a code owner August 4, 2025 06:10

chore(alert-banner): export AlertBannerBase and update imports in sto…

1973ad3

…ries

blunteshwar added 2 commits August 4, 2025 15:08

chore(alert-banner): minor fix

01d919d

chore(alert-banner): minor fix

8aed421

Rajdeepc changed the title ~~chore(alert-banner): refactor AlertBanner to extend AlertBannerBase a…~~ chore(alert-banner): refactor AlertBanner to extend AlertBannerBase Aug 4, 2025

Rajdeepc requested changes Aug 4, 2025

View reviewed changes

Rajdeepc added the ready-for-review label Aug 4, 2025

chore(alert-banner): minor fix

bedbb90

blunteshwar requested a review from Rajdeepc August 4, 2025 10:27

chore(alert-banner): update import paths for AlertBannerVariants

2cf0b5b

Rajdeepc approved these changes Aug 5, 2025

View reviewed changes

blunteshwar merged commit 381d304 into spectrum-two-phase-zero Aug 5, 2025
21 checks passed

blunteshwar deleted the pvashish/alert-banner branch August 5, 2025 11:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(alert-banner): refactor AlertBanner to extend AlertBannerBase #5664

chore(alert-banner): refactor AlertBanner to extend AlertBannerBase #5664

Uh oh!

blunteshwar commented Aug 4, 2025 •

edited by Rajdeepc

Loading

Uh oh!

changeset-bot bot commented Aug 4, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 4, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 4, 2025

Uh oh!

Rajdeepc left a comment •

edited

Loading

Uh oh!

Rajdeepc Aug 4, 2025

Uh oh!

blunteshwar Aug 4, 2025

Uh oh!

Rajdeepc Aug 4, 2025

Uh oh!

blunteshwar Aug 4, 2025

Uh oh!

Rajdeepc Aug 4, 2025 •

edited

Loading

Uh oh!

Rajdeepc Aug 4, 2025

Uh oh!

blunteshwar Aug 4, 2025

Uh oh!

Uh oh!

Uh oh!

chore(alert-banner): refactor AlertBanner to extend AlertBannerBase #5664

chore(alert-banner): refactor AlertBanner to extend AlertBannerBase #5664

Uh oh!

Conversation

blunteshwar commented Aug 4, 2025 • edited by Rajdeepc Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Changes Made

File Structure Changes

Code Separation

Impact

Customer Impact

Developer Impact

Related issue(s)

Screenshots (if appropriate)

Author's checklist

Reviewer's checklist

Manual review test cases

Device review

Migration Preparation

Related

Uh oh!

changeset-bot bot commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview

🔍 Visual Regression Test Results

Uh oh!

github-actions bot commented Aug 4, 2025

Tachometer results

Uh oh!

Rajdeepc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rajdeepc Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

blunteshwar Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Rajdeepc Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

blunteshwar Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Rajdeepc Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rajdeepc Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

blunteshwar Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

blunteshwar commented Aug 4, 2025 •

edited by Rajdeepc

Loading

changeset-bot bot commented Aug 4, 2025 •

edited

Loading

github-actions bot commented Aug 4, 2025 •

edited

Loading

Rajdeepc left a comment •

edited

Loading

Rajdeepc Aug 4, 2025 •

edited

Loading