Skip to content

Restyle the neutral notification as a plain bordered card - #68

Merged
methodofaction merged 5 commits into
mainfrom
notifications-netural
Sep 1, 2026
Merged

Restyle the neutral notification as a plain bordered card#68
methodofaction merged 5 commits into
mainfrom
notifications-netural

Conversation

@methodofaction

@methodofaction methodofaction commented Aug 25, 2026

Copy link
Copy Markdown
Contributor
image

What changed

  • The neutral notification type swaps its gray bg-background-default-tertiary fill for a plain bordered card: bg-background border border-border text-foreground.
  • For neutral only, the leading icon is muted (text-foreground-default-secondary) instead of inheriting the text color, so it reads gray against the plain surface. Colored types keep their tinted icons.
  • A notification without a Text now treats the description as the main message: it renders at text-base inheriting the type's foreground (instead of the muted text-sm subline), and the icon, message, and actions vertically center on a single row. This applies to all types, not just neutral.

Why

Matches the updated design for neutral notifications — a light card with a gray info icon and an action button on the right, e.g. "If you want to make any change in your subscriptions, please contact sales / [Contact sales]". These notifications often carry no title, and the old layout dropped the actions onto a second row below the message with top-aligned icons.

Notes for reviewers

  • Docs: the Neutral example now shows both the title-less single-row form and the titled form; the stale button-tint comment in the actions example is removed; the API table documents the description promotion.
  • Verified in the docs site that icon, message, and button share the same vertical midline in the title-less form, and that the titled form is unchanged (top-aligned icon, medium title, muted description).
  • Generated artifacts are included: *_templ.go and assets/popui.css (picks up the new .text-inherit rule).
  • Only the docs examples consume the neutral type in this repo, so no other call sites needed migration.

🤖 Generated with Claude Code

The neutral type swaps its gray fill for the default background with a
border, and mutes the leading icon instead of inheriting the text color.
A notification without a Text now treats the description as the main
message: full-size, inheriting the type's foreground, and vertically
centered with the icon and any actions on a single row.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@netlify

netlify Bot commented Aug 25, 2026

Copy link
Copy Markdown

Deploy Preview for popui-go ready!

Name Link
🔨 Latest commit 3ee56c5
🔍 Latest deploy log https://app.netlify.com/projects/popui-go/deploys/6a96ffbe0660900008ac1be8
😎 Deploy Preview https://deploy-preview-68--popui-go.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

The compiled stylesheet conflicted; rebuilt it from the merged sources
so it carries both branches' utility classes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@methodofaction

Copy link
Copy Markdown
Contributor Author

@copilot resolve the merge conflicts in this pull request

@methodofaction

Copy link
Copy Markdown
Contributor Author

@copilot resolve the merge conflicts in this pull request

# Conflicts:
#	assets/popui.css

Co-authored-by: methodofaction <51445+methodofaction@users.noreply.github.com>

Copilot AI commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

@copilot resolve the merge conflicts in this pull request

Resolved. I merged origin/main into this branch and fixed the merge conflict; the merge commit is 83a22fa.

Co-authored-by: methodofaction <51445+methodofaction@users.noreply.github.com>

Copilot AI commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

@copilot resolve the merge conflicts in this pull request

Done — I merged the latest origin/main into this branch and resolved the PR conflict state. Addressing merge commit: 7c221ad.

@methodofaction
methodofaction merged commit 25c3524 into main Sep 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants