fix(material-experimental/mdc-card): remove extra margin if header doesn't have an avatar by crisbeto · Pull Request #19072 · angular/components

crisbeto · 2020-04-14T15:02:35Z

The card header margin was set up assuming that there would always be an avatar element, but that's not always the case. These changes add an extra check to avoid the extra margin.

Fixes#19069.

jelbourn · 2020-04-14T17:54:14Z

Does the mdc-based card do something similar?

crisbeto · 2020-04-14T18:10:16Z

Looks like it does, but we'd have to handle it differently since it uses padding to do the spacing. Do you remember the context behind it @jelbourn (you're on the blame)? https://github.com/angular/components/blob/master/src/material-experimental/mdc-card/card.scss#L33

jelbourn · 2020-04-14T18:15:01Z

IIRC, this was the best I could do to preserve the existing spacing for the content regions without adding spacing to the card itself. Padding contained the spacing to only the specific content regions, which made the styles much simpler; when it was margin, the styles needed to be more aware of adjacent siblings and the like.

crisbeto · 2020-04-17T05:03:20Z

I've pushed a fix to cover the MDC card @jelbourn.

mmalerba · 2020-04-17T18:39:20Z

Can you add a demo app example (one for each version) that demonstrates this situation?

crisbeto · 2020-04-17T18:42:42Z

Done.

mmalerba

LGTM

jelbourn · 2020-04-20T17:43:20Z

This breaks about 61 targets worth of screenshot tests. All of them are cases where it looks like they were depending on this padding, so it breaks the app layout.

saithis · 2020-05-25T08:18:06Z

@jelbourn Whats the plan for this fix then, will this be considered for v10?

jelbourn · 2020-05-26T18:41:34Z

Due to how breaking this is, we probably won't land it at all.

saithis · 2020-05-26T19:18:45Z

This makes mat-card pretty annoying for us. We have to work around this on every usage with a title, as we never use the avatar element :/

Totati · 2020-05-26T20:37:24Z

This makes mat-card pretty annoying for us. We have to work around this on every usage with a title, as we never use the avatar element :/

You could fix it in your styles.scss file globally till mdc-card arrives.

…esn't have an avatar The card header margin was set up assuming that there would always be an avatar element, but that's not always the case. These changes add an extra check to avoid the extra margin. Fixesangular#19069.

crisbeto · 2021-05-04T17:17:29Z

I've reduced the scope of these changes to only apply to the MDC card.

zarend · 2022-02-04T19:31:54Z

Ran presubmit last night, looks like this has about 41 presubmit failures.

…esn't have an avatar (#19072) The card header margin was set up assuming that there would always be an avatar element, but that's not always the case. These changes add an extra check to avoid the extra margin. Fixes#19069. (cherry picked from commit 557f8bc)

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`13.2.5` -> `13.2.6`](https://renovatebot.com/diffs/npm/@angular%2fcdk/13.2.5/13.2.6) | | [@angular/material](https://github.com/angular/components) | dependencies | patch | [`13.2.5` -> `13.2.6`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/13.2.5/13.2.6) | --- ### Release Notes <details> <summary>angular/components</summary> ### [`v13.2.6`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1326-suede-spaghetti-2022-03-09) [Compare Source](angular/components@13.2.5...13.2.6) ##### cdk | Commit | Type | Description | | -- | -- | -- | | [39929a815d](angular/components@39929a8) | fix | **overlay:** backdrop timeouts not being cleared in some cases ([#23972](angular/components#23972)) | | [2f2b0c7cf4](angular/components@2f2b0c7) | fix | **testing:** dispatch mouseover and mouseout events in UnitTestElement ([#24490](angular/components#24490)) | | [edca54f2d0](angular/components@edca54f) | fix | **testing:** require at least one argument for locator functions ([#23619](angular/components#23619)) | ##### material | Commit | Type | Description | | -- | -- | -- | | [c4993ac171](angular/components@c4993ac) | fix | **button:** avoid setting a tabindex on all link buttons ([#22901](angular/components#22901)) | | [c47d30e0e5](angular/components@c47d30e) | fix | **dialog:** don't wait for animation before moving focus ([#24121](angular/components#24121)) | | [70b8248568](angular/components@70b8248) | fix | **expansion:** able to tab into descendants with visibility while closed ([#24045](angular/components#24045)) | | [d22d73ab8d](angular/components@d22d73a) | fix | **select:** disabled state out of sync when swapping form group with a disabled one ([#17872](angular/components#17872)) | | [911d6b71d4](angular/components@911d6b7) | fix | **slide-toggle:** clear name from host node ([#15505](angular/components#15505)) | | [4b5363d160](angular/components@4b5363d) | fix | **tooltip:** decouple removal logic from change detection ([#19432](angular/components#19432)) | ##### material-experimental | Commit | Type | Description | | -- | -- | -- | | [8414646d79](angular/components@8414646) | fix | **mdc-card:** remove extra margin if header doesn't have an avatar ([#19072](angular/components#19072)) | | [f66486dc5b](angular/components@f66486d) | fix | **mdc-slider:** fix a few null pointer exceptions ([#23659](angular/components#23659)) | ##### multiple | Commit | Type | Description | | -- | -- | -- | | [6ee0089ce6](angular/components@6ee0089) | fix | don't block child component animations on open ([#24529](angular/components#24529)) | #### Special Thanks Andrew Seguin, Jeri Peier, Kristiyan Kostadinov and Paul Gschwendtner  </details> --- ### Configuration 📅 **Schedule**: 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/1214 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-04-03T00:03:54Z

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

crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release labels Apr 14, 2020

crisbeto requested a review from jelbourn as a code owner April 14, 2020 15:02

crisbeto assigned mmalerba Apr 14, 2020

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

crisbeto force-pushed the 19069/calendar-header-text-margin branch from 533e9a6 to 0a447e8Compare April 17, 2020 05:02

crisbeto requested a review from mmalerba as a code owner April 17, 2020 05:02

crisbeto force-pushed the 19069/calendar-header-text-margin branch from 0a447e8 to 4e889e6Compare April 17, 2020 18:42

mmalerba approved these changes Apr 17, 2020
View reviewed changes

mmalerba added lgtm action: merge The PR is ready for merge by the caretaker labels Apr 17, 2020

jelbourn added the presubmit failures This PR has failures in Google's internal presubmit process and cannot be immediately merged label Apr 20, 2020

mmalerba removed the lgtm label Jul 31, 2020

crisbeto force-pushed the 19069/calendar-header-text-margin branch from 4e889e6 to 27f25e5Compare April 2, 2021 09:59

crisbeto force-pushed the 19069/calendar-header-text-margin branch from 27f25e5 to b8309d6Compare May 4, 2021 06:01

crisbeto changed the title ~~fix(card): remove extra margin if header doesn't have an avatar~~fix(material/card): remove extra margin if header doesn't have an avatarMay 4, 2021

crisbeto force-pushed the 19069/calendar-header-text-margin branch from b8309d6 to a360ff3Compare May 4, 2021 17:17

crisbeto changed the title ~~fix(material/card): remove extra margin if header doesn't have an avatar~~fix(material-experimental/mdc-card): remove extra margin if header doesn't have an avatarMay 4, 2021

crisbeto removed the presubmit failures This PR has failures in Google's internal presubmit process and cannot be immediately merged label May 4, 2021

andrewseguin removed the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 28, 2021

zarend added the presubmit failures This PR has failures in Google's internal presubmit process and cannot be immediately merged label Feb 4, 2022

andrewseguin merged commit 557f8bc into angular:masterMar 3, 2022

sync-by-unitoBot mentioned this pull request Mar 14, 2022
build(deps): bump @angular/cdk from 12.2.4 to 13.2.6 numbersprotocol/capture-cam#1370
Closed

sync-by-unitoBot mentioned this pull request Mar 22, 2022
build(deps): bump @angular/cdk from 12.2.4 to 13.3.0 numbersprotocol/capture-cam#1403
Closed

angular-automatic-lock-botBot locked and limited conversation to collaborators Apr 3, 2022

Uh oh!

Conversation

crisbeto commented Apr 14, 2020

Uh oh!

jelbourn commented Apr 14, 2020

Uh oh!

crisbeto commented Apr 14, 2020

Uh oh!

jelbourn commented Apr 14, 2020

Uh oh!

crisbeto commented Apr 17, 2020

Uh oh!

mmalerba commented Apr 17, 2020

Uh oh!

crisbeto commented Apr 17, 2020

Uh oh!

mmalerba left a comment

Choose a reason for hiding this comment

Uh oh!

jelbourn commented Apr 20, 2020

Uh oh!

saithis commented May 25, 2020

Uh oh!

jelbourn commented May 26, 2020

Uh oh!

saithis commented May 26, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Totati commented May 26, 2020

Uh oh!

crisbeto commented May 4, 2021

Uh oh!

zarend commented Feb 4, 2022

Uh oh!

angular-automatic-lock-botBot commented Apr 3, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

saithis commented May 26, 2020•
edited
Loading