Refactor Beta badge and Hover badge components: Add span rendering option to improve HTML compliance

Tim Noahrequested to merge
498946-follow-up-on-ui-polish-for-self-hosted-models-beta-badge-component into master

What does this MR do and why?

This update allows the rendering of a span instead of a div when using HoverBadge inside BetaBadge. This is necessary for ensuring HTML compliance when BetaBadge is used within a <h1> element, where block-level elements like div are not allowed.

Changes Made:

  • Introduced elementType prop to HoverBadge and BetaBadge to dynamically render either a <div> (default) or <span>.
  • Added prop validation to accept only div or span.

elementType prop can now be specified as span when rendering inside a heading tag like <h1>.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

How to set up and validate locally

Add Beta Badge component to a page and set element type to Span.

<beta-badge element-type="span"></beta-badge>

Closes #498946 (closed)

Edited by Tim Noah

Merge request reports