Repository: ionic-team/ionic-framework
File: core/src/components/badge/test/shape/badge.e2e.ts (TypeScript)

Code before:
      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-small-size-long-text`));
    });

    test('should render soft badges with icon for small size', async ({ page }) => {
      await page.setContent(
        `
        <div id="container">
          <ion-badge shape="soft" size="small">
            <ion-icon name="logo-ionic"></ion-icon>
          </ion-badge>
        </div>
      `,
        config
      );

      const container = page.locator('#container');

      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-small-size-icon`));
    });

    test('should render soft badges for larger sizes', async ({ page }) => {
      await page.setContent(
        `
        <div id="container">
          <ion-badge shape="soft" size="medium">1</ion-badge>
          <ion-badge shape="soft" size="large">1</ion-badge>
        </div>
      `,
        config
      );

      const container = page.locator('#container');

      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-larger-sizes`));
    });

    test('should render soft badges with long text for larger sizes', async ({ page }) => {
      await page.setContent(
        `
        <div id="container">
          <ion-badge shape="soft" size="medium">99+</ion-badge>
        </div>
      `,
        config
      );

      const container = page.locator('#container');

      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-larger-sizes-long-text`));
    });


Review comment (bug):
```suggestion
```
I think you meant to get rid of this, there are no styles for it and it looks broken in [the screenshots](https://github.com/ionic-team/ionic-framework/pull/30392/files#diff-3209f20c6b8bb4ff64e342bf437c92ba8e819932945a8de290e88a1bd7df7e5a). However, I do think you should still have styles for the sizes that aren't supported for a type but are choices so they don't just break like this. I think you should copy the styles for the closest one that is supported. For example, in this case, I think the `large` size should have taken on the medium styles.

Code after:
      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-small-size-long-text`));
    });

    test('should render soft badges with icon for small size', async ({ page }) => {
      await page.setContent(
        `
        <div id="container">
          <ion-badge shape="soft" size="small">
            <ion-icon name="logo-ionic"></ion-icon>
          </ion-badge>
        </div>
      `,
        config
      );

      const container = page.locator('#container');

      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-small-size-icon`));
    });

    test('should render soft badges for larger sizes', async ({ page }) => {
      await page.setContent(
        `
        <div id="container">
          <ion-badge shape="soft" size="medium">1</ion-badge>
        </div>
      `,
        config
      );

      const container = page.locator('#container');

      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-larger-sizes`));
    });

    test('should render soft badges with long text for larger sizes', async ({ page }) => {
      await page.setContent(
        `
        <div id="container">
          <ion-badge shape="soft" size="medium">99+</ion-badge>
        </div>
      `,
        config
      );

      const container = page.locator('#container');

      await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-larger-sizes-long-text`));
    });

    test('should render soft badges with icon for larger sizes', async ({ page }) => {