Skip to content

feat(item-option): add inner and container parts#30929

Open
brandyscarney wants to merge 2 commits intofeature-8.8from
FW-6794-item-option
Open

feat(item-option): add inner and container parts#30929
brandyscarney wants to merge 2 commits intofeature-8.8from
FW-6794-item-option

Conversation

@brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Jan 19, 2026

Issue number: N/A


What is the current behavior?

The inner structural elements of item-option are not exposed as shadow parts, preventing users from being able to customize their styles directly.

What is the new behavior?

  • Exposes inner and container shadow parts
  • Adds e2e test coverage for customizing the shadow parts

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:08pm

Request Review

@github-actions github-actions bot added the package: core @ionic/core package label Jan 19, 2026
@brandyscarney brandyscarney changed the title feat(item-option): add inner and content parts feat(item-option): add inner and container parts Jan 19, 2026
@brandyscarney brandyscarney marked this pull request as ready for review January 20, 2026 15:33
@brandyscarney brandyscarney requested a review from a team as a code owner January 20, 2026 15:33
@brandyscarney brandyscarney requested a review from thetaPC January 20, 2026 15:33
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.

Looks good! Just a couple nits

*/
configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
test.describe(title('item-option: 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.

* @slot end - Content is placed to the right of the option text in LTR, and to the left in RTL.
*
* @part native - The native HTML button or anchor element that wraps all child elements.
* @part inner - The inner container element that wraps the option 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 option content.
* @part inner - The inner wrapper element that arranges the option 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