Skip to content

bug(bottom-sheet): panelClass mentions to be added to the bottom sheet container, which is not happening #33103

@mattiLeBlanc

Description

@mattiLeBlanc

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

According to the docs and TS definition, the panelClass should add be added to the bottomsheet container:
/** Extra CSS classes to be added to the bottom sheet container. */
docs: https://material.angular.dev/components/bottom-sheet/api

However, it seems to be added to the cdk-overlay-pane class (direct parent) and not to the mat-bottom-sheet-container element.

Looking at the generated HTML:

<mat-bottom-sheet-container tabindex="-1" class="mat-bottom-sheet-container cdk-dialog-container mat-bottom-sheet-container-medium mat-bottom-sheet-container-animations-enabled mat-bottom-sheet-container-enter"

the bottom-sheet-container is using a class mat-bottom-sheet-container-medium and it would be amazing to use panelClass to apply mat-bottom-sheet-container-large. This works if you add it manually via Chrome Dev Tools.

Reproduction

StackBlitz link: https://stackblitz.com/edit/jbfptqex?file=src%2Fexample%2Fbottom-sheet-overview-example.ts&startScript=start
Steps to reproduce:

  1. Run the stackblitz
  2. Inspect the HTML in Dev Tools and see that the panelClass value get added to the DIV with class cdk-overlay-pane, not to the mat-bottom-sheet-container .

Expected Behavior

If docs says :
/** Extra CSS classes to be added to the bottom sheet container. */
then I expect the class to be added to that mat-bottom-sheet-container element

Actual Behavior

It gets added to the parent div with class cdk-overlay-pane

Environment

  • Angular: 21.2.7
  • CDK/Material: lastest
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Macos

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions