fix(item): use thumbnail's size when present

[thetaPC]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

The --size from ion-thumbnail is being overwritten when component is placed inside ion-item by ion-item's slotted styling.

This contradicts the behavior described in the ion-thumbnail documentation.

Thumbnails can be used by themselves or inside of any element. If placed inside of an ion-item, the thumbnail will resize to fit the parent component.

Issue URL: resolves #22935

What is the new behavior?

• ion-item will set a default value for ion-thumbnail's --size when present

Passes a default size to thumbnail when slotted.

Does this introduce a breaking change?

• Yes
• No

Other information

N/A

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[liamdebeasi]

The changes look great! Could we add a test so this does not regress?

Maybe something like this:

test('size should be customizable in item', async ({ page, skip }) => {
  skip.rtl();

  await page.setContent(`
    <ion-item>
      <ion-thumbnail style="--size: 20px">
        <img src="/src/components/thumbnail/test/thumbnail.svg" />
      </ion-thumbnail>
    </ion-item>
  `);
  const item = page.locator('ion-item');
  await expect(item).toHaveScreenshot(`item-thumbnail-size-${page.getSnapshotSettings()}.png`);
});

We will want to test iOS and MD mode since we are updating the code for both modes. However, we can skip the LTR vs RTL tests. The focus of this test should be ensuring that developers can use the --size API on ion-thumbnail to customize its size even when used inside of ion-item.

edit:

You can also add this inside of the test body:

test.info().annotations.push({
  type: 'issue',
  description: 'https://github.com/ionic-team/ionic-framework/issues/22935',
});

This adds a Custom Playwright Annotation to indicate that this test was added to verify a particular bug fix.

[brandyscarney]

Looks great!