bug(Button): Diff styles than in documentation

[plskrdar]

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

Hello, I started working with angular 17.3.0 + Angular Material 17.3.10, and I noticed that button styles from basic examples are different than in documentation page.

Reproduction

StackBlitz link: Steps to reproduce:

1. install @angular/cli@17 -g
2. create new project
3. install materials with ng add @angular/material
4. add basic examples of the buttons to AppComponent

Expected Behavior

Buttons should be rounded like on the doc page: --mdc-filled-button-container-shape: 9999px; border-radius: var(--mdc-filled-button-container-shape);

Actual Behavior

Buttons have old style --mdc-filled-button-container-shape: 4px; border-radius: var(--mdc-filled-button-container-shape);

Environment

Windows 10, Chrome Version 128.0.6613.114 (Official Build) (64-bit) "dependencies": { "@angular/animations": "^17.3.0", "@angular/cdk": "^17.3.10", "@angular/common": "^17.3.0", "@angular/compiler": "^17.3.0", "@angular/core": "^17.3.0", "@angular/forms": "^17.3.0", "@angular/material": "^17.3.10", "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", "@ngx-translate/core": "^15.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" }, "devDependencies": { "@angular-devkit/build-angular": "^17.3.9", "@angular-eslint/builder": "17.5.2", "@angular-eslint/eslint-plugin": "17.5.2", "@angular-eslint/eslint-plugin-template": "17.5.2", "@angular-eslint/schematics": "17.5.2", "@angular-eslint/template-parser": "17.5.2", "@angular/cli": "^17.3.9", "@angular/compiler-cli": "^17.3.0", "@types/jasmine": "~5.1.0", "@typescript-eslint/eslint-plugin": "7.11.0", "@typescript-eslint/parser": "7.11.0", "cypress": "^13.14.1", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.2.1", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "prettier": "3.3.3", "prettier-eslint": "^16.3.0", "typescript": "~5.4.2" }

UPDATE: same story with value of --mdc-filled-button-container-height, the package has 36px, but doc has set 40px

Looks like prebuild-themes are different in documentation page against angular material lib

[crisbeto]

The documentation site uses Angular 18 which defaults to Material Design 3, whereas Angular 17 is on Material Design 2. We still ship prebuilt themes for M2 which are prefixed with m2-.

[plskrdar]

Cannot agree, im talking about: https://v17.material.angular.io/components/button/overview and documentation for this site/version is not relevant.

[crisbeto]

M3 was available in v17, it just wasn't the default. We still updated the docs site to reflect the latest styles. You can go back to the v16 site to see the M2 appearance since it hasn't changed much in a while.

[angular-automatic-lock-bot[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.}