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

fix(material/expansion): center indicator icon in M3 #28603

Merged
merged 1 commit into from
Feb 21, 2024

Conversation

crisbeto
Copy link
Member

Currently the expansion panel arrow is drawn with borders which makes it difficult to center. It's also problematic in high contrast mode where it renders as a rectangle. We've wanted to fix this for a while, but it breaks a lot of internal screenshot tests (see #10503).

These changes resolve the issue for apps using M3 by having two indicators that we toggle using tokens.

Fixes #28037.

Currently the expansion panel arrow is drawn with borders which makes it difficult to center. It's also problematic in high contrast mode where it renders as a rectangle. We've wanted to fix this for a while, but it breaks a lot of internal screenshot tests (see angular#10503).

These changes resolve the issue for apps using M3 by having two indicators that we toggle using tokens.

Fixes angular#28037.
@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Feb 17, 2024
@crisbeto crisbeto removed the request for review from mmalerba February 21, 2024 09:54
@crisbeto crisbeto self-assigned this Feb 21, 2024
@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Feb 21, 2024
@crisbeto crisbeto merged commit 31102d0 into angular:main Feb 21, 2024
25 of 27 checks passed
crisbeto added a commit that referenced this pull request Feb 21, 2024
Currently the expansion panel arrow is drawn with borders which makes it difficult to center. It's also problematic in high contrast mode where it renders as a rectangle. We've wanted to fix this for a while, but it breaks a lot of internal screenshot tests (see #10503).

These changes resolve the issue for apps using M3 by having two indicators that we toggle using tokens.

Fixes #28037.

(cherry picked from commit 31102d0)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 23, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(mat-expansion-panel): mat-expansion-indicator is slightly off center
2 participants