feat: Add StudioErrorMessage component

[TomasEng]

Description

Added an StudioErrorMessage component based on the ErrorMessage component from The Design System.

Related Issue(s)

• Implement new StudioCodelistEditor component #13342

Verification

• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.13%. Comparing base (378bf66) to head (c7e5b04).
Report is 13 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #13943   +/-   ##
=======================================
  Coverage   95.13%   95.13%           
=======================================
  Files        1676     1678    +2     
  Lines       22232    22238    +6     
  Branches     2612     2612           
=======================================
+ Hits        21151    21157    +6     
  Misses        835      835           
  Partials      246      246           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[standeren]

Nice ⭐
I just have one question;
I know this is simply a wrapper around the ErrorMessage from DS, but I tested sending a StudioHeading to the children-prop in storybook and then it does not get the error style.
This is probably by design, but can it be a solution that we force string usage when the component is used in Studio in order to get the correct style? 🤔

[TomasEng]

Nice I just have one question; I know this is simply a wrapper around the ErrorMessage from DS, but I tested sending a StudioHeading to the children-prop in storybook and then it does not get the error style. This is probably by design, but can it be a solution that we force string usage when the component is used in Studio in order to get the correct style?

That might be a good idea, but I think it would be too strict. We may still want to use phrasing content inside the message. This is a typography component, so it is not supposed to contain block-level elements like headings.

[standeren]

Nice I just have one question; I know this is simply a wrapper around the ErrorMessage from DS, but I tested sending a StudioHeading to the children-prop in storybook and then it does not get the error style. This is probably by design, but can it be a solution that we force string usage when the component is used in Studio in order to get the correct style?

That might be a good idea, but I think it would be too strict. We may still want to use phrasing content inside the message. This is a typography component, so it is not supposed to contain block-level elements like headings.

Understand. Is it possible to restrict the children to be of those kind of elements? 🤔

[TomasEng]

Is it possible to restrict the children to be of those kind of elements?

Not with types. It could be possible with Javascript on runtime, but that' a quite unusual pattern that just adds unnecessary complexity to the component.

For some reason this component renders a <div> element, and not a <p> element. If it rendered a <p> element, we could use a tool like the W3C markup validator to validate this.

Anyways, I think it's best to keep the component API as close as possible to the one in The Design System until we come across a use case where it makes sense to narrow it down. We can always make a more specified component that extends this one.