fix(dialog): not applying margins to new button variants #11961
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
googlebot
added
the
cla: yes
src/lib/button/button.ts
Outdated
| // Add a class that applies to all buttons. This makes it easier to target if somebody | ||
| // wants to target all Material buttons. We do it here rather than `host` to ensure that | ||
| // the class is applied to derived classes. | ||
| elementRef.nativeElement.classList.add('mat-button-base'); |
There was a problem hiding this comment.
Instead of adding another class of mat-button-base, can we just always have mat-button?
There was a problem hiding this comment.
I think it's better to have a new class, since people could potentially be depending on certain variants not having .mat-button
jelbourn
approved these changes
Jun 28, 2018
src/lib/button/button.ts
Outdated
| // Add a class that applies to all buttons. This makes it easier to target if somebody | ||
| // wants to target all Material buttons. We do it here rather than `host` to ensure that | ||
| // the class is applied to derived classes. | ||
| elementRef.nativeElement.classList.add('mat-button-base'); |
There was a problem hiding this comment.
I think it's better to have a new class, since people could potentially be depending on certain variants not having .mat-button
jelbourn
added
pr: lgtm
action: merge
|
Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. |
crisbeto
force-pushed
the
dialog-button-variants
branch
from
b3d1cee to
ace24a8
Compare
jelbourn
added
blocked
jelbourn
removed
blocked
crisbeto
added a commit
to crisbeto/material2
that referenced
this pull request
Jul 10, 2019
Reworks the button focus indication and ripples so that they render behind the text of the button, instead of top of it. This helps with the contrast ratios while focused. Incorporates some of the changes from angular#11961 so that we don't have to increase the size of the CSS selectors.
crisbeto
added a commit
to crisbeto/material2
that referenced
this pull request
Jul 10, 2019
Reworks the button focus indication and ripples so that they render behind the text of the button, instead of top of it. This helps with the contrast ratios while focused. Also gets rid of the `mat-button-focus-overlay` element in favor of using `::before` which saves us the extra DOM node. Incorporates some of the changes from angular#11961 so that we don't have to increase the size of the CSS selectors.
A while ago we introduced a few new button variants, however we never updated the button selector in the dialog which means that they won't get the proper margin if they're placed next to each other. With the new variants, the dialog selector will grow exponentially since we have to list every possible button combination, which is why I added a new class to the button which makes it a lot easier to target any button.
crisbeto
force-pushed
the
dialog-button-variants
branch
from
ace24a8 to
fbd4ebc
Compare
jelbourn
pushed a commit
that referenced
this pull request
Jul 12, 2019
Reworks the button focus indication and ripples so that they render behind the text of the button, instead of top of it. This helps with the contrast ratios while focused. Also gets rid of the `mat-button-focus-overlay` element in favor of using `::before` which saves us the extra DOM node. Incorporates some of the changes from #11961 so that we don't have to increase the size of the CSS selectors.
jelbourn
pushed a commit
that referenced
this pull request
Jul 17, 2019
Reworks the button focus indication and ripples so that they render behind the text of the button, instead of top of it. This helps with the contrast ratios while focused. Also gets rid of the `mat-button-focus-overlay` element in favor of using `::before` which saves us the extra DOM node. Incorporates some of the changes from #11961 so that we don't have to increase the size of the CSS selectors.
crisbeto
added
the
P2
|
Setting as a P2, because it keeps coming up in bug reports. |
andrewseguin
pushed a commit
that referenced
this pull request
Aug 26, 2019
A while ago we introduced a few new button variants, however we never updated the button selector in the dialog which means that they won't get the proper margin if they're placed next to each other. With the new variants, the dialog selector will grow exponentially since we have to list every possible button combination, which is why I added a new class to the button which makes it a lot easier to target any button. (cherry picked from commit 66fa26f)
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
A while ago we introduced a few new button variants, however we never updated the button selector in the dialog which means that they won't get the proper margin if they're placed next to each other. With the new variants, the dialog selector will grow exponentially since we have to list every possible button combination, which is why I added a new class to the button which makes it a lot easier to target any button.
Note: if we consider that this new class won't be very useful and that it's bleeding dialog logic into the button module, I can rework it so it's the dialog that applies a special class to all buttons.