DBNotification caused Hydration Error

[JulianBu]

Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

Use inside of DBNotification a <p> or a <div>-Tag. Then you will see following Error in the Browser:

Expected Behaviour

Pass any wellformed HTML-Tags inside the DBNotifaction Children

Screenshots

Our Code:

Browser version

Edge

Add any other context about the problem here.

We use Version: 4.4.2

Which DB business unit do you work for?

DB Systel GmbH (please name your customer below)

”DB Systel” please enter your customer / ”other” please enter your area or business unit.

InfraGOOOO

What project are you working on?

C2S -> UJK

[AlexVonB]

This might be a duplicate of #5015

[JulianBu]

Yes this looks like the same error to me. I think there error is because of this

Tag
https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/notification/notification.lite.tsx#L65

[nmerget]

@JulianBu We provide an extra link slot for this use case: https://design-system.deutschebahn.com/core-web/version/v4.5.4/react-storybook/?path=/docs/components-dbnotification-link-variant--docs

In general we could also change the internal <p> into another HTML tag. There might be the case to use e.g. <ul> for the content which wouldn't be allowed as well.

We'll take it with us, I think we can just replace the inner <p> with a <div> without any breaking change.