-
Notifications
You must be signed in to change notification settings - Fork 13.5k
fix(range): add correct margin in item #28161
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.
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
Conversation
17f2807
to
04ef6d4
Compare
e3feff6
to
c819116
Compare
$range-item-label-margin-top: 10px !default; | ||
|
||
/// @prop - Bottom margin of range's label when in an item | ||
$range-item-label-margin-bottom: 10px !default; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point. I'll try removing the bottom margin and see how that looks.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok how does db20bd1 look?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When using a non-stacked label the label-text-wrapper element adds 10px of bottom margin which is why there's a difference. The same difference exists with the other form controls too, so I don't think that's something that should be handled in this PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me after the bottom margin adjustment 👍🏻
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Issue number: N/A
What is the current behavior?
As part of e6c7bb6, we added margin to the stacked label when in an item so the label doesn't run up against the divider line for an item above it. However, we did not add this same margin for range.
You can see this in the screenshot comparisons:
Notice how the checkbox in an item screenshot has top/bottom margin, but the range in an item does not.
What is the new behavior?
Does this introduce a breaking change?
Other information