Skip to content

feat(list-header): add inner part#30930

Open
brandyscarney wants to merge 2 commits intofeature-8.8from
FW-6794-list-header
Open

feat(list-header): add inner part#30930
brandyscarney wants to merge 2 commits intofeature-8.8from
FW-6794-list-header

Conversation

@brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Jan 19, 2026

Issue number: N/A


What is the current behavior?

The inner structural element of list-header is not exposed as a shadow part, preventing users from being able to customize its styles directly.

What is the new behavior?

  • Exposes inner shadow part
  • Adds e2e test coverage for customizing the shadow part

Does this introduce a breaking change?

  • Yes
  • No

@vercel
Copy link

vercel bot commented Jan 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
ionic-framework Ready Ready Preview, Comment Jan 20, 2026 3:15pm

Request Review

@brandyscarney brandyscarney marked this pull request as ready for review January 20, 2026 15:34
@brandyscarney brandyscarney requested a review from a team as a code owner January 20, 2026 15:34
})}
>
<div class="list-header-inner">
<div class="list-header-inner" part="inner">
Copy link
Contributor

Choose a reason for hiding this comment

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

Why would this be considered inner instead of content?

Copy link
Member Author

Choose a reason for hiding this comment

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

Based on our latest discussion this is correct due to #30931

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

Copy link
Member

@ShaneK ShaneK left a comment

Choose a reason for hiding this comment

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

Just a couple nits, which you can ignore if you want. Looks good to me!

*/
configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
test.describe(title('list-header: custom'), () => {
test.describe(title('CSS shadow parts'), () => {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
test.describe(title('CSS shadow parts'), () => {
test.describe('CSS shadow parts', () => {

Nit: The title method just appends mode/direction or mode/direction/palette to the string. In this case, it's redundant to use it in nested describes like this, and usually when we have nested describes we don't use it twice.

/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part inner - The inner container element that wraps the list header content.
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
* @part inner - The inner container element that wraps the list header content.
* @part inner - The inner wrapper element that arranges the list header content.

Nit: Avoid confusing terminology since container is a part

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.

3 participants