Responsive Offcanvas requires suppressing class="offcanvas"

[SerratedSharp]

Propose to add an EnableDefaultClass parameter property that allows the default class to be suppressed as needed.

Describe the bug Responsive offcanvas offcanvas-lg should not have class="offcanvas" per this example: https://getbootstrap.com/docs/5.3/components/offcanvas/#responsive

To Reproduce <Offcanvas class="offcanvas-lg"> produces class="offcanvas offcanvas-lg" which breaks the responsiveness(showing content on page above breakpoint) and also makes the offcanvas transparent(when page width is above breakpoint and offcanvas is shown).

Screenshots How the bug looks when larger than breakpoint and offcanvas shown:

Proposed Solution Verified fix by inheriting from Offcanvas and overriding ClassNames to allow the default class to be disabled:

  [Parameter]
  public bool EnableDefaultClass { get; set; } = true;

  protected override string? ClassNames =>
      BuildClassNames(Class,
          (BootstrapClass.Offcanvas, EnableDefaultClass),
          (Placement.ToOffcanvasPlacementClass(), true),
          (Size.ToOffcanvasSizeClass(), true));

The only remaining problem is this line is hardcoded to expect a class "offcanvas" and so it breaks the dismiss button when class is suppressed. data-bs-dismiss="offcanvas" would need to be adjusted.

@if (ShowCloseButton)
{
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
}

Usage: <OffcanvasEx @ref="offcanvas" EnableDefaultClass="false" class="offcanvas-lg">

Versions (please complete the following information):

• .NET Version: [e.g. .NET 6, .NET 7, .NET 8]
• BlazorBootstrap: 3.0.0 preview.3
• Blazor WebAssembly
• Blazor Interactive Render Mode: Auto
• Blazor Interactivity Location: Not sure

[SerratedSharp]

Looks like the dismiss issue is an unrelated known issue that cropped as a result of not including the default class(which this issue confirms ommitted the default offcanvas class is a normal part of implementing the responsive offcanvas. Known issue in BS:

https://github.com/twbs/bootstrap/issues/36962

This is a jsfiddle showing a properly implemented responsive offcanvas which uses the data-bs-target workaround for the close button issue when the default class is not present: https://jsfiddle.net/7yvdL5p4/1/

I will see if I can do a PR for this.

[gvreddy04]

@SerratedSharp Were you able to replicate this issue here: https://demos.blazorbootstrap.com/offcanvas#sizes?

If you were able to replicate the issue, please attach a screen recording.

Per my analysis, this is working as expected, but it was handled slightly differently in the past. We are applying different CSS classes when different sizes are applied.