fix: FluentIcon Class property ignores square brackets after update to 4.8.0

[bpsc-wkubis]

🐛 Bug Report

After update from 4.7.2 to 4.8.0 FluentIcon Class property ignores square brackets,

🤔 Expected Behavior

Square brackets are passed to the class of rendered svg

😯 Current Behavior

Square brackets are not passed do the rendered svg.

Example:
This code
<FluentIcon Class="This is fine [NotVisible]" Value="@(new Icons.Regular.Size20.AccessTime())" />

results in:

💁 Possible Solution

Did not find workaround

🔦 Context

I'm using Tailwind CSS, which relies on square brackets, and this update caused issues in several areas of my app.

🌍 Your Environment

• OS & Device: Windows on PC
• Browser Microsoft Edge, Google Chrome
• .NET and Fluent UI Blazor library Version [e.g. 8.0.6 and 4.8.0]

[dvoituron]

Yes, we added a RegEx to validate the class names: "^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$.
Brackets are not allowed in class names.: https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors

A name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must2 be a letter or underscore, and the name must be at least 2 characters long.

[bpsc-wkubis]

Are you suggesting that the changes made have broken the integration with Tailwind CSS and it's not possible to use it anymore????

[bpsc-wkubis]

Other components do not have that restrictions

[dvoituron]

At that point, it's no longer possible to use invalid class names.
But I understand the problem. And I suggest adding a new static parameter CssBuilder.ValidateClassNames which would allow you to disable this check in your project.

I'm reopening this issue to add it to our next Release.

@StevenTCramer Your opinion?

[bpsc-wkubis]

At that point, it's no longer possible to use invalid class names. But I understand the problem. And I suggest adding a new static parameter CssBuilder.ValidateClassNames which would allow you to disable this check in your project.

I'm reopening this issue to add it to our next Release.

@StevenTCramer Your opinion?

would much appreciate that, without that my whole app needs major refactor

[ApacheTech]

After reading this thread, I can see that my PR with a fix for this would not accepted, if published.

I cannot see any changelog entry where this breaking change was documented. Or any kind of warning given that this version would break existing code.

[dvoituron]

I cannot see any changelog entry where this breaking change was documented. Or any kind of warning given that this version would break existing code.

As explained here, we try to respect the standard functionalities.
It seems that Tailwind does not respect this.
So we didn't think it was appropriate to indicate a possible Breaking change.
#2251 (comment)

However, we are going to add an option to allow you to bypass the W3C standard

[ApacheTech]

I remember in a community standup a while back, the FluentUI team said they were looking for ways to add parity with other frameworks, and looking at the ways in which FluentUI is used, out in the wild. This seems like a regression, and a large step backwards. The W3C "standard" is out-dated, and de-facto obsolete. FluentUI should be looking forwards, and to say you didn't even think about this being a breaking change is concerning, at best.