-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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(item): remove empty padding space for item bottom #24323
Conversation
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.
This is a great start! Can we also add a screenshot test so this does not regress?
core/src/components/item/item.scss
Outdated
0, | ||
var(--inner-padding-end), | ||
0, | ||
calc(var(--padding-start) + var(--ion-safe-area-left, 0px) + var(--bottom-padding-start)) |
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.
--bottom-padding-start
is not part of the public API, and defaults to 0px
, so do we even need to use it anymore?
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.
I'd feel comfortable removing it. Especially as another draft PR exposes .item-bottom
as a shadow part that would allow developers to customize these styles in 6.1.
Is our stance that anything documented is public API and any other CSS variables are internal use and lower concern of affecting our release cycle?
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.
Yep exactly. If it's not in the comments above in that item.scss
file (this causes stencil to autogenerate it in the docs.json file) then it's internal.
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.
Great job!
Is this merged into @ionic/vue? I am using the vue implementation of ionic, v6.1.11 but yet facing the empty space from .item- bottom class |
This was released in Ionic 6.0.1: https://github.com/ionic-team/ionic-framework/releases/tag/v6.0.1 Could you create a separate issue with a minimal reproduction? |
Pull request checklist
Please check if your PR fulfills the following requirements:
npm run build
) was run locally and any changes were pushednpm run lint
) has passed locally and any fixes were made for failuresPull request type
Please check the type of change your PR introduces:
What is the current behavior?
The
.item-bottom
implementation forion-item
, incorrectly pushes the item's contents regardless if help/error text is present.Issue Number: Resolves #23892
What is the new behavior?
The reserved space for the help/error text will not push the container space when the slot is unused.
Does this introduce a breaking change?
Other information
Changes for help/error text and the item bottom container were introduced with: #23354