[dev-v5] fix: FluentText.As semantic rendering non functional in FluentText

[codeaphex]

🐛 Bug Report

💻 Repro or Code Sample

Put this into a new page

<FluentText Block As="TextTag.H1">This content is rendered inside an h1 element.</FluentText>
<FluentText Block As="TextTag.H2">This content is rendered inside an h2 element.</FluentText>
<FluentText Block As="TextTag.H3">This content is rendered inside an h3 element.</FluentText>
<FluentText Block As="TextTag.H4">This content is rendered inside an h4 element.</FluentText>
<FluentText Block As="TextTag.H5">This content is rendered inside an h5 element.</FluentText>
<FluentText Block As="TextTag.H6">This content is rendered inside an h6 element.</FluentText>
<FluentText Block As="TextTag.Paragraph">This content
    is rendered inside a
    a p element.
</FluentText>
<FluentText Block As="TextTag.Pre">This content
is rendered inside a
a pre element.
</FluentText>
<FluentText Block As="TextTag.Span">This content is rendered inside a span element.</FluentText>

🤔 Expected Behavior

The content should be rendered inside a semantic HTML element using the slot of the underlying web component and should apply the css of that element this way.

<fluent-text block="">
  <template shadowrootmode="open">
     <slot></slot>
   </template>
   <!--!-->
  <h1>This content is rendered inside an h1 element.</h1>
</fluent-text>

😯 Current Behavior

The content is directly applied to the fluent-text webcomponent and the As property is applied to fluent-text via the as attribute. The web component doesnt handle as attributes though (I think the fluent react component might do it). So the component is rendered non semantically and without proper css.

<fluent-text as="h1"></fluent-text>

💁 Possible Solution

I can submit a PR to fix this via your AddTag component.
Lots of tests needed updates because they assume the output of the current behavior.

🔦 Context

Render semantic html with correct formatting applied.

🌍 Your Environment

• OS & Device: Windows
• Browser Microsoft Edge
• .NET and Fluent UI Blazor library Version [v5 RC4]

[dvoituron]

In fact, this is a property that existed in the fluent-text web component in its beta version but was removed in the final release.
I suggest we remain consistent with web components and remove it from our FluentText.

[DanielCordell]

In fact, this is a property that existed in the fluent-text web component in its beta version but was removed in the final release. I suggest we remain consistent with web components and remove it from our FluentText.

Would the proper way of handling this now be <FluentText><h1>My Title</h1></FluentText>? If so - could we also make sure the docs/MCP gets updated so that people know how to use this properly?

[vnbaaij]

Would the proper way of handling this now be <FluentText><h1>My Title</h1></FluentText>? If so - could we also make sure the docs/MCP gets updated so that people know how to use this properly?

I believe it will work like that, yes Yup. This is what comes out of the web component:

Docs and MCP will get updated when we remove the As parameter (probably after Denis's holiday)