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.

Sign up for GitHub

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

Jump to bottom

fix(expansion-panel): arrow not centered vertically and incorrect title font weight #10503

Closed
wants to merge 1 commit into from
Closed

fix(expansion-panel): arrow not centered vertically and incorrect title font weight #10503

wants to merge 1 commit into from

Conversation

crisbeto
Copy link
Member

  • Fixes the arrow in the expansion panel header not being quite centered, due to it being based on a rotated CSS triangle. These changes switch to use an SVG which is much easier to reason about.
  • Uses the correct font weight for the panel header's title.

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Mar 20, 2018
josephperrott
josephperrott reviewed Mar 23, 2018
View reviewed changes
Copy link
Member

@josephperrott josephperrott left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Arrow positioning is actually fix/updated in #8199

src/lib/expansion/_expansion-theme.scss Outdated
@@ -56,4 +56,8 @@
.mat-expansion-panel-content {
@include mat-typography-level-to-styles($config, body-1);
}

.mat-expansion-panel-header-title {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

font-weight styling should go into @mixin mat-expansion-panel-typography.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is inside the typography mixin already.

@crisbeto
Copy link
Member Author

crisbeto commented Aug 5, 2018

@josephperrott can you take another look?

josephperrott
josephperrott previously approved these changes Aug 7, 2018
View reviewed changes
Copy link
Member

@josephperrott josephperrott left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@josephperrott josephperrott added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Aug 7, 2018
@ngbot
Copy link

ngbot bot commented Aug 7, 2018

I see that you just added the pr: merge ready label, but the following checks are still failing:
    failure missing required label: "target: *"

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

@josephperrott josephperrott added the target: patch This PR is targeted for the next patch release label Aug 7, 2018
@crisbeto crisbeto mentioned this pull request Feb 27, 2019
Closed
@mmalerba mmalerba added aaa and removed aaa labels Apr 25, 2019
@crisbeto
fix(expansion-panel): arrow not centered vertically and incorrect tit…
d86a391 
…le font weight

* Fixes the arrow in the expansion panel header not being quite centered, due to it being based on a rotated CSS triangle. These changes switch to use an SVG which is much easier to reason about.
* Uses the correct font weight for the panel header's title.
@crisbeto crisbeto added the P4 A relatively minor issue that is not relevant to core functions label Jun 20, 2019
@crisbeto crisbeto force-pushed the expansion-panel-header-arrow-centering branch from 4006dc7 to d86a391 Compare June 20, 2019 21:08
@josephperrott josephperrott removed their assignment Oct 15, 2019
@mmalerba mmalerba removed the lgtm label Jul 31, 2020
@andrewseguin andrewseguin added needs rebase and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Dec 29, 2021
@andrewseguin andrewseguin removed the P4 A relatively minor issue that is not relevant to core functions label Mar 28, 2022
@josephperrott josephperrott added action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews and removed needs rebase labels Nov 16, 2022
@crisbeto crisbeto mentioned this pull request Nov 13, 2023
Closed
crisbeto added a commit to crisbeto/material2 that referenced this pull request Feb 17, 2024
@crisbeto
fix(material/expansion): center indicator icon in M3
49fc6fc 
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 mentioned this pull request Feb 17, 2024
Merged
@crisbeto
Copy link
Member Author

Closing in favor of #28603.

@crisbeto crisbeto closed this Feb 21, 2024
crisbeto added a commit that referenced this pull request Feb 21, 2024
@crisbeto
fix(material/expansion): center indicator icon in M3 (#28603)
31102d0 
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.
crisbeto added a commit that referenced this pull request Feb 21, 2024
@crisbeto
fix(material/expansion): center indicator icon in M3 (#28603)
0c5781b 
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.
Reviewers

@josephperrott josephperrott josephperrott left review comments

@jelbourn jelbourn Awaiting requested review from jelbourn

Assignees
No one assigned
Labels
action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews 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
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@crisbeto @josephperrott @jelbourn @googlebot @mmalerba @andrewseguin