Skip to content

feat(system-banner): update system banner typography and dimensions - #2572

Open
mistrykaran91 wants to merge 1 commit into
mainfrom
2491-update-system-banner-design-and-link-example
Open

feat(system-banner): update system banner typography and dimensions#2572
mistrykaran91 wants to merge 1 commit into
mainfrom
2491-update-system-banner-design-and-link-example

Conversation

@mistrykaran91

@mistrykaran91 mistrykaran91 commented Aug 18, 2026

Copy link
Copy Markdown
Member
  • Use body text styling instead of body-bold.
  • Adjust banner spacing for a 24px height.
  • Add a system banner example with a link.

Closes #2491


Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

Code Coverage

@mistrykaran91 mistrykaran91 linked an issue Aug 18, 2026 that may be closed by this pull request
2 tasks
@mistrykaran91
mistrykaran91 marked this pull request as ready for review August 18, 2026 08:56
@mistrykaran91
mistrykaran91 requested review from a team as code owners August 18, 2026 08:56
@mistrykaran91
mistrykaran91 marked this pull request as draft August 18, 2026 08:57
@mistrykaran91
mistrykaran91 force-pushed the 2491-update-system-banner-design-and-link-example branch 3 times, most recently from 68e383a to 3a0b0d0 Compare August 19, 2026 09:38

@spliffone spliffone left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it make sense to adjust the commit message so the reader become aware the text is no longer bold?

Comment thread src/app/examples/si-system-banner/si-system-banner.ts Outdated
@mistrykaran91
mistrykaran91 force-pushed the 2491-update-system-banner-design-and-link-example branch from f6e9573 to 4655843 Compare August 19, 2026 11:09
@mistrykaran91
mistrykaran91 marked this pull request as ready for review August 20, 2026 04:26
@mistrykaran91 mistrykaran91 modified the milestones: 51.x, 51.0.0 Aug 20, 2026
@mistrykaran91 mistrykaran91 added ux Marks all UX related topics (UX team is working on or UX input is required) feature Marks feature requests and feature implementations labels Aug 20, 2026

@spike-rabbit spike-rabbit left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kfenner our initial plan to just make applications use the plain class for a system banner to add a link does not really work, as the styling is bound to the component.

What about we just move this to the theme? Then the absolute positioning is not needed

@panch1739 panch1739 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mistrykaran91 Sorry, one note...in the example with link, the link should be part of the text, so it would actually be center aligned. We should also is the underline for the link, so is recognizable.

Image

is basically the same that we do in our inner source docs

Image

- Use body text styling instead of body-bold.
- Adjust banner spacing for a 24px height.
- Add a system banner example with a link.
@mistrykaran91
mistrykaran91 force-pushed the 2491-update-system-banner-design-and-link-example branch from 37be3bd to 1a6d71e Compare August 26, 2026 10:14
aria-live="assertive"
>
{{ message() | translate }}
{{ message() | translate }} <ng-content select="a" />

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think instead of this, we just want to allow any content inside based on my understanding, so:

Suggested change
{{ message() | translate }} <ng-content select="a" />
<ng-content>{{ message() | translate }}</ng-content>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Marks feature requests and feature implementations ux Marks all UX related topics (UX team is working on or UX input is required)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update system banner design and link example

4 participants