fix(fab-button): position is correct with custom sizes - #28195
Merged
Conversation
liamdebeasi
commented
Sep 19, 2023
|
|
||
| :host(.fab-button-small) { | ||
| @include margin(($fab-size - $fab-small-size) * 0.5); | ||
| @include margin($fab-button-small-margin); |
Contributor
Author
There was a problem hiding this comment.
This was always 8px, so I just made it its own variable
$fab-size: 56
$fab-small-size: 40
(56 - 40) * 0.5 = 16 * 0.5 = 8
liamdebeasi
commented
Sep 19, 2023
Comment on lines
-17
to
+16
| min-height: $fab-size; | ||
| min-width: $fab-small-size + ($fab-button-small-margin * 2); |
Contributor
Author
There was a problem hiding this comment.
These evaluate to the same value. However, the purpose of this is so the list is aligned with the parent FAB button. I decided to make this a bit more verbose so its clear where 56px is coming from. I originally thought that this was a bug since small FAB buttons can be 40px until I realized we were trying to account for the small FAB button margin too.
liamdebeasi
changed the title
liamdebeasi
marked this pull request as ready for review
September 22, 2023 15:22
averyrousseau
approved these changes
Sep 28, 2023
averyrousseau
left a comment
averyrousseau
left a comment
Contributor
There was a problem hiding this comment.
I like how you structured the test here, it's very elegant!
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Issue number: resolves #22564
What is the current behavior?
Changing the size of the FAB button causes it to be positioned incorrectly. This was happening because we set position values based on the assumption that the default FAB button would always be 56px x 56px.
What is the new behavior?
Does this introduce a breaking change?
Other information
Dev build:
7.4.1-dev.11695395641.14897417