diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html index 0c1845ec4d24..be889d64e3c9 100644 --- a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html @@ -24,8 +24,8 @@ Option 1 Option 2 diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/index.html b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/index.html index b8f8c8e66b0a..0173c6ab4d21 100644 --- a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/index.html +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/index.html @@ -24,8 +24,8 @@ Option 1 Option 2 diff --git a/web-components/packages/carbon-web-components/src/components/modal/defs.ts b/web-components/packages/carbon-web-components/src/components/modal/defs.ts index bdc98aa99123..be044e6d5c7a 100644 --- a/web-components/packages/carbon-web-components/src/components/modal/defs.ts +++ b/web-components/packages/carbon-web-components/src/components/modal/defs.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020 + * Copyright IBM Corp. 2020, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -22,9 +22,9 @@ export enum MODAL_SIZE { SMALL = 'sm', /** - * Regular size. + * Medium size. */ - REGULAR = '', + MEDIUM = 'md', /** * Large size. diff --git a/web-components/packages/carbon-web-components/src/components/modal/index.ts b/web-components/packages/carbon-web-components/src/components/modal/index.ts index e809f7e933d6..83276a239088 100644 --- a/web-components/packages/carbon-web-components/src/components/modal/index.ts +++ b/web-components/packages/carbon-web-components/src/components/modal/index.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2021 + * Copyright IBM Corp. 2021, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,6 +9,7 @@ import './modal'; import './modal-body'; +import './modal-body-content'; import './modal-close-button'; import './modal-footer'; import './modal-footer-button'; diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-body-content.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-body-content.ts new file mode 100644 index 000000000000..adb583312d2b --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/modal/modal-body-content.ts @@ -0,0 +1,29 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { LitElement, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; +import styles from './modal.scss'; + +/** + * Modal body content + * + * @element cds-modal-body-content + */ +@customElement(`${prefix}-modal-body-content`) +class CDSModalBodyContent extends LitElement { + render() { + return html``; + } + + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader +} + +export default CDSModalBodyContent; diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-body.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-body.ts index 4484e8045370..eef98ee3f38f 100644 --- a/web-components/packages/carbon-web-components/src/components/modal/modal-body.ts +++ b/web-components/packages/carbon-web-components/src/components/modal/modal-body.ts @@ -18,7 +18,7 @@ import styles from './modal.scss'; * @element cds-modal-body */ @customElement(`${prefix}-modal-body`) -class BXModalBody extends LitElement { +class CDSModalBody extends LitElement { render() { return html` `; } @@ -26,4 +26,4 @@ class BXModalBody extends LitElement { static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } -export default BXModalBody; +export default CDSModalBody; diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts index 2a8a20ae049b..bd0d830fbb2e 100644 --- a/web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts +++ b/web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts @@ -23,21 +23,21 @@ import styles from './modal.scss'; * @csspart close-icon The close icon. */ @customElement(`${prefix}-modal-close-button`) -class BXModalCloseButton extends FocusMixin(LitElement) { +class CDSModalCloseButton extends FocusMixin(LitElement) { /** - * The assistive text for the button. + * Specify a label for the close button of the modal; defaults to close */ - @property({ attribute: 'assistive-text' }) - assistiveText = 'Close'; + @property({ attribute: 'close-button-label' }) + closeButtonLabel = 'Close'; render() { - const { assistiveText } = this; + const { closeButtonLabel } = this; return html` '; const input = elem!.querySelector('input'); const button = elem!.querySelector('button'); spyOn(input!, 'focus'); spyOn(button!, 'focus'); - (elem as unknown as BXModal).open = true; + (elem as unknown as CDSModal).open = true; await Promise.resolve(); // For triggering the update cycle of `` await Promise.resolve(); // `update()` in `` waits for child nodes' update cycles to run expect(input!.focus).not.toHaveBeenCalled(); @@ -63,14 +63,14 @@ describe('cds-modal', function () { }); it('Should support using primary button in footer as the primary focus element', async function () { - spyOn(BXModal as any, '_delay').and.callFake(() => {}); + spyOn(CDSModal as any, '_delay').and.callFake(() => {}); elem!.innerHTML = ''; const input = elem!.querySelector('input'); const button = elem!.querySelector('cds-button'); spyOn(input!, 'focus'); spyOn(button as HTMLButtonElement, 'focus'); - (elem as unknown as BXModal).open = true; + (elem as unknown as CDSModal).open = true; await Promise.resolve(); // For triggering the update cycle of `` await Promise.resolve(); // `update()` in `` waits for child nodes' update cycles to run expect(input!.focus).not.toHaveBeenCalled(); @@ -88,7 +88,7 @@ describe('cds-modal', function () { it('Should fire cds-modal-beingclosed/cds-modal-closed events upon hiding', async function () { elem!.innerHTML = ''; - (elem as BXModal).open = true; + (elem as CDSModal).open = true; await Promise.resolve(); const spyBeforeClosed = jasmine.createSpy('before closed'); const spyAfterClosed = jasmine.createSpy('after closed'); @@ -107,16 +107,16 @@ describe('cds-modal', function () { spyOn(button, 'focus'); const modal = elem.appendChild(document.createElement('cds-modal')); await Promise.resolve(); // Wait for initial render - (modal as BXModal).open = true; + (modal as CDSModal).open = true; await Promise.resolve(); - (modal as BXModal).open = false; + (modal as CDSModal).open = false; await Promise.resolve(); expect(button.focus).toHaveBeenCalled(); }); it('Should support preventing modal from being closed upon user gesture', async function () { elem!.innerHTML = ''; - (elem as BXModal).open = true; + (elem as CDSModal).open = true; await Promise.resolve(); const spyAfterClosed = jasmine.createSpy('after closed'); events.on(elem!, 'cds-modal-beingclosed', (event) => { @@ -143,7 +143,7 @@ describe('cds-modal', function () { }); it('Should handle the ESC key to close the modal', async function () { - (elem as BXModal).open = true; + (elem as CDSModal).open = true; await Promise.resolve(); const spyBeforeClosed = jasmine.createSpy('before closed'); const spyAfterClosed = jasmine.createSpy('after closed'); @@ -155,7 +155,7 @@ describe('cds-modal', function () { }) ); await Promise.resolve(); - expect((elem as BXModal).open).toBeFalsy(); + expect((elem as CDSModal).open).toBeFalsy(); expect(spyBeforeClosed).toHaveBeenCalled(); expect(spyAfterClosed).toHaveBeenCalled(); const eventDataBeforeClosed = spyBeforeClosed.calls.argsFor(0)[0].detail; @@ -165,7 +165,7 @@ describe('cds-modal', function () { }); it('Should handle the IE-specific ESC key to close the modal', async function () { - (elem as BXModal).open = true; + (elem as CDSModal).open = true; await Promise.resolve(); const spyBeforeClosed = jasmine.createSpy('before closed'); const spyAfterClosed = jasmine.createSpy('after closed'); @@ -177,7 +177,7 @@ describe('cds-modal', function () { }) ); await Promise.resolve(); - expect((elem as BXModal).open).toBeFalsy(); + expect((elem as CDSModal).open).toBeFalsy(); expect(spyBeforeClosed).toHaveBeenCalled(); expect(spyAfterClosed).toHaveBeenCalled(); const eventDataBeforeClosed = spyBeforeClosed.calls.argsFor(0)[0].detail; @@ -188,7 +188,7 @@ describe('cds-modal', function () { it('Should handle any elements with data-modal-close attribute to close the modal', async function () { elem!.innerHTML = ''; - (elem as BXModal).open = true; + (elem as CDSModal).open = true; await Promise.resolve(); const spyBeforeClosed = jasmine.createSpy('before closed'); const spyAfterClosed = jasmine.createSpy('after closed'); @@ -197,7 +197,7 @@ describe('cds-modal', function () { const closeButton = elem!.querySelector('button') as HTMLElement; closeButton.click(); await Promise.resolve(); - expect((elem as BXModal).open).toBeFalsy(); + expect((elem as CDSModal).open).toBeFalsy(); expect(spyBeforeClosed).toHaveBeenCalled(); expect(spyAfterClosed).toHaveBeenCalled(); const eventDataBeforeClosed = spyBeforeClosed.calls.argsFor(0)[0].detail; @@ -207,7 +207,7 @@ describe('cds-modal', function () { }); it('Should handle any click outside the modal element to close the modal', async function () { - (elem as BXModal).open = true; + (elem as CDSModal).open = true; await Promise.resolve(); const spyBeforeClosed = jasmine.createSpy('before closed'); const spyAfterClosed = jasmine.createSpy('after closed'); @@ -215,7 +215,7 @@ describe('cds-modal', function () { events.on(elem!, 'cds-modal-closed', spyAfterClosed); elem!.dispatchEvent(new CustomEvent('click', { bubbles: true })); await Promise.resolve(); - expect((elem as BXModal).open).toBeFalsy(); + expect((elem as CDSModal).open).toBeFalsy(); expect(spyBeforeClosed).toHaveBeenCalled(); expect(spyAfterClosed).toHaveBeenCalled(); const eventDataBeforeHidden = spyBeforeClosed.calls.argsFor(0)[0].detail; @@ -250,16 +250,16 @@ describe('cds-modal', function () { }); it('Should support forward focus-wrap', async function () { - spyOn(BXModal as any, '_delay').and.callFake(() => {}); - (elem as BXModal).open = true; + spyOn(CDSModal as any, '_delay').and.callFake(() => {}); + (elem as CDSModal).open = true; await Promise.resolve(); buttonAfter!.focus(); expect(document.activeElement).toBe(elem!.querySelectorAll('input')[0]); }); it('Should support backward focus-wrap', async function () { - spyOn(BXModal as any, '_delay').and.callFake(() => {}); - (elem as BXModal).open = true; + spyOn(CDSModal as any, '_delay').and.callFake(() => {}); + (elem as CDSModal).open = true; await Promise.resolve(); buttonBefore!.focus(); expect(document.activeElement).toBe(elem!.querySelectorAll('input')[1]);