Add fullWidth support to Alert component

[bradpotts]

Identified a gap in the Alert component where it lacked the standard fullWidth structural variant found in other interactive components like Button and Input.

Implemented the fullWidth support by adding the necessary CSS class and updating the recipe. Verified the change through unit tests and a visual verification script.

---

PR created automatically by Jules for task 7389245789221338678 started by @bradpotts

Summary by CodeRabbit

• New Features

  • Introduced full-width alert variant enabling alerts to span the entire container width, complementing the default constrained width behavior. The new variant includes configurable options to control alert width behavior flexibly. Comprehensive example documentation and test coverage provided to ensure the feature works reliably.

• Tests

  • Added tests for the new full-width alert configuration.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: fe73a094-2272-495b-9d45-9bd4a2569129

📥 Commits

Reviewing files that changed from the base of the PR and between 0639ecc and 8fc18e2.

📒 Files selected for processing (4)

• examples/alert-fullwidth-verification.html
• src/recipes/alert.ts
• src/styles/components.css
• tests/alert-avatar-recipe.test.ts

---

Walkthrough

This PR adds a fullWidth option to the alert component recipe. The option extends the AlertRecipeOptions type, is destructured in getAlertClasses, conditionally applies the sp-alert--full CSS class, and is tested and demonstrated alongside the existing alert variants.

Changes

Full-width alert variant

Layer / File(s)	Summary
Alert recipe type and implementation src/recipes/alert.ts, tests/alert-avatar-recipe.test.ts	AlertRecipeOptions adds optional fullWidth boolean; getAlertClasses destructures fullWidth (default false) and conditionally appends sp-alert--full class; new test case validates fullWidth: true produces the expected class string.
CSS styling for full-width alerts src/styles/components.css	.sp-alert--full class sets width: 100% to make styled alerts span their container width.
HTML verification example examples/alert-fullwidth-verification.html	Static HTML page renders default and full-width alert variants inside styled containers with explanatory headings and text.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description lacks the structured template elements including explicit linked issue confirmation, UI contract change type, Type of Change selection, and most checklist items required by the repository template.	Complete the pull request description template by explicitly checking the relevant checkboxes, specifying UI contract change type as 'additive', confirming npm run check passes, verifying dist/ regeneration, and updating CHANGELOG.md.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding fullWidth support to the Alert component, which is the primary objective of the pull request.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-alert-fullwidth-variant-7389245789221338678

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}