bug(button): FAB Button without elevation

[mrmokwa]

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

We cannot use FAB button without elevation.

Navigation Rail in MD3 supports an FAB button in the top, but doesn't require elevation.

https://m3.material.io/components/navigation-rail/guidelines

If we try to remove the elevation, after clicking the button, the elevation reappers.

.mat-mdc-fab {
  box-shadow: none;
  &:hover {
    box-shadow: none;
  }
}

Since this PR we can use the elevation helpers in v18.

I'd sugest removing the elevation, and let the user chooses when to apply it... but this, will probably break many apps/tests.
Perhaps an input option to remove it?

You can check an example in the MD3 site.

Reproduction

https://material.angular.io/components/button/examples

Expected Behavior

FAB shouldn't have elevation by default.

Actual Behavior

We are unable to remove elevation from a FAB button.

Environment

• Angular: 18
• CDK/Material: 18

[andrewseguin]

FABs do have an elevation by default: https://m3.material.io/components/floating-action-button/specs

You can remove the box-shadow by overriding the variables used to define the styles:

  --mdc-fab-container-elevation-shadow: 0;
  --mdc-fab-hover-container-elevation-shadow: 0;
  --mdc-fab-pressed-container-elevation-shadow: 0;
  --mdc-fab-focus-container-elevation-shadow: 0;

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}