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.

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

fix(range): add correct margin in item #28161

Merged
merged 21 commits into from
Sep 13, 2023
Merged

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Sep 13, 2023

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:

Checkbox Range
image image

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?

  • Adds margin to the top of the label and the bottom of the native wrapper when a range is in an item.

Does this introduce a breaking change?

  • Yes
  • No

Other information

@github-actions github-actions bot added the package: core @ionic/core package label Sep 13, 2023
@liamdebeasi liamdebeasi marked this pull request as ready for review September 13, 2023 15:47
@liamdebeasi liamdebeasi requested review from a team and mapsandapps and removed request for a team September 13, 2023 15:49
$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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know that this is the default but it does seems a bit too much when comparing it to the other labels.
Screenshot 2023-09-13 at 9 46 02 AM

Should we aim to keep it visually similar or stick with the default value?

Copy link
Contributor Author

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.

Copy link
Contributor Author

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?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That looks better. I can't tell if my eyes are playing tricks but it seems that the stacked spacing is less compared to a non-stacked label.
Screenshot 2023-09-13 at 10 35 49 AM

Using 3px seems closer. I'm not a stickler on this though.

Copy link
Contributor Author

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.

Copy link
Contributor

@mapsandapps mapsandapps left a 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 👍🏻

Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@liamdebeasi liamdebeasi merged commit 1d2b867 into feature-7.4 Sep 13, 2023
43 checks passed
@liamdebeasi liamdebeasi deleted the range-item-margin branch September 13, 2023 20:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants