docs: add more to parityList

feat(BAlert)!: rename slot dismissible to close

feat(ButtonToolbar): make prop role

feat(CloseButton): emit click event up

Author: VividLemon

apps/docs/docs/reference/parityList.md

@@ -20,7 +20,6 @@ interface BAccordionProps {
 const props = withDefaults(defineProps<BAccordionProps>(), {
   flush: false,
   free: false,
-  id: undefined,
 })
 
 const computedId = useId(toRef(props, 'id'), 'accordion')

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

@@ -2,8 +2,8 @@
   <div v-if="isAlertVisible" ref="element" class="alert" role="alert" :class="classes">
     <slot />
     <template v-if="dismissibleBoolean">
-      <button v-if="$slots.dismissible" type="button" data-bs-dismiss="alert" @click="closeClicked">
-        <slot name="dismiss" />
+      <button v-if="$slots.close" type="button" data-bs-dismiss="alert" @click="closeClicked">
+        <slot name="close" />
       </button>
       <b-close-button
         v-else

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

@@ -29,12 +29,12 @@
 import {isEmptySlot, isNumeric, toFloat} from '../../utils'
 import type {BAvatarGroupParentData} from '../../types/components'
 import {computed, inject, StyleValue, toRef, useSlots} from 'vue'
-import type {Booleanish, ColorVariant} from '../../types'
+import type {Booleanish, ColorVariant, TextColorVariant} from '../../types'
 import {injectionKey} from './BAvatarGroup.vue'
 import {useBooleanish} from '../../composables'
 
 interface BAvatarProps {
-  alt?: string // TODO each complex variant should contain a note about it's type
+  alt?: string
   ariaLabel?: string
   badge?: boolean | string
   badgeLeft?: Booleanish
@@ -46,12 +46,11 @@ interface BAvatarProps {
   disabled?: Booleanish
   icon?: string
   rounded?: boolean | string
-  size?: 'sm' | 'md' | 'lg' | string
-  // size?: InputSize | string
+  size?: 'sm' | 'md' | 'lg' | string // InputSize | string
   square?: Booleanish
   src?: string
   text?: string
-  textVariant?: ColorVariant
+  textVariant?: TextColorVariant
   variant?: ColorVariant
 }
 
@@ -185,6 +184,7 @@ const marginStyle = computed(() => {
   return value ? {marginLeft: value, marginRight: value} : {}
 })
 
+// TODO this is incorrect. If buttonType is 'submit' and prop button is true, it will break the component
 const tag = computed<string>(() => (buttonBoolean.value ? props.buttonType : 'span'))
 const tagStyle = computed(() => ({
   ...marginStyle.value,

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

@@ -18,8 +18,7 @@ import {computeSize} from './BAvatar.vue'
 interface BAvatarGroupProps {
   overlap?: number | string
   rounded?: boolean | string
-  size?: 'sm' | 'md' | 'lg' | string
-  // size?: InputSize | string
+  size?: 'sm' | 'md' | 'lg' | string // size?: InputSize | string
   square?: Booleanish
   tag?: string
   variant?: ColorVariant

packages/bootstrap-vue-3/src/components/BAvatar/BAvatarGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes" class="btn-toolbar" role="toolbar" :aria-label="ariaLabel">
+  <div :class="classes" class="btn-toolbar" :role="role" :aria-label="ariaLabel">
     <slot />
   </div>
 </template>
@@ -13,10 +13,12 @@ import {useBooleanish} from '../../composables'
 interface BButtonToolbarProps {
   ariaLabel?: string
   justify?: Booleanish
+  role?: string
   // keyNav?: Booleanish
 }
 
 const props = withDefaults(defineProps<BButtonToolbarProps>(), {
+  role: 'toolbar',
   ariaLabel: 'Group',
   justify: false,
 })

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

@@ -5,6 +5,7 @@
     :disabled="disabledBoolean"
     :class="classes"
     :aria-label="ariaLabel"
+    @click="emit('click', $event)"
   />
 </template>
 
@@ -15,9 +16,9 @@ import type {Booleanish, ButtonType} from '../../types'
 import {useBooleanish} from '../../composables'
 
 interface BCloseButtonProps {
+  ariaLabel?: string
   disabled?: Booleanish
   white?: Booleanish
-  ariaLabel?: string
   type?: ButtonType
 }
 
@@ -28,6 +29,12 @@ const props = withDefaults(defineProps<BCloseButtonProps>(), {
   type: 'button',
 })
 
+interface BCloseButtonEmits {
+  (e: 'click', value: MouseEvent): void
+}
+
+const emit = defineEmits<BCloseButtonEmits>()
+
 const disabledBoolean = useBooleanish(toRef(props, 'disabled'))
 const whiteBoolean = useBooleanish(toRef(props, 'white'))
 

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

@@ -8,6 +8,8 @@ import type {Booleanish} from '../../types'
 import {useBooleanish} from '../../composables'
 import {computed, toRef} from 'vue'
 
+// TODO how does this separate from a simple b-img?
+
 interface BCardImgProps {
   alt?: string
   bottom?: Booleanish