fix(expansion): fix expansion `.mat-expansion-panel-header` styles #20019

swseverance · 2020-07-17T01:10:50Z

Add margin to .mat-content element to account for consumer using
mat-expansion-panel components with the toggle hidden alongside
mat-expansion-panel components where the toggle is visible
Adjust sizing of .mat-expansion-panel-header-title and
.mat-expansion-panel-header-description elements so that the width
of each respective element is uniform across multiple adjacent
mat-expansion-panel elements
Fixes bug(expansion-panel): description not aligned when mixing rows with and without toggle #20002

LTR

RTL

Caretaker Note (andrewseguin, 2022-04): Breaks ~50 screenshot tests. Text in expansion panels are getting shifted over maybe 10 - 15px

crisbeto · 2020-07-17T13:19:19Z

src/material/expansion/expansion-panel-header.scss

@@ -45,12 +45,23 @@
  flex: 1;
  flex-direction: row;
  overflow: hidden;
+
+  // width of .mat-expansion-indicator::after element
+  &:only-child {


This might break down if we add another element to the markup. Maybe we can set a class based on whether the toggle exists instead?

@crisbeto I've adopted this approach. I also realized that my original commit did not take into consideration togglePosition="before" being used. My new commit takes this into consideration.

crisbeto

LGTM

wagnermaciel · 2020-07-21T23:02:24Z

@swseverance This change breaks ~60 targets inside Google, mostly screenshot tests. I was taking a look at the diffs and they seem significant. I don't think it's worth the effort to fix the .mat-expansion-panel-header styles

swseverance · 2020-07-21T23:59:44Z

@wagnermaciel ok. I’ll close the PR

crisbeto · 2020-07-22T06:46:56Z

IMO this is still a worthwhile change. The screenshot diffs were expected since it moves an element a few pixels away in some cases.

wagnermaciel · 2020-07-22T17:41:33Z

I've been looking through the diffs for the screenshots and I'm going to try and see if I can come up with a fix for them and I'll let you know how it goes. From what I see we can ignore the vast majority of the changes and there are only maybe 1, 2, or 3 that I think someone would complain about

wagnermaciel · 2020-07-23T00:41:10Z

This is generating some unexpected diffs inside of google. It'll be in our backlogs for things to debug but it's relatively low priority compared to other PRs

andrewseguin · 2022-03-24T19:41:19Z

@swseverance I think we can try again to get this landed - would mind rebasing the rebase the PR?

* Add margin to `.mat-content` element to account for consumer using `mat-expansion-panel` components with the toggle hidden alongside `mat-expansion-panel` components where the toggle is visible * Adjust sizing of `.mat-expansion-panel-header-title` and `.mat-expansion-panel-header-description` elements so that the width of each respective element is uniform across multiple adjacent `mat-expansion-panel` elements * Fixes angular#20002

swseverance · 2022-03-24T20:48:21Z

@andrewseguin rebased!

…20019) * Add margin to `.mat-content` element to account for consumer using `mat-expansion-panel` components with the toggle hidden alongside `mat-expansion-panel` components where the toggle is visible * Adjust sizing of `.mat-expansion-panel-header-title` and `.mat-expansion-panel-header-description` elements so that the width of each respective element is uniform across multiple adjacent `mat-expansion-panel` elements * Fixes #20002 (cherry picked from commit 2615b5f)

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`14.1.2` -> `14.1.3`](https://renovatebot.com/diffs/npm/@angular%2fcdk/14.1.2/14.1.3) | | [@angular/material](https://github.com/angular/components) | dependencies | patch | [`14.1.2` -> `14.1.3`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/14.1.2/14.1.3) | --- ### Release Notes <details> <summary>angular/components</summary> ### [`v14.1.3`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1413-rubber-chicken-2022-08-19) [Compare Source](angular/components@14.1.2...14.1.3) ##### cdk | Commit | Type | Description | | -- | -- | -- | | [f661a9300e](angular/components@f661a93) | fix | **dialog:** fall back to node injector token doesn't exist in template injector ([#25406](angular/components#25406)) | | [b9f09aa741](angular/components@b9f09aa) | fix | **overlay:** backdropClass type mismatch ([#25487](angular/components#25487)) | ##### material | Commit | Type | Description | | -- | -- | -- | | [d1ef7e23c6](angular/components@d1ef7e2) | fix | **button-toggle:** toggle name falling out of sync if name changes ([#24713](angular/components#24713)) | | [19df7cf940](angular/components@19df7cf) | fix | **expansion:** fix lint issue ([#25469](angular/components#25469)) | ##### expansion | Commit | Type | Description | | -- | -- | -- | | [b1450b1cb5](angular/components@b1450b1) | fix | fix expansion `.mat-expansion-panel-header` styles ([#20019](angular/components#20019)) | #### Special Thanks Andrew Seguin, Dmitrii Kuzmin, Kristiyan Kostadinov, ko-tori and swseverance  </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, click this checkbox. --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1515 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

angular-automatic-lock-bot · 2022-09-15T00:04:30Z

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.}

swseverance requested review from andrewseguin and jelbourn as code owners July 17, 2020 01:10

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jul 17, 2020

crisbeto reviewed Jul 17, 2020

View reviewed changes

swseverance force-pushed the bugfix/20002 branch from 053ac5c to 1cfce4c Compare July 17, 2020 16:54

crisbeto previously approved these changes Jul 17, 2020

View reviewed changes

swseverance closed this Jul 21, 2020

swseverance reopened this Jul 22, 2020

mmalerba removed the lgtm label Jul 31, 2020

andrewseguin added needs rebase and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Dec 28, 2021

andrewseguin added the needs: clarification The issue does not contain enough information for the team to determine if it is a real bug label Mar 24, 2022

swseverance force-pushed the bugfix/20002 branch from 1cfce4c to a718c20 Compare March 24, 2022 20:43

andrewseguin removed needs rebase needs: clarification The issue does not contain enough information for the team to determine if it is a real bug P4 A relatively minor issue that is not relevant to core functions labels Mar 25, 2022

andrewseguin added the merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note label Apr 22, 2022

andrewseguin self-assigned this Apr 22, 2022

andrewseguin dismissed crisbeto’s stale review via a718c20 May 2, 2022 20:32

andrewseguin approved these changes Aug 15, 2022

View reviewed changes

andrewseguin merged commit 2615b5f into angular:main Aug 15, 2022

This was referenced Aug 23, 2022

build: bump @angular/cdk from 12.2.4 to 14.1.3 numbersprotocol/capture-lite#1961

Closed

build(deps): bump @angular/cdk from 12.2.4 to 14.2.0 numbersprotocol/capture-lite#1992

Closed

sync-by-unito bot mentioned this pull request Sep 1, 2022

build(deps): bump @angular/material from 12.2.4 to 14.2.0 numbersprotocol/capture-lite#2011

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(expansion): fix expansion `.mat-expansion-panel-header` styles #20019

fix(expansion): fix expansion `.mat-expansion-panel-header` styles #20019

swseverance commented Jul 17, 2020 •

edited by andrewseguin

Loading

crisbeto Jul 17, 2020

swseverance Jul 17, 2020

crisbeto left a comment

wagnermaciel commented Jul 21, 2020

swseverance commented Jul 21, 2020

crisbeto commented Jul 22, 2020

wagnermaciel commented Jul 22, 2020

wagnermaciel commented Jul 23, 2020

andrewseguin commented Mar 24, 2022

swseverance commented Mar 24, 2022

angular-automatic-lock-bot bot commented Sep 15, 2022

fix(expansion): fix expansion .mat-expansion-panel-header styles #20019

fix(expansion): fix expansion .mat-expansion-panel-header styles #20019

Conversation

swseverance commented Jul 17, 2020 • edited by andrewseguin Loading

crisbeto Jul 17, 2020

Choose a reason for hiding this comment

swseverance Jul 17, 2020

Choose a reason for hiding this comment

crisbeto left a comment

Choose a reason for hiding this comment

wagnermaciel commented Jul 21, 2020

swseverance commented Jul 21, 2020

crisbeto commented Jul 22, 2020

wagnermaciel commented Jul 22, 2020

wagnermaciel commented Jul 23, 2020

andrewseguin commented Mar 24, 2022

swseverance commented Mar 24, 2022

angular-automatic-lock-bot bot commented Sep 15, 2022

fix(expansion): fix expansion `.mat-expansion-panel-header` styles #20019

fix(expansion): fix expansion `.mat-expansion-panel-header` styles #20019

swseverance commented Jul 17, 2020 •

edited by andrewseguin

Loading