bug: Action sheet icon is not centered on MD

[twoco]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Currently the icon in action sheet appears not centered. After debugging I found the following:

ionic-framework/core/src/components/action-sheet/action-sheet.md.scss

Line 81 in 1a0b9ed

@include padding(null, null, 4px, null);

Why 4px padding? I removed it and voila, it's good center.

Expected Behavior

Icon should be centered.

Steps to Reproduce

Create action sheet with icons in md mode and see that the icon are slighly moved up / not centered. Inspect that icon and see that there is 4px padding at the bottom. Wonder why.

Current

Expected (fixed by removed padding)

Code Reproduction URL

ionic-framework/core/src/components/action-sheet/action-sheet.md.scss

Line 81 in 1a0b9ed

@include padding(null, null, 4px, null);

Ionic Info

Ionic Angular 6.2.6. But just see the source code on GitHub. There is padding for unknown reason.

Additional Information

No response

[sean-perkins]

@twoco thank you for this issue.

I looked into why this was added and it isn't very clear. It was 4+ years ago and likely to align the content with other UI in the action sheet. Those changes seem to no longer apply.

We will track this as a bug.

[liamdebeasi]

Hey there,

Here is a dev build with a proposed fix if you are interested in testing:

6.3.6-dev.11668031717.1f4524fc

[twoco]

Thanks, I don't need to test. It's already in my fixes.scss ^^

[liamdebeasi]

Thanks for the report. This has been resolved via #26256, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.