[Feature Request] Define size of toast

[gparissis]

Is your feature request related to a problem? Please describe.
No, it is not related to a problem.

Describe the solution you'd like
I have read issue #74 and I would like to provide my input as a new user. I believe that the component should provide different sizes. As it is currently the toast caption, is larger than the header of my page.
Yes, I do understand the argument that what is large, medium, small is relative to anyone, but that didn't stop bootstrap developers to implement it. And most of the people are just fine by that.
We are not all very good with CSS and JavaScript, and this is the main reason why we chose Blazor. To make development experience feel more C#.

Describe alternatives you've considered
An implementation of Large, Medium, Small using the same Bootstrap sizes, which most people are familiar with.

[aterbo]

I do think some built in size options would be convenient but not strictly necessary as well; I just added Toasts to my project last night, and first thing I had to do was go through the source code to figure out how to resize them. I eventually put in a custom .blazored-toast{ width:15rem; } class, and it did the trick in my case.

Looking at the discussion in #74 I understand where you're coming from @chrissainty in saying that this is all customizable via CSS. If this is a repeat issue/request and default options isn't in line with your goals for the repo, maybe simply highlighting which CSS to change to customize the sizes in the readme.md would be sufficient?

[chrissainty]

Wouldn't the new custom toast option cover this scenario?

[aterbo]

@chrissainty Not necessarily. I see two drawbacks. The first is simple convenience. Most of my toasts are a string message ("Save success", "error", "data added", etc.). Building a new component for each to pass in each case is unwieldy. Building one component with a string parameter and passing a different string is essentially recreating the normal default behavior of the library.

The more limiting issue is that the custom toast option is still wrapped in the same css classes. Here is the markup, in BlazoredToast.razor:

@if (ChildContent is object)
{
    <div class="blazored-toast blazored-toast-container blazored-toast-component">
        <CascadingValue Value="this" IsFixed="true">
            @ChildContent
        </CascadingValue>

        @if (ToastComponentSettings.ShowProgressBar)
        {
            <div class="blazored-toast-progressbar">
                <span style="width: @(_progress)%;"></span>
            </div>
        }
    </div>
}

The @ChildContent is still wrapped in blazored-toast, which is:

    .blazored-toast {
        width: 30rem;
        border-radius: .25rem;
    }

That width is what I had to override to shrink the toasts down. It appears as if it needs to be overridden even with a custom component. At least, if I understand this code right...

If you go in the sample code, take most of the text out of the custom component, and run the sample you can see that the component won't shrink below the same width as the other default toasts. It will get taller but not change it's width unless the CSS is overridden.

[chrissainty]

I'm going to close this in favour of #170. This issue will introduce a new UI design for toasts which is much more compact. Anything outside of this can be configured by developers using the custom component option.