feat(documentation): add alert stories

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 5902e50f26e54bc508ebe8e1027745b9dff0f04b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | -------------------------------------- | ----- | | @swisspost/design-system-documentation | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[swisspost-bot]

Preview environment ready: https://preview-813--swisspost-design-system-styles.netlify.app

[alizedebray]

I just noticed a display issue with the fixed alert and the alert with action buttons:

[oliverschuerch]

I just noticed a display issue with the fixed alert and the alert with action buttons:

Does the problem persist? If "yes": Can you give more context (browser, controls states, ...)?

[oliverschuerch]

@alizedebray I was able to detect the render issue in firefox. However, this is more of a firefox bug than a issue in our component. Firefox incorrectly places "fixed" positioned containers, which have a parent with a "transform" statement. Or in other words, Firefox is more strictly following the specs which say:

"If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains." https://developer.mozilla.org/en-US/docs/Web/CSS/transform

[oliverschuerch]

@alizedebray Can you please check if the error you reported is now fixed? Thanks ;)

[alizedebray]

Thank you Olivier for all these changes!

Last thing, I noticed some unwanted padding around the alerts header:

The problem appears on several components when using portal styles. I created a separate issue #879.

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication