feat(BAlert): slot dismissible overwrites close

refactor(BModal): slot header-close is either or on close icon

refactor(BOffcanvas): button with static class btn-close is refactored to use BCloseButton

refactor(BFormTag): button with static class btn-close is refactored to use BCloseButton

feat(BCloseButton): add in optional prop type to override type=button default

test(close-button): include test for optional prop type

test(offcanvas): refactor to include BCloseButton changes

test(container): include enableAutoUnmount

test(alert): refactor to include BCloseButtonChanges

chore(_button.scss): remove unused class after close button changes

Author: VividLemon

packages/bootstrap-vue-3/src/components/BAlert.vue

@@ -1,14 +1,22 @@
 <template>
   <div v-if="isAlertVisible" ref="element" class="alert" role="alert" :class="classes">
     <slot />
-    <button
-      v-if="dismissibleBoolean"
-      type="button"
-      class="btn-close"
-      data-bs-dismiss="alert"
-      :aria-label="dismissLabel"
-      @click="dismissClicked"
-    />
+    <template v-if="dismissibleBoolean">
+      <button
+        v-if="$slots.dismissible"
+        type="button"
+        data-bs-dismiss="alert"
+        @click="dismissClicked"
+      >
+        <slot name="dismissible" />
+      </button>
+      <b-close-button
+        v-else
+        :aria-label="dismissLabel"
+        data-bs-dismiss="alert"
+        @click="dismissClicked"
+      />
+    </template>
   </div>
 </template>
 
@@ -19,6 +27,7 @@ import {computed, onBeforeUnmount, ref, toRef, watch} from 'vue'
 import {Alert} from 'bootstrap'
 import {toInteger} from '../utils'
 import {useBooleanish} from '../composables'
+import BCloseButton from './BButton/BCloseButton.vue'
 
 interface BAlertProps {
   dismissLabel?: string

packages/bootstrap-vue-3/src/components/BButton/BCloseButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    type="button"
+    :type="type"
     class="btn-close"
     :disabled="disabledBoolean"
     :class="classes"
@@ -11,19 +11,21 @@
 <script setup lang="ts">
 // import type {BCloseButtonProps} from '../../types/components'
 import {computed, toRef} from 'vue'
-import type {Booleanish} from '../../types'
+import type {Booleanish, ButtonType} from '../../types'
 import {useBooleanish} from '../../composables'
 
 interface BCloseButtonProps {
   disabled?: Booleanish
   white?: Booleanish
   ariaLabel?: string
+  type?: ButtonType
 }
 
 const props = withDefaults(defineProps<BCloseButtonProps>(), {
   ariaLabel: 'Close',
   disabled: false,
   white: false,
+  type: 'button',
 })
 
 const disabledBoolean = useBooleanish(toRef(props, 'disabled'))

packages/bootstrap-vue-3/src/components/BButton/_button.scss

@@ -1,8 +1,3 @@
-.btn-close.btn-close-content {
-  background: transparent;
-  padding: 0px;
-}
-
 .btn {
   position: relative;
 

packages/bootstrap-vue-3/src/components/BButton/close-button.spec.ts

@@ -10,11 +10,18 @@ describe('close-button', () => {
     expect(wrapper.classes()).toContain('btn-close')
   })
 
-  it('has static attr type as button', () => {
+  it('has attr type to be button by default', () => {
     const wrapper = mount(BCloseButton)
     expect(wrapper.attributes('type')).toBe('button')
   })
 
+  it('has attr type to be prop type', () => {
+    const wrapper = mount(BCloseButton, {
+      props: {type: 'submit'},
+    })
+    expect(wrapper.attributes('type')).toBe('submit')
+  })
+
   it('has attr aria-label when prop ariaLabel', async () => {
     const wrapper = mount(BCloseButton, {
       props: {ariaLabel: 'foobar'},

packages/bootstrap-vue-3/src/components/BFormTags/BFormTag.vue

@@ -10,17 +10,15 @@
     <span :id="taglabelId" class="b-form-tag-content flex-grow-1 text-truncate">
       <slot>{{ tagText }}</slot>
     </span>
-    <button
+    <b-close-button
       v-if="!disabledBoolean && !noRemoveBoolean"
       aria-keyshortcuts="Delete"
       type="button"
       :aria-label="removeLabel"
-      class="btn-close b-form-tag-remove"
-      :class="{
-        'btn-close-white': !['warning', 'info', 'light'].includes(variant),
-      }"
-      :aria-controls="id"
+      class="b-form-tag-remove"
+      :white="!['warning', 'info', 'light'].includes(variant)"
       :aria-describedby="taglabelId"
+      :aria-controls="id"
       @click="emit('remove', tagText)"
     />
   </component>
@@ -31,6 +29,7 @@
 import {computed, toRef, useSlots, VNodeNormalizedChildren} from 'vue'
 import {useBooleanish, useId} from '../../composables'
 import type {Booleanish, ColorVariant} from '../../types'
+import BCloseButton from '../BButton/BCloseButton.vue'
 
 interface BFormTagProps {
   id?: string

packages/bootstrap-vue-3/src/components/BModal.vue

@@ -17,17 +17,24 @@
                 {{ title }}
               </slot>
             </component>
-            <button
-              v-if="!hideHeaderCloseBoolean"
-              type="button"
-              class="btn-close"
-              :class="computedCloseButtonClasses"
-              data-bs-dismiss="modal"
-              :aria-label="headerCloseLabel"
-              @click="hide()"
-            >
-              <slot name="header-close" />
-            </button>
+            <template v-if="!hideHeaderCloseBoolean">
+              <button
+                v-if="$slots['header-close']"
+                type="button"
+                data-bs-dismiss="modal"
+                @click="hide()"
+              >
+                <slot name="header-close" />
+              </button>
+              <b-close-button
+                v-else
+                type="button"
+                :aria-label="headerCloseLabel"
+                data-bs-dismiss="modal"
+                :white="headerCloseWhiteBoolean"
+                @click="hide()"
+              />
+            </template>
           </div>
           <div class="modal-body" :class="computedBodyClasses">
             <slot />
@@ -245,15 +252,6 @@ const computedTitleClasses = computed(() => [
   props.titleClass,
 ])
 
-const hasHeaderCloseSlot = computed<boolean>(() => !!slots['header-close'])
-const computedCloseButtonClasses = computed(() => [
-  {
-    [`btn-close-content`]: hasHeaderCloseSlot.value,
-    [`d-flex`]: hasHeaderCloseSlot.value,
-    [`btn-close-white`]: !hasHeaderCloseSlot.value && headerCloseWhiteBoolean.value,
-  },
-])
-
 const disableCancel = computed<boolean>(() => cancelDisabledBoolean.value || busyBoolean.value)
 const disableOk = computed<boolean>(() => okDisabledBoolean.value || busyBoolean.value)
 

packages/bootstrap-vue-3/src/components/BOffcanvas.vue

@@ -14,17 +14,12 @@
           {{ title }}
         </slot>
       </h5>
-      <button
+      <b-close-button
         type="button"
-        class="btn-close text-reset"
+        class="text-reset"
         data-bs-dismiss="offcanvas"
         :aria-label="dismissLabel"
       />
-      <!-- TODO in v0.2.10 this was fixed to include a dynamic aria-label -->
-      <!-- My note still persists, that perhaps we should include native multilanguage support similar to Vuetify -->
-      <!-- Regardless, if native multilanguage support is included or not, -->
-      <!-- It will need to be reviewed through and ensure that any aria-{type} can be modified by a user -->
-      <!-- of course, ignoring true static aria tags like the above aria-labelledby -->
     </div>
     <div class="offcanvas-body">
       <slot />
@@ -38,6 +33,7 @@ import {computed, onMounted, ref, toRef, watch} from 'vue'
 import {Offcanvas} from 'bootstrap'
 import {useBooleanish, useEventListener} from '../composables'
 import type {Booleanish} from '../types'
+import BCloseButton from './BButton/BCloseButton.vue'
 
 interface BOffcanvasProps {
   dismissLabel?: string

packages/bootstrap-vue-3/src/components/alert.spec.ts

@@ -1,6 +1,7 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
 import {afterEach, describe, expect, it} from 'vitest'
 import BAlert from './BAlert.vue'
+import BCloseButton from './BButton/BCloseButton.vue'
 
 describe('alert', () => {
   enableAutoUnmount(afterEach)
@@ -95,65 +96,127 @@ describe('alert', () => {
     expect(wrapper.text()).toBe('foobar')
   })
 
-  it('has button child if prop dismissible', () => {
+  it('does not have BCloseButton when prop dismissible is false', () => {
     const wrapper = mount(BAlert, {
-      props: {modelValue: true, dismissible: true},
+      props: {dismissible: false},
     })
-    const $button = wrapper.find('button')
-    expect($button.exists()).toBe(true)
+    const $closebutton = wrapper.findComponent(BCloseButton)
+    expect($closebutton.exists()).toBe(false)
   })
 
-  it('does not have button child if prop dismissible false', () => {
+  it('button is BCloseButton when not slot dismissible', () => {
     const wrapper = mount(BAlert, {
-      props: {modelValue: true, dismissible: false},
+      props: {dismissible: true, modelValue: true},
     })
-    const $button = wrapper.find('button')
-    expect($button.exists()).toBe(false)
+    const $closebutton = wrapper.findComponent(BCloseButton)
+    expect($closebutton.exists()).toBe(true)
   })
 
-  it('button child has static attribute type button', () => {
+  it('BCloseButton is given prop ariaLabel to be dismissLabel', () => {
+    const wrapper = mount(BAlert, {
+      props: {dismissible: true, modelValue: true, dismissLabel: 'foobar'},
+    })
+    const $closebutton = wrapper.getComponent(BCloseButton)
+    expect($closebutton.props('ariaLabel')).toBe('foobar')
+  })
+
+  it('BCloseButton has attr data-bs-dismiss to be alert', () => {
+    const wrapper = mount(BAlert, {
+      props: {dismissible: true, modelValue: true},
+    })
+    const $closebutton = wrapper.getComponent(BCloseButton)
+    expect($closebutton.attributes('data-bs-dismiss')).toBe('alert')
+  })
+
+  it('button child on click emits update:modelValue', async () => {
     const wrapper = mount(BAlert, {
       props: {modelValue: true, dismissible: true},
     })
     const $button = wrapper.get('button')
-    expect($button.attributes('type')).toBe('button')
+    await $button.trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
   })
 
-  it('button child has static class btn-close', () => {
+  it('button child on click emits dismissed', async () => {
     const wrapper = mount(BAlert, {
       props: {modelValue: true, dismissible: true},
     })
     const $button = wrapper.get('button')
-    expect($button.classes()).toContain('btn-close')
+    await $button.trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('dismissed')
   })
 
-  it('button child has static attribute data-bs-dismiss alert', () => {
+  it('button child on click emits update:modelValue and gives value false if prop modelValue boolean', async () => {
     const wrapper = mount(BAlert, {
       props: {modelValue: true, dismissible: true},
     })
     const $button = wrapper.get('button')
-    expect($button.attributes('data-bs-dismiss')).toBe('alert')
+    await $button.trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    const [event] = wrapper.emitted('update:modelValue') ?? []
+    expect(event).toEqual([false])
   })
 
-  it('button child has aria-label Close by default', () => {
+  it('button child on click emits update:modelValue and gives value 0 if prop modelValue number', async () => {
+    const wrapper = mount(BAlert, {
+      props: {modelValue: 1000, dismissible: true},
+    })
+    const $button = wrapper.get('button')
+    await $button.trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    const [event] = wrapper.emitted('update:modelValue') ?? []
+    expect(event).toEqual([0])
+  })
+
+  it('does not have BCloseButton when slot dismissible', () => {
+    const wrapper = mount(BAlert, {
+      props: {dismissible: true, modelValue: true},
+      slots: {dismissible: 'foobar'},
+    })
+    const $closebutton = wrapper.findComponent(BCloseButton)
+    expect($closebutton.exists()).toBe(false)
+  })
+
+  it('has button child if prop dismissible and slot dismissible', () => {
+    const wrapper = mount(BAlert, {
+      props: {modelValue: true, dismissible: true},
+      slots: {dismissible: 'foobar'},
+    })
+    const $button = wrapper.find('button')
+    expect($button.exists()).toBe(true)
+  })
+
+  it('does not have button child if prop dismissible false', () => {
+    const wrapper = mount(BAlert, {
+      props: {modelValue: true, dismissible: false},
+      slots: {dismissible: 'foobar'},
+    })
+    const $button = wrapper.find('button')
+    expect($button.exists()).toBe(false)
+  })
+
+  it('button child has static attribute type button', () => {
     const wrapper = mount(BAlert, {
       props: {modelValue: true, dismissible: true},
+      slots: {dismissible: 'foobar'},
     })
     const $button = wrapper.get('button')
-    expect($button.attributes('aria-label')).toBe('Close')
+    expect($button.attributes('type')).toBe('button')
   })
 
-  it('button child has aria-label prop dismissLabel', () => {
+  it('button child has static attribute data-bs-dismiss alert', () => {
     const wrapper = mount(BAlert, {
-      props: {modelValue: true, dismissible: true, dismissLabel: 'foobar'},
+      props: {modelValue: true, dismissible: true},
+      slots: {dismissible: 'foobar'},
     })
     const $button = wrapper.get('button')
-    expect($button.attributes('aria-label')).toBe('foobar')
+    expect($button.attributes('data-bs-dismiss')).toBe('alert')
   })
 
   it('button child on click emits update:modelValue', async () => {
     const wrapper = mount(BAlert, {
       props: {modelValue: true, dismissible: true},
+      slots: {dismissible: 'foobar'},
     })
     const $button = wrapper.get('button')
     await $button.trigger('click')
@@ -163,6 +226,7 @@ describe('alert', () => {
   it('button child on click emits dismissed', async () => {
     const wrapper = mount(BAlert, {
       props: {modelValue: true, dismissible: true},
+      slots: {dismissible: 'foobar'},
     })
     const $button = wrapper.get('button')
     await $button.trigger('click')
@@ -172,6 +236,7 @@ describe('alert', () => {
   it('button child on click emits update:modelValue and gives value false if prop modelValue boolean', async () => {
     const wrapper = mount(BAlert, {
       props: {modelValue: true, dismissible: true},
+      slots: {dismissible: 'foobar'},
     })
     const $button = wrapper.get('button')
     await $button.trigger('click')
@@ -183,6 +248,7 @@ describe('alert', () => {
   it('button child on click emits update:modelValue and gives value 0 if prop modelValue number', async () => {
     const wrapper = mount(BAlert, {
       props: {modelValue: 1000, dismissible: true},
+      slots: {dismissible: 'foobar'},
     })
     const $button = wrapper.get('button')
     await $button.trigger('click')

packages/bootstrap-vue-3/src/components/container.spec.ts

@@ -3,6 +3,8 @@ import {afterEach, describe, expect, it} from 'vitest'
 import BContainer from './BContainer.vue'
 
 describe('container', () => {
+  enableAutoUnmount(afterEach)
+
   it('renders default slot', () => {
     const wrapper = mount(BContainer, {
       slots: {default: 'foobar'},