Upgrade to 2.12.0 affects `<b-avatar>` default slot content alignment

[Dean-Christian-Armada]

Describe the bug

Upgrade to 2.12.0 destroys <b-avatar> custom texts.

Expected behavior

Before, I was using 2.9.0, when I upgraded to 2.12.0 the vertical alignment is on the very top of the avatar where it was in the middle before the upgrade.

Environment:

• Device: Mac
• OS: macOS Mojave
• Browser: Chrome
• Version: 81

Additional context

I did a little inspect element in Google Chrome and below is the comparison between the <b-avatar> of 2.12.0 and 2.9.0

2.12.0

<span
    data-v-4f060db8=""
    class="b-avatar badge-secondary rounded-circle position-absolute active"
    id="plan-release-button"
    style="width: 4.1em; height: 4.1em;"
    >
      <span class="b-avatar-custom">
        XX<br data-v-4f060db8="" />
        YY 
      </span>
      <!---->
</span>

2.9.0

<span
    data-v-76e35a42=""
    id="plan-release-button"
    class="b-avatar badge-secondary rounded-circle position-absolute active"
    style="width: 4.1em; height: 4.1em;"
  >
    XX<br data-v-76e35a42="" />
    YY
  </span>

The main difference is in 2.12.0, there is a <span class="b-avatar-custom"> inside my span. To be precise, the css rule of height: 100% in b-avatar-custom made my texts vertically aligned. If you commented the height:100% it will become fine again in the center. Below is how I used b-avatar in my VueJS

<b-avatar
      size="4.1em"
      id="plan-release-button"
      variant="secondary"
      class="position-absolute active"
>
      發佈<br />
      計劃
</b-avatar>

[tmorehouse]

A fix is on it's way.

In the meantime, you can use the following css to address it:

.b-avatar .b-avatar-custom {
  align-items: center;
}

Or if using scoped CSS:

.b-avatar /deep/ .b-avatar-custom {
  align-items: center;
}

[tmorehouse]

BootstrapVue v2.13.0 has been released