diff --git a/src/components/button/button-close.js b/src/components/button/button-close.js index 8d7d37c6caf..5b749ef4008 100644 --- a/src/components/button/button-close.js +++ b/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', diff --git a/src/components/button/button-close.spec.js b/src/components/button/button-close.spec.js index cd7b92247cc..aa8bf31e07b 100644 --- a/src/components/button/button-close.spec.js +++ b/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: { diff --git a/src/components/button/package.json b/src/components/button/package.json index ec15122b210..c6a83bbd0d4 100644 --- a/src/components/button/package.json +++ b/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", diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js index 7d7715a9c94..9f33c7ee16c 100644 --- a/src/components/modal/modal.js +++ b/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 diff --git a/src/components/modal/package.json b/src/components/modal/package.json index 661cb239bd8..54b177ba3a2 100644 --- a/src/components/modal/package.json +++ b/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" diff --git a/src/utils/config-defaults.js b/src/utils/config-defaults.js index 0c1d5fe4662..4742fc11842 100644 --- a/src/utils/config-defaults.js +++ b/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: {