Repository: ionic-team/ionic-framework
File: core/src/components/badge/badge.tsx (TypeScript)

Code before:
   * Set to `"top"` to position the badge on top right absolute position of the parent element.
   * Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
   */
  @Prop() vertical?: 'top' | 'bottom';

  private getShape(): string | undefined {
    const theme = getIonTheme(this);
    const { shape } = this;

    // TODO(ROU-10777): Remove theme check when shapes are defined for all themes.
    if (theme !== 'ionic') {
      return undefined;
    }

    if (shape === undefined) {
      return 'round';
    }

    return shape;
  }

  private getSize(): string | undefined {
    const theme = getIonTheme(this);
    const { size } = this;

    // TODO(RFW-6355): Remove theme check when sizes are defined for all themes.
    if (theme !== 'ionic') {
      return undefined;
    }

    if (size === undefined) {
      return 'small';
    }

    return size;
  }

  // The 'subtle' hue is the default for badges containing text or icons
  // The 'bold' hue is used when inside of an avatar, button, tab button,
  // or when the badge is empty (no text or icon).
  private getHue(): string | undefined {
    const { hue } = this;

    if (hue !== undefined) {
      return hue;
    }

    const inAvatar = hostContext('ion-avatar', this.el);
    const inButton = hostContext('ion-button', this.el);
    const inTabButton = hostContext('ion-tab-button', this.el);
    const hasContent = this.el.textContent?.trim() !== '' || this.el.querySelector('ion-icon') !== null;

Review comment (suggestion):
```suggestion
    // TODO(FW-6355): Remove theme check when sizes are defined for all themes.
```

Code after:
   * Set to `"top"` to position the badge on top right absolute position of the parent element.
   * Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
   */
  @Prop() vertical?: 'top' | 'bottom';

  private getShape(): string | undefined {
    const theme = getIonTheme(this);
    const { shape } = this;

    // TODO(ROU-10777): Remove theme check when shapes are defined for all themes.
    if (theme !== 'ionic') {
      return undefined;
    }

    if (shape === undefined) {
      return 'round';
    }

    return shape;
  }

  private getSize(): string | undefined {
    const theme = getIonTheme(this);
    const { size } = this;

    // TODO(FW-6355): Remove theme check when sizes are defined for all themes.
    if (theme !== 'ionic') {
      return undefined;
    }

    if (size === undefined) {
      return 'small';
    }

    return size;
  }

  // The 'subtle' hue is the default for badges containing text or icons
  // The 'bold' hue is used when inside of an avatar, button, tab button,
  // or when the badge is empty (no text or icon).
  private getHue(): string | undefined {
    const { hue } = this;

    if (hue !== undefined) {
      return hue;
    }

    const inAvatar = hostContext('ion-avatar', this.el);
    const inButton = hostContext('ion-button', this.el);
    const inTabButton = hostContext('ion-tab-button', this.el);
    const hasContent = this.el.textContent?.trim() !== '' || this.el.querySelector('ion-icon') !== null;