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

MDC button density is overridden by base button styles #22728

Closed
jelbourn opened this issue May 19, 2021 · 1 comment · Fixed by #22736
Closed

MDC button density is overridden by base button styles #22728

jelbourn opened this issue May 19, 2021 · 1 comment · Fixed by #22736
Assignees
@crisbeto
Labels
area: material/button G This is is related to a Google internal issue P2 The issue is important to a large percentage of users, with a workaround

Comments

@jelbourn
Copy link
Member

The MDC button's button.scss file emits the following style:

.mdc-button {
  height: 36px;
  border-radius: 4px;
  border-radius: var(--mdc-shape-small, 4px);
  padding: 0 8px 0 8px
}

When applying button density via theme mixin, the correct height is emitted into the theme (density -2 here):

.mat-mdc-button, 
.mat-mdc-raised-button, 
.mat-mdc-unelevated-button, 
.mat-mdc-outlined-button {
  height: 28px;
  margin-top: 0;
  margin-bottom: 0
}

In the vast majority of cases, people will include their theme file in the document head. Angular, however, will append component-specific styles at the end of the head, meaning that the button's base styles will take precedence over the theme style.
@jelbourn jelbourn added P2 The issue is important to a large percentage of users, with a workaround G This is is related to a Google internal issue area: material/button labels May 19, 2021
@crisbeto crisbeto self-assigned this May 20, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue May 20, 2021
@crisbeto
fix(material-experimental/mdc-button): density styles being overwritt…
875c624 
…en by structural styles

The button's density styles currently have the same specificity as the structural styles which means that they'll usually be overwritten, unless they're nested inside another selector.

These changes add more specificity so that the density always has precedence.

Fixes angular#22728.
@crisbeto crisbeto mentioned this issue May 20, 2021
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 14, 2021
@crisbeto
fix(material-experimental/mdc-button): density styles being overwritt…
6cf4e0d 
…en by structural styles

The button's density styles currently have the same specificity as the structural styles which means that they'll usually be overwritten, unless they're nested inside another selector.

These changes add more specificity so that the density always has precedence.

Fixes angular#22728.
andrewseguin pushed a commit that referenced this issue Mar 2, 2022
@crisbeto
fix(material-experimental/mdc-button): density styles being overwritt…
3021cf5 
…en by structural styles (#22736)

The button's density styles currently have the same specificity as the structural styles which means that they'll usually be overwritten, unless they're nested inside another selector.

These changes add more specificity so that the density always has precedence.

Fixes #22728.
andrewseguin pushed a commit that referenced this issue Mar 2, 2022
@crisbeto @andrewseguin
fix(material-experimental/mdc-button): density styles being overwritt…
7b85cc0 
…en by structural styles (#22736)

The button's density styles currently have the same specificity as the structural styles which means that they'll usually be overwritten, unless they're nested inside another selector.

These changes add more specificity so that the density always has precedence.

Fixes #22728.

(cherry picked from commit 3021cf5)
@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 Apr 2, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@crisbeto @forsti0506
fix(material-experimental/mdc-button): density styles being overwritt…
06796f9 
…en by structural styles (angular#22736)

The button's density styles currently have the same specificity as the structural styles which means that they'll usually be overwritten, unless they're nested inside another selector.

These changes add more specificity so that the density always has precedence.

Fixes angular#22728.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/button G This is is related to a Google internal issue P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
2 participants
@jelbourn @crisbeto