bug: MD inconsistency: ion-item height is different with some children

[cmaas]

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

v7.x

Current Behavior

In v7, some elements have a new mode that get their labels as props such as: ion-input, ion-select. This "non-legacy" mode sets their min-height to 56px (why though?), see here:

ionic-framework/core/src/components/select/select.md.scss

Line 23 in c801e2a

:host(:not(.legacy-select)) {

However, other elements such as ion-toggle or ion-label (used for navigation in an ion-item) do not have a label prop and hence, don't have this rule applied. This results in inconsistent vertical spacing. See the demo linked below.

Expected Behavior

1. Make spacing consistent
2. Revert (or explain) the choice of setting a, imho, rather unpleasant min-height of 56px.

Steps to Reproduce

See demo

Code Reproduction URL

https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA87KAD4AOnQAEU4RAZIJ0mbPhl4MUQEleZWFIAqEMPEEB6NRohKVssLABOZAA7wp8AJ7OIAXnEhcbiQAVxh-KTAHWD8QHHhnMFQzM1gkOgwAKzAkaDIANwcMOgh4MzpnXDMAATJdWBTuBwgzJDITM1q6PQ66jGNcTLB-UXN7J1cbFUEoMjoAaykmqBiTD0osCBLwrCaSGLiEpJS0wZyZgqKSsorqzu6eJpSwMB6u2AwAI2C6JBgMWGe4TMk3MGwUSkEHyCHhBnQAtGCcg5JrZBPD4NxuFAPgwHFIeFBGjFnE5cLiPMNJLZqbJ0epNAAJbjMcx0qwoqavOEYrE45FU2RcxEQfnKNG8OE8PgQPj4qAMZ4xeHOBStOgAc0pylRzlEAHVoDxmO5uFIAMr8WAUKQAQWcznN8FxiEK5l1AtR8JmJg5NPFdDh6gguF9NKm8NmzmCbnlH2gMQAmtxgnjGMaABQAVgAbM4AB4ASnCnm8MUQefgw1ZEsj0dDqK5QZDHrD-sDiGb2rDnpr5WjUlj8f8SZTUjTECkWdzheLXl8-nLlZAI0bffg9c5EY7G5kbabI3R3HV6s0BiPJ4n8CwbUnABYABz5gvVgMY4+aF-t4M72k1jtSHInQoMsHGCCBtl2GIzBJbhyBgV49C1bs-S9Bg4zEAAFBxYIoCcMIYdUJ3TB8n0-QcxBbP1G23SjqT3Giu27NtIBgBABzQocQAAEQgEgGFCGMOKgSccyfcJnHlWAICwLEkRiAAxBg8kaIMpHk0D1CQ5CewDFi4HgOFuFcTopDyBgoDAmIGHtMJlztCSIE-PSEEM4zeB-HS4WcgyjLUXhTPMyz-BxRhGGGAAhBhQoYJzoH01y-LoDzwwlbyEpMsyLPnEBGiiwjhgAeQcPLHK5NLfM6ZLYtY9daIbLdv20mRaLItparFLkpX4drzChJAYUkUE8AouhJE4bzOiodAACZs1QTMAAYQAAX0IegmBYdBBk4LqZXgVgVrWkBx1Yf5nh23huoO5aAF1lqAA

Ionic Info

CDN bundle current version

Additional Information

No response

[liamdebeasi]

Thanks! Can you give this dev build a try? 7.5.2-dev.11697818830.1a33c881

I think the problem was we originally added min-height: 56px to align with the Material Design spec for the outlined/solid inputs. However, we accidentally applied it in the general MD stylesheet rather than the stylesheets specifically for the outline/solid inputs causing non-filled inputs to have this min-height too.

[cmaas]

Thanks! Can you give this dev build a try? 7.5.2-dev.11697818830.1a33c881

Looking good, thanks! Demo

[liamdebeasi]

Thanks for the issue. This has been resolved via #28390, 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.