change: [M3-10065, M3-9910] - Notification banner stroke, width, error icon by hana-akamai · Pull Request #12471 · linode/manager

hana-akamai · 2025-07-03T16:43:02Z

Changes 🔄

Revert changes of the banner widths in papers. Banners should be as wide as the entire container content area
Added a fitContentWidth prop to the Notice component to change banner widths as an exception
Removed left border for 1px border all around
Replaced error icon in the Notice and Toast components
Fixed VolumesUpgradeBanner spacing
Migrated Notice styles to styled components

Preview 📷

Before	After

banner.before.sb.mov	banner.after.sb.mov
notice.before.sb.mov	notice.after.sb.mov
toast.before.mov	toast.after.mov

How to test 🧪

Verification steps

(How to verify changes)

Check banners/notices/toasts across the app and ensure there are no regressions
Check storybook locally

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All unit tests are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

coliu-akamai

✅ didn't see regressions for banners (left comment on M3-9865 regarding cloudpulse banner styling)
✅ volumes upgrade banner fixed
✅ storybook looks good

thanks @hana-akamai!

jaalah-akamai · 2025-07-14T21:15:46Z

-<svg width="20" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2C4.98123 2 2.5 4.50236 2.5 7.63158C2.5 9.15683 3.09074 10.5358 4.04815 11.5483C4.44562 11.9686 4.86265 12.4541 5.22349 13H10.7765C11.1373 12.4541 11.5544 11.9686 11.9518 11.5483C12.9093 10.5358 13.5 9.15683 13.5 7.63158C13.5 4.50236 11.0188 2 8 2ZM9.89384 15H6.10616C6.17561 15.3165 6.21429 15.6453 6.21429 15.9859V16.2144C6.21429 17.2006 7.01374 18 8 18C8.98626 18 9.78571 17.2006 9.78571 16.2144V15.9859C9.78571 15.6453 9.82439 15.3165 9.89384 15ZM0.5 7.63158C0.5 3.43576 3.83907 0 8 0C12.1609 0 15.5 3.43576 15.5 7.63158C15.5 9.6827 14.7033 11.5495 13.405 12.9224C12.4398 13.9433 11.7857 14.9532 11.7857 15.9859V16.2144C11.7857 18.3052 10.0908 20 8 20C5.90925 20 4.21429 18.3052 4.21429 16.2144V15.9859C4.21429 14.9532 3.56025 13.9433 2.59496 12.9224C1.29669 11.5495 0.5 9.6827 0.5 7.63158Z" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C8.98123 4 6.5 6.50236 6.5 9.63158C6.5 11.1568 7.09074 12.5358 8.04815 13.5483C8.44562 13.9686 8.86265 14.4541 9.22349 15H14.7765C15.1373 14.4541 15.5544 13.9686 15.9518 13.5483C16.9093 12.5358 17.5 11.1568 17.5 9.63158C17.5 6.50236 15.0188 4 12 4ZM13.8938 17H10.1062C10.1756 17.3165 10.2143 17.6453 10.2143 17.9859V18.2144C10.2143 19.2006 11.0137 20 12 20C12.9863 20 13.7857 19.2006 13.7857 18.2144V17.9859C13.7857 17.6453 13.8244 17.3165 13.8938 17ZM4.5 9.63158C4.5 5.43576 7.83907 2 12 2C16.1609 2 19.5 5.43576 19.5 9.63158C19.5 11.6827 18.7033 13.5495 17.405 14.9224C16.4398 15.9433 15.7857 16.9532 15.7857 17.9859V18.2144C15.7857 20.3052 14.0908 22 12 22C9.90925 22 8.21429 20.3052 8.21429 18.2144V17.9859C8.21429 16.9532 7.56025 15.9433 6.59496 14.9224C5.29669 13.5495 4.5 11.6827 4.5 9.63158Z" fill="white"/>


Should the fill be currentColor here? Same with other places that aren't colored icons.

linode-gh-bot · 2025-07-14T22:17:24Z

Cloud Manager UI test results

🔺 2 failing tests on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`2 Failing`	`673 Passing`	`4 Skipped`	`129m 22s`

Details

Failing Tests
	Spec	Test
❌	`account-maintenance.spec.ts`	Cloud Manager Cypress Tests→Maintenance » Maintenance
❌	`account-maintenance.spec.ts`	Cloud Manager Cypress Tests→Maintenance » Maintenance

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/account/account-maintenance.spec.ts"

coliu-akamai · 2025-07-14T22:31:32Z

e2e test failures have already been fixed in develop (pr #12499) - merging and then will cherry pick to staging! (see internal slack for details)

…r icon (#12471) * fix volumes upgrade banner alignment * update snackbar error icon and adjust other icon sizes * update notice error icon and variant borders * migrate notice styles to styled components * add prop to fit the notice/banner width with the content * Added changeset: Notification banner stroke, width, error icon * Added changeset: Volumes upgrade banner alignment * fix unit test * address feedback pt 1 * Added changeset: Notification banner stroke, width, error icon * feedback * fix center alignment for single line toasts and fill color

hana-akamai added 5 commits July 1, 2025 15:29

fix volumes upgrade banner alignment

6d17e4b

update snackbar error icon and adjust other icon sizes

0b283fb

update notice error icon and variant borders

60e33d4

migrate notice styles to styled components

a02b954

add prop to fit the notice/banner width with the content

1e72d3e

hana-akamai self-assigned this Jul 3, 2025

hana-akamai added Design Tokens Laying the groundwork for Design Tokens Requires UX Approval Design System Component Requires UX Approval labels Jul 3, 2025

github-project-automation Bot added this to Cloud Manager Jul 3, 2025

github-project-automation Bot moved this to Review in Cloud Manager Jul 3, 2025

hana-akamai changed the title ~~M3 10065 notification banner stroke icons~~ change: [M3-10065] - Notification banner stroke, width, error icon Jul 3, 2025

Added changeset: Notification banner stroke, width, error icon

153dc4d

hana-akamai changed the title ~~change: [M3-10065] - Notification banner stroke, width, error icon~~ change: [M3-10065, M3-9910] - Notification banner stroke, width, error icon Jul 3, 2025

hana-akamai added 3 commits July 3, 2025 12:47

Added changeset: Volumes upgrade banner alignment

ce37ae8

Merge branch 'develop' into M3-10065-notification-banner-stroke-icons

3c161db

fix unit test

5220098

hana-akamai marked this pull request as ready for review July 3, 2025 17:59

hana-akamai requested a review from a team as a code owner July 3, 2025 17:59

hana-akamai requested review from bnussman-akamai and coliu-akamai and removed request for a team July 3, 2025 17:59

bnussman-akamai reviewed Jul 7, 2025

View reviewed changes

hana-akamai added 3 commits July 7, 2025 17:22

address feedback pt 1

200e7b7

Added changeset: Notification banner stroke, width, error icon

a710cb6

feedback

eae36f5

hana-akamai requested a review from bnussman-akamai July 8, 2025 20:32

coliu-akamai approved these changes Jul 14, 2025

View reviewed changes

hana-akamai added the Add'tl Approval Needed Waiting on another approval! label Jul 14, 2025

jaalah-akamai approved these changes Jul 14, 2025

View reviewed changes

github-project-automation Bot moved this from Review to Approved in Cloud Manager Jul 14, 2025

fix center alignment for single line toasts and fill color

7455cb6

cpathipa approved these changes Jul 14, 2025

View reviewed changes

cpathipa added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Jul 14, 2025

coliu-akamai merged commit 2a11ca4 into linode:develop Jul 14, 2025

github-project-automation Bot moved this from Approved to Merged in Cloud Manager Jul 14, 2025

hana-akamai deleted the M3-10065-notification-banner-stroke-icons branch July 14, 2025 22:37

Navigation Menu

Uh oh!

change: [M3-10065, M3-9910] - Notification banner stroke, width, error icon - #12471

change: [M3-10065, M3-9910] - Notification banner stroke, width, error icon#12471
coliu-akamai merged 13 commits into
linode:developfrom
hana-akamai:M3-10065-notification-banner-stroke-icons

hana-akamai commented Jul 3, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coliu-akamai left a comment

Uh oh!

jaalah-akamai Jul 14, 2025

Uh oh!

linode-gh-bot commented Jul 14, 2025

Uh oh!

coliu-akamai commented Jul 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

Conversation

hana-akamai commented Jul 3, 2025

Changes 🔄

Preview 📷

How to test 🧪

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coliu-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

jaalah-akamai Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

linode-gh-bot commented Jul 14, 2025

Cloud Manager UI test results

🔺 2 failing tests on test run #8 ↗︎

Details

Troubleshooting

Uh oh!

coliu-akamai commented Jul 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants