fix: Invalid icon size in toast css

[joriverm]

🐛 Bug Report

The FluentUI Toasts seem to have invalid CSS, concerning its width, that results in unexpected behavior in the toasts' icon size.

💻 Repro or Code Sample

add toast using the toastservice in a browser/plugin that is very picky on css (in my case, standard firefox usage).
used code :

ToastService.ShowToast(
    ToastIntent.Success,
    "message",
    null,
    "Log click",
    EventCallback.Factory.Create<ToastResult>(this, (_) => { })
);

🤔 Expected Behavior

icon size to be correct

😯 Current Behavior

icon size is ignored, making it too big

💁 Possible Solution

after some investigation in the dom, i noticed the style the toasts' icon got was invalid, and the browser (Chrome, Firefox, ... they all say it) even tells you as much :

the width should say 16px, not just 16.
after applying this fix, the toast looks normal like it should.

i did not find the code that controls this, as i am unfamiliar with the codebase & where the iconsize css is generated but this is probably where the fix lies

EDIT : this seems to be a bug with FluentToast.
the toast passes "16" as its width, and the icon just passes it on to the style
so either the toast needs to pass px, or the icon needs to append px, but that would break input like "50%"
this is the case for both the left icon as the action icons, which pass "12" without px

🔦 Context

i am trying to make a POC to see if we can use blazor/hybrid for our application instead of WPF, which is proving to give us more and more problems trying to apply modern thinking to it.

🌍 Your Environment

• OS & Device: Windows 10
• Browser: Mozilla FireFox (and any browser that is more strict on css specs)
• .NET and FAST Version : .net7 & 3.0.0.RC1

[dvoituron]

Thank you for your feedback.
We will investigate this and fix it for the next version.

[joriverm]

thanks. i have currently made a dirty workaround in my POC by setting it to 16px in the app.css for the icon, and 12px for the action icon

[joriverm]

@dvoituron : ive been thinking of fixing this myself and creating a PR. is there any testing/guidelines i should look for when adding the 'px' to the width of the toast's icons?

[dvoituron]

You have this Contributing page. And we're in the process of setting up unit tests. The project is already in the Tests folder, but not all the components have yet been tested.