Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(material/button): add support for tonal button #30638

Merged
merged 1 commit into from
Mar 18, 2025

Conversation

crisbeto
Copy link
Member

Adds support for the tonal button appearance from the spec. It can be enabled by setting matButton="tonal" on the button.

Fixes #28809.

@crisbeto crisbeto added the target: major This PR is targeted for the next major release label Mar 17, 2025
@crisbeto crisbeto requested a review from a team as a code owner March 17, 2025 13:02
@crisbeto crisbeto requested review from mmalerba and wagnermaciel and removed request for a team March 17, 2025 13:02
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: material/button labels Mar 17, 2025
@crisbeto crisbeto requested a review from andrewseguin March 17, 2025 13:03
@crisbeto crisbeto added the dev-app preview When applied, previews of the dev-app are deployed to Firebase label Mar 17, 2025
Copy link

github-actions bot commented Mar 17, 2025

Deployed dev-app for 5693a07 to: https://ng-dev-previews-comp--pr-angular-components-30638-dev-8rktwxmd.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@eneajaho
Copy link
Contributor

Looks like density is not being applied.

CleanShot 2025-03-17 at 20 06 37

@crisbeto crisbeto force-pushed the 28809/tonal-button branch from 266d614 to 072ad1d Compare March 17, 2025 19:15
@crisbeto
Copy link
Member Author

oops, good catch. I've pushed a fix.

Adds support for the tonal button appearance from the spec. It can be enabled by setting `matButton="tonal"` on the button.

Fixes angular#28809.
@crisbeto crisbeto force-pushed the 28809/tonal-button branch from 072ad1d to 5693a07 Compare March 18, 2025 07:41
@crisbeto crisbeto removed the request for review from wagnermaciel March 18, 2025 07:41
@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Mar 18, 2025
@crisbeto crisbeto merged commit fb81ab4 into angular:main Mar 18, 2025
20 of 22 checks passed
@JWess
Copy link

JWess commented Mar 18, 2025

Why does it use matButton="tonal" instead of mat-tonal-button, a la mat-stroked-button, mat-raised-button, and mat-flat-button?

@mjamin
Copy link

mjamin commented Mar 18, 2025

Looks like an oversight not to include 'tonal' in the selectors and _inferAppearance?

@JWess
Copy link

JWess commented Mar 26, 2025

@crisbeto Any word on the two questions above?

@crisbeto
Copy link
Member Author

I intentionally didn't include an attribute selector for the tonal button, because long-term we want to switch to the matButton input. It has the advantage of being type-checked and supporting dynamic changes of the appearance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker area: material/button detected: feature PR contains a feature commit dev-app preview When applied, previews of the dev-app are deployed to Firebase target: major This PR is targeted for the next major release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat(button): add support for filled tonal button same as in M3 spec
7 participants