Files
supabase/packages/ui-patterns
Danny White bd02d7f297 feat(www + studio): broaden Select 2026 banner reach and soften www edges (#49569)
## What kind of change does this PR introduce?

Feature polish for the Select 2026 promotion.

## What is the current behavior?

- Studio only shows the Select Banner Stack card inside `ProjectLayout`
(project routes).
- www glyph fields read as hard rectangles on each side of the
announcement banner.

## What is the new behavior?

- Studio registers the Select banner from `AppBannerWrapper`, so it also
appears outside project context (org / account surfaces).
- www fields use per-row widths with edge alignment: top/middle shorter,
bottom longer, growing inward from each side for a softer silhouette.


https://github.com/user-attachments/assets/c5275967-63d0-40dd-a472-e3db08d1c39d

## To test

- **Studio (non-project):** open an org home or account page on the
deploy preview. Confirm the Select Banner Stack card appears in the
usual stack and dismisses as before.
- **Studio (project):** open any project route. Confirm the same card
still appears and does not double-register.
- **www:** open the marketing homepage. On `sm+`, confirm each side of
the cream announcement bar has a 3-row field where the bottom row
reaches further inward than the top, and the middle row is shortest.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added the Select 2026 promotional banner to eligible hosted Studio
environments.
* Banner visibility reflects promotion status, platform eligibility,
loading state, and dismissal preferences.

* **Style**
* Refined decorative field layouts with improved row alignment, mirrored
visuals, and flexible sizing.

* **Bug Fixes**
* Updated visibility behavior so the banner is no longer tied to being
inside a specific project.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-26 13:28:15 +08:00
..
2026-07-02 17:03:08 +02:00

Supabase UI Patterns

This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example), which make no sense to be included in all apps. It should also be used for components which are constructed using various components from the ui package.

This package does not have a barrel file - each component has to be imported from its index (ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in 1 or 2 apps doesn't burden the rest of the apps.