feat(b-button-close): add content prop (closes #4527)

src/components/button/button-close.js

@@ -7,6 +7,10 @@ import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
 const NAME = 'BButtonClose'
 
 const props = {
+  content: {
+    type: String,
+    default: () => getComponentConfig(NAME, 'content')
+  },
   disabled: {
     type: Boolean,
     default: false
@@ -53,7 +57,7 @@ export const BButtonClose = /*#__PURE__*/ Vue.extend({
     }
     // Careful not to override the default slot with innerHTML
     if (!hasNormalizedSlot('default', $scopedSlots, $slots)) {
-      componentData.domProps = { innerHTML: '×' }
+      componentData.domProps = { innerHTML: props.content }
     }
     return h(
       'button',

src/components/button/button-close.spec.js

@@ -7,23 +7,23 @@ describe('button-close', () => {
     expect(wrapper.is('button')).toBe(true)
   })
 
-  it('has class close', async () => {
+  it('has class "close"', async () => {
     const wrapper = mount(BButtonClose)
     expect(wrapper.classes()).toContain('close')
     expect(wrapper.classes().length).toBe(1)
   })
 
-  it('has attribute type=button', async () => {
+  it('has attribute type="button"', async () => {
     const wrapper = mount(BButtonClose)
     expect(wrapper.attributes('type')).toBe('button')
   })
 
-  it('does not have attribute disabled by default', async () => {
+  it('does not have attribute "disabled" by default', async () => {
     const wrapper = mount(BButtonClose)
     expect(wrapper.attributes('disabled')).not.toBeDefined()
   })
 
-  it('has attribute disabled when prop disabled is set', async () => {
+  it('has attribute "disabled" when prop "disabled" is set', async () => {
     const wrapper = mount(BButtonClose, {
       context: {
         props: { disabled: true }
@@ -32,12 +32,12 @@ describe('button-close', () => {
     expect(wrapper.attributes('disabled')).toBeDefined()
   })
 
-  it('has attribute aria-label=Close by default', async () => {
+  it('has attribute aria-label="Close" by default', async () => {
     const wrapper = mount(BButtonClose)
     expect(wrapper.attributes('aria-label')).toBe('Close')
   })
 
-  it('has custom attribute aria-label=Close when prop aria-label set', async () => {
+  it('has custom attribute "aria-label" when prop "aria-label" set', async () => {
     const wrapper = mount(BButtonClose, {
       context: {
         props: { ariaLabel: 'foobar' }
@@ -46,7 +46,7 @@ describe('button-close', () => {
     expect(wrapper.attributes('aria-label')).toBe('foobar')
   })
 
-  it('has variant class when variant prop set', async () => {
+  it('has text variant class when "variant" prop set', async () => {
     const wrapper = mount(BButtonClose, {
       context: {
         props: { textVariant: 'primary' }
@@ -63,6 +63,15 @@ describe('button-close', () => {
     expect(wrapper.text()).toContain('×')
   })
 
+  it('should have custom content from "content" prop', async () => {
+    const wrapper = mount(BButtonClose, {
+      context: {
+        props: { content: 'Close' }
+      }
+    })
+    expect(wrapper.text()).toContain('Close')
+  })
+
   it('should have custom content from default slot', async () => {
     const wrapper = mount(BButtonClose, {
       slots: {

src/components/button/package.json

@@ -51,6 +51,13 @@
         "aliases": [
           "BBtnClose"
         ],
+        "props": [
+          {
+            "prop": "content",
+            "version": "2.3.0",
+            "description": "The content of the close button"
+          }
+        ],
         "events": [
           {
             "event": "click",

src/components/modal/modal.js

@@ -231,6 +231,10 @@ export const props = {
     type: [HTMLElement, String, Object],
     default: null
   },
+  headerCloseContent: {
+    type: String,
+    default: () => getComponentConfig(NAME, 'headerCloseContent')
+  },
   headerCloseLabel: {
     type: String,
     default: () => getComponentConfig(NAME, 'headerCloseLabel')
@@ -827,6 +831,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
               {
                 ref: 'close-button',
                 props: {
+                  content: this.headerCloseContent,
                   disabled: this.isTransitioning,
                   ariaLabel: this.headerCloseLabel,
                   textVariant: this.headerCloseVariant || this.headerTextVariant

src/components/modal/package.json

@@ -129,6 +129,11 @@
             "prop": "cancelDisabled",
             "description": "Places the default footer Cancel button in the disabled state"
           },
+          {
+            "prop": "headerCloseContent",
+            "version": "2.3.0",
+            "description": "Content of the header close button"
+          },
           {
             "prop": "headerCloseLabel",
             "description": "Value of the 'aria-label' on the header close button"

src/utils/config-defaults.js

@@ -59,6 +59,7 @@ export default deepFreeze({
     variant: 'secondary'
   },
   BButtonClose: {
+    content: '×',
     // `textVariant` is `null` to inherit the current text color
     textVariant: null,
     ariaLabel: 'Close'
@@ -134,6 +135,7 @@ export default deepFreeze({
     cancelVariant: 'secondary',
     okTitle: 'OK',
     okVariant: 'primary',
+    headerCloseContent: '×',
     headerCloseLabel: 'Close'
   },
   BNavbar: {