content: --inner-min-width is missing from ion-item's CSS Custom Properties

[chawes13]

URL

https://ionicframework.com/docs/api/item#css-custom-properties-1

Issue Description

Documentation for recently added --inner-min-width for ion-item is missing. This can be resolved by adding an @prop --inner-min-width comment in the JSDoc comment of https://github.com/ionic-team/ionic-framework/blob/fbada1d1703cfea87224ced56eaf39caf9322763/core/src/components/item/item.scss

PR for newly added property: https://github.com/ionic-team/ionic-framework/pull/28631

[averyjohnston]

Thank you for the issue. This property was intentionally left undocumented as noted in the PR description:

I made this a CSS variable but left it undocumented. If developers need a way of changing this min-width they can request it and we can easily expose this variable. However, I think 4rem is small enough that this should be sufficient.

Did you have a use case for changing the prop's value?

[chawes13]

Ah, shoot sorry about that! I missed that comment.

Yes, when I upgraded my app, I had a styling regression that required overriding the property (recording: https://share.zight.com/z8uB7A0K).

The variable does seem to be exposed already (i.e., I can override it) even though it's undocumented?

[averyjohnston]

Could you post a Stackblitz app or Github repo showing the issue you're facing (with only the code necessary to reproduce the problem)?

[chawes13]

@amandaejohnston Sure! Is there a Stackblitz Ionic starter template or a good recent example to fork?

[averyjohnston]

You can make a blank starter app. I'll label this as "needs reproduction" so the info shows up 👀

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that we are not able to reproduce.

Please provide easy to follow steps for us to reproduce this issue.

[averyjohnston]

Oh, I forgot the docs repo has a different template for that 😆 The contributing guide has some tips: https://ionicframework.com/docs/contributing/how-to-contribute#how-to-create-a-reproduction

[chawes13]

@amandaejohnston Here you go! https://stackblitz.com/~/github.com/chawes13/ionic-min-padding-repro

You'll notice that the social media links in the menu are nicely aligned. If you edit the package.json to use ^7.6.0 for @ionic/react and @ionic/react-router and remove the placeholder prop on line 31 of App.tsx, you'll see that the padding changes and the icons overflow the container (i.e., introduces a styling regression).

If you navigate to src/pages/Home.css, you can uncomment the override of inner-min-width, which fixes the styling issue.

[averyjohnston]

Thank you! I did some digging internally, and as it turns out, we're actually looking at removing the --inner-min-width property as part of a separate fix in this PR: https://github.com/ionic-team/ionic-framework/pull/28773 Here is a dev build you can use to try this fix:

npm install @ionic/react@7.6.5-dev.11704916749.1e64a3a7 @ionic/react-router@7.6.5-dev.11704916749.1e64a3a7

I tried this with your provided repro and it seems to have resolved things, but could you give it a try on your end and let me know if you encounter any trouble?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!